/* ============================================================
   The Bojin Method — shared design system
   Direction 4: grounded luxury.
   Deep forest ink + champagne gold + warm cream.
   Dark is the signature look; the toggle offers a cream day mode.
   NOTE: variable names (--jade etc.) are kept from v1 so the
   three pages need no HTML changes — only the values changed.
   ============================================================ */

:root{
  --paper:      #F7ECE1;   /* terracotta cream (page) */
  --paper-2:    #FDF8F2;   /* warm white — raised bands & cards */
  --paper-3:    #EFE1D2;   /* deeper peach tint band */
  --ink:        #2A211C;   /* warm espresso text */
  --ink-soft:   #77675A;   /* warm taupe */
  --jade:       #B45749;   /* terracotta peach (primary accent) */
  --jade-deep:  #9E4A3E;   /* deeper peach for hover / links */
  --brass:      #B45749;   /* alias — same peach family */
  --gold:       #BB9B5E;   /* soft gold — fine lines / trim (decorative) */
  --gold-ink:   #8F6E2E;   /* antique gold — small-caps labels (legible) */
  --line:       #ECDCCE;   /* warm hairline */
  --line-gold:  #D9C6A2;   /* soft-gold hairline (card tops / frames) */
  --on-jade:    #FFFFFF;   /* white on peach */
  --edge:       rgba(255,255,255,.5);   /* top inner-light on raised surfaces */
  --shadow:     0 1px 2px rgba(74,42,30,.05), 0 14px 30px -12px rgba(74,42,30,.16);
  --shadow-lift:0 2px 6px rgba(74,42,30,.06), 0 24px 48px -16px rgba(74,42,30,.24);
  --radius:     3px;
  --wrap:       1080px;
  --wrap-narrow:660px;
  --font-serif: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans:  "Hanken Grotesk", ui-sans-serif, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* peach "day mode" — the default look, also forced via the toggle */
:root[data-theme="light"]{
  --paper:#F7ECE1; --paper-2:#FDF8F2; --paper-3:#EFE1D2; --ink:#2A211C; --ink-soft:#77675A;
  --jade:#B45749; --jade-deep:#9E4A3E; --brass:#B45749; --gold:#BB9B5E; --gold-ink:#8F6E2E;
  --line:#ECDCCE; --line-gold:#D9C6A2; --on-jade:#FFFFFF; --edge:rgba(255,255,255,.5);
  --shadow:0 1px 2px rgba(74,42,30,.05), 0 14px 30px -12px rgba(74,42,30,.16);
  --shadow-lift:0 2px 6px rgba(74,42,30,.06), 0 24px 48px -16px rgba(74,42,30,.24);
}
/* warm espresso "night mode" — a dark companion to the peach, via the toggle */
:root[data-theme="dark"]{
  --paper:#1E1714; --paper-2:#262019; --paper-3:#2E251E; --ink:#F3E9DF; --ink-soft:#B3A596;
  --jade:#D5836F; --jade-deep:#E7A891; --brass:#D5836F; --gold:#C9A66A; --gold-ink:#D8B878;
  --line:#3A2E26; --line-gold:#4A3A2E; --on-jade:#2A1712; --edge:rgba(255,255,255,.09);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 30px -12px rgba(0,0,0,.5);
  --shadow-lift:0 2px 6px rgba(0,0,0,.35), 0 24px 48px -16px rgba(0,0,0,.55);
}

/* ---- ARCHIVE: previous "deep forest + champagne gold" palette ----
   To revert, paste these values back into :root{} (and data-theme blocks):
   --paper:#141D18; --paper-2:#1A2620; --paper-3:#212D25; --ink:#EFE8D9;
   --ink-soft:#A8A491; --jade:#C9A660; --jade-deep:#DDBC79; --brass:#C9A660;
   --line:#324037; --line-gold:#4A4433; --on-jade:#17110A;
   Hero scrim was rgba(13,20,16,…); hero eyebrow/rule were #E4C77E.
   Current look = "terracotta peach" (light, warm). --------------------- */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:18.5px;
  line-height:1.8;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:500;
  line-height:1.12;
  color:var(--ink);
  margin:0 0 .5em;
  text-wrap:balance;
  letter-spacing:.005em;
}
h1{ font-size:clamp(2.6rem,5.6vw,4rem); }
h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); }
h3{ font-size:1.45rem; }
p{ margin:0 0 1.1em; }
a{ color:var(--jade-deep); text-decoration-color:color-mix(in srgb, var(--jade) 40%, transparent); text-underline-offset:4px; }
a:hover{ text-decoration-color:var(--jade-deep); }
strong{ font-weight:600; }
img{ max-width:100%; display:block; }
::selection{ background:color-mix(in srgb, var(--jade) 30%, transparent); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }
.wrap--narrow{ max-width:var(--wrap-narrow); }
.section{ padding-block:clamp(64px,9vw,120px); }
.section--tight{ padding-block:clamp(44px,5vw,68px); }
.band{ background:var(--paper-2); border-block:1px solid var(--line); }
.band-jade{ background:var(--paper-3); border-block:1px solid var(--line-gold); }
.center{ text-align:center; }
.stack > * + *{ margin-top:1rem; }

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--font-sans);
  font-size:.74rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--jade); margin:0 0 1rem;
}
.rule{ width:52px; height:1px; background:var(--jade); border:0; margin:1.2rem 0 1.6rem; opacity:.85; }
.center .rule{ margin-inline:auto; }
.lead{ font-size:clamp(1.18rem,2vw,1.45rem); line-height:1.65; color:var(--ink); max-width:40ch;
  font-weight:400; }
