/* ─────────────────────────────────────────────────────────────────────────────
   matri.au — the whole site's stylesheet.
   Extracted 10 Oct 2026 on Julia's word. Until then each of the three pages carried
   its own copy of this sheet, so every CSS change was three edits — the cost of the
   page split, and how the sheets drifted (about_matri had the reading pane, the other
   two did not). This file is the superset; nothing was dropped.
   ⚠ Linked with ?v=<date>. BUMP THAT STRING when you change this file, or browsers
     will keep serving the old one.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  /* Julia, 19 Oct 2026: "make width CONSISTENT all along". The three #home rows
     ran 880 / 1040 / 760. One token now governs all three — change it here, not
     in three places. */
  --row:880px;

  --red:#c80909;
  --gold:#E5B400;
  --black:#000;
  --ink:#111;
  --muted:#555;
  --rule:rgba(17,17,17,.15);
  --max:1100px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
    
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
    
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#fff;
  color:var(--muted);
  line-height:1.5;
  font-size:14px;
  overflow-x:hidden;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

/* --- Typography --- */

h2{
  font-weight:500;
  letter-spacing:.04em;
  margin:0 0 16px;
  font-size:24px;
  color:var(--ink);
}

h3{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:8px 0 8px;
  font-weight:400;
  color:var(--ink);
}
    
p{
  max-width:none;
  margin:0 0 12px;
  font-size:14px;
}

.lead{
  font-size:18px;
  color:var(--ink);
}

.kicker{
  background:var(--gold);
  color:var(--black);
  border-top:4px solid var(--red);
  max-width:none;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:700;
  padding:14px 0;
  margin:30px calc(50% - 50vw) 24px;
  text-indent:max(24px, calc(50vw - 526px));
}

#watch{
  padding-top:0;
}

#watch .kicker{
  margin-top:0;
}

/* --- Listen (podcast section) --- */

/* Full Yoga Nidra "TV screen" in the Watch section */
.yn-tv{
  margin:0;
  width:100%;
}

/* Yoga Nidra row title — inherits h2 style, centered */
.yn-row-title{
  text-align:center;
  margin:40px auto 24px;
  max-width:none;
}

/* Yoga Nidra: two stacked single-column rows — the vertical promo ABOVE the
   full-width TV. Width matches the carousels above (3 tiles + gaps + gutters)
   so the whole Watch section reads as one centred column on every screen. */
.yn-row{
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  gap:26px;
  width:100%;
  max-width:calc(clamp(92px, 24vw, 179px) * 3 + clamp(10px, 2vw, 16px) * 2 + clamp(10px, 4vw, 48px) * 2);
  margin:0 auto;
}

.yn-promo{
  position:relative;
  width:clamp(150px, 46vw, 200px);
  aspect-ratio:9 / 16;
  background:#000;
  border-radius:8px;
  overflow:hidden;
}

.yn-promo iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.yn-row .yn-tv{
  width:100%;
}

.yn-tv-screen{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#000;
  border:10px solid var(--gold);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 0 0 2px rgba(0,0,0,.4);
  overflow:hidden;
}

.yn-tv-screen iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.yn-tv-caption{
  font-size:13px;
  color:var(--muted);
  font-style:italic;
  text-align:center;
  margin:14px auto 0;
  max-width:440px;
}

.podcast-embed{
  margin:24px 0 0;
  border-radius:8px;
  overflow:hidden;
}

.podcast-embed iframe{
  width:100%;
  height:393px;
  border:0;
  display:block;
}

/* THE SPINE — Spotify audiobook player, under the RSS show */
.spotify-embed{
  margin:26px 0 0;
  border-radius:12px;
  overflow:hidden;
}
.spotify-embed iframe{
  width:100%;
  height:352px;
  border:0;
  display:block;
}
.spotify-lead{
  margin:26px 0 0;
  font-size:14px;
  letter-spacing:.02em;
}
.spotify-lead strong{
  color:var(--gold);
}

/* --- Read (article feed) --- */

.rd-wrap{
  margin-top:20px;
}

.rd-list{
  border-top:1px solid var(--rule);
}

.rd-row{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-bottom:1px solid var(--rule);
  padding:8px 4px;
  cursor:pointer;
  font:inherit;
  color:inherit;
  transition:background .12s ease;
}

.rd-row:hover{
  background:rgba(229,180,0,0.07);
}

.rd-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.rd-title{
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rd-slug{
  font-size:10px;
  color:var(--muted);
  opacity:.7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rd-date{
  flex:0 0 auto;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}

.rd-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:16px;
}

.rd-pg-btn{
  background:none;
  border:1px solid var(--rule);
  border-radius:4px;
  padding:6px 14px;
  font-size:12px;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .12s ease, color .12s ease;
}

.rd-pg-btn:hover:not(:disabled){
  border-color:var(--red);
  color:var(--red);
}

.rd-pg-btn:disabled{
  opacity:.35;
  cursor:default;
}

.rd-pg-info{
  font-size:12px;
  color:var(--muted);
  min-width:110px;
  text-align:center;
}

/* Read — modal preview */
.rd-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.6);
  padding:4vh 4vw;
}

.rd-modal.active{
  display:block;
}/* ================= BOOKS — the first door ==================================
   Same construction as #listen: full-bleed black band, kicker flush to the
   page gutter, inner column at --max. It sits ABOVE Watch, so no top margin.
   Julia, 8 Sep 2026: "The BOOKS door background must be entirely black, as in
   LISTEN", and THE SPINE shows inline here — its pop-up is gone.
   ========================================================================= */
/* Julia, 19 Oct 2026: "the page is messy ... background". #shop had NO SECTION RULE AT ALL,
   so /shop lost the black field, the full bleed and the white text that #home has, and every
   inner twin I added was sitting on the wrong ground. My twin audit missed it because I
   filtered to selectors containing a class and this one is the bare id. ⛔ A section rule is
   the FIRST thing to twin, not the last — everything inside inherits from it. */
#home {
  background:var(--black);
  margin:0 calc(50% - 50vw);
  padding:0 0 48px;
  color:#fff;
}
#shop {
  background:var(--black);
  margin:0 calc(50% - 50vw);
  padding:0 0 48px;
  color:#fff;
}#home .kicker, #shop .kicker { margin:0 0 26px 0; padding:14px 0; text-indent:max(24px, calc(50vw - 526px)); }#home .books-inner, #shop .books-inner { padding:0 24px; max-width:var(--max); margin:0 auto; box-sizing:border-box; }#home .books-lead, #shop .books-lead { color:#e9e3d7; margin:0 0 6px; }#home .books-lead strong, #shop .books-lead strong { color:var(--gold); font-weight:700; }/* the launch strips — full bleed, exactly the .spine-bleed formula */
#home .book-bleed { margin:26px calc(50% - 50vw); background:#000; line-height:0; }#home .book-bleed img, #shop .book-bleed img { width:100%; height:auto; display:block; }
.doors a.door-books{ color:var(--gold); }
.doors a.door-books:hover{ color:#fff; }/* ---- the MEGHA film: full bleed, straight under the BOOKS band ----------
   Autoplay is MUTED because every browser blocks sound without a gesture —
   so the sound lives behind one button. The recording is quiet, so unmuting
   routes it through a gain node rather than asking for a re-export.
   The file only downloads when the band scrolls into view. */
/* Julia, 19 Oct 2026: the poster was "climbing on top of the video". Measured gap was 0 --
   .books-poster ends exactly where .film begins, and the poster image's 0 20px 56px shadow
   fell straight onto the black band. The cause is not the poster: every block in #home owns
   its own TOP spacing (poster 52px, foreword 40px, book-bleed 26px) and .film had margin-top:0,
   which was right only while the menu box sat above it. The box moved to /shop on 18 Oct and
   took the gap with it. 52px matches the section rhythm. */
#home .film { position:relative; margin:52px calc(50% - 50vw) 34px; background:#000; line-height:0; }#home .film video, #shop .film video { width:100%; height:auto; display:block; }#home .film-sound, #shop .film-sound {
  position:absolute; right:clamp(14px,3vw,34px); bottom:clamp(14px,3vw,34px);
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.5); border:2px solid var(--gold);
  display:grid; place-items:center; padding:0; line-height:0;
  transition:transform .16s ease, background .16s ease;
}#home .film-sound:hover, #shop .film-sound:hover { transform:scale(1.08); background:rgba(0,0,0,.78); }#home .film-sound svg, #shop .film-sound svg { width:22px; height:22px; fill:var(--gold); display:block; }#home .film-sound .ico-on, #shop .film-sound .ico-on { display:none; }#home .film.is-loud .film-sound .ico-off, #shop .film.is-loud .film-sound .ico-off { display:none; }#home .film.is-loud .film-sound .ico-on, #shop .film.is-loud .film-sound .ico-on { display:block; }

/* ---- the hinge: the one sentence that sells all four -------------------- */
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }/* the hinge is now two columns: Matri on the left, the sentence on the right.
   ⭐ The glow is LIT FROM UNDERNEATH, as Julia asked — a gold pool sitting under the
   circle plus a downward-cast gold shadow, so the light reads as coming up off the page
   rather than ringing the portrait. */
/* Julia, 19 Oct 2026: the two squares moved INTO the right column, beside the portrait.
   align-items is START, not centre — she asked for top alignment — and the room widens from
   900 to 1040 because the column now carries images, not just a sentence. */
#home .books-hinge {
  display:grid; grid-template-columns:200px 1fr; gap:36px; align-items:start;
  text-align:left; margin:6px auto 38px; max-width:var(--row);
}
/* 700, not 1040: at half size the pair is 196+18+196 = 410px, and a 1040 room left a
   third of the row empty to their right — the same dead space Julia flagged on /shop.
   880 is the balance: the headline still holds one line, the pair sits under the text
   without a third of the row left empty, and the row below stays pulled up. *//* ── THE TWO SQUARES BESIDE HER, AT HALF SIZE (Julia, 19 Oct 2026) ──────────
   "those blocks on the right of Matri pic are huge - text sloppy huge, make it
   thin and tidy ... 50% of their size so they pull up." Every number below is
   about half of what the full-width pair carries, and the whole block is scoped
   to .hinge-words so the pair keeps its original size anywhere else it is used.
   ⭐ The real space thief was .snip-line{min-height:4.6em} — it reserved five
   lines of room whether or not the words were there. Released here. */
