/* ==========================================================================
   THE ATHENAEUM — shared chrome for /division/athenaeum/*
   --------------------------------------------------------------------------
   DEVIATION FROM PROJECT CONVENTION, ON PURPOSE. Division pages are normally
   self-contained with inline CSS. The Athenaeum is five sibling pages that
   must look like one place; five inline copies of this block is a guarantee
   they drift apart. The HALL's hero CSS stays inline on the hall page,
   because that is the only page that has it.
   Bump ?v= on EVERY change here — mobile caches CSS hard.
   ========================================================================== */
:root{
  --rws-crimson:#C0392B; --rws-crimson-glow:rgba(192,57,43,0.15);
  --rws-lume:#7FC4DE;
  --rws-void:#050506; --rws-black:#080809; --rws-dark:#0D0D0F; --rws-dark-mid:#111114;
  --rws-border:rgba(255,255,255,0.06); --rws-border-red:rgba(192,57,43,0.25);
  /* --rws-white-30 IS 0.48, NOT 0.30 — the name is historical. At 0.30 it was
     ~2.7:1 on our near-black, a WCAG AA failure, and it is used as a TEXT colour
     (empty-state labels, footer copy), not a decorative tint. Kept in lockstep
     with styles.css; if you change one, change both. Do not restore 0.30. */
  --rws-white:#FFFFFF; --rws-white-80:rgba(255,255,255,.80); --rws-white-50:rgba(255,255,255,.50); --rws-white-30:rgba(255,255,255,.48);
  --font-heading:'Cinzel',Georgia,serif; --font-body:'Inter',system-ui,sans-serif;
  --nav-h:72px; --subnav-h:52px;
  --container-max:1200px; --container-px:clamp(1.5rem,5vw,4rem);
  --ease-out:cubic-bezier(0.16,1,0.3,1); --nav-max:min(1800px,100%);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{background:var(--rws-black);color:var(--rws-white-80);font-family:var(--font-body);line-height:1.7;overflow-x:hidden;}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;} ul{list-style:none;}
.container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-px);}
.eyebrow{display:block;font-family:var(--font-heading);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--rws-label);margin-bottom:1.25rem;}
.btn{display:inline-block;font-family:var(--font-heading);font-size:.8rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:.85rem 2rem;border:1px solid transparent;transition:.25s;cursor:pointer;}
.btn-primary{background:var(--rws-crimson);color:#fff;border-color:var(--rws-crimson);} .btn-primary:hover{background:#a8301f;}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.25);} .btn-ghost:hover{border-color:#fff;}
.skip{position:absolute;left:-9999px;} .skip:focus{left:1rem;top:1rem;z-index:200;background:#fff;color:#000;padding:.6rem 1rem;}

/* ---- primary nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);background:rgba(8,8,9,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.35s;}
.nav.scrolled{background:rgba(8,8,9,.95);border-bottom:1px solid var(--rws-border);}
.nav-inner{display:flex;align-items:center;height:var(--nav-h);gap:2rem;max-width:var(--nav-max);margin-inline:auto;padding-inline:var(--container-px);}
.nav-logo{display:flex;align-items:center;gap:.8rem;}
.nav-logo-icon{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(192,57,43,.45));}
.nav-logo-text{display:flex;flex-direction:column;line-height:1.15;}
.nav-logo-red{font-family:var(--font-heading);font-size:.86rem;font-weight:700;letter-spacing:.2em;color:#fff;}
.nav-logo-sub{font-family:var(--font-heading);font-size:.84rem;font-weight:500;letter-spacing:.34em;color:rgba(255,255,255,.62);text-shadow:0 1px 3px rgba(0,0,0,.55);}
.nav-links{display:flex;gap:2.25rem;margin-left:auto;}
/* Colour + shadow deliberately match styles.css .nav-links a. These two files
   had drifted: the main site raised inactive links to 0.75 with a shadow to
   survive lit backgrounds, the Athenaeum was left at 0.50 and read noticeably
   dimmer on the same nav. Keep them in lockstep. */
.nav-links a{font-family:var(--font-heading);font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,245,245,.75);text-shadow:0 1px 3px rgba(0,0,0,.55);transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:#fff;}
.nav-toggle{display:none;flex-direction:column;gap:5px;margin-left:auto;padding:4px;background:none;border:0;cursor:pointer;}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--rws-white);transition:transform .3s,opacity .3s;}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.nav-mobile{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(8,8,9,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--rws-border);padding:2rem var(--container-px);flex-direction:column;gap:1.5rem;z-index:99;}
.nav-mobile.open{display:flex;}
.nav-mobile a{font-family:var(--font-heading);font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rws-white-80);min-height:44px;display:flex;align-items:center;}