.center .lead{ margin-inline:auto; }
.muted{ color:var(--ink-soft); }
.display{ font-size:clamp(2.9rem,6.4vw,4.6rem); line-height:1.06; font-weight:500; }
.kicker{ font-family:var(--font-sans); font-size:.95rem; color:var(--ink-soft); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-sans); font-size:.95rem; font-weight:600; letter-spacing:.06em;
  background:var(--jade); color:var(--on-jade);
  padding:.9rem 1.9rem; border:1px solid var(--jade); border-radius:var(--radius);
  cursor:pointer; text-decoration:none;
  transition:background .18s ease, border-color .18s ease, transform .05s ease;
}
.btn:hover{ background:var(--jade-deep); border-color:var(--jade-deep); text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:color-mix(in srgb, var(--ink) 35%, transparent); }
.btn--ghost:hover{ background:transparent; border-color:var(--jade); color:var(--jade-deep); }
.btn--lg{ padding:1.05rem 2.3rem; font-size:1rem; }

/* ---------- grids & cards ---------- */
.grid{ display:grid; gap:clamp(20px,3vw,36px); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:760px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

.card{
  background:var(--paper-2); border:1px solid var(--line); border-top:1px solid var(--line-gold);
  border-radius:6px; padding:1.9rem 1.7rem; box-shadow:var(--shadow);
}
.band .card{ background:var(--paper); }
.band-jade .card{ background:var(--paper); }

.numbered{ font-family:var(--font-serif); font-style:italic; font-size:1.7rem; color:var(--jade); line-height:1; }

/* ---------- quotes / testimonials ---------- */
.quote{
  margin:0; font-family:var(--font-serif); font-size:1.35rem; font-style:italic; font-weight:400;
  line-height:1.5; color:var(--ink);
}
.quote cite{ display:block; margin-top:1rem; font-family:var(--font-sans);
  font-style:normal; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--jade); }

/* ---------- forms ---------- */
.field{
  font-family:var(--font-sans); font-size:1rem; color:var(--ink);
  background:color-mix(in srgb, var(--paper-2) 70%, transparent);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:.9rem 1.05rem; width:100%;
}
.field:focus{ outline:none; border-color:var(--jade); box-shadow:0 0 0 3px color-mix(in srgb, var(--jade) 22%, transparent); }
.field::placeholder{ color:var(--ink-soft); }
.signup{ display:flex; gap:.6rem; flex-wrap:wrap; }
.signup .field{ flex:1 1 250px; }
.center .signup{ justify-content:center; }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:.75rem; letter-spacing:.02em; }

/* ---------- pills / badges ---------- */
.pill{
  display:inline-block; font-family:var(--font-sans); font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); background:transparent;
  border:1px solid var(--line); padding:.34rem .8rem; border-radius:999px;
}
.pill--brass{ color:var(--jade); border-color:color-mix(in srgb, var(--jade) 45%, transparent);
  background:color-mix(in srgb, var(--jade) 8%, transparent); }