#home .hinge-words .books-pair{
  margin-top:22px; gap:18px;
  grid-template-columns:repeat(2, minmax(0, 248px)); justify-content:start;
}
#home .hinge-words .snip-play i{ width:48px; height:48px; border-width:2px; }
#home .hinge-words .snip-play svg{ width:18px; height:18px; }
#home .hinge-words .snip-play .ico-play{ margin-left:3px; }
#home .hinge-words .bookcard .wordmark{ margin:12px 0 7px; }
/* ⛔ THE LOGOS WERE NEVER PART OF THE 50%. Julia: "you were not supposed to decrease
   size of the spine and megha's logos - they are unreadable." Back to the original
   clamp. Shrinking the COVER does not license shrinking the wordmark on it. */
#home .hinge-words .bookcard .wordmark img{ width:clamp(104px,11vw,132px); }
#home .hinge-words .bookcard-sub{ font-size:13px; line-height:1.5; margin:0 0 10px; }
#home .hinge-words .snip-line{
  font-size:12.5px; line-height:1.55; margin:0 0 10px; min-height:0;
}
#home .hinge-words .snip-bar{ height:2px; }
#home .hinge-words .snip-meta{ font-size:11.5px; margin:8px 0 0; letter-spacing:.04em; }

/* the sentence above them is the headline act; the cards are not. Keep the lead
   text from running the full 740px — it read as sprawl at that measure. */
#home .hinge-words > p{ max-width:62ch; }

/* ⛔ THE SAME CASCADE TRAP AS /shop, CAUGHT AT 375 BEFORE IT SHIPPED. The pair stacks
   to one column in @media (max-width:820px) EARLIER in this sheet, but the rules above
   are more specific, so they won on a phone too: two 155px cards with 11px text under
   them. Half size is right beside the portrait and wrong on a 375px screen, where the
   cards have the whole width to themselves. Below 820 the originals are restored. */
@media (max-width:820px){
  #home .hinge-words .books-pair{ grid-template-columns:1fr; gap:34px; }
  #home .hinge-words .snip-play i{ width:74px; height:74px; border-width:2px; }
  #home .hinge-words .snip-play svg{ width:26px; height:26px; }
  #home .hinge-words .snip-play .ico-play{ margin-left:5px; }
  #home .hinge-words .bookcard .wordmark{ margin:16px 0 8px; }
  #home .hinge-words .bookcard .wordmark img{ width:clamp(104px,11vw,132px); }
  #home .hinge-words .bookcard-sub{ font-size:14.5px; line-height:1.5; margin:0 0 16px; }
  #home .hinge-words .snip-line{ font-size:14px; line-height:1.6; margin:0 0 14px; }
  #home .hinge-words .snip-bar{ height:3px; }
  #home .hinge-words .snip-meta{ font-size:12.5px; margin:10px 0 0; }
}

/* ── the 30 / 70 row: foreword left, audiobook + Spotify right ──────────────
   3fr/7fr rather than 30%/70%, so the 38px gap cannot push the pair past 100%.
   The foreword button is centred and 860px-capped when it stands alone; inside
   a narrow column both of those have to go. */
#home .books-duo {
  /* Julia, 19 Oct 2026: SWAPPED — the player holds the wide column now, the
     foreword the narrow one. The HTML order was swapped with it, so what a
     screen reader hears matches what the eye sees. */
  display:grid; grid-template-columns:7fr 3fr; gap:38px; align-items:start;
  max-width:var(--row); margin:40px auto 0;
}
#home .books-duo .books-foreword { max-width:none; margin:0; text-align:left; }
#home .books-duo .spotify-lead { margin:0; }
@media (max-width:760px){
  #home .books-duo { grid-template-columns:1fr; gap:30px; }
  #home .books-duo .books-foreword { text-align:center; }
}#home .hinge-portrait, #shop .hinge-portrait { position:relative; width:200px; }#home .hinge-portrait img, #shop .hinge-portrait img {
  width:200px; height:auto; display:block; border-radius:50%;
  position:relative; z-index:1;
  box-shadow:0 8px 17px -5px rgba(229,180,0,.50), 0 4px 14px rgba(0,0,0,.55);
}#home .hinge-portrait::after, #shop .hinge-portrait::after {          /* the pool of light under her */
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:50%; bottom:-10px; transform:translateX(-50%);
  width:39%; height:20px; border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(229,180,0,.55) 0%, rgba(229,180,0,.24) 42%, rgba(229,180,0,0) 72%);
  filter:blur(6px);
}
@media (max-width:760px){#home .books-hinge, #shop .books-hinge { grid-template-columns:1fr; justify-items:center; text-align:center; gap:26px; }#home .hinge-portrait, #shop .hinge-portrait, #home .hinge-portrait img, #shop .hinge-portrait img { width:168px; }#home .books-hinge p, #shop .books-hinge p { margin-left:auto; margin-right:auto; }
}#home .books-hinge h2, #shop .books-hinge h2 {
  font-size:clamp(26px,4.4vw,46px); line-height:1.12; letter-spacing:.01em;
  color:var(--gold); margin:0 0 14px; font-weight:700;
}#home .books-hinge p, #shop .books-hinge p { color:#e2dbcd; font-size:clamp(15px,1.7vw,18px); line-height:1.55; margin:0; }#home .books-hinge strong, #shop .books-hinge strong { color:#fff; font-weight:700; }

/* ---- the pair. Two squares, side by side, nothing between them ---------- */
.books-pair{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start; }
.bookcard{ margin:0; }

/* the artwork square IS the play button.
   The panel carries a faint radial ground on purpose: both renders are black
   objects on black, and without it they vanish. Any art dropped in here sits
   on a readable field — a fix in the CSS, not in every future export. */
