/* ═══════════════════════════════════════════════════════════
   GURUDARSHAN KHALSA · Tools for Self Mastery
   Layout language: the Pilina build.
   Palette + type: her Tools for Self Mastery brand board (warm).
   Single committed visual world — candlelit sanctuary.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* palette: Sage — her green at her own hue, deepened to clear AA — generated from palette.py, do not hand-edit */
  --gold:   #D1B78E;
  --sand:   #E8D7BA;
  --amber:  #5A604F;
  --umber:  #775137;

  --jade:    #5A604F;
  --celadon: #AB9876;
  --stone:   #AB9876;
  --brass:   #D1B78E;
  --lacquer: #775137;
  --oxblood: #5A604F;
  --pblue:   #5A604F;

  --night:   #775137;
  --night-2: #5A604F;
  --paper:   #FEF7E5;
  --paper-2: #FEF7E5;

  --on-paper:      #775137;
  --on-paper-60:   rgba(119,81,55,.62);
  --on-paper-40:   rgba(119,81,55,.42);
  --on-paper-10:   rgba(119,81,55,.10);
  --on-night:      #FEF7E5;
  --on-night-60:   rgba(254,247,229,.84);
  --on-night-30:   rgba(254,247,229,.30);
  --on-night-mut:  rgba(254,247,229,.68);
  --on-night-12:   rgba(254,247,229,.12);

  --veil: 119,81,55;

  /* Gigi's own names, from the art-direction brief */
  --porcelain:     #FEF7E5;
  --ivory:         #FEF7E5;
  --espresso:      #775137;
  --espresso-deep: #5A604F;
  --mink:          #775137;
  --charcoal:      #775137;
  --lacquer-green: #5A604F;
  --ink-green:     #5A604F;
  --porcelain-blue:#5A604F;
  --antique-brass: #D1B78E;
  --text:          #775137;
  --text-soft:     #8A6244;
  --line:          rgba(119,81,55,.20);

  --display: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  --mark:    "Playfair Display", "Hoefler Text", Georgia, serif;
  --sans:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --shell: 1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--on-paper);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
p{margin:0}
::selection{background:var(--gold);color:var(--umber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px}

/* ── type ── */
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.1;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(3rem,7.5vw,6rem)}
h2{font-size:clamp(2.2rem,5vw,4rem)}
h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
em{font-style:italic}

.eyebrow{
  font-family:var(--sans);
  font-size:.68rem;font-weight:500;
  letter-spacing:.5em;text-transform:uppercase;
  color:var(--amber);margin:0;
  display:block;
}
.eyebrow--gold{color:var(--gold)}

.body-lg{font-size:1.1rem;line-height:1.75;color:var(--on-paper-60);font-weight:300}
.bg-night .body-lg,.foot .body-lg{color:var(--on-night-60)}

.stack{display:flex;flex-direction:column}
.stack-2{gap:.75rem} .stack-3{gap:1.25rem} .stack-4{gap:2rem} .stack-6{gap:3rem}

/* ── shell / sections ── */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem)}
.sec{padding-block:clamp(4.5rem,11vw,8.5rem)}
.sec--tight{padding-block:clamp(3.5rem,7vw,5.5rem)}
.bg-paper{background:var(--paper)}
.bg-paper2{background:var(--paper-2)}
.bg-sand{background:var(--sand);color:var(--on-paper)}
.bg-night{background:var(--night);color:var(--on-night)}
.bg-night h1,.bg-night h2,.bg-night h3{color:var(--on-night)}

/* ── buttons: the template's pill ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  padding:1.15rem 2.4rem;border-radius:999px;
  border:1px solid transparent;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s;
  text-align:center;
}
.btn--gold{background:var(--gold);color:var(--night)}
.btn--gold:hover{background:var(--paper)}
.btn--dark{background:var(--night);color:var(--paper)}
.btn--dark:hover{background:var(--amber)}
.btn--light{background:var(--paper);color:var(--night)}
.btn--light:hover{background:var(--gold)}
.btn--outline-light{border-color:var(--on-night-30);color:var(--on-night)}
.btn--outline-light:hover{background:rgba(247,241,230,.1)}
.btn--outline-dark{border-color:var(--on-paper-10);color:var(--on-paper)}
.btn--outline-dark:hover{background:var(--on-paper-10)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem 1.25rem}

.tlink{
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  color:var(--amber);border-bottom:1px solid transparent;padding-bottom:3px;
  transition:border-color .3s;
}
.tlink:hover{border-bottom-color:var(--amber)}
.bg-night .tlink{color:var(--gold)}
.bg-night .tlink:hover{border-bottom-color:var(--gold)}

/* ── navbar ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding-block:1.6rem;transition:padding .35s,background-color .35s,box-shadow .35s;background:transparent}
.nav.is-stuck{padding-block:.9rem;background:var(--night);box-shadow:0 10px 40px rgba(36,26,20,.35)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;position:relative}
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;flex-shrink:0}
.brand svg{color:var(--gold);flex-shrink:0}
.brand-name{display:flex;flex-direction:column;line-height:1.15}
.brand-name b{font-family:var(--mark);font-weight:700;font-size:1.02rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-night)}
.brand-name span{font-family:var(--sans);font-size:.5rem;letter-spacing:.36em;text-transform:uppercase;color:var(--on-night-60)}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--on-night-60);transition:color .25s;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--on-night)}
.nav-cta{background:var(--gold);color:var(--night)!important;padding:.8rem 1.6rem;border-radius:999px;font-weight:600!important;letter-spacing:.18em!important;transition:background .3s}
.nav-cta:hover{background:var(--paper)}
.burger{display:none;background:none;border:1px solid var(--on-night-30);border-radius:999px;color:var(--on-night);font-family:var(--sans);font-size:.65rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:.65rem 1.1rem;cursor:pointer}

@media(max-width:1040px){
  .burger{display:block}
  .nav-links{
    display:none;position:absolute;top:calc(100% + 1rem);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--night);padding:.5rem 1.5rem 1.5rem;border-top:1px solid var(--on-night-12);
  }
  .nav.is-open .nav-links{display:flex}
  .nav-links a{padding-block:1rem;border-bottom:1px solid var(--on-night-12)}
  .nav-cta{margin-top:1rem;text-align:center;border-bottom:0!important}
}

/* ── hero ── */
.hero{position:relative;min-height:min(94vh,880px);display:flex;align-items:center;overflow:hidden;background:var(--night)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.hero-bg img.pos-top{object-position:center 18%}
.hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(36,26,20,.90) 0%, rgba(36,26,20,.66) 32%, rgba(36,26,20,.14) 62%, rgba(36,26,20,.30) 100%);
}
.hero-in{position:relative;z-index:2;width:100%;padding-block:9rem 7rem}
.hero-copy{max-width:44rem;display:flex;flex-direction:column;gap:1.6rem;color:var(--on-night)}
.hero h1{color:var(--on-night)}
.hero .body-lg{color:var(--on-night-60);max-width:34rem}
.scrollcue{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--on-night-30)}
.scrollcue span{font-family:var(--sans);font-size:.55rem;letter-spacing:.34em;text-transform:uppercase}
.scrollcue i{display:block;width:1px;height:3rem;background:linear-gradient(to bottom,var(--on-night-30),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(8px);opacity:.4}}