.pill--draft{ color:var(--ink-soft); background:transparent; border:1px dashed var(--line); }

/* ---------- responsive video embed ---------- */
.embed{ position:relative; width:100%; aspect-ratio:16/9; background:var(--paper-2);
  border:1px solid var(--line-gold); border-radius:4px; overflow:hidden; }
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- header / nav ---------- */
.site-header{ position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(1.05) blur(10px);
  border-bottom:1px solid var(--line-gold); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:var(--wrap); margin-inline:auto; padding:1rem 28px; }
.brand{ font-family:var(--font-serif); font-size:1.35rem; font-weight:500; letter-spacing:.02em;
  color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:.55rem; }
.brand .mark{ width:20px; height:20px; flex:none; }
.nav-links{ display:flex; align-items:center; gap:1.9rem; }
.nav-links a{ font-family:var(--font-sans); font-size:.9rem; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft); text-decoration:none; }
.nav-links a:hover{ color:var(--jade-deep); }
.nav-links a.active{ color:var(--jade); }
.nav-cta{ display:flex; align-items:center; gap:.9rem; }
.theme-toggle{ background:transparent; border:1px solid var(--line); border-radius:999px;
  width:34px; height:34px; cursor:pointer; color:var(--ink-soft); display:inline-flex;
  align-items:center; justify-content:center; font-size:15px; }
.theme-toggle:hover{ border-color:var(--jade); color:var(--jade-deep); }
.nav-toggle{ display:none; background:transparent; border:1px solid var(--line); border-radius:8px;
  width:40px; height:36px; cursor:pointer; color:var(--ink); align-items:center; justify-content:center; }
.nav-toggle:hover{ border-color:var(--jade); color:var(--jade-deep); }
@media (max-width:720px){
  .nav-toggle{ display:inline-flex; }
  .nav-cta{ display:none; }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    display:flex; flex-direction:column; gap:0; margin:0;
    background:var(--paper); border-top:1px solid var(--line);
    border-bottom:1px solid var(--line-gold); box-shadow:var(--shadow);
    padding:.35rem 0;
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .site-header.nav-open .nav-links{ opacity:1; transform:none; pointer-events:auto; }
  .nav-links a{ padding:.85rem 28px; letter-spacing:.06em; }
  .nav-links a:hover{ background:var(--paper-2); color:var(--jade-deep); }
}

/* ---------- footer ---------- */
.site-footer{ background:var(--paper-2); border-top:1px solid var(--line-gold);
  padding-block:2.6rem; margin-top:2rem; }
.site-footer .wrap{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  align-items:center; }
.site-footer a{ color:var(--ink); }
.foot-note{ font-size:.85rem; color:var(--ink-soft); max-width:52ch; }

/* ---------- hero helpers ---------- */
.hero{ padding-block:clamp(72px,11vw,150px) clamp(48px,7vw,84px); position:relative; }
.hero .eyebrow{ margin-bottom:1.3rem; }
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }

/* portrait — double gold frame, gallery style */
.portrait{ aspect-ratio:4/5; width:100%; background:var(--paper-3);
  border:1px solid var(--line-gold); outline:1px solid var(--line-gold); outline-offset:6px;
  border-radius:2px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-family:var(--font-sans); font-size:.85rem; letter-spacing:.06em;
  text-align:center; padding:1rem; margin:7px; }
.figure-note{ font-size:.8rem; color:var(--ink-soft); margin-top:.9rem; letter-spacing:.03em; }