.snip-book{
  position:relative; display:block; width:100%; padding:0; border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(ellipse at 50% 44%, #17140f 0%, #000 72%);
  cursor:pointer; overflow:hidden;
}
.snip-book img{ width:100%; height:auto; display:block; }
/* MYST MEGHA MYTH: the three books and the one-volume novel take turns — a slow fade, back and forth (16 Sep 2026) */
.snip-book .xfade{ position:absolute; inset:0; height:100%; object-fit:cover; opacity:0; animation:xfade 14s ease-in-out infinite; }
@keyframes xfade{ 0%,36%{ opacity:0; } 50%,86%{ opacity:1; } 100%{ opacity:0; } }
/* both renders are transparent on the panel's radial ground, so the three books step back as the one book steps in */
.snip-book .xbase{ animation:xbase 14s ease-in-out infinite; }
@keyframes xbase{ 0%,36%{ opacity:1; } 50%,86%{ opacity:0; } 100%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .snip-book .xfade{ animation:none; opacity:1; } .snip-book .xbase{ animation:none; opacity:0; } }
.snip-play{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.snip-play i{
  width:74px; height:74px; border-radius:50%; background:rgba(0,0,0,.55);
  border:2px solid var(--gold); display:grid; place-items:center;
  transition:transform .16s ease, background .16s ease, opacity .2s ease;
}
.snip-book:hover .snip-play i{ transform:scale(1.08); background:rgba(0,0,0,.8); }
.snip-play svg{ width:26px; height:26px; fill:var(--gold); display:block; }
.snip-play .ico-play{ margin-left:5px; }
.snip-play .ico-pause{ display:none; }
.snip.is-playing .snip-play .ico-play{ display:none; }
.snip.is-playing .snip-play .ico-pause{ display:block; }
.snip.is-playing .snip-play i{ opacity:.35; }
.snip.is-playing .snip-book:hover .snip-play i{ opacity:1; }

/* the two marks are square on their own canvases, exactly as drawn — the air
   around each is part of the design, so cropping it made them different shapes
   and forced two different heights. Same square, one size, equal weight. */
.bookcard .wordmark{ display:block; margin:16px 0 8px; }
.bookcard .wordmark img{ display:block; width:clamp(104px,11vw,132px); height:auto; }
.bookcard-sub{ color:#b9b2a5; font-size:14.5px; line-height:1.5; margin:0 0 16px; }
.snip-line{
  font-size:clamp(13px,1.45vw,15.5px); line-height:1.62; color:#cdc6b9; font-style:italic;
  font-weight:300; letter-spacing:.005em; margin:0 0 14px; min-height:4.6em;
}
/* the words run: each lights as it is spoken. Timings inside a cue are shared
   out by word length — the .srt gives line starts, not word starts, and at this
   pace the approximation reads true. */
.snip-line .w{ color:#8e877b; transition:color .16s ease; }
.snip-line .w.on{ color:#e9e3d6; }
.snip-bar{ height:3px; background:rgba(255,255,255,.16); position:relative; }
.snip-bar i{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--gold); transition:width .2s linear; }
.snip-meta{ font-size:12.5px; color:#9d968a; margin:10px 0 16px; letter-spacing:.05em; }
.bookcard-buys{ font-size:13.5px; color:#b9b2a5; margin:0 0 16px; }
.bookcard-buys a{ color:var(--gold); }/* ── THE WHOLE-CATALOGUE POSTER AND THE SHOP LINKS UNDER IT (29 Sep 2026) ──
   Julia: "those links need to be placed under this poster and not be red
   buttons, it becomes too much - we need mustard links that are red on
   hover-on." So the poster carries the weight, and every shop is plain gold
   type that turns red under the cursor. No chrome, no boxes, no more buttons. */
#home .books-poster { max-width:1320px; margin:52px auto 0; padding:0 18px; }#home .books-poster img, #shop .books-poster img {
  display:block; width:100%; height:auto; border-radius:6px;
  box-shadow:0 20px 56px rgba(0,0,0,.6);
}/* ── THE FOREWORD (3 Oct 2026) ─────────────────────────────────────────────
   ⛔ THE TEXT IS LESLIE KINGSLEY'S AND IT IS REPRODUCED WHOLE. The foreword
   ruling (book_1_the_spine/_forewords/_RULING_forewords.md) is absolute:
   "Never trim, excerpt, reorder or edit what is given. Proofing typos is the
   only permitted touch." All 496 words are here, in his order, with his
   punctuation and his diacritics. ⭐ Only the SIZE of four passages is raised, on Julia's instruction — that is setting, not editing, and nothing is cut. */
#home .books-foreword {
  max-width:860px; margin:40px auto 0; text-align:center; cursor:pointer;
  background:none; border:none; display:block; padding:0; font:inherit;
}#home .books-foreword span, #shop .books-foreword span {
  display:block; color:var(--gold); font-weight:700; letter-spacing:.01em;
  font-size:clamp(17px,2vw,24px); line-height:1.4; transition:color .18s ease;
}#home .books-foreword i, #shop .books-foreword i { font-style:italic; }#home .books-foreword:hover span, #shop .books-foreword:hover span { color:#fff; }#home .books-foreword a, #shop .books-foreword a { color:var(--gold); border-bottom:1px solid rgba(229,180,0,.45) !important; }#home .books-foreword a:hover, #shop .books-foreword a:hover { color:var(--red); }/* ⭐ The pull-quote is Leslie's fourth paragraph, lifted VERBATIM out of the modal markup
   by script so the two can never drift apart. Italic, normal weight, no underline —
   it is the body of the link, not a link in the typographic sense. */
#home .books-foreword .fw-pull {
  display:block; max-width:none; margin:16px auto 0;
  font-style:italic; font-weight:400; font-size:15px; line-height:1.68;
  color:#cdc6b9; letter-spacing:0; text-decoration:none;
  transition:color .18s ease;
}#home .books-foreword:hover .fw-pull, #shop .books-foreword:hover .fw-pull { color:#e9e3d7; }#home .books-foreword .fw-cue, #shop .books-foreword .fw-cue {
  display:block; margin-top:9px; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:#8e877b; font-weight:600;
}#home .books-foreword:hover .fw-cue, #shop .books-foreword:hover .fw-cue { color:var(--gold); }

.fw-modal{ position:fixed; inset:0; z-index:10000; display:none; align-items:center;
  justify-content:center; background:rgba(0,0,0,.82); padding:28px 18px; }
.fw-modal.active{ display:flex; }
/* the wide frosted-glass border is the OUTER box; the charcoal panel sits inside it */
.fw-glass{
  width:min(820px,100%); max-height:90vh; display:flex; border-radius:16px;
  padding:clamp(14px,2.4vw,30px);
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.fw-panel{
  background:#17140f; border-radius:9px;
  padding:clamp(26px,3.4vw,46px); padding-right:clamp(18px,2.4vw,32px);
  overflow-y:auto; width:100%; color:#cdc6b9;
  /* a thin gold thread instead of the platform scrollbar, which sat as a bright
     grey bar against the charcoal and fought the frosted frame */
  scrollbar-width:thin; scrollbar-color:rgba(229,180,0,.34) transparent;
}
.fw-panel::-webkit-scrollbar{ width:7px; }
.fw-panel::-webkit-scrollbar-track{ background:transparent; margin:14px 0; }
.fw-panel::-webkit-scrollbar-thumb{ background:rgba(229,180,0,.30); border-radius:4px; }
.fw-panel::-webkit-scrollbar-thumb:hover{ background:rgba(229,180,0,.52); }
.fw-panel h2{ margin:0 0 4px; color:var(--gold); font-size:clamp(22px,2.6vw,30px); letter-spacing:.02em; }
.fw-by{ margin:0 0 26px !important; max-width:none !important; color:#b9b2a5; font-size:14.5px; line-height:1.55; }
.fw-by i{ font-style:italic; color:#e2dbcd; }
.fw-by a{ color:var(--gold); border-bottom:1px solid rgba(229,180,0,.4) !important; }
.fw-panel p.fw-t{ margin:0 0 17px !important; max-width:none !important;
  color:#cdc6b9; font-size:15.5px; line-height:1.72; }
.fw-panel p.fw-t:last-of-type{ margin-bottom:0 !important; }
/* ⭐ the raised passages — Julia: "play of font size, enlarged lines which are the most hot" */
.fw-panel .hot{ font-size:1.26em; line-height:1.5; color:#ece6da; }
.fw-rule{ height:1px; margin:26px 0; background:linear-gradient(90deg,
  rgba(229,180,0,0), rgba(229,180,0,.5), rgba(229,180,0,0)); }
.fw-close{
  float:right; margin:-8px -8px 0 14px; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#F4F0E6; font-size:20px; line-height:1; cursor:pointer; transition:background .18s ease;
}
.fw-close:hover{ background:rgba(255,255,255,.16); }
@media (max-width:640px){ .fw-panel p.fw-t{ font-size:15px; } .fw-panel .hot{ font-size:1.18em; } }/* ── THE MENU TABLE (3 Oct 2026) ──────────────────────────────────────────
   Julia: "a table with columns: Book name | Short description | Format |
   price AUD/US | distributor (in grey) (people need to know where they are
   redirected after click)… very faint gradient gold outline… look like a menu."
   The gold outline is a 1px gradient frame: a gradient-filled wrapper with an
   almost-black inner panel sitting on top, which is the only way to get a
   gradient *border* that still has rounded corners in every browser.
   ⚠ AUD on every IngramSpark row is GST-INCLUSIVE. Ingram adds 10% on top of
   the price set in the dashboard at checkout (54.99 set → A$60.49 shown, measured 3 Oct). The buyer must see what the buyer pays. */
#home .menu-wrap, #shop .menu-wrap {
  max-width:1096px; margin:48px auto 0; padding:1px; border-radius:10px;
  background:linear-gradient(135deg,
    rgba(229,180,0,.55) 0%, rgba(229,180,0,.07) 38%,
    rgba(229,180,0,.07) 62%, rgba(229,180,0,.45) 100%);
}#home .menu-inner, #shop .menu-inner { background:#0a0908; border-radius:9px; padding:30px 26px 26px; }#home .menu-lead, #shop .menu-lead { text-align:center; max-width:760px; margin:0 auto 26px; }
/* ⚠ The site has a global `p{ max-width:70ch; margin:0 0 12px }`. A centred paragraph inside a
   wider panel therefore sits in a LEFT-aligned 70ch box and reads as misaligned — that was the
   off-centre lead and footer. The cap is good for reading; the missing auto margins were the bug. */
#home .menu-lead p, #shop .menu-lead p { margin:0 auto 7px; max-width:none; color:#cdc6b9; font-size:15px; line-height:1.62; }#home .menu-lead p.first, #shop .menu-lead p.first { color:var(--gold); font-size:17px; font-weight:600; margin-bottom:13px; }/* each series is its own block: poster, then title + subtitle + categories, then only
   the table of what is actually buyable. Julia: "the many rows of table need split - the
   site lost style - became an excel document". */
#home .menu-block, #shop .menu-block { margin:0 0 44px; }#home .menu-block:last-of-type, #shop .menu-block:last-of-type { margin-bottom:0; }/* ⬆ Julia, 8 Oct 2026: title, categories and the paragraph align TOP, not centred.
   With a paragraph and the Look-inside strip added, the words column is now taller
   than it was, and centring it against the poster read as drifting. */
#home .mb-head, #shop .mb-head {
  display:grid; grid-template-columns:188px 1fr; gap:28px; align-items:start;
  padding-bottom:20px; border-bottom:1px solid rgba(229,180,0,.16);
}#home .mb-thumb, #shop .mb-thumb {
  width:188px; height:auto; display:block; border-radius:6px;
  box-shadow:0 12px 34px rgba(0,0,0,.65);
}#home .mb-words h3, #shop .mb-words h3 {
  margin:0 0 9px; font-size:clamp(22px,2.3vw,29px); line-height:1.15;
  color:var(--gold); letter-spacing:.03em; font-weight:700;
}#home .mb-sub, #shop .mb-sub { margin:0 0 11px; color:#e2dbcd; font-size:15px; line-height:1.55; }#home .mb-cats, #shop .mb-cats { margin:0; }#home .mb-cats em, #shop .mb-cats em { color:#fff; font-style:italic; font-size:13.5px; letter-spacing:.02em; }#home table.menu td.other, #shop table.menu td.other { font-size:12px; color:#6f6a60; }#home table.menu td.other a, #shop table.menu td.other a { color:#8e877b; border-bottom:none !important; transition:color .18s ease; }#home table.menu td.other a:hover, #shop table.menu td.other a:hover, #home table.menu td.other a:focus, #shop table.menu td.other a:focus { color:var(--gold); }/* ── THE TABLES COLLAPSE (4 Oct 2026) ─────────────────────────────────────
   Julia: "we have a lot of text tables which smell mercantile. We need to save
   space." Native <details>/<summary> — it opens with no JavaScript, it is
   keyboard-operable and screen readers announce the state, which a div-and-click
   accordion does not. ⛔ Do not replace it with one. */
#home .menu-acc { border-top:1px solid rgba(229,180,0,.14); }#home .menu-acc > summary, #shop .menu-acc > summary {
  list-style:none; cursor:pointer; display:flex; align-items:baseline;
  gap:16px; padding:17px 30px 17px 0; position:relative;
}#home .menu-acc > summary::-webkit-details-marker, #shop .menu-acc > summary::-webkit-details-marker { display:none; }#home .menu-acc > summary .acc-cap, #shop .menu-acc > summary .acc-cap {
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); font-weight:700; line-height:1.5;
}#home .menu-acc > summary .acc-cue, #shop .menu-acc > summary .acc-cue {
  margin-left:auto; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:#6f6a60; font-weight:600; white-space:nowrap; transition:color .18s ease;
}#home .menu-acc > summary::after, #shop .menu-acc > summary::after {            /* the chevron */
  content:''; position:absolute; right:4px; top:50%;
  width:8px; height:8px; margin-top:-6px;
  border-right:1.5px solid #8e877b; border-bottom:1.5px solid #8e877b;
  transform:rotate(45deg); transition:transform .22s ease, border-color .18s ease;
}#home .menu-acc[open] > summary::after, #shop .menu-acc[open] > summary::after { transform:rotate(-135deg); margin-top:-2px; }#home .menu-acc > summary:hover .acc-cue, #shop .menu-acc > summary:hover .acc-cue, #home .menu-acc > summary:focus-visible .acc-cue, #shop .menu-acc > summary:focus-visible .acc-cue { color:var(--gold); }#home .menu-acc > summary:hover::after, #shop .menu-acc > summary:hover::after { border-color:var(--gold); }
@media (max-width:620px){/* on a phone the caption wraps to three lines and the right-aligned cue floated
     beside its first line. Stack them: caption, then the cue beneath it. */
  #home .menu-acc > summary { flex-wrap:wrap; gap:7px; padding-right:26px; }#home .menu-acc > summary .acc-cap, #shop .menu-acc > summary .acc-cap { width:100%; letter-spacing:.17em; }#home .menu-acc > summary .acc-cue, #shop .menu-acc > summary .acc-cue { margin-left:0; }#home .menu-acc > summary::after, #shop .menu-acc > summary::after { top:auto; bottom:22px; margin-top:0; }#home .menu-acc[open] > summary::after, #shop .menu-acc[open] > summary::after { margin-top:0; bottom:18px; }
}#home .menu-acc > table, #shop .menu-acc > table { margin-bottom:18px; }#home .menu-block .menu-acc + .menu-acc, #shop .menu-block .menu-acc + .menu-acc { margin-top:0; }#home table.menu, #shop table.menu { width:100%; border-collapse:collapse; }#home table.menu caption, #shop table.menu caption {
  caption-side:top; text-align:left; padding:16px 0 8px;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); font-weight:700;
}#home table.menu th, #shop table.menu th {
  text-align:left; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:#6f6a60; font-weight:600; padding:0 10px 8px 0; border-bottom:1px solid rgba(229,180,0,.18);
}#home table.menu th.num, #shop table.menu th.num, #home table.menu td.num, #shop table.menu td.num { text-align:right; white-space:nowrap; }#home table.menu td, #shop table.menu td {
  padding:11px 10px 11px 0; border-bottom:1px solid rgba(255,255,255,.055);
  font-size:14px; color:#e2dbcd; vertical-align:top;
}#home table.menu tr:last-child td, #shop table.menu tr:last-child td { border-bottom:none; }#home table.menu td.title a, #shop table.menu td.title a { color:var(--gold); border-bottom:none !important; font-weight:600; transition:color .18s ease; }#home table.menu td.title a:hover, #shop table.menu td.title a:hover, #home table.menu td.title a:focus, #shop table.menu td.title a:focus { color:var(--red); }#home table.menu td.desc, #shop table.menu td.desc { color:#9d968a; font-size:13.5px; }#home table.menu td.fmt, #shop table.menu td.fmt { color:#b9b2a5; font-size:12.5px; white-space:nowrap; }#home table.menu td.who, #shop table.menu td.who { color:#6f6a60; font-size:12px; white-space:nowrap; }
.trade-link{ color:var(--gold); font-weight:700; letter-spacing:.14em; font-size:11px;
  text-transform:uppercase; border-bottom:1px solid rgba(229,180,0,.45) !important;
  transition:color .18s ease; white-space:nowrap; }