/* page-hero for inner pages */
.phero{position:relative;min-height:min(62vh,560px);display:flex;align-items:flex-end;overflow:hidden;background:var(--night)}
.phero .hero-bg img{width:100%;height:100%;object-fit:cover}
.phero-in{position:relative;z-index:2;width:100%;padding-block:9rem 4rem;color:var(--on-night)}
.phero h1{color:var(--on-night);font-size:clamp(2.6rem,6vw,4.6rem)}
.phero .body-lg{color:var(--on-night-60);max-width:34rem}

/* ── pillars (three doorways) ── */
.pillars{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:820px){.pillars{grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4.5rem)}}
.pillar{display:flex;flex-direction:column;gap:1rem;text-decoration:none;color:inherit}
.pillar i.rule{display:block;height:1px;width:3rem;background:var(--amber);transition:width .7s cubic-bezier(.22,1,.36,1)}
.pillar:hover i.rule{width:100%}
.pillar h3{font-style:italic}
.pillar p{color:var(--on-paper-60);font-size:.98rem;line-height:1.7}
.pillar .go{margin-top:auto;padding-top:.5rem;font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}

.centered{max-width:46rem;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:1.5rem;align-items:center}

.kicker{
  margin-top:clamp(3rem,7vw,6rem);padding-top:2.5rem;border-top:1px solid var(--on-paper-10);text-align:center;
  font-family:var(--sans);font-size:.66rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--on-paper-60);
}

/* The five movements need a name under them, or they read as decoration. */
/* A low-commitment door on the pages someone can land on cold. */
.freeband{background:var(--night);color:var(--on-night);padding-block:clamp(2.5rem,6vw,3.75rem)}
.fb-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2.5rem}
.fb-in > div{flex:1 1 26rem;min-width:0}
.freeband .eyebrow{color:var(--gold)}
.freeband h2{margin:.5rem 0 .7rem;font-size:clamp(1.8rem,3.6vw,2.6rem)}
.freeband p{margin:0;max-width:38rem;color:var(--on-night-60);font-size:.95rem;line-height:1.7}
.freeband .btn{flex:0 0 auto}

/* the identity line — three words that say who she is, given room to be read */
.trio{margin:1.75rem 0 0;padding-top:1.5rem;border-top:1px solid var(--on-paper-10);
  font-family:var(--display);font-weight:300;font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.35;color:var(--on-paper)}
.trio span{display:block;margin-top:.5rem;font-family:var(--sans);font-size:.6rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--amber)}
.bg-night .trio{color:var(--on-night);border-top-color:var(--on-night-12)}

.kicker-sub{
  margin:.9rem auto 0;max-width:34rem;text-align:center;
  font-size:.88rem;line-height:1.6;color:var(--on-paper-40);
}
.bg-night .kicker-sub{color:var(--on-night-60)}

/* The opt-in leads with the promise, then the list. */
.form-lede{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.45;color:var(--on-night);
}

/* Secondary hero link — same text-link treatment, lightened for dark heroes
   so it sits clearly below the one gold button rather than competing with it. */
.tlink--light{color:var(--on-night-60)}
.tlink--light:hover{color:var(--gold);border-bottom-color:var(--gold)}
.hero .btn-row,.phero .btn-row{align-items:center}

/* ── service split (the template's signature block) ── */
.split{display:flex;flex-direction:column;gap:3rem;align-items:center}
@media(min-width:900px){
  .split{flex-direction:row;gap:clamp(3rem,6vw,6rem)}
  .split--rev{flex-direction:row-reverse}
  .split > *{width:50%}
}
.figure{position:relative}
.figure .frame{max-width:min(100%,30rem);margin-inline:auto}
.figure .frame{overflow:hidden;background:var(--night-2);position:relative}
.figure img{width:100%;height:auto;display:block;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.figure:hover img{transform:scale(1.08)}
.figure .accent{position:absolute;bottom:-2rem;right:-2rem;width:9rem;height:9rem;border:1px solid var(--on-paper-10);z-index:-1}
.split--rev .figure .accent{right:auto;left:-2rem}
.bg-night .figure .accent{border-color:var(--on-night-12)}
.slotnote{
  position:absolute;left:0;right:0;bottom:0;padding:.7rem 1rem;
  font-family:var(--sans);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(247,241,230,.55);background:linear-gradient(180deg,transparent,rgba(36,26,20,.86));
}
.splittext{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
.splittext .paras{display:flex;flex-direction:column;gap:1.15rem}
.splittext .paras p{font-size:1.06rem;line-height:1.75;color:var(--on-paper-60)}
.bg-night .splittext .paras p{color:var(--on-night-60)}
.bg-sand .splittext .paras p{color:rgba(43,32,24,.72)}
.bg-sand .eyebrow{color:var(--umber)}

/* ── statement band ── */
.statement{position:relative;overflow:hidden;text-align:center}
.statement::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(241,215,168,.10), transparent 70%),
    repeating-linear-gradient(135deg, rgba(247,241,230,.022) 0 2px, transparent 2px 14px);
}
.statement .shell{position:relative;z-index:1}
.statement h2{font-size:clamp(2rem,4.6vw,3.5rem)}
.statement .hair{height:1px;width:5rem;background:var(--gold);margin:2.5rem auto}

/* ── stat row ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.5rem 2rem}
.stat .fig{font-family:var(--display);font-style:italic;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;color:var(--amber);font-variant-numeric:tabular-nums}
.bg-night .stat .fig{color:var(--gold)}
.stat p{margin-top:.85rem;font-size:.92rem;line-height:1.65;color:var(--on-paper-60)}
.bg-night .stat p{color:var(--on-night-60)}

/* ── credentials rows ──
   Ruled rows rather than a grid of floating numerals. The figure sits in a
   fixed column so 25 yrs, 6, 2015 and 2009 all start on the same line, and
   the descriptions line up with each other down the page. */
.creds{display:grid;gap:0;border-top:1px solid var(--stone)}
.cred{display:grid;grid-template-columns:1fr;gap:.5rem;
  padding-block:clamp(1.4rem,3vw,2rem);border-bottom:1px solid var(--stone)}
.cred-f{font-family:var(--display);font-style:italic;line-height:1;
  font-size:clamp(2.1rem,4vw,2.9rem);color:var(--umber);font-variant-numeric:tabular-nums}
.cred-b h4{font-family:var(--display);font-size:1.22rem;line-height:1.35;
  font-weight:400;margin:0}
.cred-b p{margin:.4rem 0 0;font-size:.92rem;line-height:1.65;color:var(--night)}
@media(min-width:760px){
  .cred{grid-template-columns:9rem 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:baseline}
  .cred-f{text-align:right}
}

/* ── about portrait ── */
.portrait{position:relative}
.portrait .frame{overflow:hidden;background:var(--night-2);position:relative;max-width:min(100%,28rem);margin-inline:auto}
.portrait img{width:100%;height:auto;display:block}

.portrait .glyph{
  position:absolute;top:-3.5rem;left:-2.5rem;z-index:-1;
  font-family:var(--mark);font-size:clamp(7rem,14vw,11rem);line-height:.8;
  color:rgba(166,114,68,.18);user-select:none;
}