/* ---------- course / lessons ---------- */
.lessons{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
@media (max-width:820px){ .lessons{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .lessons{ grid-template-columns:1fr; } }
.lesson{ background:var(--paper-2); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  transition:border-color .2s ease; }
.lesson:hover{ border-color:var(--line-gold); }
.lesson__thumb{ position:relative; aspect-ratio:16/10; background:var(--paper-3);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }
.lesson__thumb .embed{ border:0; border-radius:0; }
.lesson__meta{ padding:.95rem 1.05rem 1.1rem; }
.lesson__meta h3{ font-size:1rem; font-family:var(--font-sans); font-weight:600; letter-spacing:.01em; margin:0 0 .25rem; }
.lesson__tag{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--jade); }
.lesson.is-locked .lesson__tag{ color:var(--ink-soft); }

/* lock overlay shown until unlocked */
.lock{ display:flex; flex-direction:column; align-items:center; gap:.45rem; color:var(--ink-soft); }
.lock svg{ width:22px; height:22px; }
.locked-only{ display:flex; }
.unlocked-only{ display:none; }
body.unlocked .locked-only{ display:none; }
body.unlocked .unlocked-only{ display:block; }
body.unlocked .lesson.is-locked .lesson__tag::after{ content:" · unlocked"; }

/* login gate */
.gate{ max-width:410px; margin-inline:auto; background:var(--paper-2);
  border:1px solid var(--line); border-top:2px solid var(--jade);
  border-radius:8px; padding:2rem 1.8rem; box-shadow:var(--shadow); }
.gate h3{ font-family:var(--font-serif); font-size:1.55rem; font-weight:500; margin:0 0 .3rem; }
.gate .stack{ margin-top:1.3rem; }
.gate-form{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.3rem; }
.gate .btn{ width:100%; justify-content:center; }
body.unlocked .gate{ display:none; }

.demo-banner{ background:color-mix(in srgb, var(--jade) 9%, transparent);
  border:1px dashed color-mix(in srgb, var(--jade) 45%, transparent);
  color:var(--ink); border-radius:5px; padding:.85rem 1.05rem; font-size:.9rem; }

/* signed-in member bar */
.member-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--paper-2); border:1px solid var(--line-gold); border-radius:6px;
  padding:.8rem 1.1rem; margin-top:1.2rem; font-size:.95rem; }
.member-bar .btn{ padding:.5rem 1rem; font-size:.8rem; }

/* form success state */
.success-note{ background:color-mix(in srgb, var(--jade) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--jade) 45%, transparent);
  border-radius:6px; padding:1rem 1.2rem; font-size:1rem; }

/* order summary row (signup checkout) */
.order-row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:.75rem .15rem; font-size:.95rem; text-align:left; }
.order-row strong{ font-family:var(--font-serif); font-size:1.2rem; color:var(--jade-deep); }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
@media (scripting: none){ .reveal{ opacity:1; transform:none; } }

:focus-visible{ outline:2px solid var(--jade); outline-offset:2px; border-radius:2px; }

/* ---------- blog / articles ---------- */
.backlink{ display:inline-block; font-size:.85rem; letter-spacing:.03em; color:var(--ink-soft); text-decoration:none; margin-bottom:1.4rem; }
.backlink:hover{ color:var(--jade-deep); }
.post-meta{ font-size:.9rem; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:1.2rem; margin:.4rem 0 1.7rem; }
.post-meta b{ color:var(--ink); font-weight:600; }
.article p{ font-size:1.05rem; line-height:1.85; }
.article .lead{ font-size:clamp(1.18rem,2vw,1.4rem); line-height:1.65; margin-bottom:1.5rem; }
.callout{ background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--jade);
  border-radius:0 8px 8px 0; padding:1.2rem 1.4rem; margin:1.9rem 0; }
.callout p{ margin:0; }
.callout-label{ display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--jade); margin-bottom:.4rem; }
.steps{ counter-reset:step; list-style:none; padding:0; margin:1.3rem 0 1.7rem; }
.steps li{ position:relative; padding:0 0 1.15rem 3rem; font-size:1.05rem; line-height:1.7; }
.steps li::before{ counter-increment:step; content:counter(step); position:absolute; left:0; top:-2px;
  font-family:var(--font-serif); font-size:1.45rem; color:var(--jade); width:2rem; text-align:center; }
.note-safety{ font-size:.96rem; color:var(--ink-soft); background:var(--paper-3);
  border:1px dashed var(--line-gold); border-radius:8px; padding:1rem 1.25rem; margin:1.9rem 0; }
.faq{ border-top:1px solid var(--line); margin-top:2.4rem; padding-top:1.2rem; }
.faq h3{ font-family:var(--font-sans); font-size:1.06rem; font-weight:600; color:var(--ink); margin:1.4rem 0 .3rem; }
.faq p{ font-size:1rem; color:var(--ink-soft); margin:0 0 .7rem; }
.article-cta{ background:var(--paper-2); border:1px solid var(--line-gold); border-radius:12px;
  padding:2rem 1.7rem; margin:2.6rem 0 1rem; text-align:center; }