.trade-link:hover, .trade-link:focus{ color:var(--red); }#home .menu-foot, #shop .menu-foot { margin:22px auto 0; max-width:none; font-size:12px; color:#6f6a60; text-align:center; line-height:1.6; }

@media (max-width:860px){/* the table becomes a stack of cards: every cell keeps its own label */
  /* ⛔ NO calc(50% - 50vw) BLEED HERE. #home is already full-bleed, and bleeding a child of
     .books-inner a second time widened the section enough to blow out the film's own
     calc(50% - 50vw) — the video rendered 1600px wide and the whole page scrolled sideways on a
     phone. Narrow the padding instead; the panel stays inside its parent. */
  #home .menu-inner, #shop .menu-inner { padding:24px 14px; }/* ⚠ NOT left:-9999px — a negative offset extends the document's scroll width and gave the
     whole page a horizontal scrollbar on a phone. Clip it in place instead. */
  #home table.menu thead {
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }#home table.menu tr, #shop table.menu tr { display:block; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.07); }#home table.menu td, #shop table.menu td { display:block; border:none; padding:2px 0; text-align:left; }#home table.menu td.num, #shop table.menu td.num { text-align:left; display:inline-block; margin-right:16px; }#home table.menu td.fmt::before, #shop table.menu td.fmt::before { content:'Format — '; color:#6f6a60; }#home .mb-head, #shop .mb-head { grid-template-columns:1fr; justify-items:center; text-align:center; gap:18px; }#home .mb-thumb, #shop .mb-thumb { width:168px; }#home table.menu td.who::before, #shop table.menu td.who::before { content:'Buy at '; }#home table.menu td.other:not(:empty)::before, #shop table.menu td.other:not(:empty)::before { content:'Also at '; }
}/* ── BOOKSHOP.ORG AFFILIATE GRID (2 Oct 2026) ──
   Julia's own widget snippets, unaltered, laid out as a grid. ⛔ Keep the
   <script> tags rather than hand-writing the <iframe> they inject: the script
   owns the sizing, the ResizeObserver and the widget URL, so if Bookshop change
   any of them the page follows. A hardcoded iframe would rot silently.

   What the script does: it injects, in place, a centred <div> holding an
   <iframe> pointed at /widgets/book/book/129265/<isbn>. Below 450px of cell
   width the frame is a fixed 320x240 with a white ground and a 1px #e1e1e3
   border; at 450px or more it becomes 450x268. The cells below are sized to
   land in the 320 band, so the nine cards match. */
#home .books-shop { max-width:1120px; margin:46px auto 0; padding:0 18px; text-align:center; }#home .books-shop h3, #shop .books-shop h3 {
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:#8e877b; font-weight:600; margin:0 0 6px;
}#home .books-shop .shop-note, #shop .books-shop .shop-note {
  font-size:12.5px; color:#8e877b; margin:0 auto 24px; max-width:620px; line-height:1.6;
}#home .books-shop .shop-note a, #shop .books-shop .shop-note a { color:var(--gold); border-bottom:none !important; transition:color .18s ease; }#home .books-shop .shop-note a:hover, #shop .books-shop .shop-note a:hover, #home .books-shop .shop-note a:focus, #shop .books-shop .shop-note a:focus { color:var(--red); }#home .books-shop-grid, #shop .books-shop-grid { text-align:center; max-width:1056px; margin:0 auto; }#home .books-shop-grid p, #shop .books-shop-grid p { margin:0; }#home .books-shop-grid iframe, #shop .books-shop-grid iframe { border-radius:4px; }#home .books-links, #shop .books-links { max-width:1120px; margin:34px auto 0; padding:0 18px; text-align:center; }#home .books-links h3, #shop .books-links h3 {
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:#8e877b; font-weight:600; margin:0 0 22px;
}/* label column right-aligned against a left-aligned run of links, so a row that
   wraps lines up under its own first link instead of drifting to centre */
#home .books-links p {
  display:grid; grid-template-columns:202px 1fr; gap:0 18px;
  align-items:baseline; text-align:left;
  max-width:1096px; margin:0 auto 16px; line-height:2.05;
}#home .books-links .bl-label, #shop .books-links .bl-label {
  text-align:right;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:#b9b2a5; font-weight:700;
}#home .books-links a, #shop .books-links a {
  color:var(--gold); font-size:14.5px; letter-spacing:.03em;
  white-space:nowrap; border-bottom:none !important;
  transition:color .18s ease;
}#home .books-links a:hover, #shop .books-links a:hover, #home .books-links a:focus, #shop .books-links a:focus { color:var(--red); }#home .books-links .sep, #shop .books-links .sep { color:#5b554b; margin:0 8px; }
/* the three trade-catalogue links sat glued together — 8 Oct 2026 */
a.trade-link{ white-space:nowrap; }
a.trade-link + span.sep{ color:#5b554b; margin:0 12px; }
span.sep + a.trade-link{ margin-left:0; }

@media (max-width:820px){
  .books-pair{ grid-template-columns:1fr; gap:44px; }
  .snip-book{ max-width:420px; margin:0 auto; }/* ⚠ The Bookshop frame is a FIXED 320px wide and carries scrolling="no", so a
     cell narrower than 320 CLIPS it — "POWERED BY Bookshop.org" loses its last
     letters rather than scrolling. .books-inner's padding left only 291px at
     375px of viewport, so here the grid breaks out to the full width with a
     10px gutter: 355px at 375, and still 320+ on any phone down to 340px. */
  #home .books-shop {
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:0 10px;
  }#home .books-shop .shop-note, #shop .books-shop .shop-note { padding:0 14px; }#home .books-links p, #shop .books-links p {
    display:block; text-align:center; margin-bottom:22px;
  }#home .books-links .bl-label, #shop .books-links .bl-label { display:block; text-align:center; margin:0 0 2px; }/* keep nowrap on phones too: a shop name must never break across lines
     ("Amazon / Australia", "Lulu - / hardcover"). The longest, "Book One - every
     ebook shop", still fits inside 375px minus the gutters. */
  #home .books-links a { white-space:nowrap; }
}

