/* =============================================================
   Amber Michelle Studio — Main Stylesheet

   HOW TO EDIT THIS FILE
   ─────────────────────
   · Brand colors  →  edit :root custom properties (section below)
   · Fonts         →  edit --font-serif / --font-sans variables
   · Buttons       →  edit .btn-p / .btn-s / .btn-gold blocks
   · Each major section is marked with a === banner comment ===
     Search for "=====" to jump between sections quickly.

   FILE ORDER
   ──────────
   1.  CSS Custom Properties (brand tokens)
   2.  Reset & Base
   3.  Skip nav / Focus / Page visibility / Screen-reader utilities
   4.  Navigation
   5.  Shared Utilities (eyebrow, section headers, rules, dividers)
   6.  Buttons
   7.  Waitlist / Dark Banner  (.black-banner)
   8.  Community Section       (.community-section)
   9.  Footer                  (footer, .ft-*, .ft-bot)
   10. Home Page sections
   11. Shop Page
   12. Curriculum Page
   13. About Page
   14. Contact Page
   15. Responsive Breakpoints
   ============================================================= */


/* =============================================================
   1. CSS CUSTOM PROPERTIES
   Edit these to restyle the whole site at once.
   ============================================================= */
:root {
  /* ── Text — charcoal, not black ── */
  --ink:         #2B2621;   /* charcoal — headings & body */
  --muted:       #5C544A;   /* warm charcoal-gray — secondary body text */
  --light:       #8A7D70;   /* warm stone — captions, small labels */
  --faint:       #A09080;   /* very light — subtle footer notes */

  /* ── Warm Backgrounds ──
     Ordered lightest → deepest.
     Alternate these between sections for gentle rhythm. */
  --cream:       #F8F3E8;   /* natural parchment — page base */
  --ivory:       #F2EAD9;   /* natural ivory     — community section */
  --linen:       #EAE0CB;   /* soft linen        — alternating sections, nav */
  --taupe:       #D8CBA8;   /* warm stone        — footer bar, borders */
  --blush:       #E6D8B0;   /* warm flax         — hero bands, promise (was pink) */
  --charcoal:    #2A2420;   /* deep charcoal     — banners, SOH section */

  /* ── Brass & Accent (very limited) ── */
  --gold:        #8B6A3A;   /* muted brass    — eyebrows, icon strokes */
  --gold-lt:     #C4B08A;   /* light brass    — dividers, rules, borders */
  --gold-warm:   #C6A968;   /* muted brass    — dark-section accents */
  --coral:       #C4B08A;   /* muted brass    — week 12, signature cards (was coral) */
  --olive:       #6D7358;   /* sage olive */

  /* ── Typography ── */
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Source Sans 3', system-ui, sans-serif;

  /* Nav & mobile-menu background — quiet linen, not a gold block */
  --nav-bg: var(--linen);
}


/* =============================================================
   2. RESET & BASE
   ============================================================= */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.75;
}


/* =============================================================
   3. SKIP NAV · FOCUS · PAGE VISIBILITY · SR-ONLY
   ============================================================= */
.skip-nav {
  position: absolute; top: -100%; left: 1rem;
  background: var(--ink); color: var(--cream);
  padding: .75rem 1.5rem; z-index: 9999;
  font-size: 14px; font-weight: 600; letter-spacing: .1em;
  text-decoration: none;
  border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;
}
.skip-nav:focus { top: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.page { display: none; }
.page.active { display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* =============================================================
   4. NAVIGATION
   ============================================================= */
nav.site-nav {
  background: var(--nav-bg);
  padding: 0 3rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 78px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.nav-logo {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: .5px solid rgba(26,23,20,.14);
  border-top: none;
  border-bottom: none;
  padding: .44rem 1.25rem;
  font-family: inherit;
  align-self: stretch;
  box-shadow: inset 0 0 0 5px rgba(26,23,20,.055);
}
.nav-logo-text { display: flex; flex-direction: column; align-items: flex-start; }
.nav-logo-text .wm { font-family: var(--font-serif); font-weight: 700; font-size: 20px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); line-height: 1; }
.nav-logo-text .sl { font-size: 10px; letter-spacing: .38em; text-transform: uppercase; color: var(--ink); opacity: .7; }
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); text-decoration: none; cursor: pointer; transition: opacity .2s; background: none; border: none; font-family: inherit; padding: 0; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: .6; }
.nav-right { display: flex; align-items: center; gap: 1rem; }
.nav-cta { font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); border: 1.5px solid var(--ink); padding: 9px 20px; cursor: pointer; transition: all .2s; background: transparent; font-family: var(--font-sans); }
.nav-cta:hover { background: var(--ink); color: var(--nav-bg); }
.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; width: 36px; height: 36px; }
.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform .25s, opacity .25s; }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu { display: none; position: fixed; inset: 78px 0 0; background: var(--nav-bg); z-index: 99; flex-direction: column; padding: 2rem; gap: 1.5rem; overflow-y: auto; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 18px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none; border: none; background: none; font-family: inherit; padding: .5rem 0; border-bottom: .5px solid rgba(26,23,20,.12); }


/* =============================================================
   5. SHARED UTILITIES
   ============================================================= */
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .27em; line-height: 1.5; text-transform: uppercase; color: var(--gold); }
.sec-title { font-family: var(--font-serif); font-weight: 700; font-size: 38px; color: var(--ink); }
.rule { display: flex; align-items: center; gap: 12px; }
.rule-line { flex: 1; height: .5px; background: var(--gold-lt); }
.rule-diamond { width: 6px; height: 6px; min-width: 6px; background: var(--gold-lt); transform: rotate(45deg); }
.sec-sub { font-size: 15px; color: var(--muted); line-height: 1.9; }
.divider { width: 52px; height: 1px; background: var(--gold-lt); margin: 6px 0; }
.rule-w { width: 100%; max-width: 320px; }
.sec-hdr { text-align: center; padding: 5.5rem 2rem 3.75rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }


/* =============================================================
   6. BUTTONS
   Three variants: primary (dark filled), secondary (outlined),
   gold (warm accent). Edit padding/font-size here to update all.
   ============================================================= */

/* Primary — dark filled, cream text */
.btn-p {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream); background: var(--ink);
  padding: 14px 28px;
  text-decoration: none; cursor: pointer; border: none;
  transition: background .2s;
  font-family: var(--font-sans);
}
.btn-p:hover { background: var(--gold); }

/* Secondary — outlined, ink text */
.btn-s {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); border: 1.5px solid var(--ink);
  padding: 13px 27px;
  text-decoration: none; cursor: pointer; background: transparent;
  transition: all .2s;
  font-family: var(--font-sans);
}
.btn-s:hover { background: var(--ink); color: var(--cream); }

/* Gold — warm accent fill */
.btn-gold {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); background: var(--gold-warm);
  padding: 14px 28px;
  text-decoration: none; cursor: pointer; border: none;
  transition: opacity .2s;
  font-family: var(--font-sans);
}
.btn-gold:hover { opacity: .85; }


/* =============================================================
   7. WAITLIST / DARK BANNER  (.black-banner)
   Used on the Curriculum page for the waitlist CTA.
   Warm charcoal background — faith-rooted, refined, not harsh.
   ============================================================= */