.article-cta h3{ font-family:var(--font-serif); font-weight:500; font-size:1.7rem; margin:0 0 .5rem; }
.article-cta p{ color:var(--ink-soft); font-size:1rem; margin:0 0 1.2rem; }
.post-bio{ font-size:.92rem; color:var(--ink-soft); border-top:1px solid var(--line); margin-top:2rem; padding-top:1.4rem; }
.post-bio b{ color:var(--ink); font-weight:600; }
.post-list{ display:grid; gap:1.2rem; margin-top:1.5rem; }
.post-card{ display:block; background:var(--paper-2); border:1px solid var(--line); border-top:1px solid var(--line-gold);
  border-radius:10px; padding:1.6rem 1.8rem; text-decoration:none; transition:border-color .2s ease; }
.post-card:hover{ border-color:var(--line-gold); text-decoration:none; }
.post-card .cat{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--jade); }
.post-card h3{ font-family:var(--font-serif); font-weight:500; font-size:1.5rem; color:var(--ink); margin:.35rem 0 .45rem; }
.post-card p{ color:var(--ink-soft); font-size:1rem; margin:0; line-height:1.6; }
.post-card .rd{ display:inline-block; margin-top:.8rem; color:var(--jade); font-size:.85rem; letter-spacing:.03em; }

/* ---------- imagery ---------- */
.figure{ margin:0; border:1px solid var(--line-gold); border-radius:10px; overflow:hidden;
  background:var(--paper-3); box-shadow:var(--shadow); }
.figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.figure--wide{ aspect-ratio:4/3; }
.figure-cap{ font-size:.8rem; color:var(--ink-soft); margin-top:.7rem; letter-spacing:.02em; }

/* thumbnail on a post-card — bleeds to the card edges above the text */
.card-media{ margin:-1.6rem -1.8rem 1.1rem; aspect-ratio:16/10; overflow:hidden;
  background:var(--paper-3); border-bottom:1px solid var(--line-gold); }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.post-card:hover .card-media img{ transform:scale(1.04); }

/* header image at the top of an article */
.article-hero{ margin:1.5rem 0 2.2rem; aspect-ratio:16/9; overflow:hidden; border-radius:10px;
  border:1px solid var(--line-gold); background:var(--paper-3); box-shadow:var(--shadow); }
.article-hero img{ width:100%; height:100%; object-fit:cover; display:block; }

/* click-to-watch video poster (reliable everywhere — opens YouTube) */
.video-poster{ position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:10px; border:1px solid var(--line-gold); box-shadow:var(--shadow); text-decoration:none; }
.video-poster img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.video-poster:hover img{ transform:scale(1.04); }
.video-poster::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(20,29,24,.15), rgba(20,29,24,.45)); }
.video-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:74px; height:74px; border-radius:50%; background:var(--jade); color:var(--on-jade);
  display:flex; align-items:center; justify-content:center; font-size:24px; padding-left:5px;
  box-shadow:0 6px 24px rgba(0,0,0,.35); transition:transform .18s ease; }
.video-poster:hover .video-play{ transform:translate(-50%,-50%) scale(1.06); }
.video-label{ position:absolute; bottom:16px; left:0; right:0; z-index:2; text-align:center;
  color:#fff; font-family:var(--font-sans); font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }

/* ============================================================
   Editorial / image-forward layer
   Full-bleed photo heroes, big image cards, card walls and
   category filters — the airy, gallery direction inspired by
   The Chinese Tea Shop. Scrims stay dark (they sit over a
   photo) so hero type is light in both day and night modes.
   ============================================================ */

/* ---------- full-bleed photo hero ---------- */
.hero-full{ position:relative; overflow:hidden; isolation:isolate;
  min-height:min(84vh,720px); display:flex; align-items:flex-end;
  padding-block:clamp(96px,15vw,170px) clamp(46px,7vw,86px);
  border-bottom:1px solid var(--line-gold); }
.hero-full__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero-full__scrim{ position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(38,24,18,.94) 2%, rgba(38,24,18,.55) 42%, rgba(38,24,18,.22) 74%, rgba(38,24,18,.42) 100%),
    linear-gradient(to right, rgba(38,24,18,.55), rgba(38,24,18,.10) 60%); }
