/* =========================================================
   MONK — $monk on Solana
   Palette and mood taken from the logo: saffron robe,
   warm stone, golden haze, muted jade.
   ========================================================= */

:root{
  --ink:        #0C0A08;
  --stone-900:  #131009;
  --stone-850:  #1A1610;
  --stone-800:  #221C14;
  --stone-700:  #2E2618;
  --paper:      #EFE5D3;
  --paper-2:    #E4D6BC;
  --paper-3:    #D6C4A4;

  --saffron:    #E5952A;
  --saffron-lt: #F7C069;
  --ember:      #C4611A;
  --jade:       #7E9A6E;

  --on-dark:    #E9DCC6;
  --on-dark-dim:#9E8E76;
  --on-paper:   #241C12;
  --on-paper-dim:#6B5B45;

  --line-dark:  rgba(229,149,42,.20);
  --line-paper: rgba(36,28,18,.16);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.16,1,.3,1);
}

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

/* a display rule on .menu / .lightbox would otherwise defeat the hidden attribute */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--stone-900);
  color:var(--on-dark);
  font-family:var(--sans);
  font-size:clamp(15px,.35vw + 14px,17px);
  line-height:1.72;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* grain / rice-paper tooth over everything */
body::after{
  content:"";
  position:fixed; inset:0; z-index:200;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; height:auto; display:block; }

::selection{ background:var(--saffron); color:#1A1206; }

a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--saffron); color:#1A1206; padding:10px 16px; font-size:14px;
}
.skip:focus{ left:12px; top:12px; }

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

/* ---------- shared type ---------- */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  margin:0 0 22px;
  font-family:var(--sans);
  font-size:.68rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  color:var(--saffron);
}
.eyebrow__line{ width:36px; height:1px; background:currentColor; opacity:.55; flex:none; }
.eyebrow--dark{ color:var(--ember); }

.sec__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.5rem,6vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.015em;
  margin:0 0 .35em;
}
.sec__lead{
  max-width:52ch; margin:0;
  color:var(--on-dark-dim);
  font-size:1.02rem;
}
.sec__head{ margin-bottom:clamp(48px,7vw,96px); }
.sec__head--center{ text-align:center; }
.sec__head--center .eyebrow{ justify-content:center; }
.sec__head--center .sec__lead{ margin-inline:auto; }

