/* m0nk — Kevin Wu.
 *
 * The palette is not invented. #a0a0a0 and #141414 are the exact two stops of
 * the vertical gradient on his own m0nk.xyz, lifted from the archived
 * stylesheet. The saffron and the cyan are read off the album art he
 * commissioned from Marekolani: the saffron robe and mala beads of the m0nk
 * character against the cyan glow of his monitors.
 *
 * Circular Std is his typeface but it is licensed, so Poppins stands in — the
 * nearest free geometric sans with the same round, even counters.
 */

/* Every value below was MEASURED off his artwork by quantising it to 12
   colours, not picked by eye. The amber band (#B26A2C #C9984B #DFD181) is the
   lamp and the robe; the blue band (#346379 #4C8CA7 #59BFD3) is the monitors;
   the darks (#121112 #171D1F #322F27) are the room. A first pass used brighter,
   more saturated versions of these and it read as generic cyberpunk — his
   picture is warmer and dustier than that. */
:root {
  --ink:      #121112;   /* measured — the darkest of his room */
  --ink-2:    #171D1F;   /* measured */
  --ink-3:    #322F27;   /* measured — warm shadow, not a blue-grey */
  --grey:     #a0a0a0;   /* his old stylesheet, exactly */
  --grey-2:   #7D7468;
  --paper:    #F6F7F6;
  --saffron:  #C9984B;   /* measured — his robe */
  --gold:     #DFD181;   /* measured — the lamp highlight */
  --amber-dp: #B26A2C;   /* measured — the deep robe fold */
  --cyan:     #59BFD3;   /* measured — his brightest screen */
  --cyan-2:   #4C8CA7;   /* measured */
  --line:     rgba(246,247,246,.14);
  --line-2:   rgba(246,247,246,.07);
  --glass:    rgba(246,247,246,.045);
  --wrap:     1180px;
  --r:        14px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: min(var(--wrap), calc(100% - 32px)); margin-inline: auto; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- draft banner ------------------------------------------------------- */
.draft {
  background: var(--saffron); color: #140F06;
  font-size: .82rem; line-height: 1.5; font-weight: 500;
  padding: .7rem 16px; text-align: center;
}
.draft strong { font-weight: 700; }

/* ---- header ------------------------------------------------------------- */
.head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,13,16,.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.head-in { display: flex; align-items: center; gap: 1.5rem; height: 68px; }

.brand {
  font-weight: 700; font-size: 1.32rem; letter-spacing: -.02em;
  text-decoration: none; display: flex; align-items: center; gap: .55rem;
}
.brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 14px var(--cyan);
}
.brand em { font-style: normal; color: var(--cyan); }

.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nav a {
  text-decoration: none; font-size: .9rem; font-weight: 500; color: var(--grey);
  padding: .5rem .8rem; border-radius: 9px; transition: color .15s, background .15s;
}
.nav a:hover { color: var(--paper); background: var(--glass); }
.nav a.on { color: var(--paper); background: var(--glass); }

.burger {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  color: var(--paper); width: 42px; height: 38px; border-radius: 9px; cursor: pointer;
  font-size: 1.1rem; line-height: 1;
}

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .92rem; font-weight: 600; text-decoration: none;
  padding: .78rem 1.45rem; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; transition: transform .12s, filter .15s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-pri {
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  color: #140F06; box-shadow: 0 6px 26px rgba(201,152,75,.26);
}
.btn-pri:hover { filter: brightness(1.07); }
.btn-cy {
  background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
  color: #04161C; box-shadow: 0 6px 26px rgba(89,191,211,.24);
}
.btn-cy:hover { filter: brightness(1.07); }
.btn-ghost { border-color: var(--line); color: var(--paper); background: transparent; }
.btn-ghost:hover { background: var(--glass); }
.btn[disabled], .btn.is-off { opacity: .5; pointer-events: none; }

/* ---- hero --------------------------------------------------------------- */
.hero { position: relative; padding: 5.5rem 0 4.5rem; overflow: hidden; }
/* his gradient, inverted so the light sits behind the figure */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(180deg, #3A362D 0%, var(--ink-2) 55%, var(--ink) 100%);
}
.hero::after {
  content: ''; position: absolute; z-index: -1;
  width: 820px; height: 820px; left: 50%; top: -340px; translate: -50% 0;
  background: radial-gradient(circle, rgba(89,191,211,.17) 0%, transparent 62%);
  pointer-events: none;
}
.hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.2rem; align-items: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .73rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); border: 1px solid rgba(89,191,211,.3);
  background: rgba(89,191,211,.07); padding: .4rem .85rem; border-radius: 999px;
}
h1.hero-h {
  font-size: clamp(2.5rem, 6.2vw, 4.25rem); line-height: 1.03;
  letter-spacing: -.035em; font-weight: 700; margin: 1.3rem 0 0; text-wrap: balance;
}
h1.hero-h em { font-style: normal; color: var(--saffron); }
.hero-sub {
  color: var(--grey); font-size: 1.07rem; margin: 1.3rem 0 0; max-width: 46ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.hero-art {
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  background: var(--ink-3); aspect-ratio: 16 / 9;
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
/* the placeholder that shows until Kevin supplies the real art */
.art-wait {
  width: 100%; height: 100%; display: grid; place-content: center; gap: .5rem;
  text-align: center; padding: 2rem; color: var(--grey-2); font-size: .85rem;
  background:
    radial-gradient(circle at 70% 35%, rgba(89,191,211,.16), transparent 55%),
    radial-gradient(circle at 32% 72%, rgba(201,152,75,.14), transparent 55%),
    var(--ink-3);
}
.art-wait b { color: var(--grey); font-weight: 600; display: block; }

/* ---- sections ----------------------------------------------------------- */
.sec { padding: 4.5rem 0; }
.sec-alt { background: var(--ink-2); border-block: 1px solid var(--line-2); }
.sec-h {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.15;
  letter-spacing: -.03em; font-weight: 700; margin: 0;
}
.sec-k {
  font-size: .73rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--saffron); margin: 0 0 .7rem;
}
.sec-p { color: var(--grey); margin: 1rem 0 0; max-width: 62ch; }
.sec-head { margin-bottom: 2.4rem; }

/* ---- his words ---------------------------------------------------------- */
.quote {
  border-left: 2px solid var(--saffron); padding: .2rem 0 .2rem 1.5rem;
  font-size: clamp(1.1rem, 2.1vw, 1.45rem); line-height: 1.5;
  letter-spacing: -.015em; color: var(--paper); margin: 0;
}
.quote-by { color: var(--grey-2); font-size: .84rem; margin-top: .9rem; }

/* ---- cards -------------------------------------------------------------- */
.grid { display: grid; gap: 1.1rem; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--glass); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 1.6rem;
  transition: border-color .18s, transform .18s;
}
.card:hover { border-color: var(--line); transform: translateY(-2px); }
.card h3 { margin: .2rem 0 .5rem; font-size: 1.1rem; letter-spacing: -.02em; }
.card p { margin: 0; color: var(--grey); font-size: .93rem; }
.card .ico {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-content: center;
  background: rgba(89,191,211,.1); color: var(--cyan); margin-bottom: .9rem;
}

/* ---- book --------------------------------------------------------------- */
.book-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; }
.book-cover {
  aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--ink-3);
  box-shadow: 0 26px 60px rgba(0,0,0,.55);
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.price { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; }
.price small { font-size: .85rem; color: var(--grey); font-weight: 400; letter-spacing: 0; }