/* ── offer ladder ── */
.ladder{display:flex;flex-direction:column}
.rung{
  display:grid;grid-template-columns:1fr;gap:.6rem 2.5rem;
  padding-block:2.2rem;border-bottom:1px solid var(--on-paper-10);align-items:start;
  color:inherit;text-decoration:none;transition:background .25s,padding .25s;
}
.rung:first-child{border-top:1px solid var(--on-paper-10)}
/* the whole row is the target, so it has to look like one */
a.rung:hover{background:var(--sand)}
a.rung:hover h3{color:var(--umber)}
a.rung:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
@media(min-width:860px){
  /* a fixed price column, not `auto` — otherwise every row sized itself to its
     own price and the right-hand edge stepped in and out down the page */
  .rung{grid-template-columns:minmax(0,1.05fr) minmax(0,1.7fr) 9rem;align-items:center}
  a.rung:hover{padding-inline:1.25rem;margin-inline:-1.25rem}
}
.rung .price{text-align:left}
@media(min-width:860px){.rung .price{text-align:right}}
.rung .tier{font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.45rem}
.rung h3{font-size:1.45rem}
.rung .promise{color:var(--on-paper-60);font-size:1rem;line-height:1.68}
.rung .price{font-family:var(--display);font-style:italic;font-size:1.6rem;color:var(--umber);white-space:nowrap;font-variant-numeric:tabular-nums}
.rung .price small{display:block;font-family:var(--sans);font-style:normal;font-size:.58rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);margin-top:.35rem;white-space:normal;line-height:1.5}

/* ── faq ── */
.faq{max-width:50rem}
.faq details{border-bottom:1px solid var(--on-paper-10)}
.faq details:first-of-type{border-top:1px solid var(--on-paper-10)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-size:1.35rem;line-height:1.4;padding:1.5rem 3rem 1.5rem 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.5rem;top:1.05rem;font-family:var(--display);font-size:2rem;line-height:1;color:var(--amber);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
/* Say out loud that there is an answer under each one — without this the
   page reads as a list of unanswered questions. */
.faq summary::before{content:"Read the answer";display:block;font-family:var(--sans);font-size:.55rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-paper-40);margin-bottom:.4rem;transition:color .25s}
.faq details[open] summary::before{content:"The answer";color:var(--amber)}
.faq summary:hover::before{color:var(--amber)}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 3rem 1.8rem 0;max-width:38rem;display:flex;flex-direction:column;gap:1rem;color:var(--on-paper-60)}

/* ── contact / opt-in ── */
.contact-grid{display:flex;flex-direction:column;gap:3.5rem}
@media(min-width:900px){.contact-grid{flex-direction:row;gap:clamp(3rem,6vw,6rem)}.contact-grid > *{width:50%}}
.field{border-bottom:1px solid var(--on-night-12);padding-bottom:1rem;transition:border-color .3s}
.field:focus-within{border-bottom-color:var(--gold)}
.field label{display:block;font-family:var(--sans);font-size:.6rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--on-night-mut);margin-bottom:.6rem}
.field input,.field textarea{
  width:100%;background:transparent;border:0;outline:none;resize:none;
  font-family:var(--sans);font-weight:300;font-size:1.15rem;color:var(--on-night);padding-block:.35rem;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(247,241,230,.18)}
.detail h4{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin:0 0 .7rem}
.detail p{font-family:var(--display);font-size:1.5rem;font-weight:300;line-height:1.35}
.getslist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.getslist li{display:flex;gap:1rem;align-items:flex-start;line-height:1.65}
.getslist svg{flex:0 0 auto;width:20px;height:20px;margin-top:.32rem}
.fine{font-size:.82rem;line-height:1.65;color:var(--on-paper-60)}
.bg-night .fine,.foot .fine{color:var(--on-night-mut)}
.bg-sand .fine{color:rgba(43,32,24,.78)}

/* ── footer ── */
.foot{background:var(--night-2);color:var(--on-night);padding-block:clamp(3.5rem,7vw,6rem) 3rem;border-top:1px solid var(--amber)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:780px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem}}
.foot h4{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 1.5rem}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.foot a{color:var(--on-night-60);text-decoration:none;font-size:.9rem;transition:color .25s}
.foot a:hover{color:var(--gold)}
.foot-base{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:2rem;border-top:1px solid var(--on-night-12);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-night-mut);
}


.grid5{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:start}
@media(min-width:1080px){.grid5{grid-template-columns:repeat(5,1fr);gap:1.25rem}}
.card{display:flex;flex-direction:column;gap:.85rem;text-decoration:none;color:inherit}
.card .shot{overflow:hidden;background:var(--night-2);position:relative}
.card .shot img{width:100%;height:auto;display:block;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.card:hover .shot img{transform:scale(1.07)}
.card .series{font-family:var(--sans);font-size:.58rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--amber)}
.card .name{font-family:var(--display);font-size:1.25rem;line-height:1.25}
.card .line{font-size:.85rem;line-height:1.55;color:var(--on-paper-60)}
.card .buy{margin-top:auto;padding-top:.35rem;font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--umber)}


/* ── buy card (oracle deck) ── */
.buycard{border:1px solid var(--on-paper-10);padding:clamp(1.25rem,3vw,1.75rem);display:flex;flex-direction:column;gap:1rem;background:var(--paper)}
.bg-night .buycard{border-color:var(--on-night-12);background:rgba(247,241,230,.04)}
.buycard .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.buycard .nm{font-family:var(--display);font-size:1.4rem;line-height:1.2}
.bg-night .buycard .nm{color:var(--on-night)}
.buycard .amt{font-family:var(--display);font-style:italic;font-size:1.7rem;color:var(--amber);font-variant-numeric:tabular-nums;white-space:nowrap}
.bg-night .buycard .amt{color:var(--gold)}
.buycard .spec{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-family:var(--sans);font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-paper-40)}
.bg-night .buycard .spec{color:var(--on-night-mut)}
.buyrow{display:flex;gap:.75rem;align-items:stretch}
.qtybox{display:flex;align-items:center;border:1px solid var(--on-paper-10);border-radius:999px;overflow:hidden}
.bg-night .qtybox{border-color:var(--on-night-12)}
.qtybox button{width:2.6rem;background:none;border:0;font-size:1.1rem;cursor:pointer;color:inherit;font-family:var(--sans)}
.qtybox span{min-width:2rem;text-align:center;font-variant-numeric:tabular-nums;font-size:.95rem}

/* ── routing ── */
.page{display:none}
.page.is-on{display:block}

/* ── reveal (JS-gated; always falls back to visible) ── */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.js .rv-l{transform:translateX(-38px)}
.js .rv-r{transform:translateX(38px)}
.js .rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .rv,.js .rv-l,.js .rv-r{opacity:1!important;transform:none!important;transition:none}
  *{animation:none!important}
  html{scroll-behavior:auto}
}

/* ── the path: the membership as seven stages ──────────────────────
   Rebuilt in the AHH Academy register: no cards, no borders round the
   rows. One large portrait image, a narrow text measure beside it, the
   side alternating down the seven, and a lot of vertical air. The rows
   are separated by a hairline, not a box. */
.path{display:flex;flex-direction:column}
.stage{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.4rem,4vw,2.25rem);
  padding-block:clamp(2.25rem,5vw,3.25rem);
  border-top:1px solid var(--line)}
.stage:first-child{border-top:0;padding-top:0}
@media (min-width:860px){
  .stage{grid-template-columns:minmax(0,40%) minmax(0,1fr);
    gap:clamp(2.5rem,6vw,4.5rem);align-items:center;
    padding-block:clamp(3rem,6vw,5rem)}
  /* The alternation. The TRACKS have to flip as well as the contents —
     swapping order alone left the image sitting in the 1fr column on every
     other row, so the pictures came out two different sizes down the page. */
  .stage:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,40%)}
  .stage:nth-child(even) .stage-img{order:2}
  .stage:nth-child(even) .stage-t{order:1;justify-self:end}
}
.stage-img{overflow:hidden;aspect-ratio:4/5;background:var(--sand)}
.stage-img img{width:100%;height:100%;object-fit:cover;display:block}
.stage-t{max-width:36rem}
.stage-k{display:flex;align-items:baseline;gap:.9rem;margin:0 0 .8rem}
.stage-n{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.15rem);line-height:1;
  color:var(--text-soft)}  /* NOT the tan. Tan is 1.81 on the cream — under the 3:1
                              large-text bar at any size. The soft brown reads 4.93.
                              On the teal panel below it re-points to the tan (3.97). */