.hero-full .wrap{ position:relative; }
.hero-full .eyebrow{ color:#F3C7B0; }
.hero-full .rule{ background:#F3C7B0; opacity:.9; }
.hero-full h1,.hero-full .display{ color:#FBF3EA; text-shadow:0 2px 26px rgba(0,0,0,.42); }
.hero-full .lead{ color:#F1E7DD; max-width:48ch; }
.hero-full--center{ align-items:center; text-align:center; }
.hero-full--center .rule{ margin-inline:auto; }
.hero-full--center .lead{ margin-inline:auto; }
.hero-full .btn--ghost{ color:#FBF3EA; border-color:rgba(251,243,234,.55); }
.hero-full .btn--ghost:hover{ color:#FCE3D6; border-color:#F3C7B0; }
.hero-scroll{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:1;
  color:#F3C7B0; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; opacity:.85;
  writing-mode:initial; }

/* ---------- big image cards + card wall ---------- */
.card-wall{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,36px); margin-top:2.4rem; }
@media (max-width:900px){ .card-wall{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .card-wall{ grid-template-columns:1fr; } }

.wall-card{ display:flex; flex-direction:column; background:var(--paper-2);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none;
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.wall-card:hover{ transform:translateY(-5px); border-color:var(--line-gold);
  box-shadow:var(--shadow); text-decoration:none; }
.wall-card__media{ aspect-ratio:4/3; overflow:hidden; background:var(--paper-3);
  border-bottom:1px solid var(--line-gold); }
.wall-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.wall-card:hover .wall-card__media img{ transform:scale(1.05); }
.wall-card__body{ padding:1.25rem 1.4rem 1.45rem; display:flex; flex-direction:column;
  gap:.55rem; flex:1 1 auto; }
.wall-card__cat{ font-family:var(--font-sans); font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--jade); }
.wall-card__title{ font-family:var(--font-serif); font-weight:500; font-size:1.34rem;
  line-height:1.22; color:var(--ink); margin:0; }
.wall-card__meta{ margin-top:auto; padding-top:.5rem; font-family:var(--font-sans);
  font-size:.82rem; color:var(--ink-soft); letter-spacing:.03em;
  display:flex; justify-content:space-between; align-items:center; }
.wall-card__meta .arw{ color:var(--jade); transition:transform .2s ease; }
.wall-card:hover .wall-card__meta .arw{ transform:translateX(3px); }

/* ---------- category filter row ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin-top:2.2rem; }
.filter-btn{ font-family:var(--font-sans); font-size:.78rem; font-weight:600; letter-spacing:.07em;
  color:var(--ink-soft); background:transparent; border:1px solid var(--line);
  padding:.5rem 1.05rem; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, color .18s ease; }
.filter-btn:hover{ border-color:var(--jade); color:var(--jade-deep); }
.filter-btn.is-active{ background:var(--jade); border-color:var(--jade); color:var(--on-jade); }
.wall-card.is-hidden{ display:none; }
.wall-empty{ grid-column:1/-1; text-align:center; color:var(--ink-soft); padding:2rem 0; }

/* ---------- editorial feature (oversized image + text) ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
@media (max-width:820px){ .feature{ grid-template-columns:1fr; } }
.feature__media{ aspect-ratio:4/5; border-radius:16px; overflow:hidden; background:var(--paper-3);
  border:1px solid var(--line-gold); box-shadow:var(--shadow); }
.feature__media img{ width:100%; height:100%; object-fit:cover; }
.feature--reverse .feature__media{ order:-1; }
@media (max-width:820px){ .feature--reverse .feature__media{ order:0; } }

/* ---------- email capture band ---------- */
.capture{ text-align:center; }
.capture .signup{ max-width:520px; margin:1.6rem auto 0; }
.capture .form-note{ text-align:center; }

/* ---------- library / guide index (lovenfit-style browse-by-concern) ---------- */
.hero-full--short{ min-height:min(58vh,540px); }

.stats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,20px); margin-top:1.8rem; }
@media (max-width:560px){ .stats-row{ grid-template-columns:1fr; } }
.stat-tile{ text-align:center; background:var(--paper-2); border:1px solid var(--line);
  border-top:1px solid var(--line-gold); border-radius:12px; padding:1.3rem 1rem; }
.stat-tile b{ display:block; font-family:var(--font-serif); font-weight:500; font-size:2.2rem;
  color:var(--jade); line-height:1; margin-bottom:.35rem; }
.stat-tile span{ font-size:.85rem; color:var(--ink-soft); letter-spacing:.04em; }

.lib-search{ max-width:560px; margin:2rem auto 0; position:relative; }
.lib-search .field{ padding-left:2.7rem; }
.lib-search .search-ic{ position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  color:var(--ink-soft); width:18px; height:18px; pointer-events:none; }

.filter-btn .cnt{ margin-left:.4em; opacity:.55; font-weight:400; }
.filter-btn.is-active .cnt{ opacity:.8; }

.lib-list{ display:flex; flex-direction:column; gap:1.1rem; margin-top:1.8rem; }
.lib-row{ display:grid; grid-template-columns:264px 1fr; gap:0; align-items:stretch;
  background:var(--paper-2); border:1px solid var(--line); border-top:1px solid var(--line-gold);
  border-radius:14px; overflow:hidden; text-decoration:none;
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.lib-row:hover{ border-color:var(--line-gold); transform:translateY(-3px); box-shadow:var(--shadow); text-decoration:none; }
.lib-row__media{ overflow:hidden; background:var(--paper-3); }
.lib-row__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; min-height:190px; }
.lib-row:hover .lib-row__media img{ transform:scale(1.04); }
.lib-row__body{ padding:1.35rem 1.6rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; }
.lib-row__cat{ font-family:var(--font-sans); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--jade); }
.lib-row__q{ font-family:var(--font-serif); font-weight:500; font-size:1.5rem; line-height:1.18; color:var(--ink); margin:0; }
.lib-row__why{ color:var(--ink-soft); font-size:1rem; line-height:1.6; margin:0; }
.lib-row__meta{ margin-top:auto; padding-top:.5rem; font-family:var(--font-sans); font-size:.82rem;
  color:var(--ink-soft); letter-spacing:.03em; }
.lib-row__meta .arw{ color:var(--jade); }
.lib-row:hover .lib-row__meta .arw{ margin-left:.15em; }
@media (max-width:640px){
  .lib-row{ grid-template-columns:1fr; }
  .lib-row__media{ aspect-ratio:16/10; }
  .lib-row__media img{ min-height:0; }
}
.lib-row.is-hidden{ display:none; }

/* mini social proof strip */
.proof{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); margin-top:1.6rem; }
@media (max-width:720px){ .proof{ grid-template-columns:1fr; } }

/* ---------- quiz : face tension profile ---------- */
.quiz-wrap{ max-width:640px; }
.quiz-intro{ text-align:center; }
.quiz-progress{ display:flex; gap:.42rem; justify-content:center; margin-bottom:1.8rem; }
.quiz-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:background .2s ease, transform .2s ease; }
.quiz-dot.is-done{ background:var(--jade); }
.quiz-dot.is-current{ background:var(--jade); transform:scale(1.6); }
.quiz-card{ background:var(--paper-2); border:1px solid var(--line); border-top:2px solid var(--jade);
  border-radius:16px; padding:clamp(1.5rem,4vw,2.4rem); box-shadow:var(--shadow); }
.quiz-zone{ font-family:var(--font-sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--jade); margin:0 0 .5rem; text-align:center; }
.quiz-q{ font-family:var(--font-serif); font-weight:500; font-size:clamp(1.5rem,3.4vw,2rem); line-height:1.2;
  text-align:center; margin:0 0 1.6rem; }
.quiz-options{ display:flex; flex-direction:column; gap:.8rem; }
.quiz-opt{ display:flex; align-items:center; gap:1rem; text-align:left; width:100%;
  background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem;
  cursor:pointer; font-family:var(--font-sans);
  transition:border-color .18s ease, background .18s ease, transform .05s ease; }
.quiz-opt:hover{ border-color:var(--jade); }
.quiz-opt.is-sel{ border-color:var(--jade); background:color-mix(in srgb, var(--jade) 9%, transparent); }
.quiz-opt:active{ transform:scale(.995); }
.quiz-lvl{ display:flex; align-items:flex-end; gap:3px; flex:none; height:22px; }
.quiz-lvl .b{ width:6px; border-radius:2px; background:var(--line); }
.quiz-lvl .b:nth-child(1){ height:9px; } .quiz-lvl .b:nth-child(2){ height:15px; } .quiz-lvl .b:nth-child(3){ height:22px; }
.quiz-lvl .b.on{ background:var(--jade); }
.quiz-opt-txt{ display:flex; flex-direction:column; }
.quiz-opt-label{ font-size:1.02rem; font-weight:600; color:var(--ink); }
.quiz-opt-sub{ font-size:.86rem; color:var(--ink-soft); }
.quiz-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:1.5rem; }
.quiz-nav .btn{ padding:.55rem 1.15rem; font-size:.85rem; }
.quiz-count{ font-size:.85rem; color:var(--ink-soft); }
.quiz-note{ font-size:.82rem; color:var(--ink-soft); margin-top:1.2rem; }
.quiz-note--center{ text-align:center; }