/* ── the build-log door — same bleed formula as .spine-bleed, type instead of image ── */
.shakti-bleed{
  margin:18px calc(50% - 50vw) 30px;
  background:#08070A;
  border-top:4px solid var(--red);
}
.shakti-bleed a{
  display:block;text-decoration:none;color:inherit;
  padding:clamp(26px,4vw,44px) max(24px, calc(50vw - 526px));
  transition:background .18s ease;
}
.shakti-bleed a:hover{background:#0F0D12}
.shakti-bleed a:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.sb-eyebrow{
  margin:0 0 clamp(12px,2vw,18px);font-size:11px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
}
.sb-num{
  margin:0;line-height:.92;letter-spacing:-.02em;color:#F4F0E6;
  font-size:clamp(38px,7.4vw,86px);font-weight:400;
}
.sb-num .d{color:var(--red);font-size:.5em;vertical-align:.16em;margin:0 .12em}
.sb-num .one{color:var(--gold)}
.sb-copy{
  margin:clamp(14px,2vw,20px) 0 0;max-width:none;
  font-size:clamp(14px,1.5vw,16.5px);line-height:1.5;color:#CFC9BD;
}
.sb-cta{
  margin:clamp(16px,2vw,22px) 0 0;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.shakti-bleed a:hover .sb-cta{color:#fff}
@media (prefers-reduced-motion:reduce){.shakti-bleed a{transition:none}}

/* directly under a door strip: butt the two bands together, no gap */
.kicker + .spine-bleed{
  margin-top:calc(-1 * 24px);
}
.spine-bleed a{
  display:block;
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;          /* matches .wrap, so the promo lines up with the article list */
  box-sizing:border-box;
}
.spine-bleed img{
  display:block;
  width:100%;
  height:auto;
}
.doors a.door-spine{
  color:var(--gold);
}
.doors a.door-spine:hover{
  color:#fff;
}
.doors a.door-roerich{
  color:#fff;
}
.doors a.door-roerich:hover{
  color:var(--gold);
}
/* --- N. ROERICH — the plate viewer, opened in a popup over the page --- */
.roerich-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:#000;
}
.roerich-modal.active{
  display:block;
}
.roerich-modal iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.roerich-modal-x{
  position:absolute;
  top:14px;
  right:18px;
  z-index:2;
  background:rgba(0,0,0,.55);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  width:38px;
  height:38px;
  border-radius:50%;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.roerich-modal-x:hover{
  background:#fff;
  color:#000;
}
.spine-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.88);
  padding:4vh 4vw;
}
.spine-modal.active{
  display:flex;
  align-items:center;
  justify-content:center;
}
.spine-modal-inner{
  position:relative;
  width:min(1400px, 92vw);
  text-align:center;
}
.spine-modal-inner img{
  display:block;
  width:100%;
  height:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.spine-modal-cta{
  display:inline-block;
  margin-top:22px;
  background:var(--gold);
  color:#000 !important;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  padding:14px 30px;
  text-decoration:none;
}
.spine-modal-cta:hover{
  background:#fff;
}
.spine-modal-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.spine-modal-cta.alt{
  background:transparent;
  color:var(--gold) !important;
  border:1px solid rgba(229,180,0,.55);
}
.spine-modal-cta.alt:hover{
  background:rgba(229,180,0,.12);
}
.spine-modal-note{
  margin:14px 0 0;
  font-size:12px;
  color:rgba(255,255,255,.6);
}
.spine-modal-note a{
  color:var(--gold);
}
.spine-modal-x{
  position:absolute;
  top:-56px;
  right:0;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-size:20px;
  line-height:1;
  width:44px;
  height:44px;
  border-radius:50%;
  cursor:pointer;
  transition:background .15s ease;
}
.spine-modal-x:hover{
  background:var(--red);
  border-color:var(--red);
}
@media (max-width:640px){
  .spine-modal-x{top:-52px;}
}

/* Vertical video modal (series shorts) */
.vid-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.82);
  padding:4vh 4vw;
}
.vid-modal.active{
  display:flex;
  align-items:center;
  justify-content:center;
}
.vid-modal-inner{
  position:relative;
  height:90vh;
  aspect-ratio:9 / 16;
  max-width:96vw;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.vid-modal-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.vid-modal-x{
  position:absolute;
  top:2.5vh;
  right:3vw;
  z-index:2;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-size:20px;
  line-height:1;
  width:44px;
  height:44px;
  border-radius:50%;
  cursor:pointer;
  transition:background .15s ease;
}
.vid-modal-x:hover{
  background:var(--red);
  border-color:var(--red);
}

/* --- set-aware shorts viewer: whole series inside one popup, swipeable --- */
.vid-stage{
  position:relative;
  height:82vh;
  aspect-ratio:9 / 16;
  max-width:96vw;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.vid-track{
  display:flex;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.vid-track::-webkit-scrollbar{ display:none; }
.vid-pane{
  position:relative;
  flex:0 0 100%;
  height:100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  background:#000;
}
.vid-pane iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.vid-pane .poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.5;
}
.vid-pane .poster-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:54px;
  color:rgba(255,255,255,.85);
  text-shadow:0 4px 20px rgba(0,0,0,.8);
  pointer-events:none;
}
.vid-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, opacity .15s ease;
}
.vid-nav:hover{ background:var(--gold); color:#000; border-color:var(--gold); }
.vid-nav[disabled]{ opacity:.22; cursor:default; }
.vid-nav[disabled]:hover{ background:rgba(0,0,0,.55); color:#fff; border-color:rgba(255,255,255,.3); }
.vid-nav.prev{ left:max(8px, calc(50vw - 46vh - 66px)); }
.vid-nav.next{ right:max(8px, calc(50vw - 46vh - 66px)); }
.vid-meta{
  position:absolute;
  left:0;
  right:0;
  bottom:2.2vh;
  z-index:3;
  text-align:center;
  pointer-events:none;
}
.vid-title{
  margin:0 0 10px;
  font-size:14px;
  letter-spacing:.12em;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.vid-dots{
  display:flex;
  gap:9px;
  justify-content:center;
  pointer-events:auto;
}
.vid-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:transparent;
  padding:0;
  cursor:pointer;
}
.vid-dot.is-watched{ background:rgba(229,180,0,.45); }
.vid-dot.is-active{ background:var(--gold); border-color:var(--gold); transform:scale(1.35); }
/* thumbnails on the page remember what has been seen */
.series-short.is-watched::after{
  content:"\2713";
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--gold);
  color:#000;
  font-size:13px;
  line-height:22px;
  text-align:center;
  font-weight:700;
}
@media (max-width:760px){
  .vid-stage{ height:88vh; }
  .vid-nav{ display:none; }        /* swipe on touch, no arrows in the way */
  .vid-meta{ bottom:1.2vh; }
}

/* --- back to top --- */
#toTop{
  position:fixed;
  right:22px;
  bottom:42px;
  z-index:900;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(229,180,0,.5);
  background:rgba(0,0,0,.72);
  color:var(--gold);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
#toTop.show{ opacity:1; visibility:visible; transform:none; }
#toTop:hover{ background:var(--gold); color:#000; }
body.modal-open #toTop{ opacity:0; visibility:hidden; }
@media (max-width:760px){ #toTop{ right:14px; bottom:28px; width:44px; height:44px; } }

.rd-modal-inner{
  max-width:900px;
  height:92vh;
  margin:0 auto;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}

.rd-modal-bar{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  background:var(--black);
  border-bottom:3px solid var(--red);
}

.rd-modal-title{
  flex:1;
  min-width:0;
  color:#fff;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rd-modal-open{
  flex:0 0 auto;
  color:var(--gold) !important;
  font-size:12px;
  font-weight:600;
  border-bottom:none !important;
  white-space:nowrap;
}

.rd-modal-x{
  flex:0 0 auto;
  background:none;
  border:none;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  padding:2px 6px;
  line-height:1;
}

.rd-modal-x:hover{
  color:var(--red);
}

.rd-modal-frame{
  flex:1;
  width:100%;
  border:0;
}

/* ─── The reading pane. Julia, 10 Oct 2026: the article used to load in an iframe, which
   dragged the whole portal page in with it — theme header, right-hand sidebar and all,
   unreadable on a phone. ⛔ A cross-origin iframe cannot be styled from here, so the sidebar
   could never have been hidden from this side. Instead the article BODY is fetched from
   ecology.yoga's own REST API (which allows matri.au by name) and rendered here, where we
   own the type. Full width, no sidebar, and it reflows on a phone like any other text. --- */
.rd-modal-body{
  flex:1; width:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:28px 34px 44px; background:#fff; color:#1a1a1a;
  font-size:16px; line-height:1.72;
}
.rd-modal-body > *:first-child{ margin-top:0; }
.rd-modal-body p{ margin:0 0 1.05em; max-width:none; }
.rd-modal-body h1,.rd-modal-body h2,.rd-modal-body h3,.rd-modal-body h4{
  color:#111; line-height:1.3; margin:1.6em 0 .5em; font-weight:600;
}
.rd-modal-body h1{ font-size:25px; } .rd-modal-body h2{ font-size:21px; }
.rd-modal-body h3{ font-size:18px; } .rd-modal-body h4{ font-size:16px; }
.rd-modal-body img,.rd-modal-body iframe,.rd-modal-body video,.rd-modal-body table{
  max-width:100%; height:auto;
}
.rd-modal-body img{ display:block; margin:1.2em auto; border-radius:6px; }
.rd-modal-body figure{ margin:1.4em 0; }
.rd-modal-body figcaption{ font-size:13px; color:#666; text-align:center; margin-top:.5em; }
.rd-modal-body a{ color:#9c1a1a; border-bottom:1px solid rgba(156,26,26,.3); }
.rd-modal-body blockquote{
  margin:1.4em 0; padding:.2em 0 .2em 1.1em; border-left:3px solid var(--gold);
  color:#444; font-style:italic;
}
.rd-modal-body ul,.rd-modal-body ol{ margin:0 0 1.05em; padding-left:1.4em; }
.rd-modal-body li{ margin:0 0 .4em; }
.rd-modal-body .rd-state{ color:#777; font-style:italic; padding:14px 0; }
@media (max-width:560px){
  .rd-modal-body{ padding:18px 16px 34px; font-size:15.5px; }
}

@media (max-width:560px){
  .rd-slug{ display:none; }
  .rd-modal{ padding:2vh 2vw; }
  .rd-modal-inner{ height:96vh; }
}

.listen-links{
  margin-top:16px;
  font-size:14px;
  color:var(--muted);
}

.listen-links a{
  color:var(--red);
  border-bottom:1px solid transparent;
}

.listen-links a:hover{
  border-bottom-color:var(--red);
}

#training{
  padding-top:0;
}

#training .kicker{
  margin-top:0;
}
 
  .full-width-rule {
  display:none;
}

.declaration{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.22em;
  line-height:1.7;
  color:var(--ink);
  text-align: center;
}

  .two-col .quote{
  grid-column:1 / -1;   /* spans both columns */
}
 .quote{
  text-align:center;
  max-width:90%;
  margin:20px auto;
  font-style:italic;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  padding:6px 0;
}

.dharma-quote{
  text-align:center;
  max-width:90%;
  margin:40px auto;
  font-size:16px;
  line-height:1.8;
  color:var(--ink);
}

.dharma-quote .dharma-source{
  font-size:13px;
  color:var(--muted);
  font-style:italic;
}

/* --- Orientation grid (text + effort chain aside) --- */

.orientation-grid{
  display:grid;
  grid-template-columns:1fr 200px;
  gap:50px;
  align-items:start;
}

@media (max-width:860px){
  .orientation-grid{
    grid-template-columns:1fr;
  }
}

.effort-chain{
  background:rgba(229, 180, 0, 0.10);
  border-radius:8px;
  padding:24px 16px;
  text-align:center;
  font-size:14px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink);
  position:sticky;
  top:20px;
}

.effort-chain div{
  margin:4px 0;
  font-weight:500;
}

.effort-chain .arrow{
  color:var(--red);
  font-size:16px;
  letter-spacing:0;
  margin:2px 0;
}

.effort-chain .highlight{
  color:var(--red);
}

.effort-chain .power{
  color:var(--red);
  font-weight:700;
  letter-spacing:.22em;
}

/* --- Training CTA block --- */

.training-cta{
  text-align:center;
  margin-top:50px;
  padding-top:30px;
  border-top:1px solid var(--rule);
}

.training-cta p{
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}

/* --- Training offer (image + 20% off block) --- */

.training-offer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  margin:30px auto;
  max-width:720px;
  flex-wrap:wrap;
}

.training-offer .offer-image-wrap{
  flex:0 0 auto;
  text-align:center;
}

.training-offer .offer-image-link{
  background:none;
  border:none;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  display:block;
  border-bottom:none !important;
  transition:opacity .2s ease;
}

.training-offer .offer-image-link:hover{
  opacity:.88;
}

.training-offer .offer-image-link:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
  border-radius:50%;
}

.training-offer img{
  width:240px;
  height:auto;
  display:block;
}

.offer-share-hint{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--muted);
  margin:10px 0 0;
  max-width:none;
}

.training-offer-details{
  flex:1;
  min-width:220px;
  max-width:320px;
  text-align:left;
}

.training-offer-details .offer-headline{
  font-size:22px;
  font-weight:700;
  color:var(--red);
  margin:0 0 12px;
  letter-spacing:.01em;
  max-width:none;
  line-height:1.3;
}

.training-offer-details .offer-detail{
  font-size:15px;
  line-height:1.55;
  margin:0;
  max-width:none;
  color:var(--ink);
}

@media (max-width:660px){
  .training-offer{
    flex-direction:column;
    gap:20px;
  }
  .training-offer-details{
    text-align:center;
  }
}

/* --- Links --- */

a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
}

a:hover{
  color:var(--red);
  /* border-bottom-color:currentColor; */
}