/* ---- forms -------------------------------------------------------------- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .83rem; font-weight: 500; margin-bottom: .35rem; color: var(--grey); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--paper);
  background: rgba(0,0,0,.3); border: 1px solid var(--line);
  border-radius: 10px; padding: .72rem .9rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(89,191,211,.14);
}
.field textarea { min-height: 110px; resize: vertical; }
.field select option { background: var(--ink-2); }
.inline { display: flex; gap: .6rem; flex-wrap: wrap; }
.inline input { flex: 1 1 220px; }

.note {
  border: 1px solid var(--line); background: var(--glass);
  border-radius: 10px; padding: .95rem 1.1rem; font-size: .88rem; color: var(--grey);
}
.note.good { border-color: rgba(89,191,211,.35); background: rgba(89,191,211,.07); color: var(--paper); }
.note.bad  { border-color: rgba(233,100,80,.4); background: rgba(233,100,80,.08); color: #FFD9D2; }

/* ---- episodes ----------------------------------------------------------- */
.ep {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line-2);
}
.ep:last-child { border-bottom: 0; }
.ep-no {
  width: 46px; height: 46px; border-radius: 11px; display: grid; place-content: center;
  background: rgba(201,152,75,.1); color: var(--saffron); font-weight: 700; font-size: .95rem;
}
.ep h3 { margin: 0 0 .25rem; font-size: 1.04rem; letter-spacing: -.015em; }
.ep h3 a { text-decoration: none; }
.ep h3 a:hover { color: var(--cyan); }
.ep p { margin: 0; color: var(--grey); font-size: .9rem; }
.ep-meta { color: var(--grey-2); font-size: .8rem; margin-top: .3rem; }

audio { width: 100%; margin-top: 1.3rem; border-radius: 10px; }

.empty {
  text-align: center; padding: 3.5rem 1.5rem; border: 1px dashed var(--line);
  border-radius: var(--r); color: var(--grey);
}
.empty b { display: block; color: var(--paper); font-size: 1.05rem; margin-bottom: .4rem; }

/* ---- footer ------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--line-2); padding: 3rem 0 2.2rem;
  background: var(--ink-2); margin-top: 1rem;
}
.foot-in { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-start; }
.foot a { color: var(--grey); text-decoration: none; font-size: .9rem; }
.foot a:hover { color: var(--paper); }
.foot-links { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.foot-fine { color: var(--grey-2); font-size: .78rem; margin-top: 1.8rem; line-height: 1.7; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-in, .book-in { grid-template-columns: 1fr; gap: 2.2rem; }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 3.5rem 0 3rem; }
}
@media (max-width: 720px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 68px 0 auto; flex-direction: column; align-items: stretch;
    background: var(--ink-2); border-bottom: 1px solid var(--line);
    padding: .6rem 16px 1rem; gap: .1rem; display: none;
  }
  body.nav-open .nav { display: flex; }
  .nav a { padding: .8rem .6rem; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .sec { padding: 3.2rem 0; }
  .ep { grid-template-columns: auto 1fr; }
  .ep > .btn { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.brand .wm { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE DEVOTIONAL LAYER
   This site is not a product page with a monk on it. The spiritual intent is
   the point, so the chrome has to carry weight: a serif for anything sacred,
   real darkness to sit in, gold leaf rather than gold plastic, and geometry
   that rewards looking twice.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --leaf:  linear-gradient(140deg, #F3E3B0 0%, #C9984B 42%, #8E6224 100%);
  --altar: radial-gradient(ellipse at 50% 0%, rgba(201,152,75,.16), transparent 62%);
}

/* ---- sanskrit / sacred type --------------------------------------------- */
.sanskrit {
  font-family: var(--serif);
  font-weight: 500; font-style: italic;
  letter-spacing: .01em; line-height: 1.45;
}
.mantra {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.35rem, 3.2vw, 2.1rem); line-height: 1.75;
  letter-spacing: .02em; white-space: pre-line; text-align: center;
  background: var(--leaf); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.verse {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.4; font-weight: 500; letter-spacing: -.005em;
  color: var(--paper); margin: 0;
}
.verse em { font-style: italic; color: var(--gold); }

/* ---- the altar: a section that glows from its own centre ---------------- */
.altar { position: relative; overflow: hidden; }
.altar::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--altar); pointer-events: none;
}
.altar > * { position: relative; z-index: 1; }

/* ---- mandala: concentric rings drawn in CSS, no image to go missing ----- */
.mandala {
  position: absolute; z-index: 0; pointer-events: none;
  aspect-ratio: 1; border-radius: 50%;
  background:
    repeating-radial-gradient(circle,
      transparent 0 17px,
      rgba(201,152,75,.085) 17px 18px),
    repeating-conic-gradient(from 0deg,
      rgba(89,191,211,.05) 0deg 2deg,
      transparent 2deg 15deg);
  mask-image: radial-gradient(circle, #000 32%, transparent 71%);
  -webkit-mask-image: radial-gradient(circle, #000 32%, transparent 71%);
  animation: turn 240s linear infinite;
}
@keyframes turn { to { transform: rotate(360deg); } }

/* ---- the lotus rule: a divider that is not just a line ------------------ */
.rule {
  display: flex; align-items: center; gap: 1rem; margin: 3.5rem 0;
  color: var(--saffron);
}
.rule::before, .rule::after {
  content: ''; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, rgba(201,152,75,.42), transparent);
}
.rule span { font-size: 1.1rem; line-height: 1; opacity: .8; }

/* ---- japa counter ------------------------------------------------------- */
.japa { display: grid; place-items: center; gap: 1.6rem; padding: 1rem 0 0; }
.bead-stage { position: relative; width: min(340px, 78vw); aspect-ratio: 1; display: grid; place-items: center; }
.bead-ring { position: absolute; inset: 0; }
.bead-ring circle { transition: fill .18s ease, r .18s ease; }

.bead-core {
  position: relative; z-index: 2; width: 52%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; gap: .1rem; text-align: center;
  background: radial-gradient(circle at 38% 32%, #2A2520, #121112 70%);
  border: 1px solid rgba(201,152,75,.3);
  box-shadow: 0 0 60px rgba(201,152,75,.14), inset 0 0 40px rgba(0,0,0,.7);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .09s ease, box-shadow .2s ease;
}
.bead-core:active { transform: scale(.965); box-shadow: 0 0 80px rgba(201,152,75,.3), inset 0 0 40px rgba(0,0,0,.7); }
.bead-core .n {
  font-family: var(--serif); font-size: 3.1rem; line-height: 1; font-weight: 600;
  background: var(--leaf); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bead-core .of { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-2); }
.bead-core .hint { font-size: .68rem; color: var(--grey-2); margin-top: .35rem; opacity: .75; }

.rounds { display: flex; flex-wrap: wrap; gap: .42rem; justify-content: center; max-width: 330px; }
.rounds i {
  width: 13px; height: 13px; border-radius: 50%; display: block;
  border: 1px solid rgba(201,152,75,.35); background: transparent;
  transition: background .25s ease, box-shadow .25s ease;
}
.rounds i.done { background: var(--saffron); box-shadow: 0 0 10px rgba(201,152,75,.55); border-color: transparent; }

.japa-tools { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.japa-tools button {
  font: inherit; font-size: .83rem; font-weight: 500; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--grey);
  padding: .5rem 1rem; border-radius: 999px; transition: color .15s, border-color .15s;
}
.japa-tools button:hover { color: var(--paper); border-color: var(--saffron); }

/* ---- breath / meditation timer ------------------------------------------ */
.breath-stage { display: grid; place-items: center; gap: 1.4rem; }
.breath {
  width: min(230px, 62vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(89,191,211,.2), rgba(89,191,211,.03) 68%);
  border: 1px solid rgba(89,191,211,.26);
  display: grid; place-content: center; text-align: center;
  font-family: var(--serif); font-size: 1.3rem; color: var(--paper);
}
.breath.run { animation: breathe 11s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { transform: scale(.72); box-shadow: 0 0 30px rgba(89,191,211,.12); }
  36%      { transform: scale(1);   box-shadow: 0 0 80px rgba(89,191,211,.3); }
  64%      { transform: scale(1);   box-shadow: 0 0 80px rgba(89,191,211,.3); }
}

/* ---- teachings ---------------------------------------------------------- */
.teaching {
  padding: 2rem 0; border-bottom: 1px solid var(--line-2);
}
.teaching:last-child { border-bottom: 0; }
.teaching h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; margin: 0 0 .4rem; letter-spacing: -.01em; }
.teaching h3 a { text-decoration: none; }
.teaching h3 a:hover { color: var(--gold); }
.teaching .when { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-2); }
.teaching .body { color: var(--grey); margin-top: .8rem; white-space: pre-wrap; line-height: 1.85; }