.stage-k .w{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--jade)}   /* teal, 7.17 on cream */
.stage-t h3{margin:0 0 .75rem;font-size:clamp(1.55rem,3.4vw,2.25rem);line-height:1.15}
.stage-p{margin:0;font-size:1.0625rem;line-height:1.75;color:var(--text-soft);max-width:40ch}
.stage-t .o{margin:1.15rem 0 0;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:.8125rem;letter-spacing:.03em;color:var(--text-soft)}

/* the last stage is the offer, so it gets the teal ground. It is a panel
   inside the pale section rather than a full band — two dark grounds can
   never touch in this palette, and the kickers below it are the pale rule. */
.stage--home{background:var(--night-2);color:var(--on-night);border-top:0;
  margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.6rem,4vw,2.5rem)}
@media (min-width:860px){.stage--home{padding:clamp(2.5rem,4vw,3.5rem)}}
.stage--home .stage-n{color:var(--gold)}        /* 34px max — 3.97 on teal, large text */
.stage--home .stage-k .w{color:var(--paper)}    /* 11px caps needs 4.5; cream reads 7.17 */
.stage--home .stage-p{color:var(--on-night-60)}
.stage--home .stage-t .o{color:var(--paper);font-size:.9375rem;letter-spacing:.02em;
  border-top-color:rgba(254,247,229,.28)}
.stage--home .stage-img{background:rgba(254,247,229,.12)}

/* ── the six sessions, chosen by what is stuck rather than by modality ── */
.offers{display:grid;gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));align-items:stretch}
/* six of them, so three and three. No special case, no wide card — they are
   six equal offers and the grid should say so. */
@media (min-width:1000px){.offers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.offer{display:flex;flex-direction:column;gap:1rem;height:100%}
/* Portrait. These are all standing figures — a 4:3 crop took the heads off. */
.offer-img{overflow:hidden;aspect-ratio:3/4;background:var(--sand)}
.offer-img img{width:100%;height:100%;object-fit:cover;display:block}
.offer-body{display:flex;flex-direction:column;gap:.55rem;flex:1}
.offer h3{margin:.1rem 0 .3rem;font-size:1.3rem;line-height:1.2}
.offer-q{margin:0;font-family:var(--display);font-size:1.0625rem;line-height:1.45;
  font-style:italic;color:var(--night)}
.offer-o{margin:0;font-size:.9375rem;line-height:1.65;color:var(--text-soft)}
/* margin-top:auto drops the toolbox list to the foot of each card, so the
   rules line up across a row whatever length the copy above runs to */
.offer-inc{margin:.35rem 0 0;margin-top:auto;padding-top:.7rem;border-top:1px solid var(--line);
  font-size:.8125rem;line-height:1.6;color:var(--text-soft)}
.offer-inc span{display:block;font-family:var(--sans);font-size:.625rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--jade);margin-bottom:.35rem}
.offer-note{margin:.5rem 0 0;font-size:.8125rem;line-height:1.55;color:var(--jade)}

/* ── the image strip under the questions ──────────────────────────── */
.qstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.5rem,1.5vw,1rem);margin-top:clamp(2.5rem,6vw,4rem)}
.qstrip figure{margin:0;overflow:hidden;aspect-ratio:1;background:var(--sand)}
.qstrip img{width:100%;height:100%;object-fit:cover;display:block}

/* ── the five values, each with its own image ─────────────────────── */
.values{display:grid;gap:clamp(1.25rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.value{display:flex;flex-direction:column;gap:.85rem}
.value-img{overflow:hidden;aspect-ratio:3/4;background:rgba(254,247,229,.10)}
.value-img img{width:100%;height:100%;object-fit:cover;display:block}
.value h3{margin:0;font-size:1.3rem;line-height:1.2;color:var(--on-night)}
.value p{margin:0;font-size:.9375rem;line-height:1.65;color:var(--on-night-60)}

/* each step says where to get the thing it opens */
.stage-go{display:inline-block;margin-top:.7rem;font-family:var(--sans);font-size:.75rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--jade);
  text-decoration:none;border-bottom:1px solid var(--stone);padding-bottom:.18rem;
  transition:border-color .25s,color .25s}
.stage-go:hover{color:var(--night);border-bottom-color:var(--night)}
.stage--home .stage-go{color:var(--paper);border-bottom-color:rgba(254,247,229,.45)}
.stage--home .stage-go:hover{border-bottom-color:var(--paper)}

/* ── the five series, framed by what each one asks of a nervous system ── */
.series-list{display:flex;flex-direction:column}
.series-row{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.1rem,3vw,1.75rem);
  padding-block:clamp(1.9rem,4vw,2.75rem);border-top:1px solid var(--line)}
.series-row:first-child{border-top:0;padding-top:0}
@media (min-width:820px){
  .series-row{grid-template-columns:minmax(0,28%) minmax(0,1fr);
    gap:clamp(2rem,5vw,3.5rem);align-items:start}
}
.series-shot{display:block;overflow:hidden;aspect-ratio:1;background:var(--sand)}
.series-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.series-shot:hover img{transform:scale(1.03)}
.series-body{max-width:44rem}
.series-body h3{margin:.45rem 0 .8rem;font-size:clamp(1.5rem,3vw,2rem);line-height:1.15}
.series-paras{display:flex;flex-direction:column;gap:.75rem}
.series-paras p{margin:0;font-size:1rem;line-height:1.72;color:var(--text-soft)}
.series-go{display:inline-block;margin-top:1.1rem;font-family:var(--sans);font-size:.72rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--jade);
  text-decoration:none;border-bottom:1px solid var(--stone);padding-bottom:.18rem;
  transition:border-color .25s,color .25s}
.series-go:hover{color:var(--night);border-bottom-color:var(--night)}

/* ── the PBS segment ──────────────────────────────────────────────── */
.pbs{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vw,2.75rem);
  align-items:center}
@media (min-width:920px){
  .pbs{grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:clamp(2.5rem,5vw,3.5rem)}
}
.pbs-t h2{margin:.5rem 0 .9rem}
.pbs-t .body-lg{color:var(--on-night-60)}
.pbs-v{position:relative;aspect-ratio:16/9;overflow:hidden;
  background:rgba(254,247,229,.08);border:1px solid rgba(254,247,229,.18)}
.pbs-v iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ── the intuition talks ──────────────────────────────────────────── */
.vidpair{display:grid;gap:clamp(1.25rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.vid{display:flex;flex-direction:column;gap:.7rem}
.vid-f{position:relative;aspect-ratio:16/9;overflow:hidden;
  background:rgba(254,247,229,.08);border:1px solid rgba(254,247,229,.18)}
.vid-f iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vid-c{margin:0;font-family:var(--sans);font-size:.75rem;letter-spacing:.06em;
  color:var(--on-night-60)}

/* ── the practices toolbox, sorted by the state you are in ────────── */
.prac{display:flex;flex-direction:column;gap:.85rem;height:100%}
.prac-img{overflow:hidden;aspect-ratio:3/4;background:var(--sand)}
.prac-img img{width:100%;height:100%;object-fit:cover;display:block}
.prac-need{margin:.2rem 0 0;font-family:var(--sans);font-size:.6875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--jade);line-height:1.5}
.prac h3{margin:0;font-size:1.2rem;line-height:1.25}
.prac-d{margin:0;font-size:.9375rem;line-height:1.65;color:var(--text-soft)}
/* margin-top:auto drops the cadence line to the foot of every card, so the
   rules line up across a row whatever length the description runs to */
.prac-tag{margin:.3rem 0 0;margin-top:auto;padding-top:.7rem;border-top:1px solid var(--line);
  font-size:.75rem;color:var(--text-soft);display:flex;gap:.6rem;align-items:baseline}
.prac-tag .cad{font-family:var(--sans);font-size:.625rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--night)}