/* ---------- arch frame (temple niche) ---------- */
.arch{
  position:relative; margin:0; overflow:hidden;
  border-radius:50% 50% 8px 8px / 34% 34% 4px 4px;
  background:var(--stone-800);
}
.arch img{ width:100%; height:100%; object-fit:cover; }
.arch::after{
  content:""; position:absolute; inset:0;
  border:1px solid rgba(240,200,130,.28);
  border-radius:inherit;
  pointer-events:none;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px;
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  border:1px solid transparent; border-radius:2px;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--solid{ background:var(--saffron); color:#1B1206; }
.btn--solid:hover{ background:var(--saffron-lt); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line-dark); color:var(--on-dark); background:transparent; }
.btn--ghost:hover{ border-color:var(--saffron); color:var(--saffron-lt); transform:translateY(-2px); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(15,12,8,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line-dark);
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:14px var(--pad);
  display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
.brand img{ border-radius:50%; border:1px solid var(--line-dark); }
.brand__name{ font-family:var(--serif); font-size:1.4rem; letter-spacing:.02em; }
.brand__tick{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--saffron); border:1px solid var(--line-dark);
  padding:3px 8px; border-radius:2px;
}
.nav__links{ display:flex; gap:30px; }
.nav__links a{
  text-decoration:none; font-size:.72rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-dim);
  transition:color .3s var(--ease);
}
.nav__links a:hover{ color:var(--saffron-lt); }
.nav__x{
  display:grid; place-items:center; width:38px; height:38px;
  border:1px solid var(--line-dark); border-radius:50%;
  color:var(--on-dark); transition:.35s var(--ease);
}
.nav__x:hover{ background:var(--saffron); color:#1B1206; border-color:var(--saffron); }

/* burger + full-screen menu (small screens) */
.burger{
  display:none; place-content:center; justify-items:center; gap:6px;
  width:38px; height:38px; padding:0;
  background:none; border:1px solid var(--line-dark); border-radius:50%;
  cursor:pointer;
}
.burger span{
  display:block; width:15px; height:1px; background:var(--on-dark);
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:99;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad);
  background:
    radial-gradient(70% 50% at 80% 12%, rgba(229,149,42,.16), transparent 70%),
    #0C0A08;
  opacity:0; transition:opacity .4s var(--ease);
}
.menu.is-open{ opacity:1; }
.menu__nav{ display:flex; flex-direction:column; gap:6px; }
.menu__nav a{
  display:flex; align-items:baseline; gap:18px;
  padding:10px 0; text-decoration:none;
  font-family:var(--serif); font-size:clamp(2.2rem,11vw,3.4rem); line-height:1.1;
  color:var(--on-dark);
  border-bottom:1px solid var(--line-dark);
  transition:color .3s var(--ease);
}
.menu__nav a:hover{ color:var(--saffron-lt); }
.menu__nav em{
  font-family:var(--sans); font-style:normal;
  font-size:.6rem; letter-spacing:.2em; color:var(--saffron); flex:none; width:26px;
}
.menu__foot{
  margin:36px 0 0; font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--on-dark-dim);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:132px 0 0;
  overflow:hidden;
}
.hero__glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(247,192,105,.20), transparent 70%),
    radial-gradient(80% 60% at 12% 88%, rgba(196,97,26,.13), transparent 72%);
}
.hero__in{
  position:relative;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,6vw,88px); align-items:center;
  padding-bottom:clamp(60px,9vw,110px);
}
.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(5rem,15vw,11rem);
  line-height:.86; letter-spacing:-.03em;
  margin:0 0 .12em;
  background:linear-gradient(168deg,#FBE3B4 8%, var(--saffron) 58%, var(--ember) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.hero__sub{
  margin:0 0 30px; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.7rem); color:var(--on-dark);
}
.hero__quote{
  margin:0 0 34px; padding-left:20px;
  border-left:1px solid var(--line-dark);
  font-family:var(--serif); font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.5; color:var(--on-dark-dim);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }

.hero__figure{ position:relative; }
.arch--hero{
  width:100%; max-width:460px; margin-inline:auto;
  aspect-ratio:1/1.18;
  box-shadow:0 50px 120px -50px rgba(0,0,0,.9), 0 0 90px -30px rgba(229,149,42,.30);
}
.arch--hero img{ transform:scale(1.06); }
.hero__caption{
  margin:20px 0 0; text-align:center;
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--on-dark-dim);
}
.hero__foot{ border-top:1px solid var(--line-dark); position:relative; }
.hero__footIn{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  padding-block:20px;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--on-dark-dim);
}
.dot{ width:3px; height:3px; border-radius:50%; background:var(--saffron); opacity:.6; }