/* result */
.radar-box{ max-width:420px; margin:1.4rem auto .4rem; }
.radar-box svg{ width:100%; height:auto; display:block; }
.zone-scores{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:1rem 0 1.4rem; }
.zone-chip{ font-family:var(--font-sans); font-size:.78rem; padding:.32rem .85rem; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft); }
.zone-chip.top{ background:var(--jade); color:var(--on-jade); border-color:var(--jade); font-weight:600; }
.ritual{ counter-reset:step; list-style:none; padding:0; margin:1.2rem 0 1.4rem; text-align:left; }
.ritual li{ position:relative; padding:0 0 1rem 2.6rem; font-size:1.02rem; line-height:1.65; color:var(--ink); }
.ritual li::before{ counter-increment:step; content:counter(step); position:absolute; left:0; top:-1px;
  font-family:var(--font-serif); font-size:1.3rem; color:var(--jade); width:1.8rem; text-align:center; }
.restart{ display:inline-block; margin-top:1rem; font-size:.85rem; color:var(--ink-soft);
  background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.restart:hover{ color:var(--jade-deep); }

/* ============================================================
   Depth & gold refinement layer (2026-07 polish pass)
   A soft, consistent sense of light + a quiet gold "second voice".
   Everything here is deliberately subtle — quiet luxury, not loud.
   ============================================================ */

/* — gold second voice: small-caps labels + fine lines — */
.eyebrow, .quote cite, .callout-label, .lesson__tag,
.post-card .cat, .wall-card__cat, .lib-row__cat, .quiz-zone{ color:var(--gold-ink); }
.rule{ height:1px; opacity:1;
  background:linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 6%, transparent)); }