/* the free one is the front door, so it lies down and gets the button */
.prac--free{gap:clamp(1.25rem,3vw,2rem);margin-bottom:clamp(2.5rem,6vw,3.5rem)}
@media (min-width:820px){
  .prac--free{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);
    align-items:center}
  .prac--free .prac-img{aspect-ratio:3/4}
}
.prac--free .prac-b{display:flex;flex-direction:column;gap:.7rem;max-width:36rem}
.prac--free .prac-tag{margin-top:.3rem}
.prac--free h3{font-size:clamp(1.5rem,3vw,2rem)}
.prac--free .prac-d{font-size:1.0625rem}

.prac-h{margin:0 0 clamp(1.25rem,3vw,1.75rem);font-family:var(--sans);font-size:.6875rem;
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--night);
  padding-top:1rem;border-top:1px solid var(--line)}
.pracs{display:grid;gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));align-items:stretch}
/* six of them, so three and three rather than a ragged four-and-two */
@media (min-width:1000px){.pracs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.prac-soon{margin-top:clamp(2.5rem,6vw,3.5rem)}
.prac-soon ul{margin:0;padding:0;list-style:none;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.prac-soon li{font-size:.9375rem;line-height:1.6;color:var(--text-soft);
  padding-left:1rem;border-left:1px solid var(--stone)}
.prac-soon strong{display:block;font-family:var(--display);font-weight:400;font-size:1.1rem;
  color:var(--night);margin-bottom:.25rem}

/* ── the Coming Home Method, on the Work page ─────────────────────── */
.method{display:grid;gap:clamp(1.5rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));align-items:stretch}
@media (min-width:900px){.method{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mv-t{margin:.35rem 0 0;margin-top:auto;padding-top:.7rem;
  border-top:1px solid rgba(254,247,229,.22);font-size:.8125rem;line-height:1.6;
  color:var(--gold)}
.mv{display:flex;flex-direction:column;gap:.7rem;height:100%}
.mv-img{overflow:hidden;aspect-ratio:3/4;background:rgba(254,247,229,.10)}
.mv-img img{width:100%;height:100%;object-fit:cover;display:block}
.mv-n{margin:.3rem 0 0;font-family:var(--display);font-size:1.5rem;line-height:1;
  color:var(--gold)}   /* 24px, and on a dark ground --gold is the cream */
.mv h3{margin:0;font-size:1.25rem;line-height:1.2;color:var(--on-night)}
.mv-d{margin:0;font-size:.9375rem;line-height:1.65;color:var(--on-night-60)}

/* ── the doorways: pick the sentence that sounds like you ─────────── */
.doors{display:flex;flex-direction:column}
.door{display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem;
  padding-block:clamp(1.1rem,2.5vw,1.5rem);border-top:1px solid var(--line);
  text-decoration:none;color:inherit;transition:padding-left .25s}
.door:first-child{border-top:0}
.door:last-child{border-bottom:1px solid var(--line)}
@media (min-width:820px){
  .door{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 9rem;
    gap:clamp(1.25rem,3vw,2.5rem);align-items:baseline}
  .door:hover{padding-left:.5rem}
}
.door-q{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.45rem);line-height:1.3;
  color:var(--night)}
.door-n{font-family:var(--sans);font-size:.6875rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--jade)}
/* the doorways sit on the sand band, where --text-soft is only 3.8 on the
   ground. The full brown reads 4.93 there, so this line takes that. */
.door-d{font-size:.9375rem;line-height:1.6;color:var(--night)}
.door-p{font-family:var(--sans);font-size:.8125rem;font-weight:600;color:var(--night);
  white-space:nowrap}
@media (min-width:820px){
  .door-n{grid-column:2;grid-row:1}
  .door-d{grid-column:2;grid-row:2}
  .door-q{grid-column:1;grid-row:1 / span 2}
  .door-p{grid-column:3;grid-row:1 / span 2;text-align:right}
}

/* ── the reading list ─────────────────────────────────────────────── */
/* Four papers. auto-fit was fitting three across and orphaning the fourth —
   pin it to two so it reads as a 2×2 block. */
.refs{margin:0;padding:0;list-style:none;display:grid;
  gap:clamp(1.5rem,3vw,2.5rem) clamp(2rem,4vw,3.5rem);grid-template-columns:1fr}
@media(min-width:720px){.refs{grid-template-columns:repeat(2,1fr)}}
.ref{display:flex;flex-direction:column;gap:.35rem;padding-top:1rem;
  border-top:1px solid var(--stone)}
.ref a{font-family:var(--display);font-size:1.0625rem;line-height:1.35;color:var(--night);
  text-decoration:none;border-bottom:1px solid var(--stone);align-self:flex-start;
  padding-bottom:.1rem}
.ref a:hover{border-bottom-color:var(--night)}
.ref-c{font-family:var(--sans);font-size:.75rem;letter-spacing:.02em;color:var(--jade)}
.ref-w{font-size:.875rem;line-height:1.6;color:var(--night)}

/* When a portrait crop still has to cut, cut from the bottom — the face and
   the hands are the top two-thirds of every one of these. */
.offer-img img,.prac-img img,.mv-img img,.value-img img,.stage-img img{
  object-position:50% 28%}

/* ══════════════════════ deployment fixes ══════════════════════ */

/* 1. Reveal transforms (.rv-l/.rv-r shift ±38px) and the decorative
      .accent / .glyph offsets stick out past the viewport edge and
      caused an 18–50px horizontal scroll on phones.
      overflow-x:clip trims the overhang WITHOUT creating a scroll
      container, so the sticky/fixed nav keeps working. */
html{overflow-x:clip}
body{overflow-x:clip}

/* 2. The brand lockup was too wide for the Menu button to fit on a
      375px screen — the button sat at x=371 and was unreachable.
      Let the wordmark shrink on small screens. */
@media (max-width:620px){
  .nav-in{gap:.75rem}
  .brand{flex-shrink:1;min-width:0}
  .brand svg{width:24px;height:24px}
  .brand-name b{font-size:.82rem;letter-spacing:.15em}
  .brand-name span{font-size:.42rem;letter-spacing:.22em}
  .burger{flex-shrink:0;padding:.6rem .9rem}
}
/* The tagline used to be dropped under 380px because Italiana's wide tracking
   pushed the Menu button off-screen. Playfair 700 sets narrower, so the subline
   fits again — and "Tools for Self Mastery" is the positioning, not decoration. */
@media (max-width:380px){
  .brand-name b{font-size:.78rem;letter-spacing:.12em}
  .brand-name span{font-size:.4rem;letter-spacing:.18em}
}

/* 3. Real pages instead of hash routes — every page is always visible. */
.page{display:block}

/* 3b. THE ARTWORK SHOWS AT ITS OWN PROPORTIONS.
      Her pieces are three different shapes — 805x1024 portrait (43 of them),
      1024x805 landscape (7) and 896x1344 (1) — so there is no single frame
      that fits them all without cutting something off. The frame therefore
      holds no ratio at all: each image sets its own height and nothing is
      ever cropped. Grids align to the top so ragged bottoms read as a
      gallery hang rather than a mistake. */
.figure .frame,
.portrait .frame,
.split .frame{overflow:hidden;max-width:min(100%,34rem)}
.figure .frame img,
.portrait .frame img,
.split .frame img{width:100%;height:auto;display:block}
.split,.figure,.portrait{align-items:start}

/* 3c. MOBILE: readable text and reachable taps.
      Audited at 375px: 13-21 controls were under the 44px touch minimum and
      4-15 text nodes per page rendered under 12px — the nav tagline was at
      6.4px, which is decoration, not text. Letterspaced uppercase labels can
      run small, but not that small. */
@media (max-width:620px){
  /* nothing meant to be read goes below 11px */
  .brand-name span{font-size:.62rem;letter-spacing:.2em}
  .card .ser,.shop .card .ser{font-size:.68rem;letter-spacing:.2em}
  .eyebrow{font-size:.72rem;letter-spacing:.3em}
  .chip,.shop .chip{font-size:.72rem}
  .fine,.shop .note{font-size:.86rem}
  h4{font-size:.72rem}
  .card .buy,.rung .tier,.detail h4,.foot h4{font-size:.7rem}
  .card .flag,.shop .card .flag{font-size:.64rem}

  /* every control gets a real touch target */
  .nav-links a,.foot a,.tlink,.chip,.shop .chip,.rd-skip{
    min-height:44px;display:inline-flex;align-items:center}
  .faq summary{min-height:44px}
  .shop .chip{padding-block:.75rem}
  .qtybox button,.shop .qtybox button{min-width:44px;min-height:44px}
  /* the footer link columns need the room that gives them */
  .foot ul{gap:.25rem}
  /* the Menu button and the modal controls were the last two under 44px */
  .burger{min-height:44px;padding-block:.85rem}
  .shop .mclose,.mclose{width:44px;height:44px}
  .shop .slides button,.slides button{min-width:44px;min-height:44px}
  .shop .dot,.dot{min-width:44px;min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
}
@media (max-width:380px){
  /* the tagline stays readable; it is still narrower than the name above it,
     so the Menu button keeps its room */
  .brand-name span{font-size:.62rem;letter-spacing:.15em}
}

/* 4. The nav is transparent so it can float over a dark full-bleed hero.
      The shop and the 404 page start on pale paper, where transparent nav
      text is invisible and the heading runs underneath it. Those pages get
      a solid nav and clearance below it. */
.no-hero .nav{background:var(--night)}
.no-hero #main{padding-top:6.5rem}
@media (max-width:620px){ .no-hero #main{padding-top:5.25rem} }

/* 5. The About page photo strip — four real photographs, side by side.
      They are all 3:4 portraits, so one aspect-ratio box fits them all
      without cropping anyone's head off. */
.photostrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(.6rem,1.6vw,1.1rem)}
.photostrip figure{margin:0;overflow:hidden;border-radius:2px;background:var(--sand)}
.photostrip img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
@media (max-width:760px){ .photostrip{grid-template-columns:repeat(2,1fr)} }

/* 6. HEROES ARE HER ARTWORK, NOT PHOTOGRAPHS OF HER (her call, 13 Sep 2026).
      A photograph of a person blown up to fill a horizontal band gets cropped
      to a strip of shoulder; a mirrored piece keeps its composition at any
      width, because the symmetry line holds it together. So every hero is a
      piece of the artwork, and her photographs live in body sections where
      they show whole at their own proportions.
      No Sentimental or Sacred pieces in a header — her rule. */

/* Every hero is the same height across the site — no per-page exceptions. */


/* ── Garden ────────────────────────────────────────────────────────────
   #1F5C5B teal · #FEF7E5 cream · #D1B78E tan · #AB9876 khaki · #775137 brown.
   Nothing derived. Two readable darks, two hardware tones, one field.

   1. Primary button: teal with cream type (7.17:1). Inverts on dark bands. */
.btn--gold{background:var(--night-2);color:var(--paper);border:1px solid var(--night-2)}
.btn--gold:hover{background:var(--night);border-color:var(--night);color:var(--paper)}
.bg-night .btn--gold,.hero .btn--gold,.phero .btn--gold,.statement .btn--gold{
  background:var(--paper);color:var(--night);border-color:var(--paper)}
.bg-night .btn--gold:hover,.hero .btn--gold:hover,.phero .btn--gold:hover{
  background:transparent;color:var(--paper);border-color:var(--paper)}
.shop .btn--gold,.shop .freedoor .btn{background:var(--night-2);color:var(--paper);
  border-color:var(--night-2)}

/* 2. Teal carries every eyebrow on a pale ground; cream on the dark ones. */
.eyebrow,.eyebrow--gold{color:var(--jade)}
.bg-night .eyebrow,.hero .eyebrow,.phero .eyebrow,.statement .eyebrow,
.freeband .eyebrow,.foot .eyebrow,.lp-top .eyebrow,
.bg-night .eyebrow--gold,.hero .eyebrow--gold,.phero .eyebrow--gold,
.statement .eyebrow--gold,.freeband .eyebrow--gold,.foot .eyebrow--gold,
.lp-top .eyebrow--gold{color:var(--gold)}

/* 3. Tan is 1.81:1 on cream — hardware only. On every dark ground the token
      re-points to the cream itself (7.17 on teal, 6.51 on brown). */
.bg-night,.hero,.phero,.statement,.freeband,.foot,.lp-top,.drawer,
.sec.ed-green,.sec.ed-ink,.bg-night.ed-green,.shop .strip{--gold:var(--paper)}

/* 4. THE BAND IS A TINT, NOT THE TAN. Full #D1B78E cannot carry small text —
      brown on it is 3.61 and teal 3.97, both under. The band is her tan at
      50% into the cream (#E8D7BA), where brown reads 4.93. Full tan stays as
      hardware, which is the job it can actually do. */
.bg-sand{background:var(--sand);color:var(--night)}
.bg-sand .eyebrow,.bg-sand .eyebrow--gold{color:var(--night)}
.bg-sand a:not(.btn),.bg-sand .tlink,.bg-sand .fine{color:var(--night)}

/* 5. THE ONE TRAP IN THIS PALETTE. Teal and brown have almost the same value
      (1.10:1 against each other), so one can never be text on the other and
      two dark bands can never touch without a pale rule between them. */
section.sec.ed-green{background:var(--night-2)}
.sec.ed-ink{background:var(--night)}
.statement{background:var(--night-2)}
.bg-night + .bg-night,.sec.ed-green + .sec.ed-ink,.sec.ed-ink + .sec.ed-green{
  border-top:1px solid var(--sand)}

/* 6. Hardware: the offset square in tan, rules and card edges in khaki. */
.accent{background:transparent;border:1px solid var(--gold);opacity:.85}
.rung,.detail,.faq details,.stat,.tier-row{border-color:var(--stone)}
.oracle-world{
  --paper:   #FEF7E5;
  --paper-2: #FEF7E5;
  --sand:    #D8B7B0;
  --lavender:#B5A9C5;
  --gold:    #AB9876;
}
/* Soft Gold is 2.13:1 on Oracle Cream, so on pale grounds Espresso carries the
   eyebrow (13.50:1). On the DARK grounds soft gold is only 4.12:1 — so Blush
   Cream does the accent work there instead — 8.79:1 on espresso and 6.76:1 on
   teal, the only Oracle colour that clears BOTH. Blush reads on espresso but
   drops to 4.20 on teal, so it stays a band colour rather than a text one. */
.oracle-world .eyebrow,.oracle-world .eyebrow--gold{color:var(--night)}
.oracle-world .bg-night .eyebrow,.oracle-world .hero .eyebrow,
.oracle-world .phero .eyebrow,.oracle-world .statement .eyebrow,
.oracle-world .freeband .eyebrow,.oracle-world .foot .eyebrow,
.oracle-world .bg-night .eyebrow--gold,.oracle-world .hero .eyebrow--gold,
.oracle-world .phero .eyebrow--gold,.oracle-world .statement .eyebrow--gold,
.oracle-world .freeband .eyebrow--gold,.oracle-world .foot .eyebrow--gold{color:var(--paper)}
/* Everything else on an Oracle dark ground that reaches for --gold (the
   reading page's field labels, the session specs) gets blush the same way —
   re-point the token rather than chase a dozen rules. */
.oracle-world .bg-night,.oracle-world .hero,.oracle-world .phero,
.oracle-world .statement,.oracle-world .freeband,.oracle-world .foot,
.oracle-world .sec.ed-green{--gold:var(--paper)}
.oracle-world .statement,.oracle-world .sec.ed-green,
.oracle-world .foot,.oracle-world .bg-night.ed-green{--paper-2:var(--paper)}
/* The free reading leans darker than the Oracle page by design. */
.oracle-world .rd-setup{background:var(--night)}

/* Blush and lavender are BANDS, not fields. Espresso on blush is 8.39:1, but
   anything reaching for the teal token lands at 4.20 — so on those two bands
   the teal tokens re-point to espresso and catch every rule at once. */
.oracle-world .bg-paper2,.oracle-world .bg-sand{color:var(--lacquer);
  --jade:var(--night);--umber:var(--night);--amber:var(--night);
  --text-soft:var(--night)}
.oracle-world .statement{background:var(--night)}

/* ══════════════════════════════════════════════════════════════════════
   EDITORIAL ART DIRECTION — Gigi's brief, 15 Sep 2026
   Layer over the base stylesheet. Remove this block (editorial.ACTIVE=False)
   and the previous design returns untouched.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. TWO TYPEFACES ────────────────────────────────────────────────── */
/* Playfair is no longer loaded, so the wordmark and the decorative glyph
   both fall to Cormorant. Set sharper: tighter tracking, higher contrast. */
:root{ --mark: "Cormorant Garamond", "Hoefler Text", Georgia, serif; }

/* ── 2. EDITORIAL TYPE SCALE ─────────────────────────────────────────── */
/* Bigger, tighter, with far more air around it. Weight 400 at scale — the
   contrast comes from size and space, not from bold. */
h1{font-size:clamp(3.25rem,7vw,6.75rem);line-height:.94;font-weight:400;
   letter-spacing:-.015em}
h2{font-size:clamp(2.5rem,5vw,4.75rem);line-height:1.0;font-weight:400;
   letter-spacing:-.012em}
h3{font-size:clamp(1.65rem,2.6vw,2.4rem);line-height:1.12;font-weight:400;
   letter-spacing:-.008em}
body{font-size:1.0625rem;line-height:1.62}
.body-lg{font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.6}
.paras p{line-height:1.66}
@media (min-width:900px){ body{font-size:1.125rem} }

/* Italics are emphasis, not decoration — used where the copy already has an
   <em>, never added. Give them enough difference to be worth it. */
h1 em,h2 em,h3 em{font-style:italic;font-weight:300}

/* Eyebrows / section labels — smaller, wider, quieter. */
.eyebrow{font-family:var(--sans);font-size:.6875rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase}
@media (min-width:900px){ .eyebrow{font-size:.75rem} }

/* Navigation — 11–12px, wide, uppercase. */
.nav-links a{font-size:.6875rem;font-weight:500;letter-spacing:.16em}

/* Art-catalogue captions. */
.cap,.fine,.kicker-sub,.spec span{font-family:var(--sans);font-size:.78125rem;
  line-height:1.5;letter-spacing:.01em}

/* ── 3. WORDMARK AS A GALLERY IMPRINT ────────────────────────────────── */
.brand-name b{font-family:var(--mark);font-weight:500;font-size:1.18rem;
  letter-spacing:.17em;text-transform:uppercase;line-height:1}
.brand-name span{font-family:var(--sans);font-size:.5625rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;opacity:.72}
@media (max-width:620px){
  .brand-name b{font-size:.98rem;letter-spacing:.13em}
  /* 9px is the floor — .5rem put this at 8px and failed the mobile type test */
  .brand-name span{font-size:.5625rem;letter-spacing:.14em}
}

/* ── 4. GRID + SPACING ───────────────────────────────────────────────── */
:root{ --shell: 1400px; }
.shell{padding-inline:clamp(1.25rem,4.4vw,4rem)}
.sec{padding-block:clamp(3.5rem,9vw,10rem)}
.sec--tight{padding-block:clamp(3rem,6vw,6.5rem)}

/* ── 5. EDITORIAL SECTION LANGUAGE ───────────────────────────────────── */
/* The base is `display:flex` with `.split > *{width:50%}` and a row-reverse
   variant. Grid would have broken the reversal, so the ratios are done with
   flex instead — the 50% width is released and replaced by a flex weight.
   A section only ever gains a class; no markup order changes. */
@media (min-width:900px){
  .split{align-items:start}
  .ed-mid .split{align-items:center}
  .split > *{width:auto;flex:1 1 0;min-width:0}

  /* 5 / 7 — the plate is quiet, the type carries */
  .ed-57 .split > .figure,.ed-57 .split > .portrait{flex:5}
  .ed-57 .split > .splittext{flex:7}
  /* 7 / 5 — a large art moment, restrained copy beside it */
  .ed-75 .split > .figure,.ed-75 .split > .portrait{flex:7}
  .ed-75 .split > .splittext{flex:5}
  /* 4 / 8 — a small plate floating beside oversized type */
  .ed-48 .split > .figure,.ed-48 .split > .portrait{flex:4}
  .ed-48 .split > .splittext{flex:8}

  /* The base caps every frame at 30rem, which keeps the art small however
     wide its column is. Let it fill the column it was given. */
  .figure .frame,.portrait .frame{max-width:100%;margin-inline:0}
  .ed-48 .figure .frame,.ed-48 .portrait .frame{max-width:min(100%,24rem)}

  /* vertical offset — the image sits off the copy's baseline */
  .ed-drop .figure,.ed-drop .portrait{margin-top:clamp(2rem,5vw,5.5rem)}
  .ed-lift .splittext{margin-top:clamp(2rem,4vw,4rem)}
}

/* Dark grounds alternate — espresso, lacquer green, ink green — rather than
   every one being brown. Specificity beats .bg-night without !important. */
.sec.ed-green{background:var(--lacquer-green)}
.sec.ed-ink{background:var(--ink-green)}

/* Reveal motion: her brief is 6-12px over 180-300ms. The base was 26px over
   900ms, which reads as a dramatic entrance rather than almost-invisible. */
.rv{transform:translateY(10px);transition:opacity .28s ease,transform .28s ease}
.rv-l{transform:translateX(-12px)}
.rv-r{transform:translateX(12px)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* A thin rule instead of a card edge. */
.ed-rule{border:0;border-top:1px solid var(--line);margin:0}
.bg-night .ed-rule,.statement .ed-rule{border-top-color:var(--on-night-12)}

/* Metadata set beside imagery, art-catalogue style. */
.ed-meta{font-family:var(--sans);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-soft);
  display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:1rem}
.bg-night .ed-meta,.statement .ed-meta{color:var(--on-night-60)}

/* Typography acting as a graphic object — the pull-quote bands. */
.statement h2{font-size:clamp(2rem,4.2vw,3.75rem);line-height:1.12;
  font-style:italic;font-weight:300;max-width:22ch}
.statement .shell{max-width:min(var(--shell),68rem)}

/* ── 6. BUTTONS ──────────────────────────────────────────────────────── */
/* Editorial, not pills. 0–3px radius, small wide uppercase sans. */
.btn{border-radius:2px;padding:1rem 1.75rem;font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;min-height:46px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .22s ease,color .22s ease,border-color .22s ease}
.btn--gold{background:var(--espresso);color:var(--porcelain);border:1px solid var(--espresso)}
.btn--gold:hover{background:var(--lacquer-green);border-color:var(--lacquer-green);
  color:var(--porcelain)}
.btn--dark{background:var(--charcoal);color:var(--porcelain);border:1px solid var(--charcoal)}
.btn--dark:hover{background:var(--lacquer-green);border-color:var(--lacquer-green)}
.btn--light{background:var(--porcelain);color:var(--charcoal);border:1px solid var(--porcelain)}
.btn--light:hover{background:transparent;color:var(--porcelain);border-color:var(--porcelain)}
/* secondary = transparent with a 1px rule */
.btn--outline-dark{background:transparent;border:1px solid var(--espresso);color:var(--espresso)}
.btn--outline-dark:hover{background:var(--espresso);color:var(--porcelain)}
.btn--outline-light{background:transparent;border:1px solid var(--on-night-30);color:var(--porcelain)}
.btn--outline-light:hover{background:var(--porcelain);color:var(--charcoal);border-color:var(--porcelain)}
/* on a dark ground the primary inverts so it stays the loudest thing */
.bg-night .btn--gold,.hero .btn--gold,.phero .btn--gold,.statement .btn--gold{
  background:var(--porcelain);color:var(--charcoal);border-color:var(--porcelain)}
.bg-night .btn--gold:hover,.hero .btn--gold:hover,.phero .btn--gold:hover{
  background:transparent;color:var(--porcelain);border-color:var(--porcelain)}

/* Text links — underline expands rather than appears. */
.tlink{position:relative;text-decoration:none;padding-bottom:.2rem}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .26s ease}
.tlink:hover::after{width:100%}

/* ── 7. NAVIGATION ───────────────────────────────────────────────────── */
.nav{padding-block:1.6rem}
.nav.is-stuck{padding-block:.9rem;background:var(--espresso-deep)}
.nav-cta{border-radius:2px;font-size:.6875rem;letter-spacing:.14em;
  padding:.8rem 1.35rem;min-height:42px;display:inline-flex;align-items:center;
  background:transparent;color:var(--porcelain)!important;
  border:1px solid var(--on-night-30)}
.nav-cta:hover{background:var(--porcelain);color:var(--charcoal)!important;
  border-color:var(--porcelain)}

/* ── 8. IMAGE TREATMENT ──────────────────────────────────────────────── */
/* Almost-invisible motion: 1.00 -> 1.02 over 300ms, and nothing else. */
.frame{overflow:hidden}
.figure img,.portrait img{transition:transform .28s ease}
.figure:hover img,.portrait:hover img{transform:scale(1.02)}
/* The offset square behind an image becomes a thin brass rule, not a slab. */
.accent{background:transparent;border:1px solid var(--antique-brass);opacity:.55}
@media (prefers-reduced-motion:reduce){
  .figure img,.portrait img{transition:none}
  .figure:hover img,.portrait:hover img{transform:none}
}

/* ── 9. FOOTER ───────────────────────────────────────────────────────── */
.foot{background:var(--espresso-deep)}
.foot .brand-name b{font-size:1.32rem;letter-spacing:.19em}
.foot h4{font-size:.625rem;letter-spacing:.24em}
.foot a{font-size:.875rem;letter-spacing:.005em}

/* ── 10. RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width:899px){
  /* Headlines stay editorial on a phone — reduced deliberately, not shrunk
     to fit. Body copy never drops below 16px. */
  h1{font-size:clamp(3rem,10.5vw,3.875rem);line-height:.98}
  h2{font-size:clamp(2.25rem,8vw,3rem);line-height:1.04}
  h3{font-size:clamp(1.5rem,5.5vw,1.9rem)}
  body{font-size:1rem}
  .sec{padding-block:clamp(3.5rem,13vw,4.5rem)}
  .split{gap:2.25rem}
  .statement h2{font-size:clamp(1.75rem,6.5vw,2.25rem)}
  .ed-meta{gap:.9rem;font-size:.625rem}
}

