/* ============================================================================
   THE TYPE SCALE, MIRRORED HERE ON PURPOSE.
   The canonical declaration is house.css - see _notes/HOUSE-STANDARD.md - but four pages
   (404, hundredth, letters, vertical-test) never load house.css, and on those pages every
   var(--t-*) silently fell back: hundredth's h1 rendered at the browser's default 16px
   instead of 44-76. A token nothing defines is worse than a literal, because a literal is at
   least the size you typed.

   Same nine values, and if they ever diverge the gate will say so on the pages that load
   only one of the two files. Change HOUSE-STANDARD.md first, then both.
   ========================================================================= */
:root{
  --t-label: 12px; --t-small: 13px; --t-meta: 15px; --t-body: 17px; --t-lead: 21px;
  --t-h3: 27px; --t-h2: 38px;
  --t-h1: clamp(44px, 6vw, 76px);
  --t-mark: clamp(76px, 12vw, 174px);
}

/* V5 - THE STUDIO. Warm, quiet, authored. Awe that turns tender. */
:root{
  --bg:#0e0c0b; --bg2:#16110d; --ink:#f4f1ea; --mut:rgba(244,241,234,.55);
  --gold:#e4c893; --ember:#c8763a; --line:rgba(255,255,255,.09);
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}

/* film grain, very quiet */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:98;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-2%,2%)}40%{transform:translate(2%,-1%)}60%{transform:translate(-1%,-2%)}80%{transform:translate(1%,2%)}}

/* nav */
.bar{position:fixed;left:0;right:0;top:0;z-index:50;background:linear-gradient(rgba(12,10,9,.92),rgba(12,10,9,0));padding-bottom:26px;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,5vw,54px);
  background:linear-gradient(to bottom,rgba(14,12,11,.9),rgba(14,12,11,0))}
.bar .brand{font-family:var(--serif);font-size:var(--t-lead)}
.bar .brand small{color:var(--mut);font-style:italic;font-size:15px}
.bar nav{display:flex;gap:24px;align-items:center;font-size:var(--t-meta)}
.bar nav a{color:var(--mut);transition:color .25s}
.bar nav a:hover,.bar nav a.on{color:var(--ink)}
.bar .book{color:var(--gold)}
@media(max-width:640px){.bar{padding:14px 18px}.bar nav{gap:14px;font-size:15px}
  .bar nav a.hidem{display:none}
  .stage .sub{max-width:94%;font-size:var(--t-meta)}
  .doors{flex-direction:column;align-items:center;gap:10px}
  .stage .byline{font-size:13px;padding:0 14px}}

/* threshold hero */
.stage{position:relative;height:92vh;min-height:540px;overflow:hidden}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .veil{position:absolute;inset:0;background:
  radial-gradient(80% 90% at 50% 42%,transparent,rgba(8,6,5,.52) 80%),
  linear-gradient(to bottom,rgba(8,6,5,.4),rgba(8,6,5,.08) 34%,rgba(8,6,5,.92))}
.stage .glow{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(220px 220px at var(--gx,50%) var(--gy,55%),rgba(217,150,90,.22),transparent 70%)}
.stage .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:24px}
.stage h1{font-family:var(--serif);font-weight:400;font-size:var(--t-h1);
  line-height:1.1;margin:0 0 16px;max-width:17ch;text-wrap:balance;text-shadow:0 2px 44px rgba(0,0,0,.65)}
.stage .sub{color:#ead9bf;font-size:var(--t-body);max-width:52ch;margin:0 0 30px;
  text-shadow:0 1px 22px rgba(0,0,0,.75)}
.stage .byline{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:var(--mut);
  font-size:var(--t-meta);letter-spacing:.09em;text-transform:lowercase}