.black-banner {
  background: var(--charcoal);
  padding: 6rem 4rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.75rem; text-align: center;
}
.bb-eye { font-size: 11px; font-weight: 600; letter-spacing: .35em; text-transform: uppercase; color: var(--gold-warm); }
.bb-title { font-family: var(--font-serif); font-weight: 700; font-size: 38px; color: var(--cream); max-width: 560px; line-height: 1.2; }
.bb-sub { font-size: 15px; color: #b8a898; max-width: 460px; line-height: 1.85; }
.bb-form { display: flex; width: 100%; max-width: 460px; }
.bb-in {
  flex: 1; min-width: 0;
  padding: 14px 16px;
  background: rgba(247,242,236,.09);
  border: 1px solid rgba(201,165,90,.45); border-right: none;
  font-family: var(--font-sans); font-size: 15px;
  outline: none; color: var(--cream);
}
.bb-in::placeholder { color: #8a7e72; }
.bb-in:focus { border-color: var(--gold-warm); }
.bb-btn {
  padding: 14px 26px;
  background: var(--gold-warm); border: none;
  color: var(--ink);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: opacity .2s;
  white-space: nowrap;
}
.bb-btn:hover { opacity: .85; }
.bb-note { font-size: 12px; color: #7a6e62; }

/* Inline success message (shown by JS after form submit) */
.bb-success, .comm-success {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--gold-warm);
  text-align: center;
}


/* =============================================================
   8. COMMUNITY SECTION  (.community-section)
   Appears on every page above the footer.
   Warm ivory background — light, airy, refined, faith-rooted.
   ============================================================= */
.community-section {
  background: var(--ivory);
  padding: 6rem 4rem;
  border-top: 1px solid var(--taupe);
}
.community-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; max-width: 980px; margin: 0 auto;
}
.comm-eye {
  font-size: 12px; font-weight: 600; letter-spacing: .3em; line-height: 1.5; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.5rem; text-align: center;
}

/* Each block — Instagram | Newsletter */
.comm-block {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 3rem;
  background: var(--cream);
  border-top: 2px solid var(--gold-lt);
}
.comm-block-title { font-family: var(--font-serif); font-weight: 700; font-size: 28px; color: var(--ink); }
.comm-block-sub { font-size: 14px; color: var(--muted); line-height: 1.85; }
.comm-social-links { display: flex; flex-direction: column; gap: .65rem; margin-top: .35rem; }
.comm-social-link {
  display: grid; grid-template-columns: 28px 1fr auto; gap: .8rem; align-items: center;
  padding: .8rem .95rem; border: 1px solid rgba(139,105,20,.22);
  color: var(--ink); transition: border-color .2s, background .2s;
}
.comm-social-link:hover { border-color: var(--gold); background: rgba(255,255,255,.38); }
.comm-social-icon { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.comm-social-icon--facebook { fill: var(--gold); stroke: none; }
.comm-social-dot { fill: var(--gold); stroke: none; }
.comm-social-link strong { display: block; font-size: 14px; font-weight: 600; }
.comm-social-link small { display: block; margin-top: .1rem; font-size: 11px; color: var(--muted); letter-spacing: .08em; }
.comm-social-arrow { color: var(--gold); font-size: 17px; }
.kajabi-newsletter-frame { width: 100%; min-height: 118px; border: 0; display: block; background: transparent; margin-top: .35rem; }

/* Newsletter inline form — stacks on mobile via responsive section */
.comm-form { display: flex; margin-top: .5rem; }
.comm-in {
  flex: 1; min-width: 0;
  padding: 13px 15px;
  background: var(--linen);
  border: 1px solid var(--gold-lt); border-right: none;
  font-family: var(--font-sans); font-size: 14px;
  outline: none; color: var(--ink);
}
.comm-in::placeholder { color: var(--light); }
.comm-in:focus { border-color: var(--gold); }
.comm-btn {
  padding: 13px 22px;
  background: var(--ink); border: none;
  color: var(--cream);
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: background .2s;
  white-space: nowrap;
}
.comm-btn:hover { background: var(--gold); }
.comm-features { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.comm-features li { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.comm-fdot { width: 4px; height: 4px; min-width: 4px; background: var(--gold-lt); transform: rotate(45deg); }


/* =============================================================
   9. FOOTER
   Warm linen background — light, tonal, and refined.
   ============================================================= */
footer {
  background: var(--linen);
  padding: 4.5rem 4rem;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3.5rem;
  border-top: 1px solid var(--taupe);
}
.ft-wm { font-family: var(--font-serif); font-weight: 700; font-size: 17px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.ft-sl { font-size: 9px; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); margin-top: -3px; }
.ft-tag { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--muted); margin-top: .5rem; }
.ft-soh { font-size: 12px; color: var(--light); border-top: 1px solid var(--taupe); padding-top: .75rem; margin-top: .75rem; line-height: 1.7; }
.ft-col-t { font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: .85rem; }
.ft-links { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.ft-links a {
  font-size: 14px; color: var(--muted); text-decoration: none;
  cursor: pointer; transition: color .2s;
  background: none; border: none; font-family: inherit; text-align: left; padding: 0;
}
.ft-links a:hover { color: var(--ink); }

/* Footer bottom bar — slightly deeper taupe strip */
.ft-bot {
  background: var(--taupe);
  border-top: 1px solid #c4b4a0;
  padding: 1.35rem 4rem;
  display: flex; justify-content: flex-start;
  font-size: 12px; color: var(--muted);
}


/* =============================================================
   10. HOME PAGE
   ============================================================= */

/* ── Hero ── */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 86vh; align-items: center; }
.hero-l { padding: 6rem 4.5rem 6rem 5.5rem; display: flex; flex-direction: column; gap: 1.85rem; }
.hero-mark { display: flex; flex-direction: column; gap: .5rem; }
.hero-studio-name { font-family: var(--font-serif); font-weight: 700; font-size: 23px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.hero-descriptor { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero-title { font-family: var(--font-serif); font-weight: 700; font-size: 52px; line-height: 1.08; }
.hero-sub { font-size: 16px; color: var(--muted); max-width: 390px; line-height: 1.9; }
.hero-tag { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--gold); }
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .25rem; }
.hero-r { background: var(--cream); height: 100%; min-height: 86vh; display: flex; align-items: center; justify-content: center; position: relative; padding: 2.25rem; }
.hero-portrait-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(.95); }
.hero-img-label { position: absolute; bottom: 1.5rem; font-family: var(--font-serif); font-style: italic; font-size: 12px; color: var(--light); }

/* ── Home About Teaser ── */
.home-about { background: var(--blush); padding: 6rem; display: grid; grid-template-columns: .7fr 1fr; gap: 4rem; align-items: center; }
.home-about-photo {
  width: 100%; aspect-ratio: 4/5;
  background: var(--linen);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.home-about-photo::after {
  content: ''; position: absolute; inset: 12px;
  border: 1px solid rgba(199,165,106,.28); pointer-events: none;
}
.home-about-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.home-about-r { display: flex; flex-direction: column; gap: 1.35rem; }
.home-about-identity { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }

/* ── Home Gallery Preview (no pricing, no cart — credibility only) ── */
.home-gallery { background: var(--cream); padding: 0 4rem 6.5rem; }
.gallery-detail-wrap { max-width: 980px; margin: 0 auto; }

/* ── Home Recognition & Press ── */
.recognition-section { background: var(--blush); padding: 6.5rem 4rem; }
.recognition-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: .82fr 1fr;
  gap: 4.5rem; align-items: center;
}
.recognition-photo-wrap { position: relative; overflow: hidden; background: var(--linen); }
.recognition-photo-wrap::after {
  content: ''; position: absolute; inset: 12px;
  border: 1px solid rgba(199,165,106,.42); pointer-events: none;
}
.recognition-photo { width: 100%; aspect-ratio: 4/5; display: block; object-fit: cover; object-position: center 30%; }
.recognition-copy { display: flex; flex-direction: column; gap: 1.15rem; }
.recognition-kicker { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--ink); }
.recognition-meta { font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); line-height: 1.65; }
.recognition-details { margin-top: .45rem; border-top: 1px solid rgba(139,105,20,.22); border-bottom: 1px solid rgba(139,105,20,.22); }
.recognition-details summary {
  padding: 1rem 0; cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
}
.recognition-details summary::-webkit-details-marker { display: none; }
.recognition-details summary::after { content: '+'; float: right; color: var(--gold); font-size: 18px; line-height: .7; }
.recognition-details[open] summary::after { content: '−'; }
.recognition-clipping-wrap { padding: .25rem 0 1.25rem; }
.recognition-clipping { width: 100%; display: block; border: 8px solid var(--cream); }
.recognition-clipping-wrap p { margin-top: .6rem; font-size: 12px; color: var(--muted); }
/* This slot shows a complete triptych, not a croppable detail shot — the
   band is sized to the artwork's own ratio so the full piece always shows,
   nothing trimmed. Scoped to this instance only; the shared .editorial-band
   elsewhere (classroom) keeps its normal 16:9 cover crop. */