/* --- Header --- */

header{
  background:var(--black);
  text-align:center;
  padding:30px 0 20px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-bottom:0;
}

.brand img{
  max-width:120px;
  display:block;
  margin:0 auto;
}

.logo-wrap{
  position:relative;
  display:inline-block;
  border-bottom:none !important;
}

.brand a,
.brand a:hover{
  border-bottom:none !important;
  color:inherit;
}
    
.doors{
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:24px;
}

.doors a{
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
  font-weight:500;
}

.doors a:hover{
  color:var(--gold);
}

/* --- Sub-doors. Added 10 Oct 2026 with the three-page split: the four main doors sit on every
   page; each sub-page shows its own second row beneath them. Julia: the sub-doors "are seen only
   on that page". --- */
.doors.sub{ margin-top:12px; gap:18px; }
.doors.sub a{ font-size:11px; letter-spacing:.18em; color:#a9a398; }
.doors.sub a:hover{ color:var(--gold); }
.doors a.current{ color:var(--gold); }

/* --- Sections --- */

section{
  padding:10px 0;
}


/* --- Layout helpers --- */

.two-col{
  display:grid;
  grid-template-columns:55fr 45fr;
  gap:30px;
}

.two-col ul{
  margin:0;
  padding-left:18px;
}

.two-col li{
  margin:0 0 12px;      /* vertical separation */
  line-height:1.3;      /* softer rhythm */
}

.two-col li:last-child{
  margin-bottom:0;
}
    
@media (max-width:860px){
  .two-col{
    grid-template-columns:1fr;
  }
}

/* --- Portrait --- */

.hero{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:50px;
  align-items:start;
}

@media (max-width:860px){
  .hero{
    grid-template-columns:1fr;
  }
}

.portrait{
  max-width:420px;
  margin:0 auto;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--rule);
}

.portrait img{
  width:100%;
  display:block;
  transition:opacity .4s ease;
}

.portrait .color{
  position:absolute;
  inset:0;
  opacity:0;
}

.portrait:hover .color{
  opacity:1;
}

/* --- Watch (YouTube shorts) --- */

.shorts-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  margin:30px auto 0;
  max-width:960px;
}

.short{
  aspect-ratio: 9 / 16;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--rule);
  position:relative;
}

.short iframe{
  width:100%;
  height:100%;
  border:none;
  display:block;
}

.short-placeholder{
  background:rgba(17,17,17,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.04em;
}

.short-placeholder span{
  opacity:.55;
}

/* --- Shared carousel: all three Watch rows use it ---------------------
   Three tiles centred, part-blurred peeks either side, slider underneath.
   Tile size matches the old 5-up Demon grid (179px) and scales down on
   small screens so three still fit rather than stacking into a long string.
   To add a video: drop another .car-slide button into the .car-track.      */
.car{
  /* tuned so three tiles stay visible from ~360px up to desktop, where the
     tile lands on 179px — the exact width of the old 5-up Demon grid.
     Want two bigger thumbs on phones instead? raise the 92px floor to ~120px. */
  --car-tile: clamp(92px, 24vw, 179px);
  --car-gap:  clamp(10px, 2vw, 16px);
  --car-pad:  clamp(10px, 4vw, 48px);
  position:relative;
  margin:24px auto 0;
  max-width:calc(var(--car-tile) * 3 + var(--car-gap) * 2 + var(--car-pad) * 2);
}

.car-track{
  display:flex;
  gap:var(--car-gap);
  padding:6px var(--car-pad);
  margin:-6px 0;
  overflow-x:auto;
  /* proximity, not mandatory: dragging the slider should not fight the snap.
     snap-padding matches the gutter so slide 1 can rest flush at scrollLeft 0. */
  scroll-snap-type:x proximity;
  scroll-padding-inline:var(--car-pad);
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scrollbar-width:none;         /* the range input below is the visible control */
  -ms-overflow-style:none;
}
.car-track::-webkit-scrollbar{ display:none; }

.car-slide{
  flex:0 0 var(--car-tile);
  scroll-snap-align:start;
  transition:filter .28s ease, opacity .28s ease, transform .15s ease;
}

/* a tile only partly in view reads as "there is more this way" */
.car-slide.is-side{
  filter:blur(2.5px);
  opacity:.55;
}
.car-slide.is-side:hover{ transform:none; box-shadow:none; }

/* --- the slider underneath --- */
.car-range{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:min(100%, calc(var(--car-tile) * 3));
  margin:14px auto 0;
  height:18px;
  background:transparent;
  cursor:pointer;
}
.car-range::-webkit-slider-runnable-track{
  height:3px;
  border-radius:3px;
  background:var(--rule);
}
.car-range::-moz-range-track{
  height:3px;
  border-radius:3px;
  background:var(--rule);
}
.car-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:34px;
  height:11px;
  margin-top:-4px;
  border:none;
  border-radius:6px;
  background:var(--red);
}
.car-range::-moz-range-thumb{
  width:34px;
  height:11px;
  border:none;
  border-radius:6px;
  background:var(--red);
}
.car-range:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
  border-radius:6px;
}
/* nothing to scroll → no control */
.car.is-static .car-range{ display:none; }
.car.is-static .car-track{ justify-content:center; }

@media (prefers-reduced-motion:reduce){
  .car-track{ scroll-behavior:auto; }
  .car-slide{ transition:none; }
}

.series-short{
  position:relative;
  aspect-ratio:9 / 16;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--rule);
  padding:0;
  background:#000;
  cursor:pointer;
  display:block;
  transition:transform .15s ease, box-shadow .15s ease;
}

.series-short:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}

.series-short iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
  display:block;
  pointer-events:none;   /* clicks pass to the button, not the player */
}

/* transparent overlay guarantees the whole tile is the click target */
.series-hit{
  position:absolute;
  inset:0;
  z-index:2;
}

.series-short:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* NOTE: .shorts-grid and .series-grid are no longer used in the markup — the
   three Watch rows are .car carousels now (they stacked into too long a string
   on mobile). Rules kept so the old layout can be restored by swapping the
   markup back; safe to delete once the carousel has settled. */

@media (max-width:860px){
  /* .yn-row needs no mobile override any more — it is a single centred
     column at every width (promo on top, TV under), sized by clamp(). */
}

/* --- Projects (black section) --- */

#projects {
  background: var(--black);
  margin: 30px calc(50% - 50vw) 0;
  padding: 0 0 50px;
  color: #fff;
}

/* Charity & mission — top of the Projects door (Julia, 22 Sep 2026) */
#projects .charity-mission{
  max-width:760px; margin:0 auto; padding:10px 24px 34px; text-align:left;
  border-bottom:1px solid rgba(229,180,0,.35);
}
#projects .charity-eyebrow{
  color:var(--gold); letter-spacing:.14em; text-transform:uppercase; font-size:13px; margin:0 0 10px;
}
#projects .charity-mission h2{ color:var(--gold); margin:0 0 16px; line-height:1.25; }
#projects .charity-lead{ color:#fff; font-size:1.08em; line-height:1.6; margin:0 0 18px; }
#projects .charity-aims-intro{ color:rgba(255,255,255,.75); margin:0 0 8px; font-size:.95em; }
#projects .charity-aims{ margin:0 0 18px; padding-left:1.1em; color:#fff; line-height:1.6; }
#projects .charity-aims li{ margin:0 0 8px; }
#projects .charity-aims strong{ color:var(--gold); }
#projects .charity-note{ color:rgba(255,255,255,.85); margin:0 0 14px; }
#projects .charity-legal{ color:rgba(255,255,255,.7); font-size:13px; line-height:1.6; margin:0; }
#projects .charity-legal a{ color:var(--gold); }
@media (max-width:600px){ #projects .charity-mission{ padding:6px 16px 28px; } }

/* Listen — black full-bleed band (mirrors #projects exactly) */
#listen {
  background: var(--black);
  margin: 30px calc(50% - 50vw) 0;
  padding: 0 0 50px;
  color: #fff;
}

#listen .kicker {
  margin: 0 0 30px 0;
  padding: 14px 0;
  text-indent: max(24px, calc(50vw - 526px));
}

#listen .listen-inner {
  padding: 0 24px;
  max-width: var(--max);
  margin: 0 auto;
  box-sizing: border-box;
}

#listen .listen-inner > p {
  color: #fff;
}

/* Sections that follow a black full-bleed band: kicker butts against it (no white/black sliver) */
#read,
#orientation {
  padding-top: 0;
}

#read .kicker,
#orientation .kicker {
  margin-top: -1px;
}

#projects .kicker {
  margin: 0 0 30px 0;
  padding: 14px 0;
  text-indent: max(24px, calc(50vw - 526px));
}

#projects .project-scheme {
  padding: 30px 24px 0;
}

.diagram-container {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  line-height: 0;
}

.diagram-container img {
  width: 100%;
  height: auto;
  display: block;
}

.diagram-container .dgm-link {
  position: absolute;
  display: block;
  border-bottom: none !important;
}

.projects{
  display:flex;
  justify-content:center;
  gap:60px;
  flex-wrap:wrap;
  margin-top:40px;
}

.project{
  text-align:center;
  max-width:260px;
}

.project a{
  display:inline-block;
  padding:10px 5px;
  border-radius:12px;
  border:1px solid var(--rule);
  transition:.2s ease;
}

.project a:hover{
  background:rgba(200,9,9,.05);
  border-color:rgba(200,9,9,.35);
}

.project span{
  display:block;
  font-size:14px;
  margin-top:6px;
}

.project-scheme{
  text-align:center;
}
    .project-scheme p{
  max-width:none;
}
.project-scheme img{
  max-width:700px;
  width:100%;
  height:auto;
}

.project-scheme a,
.project-scheme a:hover{
  border-bottom:none;
}
    
.full p,
.full h2{
  max-width:none;
}

/* --- Footer --- */

footer{
  background:var(--black);
  color:#a9a398;
  border-top:4px solid var(--red);
  text-align:center;
  padding:30px 0;
  font-size:13px;
  letter-spacing:.1em;
  margin:0 calc(50% - 50vw);
}

footer p{
  margin:0 auto;
  max-width:none;
}

/* --- CTA buttons --- */

.cta-red{
  display:inline-block;
  background:var(--red);
  color:#fff !important;
  padding:12px 22px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-radius:4px;
  margin-top:12px;
  transition:opacity .2s ease;
  border-bottom:none !important;
}

.cta-red:hover{
  opacity:.85;
  color:#fff !important;
}

/* --- Darshan Modal --- */
.darshan-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
}
.darshan-modal.active { display: flex; }
.darshan-frame {
  width: 85vw;
  height: 85vh;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 32px 100px rgba(0,0,0,.6);
}
    