.doors{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.enter{display:inline-flex;gap:9px;align-items:center;font-size:16.5px;color:#0e0c0b;
  background:var(--gold);padding:12px 26px;border-radius:999px;font-weight:600;transition:transform .3s}
.enter:hover{transform:translateY(-2px)}
.enter.ghost{background:transparent;color:#ead9bf;border:1px solid rgba(233,217,191,.34);font-weight:400}

/* the living card */
.card{display:block;transition:transform .35s ease}
.card:hover{transform:translateY(-4px)}
.frame{position:relative;overflow:hidden;border-radius:14px;background:var(--bg2);
  border:1px solid var(--line);aspect-ratio:16/10}
.frame .m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame .tile{background:radial-gradient(120% 120% at 30% 20%,hsl(var(--hue)/.9),transparent 60%),
  linear-gradient(160deg,hsl(var(--hue)/.7),#0d0e11)}
.scrim{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(8,6,5,.84) 0%,rgba(8,6,5,.16) 46%,transparent 72%)}
.meta{position:absolute;left:18px;right:18px;bottom:14px}
.meta h3{font-family:var(--serif);font-weight:400;font-size:var(--t-lead);margin:0 0 3px}
.meta .tag{margin:0;font-size:var(--t-meta);letter-spacing:.03em;color:var(--mut);text-transform:lowercase}
.corner{position:absolute;top:13px;right:13px}
.pill{font-size:var(--t-small);padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.45);
  border:1px solid var(--line);color:var(--ink);backdrop-filter:blur(3px)}
.pill.buy{color:var(--gold);border-color:rgba(228,200,147,.4)}
.pill.free{color:var(--gold);border-color:rgba(160,220,180,.32)}

/* rails */
.railhead{display:flex;align-items:baseline;gap:14px;margin:54px 0 18px;padding:0 clamp(18px,5vw,54px)}
.railhead h2{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);margin:0}
.railhead .n{color:var(--mut);font-size:15px;letter-spacing:.06em}
.railhead .all{margin-left:auto;color:var(--gold);font-size:var(--t-meta);white-space:nowrap;
  border-bottom:1px solid rgba(228,200,147,.35);padding-bottom:2px}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 clamp(18px,5vw,54px) 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .card{flex:0 0 clamp(258px,33vw,396px);scroll-snap-align:start}
@media(max-width:640px){.railhead .n{display:none}}

/* full-width bands (commission, book) */
.band{margin:70px clamp(18px,5vw,54px) 0;padding:clamp(34px,5vw,58px);
  border:1px solid var(--line);border-radius:20px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#191210,#0f0c0a)}
.band .k{color:var(--gold);font-size:var(--t-meta);letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.band h2{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);margin:0 0 12px;max-width:22ch}
.band p{color:var(--mut);max-width:60ch;font-size:17px;margin:0 0 22px}
.band .quote{font-family:var(--serif);font-style:italic;font-size:var(--t-lead);color:#e6d5b8;max-width:44ch}
.band .cite{color:var(--mut);font-size:15px;margin-top:10px}

/* meditations empty state */
.room{padding:0 clamp(18px,5vw,54px)}
.empty{border:1px dashed var(--line);border-radius:14px;padding:36px;text-align:center;
  color:var(--mut);font-style:italic;font-size:16.5px}

/* footer */
.foot{padding:76px clamp(18px,5vw,54px) 56px;text-align:center;margin-top:80px;border-top:1px solid var(--line)}
.foot .creed{font-family:var(--serif);font-style:italic;font-size:17px;color:#e6d5b8;margin:0 0 8px}
.foot .name{color:var(--mut);font-size:15px}
.mock-flag{position:fixed;bottom:14px;left:14px;z-index:99;font-size:var(--t-small);color:var(--mut);
  background:rgba(0,0,0,.55);border:1px solid var(--line);padding:6px 12px;border-radius:999px}

/* room page (worlds) */
.roomhero{padding:clamp(90px,14vh,130px) clamp(18px,5vw,54px) 6px;max-width:760px}
.roomhero h1{font-family:var(--serif);font-weight:400;font-size:var(--t-h1);margin:0 0 10px}
.roomhero p{color:var(--mut);font-size:var(--t-body);margin:0}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;padding:22px clamp(18px,5vw,54px) 24px}
.chip{font-size:15px;padding:7px 15px;border-radius:999px;border:1px solid var(--line);
  color:var(--mut);background:transparent;cursor:pointer;transition:.2s}
.chip:hover{color:var(--ink)}
.chip.on{color:#0e0c0b;background:var(--gold);border-color:var(--gold)}
.count{padding:0 clamp(18px,5vw,54px);color:var(--mut);font-size:15px;margin:0 0 16px;font-style:italic}
.grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);padding:0 clamp(18px,5vw,54px) 40px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}

/* commission page */
.cwrap{max-width:880px;margin:0 auto;padding:clamp(100px,15vh,150px) clamp(18px,5vw,40px) 40px}
.cwrap .k{color:var(--gold);font-size:var(--t-meta);letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.cwrap h1{font-family:var(--serif);font-weight:400;font-size:var(--t-h1);line-height:1.1;margin:0 0 20px;max-width:18ch}
.cwrap .lead{font-size:var(--t-body);color:#d9cbb6;max-width:58ch;margin:0 0 44px}
.occ{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 50px}
@media(max-width:820px){.occ{grid-template-columns:repeat(2,1fr)}}
.occ .o{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--bg2)}
.occ .o h3{font-family:var(--serif);font-weight:400;font-size:18.5px;margin:0 0 6px}
.occ .o p{color:var(--mut);font-size:15px;margin:0;line-height:1.5}
.steps{margin:0 0 44px}
.steps .s{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.steps .num{font-family:var(--serif);color:var(--gold);font-size:var(--t-lead);min-width:28px}
.steps h3{font-family:var(--serif);font-weight:400;font-size:var(--t-lead);margin:0 0 4px}
.steps p{color:var(--mut);font-size:var(--t-meta);margin:0;max-width:60ch}
.pricebox{border:1px solid rgba(228,200,147,.3);border-radius:16px;padding:30px;margin:0 0 36px;
  background:linear-gradient(160deg,#1a130e,#0f0c0a);text-align:center}
.pricebox .p{font-family:var(--serif);font-size:var(--t-h2);margin:0}
.pricebox .p small{font-size:17px;color:var(--mut);font-family:var(--sans)}
.pricebox .note{color:var(--mut);font-size:15px;margin-top:8px}
.cta-row{text-align:center}
.finenote{color:var(--mut);font-size:15px;font-style:italic;text-align:center;margin-top:16px}

/* mobile overrides - MUST stay last in file to win the cascade */
@media(max-width:640px){
  .stage .center{width:100%;padding:20px}
  .stage h1{max-width:94vw}
  .stage .sub{width:min(88vw,52ch);max-width:88vw;font-size:var(--t-meta)}
  .doors{flex-direction:column;align-items:center;gap:10px}
}

/* caption-below cards - no words on the preview itself (Jane, 2026-07-10) */
.card .cap{padding:10px 4px 0}
.card .cap h3{font-family:var(--serif);font-weight:400;font-size:var(--t-body);margin:0 0 2px}
.card .cap .tag{margin:0;font-size:var(--t-small);color:var(--mut);text-transform:lowercase}

/* atlas */
.atlas-stats{display:flex;gap:26px;flex-wrap:wrap;padding:8px clamp(18px,5vw,54px) 6px;color:var(--mut);font-size:var(--t-meta)}
.atlas-stats b{color:var(--gold);font-family:var(--serif);font-size:var(--t-lead);font-weight:400;margin-right:6px}
.fam{padding:0 clamp(18px,5vw,54px);margin-top:34px}
.fam h2{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);margin:0 0 12px}
.cells{display:flex;flex-wrap:wrap;gap:9px}
.cell{font-size:var(--t-meta);padding:7px 13px;border-radius:999px;border:1px solid rgba(228,200,147,.35);
  color:#e6d5b8;background:rgba(228,200,147,.07)}
.cell b{color:var(--gold);font-weight:600;margin-left:6px}
.cell.dark{border-style:dashed;border-color:var(--line);color:var(--mut);background:transparent}
.doorsrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 clamp(18px,5vw,54px);margin-top:16px}
@media(max-width:820px){.doorsrow{grid-template-columns:1fr}}
.doorc{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--bg2);transition:transform .3s}
.doorc:hover{transform:translateY(-3px)}
.doorc h3{font-family:var(--serif);font-weight:400;font-size:var(--t-body);margin:0 0 5px}
.doorc p{color:var(--mut);font-size:15px;margin:0}

/* worlds room column toggle */
.grid.cols4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.grid.cols4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.grid.cols4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid.cols4{grid-template-columns:1fr}}

/* meditation room */
.medstage{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.medstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.medveil{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 45%,transparent,rgba(8,6,5,.72) 85%)}
.medui{position:relative;z-index:2;text-align:center;padding:24px;max-width:560px}
.medui h1{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);margin:0 0 10px}
.medui .sub{color:#e0d0b6;font-size:17px;margin:0 0 34px}
.ring{width:180px;height:180px;margin:0 auto 30px;border-radius:50%;
  border:1.5px solid rgba(228,200,147,.55);box-shadow:0 0 60px rgba(217,150,90,.15) inset;
  display:flex;align-items:center;justify-content:center;
  transition:transform 4s cubic-bezier(.4,0,.6,1)}
.ring.inhale{transform:scale(1.28);transition-duration:4s}
.ring.hold{transform:scale(1.28);transition-duration:.1s}
.ring.exhale{transform:scale(1);transition-duration:6s}
.ring span{font-size:15px;letter-spacing:.14em;text-transform:lowercase;color:#ead9bf}
.medrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.mednote{color:var(--mut);font-size:var(--t-meta);font-style:italic}

/* panel fixes (judge consensus 2026-07-10) */
/* 1. let the real sites shine. (Was: sepia(.12) saturate(.95) brightness(.93)
   plus an inset 60px dark vignette at .45 - a "warm-grade so all tiles live in
   one candlelit room", chosen 2026-07-10. Cohesive, and it was dimming and
   desaturating every preview. Jane, 2026-07-20, looking at the live shop:
   "it looks like the card darkened the actual website." She was right - the
   card was grading the work. These ARE living websites; the preview should
   show what a visitor would actually see. Warmth now comes from the card
   body around the image, never from a filter over it.) */
.frame img.m{filter:none}   /* true colour - the card never grades the work, up or down */
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:none;background:none}   /* no wash over the work - true colour */
/* 2. hero rhythm: ghost door becomes quiet text, single gold action */
.stage .doors .enter.ghost{background:none;border:none;padding:12px 6px;
  border-bottom:1px solid rgba(233,217,191,.3);border-radius:0;font-size:var(--t-meta)}
/* 3. byline lifted one step so the identity anchor registers */
.stage .byline{color:#c9b89a;opacity:.92}

/* ROOM MOBILE NAV FIX 2026-07-13: stop the 5-link nav overlapping the room title */
@media(max-width:760px){.bar{flex-wrap:wrap;background:rgba(12,10,9,.94);backdrop-filter:blur(10px);padding:12px 16px;gap:6px}.bar nav{flex-wrap:wrap;gap:10px 14px;justify-content:flex-end}.roomhero{padding-top:96px}}