/* ── 11. PAGE TREATMENTS ─────────────────────────────────────────────── */

/* THE SHOP — museum store x gallery catalogue. No card backgrounds, no
   rounded tiles: every piece floats against the field with real air between
   rows, and the metadata reads like a wall label. */
.shop .grid{gap:clamp(2rem,3.4vw,3.75rem) clamp(1.5rem,2.4vw,2.5rem)}
.shop .card{background:transparent;border:0;border-radius:0;padding:0}
.shop .card:hover{background:transparent;box-shadow:none}
.shop .card .shot{border-radius:0;background:transparent}
.shop .card .ser{font-size:.625rem;letter-spacing:.22em;color:var(--text-soft);
  margin-top:1rem}
.shop .card .nm{font-family:var(--display);font-weight:400;letter-spacing:-.005em}
.shop .card .cap{font-family:var(--sans);font-size:.78125rem;color:var(--text-soft)}
.shop .card .pr{font-family:var(--sans);font-size:.78125rem;letter-spacing:.02em}
@media (min-width:1280px){ .shop .grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:900px) and (max-width:1279px){ .shop .grid{grid-template-columns:repeat(3,1fr)} }

/* WORK WITH ME — curated ways to work together, not funnel products. Thin
   rules instead of cards, and the price sits back rather than shouting. */
