/* PHI — rooms 2–5, footer, chapter reader, archive viewer */

.site-foot{position:relative;z-index:2}
.room-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;max-width:1280px;margin:0 auto 96px}
.room-head .lede{max-width:380px}
.fine{display:block;max-width:620px;margin:56px auto 0;opacity:.75;text-transform:none;letter-spacing:-.01em;font-size:12.8px;text-align:center}

/* ── currents (timeline) ─────────────────────────── */
#eras{max-width:1280px;margin:0 auto}
.era{display:grid;grid-template-columns:220px 1fr;gap:28px;padding:28px 0 72px;border-top:1px solid var(--line)}
.era-name{font:italic 300 clamp(34px,3.6vw,48px)/.95 var(--serif);margin-top:8px}
.era-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;align-items:start}
.ev{display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;background:color-mix(in srgb,var(--fg) 8%,var(--bg));box-shadow:inset 0 0 0 1px var(--line)}
.ev:nth-child(2n){margin-top:44px}
.ev:nth-child(3n){margin-top:18px}
.ev-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ev-year{font:italic 300 52px/.8 var(--serif);letter-spacing:-.02em;color:#F2A36B}
.ev-img{width:46px;height:58px;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.9}
.ev h3{margin:4px 0 0;font:500 17px/1.2 var(--sans);letter-spacing:-.02em}
.ev p{margin:0;font:400 14.5px/1.4 var(--sans);opacity:.88}
.ev-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.linkish{background:none;border:0;padding:0;font:500 11.2px/1.5 var(--sans);letter-spacing:.02em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:inherit}
.ev-foot a{font:500 11.2px/1.5 var(--sans);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:#F2A36B}

/* ── quote + marquee ─────────────────────────────── */
.room-quote{padding:200px 0 0}
.big-quote{margin:0 var(--gutter);max-width:1280px}
.big-quote blockquote{margin:0;font:italic 300 clamp(60px,10vw,168px)/.9 var(--serif);letter-spacing:-.02em}
.big-quote figcaption{margin-top:28px}
.marquee{margin-top:160px;padding:22px 0;background:#5A314D;color:#EAD8C0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;gap:28px;animation:marquee 60s linear infinite;font:400 clamp(30px,3.6vw,48px)/1 var(--sans);letter-spacing:-.02em}
.marquee-track em{font:italic 300 1.12em/1 var(--serif)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── live forms (lab/forms) placed through the rooms ── */
.fs{display:block;max-width:1280px;margin:110px auto 0}
.fs:empty{min-height:200px}
.fs-right,.fs-left,.fs-center{width:min(520px,100%)}
.fs-right{margin-right:max(0px,calc((100% - 1280px) / 2))}
.fs-right{margin-left:auto}
.fs-left{margin-left:max(0px,calc((100% - 1280px) / 2));margin-right:auto}
.fs-center{margin-inline:auto;width:min(560px,100%)}
.fs-wide .fstage{aspect-ratio:16/9}
.room-quote .fs{margin:110px var(--gutter) 0 auto}
.room-question .fs{margin-top:70px;text-align:left}
.forms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:clamp(18px,2.6vw,36px);max-width:1280px;margin:0 auto}
.forms-grid .fs,.forms-pair .fs{margin:0;width:auto}
.forms-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(18px,2.6vw,36px);max-width:1280px;margin:0 auto 96px}
.form-card{display:grid;gap:12px}
/* no card: the form floats on the room. The canvas bleeds 30% past its slot on every side
   (drawn at zoom 1/1.6 so the form keeps its size) so particles can fly out; it takes no
   pointer events, so text under the bleed stays clickable. Drag happens on the slot itself. */
.fstage{position:relative;aspect-ratio:1;cursor:grab;touch-action:pan-y}
.fstage:active{cursor:grabbing}
.cursor-on .fstage{cursor:none}
.fstage canvas{position:absolute;inset:-30%;width:160%;height:160%;display:block;pointer-events:none;z-index:0;
  animation:fs-float 14s ease-in-out infinite alternate}
.fs:nth-of-type(2n) .fstage canvas{animation-duration:17s;animation-delay:-6s}
.fs:nth-of-type(3n) .fstage canvas{animation-duration:12s;animation-delay:-3s}
@keyframes fs-float{0%{transform:translate3d(0,-10px,0) rotate(-.6deg)}50%{transform:translate3d(8px,6px,0)}100%{transform:translate3d(-6px,12px,0) rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.fstage canvas{animation:none}}
.fstage .num,.fstage .redo{z-index:1}
main{overflow-x:clip}  /* the canvas bleed must never widen the page */
.fstage .num{position:absolute;left:14px;top:12px;pointer-events:none}
.fstage .redo{position:absolute;right:10px;top:8px;height:28px;padding:0 11px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:200px;background:transparent;color:inherit;font:400 14px/1 var(--sans);cursor:pointer;transition:background .4s,color .4s}
.fstage .redo:hover{background:var(--fg);color:var(--bg)}
.fstage .nogl{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center}
.form-card figcaption{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:baseline}
.form-card h3{margin:0;font:italic 300 32px/1 var(--serif);letter-spacing:-.012em}
.form-card p{grid-column:1/-1;margin:6px 0 0;font:400 15px/1.45 var(--sans);opacity:.88}

/* ── chapter 19 ─────────────────────────────────── */
.room-question{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;padding-block:200px}
.q-title{margin:0;font:italic 300 clamp(64px,11vw,184px)/.88 var(--serif);letter-spacing:-.025em}
.room-question .lede{max-width:560px}

/* ── archive ─────────────────────────────────────── */
.archive{columns:3 280px;column-gap:26px;max-width:1280px;margin:0 auto}
.arch{break-inside:avoid;margin:0 0 34px;display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit}
.arch-img{display:block;overflow:hidden;background:#0f1f27}
.arch img{width:100%;height:auto;filter:sepia(.35) grayscale(.4) contrast(1.05);transition:filter 1s var(--ease),transform 1.4s var(--ease)}
.arch:hover img,.arch:focus-visible img{filter:none;transform:scale(1.025)}
.arch .cap{display:block;margin-top:12px;color:#E5AD36}
.arch-t{display:block;margin-top:4px;font:400 16px/1.3 var(--sans);letter-spacing:-.015em}

/* ── reading room ────────────────────────────────── */
.rooms-list{list-style:none;margin:0 auto;padding:0;max-width:1280px;border-top:1px solid var(--fg)}
.room-row{display:grid;grid-template-columns:76px minmax(140px,220px) 1fr minmax(0,280px) 70px;align-items:baseline;gap:8px 24px;width:100%;
  padding:20px 12px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:inherit;
  transition:background .5s var(--ease),padding .5s var(--ease)}
.room-row:hover,.room-row:focus-visible{background:color-mix(in srgb,#8B4E5A 14%,transparent);padding-left:22px}
.rr-num{font:italic 300 44px/.85 var(--serif);color:#8B4E5A}
.rr-author{font:500 15px/1.15 var(--sans);text-transform:uppercase;letter-spacing:.01em}
.rr-title{font:italic 300 clamp(24px,2.4vw,32px)/1.05 var(--serif);letter-spacing:-.01em}
.rr-conc{font:400 12.8px/1.4 var(--sans);opacity:.75}
.rr-year{text-align:right;font:500 11.2px/1.5 var(--sans);letter-spacing:.02em}

/* ── margin notes ────────────────────────────────── */
.margin-notes{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;max-width:1280px;margin:0 auto}
.mnote{flex:0 1 300px;padding:20px 22px 24px;rotate:var(--r,0deg);color:#2B1F19}
.mnote>div{animation:drift 9s ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.mnote:nth-child(3n+1){background:#F0B84A}
.mnote:nth-child(3n+2){background:#D781A5}
.mnote:nth-child(3n){box-shadow:inset 0 0 0 1px #684B3E}
.mnote:nth-child(2n){margin-top:40px}
.mnote .mtop{display:flex;justify-content:space-between;gap:10px}
.mnote p{margin:14px 0 0;font:italic 300 27px/1.08 var(--serif);letter-spacing:-.01em}

/* ── footer ──────────────────────────────────────── */
.site-foot{padding:120px var(--gutter) 90px;border-top:1px solid var(--line);overflow:hidden}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:48px;max-width:1280px;margin:0 auto}
.foot-grid>div{flex:1 1 360px;max-width:560px}
.foot-mark{font:400 clamp(80px,12vw,180px)/.8 var(--sans);letter-spacing:-.04em;color:#684B3E}
.foot-mark em{font:italic 300 1.1em/.8 var(--serif)}
.foot-grid p{margin:24px 0 0;font:400 18px/1.4 var(--sans);letter-spacing:-.015em}
.foot-nav{flex:0 1 300px;display:flex;flex-direction:column;gap:6px}
.foot-nav a{display:flex;justify-content:space-between;align-items:center;min-height:44px;border-bottom:1px solid var(--line);text-decoration:none;font:400 19.2px/1.1 var(--sans)}
.foot-nav a:hover .arr{transform:translate(2px,-2px)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;max-width:1280px;margin:80px auto 0}

/* ── overlays: chapter reader, archive viewer ────── */
.reader,.viewer{position:fixed;inset:0 0 0 auto;margin:0;width:min(900px,100vw);max-width:none;height:100dvh;max-height:none;padding:0;border:0;
  background:var(--rd-bg,#f1edeb);color:var(--rd-fg,#212121);overflow:auto;overscroll-behavior:contain}
.viewer{inset:0;width:100vw;background:#0e1d24;color:#D7C5A6}
.reader[open]{animation:slidein .9s var(--ease)}
.viewer[open]{animation:fadeblur .7s var(--ease)}
.reader.closing{animation:slideout .6s var(--ease) forwards}
.viewer.closing{animation:fadeout .5s var(--ease) forwards}
.reader::backdrop{background:rgba(10,10,10,.42);backdrop-filter:blur(6px)}
.viewer::backdrop{background:#0a0a0a}
@keyframes slidein{from{transform:translateX(100%)}}
@keyframes slideout{to{transform:translateX(100%)}}
@keyframes fadeblur{from{opacity:0;filter:blur(10px)}}
@keyframes fadeout{to{opacity:0;filter:blur(10px)}}
.rd-bar,.vw-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 6px 6px 28px;background:var(--rd-bg,#f1edeb)}
.vw-bar{background:#0e1d24}
.rd-ctrl{display:flex}
.rd-body{padding:32px clamp(24px,6vw,72px) 120px}
.rd-num{font:italic 300 clamp(110px,14vw,180px)/.8 var(--serif);letter-spacing:-.03em}
.rd-author{margin-top:22px;font:400 clamp(34px,4vw,52px)/1.1 var(--sans);letter-spacing:-.02em}
.rd-title{margin:0;font:italic 300 clamp(38px,4.6vw,60px)/1 var(--serif);letter-spacing:-.016em}
.rd-meta{margin:14px 0 0;opacity:.7}
.rd-sum{margin:28px 0 24px;font:400 21px/1.4 var(--sans);letter-spacing:-.018em;max-width:640px}
.reader .points{max-width:640px}
.reader .points li{border-color:color-mix(in srgb,currentColor 22%,transparent)}
.reader .tags{margin-top:20px}
.reader .tag{background:var(--rd-fg,#212121);color:var(--rd-bg,#f1edeb)}
.reader .tag.thread{background:none;color:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 30%,transparent)}
.rd-notes{margin-top:80px;padding-top:28px;border-top:1px solid currentColor}
.rd-uk-title{margin:10px 0 0;font:italic 300 clamp(32px,3.6vw,46px)/1.02 var(--serif);letter-spacing:-.01em}
#rd-notes{max-width:660px;margin-top:28px}
#rd-notes p{margin:0 0 1.05em;font:400 17.5px/1.62 var(--sans);letter-spacing:-.005em}
#rd-notes h4{margin:2.2em 0 .7em;font:italic 300 30px/1.08 var(--serif);letter-spacing:-.005em}
#rd-notes h4.idea{display:grid;grid-template-columns:56px 1fr;font:500 18px/1.3 var(--sans);letter-spacing:-.015em;margin:1.8em 0 .6em;scroll-margin-top:80px}
#rd-notes h4.idea b{font:italic 300 28px/.9 var(--serif)}
#rd-notes h4.flash{background:color-mix(in srgb,currentColor 12%,transparent);transition:background 2s}
.rd-loading{opacity:.6;font:400 15px/1.4 var(--sans)}
.rd-toc{margin-top:90px;padding-top:24px;border-top:1px solid currentColor}
#rd-toc{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
#rd-toc button{height:30px;min-width:44px;padding:0 12px;border:0;border-radius:200px;background:none;color:inherit;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 30%,transparent);font:400 12.8px/1 var(--sans);cursor:pointer}
#rd-toc button[aria-current]{background:var(--rd-fg,#212121);color:var(--rd-bg,#f1edeb)}
body.reader-open{overflow:hidden}

.vw-fig{margin:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:48px;align-items:start;padding:24px clamp(20px,5vw,72px) 80px}
.vw-fig img{width:100%;max-height:calc(100dvh - 140px);object-fit:contain;background:#0a161c}
.vw-fig h3{margin:10px 0 0;font:italic 300 clamp(32px,3.4vw,46px)/1.02 var(--serif)}
.vw-fig p{font:400 16px/1.5 var(--sans)}
.vw-fig .cap{color:#E5AD36}
.vw-credit{text-transform:none;letter-spacing:-.005em;font-size:12.8px;color:inherit!important;opacity:.8}
.vw-credit a{color:inherit}

@media (max-width:900px){
  .era{grid-template-columns:1fr;gap:16px}
  .ev:nth-child(n){margin-top:0}
  .room-row{grid-template-columns:56px 1fr 60px}
  .rr-author{grid-column:2/3}
  .rr-title{grid-column:2/4}
  .rr-conc{display:none}
  .rr-year{grid-row:1;grid-column:3}
  .vw-fig{grid-template-columns:1fr}
  .marquee{margin-top:100px}
  .room-head{margin-bottom:56px}
  .room-quote{padding-top:140px}
}