/* --- Enquiry form, 7 Oct 2026 --- */
#enquire{ padding:56px 0 64px; background:#0f0f0f; color:#cfcabf; }
#enquire h2{ color:var(--gold); margin:0 0 10px; }
#enquire .enq-lede{ max-width:none; margin:0 auto 26px; color:#a9a398; text-align:center; }
#enquire .wrap{ text-align:center; }
.enq-form{ max-width:560px; margin:0 auto; text-align:left; }
.enq-row{ margin:0 0 16px; }
.enq-form label{
  display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); margin:0 0 6px;
}
.enq-req{ color:#8a8478; letter-spacing:.06em; text-transform:none; font-size:11px; }
.enq-form input[type=text], .enq-form input[type=email], .enq-form select, .enq-form textarea{
  width:100%; padding:11px 12px; font:inherit; font-size:14px; color:#f2efe8;
  background:#1a1a1a; border:1px solid rgba(229,180,0,.28); border-radius:2px;
  -webkit-appearance:none; appearance:none;
}
.enq-form select{
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:38px;
}
.enq-form textarea{ resize:vertical; }
.enq-form input:focus-visible, .enq-form select:focus-visible, .enq-form textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:1px; border-color:transparent;
}
.enq-form input::placeholder, .enq-form textarea::placeholder{ color:#6e685d; }
.enq-hp{ position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0; }
.enq-send{
  display:inline-block; margin:6px 0 0; padding:12px 34px; font:inherit; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:#111; background:var(--gold);
  border:0; border-radius:2px; cursor:pointer;
}
.enq-send:hover{ background:var(--red); color:#fff; }
.enq-send:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.enq-fine{ margin:14px 0 0; font-size:12px; color:#857f74; }
@media (max-width:560px){ .enq-send{ width:100%; } }/* ── LOOK INSIDE on the main page (8 Oct 2026) ──────────────────────────────
   Julia: "add Look inside onto the main page too… onto right side."
   Four thumbnails per series inside .mb-words (which IS the right side of the
   block), opening the same viewer as the trade catalogues.
   ⛔ The strip uses 240px thumbs (~14KB) — NOT the 1200px page files. Those are
   fetched only when the viewer opens, so the home page does not carry 10MB. */
#home .mb-para, #shop .mb-para { margin:11px 0 0; color:#b8b1a4; font-size:14px; line-height:1.6; max-width:68ch; }#home .mb-peek, #shop .mb-peek { margin:15px 0 0; }#home .mb-peek-cap, #shop .mb-peek-cap {
  margin:0 0 7px; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); font-weight:700;
}#home .mb-peek-row, #shop .mb-peek-row { display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; }#home .mb-peek-b, #shop .mb-peek-b, #home .mb-peek-more, #shop .mb-peek-more {
  padding:0; border:1px solid rgba(229,180,0,.3); background:#14110d; cursor:zoom-in;
  border-radius:3px; overflow:hidden; line-height:0; transition:border-color .18s ease;
}#home .mb-peek-b img, #shop .mb-peek-b img { display:block; width:52px; height:auto; }#home .mb-peek-b:hover, #shop .mb-peek-b:hover, #home .mb-peek-more:hover, #shop .mb-peek-more:hover { border-color:var(--gold); }#home .mb-peek-more, #shop .mb-peek-more {
  line-height:1.1; min-width:52px; cursor:pointer; color:var(--gold);
  font:600 12px/1.1 inherit; letter-spacing:.06em; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:6px 4px;
}#home .mb-peek-more span, #shop .mb-peek-more span { font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#8e877b; }
/* the viewer — same shape as the Pravacana modal */
.bp-lb{ display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.88); padding:4vh 4vw; }
.bp-lb.active{ display:flex; align-items:center; justify-content:center; }
.bp-track{ display:flex; gap:4vw; overflow-x:auto; scroll-snap-type:x mandatory;
           width:100%; height:92vh; align-items:center; scrollbar-width:none; }
.bp-track::-webkit-scrollbar{ display:none; }
.bp-track figure{ flex:0 0 100%; scroll-snap-align:center; margin:0; height:92vh;
                  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.bp-track img{ max-height:84vh; max-width:100%; width:auto; box-shadow:0 18px 55px rgba(0,0,0,.6); background:#fff; }
.bp-track figcaption{ color:#e8e2d6; font-size:14px; margin-top:2.2vh; text-align:center; max-width:62ch; }
.bp-x, .bp-nav{ position:absolute; z-index:2; cursor:pointer; color:#fff; background:rgba(0,0,0,.5);
                border:1px solid rgba(255,255,255,.35); border-radius:50%; width:44px; height:44px;
                font-size:20px; line-height:1; font-family:inherit; }
.bp-x{ top:2.5vh; right:3vw; }
.bp-nav{ top:50%; transform:translateY(-50%); font-size:26px; }
.bp-nav.prev{ left:2vw; } .bp-nav.next{ right:2vw; }
.bp-x:hover, .bp-nav:hover{ background:var(--gold); color:#111; border-color:var(--gold); }
.bp-count{ position:absolute; bottom:2.5vh; left:0; right:0; text-align:center;
           color:#aaa29a; font-size:11px; letter-spacing:.18em; }
@media (max-width:760px){#home .mb-peek-b img, #shop .mb-peek-b img { width:46px; } }/* ─── 10 Oct 2026, Julia's polish pass ────────────────────────────────────────
   Each page carries its own copy of this sheet, so every rule here is applied to
   all three files identically. -------------------------------------------- */

/* CONTACT: the charcoal was only as wide as the text column, so white showed down
   both sides. Full-bleed it the way #home and the .kicker bands already are. */
#enquire {
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-left:24px;
  padding-right:24px;
}/* The first section of a sub-page sits flush under the header, exactly as #home
   does on the homepage (#home carries padding:0 ... for the same reason). Without
   this the mustard band floats away from the header. */
.page-matri #bio, .page-charity #mission { padding-top:0; }
.page-matri #bio > .kicker, .page-charity #mission > .kicker{ margin-top:0; }

/* Julia, 10 Oct 2026: the three catalogue links stack, one per line, centred — the middot
   separators are gone and each line names what it is. ⛔ Why: written inline with no whitespace
   between the anchors, the run had no break opportunity, so on a phone ZENVOYAGE ran past the
   right edge (measured: right 408 against a 297 container). */
.menu-foot.trade-stack a.trade-link{ display:block; margin:0 0 7px; white-space:normal; }
.menu-foot.trade-stack a.trade-link:last-child{ margin-bottom:0; }

/* The footer breathes: the three contact lines sit together, then air, then the legal line,
   then air, then the mark. Julia, 10 Oct 2026. footer p carries no margin, so the space is
   added only where it is wanted rather than between every line. */
footer p.foot-gap{ margin-top:1.15em; }/* The two Roerich companions on the home page. The render has a solid white ground and sits on
   the black #home band, so it is given a card rather than left to read as a cut-out. */
#home .companions-shot { margin:26px auto 0; max-width:var(--row); }

/* ── THE ROERICH COMPANIONS, their own segment (Julia, 19 Oct 2026) ─────────
   Same --row width as the hinge and the duo, so the three rows stay level.
   Two covers side by side, then the shared Look-inside strip beneath them. */
#home .companions{
  max-width:var(--row); margin:44px auto 0;
  border-top:1px solid rgba(229,180,0,.16); padding-top:30px;
}
#home .comp-kicker{
  margin:0 0 7px; color:var(--gold); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
}
#home .comp-lead{ margin:0 0 20px; color:#b8b1a4; font-size:13px; line-height:1.6; }
#home .comp-lead strong{ color:#e9e3d7; font-weight:700; }
#home .comp-pair{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
#home .comp-book{ margin:0; }
#home .comp-book img{
  display:block; width:100%; height:auto; border-radius:6px;
  box-shadow:0 14px 38px rgba(0,0,0,.6);
}
#home .comp-book figcaption{ margin:11px 0 0; font-size:13px; line-height:1.5; color:#b8b1a4; }
#home .comp-book figcaption b{ display:block; color:var(--gold); font-weight:700; font-size:15px; margin-bottom:2px; }
#home .companions .mb-peek{ margin-top:24px; }
@media (max-width:760px){
  #home .comp-pair{ grid-template-columns:1fr; gap:30px; }
}#home .companions-shot img, #shop .companions-shot img {
  width:100%; height:auto; display:block; border-radius:10px; background:#fff;
  box-shadow:0 6px 26px rgba(0,0,0,.45);
}/* Amazon Australia bestseller credential, under the portrait in the BOOKS door. 13 Oct 2026.
   ⚠ The portrait column is a FIXED 200px, so the type is sized to that column and the ranks are
   stacked one per line — a middot run wrapped to six ragged lines here. */
#home .bestseller {
  margin:14px 0 0; text-align:center; color:var(--gold);
  font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  font-weight:600; line-height:1.5;
}#home .bestseller-ranks, #shop .bestseller-ranks {
  list-style:none; margin:7px 0 0; padding:0; text-align:center;
  color:#cdc6b9; font-size:11.5px; letter-spacing:.02em; line-height:1.65;
}#home .bestseller-date, #shop .bestseller-date {
  margin:7px 0 0; text-align:center; color:#8e877b;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
}

/* Five doors instead of four (SHOP added 19 Oct 2026). Julia's standing rule is that the main
   row holds ONE LINE on a phone — at the desktop tracking the fifth door orphaned ENQUIRE onto a
   second row, so the row tightens below 430px rather than wrapping. */
@media (max-width:430px){
  .doors{ gap:11px; }
  .doors a{ font-size:11px; letter-spacing:.10em; }
}

/* ─── SHOP, 19 Oct 2026. Julia: "nothing should be confusing in the shop."
   One red button to buy direct from Ingram, one yellow underneath to pick any other shop.
   No tables, no columns of alternatives. --- */
#shop .buy{ margin:18px 0 0; }
#shop .buy-name{
  margin:0 0 9px; color:#fff; font-size:15px; font-weight:600; letter-spacing:.01em;
}
#shop .buy-name span{ color:#8e877b; font-weight:400; font-size:13.5px; }
#shop .btn{
  display:block; width:100%; max-width:470px; margin:0 0 9px; padding:14px 18px;
  border-radius:7px; text-align:center; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; font-size:13px; border-bottom:none;
}
#shop .btn-ingram{ background:var(--red); color:#fff; }
#shop .btn-ingram:hover{ background:#a50707; }
#shop .btn-ingram .price{
  display:inline-block; margin-left:10px; font-weight:400; letter-spacing:.02em;
  text-transform:none; font-size:13.5px; color:#ffd9d9;
}
#shop .btn-choose{
  /* Julia, 19 Oct 2026: gradient on the pair. This one runs 135deg; the charity band
     below runs 315deg, so the two mirror each other. */
  background:linear-gradient(135deg, #F2C61A 0%, var(--gold) 55%, #C99A00 100%);
  color:#111;
}
/* ── /shop only: a THIRD column, the buy column (Julia, 19 Oct 2026) ────────
   Image · words · "Buy from Ingram" + slim buttons. #home keeps two columns —
   it has no buy buttons, which is why this is scoped to #shop and not twinned. */
