/* ByJorinde shared stylesheet. Tokens first, components after. Values live only in :root. */
@font-face { font-family: 'MinervaModern'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/MinervaModern-Regular.woff2') format('woff2'); }

:root {
  --color-orange: #D5570E;
  --color-cream: #F5EDD4;
  --color-page: #F5F3EC;
  --color-white: #FFFFFF;
  --color-text: #383737;
  --color-text-muted: #6F6D6D;
  --color-text-on-dark: #FFFFFF;
  --color-overlay-home: rgba(20, 14, 10, 0.10);
  --color-scrim-home: rgba(20, 14, 10, 0.38);
  --scrim-home-stop: 55%;
  --color-overlay-banner: rgba(20, 14, 10, 0.16);
  --color-card: #F7F1EE;
  --color-heading: #000000;
  --color-nav-bg: rgba(255, 255, 255, 0.92);
  --color-nav-line: rgba(56, 55, 55, 0.10);
  --color-tile-wash: rgba(255, 255, 255, 0.72);
  --color-tile-wash-hover: rgba(255, 255, 255, 0.40);
  --color-lightbox: rgba(10, 8, 6, 0.94);
  --color-lightbox-ctrl: rgba(255, 255, 255, 0.60);
  --font-heading: 'MinervaModern', Georgia, serif;
  --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-quote: 'Cormorant Garamond', Georgia, serif;
  --nav-h: 80px;
  --nav-h-mobile: 64px;
  --section-pad-y: 160px;
  --testimonials-pad-y: 96px;
  --block-gap: 200px;
  --section-pad-x: 80px;
  --section-pad-y-mobile: 64px;
  --section-pad-x-mobile: 24px;
  --content-w: 640px;
  --wide-w: 1120px;
  --hero-title-size: clamp(2.6rem, 6.6vw, 5.4rem);
  --heading-size: clamp(2.4rem, 5.85vw, 5rem);
  --banner-title-size: clamp(1.8rem, 3.6vw, 3rem);
  --card-title-size: clamp(1.9rem, 4.5vw, 3.8rem);
  --accent-title-size: clamp(1.25rem, 1.9vw, 1.55rem);
  --quote-size: 1.55rem;
  --body-size: 1.125rem;
  --body-lh: 1.8;
  --small-size: 0.9rem;
  --nav-size: 0.78rem;
  --btn-size: 0.78rem;
  --tracking-none: 0;
  --pager-size: clamp(1.8rem, 4vw, 3.4rem);
  --pager-gap: 72px;
  --chev-size: 1.4em;
  --chev-shift: -0.06em;
  --chev-gap: 0.35em;
  --pager-link-gap: 24px;
  --pager-stack-gap: 12px;
  --tile-label-size: clamp(2rem, 3.95vw, 3.2rem);
  --tracking-tile-label: -0.02em;
  --tracking-heading: 0;
  --tracking-nav: 0.16em;
  --tracking-btn: 0.18em;
  --tracking-logo: 0.32em;
  --tracking-tile: 0.06em;
  --tracking-accent: 0.04em;
  --gap-s: 16px;
  --gap-m: 32px;
  --gap-l: 56px;
  --banner-h: clamp(200px, 22vw, 300px);
  --banner-pos: center 52%;
  --hero-pos: center 30%;
  --hero-home-h: calc(100vh - var(--nav-h));
  --hero-home-h-mobile: 82vh;
  --hero-title-bottom: 30vh;
  --split-min-h: 560px;
  --split-pad: 112px;
  --intro-w: 1190px;
  --intro-pad-y: 160px;
  --testimonial-gap: 112px;
  --overlap: 96px;
  --split-photo-ratio: 5 / 6;
  --split-left: minmax(0, 482fr) minmax(0, 638fr);
  --split-right: minmax(0, 553fr) minmax(0, 567fr);
  --overlap-mobile: 40px;
  --card-pad: 48px;
  --card-pad-overlap: calc(var(--overlap) + 40px);
  --link-underline: 1px;
  --link-underline-offset: 3px;
  --card-pad-mobile: 32px 24px;
  --tile-gap: 28px;
  --gallery-gap: 56px;
  --btn-pad: 18px 56px;
  --btn-pad-mobile: 16px 40px;
  --btn-min-w: 300px;
  --testimonial-photo: 150px;
  --burger-w: 26px;
  --lb-img-w: 88vw;
  --lb-img-h: 88vh;
  --lb-close-size: 2rem;
  --lb-arrow-size: 2.5rem;
  --lb-ctrl-pad: 24px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--color-page); color: var(--color-text); font-family: var(--font-body); font-weight: 300; font-size: var(--body-size); line-height: var(--body-lh); -webkit-font-smoothing: antialiased; padding-top: var(--nav-h); }