/* ---------- contract chip ---------- */
.ca{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 12px 12px 18px;
  border:1px solid var(--line-dark); border-radius:3px;
  background:rgba(255,240,210,.035);
}
.ca__label{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--on-dark-dim); flex:none;
}
.ca__val{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.01em;
  color:var(--saffron-lt); word-break:break-all; flex:1 1 200px; min-width:0;
}
.ca__btn{
  flex:none; cursor:pointer;
  padding:9px 16px; border:0; border-radius:2px;
  background:var(--saffron); color:#1B1206;
  font-family:var(--sans); font-size:.65rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  transition:background .3s var(--ease);
}
.ca__btn:hover{ background:var(--saffron-lt); }
.ca__btn.is-done{ background:var(--jade); color:#0F160C; }

/* =========================================================
   LORE  (paper section — the manuscript)
   ========================================================= */
.lore{
  position:relative;
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  color:var(--on-paper);
  padding:clamp(80px,11vw,150px) 0 clamp(70px,10vw,130px);
}
.lore::before,
.lore::after{
  content:""; position:absolute; left:0; right:0; height:64px;
  background:linear-gradient(180deg, var(--stone-900), transparent);
}
.lore::before{ top:0; }
.lore::after{ bottom:0; background:linear-gradient(0deg, var(--stone-900), transparent); }
.lore .sec__lead{ color:var(--on-paper-dim); }
.lore .sec__title{ color:var(--on-paper); }

.passage{
  display:grid;
  grid-template-columns:88px 1fr 300px;
  gap:clamp(24px,4vw,56px);
  align-items:start;
  padding:clamp(38px,5vw,60px) 0;
  border-top:1px solid var(--line-paper);
}
.passage--flip{ grid-template-columns:300px 1fr 88px; }
.passage--flip .passage__num{ order:3; }
.passage--flip .passage__body{ order:2; }
.passage--flip .passage__fig{ order:1; }

.passage__num{
  font-family:var(--serif); font-size:clamp(3rem,6vw,5rem); line-height:.9;
  color:transparent; -webkit-text-stroke:1px rgba(196,97,26,.55);
  padding-top:.06em;
}
.passage__body h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.1;
  margin:0 0 .5em; letter-spacing:-.01em;
}
.passage__body p{ margin:0; max-width:56ch; color:#3B2F20; }
.passage__fig{ aspect-ratio:1/1.16; }
.passage__fig::after{ border-color:rgba(60,44,26,.28); }

.lore__seal{
  margin:clamp(48px,6vw,80px) 0 0;
  text-align:center;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.2rem);
  color:var(--on-paper);
}
.lore__seal strong{ font-style:normal; font-weight:600; color:var(--ember); }

/* =========================================================
   PRECEPTS
   ========================================================= */
.precepts{ padding:clamp(90px,12vw,160px) 0 clamp(70px,9vw,120px); }
.vows{
  list-style:none; margin:0 0 clamp(56px,7vw,92px); padding:0;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.vow{
  background:var(--stone-900);
  padding:clamp(30px,4vw,52px);
  transition:background .5s var(--ease);
}
.vow:hover{ background:var(--stone-850); }
.vow__num{
  display:block; font-family:var(--serif); font-size:1.6rem; line-height:1;
  color:var(--saffron); margin-bottom:20px;
}
.vow h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.85rem); line-height:1.15;
  margin:0 0 .55em;
}
.vow p{ margin:0; color:var(--on-dark-dim); max-width:42ch; }

.stats{
  display:grid; grid-template-columns:repeat(5,1fr);
  margin:0; border-top:1px solid var(--line-dark);
}
.stat{ padding:26px 10px 0; text-align:center; }
.stat dt{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--on-dark-dim); margin-bottom:9px;
}
.stat dd{
  margin:0; font-family:var(--serif);
  font-size:clamp(1.15rem,2vw,1.6rem); color:var(--saffron-lt);
}

/* =========================================================
   PRACTICE
   ========================================================= */
.practice{
  padding:clamp(80px,10vw,140px) 0;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  background:
    radial-gradient(50% 70% at 78% 50%, rgba(229,149,42,.10), transparent 70%),
    var(--stone-850);
}
.practice__in{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,6vw,80px); align-items:center;
}
.practice__tally{
  margin:26px 0 0; font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--on-dark-dim);
}
.practice__reward{
  margin:12px 0 0; max-width:44ch;
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  color:var(--saffron-lt);
}
.practice__orb{ display:grid; place-items:center; }
.orb{
  position:relative; display:grid; place-items:center;
  width:min(340px,72vw); aspect-ratio:1;
}
.orb__ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(229,149,42,.35);
  transform:scale(.62);
  transition:transform 4s cubic-bezier(.4,0,.2,1), opacity 4s ease;
  opacity:.9;
}
.orb__ring--2{
  inset:14%;
  border-color:rgba(247,192,105,.22);
  background:radial-gradient(circle at 50% 45%, rgba(229,149,42,.22), transparent 70%);
  transition-duration:4s;
}
.orb.is-out .orb__ring{ transform:scale(1); opacity:.45; }
.orb.is-out .orb__ring--2{ transform:scale(1.04); }
.orb.is-in .orb__ring{ transform:scale(.62); }
.orb__word{
  position:relative; z-index:2;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.4rem,3vw,2rem); color:var(--on-dark);
  transition:opacity .6s ease;
}