/* ---- the Athenaeum sub-nav: the four rooms, pinned under the main nav ----
   Only rendered INSIDE a room. The hall does not carry it — the hall's
   hotspots ARE its navigation, and a nav bar over that plate is noise. */
.subnav{position:fixed;top:var(--nav-h);left:0;right:0;z-index:98;height:var(--subnav-h);background:rgba(10,10,12,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--rws-border);}
/* SCROLL AFFORDANCE. .subnav-inner is overflow-x:auto with a hidden scrollbar,
   so on a phone the last room just stops mid-word ("ARTICLI—") and reads as
   clipped text rather than as something you can swipe. A fade says "there is
   more" without adding a control.
   Only below 860px: that is where the sub-nav itself starts overflowing.
   Above it everything fits and a permanent fade would be lying.
   ⚠️ This number USED to be justified as "where .nav-links collapses". That is
   no longer true — the nav collapses at 1024px now (css/nav.css owns it) — but
   860 is still right HERE, because it was always really about .subnav-inner's
   own content width, which the nav change does not touch. Re-measure the
   sub-nav, not the nav, if you ever move it. */
@media(max-width:860px){
  .subnav::after{content:'';position:absolute;right:0;top:0;bottom:0;width:clamp(32px,12vw,64px);
    background:linear-gradient(to right,rgba(10,10,12,0),rgba(10,10,12,.94) 65%);
    pointer-events:none;z-index:1;}
}
.subnav-inner{display:flex;align-items:center;height:var(--subnav-h);gap:.35rem;max-width:var(--nav-max);margin-inline:auto;padding-inline:var(--container-px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.subnav-inner::-webkit-scrollbar{display:none;}
.subnav-home{display:flex;align-items:center;gap:.5rem;font-family:var(--font-heading);font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;white-space:nowrap;padding:.5rem .9rem .5rem 0;border-right:1px solid var(--rws-border);margin-right:.6rem;}
.subnav-home::before{content:'\2190';color:var(--rws-label);}
.subnav a.room{position:relative;font-family:var(--font-heading);font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,245,245,.72);white-space:nowrap;padding:.55rem .95rem;min-height:44px;display:flex;align-items:center;transition:color .2s;}
.subnav a.room:hover{color:#fff;}
.subnav a.room[aria-current="page"]{color:#fff;}
.subnav a.room[aria-current="page"]::after{content:'';position:absolute;left:.95rem;right:.95rem;bottom:8px;height:1px;background:var(--rws-crimson);}

/* ---- room hero: each room gets its OWN plate. Until the art exists this
   renders as a graded band, not a broken <img>. ---- */
.room-hero{position:relative;min-height:clamp(320px,46vh,520px);margin-top:calc(var(--nav-h) + var(--subnav-h));display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(160deg,#141014,#0A0A0C 60%,var(--rws-void));border-bottom:1px solid var(--rws-border);}
.room-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.room-hero-grade{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(5,5,6,.55) 0%,transparent 35%,rgba(5,5,6,.55) 72%,rgba(5,5,6,.95) 100%);}
.room-hero-copy{position:relative;z-index:2;padding:0 var(--container-px) clamp(2rem,5vw,3.5rem);max-width:var(--container-max);margin-inline:auto;width:100%;}
.room-hero h1{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.6rem);font-weight:900;letter-spacing:.04em;line-height:1.02;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.95);}
.room-hero .lede{margin-top:1rem;font-size:1.1rem;font-weight:300;color:var(--rws-white-80);max-width:620px;text-shadow:0 2px 14px rgba(0,0,0,.9);}
/* HIDDEN FROM VISITORS 2026-08-08. This is a build marker for rooms still
   waiting on hero art, and Andrew found it on the LIVE site from his phone —
   where it does not read as a note-to-self, it reads as an unfinished website.
   (The type pass had just made it bigger, which is how it got noticed.)
   The markup stays: it is a true statement about the page and it costs nothing.
   The real tracker is A10 in Manifesto/TASKS.md — that is what should be telling
   us the art is missing, not the customer's screen. Delete the badge markup from
   a room the moment that room's plate ships. */
.room-hero .art-pending{display:none;}

.section{padding-block:clamp(4rem,8vw,7rem);}
.sec-head{max-width:680px;margin-bottom:clamp(2.5rem,5vw,4rem);}
.sec-head h2{font-family:var(--font-heading);font-size:clamp(1.6rem,3.6vw,2.6rem);font-weight:700;letter-spacing:.06em;color:#fff;line-height:1.2;}
.sec-head p{margin-top:1rem;font-size:1.05rem;color:var(--rws-white-50);}
/* Room pages put the shield inside .sec-head, beside the room's name (2026-08-08,
   matching the hall). It needs its own top margin because .sec-head's children
   are otherwise all text. */
.sec-head .rw-shield{margin-top:1.35rem;}

/* Room-hero shield, 2026-08-15. The five rooms that gained a follow control put
   it in .room-hero-copy, under the lede, beside the room's name.
   ⚠️ IT SITS ON A PHOTOGRAPHIC PLATE, so it is treated like the hall's, not like
   body text: an explicit near-white plus a hard shadow, and a drop-shadow on the
   mark itself. contrast.py does NOT cover text over images (CHECKPOINT) — the
   plate's own pixels are the ground and they vary across the frame, so a token
   alone would be a guess. These values are the ones .ath-intro .rw-shield
   already proved on the same art. */
.room-hero-copy .rw-shield{margin-top:1.35rem;color:rgba(245,245,245,.88);
  text-shadow:0 2px 12px rgba(0,0,0,.95);}
.room-hero-copy .rw-shield__svg{filter:drop-shadow(0 2px 10px rgba(0,0,0,.95));}
.empty{padding:clamp(2.5rem,5vw,4rem);background:var(--rws-dark);border:1px dashed rgba(255,255,255,.10);text-align:center;}
.empty .lbl{display:block;font-family:var(--font-heading);font-size:.75rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--rws-white-30);margin-bottom:.9rem;}
.empty p{font-size:1.02rem;color:var(--rws-white-50);max-width:520px;margin-inline:auto;}

/* Reserved ad inventory. Height is the reserved geometry; an UNFILLED slot
   collapses so it never leaves a hole. Content pages only — never
   /llypses/, checkout or /account/. */
.ad-slot{margin-block:clamp(2.5rem,5vw,4rem);min-height:280px;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(255,255,255,.07);}
.ad-slot[data-filled="false"]{display:none;}

.footer{background:var(--rws-void);border-top:1px solid var(--rws-border);padding:clamp(3rem,6vw,4.5rem) 0 2.5rem;text-align:center;}
.footer .fb{font-family:var(--font-heading);font-weight:900;letter-spacing:.14em;color:#fff;margin-bottom:.5rem;}
.footer .fnav{margin:.7rem 0 1rem;font-size:.88rem;}
.footer a{color:var(--rws-white-50);transition:color .2s;}
.footer a:hover{color:#fff;}
.footer p{font-size:.9rem;color:var(--rws-white-30);}
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.fade-up.visible{opacity:1;transform:translateY(0);}

/* The nav breakpoint used to live here at 860px. It moved to css/nav.css
   2026-08-15, which owns the single sitewide value (1024px) — 860 was one of
   five disagreeing numbers and it left these pages overflowing 861–975px.
   Do not re-add a .nav-links rule here. The 860px query above, for the
   sub-nav scroll fade, is unrelated and stays. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .fade-up{opacity:1;transform:none;transition:none;}
}