body.lb-open { overflow: hidden; }
body.page-white { background: var(--color-white); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* navigation */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); background: var(--color-nav-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-nav-line); padding: 0 var(--section-pad-x); display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-family: var(--font-heading); font-size: 1rem; letter-spacing: var(--tracking-logo); text-transform: uppercase; color: var(--color-text); text-decoration: none; white-space: nowrap; }
.nav-links { display: flex; list-style: none; gap: var(--gap-m); }
.nav-links a { font-size: var(--nav-size); font-weight: 300; letter-spacing: var(--tracking-nav); text-transform: uppercase; text-decoration: none; color: var(--color-text); padding-bottom: 3px; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { border-bottom-color: var(--color-text); }
.nav-burger { display: none; width: var(--burger-w); height: 20px; background: none; border: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 7px; }
.nav-burger span { display: block; height: 1px; width: 100%; background: var(--color-text); }

/* buttons */
.btn { display: inline-block; min-width: var(--btn-min-w); background: var(--color-orange); color: var(--color-white); padding: var(--btn-pad); font-family: var(--font-body); font-weight: 400; font-size: var(--btn-size); letter-spacing: var(--tracking-btn); text-transform: uppercase; text-align: center; text-decoration: none; transition: opacity 0.2s; }
.btn:hover { opacity: 0.88; }

/* sections and text */
.section { position: relative; padding: var(--section-pad-y) var(--section-pad-x); }
.section-tight { padding-top: calc(var(--block-gap) - var(--section-pad-y)); }
.inner { position: relative; max-width: var(--wide-w); margin: 0 auto; }
.bullets { padding-left: 1.3em; list-style: disc; margin-bottom: var(--gap-m); }
.bullets li { margin-bottom: 10px; }
.page-title { font-family: var(--font-heading); font-weight: 400; font-size: var(--heading-size); letter-spacing: var(--tracking-heading); text-transform: uppercase; text-align: center; color: var(--color-heading); line-height: 1.2; margin-bottom: var(--gap-l); }
.card-title { font-family: var(--font-heading); font-weight: 400; font-size: var(--card-title-size); letter-spacing: var(--tracking-heading); text-transform: uppercase; color: var(--color-heading); line-height: 1.25; margin-bottom: var(--gap-s); }
.accent-title { font-family: var(--font-heading); font-weight: 400; font-size: var(--accent-title-size); letter-spacing: var(--tracking-accent); text-transform: uppercase; color: var(--color-orange); text-align: center; line-height: 1.35; margin-bottom: var(--gap-m); }
.quote { font-family: var(--font-quote); font-style: italic; font-weight: 400; font-size: var(--quote-size); color: var(--color-orange); line-height: 1.4; margin-bottom: var(--gap-m); }
.center { text-align: center; }

/* home hero */
.hero-home { position: relative; min-height: var(--hero-home-h); display: flex; align-items: flex-end; justify-content: center; text-align: center; padding: var(--section-pad-y) var(--section-pad-x) var(--hero-title-bottom); background: url('images/home/hero-portrait.jpg') var(--hero-pos) / cover no-repeat; }
.hero-home::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-scrim-home), transparent var(--scrim-home-stop)), var(--color-overlay-home); }
.hero-home h1 { position: relative; font-family: var(--font-heading); font-weight: 400; font-size: var(--hero-title-size); letter-spacing: var(--tracking-accent); text-transform: uppercase; color: var(--color-text-on-dark); line-height: 1.2; }

