/* ═══════════════════════════════════════════════════════════
   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{
  /* brand board — warm */
  --gold:   #F1D7A8;
  --sand:   #BEB099;
  --amber:  #A67244;
  --umber:  #593A2F;

  /* grounds (the "navy" role → deep brown) */
  --night:   #2E211A;
  --night-2: #241A14;
  --paper:   #FBF7F0;
  --paper-2: #F4EDE1;

  --on-paper:      #33261F;
  --on-paper-60:   rgba(51,38,31,.62);
  --on-paper-40:   rgba(51,38,31,.42);
  --on-paper-10:   rgba(51,38,31,.10);
  --on-night:      #F7F1E6;
  --on-night-60:   rgba(247,241,230,.60);
  --on-night-30:   rgba(247,241,230,.30);
  --on-night-mut:  rgba(247,241,230,.68);
  --on-night-12:   rgba(247,241,230,.12);

  --display: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  --mark:    "Italiana", "Optima", 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:#2B2018}
.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:400;font-size:1.05rem;letter-spacing:.26em;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);
}

/* ── 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.15rem;font-family:var(--display);font-size:1.7rem;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}
}
@media (max-width:380px){
  .brand-name span{display:none}
}

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

/* 5. Square format, everywhere. Every artwork and lifestyle image now sits in a
      1:1 frame and cover-crops to fill it, so the grids line up and nothing
      depends on the source file's aspect ratio. The artwork files themselves
      were re-exported as centred squares from the originals, so there is no
      double crop — the CSS is only holding the shape. */
.figure .frame,
.portrait .frame,
.split .frame{aspect-ratio:1;overflow:hidden;max-width:min(100%,34rem)}
.figure .frame img,
.portrait .frame img,
.split .frame img{width:100%;height:100%;object-fit:cover;object-position:center}

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