/* a drop cap, because this is meant to be read slowly */
.teaching .body.lead::first-letter {
  font-family: var(--serif); float: left; font-size: 3.6rem; line-height: .82;
  padding: .1rem .55rem 0 0; color: var(--saffron); font-weight: 600;
}

/* ---- hero, devotional variant ------------------------------------------- */
h1.hero-h.sacred {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.7rem, 7vw, 5rem); letter-spacing: -.015em; line-height: 1.06;
}
h1.hero-h.sacred em {
  font-style: italic;
  background: var(--leaf); -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .mandala, .breath.run { animation: none !important; }
}

/* seven nav items need a little less air than four did */
@media (min-width: 721px) {
  .nav { gap: .1rem; }
  .nav a { padding: .5rem .62rem; font-size: .86rem; }
}
@media (min-width: 721px) and (max-width: 1040px) {
  .nav a { padding: .5rem .5rem; font-size: .82rem; }
  .head-in { gap: 1rem; }
}

/* Sample badge — every seeded demo row wears one. It must be impossible to
   mistake placeholder copy for something Kevin wrote. */
.sample {
  display: inline-block; vertical-align: middle;
  font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #140F06; background: var(--saffron);
  padding: .16rem .46rem; border-radius: 4px; margin-left: .5rem;
}
.sample-bar {
  border: 1px dashed rgba(201,152,75,.5); background: rgba(201,152,75,.07);
  border-radius: 10px; padding: .9rem 1.1rem; font-size: .86rem; color: var(--gold);
  margin-bottom: 1.6rem;
}

/* Page artwork — a wide band under a page heading. The gradient mask lets the
   image dissolve into the page instead of sitting in a hard box. */
.page-art {
  position: relative; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line); background: var(--ink-3);
  aspect-ratio: 16 / 9; margin-top: 2.4rem;
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
}
.page-art img { width: 100%; height: 100%; object-fit: cover; }
.page-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(18,17,18,.82) 0%, rgba(18,17,18,.1) 46%, transparent 72%),
              linear-gradient(0deg, rgba(18,17,18,.55) 0%, transparent 38%);
}
.page-art figcaption {
  position: absolute; left: 1.2rem; bottom: 1rem; z-index: 2;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey-2);
}
@media (max-width: 720px) { .page-art { aspect-ratio: 4 / 3; } }

/* ---- the practice mark --------------------------------------------------
   Your own count, carried quietly on every page. It is deliberately small and
   unemphatic: a reminder, never a scoreboard. Hidden entirely until there is
   something to say. */
.pmark {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; font-size: .78rem; color: var(--grey);
  border: 1px solid var(--line-2); border-radius: 999px; padding: .34rem .8rem;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.pmark:hover { color: var(--paper); border-color: rgba(201,152,75,.42); }
.pmark .pm-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--saffron);
  box-shadow: 0 0 8px rgba(201,152,75,.7); flex: none;
}
.pmark[hidden] { display: none; }
/* with the mark present the nav no longer needs to claim the free space */
.head-in .nav { margin-left: 0; }
@media (max-width: 860px) { .pmark { display: none; } }

.kept {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: var(--saffron); margin: .4rem 0 0; text-align: center;
}
.kept[hidden] { display: none; }

/* ---- shop, basket, checkout --------------------------------------------- */
.prod { display: flex; flex-direction: column; }
.prod-art {
  aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; margin-bottom: 1rem;
  background: radial-gradient(circle at 60% 35%, rgba(201,152,75,.12), transparent 60%), var(--ink-3);
  border: 1px solid var(--line-2); display: grid; place-items: center;
}
.prod-art img { width: 100%; height: 100%; object-fit: cover; }
.prod-ph { font-size: 2.4rem; color: rgba(201,152,75,.45); }
.buyrow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: auto; }
.buyrow select {
  font: inherit; font-size: .9rem; color: var(--paper); background: rgba(0,0,0,.35);
  border: 1px solid var(--line); border-radius: 9px; padding: .5rem .6rem;
}
.buyrow select option { background: var(--ink-2); }
.buyrow .btn { flex: 1 1 auto; padding: .62rem 1rem; font-size: .86rem; }