/* gallery banner */
.banner { position: relative; min-height: var(--banner-h); display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--gap-m) var(--section-pad-x); background: url('images/course/balloon-sky.jpg') var(--banner-pos) / cover no-repeat; }
.banner::before { content: ''; position: absolute; inset: 0; background: var(--color-overlay-banner); }
.banner h1 { position: relative; font-family: var(--font-heading); font-weight: 400; font-size: var(--banner-title-size); letter-spacing: var(--tracking-heading); text-transform: uppercase; color: var(--color-text-on-dark); line-height: 1.2; }

/* photo + card split */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; max-width: var(--wide-w); margin: 0 auto; }
.split.card-left { grid-template-columns: var(--split-left); }
.split.card-right { grid-template-columns: var(--split-right); }
.card-left .split-photo, .card-right .split-photo { aspect-ratio: var(--split-photo-ratio); min-height: 0; justify-self: stretch; }
.split-photo { position: relative; min-height: var(--split-min-h); }
.split-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-card { position: relative; z-index: 1; align-self: center; background: var(--color-card); padding: var(--card-pad); margin-top: var(--gap-m); margin-bottom: var(--gap-m); }
.card-left .split-card { order: -1; margin-right: calc(-1 * var(--overlap)); padding-right: var(--card-pad-overlap); }
.card-right .split-card { margin-left: calc(-1 * var(--overlap)); padding-left: var(--card-pad-overlap); }
.split-card p { margin-bottom: var(--gap-s); }
.split-card p:last-child { margin-bottom: 0; }
.split-card a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: var(--link-underline); text-underline-offset: var(--link-underline-offset); }
.split-card a:hover { color: var(--color-orange); }
.split-card .btn { color: var(--color-white); text-decoration: none; margin-top: var(--gap-s); }
.split-card .btn:hover { color: var(--color-white); text-decoration: none; }
.split-text { align-self: center; padding: var(--gap-l) 0 var(--gap-l) var(--split-pad); }
.split.plain { max-width: var(--intro-w); }
.split.plain .split-text { align-self: stretch; padding-top: 0; padding-bottom: 0; }
.section-intro { padding-top: var(--intro-pad-y); padding-bottom: var(--intro-pad-y); }
.split-text p { margin-bottom: var(--gap-s); }

/* portfolio tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tile-gap); max-width: var(--wide-w); margin: 0 auto; }
.tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; text-decoration: none; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile-bw img { filter: grayscale(1); }
.pos-top img { object-position: center 20%; }
.tile-wash { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--gap-s); background: var(--color-tile-wash); transition: background 0.3s; }
.tile:hover .tile-wash { background: var(--color-tile-wash-hover); }
.tile-label { font-family: var(--font-heading); font-weight: 400; font-size: var(--tile-label-size); letter-spacing: var(--tracking-tile-label); text-transform: uppercase; color: var(--color-heading); line-height: 1.25; }

/* gallery */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gallery-gap); align-items: start; max-width: var(--wide-w); margin: 0 auto; }
.gallery-col { display: grid; gap: var(--gallery-gap); align-content: start; }
.gallery-item { cursor: zoom-in; }
.gallery-item img { display: block; width: 100%; height: auto; }
.pager { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--pager-link-gap); max-width: var(--wide-w); margin: var(--pager-gap) auto 0; }
.pager a { flex: 0 1 auto; min-width: 0; font-family: var(--font-heading); font-size: var(--pager-size); letter-spacing: var(--tracking-none); text-transform: uppercase; text-decoration: none; color: var(--color-heading); }
.pager a:first-child { text-align: left; }
.pager a:last-child { text-align: right; }
.pager .chev { display: inline; font-size: var(--chev-size); line-height: 0; position: relative; top: var(--chev-shift); }
.pager a:first-child .chev { margin-right: var(--chev-gap); }
.pager a:last-child .chev { margin-left: var(--chev-gap); }
.pager a:hover { color: var(--color-orange); }

/* lightbox */
.lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: var(--color-lightbox); align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: var(--lb-img-w); max-height: var(--lb-img-h); object-fit: contain; }
.lb-close { position: absolute; top: var(--lb-ctrl-pad); right: var(--lb-ctrl-pad); color: var(--color-lightbox-ctrl); font-size: var(--lb-close-size); line-height: 1; cursor: pointer; background: none; border: none; }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); color: var(--color-lightbox-ctrl); font-size: var(--lb-arrow-size); line-height: 1; cursor: pointer; background: none; border: none; padding: 0 var(--lb-ctrl-pad); }
.lb-close:hover, .lb-arrow:hover { color: var(--color-white); }
.lb-prev { left: 0; }
.lb-next { right: 0; }

