/* THE DESK. Everything from :root down to the reduced-motion rule is the approved reference
   (RESIDENCY/REFERENCE/book-of-ethereum.html) as it was written; the reference's inline style=""
   attributes now live in named classes under "WAS INLINE", because the page runs under a content
   policy that refuses inline style. What is new for this build is under "NEW" at the end. */

:root{
  --walnut:#2a1910; --walnut-deep:#140a05; --paper:#f2e8d3; --paper-shade:#e6d8bb;
  --ink:#2a1d14; --sepia:#5f4a36; --gold:#c9973f; --gold-ink:#8a6420; --oxblood:#6e1f1a; --cream:#e9d7b0;
  --display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --hand:'La Belle Aurore', 'Brush Script MT', cursive;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#f2e8d3; } }
:root[data-theme="dark"]{ --paper:#f2e8d3; }
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--walnut-deep);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
a{color:var(--oxblood)} a:hover{color:#3f0f0c}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- the scroll-driven stage ---------- */
#stage{position:relative;height:340vh}
@media (orientation:portrait) and (max-width:900px){#stage{height:560vh}}
.viewport{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;perspective:1800px;perspective-origin:50% 50%;
  background:radial-gradient(ellipse at 50% 30%, #4a2c1a 0%, #24140b 60%, #0e0704 100%)}
.world{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;will-change:transform;transform-style:preserve-3d}
.abs{position:absolute}
.wood{background-color: #2a1910; background-image: repeating-linear-gradient(96deg, rgba(0,0,0,0.20) 0px, rgba(0,0,0,0) 3px, rgba(255,214,160,0.035) 7px, rgba(0,0,0,0) 11px, rgba(0,0,0,0.14) 19px, rgba(0,0,0,0) 26px), repeating-linear-gradient(93deg, rgba(120,70,35,0.35) 0px, rgba(60,32,16,0.0) 60px, rgba(120,70,35,0.25) 140px, rgba(60,32,16,0) 230px), radial-gradient(ellipse at 50% 42%, #6a4128 0%, #3d2416 55%, #1a0e08 100%)}
.paper{background-color: #f2e8d3; background-image: radial-gradient(ellipse at 30% 20%, rgba(255,250,235,0.9) 0%, rgba(242,232,211,0) 60%), radial-gradient(ellipse at 80% 90%, rgba(196,168,120,0.25) 0%, rgba(242,232,211,0) 55%)}
.plane{left:-1500px;top:-1600px;width:4440px;height:4100px}
.vig{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 220px 70px rgba(8,4,2,.85)}

.sheet{box-shadow:0 18px 40px rgba(0,0,0,.55)}
.page{box-shadow:0 26px 54px rgba(0,0,0,.6);display:flex;flex-direction:column}
.page.left{left:232px;top:104px;width:460px;height:700px;transform:rotate(-3deg);transform-origin:100% 50%;padding:54px 56px 38px 58px;gap:13px;
  box-shadow:0 26px 54px rgba(0,0,0,.6), inset -38px 0 40px -20px rgba(90,60,30,.45)}
.page.right{left:690px;top:92px;width:460px;height:712px;transform:rotate(2deg);transform-origin:0 50%;padding:50px 54px 38px 62px;gap:15px;
  box-shadow:0 26px 54px rgba(0,0,0,.6), inset 38px 0 40px -20px rgba(90,60,30,.45)}
.gutter{left:686px;top:94px;width:10px;height:708px;background:linear-gradient(90deg,rgba(60,36,18,0),rgba(60,36,18,.55),rgba(60,36,18,0))}

.kicker{font-family:var(--display);font-variant:small-caps;letter-spacing:.14em;font-size:17px;color:var(--sepia);text-align:center}
.contents-title{margin:0;font-family:var(--display);font-weight:500;font-size:60px;line-height:1;text-align:center}
.rule{height:1px;background:#9c8468;margin:4px 40px 8px}
.entry{display:flex;align-items:baseline;gap:10px;font-size:18px;color:var(--ink);text-decoration:none}
.entry .n{font-family:var(--display);font-size:17px;color:var(--gold-ink);width:30px}
.entry .dots{flex-grow:1;border-bottom:1px dotted #9c8468;transform:translateY(-5px)}
.entry .ref{font-family:var(--display);font-style:italic;font-size:16px;color:var(--sepia)}
.res{display:flex;align-items:baseline;gap:10px;padding:7px 0 7px 40px;min-height:32px;text-decoration:none;color:var(--ink);border-bottom:1px solid rgba(95,74,54,.15)}
.res .cat{font-family:var(--display);font-variant:small-caps;letter-spacing:.05em;font-size:16px;color:var(--oxblood);width:120px}
.res .who{flex-grow:1;font-size:16px}
.res .left{font-style:italic;font-size:14px;color:var(--sepia)}
.res:hover .who{text-decoration:underline}
.folio-no{margin-top:auto;text-align:center;font-family:var(--display);font-style:italic;font-size:15px;color:var(--sepia)}
.hand{font-family:var(--hand);color:rgba(110,31,26,.75)}

.plate{border:1px solid var(--gold-ink);padding:8px;background:#efe3c8}
.plate .inner{width:100%;height:100%;border:1px solid rgba(138,100,32,.5);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  background-image:repeating-linear-gradient(45deg,rgba(95,74,54,.08) 0 1px,transparent 1px 9px);font-style:italic;font-size:15px;color:var(--sepia)}
.feat-cat{font-family:var(--display);font-variant:small-caps;letter-spacing:.06em;font-size:18px;color:var(--oxblood)}
.feat-title{margin:0;font-family:var(--display);font-weight:500;font-size:38px;line-height:1.05}
.turn{align-self:flex-start;min-height:44px;display:flex;align-items:center;font-family:var(--display);font-size:21px;text-decoration:none;border-bottom:1px solid var(--oxblood)}

.brand{left:44px;top:34px;display:flex;flex-direction:column;gap:2px}
.brand b{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.32em;color:#d9b36a}
.brand i{font-family:var(--display);font-size:21px;color:var(--cream)}
.invite{left:36px;top:612px;width:212px;height:152px;transform:rotate(-11deg);padding:22px 20px;display:flex;flex-direction:column;gap:6px;text-decoration:none;box-shadow:0 12px 26px rgba(0,0,0,.55)}
.invite small{font-family:var(--display);font-variant:small-caps;letter-spacing:.14em;font-size:15px;color:var(--sepia)}
.invite span{font-family:var(--display);font-size:23px;line-height:1.1;color:var(--ink)}
.seal{position:absolute;right:16px;bottom:14px;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#a83a32,#6e1f1a 60%,#4a120f);
  box-shadow:0 2px 4px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:19px;color:#e8b9a8}

/* overlay chrome that sits on the screen, not on the desk */
.hud{position:absolute;inset:0;pointer-events:none;z-index:3}
.hud nav{position:absolute;right:max(24px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 22px);display:flex;gap:26px;pointer-events:auto}
.hud nav a{font-family:var(--display);font-size:18px;color:var(--cream);text-decoration:none;min-height:44px;display:flex;align-items:center;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.hint{transition:opacity .3s;position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);text-align:center;font-family:var(--display);font-style:italic;font-size:19px;color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.hint .line{display:block;width:1px;height:34px;margin:10px auto 0;background:linear-gradient(var(--cream),transparent);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:bottom}}

/* the page the camera lands on */
.landing{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;background:var(--paper);
  background-image:radial-gradient(ellipse at 20% 10%,rgba(255,250,235,.9),transparent 55%),radial-gradient(ellipse at 90% 100%,rgba(196,168,120,.22),transparent 55%);
  display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vw,64px)}
.landing.on{pointer-events:auto}
.spread{width:min(1180px,100%);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:center}
.spread .plate{aspect-ratio:4/5}
.spread .plate .inner{font-size:17px}
.caption{margin:12px 0 0;font-style:italic;font-size:15px;color:var(--sepia)}
.meta{display:flex;flex-direction:column;gap:14px}
.meta h1{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(40px,5.4vw,76px);line-height:.98}
.byline{font-size:clamp(17px,1.6vw,20px)}
.byline span{color:var(--sepia);margin-left:14px}
.dates{font-style:italic;color:var(--sepia);font-size:16px}
.back{font-family:var(--display);font-size:18px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;align-self:flex-start}
.down{margin-top:10px;font-family:var(--display);font-style:italic;font-size:18px;color:var(--sepia)}

/* ---------- the folio: normal page flow after the camera lands ---------- */
.folio{background:var(--paper);background-image:radial-gradient(ellipse at 80% 0%,rgba(196,168,120,.18),transparent 50%);padding:clamp(40px,6vw,96px) clamp(20px,5vw,64px) 0}
.column{max-width:680px;margin:0 auto}
.column p{font-size:clamp(18px,1.4vw,20px);line-height:1.68;margin:0 0 1.2em;hyphens:auto}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:5.2em;line-height:.8;padding:.08em .1em 0 0;color:var(--oxblood)}
.sample{font-style:italic;color:var(--sepia)}
.pull{font-family:var(--display);font-style:italic;font-size:clamp(26px,2.6vw,34px);line-height:1.2;margin:1.4em 0;padding:0 0 0 1.2em;position:relative;color:var(--ink)}
.pull::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:2px;background:var(--gold)}
.margin-note{font-family:var(--hand);font-size:20px;color:rgba(110,31,26,.75);transform:rotate(-3deg);margin:0 0 1.6em}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin:2em 0 0}
.btn{min-height:48px;padding:0 22px;display:inline-flex;align-items:center;font-family:var(--display);font-size:20px;text-decoration:none;border:1px solid var(--ink)}
.btn.solid{background:var(--ink);color:var(--paper)} .btn.solid:hover{background:#000;color:var(--paper)}
.btn.line{color:var(--ink)} .btn.line:hover{background:rgba(42,29,20,.06);color:var(--ink)}

.also{max-width:1040px;margin:clamp(64px,8vw,120px) auto 0;border-top:1px solid #9c8468;padding-top:36px}
.also h2,.invite-block h2{margin:0 0 20px;font-family:var(--display);font-weight:500;font-size:clamp(30px,3vw,42px)}
.also ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.also li a{display:flex;align-items:baseline;gap:14px;padding:16px 0;border-bottom:1px solid rgba(95,74,54,.2);text-decoration:none;color:var(--ink);min-height:44px}
.also .cat{font-family:var(--display);font-variant:small-caps;letter-spacing:.05em;font-size:18px;color:var(--oxblood);width:120px;flex-shrink:0}
.also .who{flex-grow:1;font-size:18px}
.also .left{font-style:italic;color:var(--sepia);font-size:15px}

.invite-block{margin-top:clamp(64px,8vw,120px);background:var(--walnut);background-image:repeating-linear-gradient(96deg, rgba(0,0,0,0.20) 0px, rgba(0,0,0,0) 3px, rgba(255,214,160,0.035) 7px, rgba(0,0,0,0) 11px, rgba(0,0,0,0.14) 19px, rgba(0,0,0,0) 26px), repeating-linear-gradient(93deg, rgba(120,70,35,0.35) 0px, rgba(60,32,16,0.0) 60px, rgba(120,70,35,0.25) 140px, rgba(60,32,16,0) 230px), radial-gradient(ellipse at 50% 42%, #6a4128 0%, #3d2416 55%, #1a0e08 100%);color:var(--cream);padding:clamp(48px,7vw,110px) clamp(20px,5vw,64px)}
.invite-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.invite-block h2{color:#f2e3c0}
.invite-block p{font-size:19px;line-height:1.65;margin:0 0 1em;color:var(--cream)}
.kinds{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;padding:0;list-style:none}
.kinds li{border:1px solid rgba(217,179,106,.55);padding:6px 14px;font-family:var(--display);font-size:18px;color:#f2e3c0}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1e120a} .btn.gold:hover{background:#d8ab58;color:#1e120a}
footer{background:#140a05;color:#b9a47f;text-align:center;padding:28px 20px calc(28px + env(safe-area-inset-bottom,0px));font-family:var(--display);font-size:16px}

@media (max-width:760px){
  .spread{grid-template-columns:1fr;gap:18px}
  .spread .plate{aspect-ratio:auto;height:34vh}
  .hud nav{gap:16px} .hud nav a{font-size:16px}
  .also ul,.invite-inner{grid-template-columns:1fr}
  .landing{align-items:flex-start;padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
}
@media (prefers-reduced-motion: reduce){ .hint .line{animation:none} }

/* ---------- WAS INLINE in the reference - the same values, now named ---------- */
.sheet.s1{left:150px;top:150px;width:430px;height:640px;transform:rotate(-9deg);opacity:.92}
.sheet.s2{left:820px;top:170px;width:430px;height:620px;transform:rotate(7deg)}
.s2-note{left:60px;top:540px;font-size:20px;color:rgba(42,29,20,.5);transform:rotate(-4deg)}
.sheet.s3{left:330px;top:700px;width:360px;height:240px;transform:rotate(-3deg)}
.res-list{display:flex;flex-direction:column;margin-top:-4px}
.page-note{left:318px;top:198px;font-size:19px;transform:rotate(-8deg)}
/* MOVED from the reference: at 318,198 the note lands on the "now on the page" line of the Contents.
   The space under the list is empty in every state, so it is written there instead. */
.page .page-note{left:150px;top:560px;transform:rotate(-6deg)}
.kicker.split{display:flex;justify-content:space-between}
.plate.feat{height:250px;flex-shrink:0}
.feat-by{font-size:17px}
.feat-dates{font-style:italic;font-size:16px;color:var(--sepia)}
.fold{right:0;bottom:0;border-style:solid;border-width:0 0 42px 42px;border-color:transparent transparent #2a1910 #d9c9a6}
.blot.b1{left:1030px;top:690px;width:26px;height:20px;border-radius:50%;background:#0d1224;opacity:.8;transform:rotate(20deg)}
.blot.b2{left:1066px;top:706px;width:8px;height:7px;border-radius:50%;background:#0d1224;opacity:.7}
.quill{left:1150px;top:130px;width:290px;height:600px}
.quill img{display:block;width:290px;height:600px}
.landing figure{margin:0}
.feat-cat.big{font-size:20px}

/* ---------- NEW for this build ---------- */
/* THE DESK IS NEVER REPAINTED BY THE BROWSER. 29 Sep 2026, Chris's Android phone: the browser's
   automatic dark mode inverted the scene - dark paper, pale ink - reproduced exactly in Chrome with
   auto dark forced on. Tested with Chrome's real force-dark feature: no declaration is inverted,
   "only light" and "light dark" both escape (the DevTools auto-dark override ignores both, so it
   cannot test this). "light dark" is the one Android's in-app WebView also honours, and every colour
   here is set explicitly, so nothing the browser would restyle is left to default. */
:root{color-scheme:light dark}
/* A class that sets display (flex, grid) would otherwise beat the hidden attribute, and hidden is how
   the reader's date shows one resident and hides the rest. */
[hidden]{display:none !important}

/* A resident's own picture, where the reference had a hatched placeholder. */
.plate .inner.has-art{padding:0;background-image:none;overflow:hidden}
.plate .inner.has-art img{display:block;width:100%;height:100%;object-fit:cover}

/* The desk's page of today holds one resident, or Reflections between residents. */
.feature{display:flex;flex-direction:column;gap:15px;flex:1 1 auto;min-height:0}
.feature .quote{margin:0;font-family:var(--display);font-style:italic;font-size:22px;line-height:1.28;color:var(--ink)}
.feature .quote cite{display:block;margin-top:4px;font-family:var(--serif);font-style:normal;font-size:14px;color:var(--sepia)}
.feature .quote + .quote{padding-top:14px;border-top:1px solid rgba(95,74,54,.2)}
.fixture-tag{font-style:italic;letter-spacing:.04em}

/* THE BOOK THICKENS AS THE ARCHIVE GROWS. Under each page lies a block of bound leaves; the reader's
   date sets --leaves to the number of residents already bound, and the block deepens with them. */
.world{--leaves:0}
.leaves{position:absolute;background-color:#e8dbbd;
  background-image:repeating-linear-gradient(0deg,rgba(120,92,58,.38) 0 1px,rgba(242,232,211,0) 1px 3px);
  box-shadow:0 22px 40px rgba(0,0,0,.55)}
.leaves.left{left:232px;top:104px;width:460px;height:700px;transform-origin:100% 50%;
  transform:rotate(-3deg) translate(calc(-2px - var(--leaves) * 1px), min(calc(3px + var(--leaves) * 2.2px), 34px))}
.leaves.right{left:690px;top:92px;width:460px;height:712px;transform-origin:0 50%;
  transform:rotate(2deg) translate(calc(2px + var(--leaves) * 1px), min(calc(3px + var(--leaves) * 2.2px), 34px))}

/* A line lifted from the reception, written on the loose sheet below the book between residents. */
.s3-note{left:36px;top:124px;width:292px;font-size:19px;line-height:1.3;color:rgba(42,29,20,.62);transform:rotate(-2deg)}
.s3-note cite{display:block;font-size:15px;font-style:normal}

/* The folio */
.stamp{display:inline-block;margin:0 0 2.2em;padding:5px 14px;border:1px solid rgba(110,31,26,.45);transform:rotate(-1.2deg);
  font-family:var(--display);font-variant:small-caps;letter-spacing:.08em;font-size:17px;line-height:1.3;color:var(--oxblood)}
.leaf{margin:3.4em 0 0;padding-top:2.6em;border-top:1px solid #9c8468;position:relative}
.leaf::before{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-5px;background:var(--gold);transform:rotate(45deg)}
.leaf-title{margin:0 0 1em;font-family:var(--display);font-weight:500;font-size:clamp(30px,2.8vw,40px);line-height:1.05}
.leaf-title small{display:block;margin-bottom:6px;font-variant:small-caps;letter-spacing:.14em;font-size:16px;font-weight:400;color:var(--sepia)}
.plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px;margin:0 0 1.8em}
.plates figure{margin:0}
.plates .plate{aspect-ratio:3/2}
.plates.one{grid-template-columns:1fr}

/* WHERE THE WORK LIVES - every link the resident gave, their own credit line, and the invitation to leave. */
.where{margin:3.4em 0 0;padding:clamp(24px,4vw,40px);border:1px solid var(--gold-ink);background:#efe3c8;position:relative}
.where h2{margin:0 0 .6em;font-family:var(--display);font-weight:500;font-size:clamp(28px,2.6vw,36px);line-height:1.1}
.where .credit{font-style:italic}
.where .leave-line{margin:0 0 .6em}
.links{list-style:none;margin:0;padding:0;border-top:1px solid rgba(95,74,54,.25)}
.links li{border-bottom:1px solid rgba(95,74,54,.25)}
.links a,.links .inert{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;font-family:var(--display);font-size:21px;text-decoration:none;color:var(--ink)}
.links a::after{content:"\2192";color:var(--oxblood)}
.links .leave a,.links .leave .inert{font-size:24px;color:var(--oxblood)}
.links .inert{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:8px 0}
.links .inert small{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--sepia)}
.where .seal{bottom:auto;top:-21px;right:24px}

/* Reflections, on the landing: a line from the reception fills the plate where a resident's work would be */
.plate .inner.reflect-plate{font-style:normal;font-size:clamp(24px,2.6vw,36px);line-height:1.3;padding:clamp(24px,4vw,48px);color:rgba(110,31,26,.8)}

/* Reflections, in the folio */
.reflect{margin:0 0 1.6em;padding:0 0 1.4em;border-bottom:1px solid rgba(95,74,54,.2)}
.reflect p{font-family:var(--display);font-style:italic;font-size:clamp(24px,2.3vw,30px);line-height:1.3;margin:0 0 .3em}
.reflect cite{font-style:normal;font-size:16px;color:var(--sepia)}

/* Once the camera has landed, the menu sits on paper, not wood: cream on cream in the reference, so ink here. */
.viewport.landed .hud nav a{color:var(--ink);text-shadow:none}

/* Apply, before there is an address to apply to */
.btn.soon{cursor:default;opacity:.72}
.soon-note{margin:14px 0 0;font-style:italic;font-size:16px;color:var(--cream)}

/* The colophon closes the book */
.colophon{max-width:620px;margin:0 auto 18px}
.colophon h2{margin:0 0 10px;font-family:var(--display);font-weight:500;font-size:24px;color:#d9b36a}
.colophon p{margin:0 0 8px;font-family:var(--serif);font-size:16px;line-height:1.6}

@media (max-width:760px){
  .plates{grid-template-columns:1fr}
}

/* A resident's real picture in the folio keeps its own shape; the frame fits the art, not the art the frame. */
.plates .plate.natural{aspect-ratio:auto}
.plates .plate.natural .inner.has-art img{height:auto}
.plates:has(.natural){align-items:start}

/* A draft's gaps are written in, never left blank. */
.stamp.draft{border-color:rgba(138,100,32,.6);color:var(--gold-ink)}
.where .to-come{font-style:italic;color:var(--sepia)}