/* =========================================================
   SCENES (horizontal rail)
   ========================================================= */
.scenes{ padding:clamp(90px,12vw,150px) 0 clamp(60px,8vw,100px); }
.rail{
  display:flex; gap:clamp(18px,2.6vw,34px);
  overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding-block:10px 34px;
  cursor:grab;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.is-dragging{ cursor:grabbing; user-select:none; }
.rail__pad{ flex:none; width:calc((100vw - var(--wrap))/2 + var(--pad) - clamp(18px,2.6vw,34px)); min-width:var(--pad); }

.card{
  flex:none; margin:0; position:relative;
  width:clamp(240px,30vw,370px);
}
.card:nth-child(even){ margin-top:clamp(20px,4vw,54px); }
.card img{
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:3px;
  filter:saturate(.94) brightness(.95);
  transition:filter .6s var(--ease), transform .6s var(--ease);
  user-select:none;
}
.card:hover img{ filter:none; transform:translateY(-6px); }
.card__hit{
  position:absolute; inset:0 0 auto; aspect-ratio:1;
  width:100%; background:none; border:0; padding:0; cursor:zoom-in; z-index:2;
}
.card figcaption{
  display:flex; gap:12px; align-items:baseline;
  margin-top:16px; padding-right:10px;
  font-family:var(--serif); font-size:1.02rem; line-height:1.4;
  color:var(--on-dark-dim);
}
.card figcaption span{
  font-family:var(--sans); font-size:.6rem; letter-spacing:.2em;
  color:var(--saffron); flex:none;
}
.rail__foot{ display:flex; align-items:center; gap:clamp(20px,4vw,44px); }
.rail__bar{ flex:1 1 auto; height:1px; background:var(--line-dark); position:relative; }
.rail__bar span{
  position:absolute; left:0; top:-1px; height:3px; width:14%;
  background:var(--saffron); transition:transform .1s linear;
}
.rail__nav{ display:flex; gap:10px; flex:none; }
.rail__btn{
  display:grid; place-items:center;
  width:46px; height:46px; padding:0; cursor:pointer;
  background:none; border:1px solid var(--line-dark); border-radius:50%;
  color:var(--on-dark);
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease), opacity .35s var(--ease);
}
.rail__btn:hover:not(:disabled){ background:var(--saffron); border-color:var(--saffron); color:#1B1206; }
.rail__btn:disabled{ opacity:.28; cursor:default; }

/* =========================================================
   PATH (paper)
   ========================================================= */
.path{
  background:linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  color:var(--on-paper);
  padding:clamp(90px,12vw,150px) 0 clamp(80px,10vw,130px);
  position:relative;
}
.path::before{
  content:""; position:absolute; top:0; left:0; right:0; height:70px;
  background:linear-gradient(180deg, var(--stone-900), transparent);
}
.path .sec__title{ color:var(--on-paper); }
.path .sec__lead{ color:var(--on-paper-dim); }

.steps{ list-style:none; margin:0; padding:0; max-width:780px; }
.step{
  display:grid; grid-template-columns:96px 1fr; gap:clamp(18px,3vw,40px);
  padding:clamp(28px,4vw,44px) 0;
  border-top:1px solid var(--line-paper);
  position:relative;
}
.step:last-child{ border-bottom:1px solid var(--line-paper); }
.step__n{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.2em;
  color:var(--ember); padding-top:.45em;
}
.step__body h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.4rem,2.6vw,2rem); margin:0 0 .45em; line-height:1.15;
}
.step__body p{ margin:0; color:#3B2F20; max-width:56ch; }

/* =========================================================
   CONTRACT
   ========================================================= */
.contract{
  padding:clamp(90px,12vw,150px) 0;
  text-align:center;
  background:
    radial-gradient(55% 70% at 50% 0%, rgba(229,149,42,.13), transparent 70%),
    var(--stone-900);
}
.contract__in .eyebrow{ justify-content:center; }
.ca--big{
  max-width:760px; margin:8px auto 22px;
  justify-content:center; padding:18px 18px 18px 24px;
}
.ca--big .ca__val{ font-size:clamp(.78rem,1.5vw,1rem); flex:0 1 auto; text-align:center; }
.contract__warn{
  max-width:52ch; margin-inline:auto;
  font-size:.88rem; color:var(--on-dark-dim);
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  border-top:1px solid var(--line-dark);
  padding:clamp(48px,6vw,72px) 0 clamp(38px,5vw,56px);
  background:var(--ink);
}
.foot__in{
  display:grid; grid-template-columns:1fr auto; gap:26px 40px; align-items:center;
}
.foot__brand{ display:flex; align-items:center; gap:16px; }
.foot__brand img{ border-radius:50%; border:1px solid var(--line-dark); }
.foot__name{ margin:0; font-family:var(--serif); font-size:1.5rem; line-height:1.1; }
.foot__tick{
  margin:2px 0 0; font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--on-dark-dim);
}
.foot__x{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px; border:1px solid var(--line-dark); border-radius:2px;
  text-decoration:none; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  transition:.35s var(--ease);
}
.foot__x:hover{ border-color:var(--saffron); color:var(--saffron-lt); }
.foot__note{
  grid-column:1/-1; margin:14px 0 0; padding-top:26px;
  border-top:1px solid var(--line-dark);
  font-size:.78rem; line-height:1.7; color:var(--on-dark-dim); max-width:78ch;
}