/* testimonials */
.testimonials { background: var(--color-white); padding-top: var(--testimonials-pad-y); padding-bottom: var(--testimonials-pad-y); }
.testimonial { display: flex; flex-direction: column; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--testimonial-gap); max-width: var(--wide-w); margin: 0 auto; }
.testimonial img { width: var(--testimonial-photo); height: var(--testimonial-photo); border-radius: 50%; margin-bottom: var(--gap-m); }
.testimonial blockquote { margin-bottom: var(--gap-s); }
.testimonial cite { margin-top: auto; }
.testimonial cite { font-style: normal; font-family: var(--font-heading); font-size: var(--small-size); letter-spacing: var(--tracking-nav); text-transform: uppercase; }

/* footer */
footer { background: var(--color-cream); padding: 64px var(--section-pad-x); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-l); }
.footer-logo { font-family: var(--font-heading); font-size: 1.3rem; letter-spacing: var(--tracking-logo); text-transform: uppercase; color: var(--color-orange); margin-bottom: var(--gap-s); }
.footer-copy { font-size: var(--small-size); color: var(--color-text); max-width: 460px; }
.footer-copy a, .footer-contact a { color: var(--color-orange); text-decoration: none; }
.footer-copy a:hover, .footer-contact a:hover { text-decoration: underline; }
.footer-contact h4 { font-family: var(--font-heading); font-weight: 400; font-size: var(--small-size); letter-spacing: var(--tracking-nav); text-transform: uppercase; color: var(--color-orange); margin-bottom: var(--gap-s); }
.footer-contact p { margin-bottom: 6px; }

@media (max-width: 860px) {
  body { padding-top: var(--nav-h-mobile); }
  nav { height: var(--nav-h-mobile); padding: 0 var(--section-pad-x-mobile); }
  .nav-burger { display: flex; }
  .nav-links { display: none; position: fixed; top: var(--nav-h-mobile); left: 0; right: 0; background: var(--color-white); border-bottom: 1px solid var(--color-nav-line); flex-direction: column; align-items: center; gap: var(--gap-s); padding: var(--gap-m) 0; }
  nav.open .nav-links { display: flex; }
  .hero-home { min-height: var(--hero-home-h-mobile); align-items: center; padding: var(--section-pad-y-mobile) var(--section-pad-x-mobile); }
  .banner { padding: var(--gap-m) var(--section-pad-x-mobile); }
  .section { padding: var(--section-pad-y-mobile) var(--section-pad-x-mobile); }
  .section-tight { padding-top: 0; }
  .split, .split.card-left, .split.card-right { grid-template-columns: 1fr; }
  .split-photo, .card-left .split-photo, .card-right .split-photo { min-height: 0; aspect-ratio: auto; }
  .split-photo img { position: static; height: auto; }
  .split-card { padding: var(--card-pad-mobile); margin: calc(-1 * var(--overlap-mobile)) var(--section-pad-x-mobile) 0; }
  .card-left .split-card { order: 0; margin-right: var(--section-pad-x-mobile); padding: var(--card-pad-mobile); }
  .card-right .split-card { margin-left: var(--section-pad-x-mobile); padding: var(--card-pad-mobile); }
  .split-text { padding: var(--gap-m) 0 0; }
  .split.plain .split-text { padding-top: var(--gap-m); }
  .section-intro { padding-top: var(--section-pad-y-mobile); padding-bottom: var(--section-pad-y-mobile); }
  .btn { min-width: 0; padding: var(--btn-pad-mobile); }
  .tiles { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; padding: 48px var(--section-pad-x-mobile); }
  .pager a { flex: 1 1 0; }
}
@media (max-width: 600px) {
  .tiles { grid-template-columns: 1fr; }
  .pager { flex-direction: column; align-items: stretch; gap: var(--pager-stack-gap); }
  .pager a { flex: 0 0 auto; }
}