.ladder .rung{background:transparent;border:0;border-top:1px solid var(--line);
  border-radius:0;padding-block:clamp(1.5rem,2.6vw,2.25rem)}
.ladder .rung:last-child{border-bottom:1px solid var(--line)}
.ladder .tier{font-size:.625rem;letter-spacing:.22em;color:var(--text-soft)}
.ladder .price{font-family:var(--display);font-weight:400}
.bg-night .ladder .rung,.ed-ink .ladder .rung{border-top-color:var(--on-night-12)}
.bg-night .ladder .rung:last-child{border-bottom-color:var(--on-night-12)}

/* THE FREE READING — a private reading room, not an occult shop. It leans
   darker than the rest of the site by design. */
.oracle-world .rd-setup,.oracle-world .rd-face{border-radius:2px}
.oracle-world .rd-q input{font-family:var(--display);font-weight:300}

/* THE FREE PRINT — receiving a small art edition. Edition-like metadata,
   gallery presentation, no lead-magnet styling. */
.pickgrid .card{background:transparent;border-radius:0}
.pickgrid .card .ser{font-size:.625rem;letter-spacing:.22em}

/* Art-catalogue captions under a plate, wherever one appears. */
.figure .ed-meta,.portrait .ed-meta{margin-top:.9rem}

/* ── 12. ACCESSIBILITY ───────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--antique-brass);outline-offset:3px}
.bg-night :focus-visible,.hero :focus-visible,.phero :focus-visible{
  outline-color:var(--porcelain)}