.cline {
  display: grid; grid-template-columns: 76px 1fr auto auto; gap: 1.1rem;
  align-items: center; padding: 1.2rem 0; border-bottom: 1px solid var(--line-2);
}
.cline:last-of-type { border-bottom: 0; }
.cline-art {
  width: 76px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden;
  background: var(--ink-3); border: 1px solid var(--line-2);
  display: grid; place-items: center; color: rgba(201,152,75,.5); font-size: 1.4rem;
}
.cline-art img { width: 100%; height: 100%; object-fit: cover; }
.cline-body h3 { margin: 0 0 .2rem; font-size: 1.02rem; letter-spacing: -.01em; }
.cline-var {
  margin: 0; color: var(--grey-2); font-size: .76rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.cline-unit { margin: .3rem 0 0; color: var(--grey); font-size: .84rem; }
.cline-qty select {
  font: inherit; font-size: .9rem; color: var(--paper); background: rgba(0,0,0,.35);
  border: 1px solid var(--line); border-radius: 9px; padding: .45rem .55rem;
}
.cline-qty select option { background: var(--ink-2); }
.cline-sum { text-align: right; }
.cline-sum strong { display: block; font-size: 1.02rem; }

.linky {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .78rem; color: var(--grey-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.linky:hover { color: var(--saffron); }

.totals { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.trow { display: flex; justify-content: space-between; padding: .4rem 0; color: var(--grey); font-size: .93rem; }
.trow.sub { font-size: .85rem; color: var(--grey-2); }
.trow.big {
  font-family: var(--serif); font-size: 1.5rem; color: var(--paper);
  border-top: 1px solid var(--line-2); margin-top: .5rem; padding-top: .9rem;
}

.checkout-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.4rem; margin-top: 2.2rem; align-items: start; }
.summary {
  background: var(--glass); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 1.5rem; position: sticky; top: 88px;
}
.srow { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; font-size: .91rem; color: var(--grey); }
.srow small { display: block; color: var(--grey-2); font-size: .76rem; }
.srow span:first-child { color: var(--paper); }
.srow.total {
  border-top: 1px solid var(--line-2); margin-top: .6rem; padding-top: .9rem;
  font-family: var(--serif); font-size: 1.25rem; color: var(--paper);
}

/* basket count on the header mark */
.pmark.cartmark .pm-dot { background: var(--cyan); box-shadow: 0 0 8px rgba(89,191,211,.7); }

@media (max-width: 820px) {
  .checkout-in { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 640px) {
  .cline { grid-template-columns: 60px 1fr auto; row-gap: .6rem; }
  .cline-art { width: 60px; }
  .cline-sum { grid-column: 2 / -1; display: flex; justify-content: space-between; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVAMP — built to the ChatGPT layout mockup (m0nk-layout-mockup.jpg).
   Measured off the render at its native 1024px rather than eyeballed: the hero
   art bleeds full width instead of sitting in a box, the mantra band gains
   concentric rings and flanking lotuses, cards get gold line icons and an
   arrow, and the 108 section becomes a three-column altar.
   This layer intentionally overrides the earlier one.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --cream:  #F0E6D2;       /* the mockup's heading ivory, warmer than --paper */
  --deep:   #0A0F11;       /* the deepest band */
  --leaf2:  linear-gradient(180deg, #F6E3B0 0%, #D9A94F 55%, #A9762C 100%);
}

/* ---- header ------------------------------------------------------------- */
.head { background: rgba(10,15,17,.86); border-bottom: 1px solid rgba(201,152,75,.18); }
.brand { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: .01em; }
.brand .wm { color: var(--cream); }
.brand em { color: var(--saffron); font-style: normal; }
.brand .dot { display: none; }

.nav a {
  font-size: .74rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(240,230,210,.72); border-radius: 0; padding: .5rem .2rem;
  margin-inline: .5rem; position: relative; background: none;
}
.nav a:hover, .nav a.on { color: var(--cream); background: none; }
.nav a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--saffron);
}

/* ---- buttons: tighter, squarer, amber fill ----------------------------- */
.btn { border-radius: 6px; padding: .74rem 1.5rem; font-size: .88rem; font-weight: 600; }
.btn-pri { background: linear-gradient(180deg, #E2B45E, #C08A33); color: #1A1206; box-shadow: none; }
.btn-pri:hover { filter: brightness(1.08); }
.btn-ghost { border-color: rgba(240,230,210,.4); color: var(--cream); }
.btn-ghost:hover { border-color: var(--cream); background: rgba(240,230,210,.06); }

/* ---- hero: the art bleeds, it is not boxed ----------------------------- */
.hero { padding: 0; min-height: min(78vh, 620px); display: grid; align-items: center; }
.hero::before { background: var(--deep); }
.hero::after { display: none; }
.hero-in { grid-template-columns: 1fr; gap: 0; position: relative; z-index: 2; padding: 4.5rem 0; }
.hero-copy { max-width: 46%; }

.hero-bleed { position: absolute; inset: 0 0 0 38%; z-index: 1; overflow: hidden; }
.hero-bleed img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
/* dissolve the art into the page from the left and along the bottom */
.hero-bleed::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--deep) 0%, rgba(10,15,17,.86) 26%, rgba(10,15,17,.1) 62%, transparent 86%),
    linear-gradient(0deg, var(--deep) 0%, transparent 34%);
}
h1.hero-h.sacred { font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.08; color: var(--cream); }
h1.hero-h.sacred em {
  background: none; -webkit-text-fill-color: currentColor; color: var(--cream); font-style: normal;
}
.hero-sub { color: rgba(240,230,210,.66); font-size: 1rem; max-width: 34ch; }

/* ---- the mantra band --------------------------------------------------- */
.mantra-band {
  position: relative; overflow: hidden; padding: 4.2rem 0;
  background: linear-gradient(180deg, #0C1518 0%, #101B1F 52%, #0A1215 100%);
  border-block: 1px solid rgba(201,152,75,.14);
}
.mantra-band .rings {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(560px, 76vw); aspect-ratio: 1; pointer-events: none; opacity: .5;
  background: repeating-radial-gradient(circle, transparent 0 13px, rgba(201,152,75,.16) 13px 14px);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
.mantra-band .glow {
  position: absolute; left: 50%; bottom: -40%; translate: -50% 0;
  width: 70%; aspect-ratio: 2/1; pointer-events: none;
  background: radial-gradient(ellipse, rgba(223,209,129,.26), transparent 62%);
}
.mantra-row {
  position: relative; z-index: 2; display: flex; align-items: center;
  justify-content: center; gap: clamp(1rem, 5vw, 4rem);
}
.lotus-mark { color: var(--saffron); display: inline-flex; }
.mantra {
  font-size: clamp(1.25rem, 2.9vw, 2.05rem); line-height: 1.55; font-weight: 500;
  background: var(--leaf2); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 760px) { .mantra-row .lotus-mark { display: none; } }

/* ---- pull-quote band --------------------------------------------------- */
.quoteband {
  position: relative; padding: 4.6rem 0; text-align: center; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(89,191,211,.1), transparent 58%),
    linear-gradient(180deg, #0B1417, #0A1013);
}
/* the mist ridge from the mockup, drawn rather than photographed */
.quoteband::before, .quoteband::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 58%;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 100%, rgba(30,58,66,.85), transparent 62%),
              radial-gradient(ellipse at 72% 100%, rgba(22,44,51,.8), transparent 60%);
}
.quoteband::after { bottom: -12%; opacity: .6; filter: blur(6px); }
.quoteband .wrap { position: relative; z-index: 2; }
.bigquote {
  font-family: var(--serif); font-size: clamp(1.4rem, 3.4vw, 2.35rem); line-height: 1.42;
  font-weight: 500; color: var(--cream); margin: 0 auto; max-width: 23ch;
}
.attrib { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.6rem 0 0; }
.attrib-line { height: 1px; width: clamp(28px, 7vw, 74px); background: rgba(201,152,75,.5); }
.attrib-text { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--saffron); }

/* ---- cards, mockup style ----------------------------------------------- */
.card {
  background: linear-gradient(180deg, rgba(16,24,27,.9), rgba(10,15,17,.9));
  border: 1px solid rgba(201,152,75,.2); border-radius: 8px;
  padding: 1.5rem 1.4rem 3.2rem; position: relative;
}
.card:hover { border-color: rgba(201,152,75,.46); transform: none; }
.card .ic { color: var(--saffron); margin-bottom: 1rem; display: block; }
.card .ico { display: none; }
.card h3 {
  font-family: var(--serif); font-size: 1.28rem; font-weight: 600;
  color: var(--cream); margin: 0 0 .45rem; letter-spacing: 0;
}
.card p { font-size: .88rem; line-height: 1.65; color: rgba(240,230,210,.56); }
.card .go {
  position: absolute; right: 1.3rem; bottom: 1.1rem; color: var(--saffron);
  display: inline-flex; transition: transform .18s;
}
.card:hover .go { transform: translateX(4px); }

/* ---- the 108 altar ----------------------------------------------------- */
.altar108 {
  position: relative; overflow: hidden; padding: 4.6rem 0;
  background: radial-gradient(ellipse at 50% 50%, #12191C 0%, #080C0E 72%);
  border-block: 1px solid rgba(201,152,75,.14);
}
.altar108::before {              /* the teal smoke wisps */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  filter: blur(14px);
  background:
    radial-gradient(ellipse 40% 18% at 18% 72%, rgba(50,120,135,.5), transparent 70%),
    radial-gradient(ellipse 34% 14% at 84% 34%, rgba(50,120,135,.42), transparent 70%);
}
.a108 {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: 1fr 1.08fr 1fr; gap: 2.4rem; align-items: center;
}
.a108-l { border-left: 2px solid var(--saffron); padding-left: 1.5rem; }
.a108-k { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--saffron); margin: 0 0 .9rem; }
.a108-h {
  font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 600; line-height: 1.1; color: var(--cream); margin: 0;
}
.a108-p { color: rgba(240,230,210,.6); font-size: .93rem; line-height: 1.75; margin: 1.1rem 0 0; max-width: 30ch; }

.ring108 { position: relative; width: min(330px, 74vw); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.ring108 svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring108 .core {
  text-align: center; z-index: 2; width: 58%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center;
  background: radial-gradient(circle at 50% 54%, rgba(223,209,129,.16), transparent 68%);
}
.ring108 .k { font-size: .66rem; letter-spacing: .32em; text-transform: uppercase; color: rgba(240,230,210,.62); }
.ring108 .n {
  font-family: var(--serif); font-size: clamp(2.8rem, 7vw, 4.3rem); font-weight: 600; line-height: 1;
  background: var(--leaf2); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: .2rem 0;
}
.ring108 .b { font-size: .64rem; letter-spacing: .32em; text-transform: uppercase; color: rgba(240,230,210,.52); }

.a108-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; }
.a108-list li { display: flex; align-items: center; gap: .9rem; color: rgba(240,230,210,.82); font-size: .93rem; }
.a108-list .ic { color: var(--saffron); flex: none; }

/* ---- footer ------------------------------------------------------------ */
.foot { background: linear-gradient(180deg, #0A0F11, #080B0D); border-top: 1px solid rgba(201,152,75,.18); }
.foot .brand { font-size: 1.35rem; }
.foot-motto { color: rgba(240,230,210,.56); font-size: .8rem; letter-spacing: .06em; }
.foot a { color: rgba(240,230,210,.62); }
.foot a:hover { color: var(--cream); }

@media (max-width: 1000px) {
  .a108 { grid-template-columns: 1fr; gap: 2.6rem; text-align: center; }
  .a108-l { border-left: 0; border-top: 2px solid var(--saffron); padding-left: 0; padding-top: 1.2rem; }
  .a108-p { max-width: none; margin-inline: auto; }
  .a108-list { justify-items: center; }
}
@media (max-width: 900px) {
  .hero-copy { max-width: 100%; }
  .hero-bleed { inset: 0; opacity: .34; }
  .hero-bleed::after { background: linear-gradient(0deg, var(--deep) 4%, rgba(10,15,17,.6) 60%, rgba(10,15,17,.4)); }
}

.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .g4 { grid-template-columns: 1fr; } }

/* The cards became <a> elements in the revamp, so they inherited the default
   underline. The whole card is the link; the text should not look like one. */
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover h3 { color: var(--gold); }
a.card h3, a.card p { text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   FIDELITY PASS — measured against Bryan's approved mockup at its native
   1024px, band by band, rather than eyeballed.

   The revamp layer above got the composition right but ran roughly twice the
   mockup's height (3238px against 1536px at the same width), which turned a
   dense, deliberate page into a loose one. Everything here is a measurement:
   band heights, type sizes, the 40px page gutter, the four-line mantra, the
   layered mandala, the strung mala with its tassel, and the footer rail.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --gold2: #E3B65F; }

/* The mockup's page gutter is 40px, not 16px. */
.wrap { width: min(var(--wrap), calc(100% - 80px)); }
@media (max-width: 600px) { .wrap { width: calc(100% - 32px); } }

/* ---- header: 58px tall, brand all gold -------------------------------- */
.head-in { padding-block: .72rem; }
.brand { font-size: 1.62rem; letter-spacing: .005em; }
.brand .wm, .brand em { color: var(--gold2); }
.foot .brand { font-size: 1.42rem; }

.nav { gap: 0; }
.nav a { font-size: .72rem; letter-spacing: .14em; margin-inline: .92rem; padding: .42rem 0; }
.nav a:last-child { margin-right: 0; }
.nav a.on::after { bottom: 0; height: 2px; }

/* ---- hero: 400px, not 620 --------------------------------------------- */
.hero { min-height: 0; }
.hero-in { padding: 3.3rem 0 3.6rem; min-height: 342px; align-content: center; }
h1.hero-h.sacred { font-size: clamp(2.3rem, 5.2vw, 3.45rem); line-height: 1.13; }
.hero-sub { font-size: .97rem; line-height: 1.62; max-width: 36ch; margin-top: 1.15rem; }
.hero-cta { margin-top: 1.7rem; }
.hero-bleed { inset: 0 0 0 40%; }
.hero-bleed img { object-position: 52% 46%; }

/* ---- mantra band: four lines, layered mandala, two lotuses a side ----- */
.mantra-band { padding: 2.7rem 0; }
.mantra-band .rings { display: none; }          /* flat CSS rings: replaced by the SVG mandala */
.mantra-band .mandala {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(470px, 62vw); aspect-ratio: 1; pointer-events: none;
  color: var(--saffron); opacity: .5;
}
.mantra-band .mandala svg { width: 100%; height: 100%; display: block; }
/* the warm light that catches the far left and right edges of the band */
.mantra-band .edge {
  position: absolute; top: 50%; translate: 0 -50%; width: 22%; height: 60%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(217,140,54,.3), transparent 68%);
}
.mantra-band .edge.l { left: -4%; }
.mantra-band .edge.r { right: -4%; }
.mantra-band .glow { bottom: -46%; }

.mantra-row { gap: clamp(.6rem, 3vw, 2.2rem); }
.mantra { font-size: clamp(1.2rem, 2.65vw, 1.92rem); line-height: 1.21; letter-spacing: .005em; }

/* the mockup pairs a large outer lotus with a small dim one inboard */
.lotus-pair { display: inline-flex; align-items: center; gap: clamp(.5rem, 2.4vw, 1.9rem); }
.lotus-pair .sm { opacity: .42; }
@media (max-width: 820px) { .lotus-pair { display: none; } }

/* ---- pull quote: 165px, mountains drawn behind ------------------------ */
.quoteband { padding: 2.6rem 0 2.9rem; }
.quoteband::before, .quoteband::after { display: none; }
.quoteband .ridge {
  position: absolute; inset: auto 0 0; height: 78%; pointer-events: none;
  color: #1B3942; opacity: .85;
}
.quoteband .ridge svg { width: 100%; height: 100%; display: block; }
.bigquote { font-size: clamp(1.35rem, 3.1vw, 2.08rem); line-height: 1.33; max-width: 26ch; }
.attrib { margin-top: 1.15rem; }
.attrib-text { font-size: .685rem; letter-spacing: .24em; }
.quoteband .after { margin-top: 1.5rem !important; }

/* ---- cards ------------------------------------------------------------ */
.sec { padding: 2.9rem 0; }
.sec.cards { padding: 2.1rem 0 2.6rem; }
.grid.g4 { gap: 1.15rem; }
.card { padding: 1.55rem 1.4rem 2.9rem; }
.card .ic { margin-bottom: .95rem; }
.card h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.card p { font-size: .845rem; line-height: 1.6; }

/* ---- the 108 altar ---------------------------------------------------- */
.altar108 { padding: 3.2rem 0 3.6rem; }
.a108 { gap: 1.8rem; grid-template-columns: 1fr 1.12fr 1fr; }
.a108-k { font-size: .685rem; letter-spacing: .28em; margin-bottom: .75rem; }
.a108-h { font-size: clamp(1.8rem, 3.3vw, 2.6rem); }
.a108-p { font-size: .9rem; line-height: 1.68; margin-top: .95rem; }
.a108-list { gap: .85rem; }
.a108-list li { font-size: .9rem; }

/* The strung mala with its tassel. The ring is not centred in the image —
   the tassel hangs below it — so the figure sits at 51%/37%, measured off the
   gold pixels rather than assumed. */
.ring108 { width: min(330px, 74vw); aspect-ratio: 640 / 607; display: block; }
.ring108 picture { display: block; }
.ring108 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ring108 .core {
  position: absolute; left: 51%; top: 37%; translate: -50% -50%;
  width: auto; aspect-ratio: auto; background: none; display: block; z-index: 2;
}
.ring108 .core span { display: block; }
.ring108 .k, .ring108 .b { font-size: .62rem; letter-spacing: .3em; }
.ring108 .n { font-size: clamp(2.2rem, 5.4vw, 3.1rem); margin: .12rem 0; }

/* ---- the talks strip --------------------------------------------------- */
.sec.talks { padding: 2.4rem 0 3rem; }

/* ---- footer: one rail, brand | motto .......... links  icons ----------- */
.foot { padding: 1.35rem 0; }
.foot-rail { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.foot-rail .bar { width: 1px; align-self: stretch; min-height: 34px; background: rgba(201,152,75,.42); }
.foot-motto { margin: 0; font-size: .8rem; letter-spacing: .04em; white-space: nowrap; }
.foot-motto i { font-style: normal; color: var(--saffron); margin-inline: .45rem; }
.foot-rail .spacer { flex: 1 1 2rem; }
.foot-rail nav { display: flex; gap: 1.45rem; flex-wrap: wrap; }
.foot-rail nav a { font-size: .83rem; }
.foot-social { display: flex; gap: .7rem; }
.foot-social a {
  width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center;
  border: 1px solid rgba(201,152,75,.34); color: var(--saffron);
}
.foot-social a:hover { border-color: var(--saffron); background: rgba(201,152,75,.1); }
.foot-fine { margin-top: 1.15rem; font-size: .74rem; }

@media (max-width: 880px) {
  .foot-rail { gap: 1rem; }
  .foot-rail .bar, .foot-rail .spacer { display: none; }
  .foot-motto { white-space: normal; }
}

/* ---- fidelity pass, second round: four things the side-by-side showed ---- */

/* 1. Cormorant Garamond ships OLDSTYLE figures by default, so every "108" on
      the page was rendering as "1o8" — the 0 dropping below the baseline and
      the 1 shrinking to x-height. The mockup's are lining figures. */
.sacred, .bigquote, .a108-h, .ring108 .n, .mantra, .hero-h,
.sec-h, .card h3, .brand {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "tnum" 0;
}

/* 2. The gold-leaf gradient was measured for a two-line mantra. Over four
      lines its bottom stop landed mid-text, so lines three and four came out
      muddy bronze while the mockup keeps all four bright. Re-cut for the
      taller block. */
.mantra-band .mantra {
  /* background-image, NOT the background shorthand: the shorthand resets
     background-clip to border-box and the gold fills the box instead of
     the letters. */
  background-image: linear-gradient(180deg, #F9EABE 0%, #EBC673 46%, #D9A74F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 3. The ridge read as hard blue triangles. The mockup's is a low, soft,
      desaturated mist bank. */
.quoteband .ridge { height: 58%; opacity: .5; color: #15303A; filter: blur(2.5px); }

/* 4. Trim the remaining slack: every band still ran taller than the mockup's. */
.head-in { padding-block: .58rem; }
.mantra-band { padding: 2.15rem 0; }
.quoteband { padding: 2.1rem 0 2.3rem; }
.quoteband .after { margin-top: 1.25rem !important; }
.sec.cards { padding: 1.7rem 0 2.1rem; }
.altar108 { padding: 2.5rem 0 2.8rem; }
.ring108 { width: min(300px, 70vw); }
.ring108 .core { top: 36%; }
.sec.talks { padding: 2rem 0 2.6rem; }
.foot { padding: 1.15rem 0; }
.foot-fine { margin-top: .95rem; }

/* the altar's teal smoke was heaviest at the left edge; the mockup keeps it
   behind the mala */
.altar108::before {
  opacity: .38;
  background:
    radial-gradient(ellipse 30% 15% at 32% 66%, rgba(50,120,135,.45), transparent 70%),
    radial-gradient(ellipse 26% 12% at 70% 38%, rgba(50,120,135,.38), transparent 70%);
}

/* ---- fidelity pass, third round: SCALE ----------------------------------
   Measuring the stitched side-by-side rather than trusting the eye: at 1024px
   the mockup's hero headline runs 444px wide and mine ran 356; its mantra line
   runs 400px and mine ran 284; its bead ring is 320px across and mine was 234.
   The composition was right and everything in it was about a quarter too
   small, which reads as timid next to the render. These are the measured
   corrections, not new guesses. */
h1.hero-h.sacred { font-size: clamp(2.4rem, 6.4vw, 4.05rem); }
.hero-sub { font-size: 1.02rem; max-width: 38ch; }

.mantra-band .mantra { font-size: clamp(1.3rem, 3.6vw, 2.35rem); line-height: 1.24; }
.mantra-row { gap: clamp(.5rem, 2.2vw, 1.6rem); }
.mantra-band { padding: 2.4rem 0; }
.mantra-band .mandala { width: min(540px, 68vw); }

.bigquote { font-size: clamp(1.45rem, 3.5vw, 2.3rem); }

/* The mala sits larger than its band, exactly as in the render, where the
   tassel runs past the section edge. */
.ring108 { width: min(390px, 78vw); }
.altar108 { padding: 2.2rem 0 2.4rem; }
@media (max-width: 1000px) { .ring108 { width: min(330px, 74vw); } }

/* At the mockup's type size "in a Digital World" needs 435px, and the copy
   column was 46% of a 944px wrap = 434px — one pixel short, so the headline
   broke to three lines. Widened to clear it; the art still starts at 40%
   because it sits behind the copy, not beside it. */
.hero-copy { max-width: 53%; }
@media (max-width: 900px) { .hero-copy { max-width: 100%; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ATMOSPHERE — depth, bloom and slow motion.

   One rule governs everything below: a devotional site must never be busy.
   Nothing here is fast, nothing bounces, nothing demands attention. The
   recurring rhythm is a 7-second cycle, which is roughly a calm breath, and
   the page breathes on it in several places at once so the whole thing feels
   alive rather than animated.

   EVERY animation sits inside `prefers-reduced-motion: no-preference`. A
   visitor who has asked their system for stillness gets a completely static
   page — which on a site about stillness is the only defensible default.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- 1. depth: frosted chrome, deeper wells, stronger edges ------------- */
.head {
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  background: rgba(10,15,17,.72);
  box-shadow: 0 1px 0 rgba(201,152,75,.14), 0 10px 30px -18px rgba(0,0,0,.9);
}

/* a gold hairline under every band boundary, so sections read as strata */
.mantra-band, .quoteband, .altar108 { box-shadow: inset 0 1px 0 rgba(223,209,129,.12); }

/* ---- 2. the hero: light, vignette, a long slow breath ------------------- */
.hero { isolation: isolate; }
.hero-bleed::before {                       /* a shaft of light across the art */
  content: ""; position: absolute; inset: -20% -10%; z-index: 1; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(140,215,235,.1) 48%,
              rgba(240,220,170,.07) 54%, transparent 64%);
}
.hero::after {                               /* vignette, re-enabled deliberately */
  content: ""; display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 85% 70% at 62% 45%, transparent 42%, rgba(4,7,8,.62) 100%);
}
h1.hero-h.sacred { text-shadow: 0 0 58px rgba(240,230,210,.14); }
.hero-sub { text-shadow: 0 1px 12px rgba(0,0,0,.6); }

/* ---- 3. the mantra band: the centre of the page ------------------------ */
.mantra-band .mantra {
  filter: drop-shadow(0 0 26px rgba(223,172,80,.3));
  position: relative;
}
.mantra-band .mandala { opacity: .55; filter: drop-shadow(0 0 18px rgba(201,152,75,.25)); }
.lotus-mark { filter: drop-shadow(0 0 12px rgba(201,152,75,.45)); }

/* ---- 4. cards: lift, bloom, a brighter edge ---------------------------- */
.card { transition: border-color .3s, box-shadow .35s, transform .3s; }
.card::before {                               /* bloom behind the icon */
  content: ""; position: absolute; left: 1.1rem; top: 1rem; width: 72px; height: 72px;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(circle, rgba(223,172,80,.22), transparent 68%);
}
.card:hover {
  border-color: rgba(223,172,80,.6);
  box-shadow: 0 18px 44px -26px rgba(0,0,0,.95), inset 0 0 0 1px rgba(223,172,80,.1);
}
.card:hover::before { opacity: 1; }
.card .ic { transition: transform .3s, filter .3s; }
.card:hover .ic { transform: translateY(-3px); filter: drop-shadow(0 0 14px rgba(223,172,80,.55)); }

/* ---- 5. buttons: a sheen that crosses on hover ------------------------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 36%, rgba(255,255,255,.3) 50%, transparent 64%);
  transform: translateX(-130%);
}
.btn-pri { box-shadow: 0 10px 30px -14px rgba(201,138,51,.8); }
.btn-pri:hover { box-shadow: 0 14px 36px -14px rgba(223,172,80,.9); }

/* ---- 6. the altar ------------------------------------------------------ */
.altar108 .ring108 { filter: drop-shadow(0 26px 44px rgba(0,0,0,.6)); }
.ring108::before {                            /* the breath behind the mala */
  content: ""; position: absolute; left: 51%; top: 37%; translate: -50% -50%;
  width: 74%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(223,172,80,.2), transparent 66%);
}
.a108-list .ic { transition: filter .3s; }
.a108-list li:hover .ic { filter: drop-shadow(0 0 10px rgba(223,172,80,.7)); }

/* ---- 7. the ambient drone control -------------------------------------- */
.dronebtn {
  position: relative; display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  border: 1px solid rgba(201,152,75,.34); background: transparent;
  color: var(--saffron); cursor: pointer; margin-left: .55rem;
  transition: border-color .3s, box-shadow .3s, color .3s;
}
.dronebtn:hover { border-color: var(--saffron); }
.dronebtn[aria-pressed="true"] {
  color: var(--gold); border-color: rgba(223,209,129,.75);
  box-shadow: 0 0 0 4px rgba(201,152,75,.1), 0 0 18px rgba(223,172,80,.35);
}
.dronebtn svg { width: 15px; height: 15px; }
.dronebtn .off { display: none; }
.dronebtn[aria-pressed="false"] .on  { display: none; }
.dronebtn[aria-pressed="false"] .off { display: block; }

/* ---- 8. scroll reveal — the default state, before JS says otherwise ---- */
.js-reveal .reveal { opacity: 0; transform: translateY(20px); }
.js-reveal .reveal.in { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }

/* ═══ motion, only for visitors who have not asked for stillness ═══════════ */
@media (prefers-reduced-motion: no-preference) {

  /* the art breathes, very slowly */
  .hero-bleed img { animation: kev-breathe 26s ease-in-out infinite; transform-origin: 62% 48%; }
  .hero-bleed::before { animation: kev-sweep 17s ease-in-out infinite; }

  /* the mandala turns once every three minutes */
  .mantra-band .mandala svg { animation: kev-turn 180s linear infinite; }
  .mantra-band .glow { animation: kev-pulse 7s ease-in-out infinite; }
  .lotus-pair .lotus-mark { animation: kev-pulse 7s ease-in-out infinite; }
  .lotus-pair .sm { animation-delay: -3.5s; }

  /* a shimmer crossing the mantra, once every nine seconds */
  .mantra-band .mantra::after {
    content: ""; position: absolute; inset: -10% -4%; pointer-events: none;
    background: linear-gradient(100deg, transparent 42%, rgba(255,245,215,.22) 50%, transparent 58%);
    mix-blend-mode: screen; animation: kev-shimmer 9s ease-in-out infinite;
  }

  .quoteband .ridge { animation: kev-drift 40s ease-in-out infinite; }
  .altar108::before { animation: kev-drift 54s ease-in-out infinite; }

  .ring108::before { animation: kev-pulse 7s ease-in-out infinite; }
  .ring108 img     { animation: kev-float 11s ease-in-out infinite; }

  .btn:hover::after { transition: transform .75s ease; transform: translateX(130%); }
}

@keyframes kev-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes kev-sweep   { 0%,100% { opacity: .35; transform: translateX(-7%); }
                         50%     { opacity: .9;  transform: translateX(7%); } }
@keyframes kev-turn    { to { transform: rotate(360deg); } }
@keyframes kev-pulse   { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes kev-shimmer { 0%,62%,100% { transform: translateX(-120%); } 30% { transform: translateX(120%); } }
@keyframes kev-drift   { 0%,100% { transform: translateX(-1.6%); } 50% { transform: translateX(1.6%); } }
@keyframes kev-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---- the chant player -------------------------------------------------- */
.chantbox {
  margin: 2rem auto 0; max-width: 560px; padding: 1.1rem 1.2rem;
  border: 1px solid rgba(201,152,75,.24); border-radius: 10px;
  background: linear-gradient(180deg, rgba(18,26,29,.9), rgba(10,15,17,.9));
}
.chant-head { display: flex; gap: .9rem; align-items: flex-start; text-align: left; }
.chant-ic { color: var(--saffron); flex: none; margin-top: .1rem; }
.chant-t { margin: 0; font-family: var(--serif); font-size: 1.15rem; color: var(--cream); }
.chant-s { margin: .3rem 0 0; font-size: .8rem; line-height: 1.6; color: rgba(240,230,210,.55); }
.chantbox audio { width: 100%; margin-top: .95rem; filter: invert(.92) hue-rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE LIGHT SWEEP, FIXED — and atmosphere on every page, not just the home.

   The sweep was painted with normal compositing: a translucent grey over a
   near-black photograph is just a grey bar with hard edges, which is exactly
   what it looked like. Light does not work that way. It is now SCREEN blended,
   so black stays black and only what is already lit gets brighter; blurred, so
   it has no edges at all; and masked to an ellipse, so it fades out before it
   reaches any boundary.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-bleed::before {
  inset: -35% -25%;
  background: linear-gradient(104deg,
      transparent 26%,
      rgba(150,220,245,.045) 40%,
      rgba(255,242,208,.105) 50%,
      rgba(150,220,245,.045) 60%,
      transparent 74%);
  mix-blend-mode: screen;
  filter: blur(30px);
  -webkit-mask-image: radial-gradient(ellipse 62% 74% at 56% 50%, #000 12%, transparent 76%);
          mask-image: radial-gradient(ellipse 62% 74% at 56% 50%, #000 12%, transparent 76%);
}

/* ---- the ambient layer, behind every page ------------------------------
   One fixed backdrop in head.php rather than per-page decoration: slow warm
   and cool lights that drift, a mandala turning far too slowly to notice
   directly, and a film of grain so the flat darks have texture. Sections that
   carry their own background simply cover it. */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  contain: layout paint;
}
/* content sits above it */
.head, .draft, section, main, footer, .wrap { position: relative; z-index: 1; }
.head { z-index: 20; }

.am-glow {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
}
.am-glow.a {
  width: 54vw; height: 46vw; left: -14vw; top: 8vh;
  background: radial-gradient(circle, rgba(201,152,75,.2), transparent 66%);
}
.am-glow.b {
  width: 48vw; height: 44vw; right: -12vw; bottom: 4vh;
  background: radial-gradient(circle, rgba(60,140,160,.18), transparent 66%);
}
.am-mandala {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%;
  width: min(1100px, 125vw); aspect-ratio: 1; color: var(--saffron); opacity: .07;
}
.am-mandala svg { width: 100%; height: 100%; display: block; }

/* a film of grain, drawn not downloaded */
.am-grain {
  position: absolute; inset: -50%; opacity: .035; pointer-events: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- make every page feel like the home page --------------------------- */

/* the ornamental rules gain the same glow as the lotuses */
.rule span { filter: drop-shadow(0 0 10px rgba(201,152,75,.55)); }

/* section eyebrows and headings get the leaf treatment consistently */
.sec-k { text-shadow: 0 0 18px rgba(201,152,75,.35); }
.sec-h, .hero-h { text-shadow: 0 0 44px rgba(240,230,210,.1); }

/* inner pages have a hero too — give it the same vignette the home page has */
.sec.altar { position: relative; overflow: hidden; }
.sec.altar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(201,152,75,.09), transparent 68%);
}
.sec.altar > * { position: relative; z-index: 1; }

/* every mandala on the site, not only the one on the home page */
.sec.altar .mandala, .altar .mandala {
  background: repeating-radial-gradient(circle, transparent 0 13px, rgba(201,152,75,.14) 13px 14px);
  -webkit-mask-image: radial-gradient(circle, #000 26%, transparent 70%);
          mask-image: radial-gradient(circle, #000 26%, transparent 70%);
  position: absolute; aspect-ratio: 1; pointer-events: none; opacity: .5;
}

@media (prefers-reduced-motion: no-preference) {
  .am-glow.a    { animation: kev-wander 46s ease-in-out infinite; }
  .am-glow.b    { animation: kev-wander 58s ease-in-out infinite reverse; }
  .am-mandala svg { animation: kev-turn 420s linear infinite; }
  .ambient      { animation: kev-pulse 11s ease-in-out infinite; }
}

@keyframes kev-wander {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(5vw, -4vh, 0) scale(1.1); }
  66%      { transform: translate3d(-3vw, 5vh, 0) scale(.94); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE LIGHT SWEEP, PROPERLY — two separate bugs, both of which Bryan saw as
   "a grey bar that doesn't blend into the image".

   1. IT WAS LEAKING OUT OF THE HERO. `overflow: hidden` on .hero-bleed did not
      hold it: Chrome promotes a blurred, blend-mode element onto its own
      compositing layer and the ancestor's overflow clip stopped applying, so
      the gleam painted on down across the mantra band as a pale panel with
      hard edges. clip-path is a geometric clip that survives that promotion.

   2. SCREEN BLENDING IS STILL GREY OVER BLACK. screen(black, 10% white) is
      10% white — so across the dark half of the art the "light" was simply a
      grey wash. Light does not add itself to shadow; it brightens what is
      already lit. OVERLAY does exactly that: the darks stay black and the
      figure and the monitors catch the shaft. Because overlay attenuates, the
      gradient is cut much brighter than it would be for screen.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero, .hero-bleed { clip-path: inset(0); }

.hero-bleed::before {
  inset: -10% -14%;
  filter: blur(34px);
  mix-blend-mode: overlay;
  background: linear-gradient(104deg,
      transparent 26%,
      rgba(190,235,255,.30) 42%,
      rgba(255,248,225,.62) 50%,
      rgba(190,235,255,.30) 60%,
      transparent 74%);
}

/* The band edge glows were the other soft spot: a radial gradient in a wide
   box reads as a smudge. Smaller, rounder, dimmer. */
.mantra-band .edge { width: 16%; height: 46%; opacity: .75; filter: blur(12px); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE MANTRA SHIMMER — the same mistake as the hero sweep, one layer down.

   It was a screen-blended BOX laid over the band. Over a dark background
   screen() is just a pale wash, and the gradient's stops were tight enough
   (42% -> 50% -> 58%) that the band's own edge read as a hard diagonal line
   straight across the mandala.

   The fix is to stop overlaying anything at all. The mantra is already painted
   with a gold gradient clipped to the letterforms, so the shimmer belongs IN
   that fill: widen the gradient, put a bright band inside it, and slide it
   across. It can only ever paint inside the letters — there is no box to have
   an edge, and nothing is composited over the mandala.
   ═══════════════════════════════════════════════════════════════════════════ */

.mantra-band .mantra::after { display: none !important; }

.mantra, .mantra-band .mantra {
  background-image: linear-gradient(104deg,
      #C2933F  0%,  #DCAF57 16%,  #F2DCA4 32%,
      #FFFBEF 41%,  #F2DCA4 50%,  #DCAF57 68%,  #C2933F 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .mantra, .mantra-band .mantra { animation: kev-leaf 11s ease-in-out infinite; }
}
@keyframes kev-leaf {
  0%, 12%   { background-position: 100% 0; }
  58%, 100% { background-position: 0% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — THE LAST WORD. This block must stay at the end of the file.

   A media query does not beat source order. Every layer added above
   (revamp -> fidelity -> scale -> atmosphere) re-declared desktop values at
   top level, AFTER the mobile media queries, at equal specificity — so the
   later rule won at every width and the mobile rules silently stopped
   applying. An audit of the whole stylesheet found nine such pairs. The two
   that actually broke something:

     .a108  grid-template-columns   the 108 section stayed THREE columns on a
                                    phone: the heading squeezed to 76px, one
                                    word per line, and the list pushed clean
                                    off the right edge.
     .nav a padding                 drawer links fell to 32px tall, under the
                                    44px minimum for a tap target.

   Re-asserted here, last, so nothing above can win. Anything added after this
   block has to respect it or repeat it.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .a108 { grid-template-columns: 1fr; gap: 2.4rem; text-align: center; }
  .a108-l { border-left: 0; border-top: 2px solid var(--saffron);
            padding-left: 0; padding-top: 1.2rem; }
  .a108-p { max-width: none; margin-inline: auto; }
  /* inline-grid so the ticks centre as a block but stay left-aligned to each other */
  .a108-list { display: inline-grid; justify-items: start; text-align: left; }
  .ring108 { width: min(330px, 74vw); margin-inline: auto; }
}

@media (max-width: 900px) {
  /* on a phone the art goes full width behind the copy and drops back, rather
     than sitting in the right-hand 60% where there is no room for it */
  .hero-bleed { inset: 0; opacity: .34; }
  .hero-bleed::after {
    background: linear-gradient(0deg, var(--deep) 4%, rgba(10,15,17,.6) 60%, rgba(10,15,17,.4));
  }
  .hero-copy { max-width: 100%; }
}

@media (max-width: 720px) {
  /* The drawer is position:fixed but the header's backdrop-filter makes it a
     containing block, so `inset: 68px 0 auto` is measured from the header, not
     the viewport. That is why it lands flush under the bar even with the draft
     banner pushing everything down. Do not remove the backdrop-filter without
     re-checking this. */
  .nav { gap: .15rem; }
  .nav a {
    padding: .85rem .7rem;       /* 44px+ tap target */
    margin-inline: 0;
    font-size: .8rem;
    letter-spacing: .12em;
  }
  .nav a.on::after { left: .7rem; right: auto; width: 1.6rem; }
}

@media (max-width: 560px) {
  .ring108 { width: min(276px, 76vw); }
}