/* ⛔ BOTH of these are floored at 861px. The one-column stack lives in
   @media (max-width:860px) EARLIER in this sheet, so an unconditional #shop .mb-head
   here has equal specificity, comes later, and wins at every width — it did, leaving
   a 188px thumb beside 76px of crushed text at 375. Caught at 375, twice. */
@media (min-width:861px){
  #shop .mb-head{ grid-template-columns:188px 1fr 232px; }
  #shop .mb-buy{ border-left:1px solid rgba(229,180,0,.16); padding-left:20px; }
}
#shop .mb-buy-h{
  margin:0 0 12px; color:var(--gold); font-weight:700; font-size:12px;
  letter-spacing:.13em; text-transform:uppercase;
}
#shop .mb-buy .buy{ margin:0 0 14px; }
#shop .mb-buy .buy:last-child{ margin-bottom:0; }
#shop .mb-buy .buy-name{ font-size:12.5px; margin:0 0 6px; }
/* short and skinny: the column header already says "Buy from Ingram" */
#shop .mb-buy .btn{
  width:100%; max-width:none; margin:0 0 6px; padding:8px 10px;
  font-size:11.5px; letter-spacing:.07em; border-radius:5px;
}
/* ── SOFT / HARD, shoulder to shoulder (Julia, 19 Oct 2026) ────────────────
   "make buttons to read only SOFT and HARD placed shoulder to shoulder with
   5px in between, put the prices under each button in column aligned left."
   auto-fit so a paperback-only title (all eight ZENVOYAGE) fills the row
   instead of leaving a hole where a hardcover button would have been. */
#shop .buy-pair{
  /* ⛔ NOT repeat(auto-fit, minmax(0,1fr)) — a 0 minimum lets auto-fit spawn
     unbounded tracks: it produced 26 columns, 24 of them 0px. It rendered
     correctly by accident. auto-flow column gives exactly one equal track per
     child, which is the actual intent: two for SOFT+HARD, one for a
     paperback-only title. */
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  gap:5px; align-items:start;
}
#shop .buy-opt{ min-width:0; }
#shop .mb-buy .buy-opt .btn{
  width:100%; margin:0; padding:9px 6px; font-size:11.5px; letter-spacing:.12em;
  line-height:1.1; border-radius:5px;
}
#shop .buy-prices{
  list-style:none; margin:5px 0 0; padding:0;
  text-align:left; font-size:10.5px; line-height:1.55; color:#b8b1a4;
  font-variant-numeric:tabular-nums;
}

/* ── THE SALE SHAPE (Julia, 19 Oct 2026) ───────────────────────────────────
   "the shop on matri.au MUST show the crossed price as well as a sale hook."
   Mirrors what the Ingram buyer page renders: struck List Price, payable
   price, percentage badge. Only the six records that are actually discounted
   carry it — the other sixteen sit at or above list and show one figure.
   ⛔ EVERY PERCENTAGE IS READ OFF ITS OWN LIVE PAGE, NEVER COMPUTED. Ingram
   rounds its own way: Spine PB shows 26% where the arithmetic gives 25.0%,
   and the omnibus HARDCOVER is 18%, not the 26% of its paperback. Computing
   these would have put two wrong numbers on her shopfront. */
#shop .buy-prices .was{
  text-decoration:line-through; opacity:.62; font-size:9.5px; line-height:1.3;
}
/* Julia, 19 Oct 2026: the badge sits on the STRUCK line, not the payable one.
   Beside "A$32.99" it did not fit the 103px column and wrapped to a full-width
   row of its own; the struck figure is shorter and leaves room.
   ⛔ opacity and line-through are inherited from .was — both must be undone on
   the badge, or the sale hook renders faded and crossed out. */
#shop .buy-prices .was b{ text-decoration:none; opacity:1; display:inline-block; }
#shop .buy-prices .now{ color:#efe8da; font-weight:700; }
#shop .buy-prices .was b,
#shop .buy-prices .now b{
  display:inline-block; margin-left:4px; padding:1px 4px; border-radius:3px;
  background:var(--red); color:#fff; font-size:8.5px; font-weight:700;
  letter-spacing:.04em; vertical-align:1px;
}

/* ── the companions segment on /shop, and SET APART ────────────────────────
   "make Booklet and Album stand out a bit from the main trilogy and omni
   (they are together, while these two are related-to works)." An inset panel
   with a gold edge, not just another block in the run. ⛔ #shop twins of the
   #home rules — a block scoped to one section does not exist in the other. */
#shop .companions{
  margin-top:34px; padding:26px 24px 24px;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(229,180,0,.20);
  border-left:3px solid var(--gold);
  border-radius:8px;
}
#shop .comp-kicker{
  margin:0 0 7px; color:var(--gold); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
}
#shop .comp-lead{ margin:0 0 20px; color:#b8b1a4; font-size:13px; line-height:1.6; }
#shop .comp-lead strong{ color:#e9e3d7; font-weight:700; }

/* the spec line that answers the price (Julia, 19 Oct 2026). Gold lead clause,
   muted remainder — it reads as a fact about the book, not as a defence. */
#shop .mb-spec{
  margin:0 0 11px; font-size:12.5px; line-height:1.55; color:#9d968a;
}
#shop .mb-spec strong{ color:var(--gold); font-weight:700; }
#shop .comp-pair{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
#shop .comp-book{ margin:0; }
#shop .comp-book img{
  display:block; width:100%; height:auto; border-radius:6px;
  box-shadow:0 14px 38px rgba(0,0,0,.6);
}
#shop .comp-book figcaption{ margin:11px 0 0; font-size:13px; line-height:1.5; color:#b8b1a4; }
#shop .comp-book figcaption b{ display:block; color:var(--gold); font-weight:700; font-size:15px; margin-bottom:2px; }
#shop .comp-book .buy{ margin:13px 0 0; }
#shop .comp-book .buy-name{ display:none; }
#shop .companions .mb-peek{ margin-top:24px; }
@media (max-width:760px){
  #shop .comp-pair{ grid-template-columns:1fr; gap:30px; }
  #shop .companions{ padding:22px 16px 20px; }
}

/* ⛔ A RANGE, not a max-width. The one-column stack lives in @media (max-width:860px)
   EARLIER in this sheet; a plain max-width:900px here has equal specificity and comes
   later, so it would win at 375px and leave the thumb at 188px with the words crushed
   to 91px. It did — caught at 375. Floor it above the stacking breakpoint. */
@media (max-width:900px) and (min-width:861px){
  #shop .mb-head{ grid-template-columns:188px 1fr; }
  #shop .mb-buy{
    grid-column:1 / -1; border-left:none; padding-left:0; margin-top:18px;
    border-top:1px solid rgba(229,180,0,.16); padding-top:16px;
  }
  #shop .mb-buy .btn{ max-width:470px; }
}
/* the single page-wide yellow button is centred; the red per-title ones stay left */
#shop .choose-all{ margin:18px 0 0; text-align:center; }
#shop .choose-all .btn-choose{ margin-left:auto; margin-right:auto; }

/* ── THE CHARITY STRIP (Julia, 19 Oct 2026) ────────────────────────────────
   "better at top, above the border of the block … straight after Author and
   books: ENQUIRE. Make it small, neat and not tall - fit everything in 1
   line/row." So: full width of the column, one row, 10.5px, 8px of padding.
   It keeps the gold gradient it had beside the button. It wraps below ~900px,
   which is correct — one row is a desktop instruction, not a promise to
   shrink the type until it fits a phone. */
#shop .charity-band{
  display:block; width:100%; margin:16px 0 0;
  padding:8px 10px; border-radius:6px; box-sizing:border-box;
  background:linear-gradient(315deg, #F2C61A 0%, var(--gold) 55%, #C99A00 100%);
  color:#111; text-align:center;
  font-size:10px; line-height:1.5; letter-spacing:0;
  /* ⛔ NO nowrap + ellipsis here. It fitted the row but CLIPPED the text, and what
     gets clipped is the ABN and the trading names — a legal line must never be
     silently truncated. It wraps instead on anything too narrow to hold it.
     ⭐ The 26px it was over came almost entirely from letter-spacing: .015em across
     188 characters is ~30px. Dropping the tracking bought the row back; shrinking
     the type was not needed, and 10px keeps it on one line down to ~975px. */
}
/* ⛔ NOT uppercase. I had set the lead in caps with .06em tracking; caps are wider and
   the tracking cost ~18px, which is what pushed the row to wrap at 1009. Sentence case
   is also how Julia wrote it — "All proceeds go to the Charity." — so her own form is
   both the faithful one and the narrow one. */
#shop .charity-band strong{ font-weight:700; }
/* Julia, 19 Oct 2026: "add this as a distinct line under All proceeds go to the
   Charity". Her own verbatim sentence from about_charity.html, on its own row —
   so it reads as a second statement, not as more of the legal run-on. */
#shop .charity-band .cb-line{ display:block; font-weight:700; margin:1px 0 2px; }
#shop .charity-band a{ color:#111; font-weight:700; border-bottom:1px solid rgba(0,0,0,.35); }
#shop .charity-band a:hover{ color:#000; border-bottom-color:#000; }

/* the hook sits under the tool-chest lines and SHARES .first, so it matches that
   heading by rule rather than by duplicated values. Only the top margin differs,
   to set it apart from the three lines above it. */
#shop .menu-lead p.first.hook{ margin-top:16px; margin-bottom:0; }
@media (max-width:900px){
  #shop .charity-band{ white-space:normal; font-size:11px; line-height:1.65; padding:10px 14px; }
}
#shop .btn-choose:hover{ background:#f0c40a; color:#000; }
#shop .buy-note{ margin:3px 0 0; color:#8e877b; font-size:12px; max-width:470px; }
@media (max-width:560px){
  #shop .btn{ max-width:100%; font-size:12px; padding:13px 12px; letter-spacing:.06em; }
  #shop .btn-ingram .price{ display:block; margin:4px 0 0; }
}

/* Julia, 19 Oct: the rules between the catalogue links read as clutter. The links keep their
   gold; the hairlines go. */
#shop .trade-link{ border-bottom:none !important; }
#shop .trade-stack a.trade-link{ margin:0 0 9px; }