.center .rule{ background:linear-gradient(90deg,
  color-mix(in srgb,var(--gold) 6%, transparent), var(--gold), color-mix(in srgb,var(--gold) 6%, transparent)); }

/* — buttons: quiet depth (subtle gradient + soft peach shadow + top light) — */
.btn{ background:linear-gradient(180deg, color-mix(in srgb, var(--jade) 88%, #fff), var(--jade));
  box-shadow:0 7px 16px -7px color-mix(in srgb, var(--jade) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.28); }
.btn:hover{ background:linear-gradient(180deg, var(--jade), var(--jade-deep)); }
.btn--ghost{ background:transparent; box-shadow:none; }
.btn--ghost:hover{ background:transparent; }

/* — cards & tiles: rest gently a layer above the page — */
.card, .wall-card, .lib-row, .stat-tile, .post-card, .lesson, .gate, .article-cta, .quiz-card{
  box-shadow:var(--shadow), inset 0 1px 0 var(--edge); }
.wall-card:hover, .lib-row:hover, .post-card:hover{
  box-shadow:var(--shadow-lift), inset 0 1px 0 var(--edge); }

/* — big photos: framed, clearly lifted off the page — */
.figure, .article-hero, .video-poster, .feature__media, .lesson__thumb{ box-shadow:var(--shadow-lift); }

/* — bands: a whisper of top-light gradient instead of a flat block — */
.band{ background:linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper-2) 80%, var(--paper-3))); }
.band-jade{ background:linear-gradient(180deg, color-mix(in srgb, var(--paper-3) 82%, #fff), var(--paper-3)); }