/* ═══════════════════════════════════════════════════════════
   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: Brand board — ivory, espresso, forest teal, antique gold — generated from palette.py, do not hand-edit */
  --gold:   #D1B16A;
  --sand:   #C8BFB2;
  --amber:  #1F5B57;
  --umber:  #593A2F;

  --jade:    #1F5B57;
  --celadon: #C8BFB2;
  --stone:   #C8BFB2;
  --brass:   #D1B16A;
  --lacquer: #593A2F;
  --oxblood: #8B4A3A;
  --pblue:   #1F5B57;

  --night:   #593A2F;
  --night-2: #1F5B57;
  --paper:   #F2EEE7;
  --paper-2: #F2EEE7;

  --on-paper:      #593A2F;
  --on-paper-60:   rgba(89,58,47,.62);
  --on-paper-40:   rgba(89,58,47,.42);
  --on-paper-10:   rgba(89,58,47,.10);
  --on-night:      #F2EEE7;
  --on-night-60:   rgba(242,238,231,.78);
  --on-night-30:   rgba(242,238,231,.30);
  --on-night-mut:  rgba(242,238,231,.68);
  --on-night-12:   rgba(242,238,231,.12);

  --veil: 89,58,47;

  /* Gigi's own names, from the art-direction brief */
  --porcelain:     #F2EEE7;
  --ivory:         #F2EEE7;
  --espresso:      #593A2F;
  --espresso-deep: #1F5B57;
  --mink:          #8B4A3A;
  --charcoal:      #593A2F;
  --lacquer-green: #1F5B57;
  --ink-green:     #1F5B57;
  --porcelain-blue:#1F5B57;
  --antique-brass: #D1B16A;
  --text:          #593A2F;
  --text-soft:     #7A5C4A;
  --line:          rgba(89,58,47,.18);

  --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)}

/* ── 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;
}
.rung:first-child{border-top:1px solid var(--on-paper-10)}
@media(min-width:860px){.rung{grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr) auto;align-items:center}}
.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:.22em;text-transform:uppercase;color:var(--on-paper-40);margin-top:.3rem}

/* ── 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}
}

/* ══════════════════════ 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. */


/* ── brand board ───────────────────────────────────────────────────────
   1. Primary button: espresso with ivory type (8.77:1). On a dark ground it
      inverts to ivory so it stays the loudest thing in the band. */
.btn--gold{background:var(--night);color:var(--paper);border:1px solid var(--night)}
.btn--gold:hover{background:var(--jade);border-color:var(--jade);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);color:var(--paper);
  border-color:var(--night)}

/* 2. Gold is 1.78:1 on ivory and cannot be text there. Forest Teal carries the
      eyebrow on pale grounds; gold keeps it on the dark ones, which is what
      her boards actually show. */
.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. Stone is a band, not a field. Teal on stone is 4.29:1 — a hair under —
      so everything set on a stone band is espresso (5.58:1). */
.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)}

/* 4. The dark grounds alternate espresso and forest teal. */
.sec.ed-green{background:var(--jade)}
.sec.ed-ink{background:var(--night-2)}
.statement{background:var(--jade)}

/* 5. Gold clears AA on espresso (4.93:1) but NOT on forest teal (3.79:1), and
      the footer is teal. Rather than chase each rule, the token is re-pointed
      on every teal ground so gold text there becomes ivory (6.74:1). */
.sec.ed-green,.statement,.foot,.bg-night.ed-green{--gold:var(--paper)}

/* 6. Gold as hardware: rules, the offset square, icon strokes. */
.accent{background:transparent;border:1px solid var(--gold);opacity:.6}
.rung,.detail,.faq details,.stat,.tier-row{border-color:var(--stone)}

/* 7. Earthy Red is rare punctuation — reserved, not applied by default. */
.oracle-world{
  --paper:   #F3EEE8;
  --paper-2: #F3EEE8;
  --sand:    #D8B7B0;
  --lavender:#B5A9C5;
  --gold:    #C2A06A;
}
/* 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)}