.gallery-detail-wrap .editorial-band { max-height: none; aspect-ratio: 5483/2544; background: var(--cream); }
.gallery-detail-wrap .editorial-band-img { object-fit: contain; }

/* ── Editorial Photography Break (full-width, reused between sections) ── */
.editorial-band {
  width: 100%; max-height: 520px;
  aspect-ratio: 16/9;
  background: var(--taupe);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.editorial-band-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Studio workspace shot — the full room (easel to drafting table, floor to
   fan) needs to stay intact, which this photo's own proportions dictate
   (~1.45:1, taller than the standard 16:9 band). Contained + centered
   instead of full-bleed so nothing gets cropped at wide viewports. */
.editorial-band--room { max-width: 980px; margin: 0 auto; max-height: none; aspect-ratio: 5712/3927; background: var(--linen); }
.editorial-band--room .editorial-band-img { object-fit: contain; }

/* ── Curriculum Band ── */
.curr-band { background: var(--linen); padding: 6.5rem 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5.5rem; align-items: start; }
.curr-l { display: flex; flex-direction: column; gap: 1.5rem; }
.curr-title { font-family: var(--font-serif); font-weight: 700; font-size: 46px; line-height: 1.1; }
.curr-subtitle { font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--gold); }
.curr-r { background: var(--cream); padding: 2.25rem; border: .5px solid var(--gold-lt); display: flex; flex-direction: column; gap: 1.05rem; }
.curr-cover-art { width: 100%; aspect-ratio: 3/4; background: var(--linen); display: flex; align-items: center; justify-content: center; }
.curr-card-lbl { font-size: 11px; font-weight: 600; letter-spacing: .3em; line-height: 1.5; text-transform: uppercase; color: var(--gold); }
.curr-card-title { font-family: var(--font-serif); font-weight: 700; font-size: 25px; }
.curr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ci-lbl { font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.ci-val { font-family: var(--font-serif); font-size: 17px; }
.cr { height: .5px; background: var(--gold-lt); }
.curr-feats { list-style: none; display: flex; flex-direction: column; gap: .55rem; padding-top: 1rem; border-top: .5px solid var(--gold-lt); }
.curr-feats li { font-size: 14px; display: flex; align-items: center; gap: 10px; }
.curr-pilot-hook { max-width: 610px; padding-left: 1rem; border-left: 2px solid var(--gold); color: var(--muted); font-size: 14px; line-height: 1.75; }
.curr-pilot-hook strong { color: var(--ink); }
.curr-access-paths { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.curr-access-paths li { display: flex; min-height: 50px; align-items: center; justify-content: center; padding: .7rem .8rem; background: rgba(221,210,193,.48); border-top: 1px solid var(--gold-lt); border-bottom: 1px solid var(--gold-lt); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .1em; line-height: 1.4; text-align: center; text-transform: uppercase; }
.curr-resource-row { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.5rem; padding: 1.2rem 0; border-top: .5px solid var(--gold-lt); border-bottom: .5px solid var(--gold-lt); }
.curr-resource-group { display: flex; flex-direction: column; gap: .65rem; }
.curr-supply-list { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.curr-supply-list li { position: relative; padding-left: .8rem; color: var(--muted); font-size: 13px; line-height: 1.55; }
.curr-supply-list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 4px; height: 4px; background: var(--gold-lt); transform: rotate(45deg); }
.fdot { width: 5px; height: 5px; min-width: 5px; background: var(--gold-lt); transform: rotate(45deg); }
.mediums { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.medium-pill { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: .5px solid var(--gold-lt); color: var(--ink); padding: 5px 13px; }


/* =============================================================
   11. GALLERY PAGE (curated gallery — no pricing, no cart)
   ============================================================= */
.gallery-hero { background: var(--linen); padding: 5.5rem 4rem 3.75rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
/* Gallery page title — sized to match the other page headers (Contact 50, About
   44, Created to Create 62) instead of the small 38px section-title default. */
.gallery-page-title { font-size: 50px; }
.gallery-jumpnav { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }
.gallery-jumpnav a { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: 9px 20px; border: .5px solid #d4c8b8; color: var(--muted); text-decoration: none; transition: all .2s; }
.gallery-jumpnav a:hover { border-color: var(--gold); color: var(--ink); }
.collection { padding: 6.5rem 4rem; background: var(--cream); }
.collection--alt { background: var(--linen); }
.collection-hdr { text-align: center; max-width: 560px; margin: 0 auto 3rem; display: flex; flex-direction: column; gap: .85rem; }
.collection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 980px; margin: 0 auto; }
/* Denser grid for collections holding 4–8 pieces (Oil, Water Media,
   Monochrome, Master Copy). Selected Works keeps the plain 2-col
   .collection-grid so its pieces read larger, per the "signature piece"
   presentation. */
.collection-grid--dense { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; max-width: 1120px; }
/* One consistent museum-mat treatment for every tile, filled or empty — same
   linen mat, same box. The gallery mixes portrait and landscape pieces, so
   images use contain (not cover): each piece shows in full, matted rather
   than cropped, regardless of orientation. Empty tiles are just the bare mat
   (no label, no icon) — reserved space, not an unfinished placeholder. */
.collection-tile-img { width: 100%; aspect-ratio: 4/5; background: var(--linen); display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* On alternating (linen-background) sections, flip the mat to cream instead
   — otherwise a linen mat on a linen section background would disappear. */
.collection--alt .collection-tile-img { background: var(--cream); }
.collection-tile-photo { width: 100%; height: 100%; object-fit: contain; display: block; }
.selected-feature { max-width: 1120px; margin: 0 auto 4.5rem; }
.collection-tile--triptych { width: 100%; }
.artwork-zoom { position: relative; padding: 0; border: 0; cursor: zoom-in; font: inherit; }
.artwork-zoom--wide { display: block; width: 100%; aspect-ratio: 5483/2544; background: var(--linen); overflow: hidden; }
.artwork-zoom-hint { position: absolute; right: 1rem; bottom: 1rem; padding: .55rem .8rem; background: rgba(33,30,26,.82); color: var(--cream); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.artwork-zoom:hover .artwork-zoom-hint, .artwork-zoom:focus-visible .artwork-zoom-hint { opacity: 1; transform: translateY(0); }
.artwork-lightbox[hidden] { display: none; }
.artwork-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: 1fr auto; background: rgba(20,18,16,.96); padding: 3.5rem 2rem 1.25rem; }
.artwork-lightbox-stage { overflow: auto; display: flex; align-items: center; justify-content: center; }
.artwork-lightbox-img { display: block; max-width: 92vw; max-height: 82vh; object-fit: contain; cursor: zoom-in; transition: width .2s ease; }
.artwork-lightbox-img.is-zoomed { width: 150vw; max-width: none; max-height: none; cursor: zoom-out; }
.artwork-lightbox.is-zoomed .artwork-lightbox-stage { align-items: flex-start; justify-content: flex-start; }
.artwork-lightbox-close { position: fixed; top: 1rem; right: 1.25rem; z-index: 2; border: 0; background: transparent; color: var(--cream); font-size: 38px; line-height: 1; cursor: pointer; }
.artwork-lightbox-help { color: rgba(255,255,255,.76); text-align: center; font-size: 12px; letter-spacing: .08em; padding-top: 1rem; }
body.lightbox-open { overflow: hidden; }

/* Selected Works — each piece carries its own caption (medium · title · short
   statement) directly beneath its image, so it stays attached to the artwork on
   every screen rather than floating below the pair. */
.works-caption { text-align: center; display: flex; flex-direction: column; gap: .5rem; padding: 1.35rem 1rem 0; max-width: 440px; margin: 0 auto; }
.works-caption--wide { width: 100%; max-width: none; padding: 1.5rem 0 0; }
.works-caption-story--wide { max-width: none; text-align: left; columns: 2; column-gap: 3rem; }
.works-caption-story--wide p { break-inside: avoid; margin: 0 0 1rem; }
.works-caption-medium { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.works-caption-title { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 22px; color: var(--ink); line-height: 1.2; }
.works-caption-story { font-size: 14.5px; color: var(--muted); line-height: 1.85; }


/* =============================================================
   12. CURRICULUM PAGE
   ============================================================= */
/* Created to Create hero — the direct parent invitation and cover artwork lead;
   the artist story then spans the full composition beneath them. */
.curr-hero { background: var(--linen); padding: 6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem 5.5rem; align-items: start;
  grid-template-areas: "intro art"; }
.curr-hero-intro { grid-area: intro; display: flex; flex-direction: column; gap: 1.5rem; }
.curr-hero-art { grid-area: art; align-self: start; }
.curr-hero-art-img { display: block; width: 100%; height: auto; box-shadow: 0 14px 46px rgba(139,105,20,.16); }
.curr-hero-l { display: flex; flex-direction: column; gap: 1.5rem; }
.curr-hero-title { font-family: var(--font-serif); font-weight: 700; font-size: 62px; line-height: 1.02; letter-spacing: -.005em; }
/* Artist statement — a distinct-but-integrated editorial subsection, set off
   from the intro copy by a fine hairline rather than a card. */
.artist-statement { display: flex; flex-direction: column; gap: .9rem; width: 100%; margin: 1.75rem 0 0; padding-top: 1.75rem; border-top: .5px solid var(--gold-lt); }
.artist-statement-title { font-family: var(--font-serif); font-weight: 700; font-size: 24px; color: var(--ink); line-height: 1.2; }
.artist-statement-body { display: flex; flex-direction: column; gap: .85rem; }
.artist-statement-body p { font-size: 15px; color: var(--muted); line-height: 1.85; }
.artist-statement-sig { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--ink); margin-top: .35rem; }
.curr-hero-lede { font-family: var(--font-serif); font-size: 24px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.curr-hero-reassurance { padding: .9rem 1rem; border-left: 2px solid var(--gold); background: rgba(255,255,255,.32); color: var(--muted); font-size: 15px; line-height: 1.7; }
.curr-hero-reassurance strong { color: var(--ink); }
.curr-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .25rem; }
.curr-audience-note { padding-top: 1rem; border-top: .5px solid var(--gold-lt); color: var(--muted); font-size: 13px; line-height: 1.7; }

/* Program at a glance (Block 3) — a light cream info panel with a fine gold
   hairline, full width beneath the two hero columns. Reads as an elegant
   curriculum panel, not an ecommerce card. Sits on the same linen as the hero
   so the three blocks read as one opening composition. */
.curr-glance-section { background: var(--linen); padding: 0 6rem 6rem; }
.curr-glance { background: var(--cream); border: .5px solid var(--gold-lt); padding: 2.5rem 3rem 2.75rem; }
.curr-glance-hdr { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding-bottom: 2rem; border-bottom: .5px solid var(--gold-lt); }
.curr-glance-title { font-family: var(--font-serif); font-weight: 700; font-size: 26px; color: var(--ink); }
.curr-glance-grid { display: grid; grid-template-columns: 1.5fr 1.05fr 1.35fr 1fr; margin-top: 2.25rem; }
.glance-group { padding: 0 2.25rem; }
.glance-group:first-child { padding-left: 0; }
.glance-group:last-child { padding-right: 0; }
.glance-group + .glance-group { border-left: .5px solid var(--gold-lt); }
.glance-group-lbl { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.glance-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem .75rem; }
.curr-glance .ci-val { font-size: 15px; margin-top: .12rem; }
.glance-modules { display: flex; flex-direction: column; gap: .9rem; }
.glance-module { display: flex; flex-direction: column; gap: .12rem; }
.glance-module-name { font-family: var(--font-serif); font-size: 16px; color: var(--ink); }
.glance-module-time { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--light); }
.glance-group--cta { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.glance-cta-note { font-size: 13px; color: var(--muted); line-height: 1.6; }
.glance-avail { text-align: center; font-size: 12.5px; color: var(--light); line-height: 1.7; max-width: 660px; margin: 2.25rem auto 0; padding-top: 1.75rem; border-top: .5px solid var(--gold-lt); }
.week-section { background: var(--cream); padding: 6.5rem 4rem; }
/* ── Four developmental phases, equal visual weight. Phase name is the
   primary hierarchy; the small "Phase One/Two/Three/Four" label above it
   is deliberately quiet and carries no week-count information, so the
   section reads as a journey rather than an exposed lesson map. ── */
.phase-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.75rem; max-width: 980px; margin: 3rem auto 0; }
.phase-card { padding: 2.5rem; border-top: 2.5px solid var(--gold-lt); background: var(--linen); display: flex; flex-direction: column; gap: .9rem; }
.phase-num { font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.phase-name { font-family: var(--font-serif); font-weight: 700; font-size: 22px; }
.phase-desc { font-size: 14px; color: var(--muted); line-height: 1.8; }
.phase-thumbs { display: grid; grid-template-columns: repeat(2,1fr); gap: .6rem; margin-top: .25rem; }
.phase-thumb { aspect-ratio: 4/5; overflow: hidden; }
.phase-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phase-img { aspect-ratio: 16/9; overflow: hidden; margin-top: .25rem; }
.phase-img-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Logo image slots — display:none until real files are placed ── */
/* Nav logo — mix-blend-mode:multiply makes the white background
   disappear against the gold nav, leaving only the logo artwork */
.nav-logo-img {
  display: block;
  height: 64px;
  width: auto;
  max-width: 260px;
  mix-blend-mode: multiply;
}
/* Footer logo plaque — cream nameplate on linen footer */
.footer-logo-plaque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.4rem;
  background: var(--cream);
  border: .5px solid var(--gold-lt);
  box-shadow: inset 0 0 0 5px rgba(199,165,106,.14);
  margin-bottom: .85rem;
}
.footer-logo-img {
  display: block;
  height: 56px;
  width: auto;
  max-width: 240px;
  mix-blend-mode: multiply;
}
/* SOH logo — architectural double-frame seal */
.soh-logo-card {
  background: var(--cream);
  padding: 2.75rem 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: .5px solid var(--gold-lt);
  outline: .5px solid rgba(201,165,90,.35);
  outline-offset: -10px;
}
.soh-logo-img {
  display: block;
  height: 160px;
  width: auto;
  max-width: 380px;
}

/* Phase Four — no exhibition photo yet; an intentional editorial plaque
   rather than a placeholder. Full border (siblings only have border-top)
   gives it a framed, museum-label feel; content is centered with room to
   breathe instead of bleeding a photo to the card edges like its siblings. */
.phase-card--exhibition { text-align: center; border: 1px solid var(--gold-lt); border-top: 1px solid var(--gold-lt); align-items: center; }
.phase-card--exhibition .eyebrow { margin-top: .3rem; }
.phase-card--exhibition .phase-name { margin: .3rem 0 .3rem; }
.phase-card--exhibition .phase-desc { max-width: 300px; }
.week-exhibition-divider { width: 52px; height: 1px; background: var(--gold-lt); margin: 1rem auto .9rem; }
.week-exhibition-icon { display: flex; justify-content: center; color: var(--gold-lt); }
.promise-section { background: var(--blush); padding: 6.5rem 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
.promise-title { font-family: var(--font-serif); font-weight: 700; font-size: 34px; }
.promise-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .5rem; }
.promise-list li { font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.promise-r { display: flex; flex-direction: column; gap: 1.25rem; background: var(--cream); padding: 3rem; border: .5px solid rgba(199,165,106,.4); }


/* ── Founding Families — compact hero testimonials. Lives in the leftover
   space beneath the hero CTAs, so it's deliberately quiet: small label,
   small italic quotes, no background/shadow — reads as an aside, not a
   competing section. ── */
.hero-testimonials { margin-top: 1.75rem; padding-top: 1.5rem; border-top: .5px solid rgba(139,105,20,.18); display: flex; flex-direction: column; gap: 1.1rem; }
/* `display:flex` above would otherwise defeat the `hidden` attribute — this
   keeps the section fully hidden (and whitespace-free) until real, approved
   pilot-family testimonials are added by removing `hidden` from the markup. */
.hero-testimonials[hidden] { display: none; }
/* A true subsection heading — same serif family as the rest of the site,
   not a small all-caps eyebrow — so it reads as its own moment rather
   than a quiet label. Still sized well below an h1/h2 page heading. */
.hero-testimonials-label { font-family: var(--font-serif); font-weight: 700; font-size: 19px; color: var(--ink); }
.hero-testimonial-quote { font-family: var(--font-serif); font-style: italic; font-size: 14px; line-height: 1.65; color: var(--muted); border-left: 2px solid var(--gold-lt); padding-left: 1rem; }
.hero-testimonial-name { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); padding-left: 1rem; margin-top: .3rem; }

/* ── Enrollment & Licensing Path Cards ── */
.pilot-section { background: var(--linen); padding: 3.5rem 4rem; text-align: center; }
/* Founding-pilot content sits inside a spacious fine-hairline container so it
   reads as a defined Fall 2026 opportunity, not text floating in open field.
   Light and airy — a hairline outline only, no heavy card or fill. */
.pilot-panel { max-width: 980px; margin: 0 auto; border: .5px solid var(--gold-lt); background: rgba(255,255,255,.26); padding: 2.25rem 2.5rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
.pilot-panel .sec-hdr { align-items: center; max-width: 720px; margin: 0 auto; padding: 0; text-align: center; }
.pilot-panel .rule-w { max-width: 240px; }
.pilot-panel .path-future-note { grid-column: 1 / -1; max-width: none; width: 100%; margin: 0; padding-top: 1.25rem; border-top: .5px solid var(--gold-lt); text-align: center; }
.pilot-pathways { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.pilot-pathway { min-height: 150px; padding: 1.4rem 1.25rem; background: rgba(221,210,193,.48); border-top: 1px solid var(--gold-lt); border-bottom: 1px solid var(--gold-lt); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .7rem; }
.pilot-pathway-title { color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; }
.pilot-pathway p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.pilot-pathway-times { display: flex; flex-direction: column; gap: .25rem; color: var(--ink); font-size: 11px; line-height: 1.5; }
/* In-person pilot classes — one list item carries the two available class
   times nested beneath it. Restrained: the times are simply smaller, softer,
   and indented under the main line — no card/table treatment. */
/* Left-align the pilot list (the block itself stays centered via the ul's
   max-width + auto margins). Matches the desktop look and keeps every item —
   and the nested class times — cleanly aligned when text wraps on mobile,
   rather than centering away from their bullets. */
.pilot-section .curr-feats { text-align: left; }
.curr-feats li.pilot-feat--classes { align-items: flex-start; }
.curr-feats li.pilot-feat--classes .fdot { margin-top: .5rem; }
.pilot-feat-group { display: flex; flex-direction: column; gap: .5rem; text-align: left; }
.pilot-feat-main { line-height: 1.45; }
.pilot-class-times { display: flex; flex-direction: column; gap: .2rem; padding-left: 1rem; font-size: 13px; color: var(--muted); }
.pilot-class-times .pilot-schedule-divider { margin-top: .35rem; padding-top: .55rem; border-top: .5px solid var(--gold-lt); }
/* ── How It Works — Parent Guide preview section (linen → cream → linen rhythm:
   sits on cream between the linen Founding Pilot and linen Session One sections). */
.howworks-section { background: var(--cream); padding: 6.5rem 4rem; text-align: center; }
.howworks-intro { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.1rem; }
.howworks-intro p { font-size: 15px; color: var(--muted); line-height: 1.9; }
.howworks-emphasis { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--ink); line-height: 1.5; }
/* Parent Guide page previews are real document screenshots (portrait 1632×2112).
   Shown whole via the natural img flow (width 100% / height auto — never cropped),
   framed with a thin brass hairline + soft shadow so each reads as a real page. */
.guide-preview { margin: 0; background: var(--cream); border: 1px solid var(--gold-lt); box-shadow: 0 6px 34px rgba(139,105,20,.12); }
.guide-preview-img { display: block; width: 100%; height: auto; }
.guide-preview--hero { max-width: 600px; margin: 3.5rem auto 0; }
/* The three plain-text explanations — understated, no cards. */
.howworks-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.75rem; max-width: 900px; margin: 3rem auto 0; }
.howworks-step-lbl { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; line-height: 1.4; }
.howworks-step p { font-size: 14px; color: var(--muted); line-height: 1.7; }
/* Your Role — Parent Guide page 2 (left) + copy (right); page 2 is intentionally
   less dominant than page 1. */
.howworks-role { display: grid; grid-template-columns: .82fr 1fr; gap: 4rem; max-width: 960px; margin: 5rem auto 0; align-items: center; text-align: left; }
.guide-preview--role { max-width: 400px; }
.howworks-role-copy { display: flex; flex-direction: column; gap: 1.1rem; }
.howworks-role-title { font-family: var(--font-serif); font-weight: 700; font-size: 28px; color: var(--ink); line-height: 1.15; }
.howworks-role-copy p { font-size: 15px; color: var(--muted); line-height: 1.85; }
.howworks-emphasis--left { text-align: left; }

/* ── Parent-promise treatments — two companion moments sharing a warm blush
   fill + serif voice so they read as intentional partners. Promise #1 is the
   centered section placard; promise #2 is a smaller inline block inside the
   Your Role copy column. Warm emphasis, not a loud marketing banner. */
.promise-band { background: var(--blush); text-align: center; max-width: 720px; margin: 3.5rem auto 0; padding: 2.75rem 3rem; display: flex; flex-direction: column; align-items: center; gap: .95rem; }
.promise-band-title { font-family: var(--font-serif); font-weight: 700; font-size: 28px; line-height: 1.28; color: var(--ink); }
.promise-band-sub { font-size: 14.5px; color: var(--muted); line-height: 1.75; max-width: 480px; }
.promise-inline { background: var(--blush); padding: 2.25rem 2rem; display: flex; align-items: center; justify-content: center; text-align: center; }
/* Selector is doubled so it outranks `.howworks-role-copy p` (which would
   otherwise force this back to 15px muted body text). */
.promise-inline .promise-inline-title { font-family: var(--font-serif); font-weight: 700; font-size: 26px; line-height: 1.32; color: var(--ink); max-width: 30ch; margin: 0; }

/* Experience the First Lesson — now its own linen section between the cream
   How It Works section and the cream Choose Your Path section. */
.session-one-section { background: var(--linen); padding: 6.5rem 4rem; text-align: center; }
.pilot-section + .session-one-section { padding-top: 3.5rem; }
.session-one-transition { max-width: 560px; margin: 0 auto; }
.session-one-heading { font-family: var(--font-serif); font-weight: 700; font-size: 32px; color: var(--ink); }
.session-one-lede { font-size: 15px; color: var(--muted); line-height: 1.8; max-width: 480px; margin: .9rem auto 0; }
/* Session One product line — $27 shown clearly, elegant serif, not a loud badge. */
.session-one-price { font-family: var(--font-serif); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: .01em; }
/* Sized ~18% larger than a standard path-card, with a floating gold outline
   (offset outside the card edge) so it reads as the visual focal point of
   this part of the page. */
.session-one-card {
  max-width: 920px; margin: 3rem auto 0 auto; text-align: left;
  background: var(--cream); border-top: 2.5px solid var(--gold);
  outline: 1px solid var(--gold-lt); outline-offset: 10px;
  box-shadow: 0 4px 26px rgba(139,105,20,.1);
  display: grid; grid-template-columns: 285px 1fr; gap: 2.75rem;
  padding: 3rem; align-items: start;
}
.session-one-cover { aspect-ratio: 3/4; background: var(--linen); display: flex; align-items: center; justify-content: center; }
.session-one-digital-note { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--light); margin-top: .8rem; }
/* Session One card — right-column vertical rhythm. Scoped to .session-one-body
   so the shared .path-* access cards are unaffected. Adds breathing room so the
   eye reads three distinct beats: intro → what's included → purchase. */
.session-one-body .cr { margin: 1.35rem 0; }
.session-one-body .path-features { gap: .85rem; }
.session-one-body .path-features li { line-height: 1.5; }
.path-section { background: var(--cream); padding: 6.5rem 4rem; }
.path-section .sec-hdr { padding-bottom: 1.5rem; }
.path-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; max-width: 980px; margin: .75rem auto 0; }
.path-card {
  background: var(--linen); padding: 2.5rem 2.5rem;
  border-top: 2.5px solid var(--gold-lt);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.path-card--featured { border-top-color: var(--gold); background: var(--cream); box-shadow: 0 2px 18px rgba(139,105,20,.08); }
.path-tag { font-size: 10px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }
.path-title { font-family: var(--font-serif); font-weight: 700; font-size: 24px; }
.path-desc { font-size: 14px; color: var(--muted); line-height: 1.75; }
.path-features { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.path-features li { font-size: 13px; color: var(--muted); display: flex; align-items: flex-start; gap: 8px; }
.path-price-note { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: auto; padding-top: .75rem; border-top: .5px solid var(--gold-lt); }
/* Fixed-price treatment for cards with finalized Fall 2026 pricing — the amount
   is a prominent serif figure (never tiny metadata), with the unit + a line of
   microcopy beneath. margin-top:auto keeps prices/CTAs aligned across cards. */
.path-price { margin-top: auto; padding-top: 1.1rem; border-top: .5px solid var(--gold-lt); display: flex; flex-direction: column; gap: .35rem; }
.path-price-amt { font-family: var(--font-serif); font-weight: 700; font-size: 24px; color: var(--ink); line-height: 1.15; }
.path-price-unit { font-size: 14px; font-weight: 600; font-style: italic; color: var(--muted); }
.path-price-sub { font-size: 12px; color: var(--light); letter-spacing: .03em; line-height: 1.5; }
.path-future-note { text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 15.5px; color: var(--muted); max-width: 540px; margin: 3rem auto 0; line-height: 1.75; }
.path-apply-btn span { display: block; }
.path-application-note { margin-top: .75rem; padding-top: .7rem; border-top: .5px solid var(--gold-lt); color: var(--light); font-size: 11px; line-height: 1.55; text-align: center; }


/* =============================================================
   13. ABOUT PAGE
   ============================================================= */
.about-blush { background: var(--blush); padding: 6rem; display: grid; grid-template-columns: .66fr 1fr; gap: 5rem; align-items: start; }
.about-photos-col { display: flex; flex-direction: column; gap: .85rem; }
/* Primary portrait — 3:4 ratio, like a classic portrait canvas */
.photo-primary {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--linen);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
/* Refined inner-frame accent — stays tasteful over real photos too */
.photo-primary::after {
  content: '';
  position: absolute; inset: 12px;
  border: 1px solid rgba(199,165,106,.28);
  pointer-events: none; z-index: 1;
}
.photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
/* Secondary portraits — 5:7 ratio (taller than the old 4:5 so full-length
   portraits have room to breathe without being cropped) */
.photo-secondary {
  background: var(--linen);
  aspect-ratio: 5/7;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  transition: box-shadow .4s ease;
}
.photo-secondary::after {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(199,165,106,.2);
  pointer-events: none; z-index: 1;
}
/* Real photo swap-ins — uncomment img tags + use these classes */
.photo-primary-img, .photo-secondary-img {
  width: 100%; height: 100%; display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.photo-primary-img { object-fit: cover; object-position: center top; }
/* Secondary portraits show the full frame (no cropping) — any leftover
   space reads as a soft linen mat rather than lost detail */
.photo-secondary-img { object-fit: contain; background: var(--linen); }

/* Subtle editorial hover on the two secondary portraits — gentle lift + zoom */
.photo-secondary:hover { box-shadow: 0 18px 34px -12px rgba(44,38,26,.28); }
.photo-secondary:hover .photo-secondary-img { transform: scale(1.035); }

/* ─────────────────────────────────────────────────────────────
   Site-wide photo frame — the same decorative thin gold inset line
   used on the About portraits, applied to every photograph across
   the site for one consistent framed-print treatment. The cover
   artworks, the Session One cover, and the Parent Guide document
   previews keep their own intentional framing and are excluded.
   ───────────────────────────────────────────────────────────── */
.editorial-band,
.studio-tile-img,
.phase-thumb,
.phase-img,
.contact-hero-img { position: relative; }

/* Gallery painting tiles are deliberately frameless — the frame is reserved
   for actual photographs, so the artwork reads as the art itself, unmatted. */
.hero-r::after,
.editorial-band::after,
.studio-tile-img::after,
.phase-thumb::after,
.phase-img::after,
.contact-hero-img::after {
  content: '';
  position: absolute; inset: 12px;
  border: 1px solid rgba(199,165,106,.28);
  pointer-events: none; z-index: 2;
}
/* Hero portrait sits inside a cream inset (2.25rem padding), so its frame
   line is pushed in to hug the image edge rather than the panel edge. */
.hero-r::after { inset: 2.25rem; }
/* The featured gallery triptych is artwork (shown via .editorial-band), not a
   photo — keep it frameless like the other gallery paintings. */
.gallery-detail-wrap .editorial-band::after { content: none; }

/* ── Shared placeholder label (used in all image areas) ── */
.ph-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: .6rem; padding: 1.25rem; text-align: center; position: relative; z-index: 2;
}
.ph-label {
  font-family: var(--font-serif);
  font-size: 11px; line-height: 1.8; color: var(--light); letter-spacing: .04em;
}
.ph-label em { font-style: italic; color: var(--taupe); font-size: 10px; display: block; }
.ph-icon { opacity: .45; }
.about-identity { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-align: center; padding: .5rem 0; }
.about-r { display: flex; flex-direction: column; gap: 1.35rem; }
.about-opener { font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.65; border-left: 2.5px solid var(--gold-lt); padding-left: 1.35rem; color: var(--ink); }
.about-body { font-size: 15px; color: var(--muted); line-height: 1.9; }
/* ── In the Studio (About page process gallery) ── */
.studio-section { background: var(--linen); padding: 6.5rem 4rem; }
.studio-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; max-width: 980px; margin: 0 auto; }
.studio-tile { position: relative; overflow: hidden; }
.studio-tile::after {
  content: '';
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(199,165,106,.42);
  pointer-events: none;
}
.studio-tile-img { width: 100%; aspect-ratio: 4/5; background: var(--taupe); display: block; object-fit: cover; }

.pillars-section { background: var(--cream); padding: 6.5rem 4rem; }
/* Three premium editorial cards — generous breathing room, no numeric
   labels. A small gold diamond (matching the site's existing rule-diamond
   device) stands in for the old "01/02/03" numbering. */
.pillars-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; max-width: 980px; margin: 3.5rem auto 0; }
.pillar-card { background: var(--linen); padding: 3.25rem 2.75rem; border-top: 2.5px solid var(--gold-lt); display: flex; flex-direction: column; gap: 1.1rem; }
.pillar-accent { width: 8px; height: 8px; background: var(--gold-lt); transform: rotate(45deg); margin-bottom: .2rem; }
.pillar-name { font-family: var(--font-serif); font-weight: 700; font-size: 21px; }
.pillar-desc { font-size: 14px; color: var(--muted); line-height: 1.8; }

/* Stewards of Home — warm charcoal section */
.soh-section {
  background: var(--charcoal);
  padding: 5.5rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4.5rem; align-items: center;
}
.soh-title { font-family: var(--font-serif); font-weight: 700; font-size: 30px; color: var(--cream); }
.soh-body { font-size: 15px; color: #b8a898; line-height: 1.9; }
.soh-wm { font-family: var(--font-serif); font-weight: 700; font-size: 22px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); text-align: center; }
.soh-sub { font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-warm); }


/* =============================================================
   14. CONTACT PAGE
   ============================================================= */
.contact-blush { background: var(--blush); padding: 5.5rem 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.contact-blush-l { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-hero-title { font-family: var(--font-serif); font-weight: 700; font-size: 50px; line-height: 1.05; }
.contact-hero-sub { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
/* Taller than the original 16:9 — the source is a full-length seated
   portrait, and 16:9 only showed down to about her waist. 10:7 keeps the
   environmental-portrait feel (chair, forearms, crossed legs all visible)
   instead of cropping in tight like a headshot. */
.contact-hero-img { background: var(--cream); aspect-ratio: 5/4; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.contact-hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; display: block; }
.contact-body-grid { background: var(--cream); padding: 6.5rem 4rem; display: grid; grid-template-columns: 1fr 1.4fr; gap: 5.5rem; }
.contact-l { display: flex; flex-direction: column; gap: 1.5rem; }
.c-details { display: flex; flex-direction: column; gap: 1.1rem; }
.c-det { display: flex; flex-direction: column; gap: 3px; }
.c-det-lbl { font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.c-det-val { font-size: 15px; color: var(--ink); }
.contact-r { display: flex; flex-direction: column; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.form-grp { display: flex; flex-direction: column; gap: 6px; }
/* ── Conditional fields shown per inquiry type ── */
.inquiry-fields { display: none; flex-direction: column; gap: 1.1rem; margin: .5rem 0; padding: 1.25rem; background: var(--linen); border-left: 2px solid var(--gold-lt); }
.inquiry-fields.active { display: flex; }
.form-lbl { font-size: 11px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }
.form-in, .form-sel, .form-ta {
  padding: 13px 15px;
  background: var(--cream);
  border: .5px solid rgba(139,105,20,.3);
  color: var(--ink);
  font-family: var(--font-sans); font-size: 15px;
  outline: none; transition: border-color .2s;
  -webkit-appearance: none; width: 100%;
}
.form-in:focus, .form-sel:focus, .form-ta:focus { border-color: var(--gold); }
.form-ta { height: 115px; resize: vertical; }
.form-submit {
  padding: 14px 30px;
  background: var(--ink); border: none;
  color: var(--cream);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: background .2s;
  align-self: flex-start;
}
.form-submit:hover { background: var(--gold); }
.form-submit:disabled { cursor: wait; opacity: .65; }
.form-status { min-height: 1.4em; font-size: 13px; line-height: 1.55; color: var(--muted); }
.form-status.is-error { color: #8b3f32; }
.inquiry-guidance {
  padding: 1.25rem 1.35rem; background: var(--linen);
  border-left: 2.5px solid var(--gold-lt); color: var(--muted);
  font-size: 14px; line-height: 1.7;
}
.inquiry-guidance strong { color: var(--ink); }
.inquiry-guidance-rule { height: 1px; background: rgba(139,105,20,.18); margin: .9rem 0; }
.inquiry-apply-link {
  display: inline-flex; align-items: center; gap: .65rem; margin-top: 1rem;
  padding: .8rem 1rem; border: 1px solid var(--ink); color: var(--ink);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.inquiry-apply-link:hover { background: var(--ink); color: var(--cream); }


/* =============================================================
   15. RESPONSIVE BREAKPOINTS
   ============================================================= */

/* ── Tablet landscape (≤1024px) ── */
@media (max-width: 1024px) {
  nav.site-nav { padding: 0 2rem; }
  .hero-l { padding: 4rem 3rem 4rem 3.5rem; }
  footer { grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
  footer > div:last-child { grid-column: 1 / -1; }
  .curr-band { gap: 3rem; padding: 4rem 3rem; }
  .about-blush { padding: 4rem 3rem; gap: 3rem; }
  /* Program-at-a-glance stacks to one column below 1024 — the 4-column layout
     gets cramped (wrapping labels) before the ≤900 hero stack kicks in. */
  .curr-glance-grid { grid-template-columns: 1fr; }
  .glance-group { padding: 1.75rem 0 0; }
  .glance-group:first-child { padding-top: 0; }
  .glance-group:last-child { padding-right: 0; }
  .glance-group + .glance-group { border-left: none; border-top: .5px solid var(--gold-lt); }
  .glance-dl { max-width: 360px; }
}

/* ── Tablet portrait (≤900px) ── */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-r { min-height: 340px; }
  .hero-l { padding: 3.5rem 2.5rem; }
  .hero-title { font-size: 40px; }
  .home-about { grid-template-columns: 1fr; gap: 2.5rem; }
  .collection-grid { grid-template-columns: 1fr; }
  .works-caption-story--wide { columns: 1; }
  .collection-grid--dense { grid-template-columns: 1fr 1fr; }
  .collection { padding: 4rem 2.5rem; }
  .gallery-jumpnav { padding: 0; }
  .curr-band { grid-template-columns: 1fr; gap: 2.5rem; }
  .phase-grid { grid-template-columns: 1fr; }
  .promise-section { grid-template-columns: 1fr; gap: 2.5rem; }
  .path-grid { grid-template-columns: 1fr; }
  .pilot-pathways { grid-template-columns: 1fr; }
  .session-one-card { grid-template-columns: 1fr; outline-offset: 6px; }
  .session-one-cover { max-width: 280px; margin: 0 auto; }
  .howworks-role { grid-template-columns: 1fr; gap: 2.5rem; margin-top: 3.5rem; max-width: 560px; }
  .guide-preview--role { max-width: 360px; margin: 0 auto; }
  .pillars-grid { grid-template-columns: 1fr; max-width: 480px; }
  .studio-section { padding: 4rem 2.5rem; }
  .studio-gallery { grid-template-columns: 1fr 1fr; }
  .recognition-inner { grid-template-columns: 1fr; gap: 2.5rem; max-width: 660px; }
  .about-blush { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-photos-col { order: 2; }
  .about-r { order: 1; }
  .contact-blush { grid-template-columns: 1fr; gap: 2rem; }
  .contact-body-grid { grid-template-columns: 1fr; gap: 3rem; }
  .community-inner { grid-template-columns: 1fr; }
  .curr-hero { grid-template-columns: 1fr; grid-template-areas: "intro" "art"; gap: 2.25rem; padding: 3.5rem 2.5rem; }
  .curr-hero-art { max-width: 460px; margin: 0 auto; width: 100%; }
  .curr-glance-section { padding: 0 2.5rem 4rem; }
  .soh-section { grid-template-columns: 1fr; gap: 2.5rem; padding: 3.5rem 2.5rem; }
  footer { grid-template-columns: 1fr 1fr; gap: 2rem; padding: 3rem 2.5rem; }
  .ft-bot { padding: 1rem 2.5rem; flex-direction: column; gap: .4rem; }
  .black-banner { padding: 4rem 2.5rem; }
  .community-section { padding: 4rem 2.5rem; }
}

/* ── Mobile (≤600px) ── */
@media (max-width: 600px) {
  .curr-access-paths, .curr-resource-row { grid-template-columns: 1fr; }
  nav.site-nav { padding: 0 1.25rem; }
  .nav-logo-img { height: 48px; }
  .sec-title { font-size: 30px; }
  .gallery-page-title { font-size: 38px; }
  .session-one-heading { font-size: 25px; }
  .session-one-transition { margin-top: 0; }
  .path-future-note { margin-top: 2.25rem; }
  .howworks-steps { grid-template-columns: 1fr; gap: 2rem; }
  .guide-preview--hero { margin-top: 2.5rem; max-width: 100%; }
  .howworks-role-title { font-size: 24px; }
  .howworks-emphasis { font-size: 16px; }
  .promise-band { padding: 2rem 1.5rem; margin-top: 2.5rem; }
  .promise-band-title { font-size: 23px; }
  .promise-inline .promise-inline-title { font-size: 22px; }
  .pilot-panel { padding: 2.25rem 1.5rem 2.5rem; }
  .hero-title { font-size: 34px; }
  .curr-hero-title { font-size: 44px; }
  .curr-glance-section { padding: 0 1.5rem 3.5rem; }
  .curr-glance { padding: 2rem 1.5rem 2.25rem; }
  .curr-glance-title { font-size: 23px; }
  .contact-hero-title { font-size: 38px; }

  /* Prevent hero buttons from stretching full-width when stacked */
  .hero-l { padding: 2.5rem 1.5rem; }
  .hero-btns { flex-direction: column; align-items: flex-start; }

  .collection { padding: 3rem 1.5rem; }
  .gallery-jumpnav { padding: 0; gap: .4rem; }
  .home-about { padding: 3rem 1.5rem; }
  .home-gallery { padding: 0 1.5rem 3.5rem; }
  .recognition-section { padding: 3.5rem 1.5rem; }
  .week-section, .pillars-section, .path-section, .pilot-section, .howworks-section, .session-one-section { padding: 3rem 1.5rem; }
  .session-one-card { padding: 1.75rem; }
  .curr-band, .curr-hero, .about-blush, .contact-blush, .contact-body-grid { padding: 3rem 1.5rem; }
  .phase-card { padding: 1.75rem; }
  .phase-thumbs { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .pillars-grid { grid-template-columns: 1fr; }
  .studio-section { padding: 3rem 1.5rem; }
  .studio-gallery { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .promise-list { grid-template-columns: 1fr; }
  .soh-section { padding: 3rem 1.5rem; }
  footer { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem; }
  .ft-bot { padding: 1rem 1.5rem; }

  /* Waitlist banner form — stacked on mobile */
  .black-banner { padding: 3.5rem 1.5rem; }
  .bb-form { flex-direction: column; }
  .bb-in { border-right: 1px solid rgba(201,165,90,.45); border-bottom: none; }
  .bb-btn { width: 100%; }

  /* Community newsletter form — stacked on mobile */
  .community-section { padding: 3.5rem 1.5rem; }
  .comm-form { flex-direction: column; }
  .comm-in { border-right: 1px solid var(--gold-lt); border-bottom: none; }
  .comm-btn { width: 100%; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}