/* =========================================================
   LIGHTBOX + TOAST
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:250;
  display:grid; place-items:center;
  background:rgba(8,6,4,.94);
  padding:clamp(20px,5vw,60px);
  opacity:0; transition:opacity .35s var(--ease);
}
.lightbox.is-open{ opacity:1; }
.lightbox img{
  max-width:min(880px,92vw); max-height:86vh; width:auto;
  border-radius:3px; box-shadow:0 40px 120px -40px #000;
}
.lightbox__close{
  position:absolute; top:18px; right:22px;
  width:44px; height:44px; border-radius:50%;
  background:none; border:1px solid var(--line-dark); color:var(--on-dark);
  font-size:26px; line-height:1; cursor:pointer;
  transition:.3s var(--ease);
}
.lightbox__close:hover{ border-color:var(--saffron); color:var(--saffron); }

.toast{
  position:fixed; left:50%; bottom:30px; z-index:260;
  transform:translate(-50%,20px);
  padding:11px 22px; border-radius:2px;
  background:var(--saffron); color:#1B1206;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* =========================================================
   REVEAL
   ========================================================= */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .nav__links{ display:none; }
  .burger{ display:grid; }
  .foot__x{ justify-self:start; }
  .hero{ padding-top:108px; }
  .hero__in{ grid-template-columns:1fr; gap:48px; }
  .hero__figure{ order:-1; }
  .arch--hero{ max-width:340px; aspect-ratio:1/1.12; }
  .hero__title{ font-size:clamp(4.5rem,22vw,8rem); }
  .practice__in{ grid-template-columns:1fr; }
  .practice__orb{ order:-1; }
  .vows{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:0 1px; }
  .stat{ padding-bottom:22px; }
  .passage,
  .passage--flip{ grid-template-columns:1fr; gap:22px; }
  .passage--flip .passage__num{ order:0; }
  .passage--flip .passage__body{ order:1; }
  .passage--flip .passage__fig{ order:2; }
  .passage__num{ font-size:2.6rem; }
  .passage__fig{ max-width:340px; aspect-ratio:1/1.1; }
  .rail__pad{ width:var(--pad); }
  .foot__in{ grid-template-columns:1fr; align-items:start; }
}

@media (max-width:560px){
  .brand__tick{ display:none; }
  .step{ grid-template-columns:1fr; gap:8px; }
  .step__n{ padding-top:0; }
  .ca{ padding:14px; }
  .ca__label{ width:100%; }
  .hero__footIn{ gap:12px; font-size:.6rem; }
  .card:nth-child(even){ margin-top:0; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}