/* THE FILM OPENING (OPENING=film), begun 2 Oct 2026. Loaded after desk.css, which is carried whole and
   unchanged - everything here is an addition, or an override that applies to the film stage only.

   The film's own space is its pixels: 720 x 1280, the straight-on Grok take of the book opening
   (data/film/opening.mp4). film.js scales and moves that space as the camera. On a landscape screen, from 6 Oct
   2026, it is the 16:9 desk film instead, 1280 x 720 (data/film/desk-opening.mp4) - the rules for it are together
   at the end, under THE DESK FILM. */

#stage.film-stage{height:240vh}
.film-world{position:absolute;left:0;top:0;width:720px;height:1280px;transform-origin:0 0;will-change:transform}
.film-still,.film{position:absolute;left:0;top:0;width:720px;height:1280px;display:block}
/* The film shows only once it is actually playing; until then its first frame, as an image, is the scene. */
.film{opacity:0;object-fit:fill;background:transparent}
.film.on{opacity:1}

/* (Until 6 Oct a landscape screen showed this portrait film in the middle of the walnut, and Chris, on his desktop:
   "this cut left page I dont like... we need the whole desk visible". It gets the desk film now - see the end.) */
.film-stage .vig{display:none}
/* (two classes, so it outranks .film-page's own display below - with one, the right-hand page sat on a phone's
   Contents and took its taps: found by the walk, 6 Oct) */
.film-page.film-page-right{display:none}

/* THE CONTENTS, WRITTEN ONTO THE LAST FRAME. The right-hand page measures 498 x 756 film pixels from
   (154,290), turned about 1 degree clockwise (measured off the frame, 2 Oct). The writing sits inside it,
   clear of the gutter's shadow: a 340 x 535 box drawn 1.3 times larger, 442 x 696 film pixels from (188,320).
   Multiply lays the ink into the paper's own mottling and light instead of floating on top of it. */
.film-page{position:absolute;left:188px;top:320px;width:340px;height:535px;transform-origin:0 0;transform:rotate(1deg) scale(1.3);
  display:flex;flex-direction:column;gap:12px;mix-blend-mode:multiply;opacity:0;pointer-events:none}
.film-page.on{opacity:1;pointer-events:auto}
/* The handwritten note goes in the empty space under the list, above the folio number - never over a row,
   and never in the way of a tap (it is a note, not a link). */
.film-page .page-note{left:auto;top:auto;right:6px;bottom:46px;font-size:18px;transform:rotate(-6deg);pointer-events:none}

/* FRESH PAPER - 2 Oct 2026, Chris: the Contents page "much cleaner, like not old looking... fresh looking
   paper. The same as on the actual contents page and the archive page... they have to be all consistent."
   When the film ends, a fresh sheet - the desk's own .paper, the same paper as every other page - fades in
   over each page of the old book, and the Contents is written on that. Each sheet follows its page's outline
   in the last frame (measured 2 Oct; the right page is slightly keystoned, not a rectangle), 2px proud of it,
   and the dark line of the spine is left between them so it still reads as a book. */
.fresh{position:absolute;opacity:0;transition:opacity .9s ease .2s;pointer-events:none}
.film-fresh .fresh{opacity:1}
.fresh-right{left:152px;top:285px;width:505px;height:764px;clip-path:polygon(9px 4px,148px 0,505px 8px,505px 764px,0 764px)}
.fresh-left{left:-4px;top:277px;width:160px;height:773px;clip-path:polygon(0 0,124px 0,160px 9px,153px 773px,0 773px)}
/* the fold of the spine, on the fresh paper */
.fresh-right::after,.fresh-left::after{content:"";position:absolute;inset:0}
.fresh-right::after{background:linear-gradient(90deg,rgba(90,60,30,.30),rgba(90,60,30,.08) 4%,rgba(90,60,30,0) 9%)}
.fresh-left::after{background:linear-gradient(270deg,rgba(90,60,30,.34),rgba(90,60,30,0) 26%)}

/* A MUCH CLEANER CONTENTS - 2 Oct 2026, Chris: "cleaner shows me more representative of a new book being
   written." No dotted leaders, no page references, no rules under rows, no categories, no list of the past:
   four entries, today's resident with one line of what the residency is, and air. Every entry and the
   resident's row are tall enough to be a 44px tap on a 390px phone (52px here x the camera's 0.857 there). */
.film-page{gap:0;padding:0 6px}
.film-page .kicker{margin-top:18px;font-size:15px;letter-spacing:.22em}
.film-page .contents-title{margin:10px 0 0;font-size:50px}
.film-page .rule{width:56px;margin:22px auto 34px;background:rgba(95,74,54,.55)}
.film-page .entry{min-height:52px;align-items:center;gap:0;font-size:22px}
.film-page .entry .n{width:46px;font-size:16px;letter-spacing:.04em}
.film-page .res-list{margin:-6px 0 10px}
.film-page .res.now{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:10px;row-gap:2px;
  min-height:58px;padding:2px 0 8px 46px;border-bottom:0}
.film-page .res.now .who{font-family:var(--display);font-size:25px;font-weight:500;line-height:1.1}
.film-page .res.now .left{font-size:14px}
.film-page .res.now .about{grid-column:1 / -1;font-family:var(--display);font-style:italic;font-size:18px;line-height:1.25;color:var(--sepia)}

/* THE BOOK'S OWN PAGES - the Preface and Write a page open like a residency, with no picture beside them. */
/* (2 Oct, later: no more half-screen gap under the title - the opener is laid out like a resident's, picture beside
   title, and the picture is the page's pencil drawing, faint) */
.spread.solo .solo-sketch{margin:0;display:flex;align-items:center;justify-content:center}
.spread.solo .solo-sketch .sketch{height:min(62vh,560px);opacity:.4}
@media (max-width:760px){ .spread.solo .solo-sketch .sketch{height:28vh} }
.where.invitation .kinds{margin:0 0 24px}
.where.invitation .kinds li{border-color:rgba(138,100,32,.55);color:var(--ink)}
.where.invitation .soon-note{color:var(--sepia)}

/* THE PENCIL DRAWINGS - 2 Oct 2026, Chris: "where did the pencil drawings go of the NFT characters? i would like
   that back on the pages too... maybe in a more lighter scribble so its not so overly prominent." The five booelievers
   drawings (keyed to graphite on 24 Sep), at about a third of their strength: one in the lower right of the Contents,
   clear of every line of text, and small tailpieces at the end of the book's own pages. Which goes where: site.json. */
.sketch{display:block;width:auto;mix-blend-mode:multiply;pointer-events:none}
.film-page .sketch-contents{position:absolute;right:10px;bottom:92px;height:146px;opacity:.38}
.film-page .page-note{left:26px;right:auto;bottom:40px}
.tailpiece{display:flex;justify-content:center;align-items:flex-end;gap:22px;margin:2.6em 0 .4em}
.tailpiece .sketch{height:140px;opacity:.36}
.close .tailpiece{margin:0 0 26px}
/* 8 Oct: the fork city's own doodle at the head of its note, and the wide Devcon VIII landmarks as tailpieces - sized
   by the box they sit in (they are wide strips), at the same light strength as every other drawing. */
.headpiece{display:flex;justify-content:center;margin:.2em 0 1.4em}
.headpiece .sketch{height:auto;max-width:min(100%,440px);max-height:150px;opacity:.36}
.tailpiece .sketch.sk-skyline,.tailpiece .sketch.sk-gateway,.tailpiece .sketch.sk-sealink{height:auto;max-width:min(100%,540px);max-height:140px}
/* drawn in like the ink, but only ever to its own light strength */
.film-page.writing .sketch-contents.ink{animation-name:ink-sketch;animation-duration:1.4s}
@keyframes ink-sketch{from{clip-path:inset(-10% 100% -10% -10%)}to{clip-path:inset(-10% -10% -10% -10%)}}

/* THE SCROLL ENDS ON PAPER: the Archive, then the colophon and the project line, and nothing after. */
.folio:has(.close){padding-bottom:0}
.close{max-width:620px;margin:clamp(56px,7vw,96px) auto 0;padding:0 0 calc(72px + env(safe-area-inset-bottom,0px));text-align:center}
.close::before{content:"";display:block;width:9px;height:9px;margin:0 auto 26px;background:var(--gold);transform:rotate(45deg)}
.close p{margin:0 0 8px;font-size:16px;line-height:1.6;color:var(--sepia)}
.close .project{margin-top:16px;font-family:var(--display);font-variant:small-caps;letter-spacing:.12em;font-size:17px;color:var(--ink)}
/* past either end of the page, the browser's bounce shows wood at the top and paper at the bottom */
body:has(.film-stage){background:linear-gradient(#120a05 0 50%,#f2e8d3 50% 100%)}

/* "BEING WRITTEN": each line is inked in, left to right, one after another. film.js numbers the lines. */
/* (the first line waits ~1s: the camera leans in and the fresh paper settles before the ink starts) */
.film-page.writing .ink{animation:ink .62s cubic-bezier(.35,.1,.25,1) both;animation-delay:calc(var(--i,0) * 150ms + 1050ms)}
.film-page.writing .page-note.ink{animation-duration:1.6s}
@keyframes ink{
  from{clip-path:inset(-30% 100% -30% -10%);opacity:.15}
  to{clip-path:inset(-30% -10% -30% -10%);opacity:1}
}

/* Before the film and while it plays, the page does not scroll: a tap, a scroll or a key opens the book. */
html.film-locked,html.film-locked body{overflow:hidden;overscroll-behavior:none}
.film-closed .film-stage .viewport{cursor:pointer}

/* The book's name, on wood, where the desk had it. On a phone the menu needs the width, and the cover says it. */
.film-brand{left:max(24px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 22px);z-index:3;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.viewport.landed .film-brand{opacity:0}
@media (max-width:760px){ .film-brand{display:none} }

/* ---------- THE WELCOME - 6 Oct 2026 ----------
   Chris: "Superimposed on top of everything, on the left side. I would like a welcome message... As the book cover
   opens, it fades left off page and the main page opens into the contents page." And 2 Oct: "Our Welcome would be a
   layer above in our own style text font colour etc on top of all of that". His words, in the book's own type, cream
   over a dark wash so they read on the wood and the loose sheet alike. It lies over the closed book only: shown when
   film.js marks the book closed, gone (to the left) when the film begins to play. Taps go through it to the book. */
.welcome{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.welcome::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,7,3,.80) 0%,rgba(12,7,3,.62) 24%,rgba(12,7,3,0) 41%)}
.welcome-text{position:absolute;left:max(48px,5vw);top:50%;width:min(440px,31vw);transform:translateY(-50%)}
.welcome-title{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(34px,3.3vw,56px);line-height:1.04;color:#f2e3c0;text-shadow:0 2px 14px rgba(0,0,0,.6);text-wrap:balance}
.welcome-rule{width:56px;height:1px;margin:22px 0 20px;background:var(--gold)}
.welcome p{margin:0 0 .8em;font-family:var(--serif);font-size:clamp(17px,1.3vw,21px);line-height:1.55;color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,.7)}
html.film-closed .welcome{opacity:1;visibility:visible;transition:opacity .9s ease}
/* "it fades left off page" - as the film starts to play */
html.film-open .welcome{opacity:0;visibility:hidden;transform:translateX(-90px);
  transition:opacity 1.1s ease .2s,transform 1.5s cubic-bezier(.45,0,.2,1) .2s,visibility 0s linear 1.7s}
/* a phone: across the top, under the menu, above the book; the wash comes down from the top */
@media (orientation:portrait){
  .welcome::before{background:linear-gradient(180deg,rgba(12,7,3,.84) 0%,rgba(12,7,3,.64) 25%,rgba(12,7,3,0) 40%)}
  .welcome-text{left:24px;right:24px;width:auto;top:calc(env(safe-area-inset-top,0px) + 78px);transform:none}
  .welcome-title{font-size:30px}
  .welcome-rule{margin:14px 0 12px}
  .welcome p{font-size:16px;line-height:1.45;margin:0 0 .5em}
}
/* a phone on its side */
@media (orientation:landscape) and (max-height:500px){
  .welcome-title{font-size:26px}
  .welcome-rule{margin:12px 0}
  .welcome p{font-size:15px;line-height:1.45}
}

/* ---------- THE DESK FILM, ON A LANDSCAPE SCREEN - 6 Oct 2026 ----------
   Chris, 2 Oct: "we need the whole desk visible on the desktop view... maintain the text inside the book... but with
   the whole book visible on a desk"; then "opening on a clean page with the contents as we built earlier". So: the
   16:9 film of round 32, the Contents written on its left page and Now in residence on its right, on fresh paper.
   MEASURED OFF ITS LAST FRAME (data/film/desk-last.jpg, 1280 x 720), 6 Oct, by edge scans fitted to straight lines:
   the spine is the darkest column, x 585.8 (it leans 0.2 degrees); the left page runs from its outer edge (x 283 at
   the top, 277 at the foot) to the spine, top y 122, foot y 579-583; the right page from the spine to x 869, top
   y 122.6 at the spine rising to 128.8 at the edge, foot y 583. The pages are square to the frame, so nothing is
   turned. Each fresh sheet follows its page 2px proud, and 2.5px of the dark spine is left between them. */
@media (orientation:landscape){
  .film-stage .vig{display:block}
  .film-world,.film-still,.film{width:1280px;height:720px}
  /* the film's own edges, softened, for a screen wider or squarer than 16:9 that shows past them */
  .film-world{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%),linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%),linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);
    mask-composite:intersect}
  .fresh-left{left:277px;top:120px;width:307.5px;height:465px;clip-path:polygon(6px 0,307.5px 0,307.5px 465px,0 461.5px)}
  .fresh-right{left:587px;top:120px;width:284px;height:465px;clip-path:polygon(0 .5px,284px 6.8px,284px 465px,0 465px)}
  .fresh-left::after{background:linear-gradient(270deg,rgba(90,60,30,.30),rgba(90,60,30,.08) 4%,rgba(90,60,30,0) 9%)}
  /* The Contents on the left page (27px clear of the spine, 22 of the outer edge), Now in residence on the right
     (24 clear of the spine, 18 of the edge); both drawn at three quarters of their size in the film's pixels. */
  .film-page{left:303px;top:146px;width:340px;height:540px;transform:scale(.75)}
  .film-page.film-page-right{display:flex;left:611px;top:146px;width:320px;height:540px}
  /* The resident's work is shown as it is: their picture is not multiplied into the paper like the ink. */
  .film-page-right{mix-blend-mode:normal}
  .film-page-right .feature{gap:12px}
  .film-page-right .plate.feat{height:200px}
  .film-page-right .feat-title{font-size:34px}
  .film-page-right .feat-by{font-size:18px}
  .film-page-right .feat-dates{font-size:16px;line-height:1.35}
  .film-page-right .turn{font-size:21px}
  .film-page-right .quote{font-size:18px;line-height:1.28}
  .film-page-right .quote + .quote{padding-top:10px}
  .film-page-right .quote cite{font-size:13px}
}

@media (prefers-reduced-motion: reduce){ .film-page.writing .ink{animation:none} .fresh{transition:none} .welcome{transition:none;transform:none} }

/* ---------- 6 Oct 2026, later: more of the pencil, a little colour, the project line in gold ----------
   Chris: more of the graphite characters across the book's own pages; the end of the book shows all five, Shiba
   first; "The Ledger, a BOOELIEVERS community project", gold; colour "all over the book to spice it up a bit".
   The pencil stays graphite. Colour comes from a faint wash behind each drawing (multiplied into the paper, so
   it only ever tints), oxblood on the book's kickers, gold on its rules. Drawings were enlarged 3x for sharper zoom. */
/* (the coloured washes behind the drawings were tried and refused, 6 Oct: pencil only) */
.film-page .kicker{color:var(--oxblood)}
.film-page .rule{background:var(--gold);height:2px}
.film-page-right .feat-by{color:var(--gold-ink)}
.film-page .res.now .who{color:var(--oxblood)}
.also h2{position:relative}
.also h2::after{content:"";display:block;width:56px;height:2px;margin-top:10px;background:var(--gold)}
.also{position:relative}
.sketch-archive{position:absolute;right:0;top:-70px;height:128px;opacity:.38}
@media (max-width:760px){ .sketch-archive{height:84px;top:-44px} }
/* the end of the book: all five, Shiba first, small enough to stand in a row on a phone */
.close .tailpiece{gap:clamp(8px,2.2vw,22px);flex-wrap:wrap}
.close .tailpiece .sketch{height:clamp(84px,17vw,140px)}
.close .project{color:#7d5a1a}
.close .project::before,.close .project::after{content:"";display:inline-block;width:26px;height:1px;margin:0 14px .28em;background:var(--gold)}
@media (max-width:760px){ .close .project::before,.close .project::after{display:none} }

/* more pencil on the Contents: Pepe beside the rows, Doge in the corner (the saint keeps the lower right) */
.film-page .sketch-contents.sk-pepe{right:8px;bottom:auto;top:172px;height:112px;opacity:.4}
.film-page .sketch-contents.sk-doge{right:10px;bottom:auto;top:20px;height:84px;opacity:.36}
/* The right-hand page between residents: blank paper headed by the one word */
.film-page-right .feature-bare{justify-content:flex-start}
.film-page-right .feature-bare .feat-title{margin-top:34px}
/* THE LOOSE LEAVES, in the film's own pixels (desk-last.jpg 1280x720): the left sheet leans 14 degrees anticlockwise, the
   right sheet 14 clockwise; the book hides the left sheet's right edge, so its doodles stay in the left 150px. */
.loose{display:none;position:absolute;opacity:0;pointer-events:none;transition:opacity 1.4s ease .9s}
.film-fresh .loose{opacity:1}
.loose .sketch,.loose svg{position:absolute;mix-blend-mode:multiply}
.loose .sketch.half{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 82%);mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 82%)}
.loose .eth{opacity:.85}
.loose .scribble{opacity:.7}
@media (orientation:landscape){
  .loose{display:block}
  .loose-left{left:140px;top:95px;width:130px;height:300px;transform:rotate(-14deg);transform-origin:50% 50%}
  .loose-left .e1{left:14px;top:22px;width:34px}
  .loose-left .s1{left:42px;top:34px;width:62px;opacity:.65}
  .loose-left .sketch.sk-npc{left:4px;top:100px;height:150px;opacity:.85}
  .loose-right{left:930px;top:295px;width:170px;height:270px;transform:rotate(14deg);transform-origin:50% 50%}
  .loose-right .e2{left:112px;top:18px;width:26px}
  .loose-right .s2{left:14px;top:20px;width:70px}
  .loose-right .sketch.sk-shiba{left:44px;top:78px;height:140px;opacity:.85}
  .loose-right .sketch.sk-pepe{left:2px;top:172px;height:100px;opacity:.8}
  .loose-right .sketch.sk-saint{left:108px;top:168px;height:104px;opacity:.8}
  .loose-left .sketch.sk-doge{left:70px;top:196px;height:90px;opacity:.8}
}
@media (prefers-reduced-motion: reduce){ .loose{transition:none} }

/* THE CHARTER on Write a page (6 Oct): Chris's one rule, in his words, set like a pull line with the gold bar */
.where.invitation .charter-kicker{margin:26px 0 8px;font-family:var(--display);font-variant:small-caps;letter-spacing:.14em;font-size:17px;color:var(--oxblood)}
.where.invitation .charter{hyphens:manual;-webkit-hyphens:manual;margin:0 0 28px;padding-left:1.1em;border-left:2px solid var(--gold);font-family:var(--display);font-style:italic;font-size:clamp(21px,2.2vw,26px);line-height:1.3;color:var(--ink)}

/* Apply: a plain line, not a button (6 Oct, Chris) */
.where.invitation .apply-line{margin:0;font-family:var(--display);font-size:clamp(20px,2vw,24px);color:var(--ink)}
.where.invitation .apply-line a{color:var(--oxblood);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;overflow-wrap:anywhere}

/* The Reflections page while it is empty: what it will hold, and a ghost of one entry (labelled, never a real quote) */
.film-page-right .refl-note{margin:14px 0 0;font-family:var(--display);font-style:italic;font-size:18px;line-height:1.3;color:var(--sepia)}
.film-page-right .refl-example{margin:26px 0 0;padding:14px 0 0;border-top:1px solid rgba(95,74,54,.25);font-family:var(--display);font-style:italic;font-size:21px;line-height:1.28;color:rgba(42,29,20,.45)}
.film-page-right .refl-example small{display:block;margin-bottom:8px;font-variant:small-caps;font-style:normal;letter-spacing:.14em;font-size:14px;color:var(--oxblood)}
.film-page-right .refl-example cite{display:block;margin-top:6px;font-size:13px;font-style:normal;font-family:var(--serif)}

/* ---------- NOTES - 8 Oct 2026 ----------
   Chris, on the mockup: "the layout of those pages is greatt I love it!" The book's own pages on the forks, opened like a
   residency: the plate beside the fork's name on the landing, then why it happened, what it did, and the day it went live
   in the folio. No small print on a fork's page; every citation is on Sources and credits (his word, 8 Oct). */
/* the line under Notes on the Contents, in the same hand as a resident's one line (not a resident row) */
.film-page .note-line{display:block;margin:-12px 0 0;padding:0 0 0 46px;font-family:var(--display);font-style:italic;font-size:18px;line-height:1.25;color:var(--sepia);text-decoration:none}
/* the plate on the landing: the plate's own transparent render on the landing's paper, its whole shape kept */
.note-spread .note-plate{margin:0;display:flex;align-items:center;justify-content:center}
.note-plate img{display:block;width:100%;height:auto;max-height:min(72vh,640px);object-fit:contain}
.note-h{margin:2.4em 0 .8em;font-family:var(--display);font-variant:small-caps;letter-spacing:.12em;font-weight:500;font-size:20px;line-height:1.2;color:var(--oxblood)}
.column.note > .note-h:first-child,.column.note > .stamp + .note-h{margin-top:0}
.column .epigraph{margin:0 0 2em;padding:0 clamp(0px,4vw,40px);text-align:center;font-family:var(--display);font-style:italic;font-size:clamp(22px,2vw,27px);line-height:1.35;color:var(--sepia)}
.epigraph cite{display:block;margin-top:.6em;font-style:normal;font-variant:small-caps;letter-spacing:.12em;font-size:15px}
/* the day it went live: the block, the moment, the vote, the pieces */
.day{margin:3em 0 0;padding:clamp(24px,4vw,40px);border:1px solid var(--gold-ink);background:#efe3c8}
.day h2{margin:0 0 .5em;font-family:var(--display);font-weight:500;font-size:clamp(28px,2.6vw,36px);line-height:1.1}
.column .day .block{margin:0;font-family:var(--display);font-variant:small-caps;letter-spacing:.12em;font-size:19px;line-height:1.4;color:var(--oxblood)}
.column .day .when{margin:.2em 0 0;font-style:italic;font-size:17px;line-height:1.5;color:var(--sepia)}
.column .day .vote{margin:.9em 0 .15em;font-family:var(--display);font-size:clamp(25px,2.6vw,32px);line-height:1.2;color:var(--ink);hyphens:none}
.day .vote b{font-weight:500;color:var(--oxblood)}
.column .day .small{margin:0;font-style:italic;font-size:16px;line-height:1.5;color:var(--sepia)}
.pieces{list-style:none;margin:1.5em 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.pieces li{padding-left:16px;border-left:2px solid rgba(201,151,63,.6);font-size:16px;line-height:1.45}
.pieces .when{display:block;font-family:var(--display);font-variant:small-caps;letter-spacing:.12em;font-size:15px;color:var(--oxblood)}
.pieces a{font-family:var(--display);font-size:clamp(20px,1.8vw,23px);line-height:1.3;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(110,31,26,.35)}
.pieces i{display:block;margin-top:2px;color:var(--sepia)}
.pieces .line{display:block;margin-top:4px;font-style:italic;color:var(--ink)}
.blank{display:inline-block;min-width:96px;border-bottom:1px dotted #8a7458;vertical-align:baseline;height:1em}
/* the opener: every plate, each one the way to its note */
.note-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px;margin:0 0 .6em}
.note-tile{display:flex;flex-direction:column;align-items:center;min-height:44px;text-decoration:none;color:var(--ink)}
.note-tile img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain}
.note-tile .nm{margin-top:4px;font-family:var(--display);font-variant:small-caps;letter-spacing:.12em;font-size:19px;color:var(--oxblood)}
.note-tile .yr{font-style:italic;font-size:15px;color:var(--sepia)}
.note-tile:hover .nm{text-decoration:underline}
.note-more{margin:2em 0 0}
/* Sources and credits */
.srcs{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:10px 18px;margin:0;font-size:16px;line-height:1.45}
.srcs dt{font-family:var(--display);font-variant:small-caps;letter-spacing:.08em;font-size:18px;color:var(--oxblood)}
.srcs dd{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.srcs a,.srcs-2 a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(110,31,26,.3);overflow-wrap:anywhere;align-self:flex-start}
.srcs-2{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.45}
.srcs-2 a{font-family:var(--display);font-size:20px}
.srcs-2 i{display:block;color:var(--sepia)}
.column .small-note{margin:1.4em 0 0;font-style:italic;font-size:16px;color:var(--sepia)}
@media (max-width:760px){
  .note-grid{gap:16px 14px}
  .note-plate img{max-height:36vh}
  .srcs{grid-template-columns:1fr;gap:2px}
  .srcs dd{margin-bottom:12px}
}
/* more of the characters (Chris, 8 Oct: "notes shouldd have m,ore of the characters penciled in"): two on the openers,
   one in the margin of every fork's landing, and a tailpiece at the end of every note - all at the tailpiece's light strength */
.spread.solo .solo-sketch.two{gap:clamp(8px,2vw,28px)}
.spread.solo .solo-sketch.two .sketch{height:min(48vh,430px)}
.note-margin{justify-content:flex-start;margin:.6em 0 0}
.note-margin .sketch{height:110px}
@media (max-width:760px){ .spread.solo .solo-sketch.two .sketch{height:22vh} .note-margin{display:none} }

/* ---------- GILT, AND MORE OF THE ETHEREUM MARK - 8 Oct 2026 ----------
   Chris: "Maybe we use some goldd embossed lettering throughout for the headders and main wordds. things like The Ledger can
   still be thatt awesome red." Gold leaf pressed into the paper: a metal gradient clipped to the letters, a light edge
   below and a shadow above (drop-shadow, because a text-shadow would paint over a clipped gradient). */
.film-page .contents-title,.landing .meta h1,.column .note-h,.day h2,.leaf-title,.where h2,.also h2,.film-page-right .feat-title,.welcome-title{
  background:linear-gradient(180deg,#e7c470 0%,#c39236 34%,#7d5615 50%,#b98a33 66%,#e0bb66 86%,#a87c2c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,248,228,.75)) drop-shadow(0 -1px 0 rgba(70,44,12,.30))}
.leaf-title small{-webkit-text-fill-color:var(--sepia)}
/* on the wood, the welcome's gold is lit from the lamp instead */
.welcome-title{text-shadow:none;background:linear-gradient(180deg,#fbe7a6 0%,#e2b65a 45%,#a8792a 60%,#f0cf7e 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}
/* The Ledger stays the red */
#filmPage > .kicker:first-child{color:var(--oxblood)}

/* "More dooddles of ETH logo aroundd the place also, randdomly, just not on anyones residence": the loose sheets' pencil mark,
   on the book's own pages only, light, each leaning its own way. */
.eth-doodle{display:block;width:auto;pointer-events:none;opacity:.38;mix-blend-mode:multiply}
.eth-doodle.r0{transform:rotate(-14deg)} .eth-doodle.r1{transform:rotate(9deg)} .eth-doodle.r2{transform:rotate(-4deg)}
.eth-doodle.r3{transform:rotate(17deg)} .eth-doodle.r4{transform:rotate(-22deg)}
.film-page .eth-contents{position:absolute;right:14px;top:58px;height:54px}
.spread.solo,.spread.note-spread{position:relative}
.eth-spread{position:absolute;height:clamp(54px,6vw,92px)}
.eth-spread.p0{right:2%;top:-4%} .eth-spread.p1{left:-1%;bottom:-6%} .eth-spread.p2{right:8%;bottom:-8%}
.column .eth-margin{float:right;height:74px;margin:.2em -6px .8em 1.6em}
.column .eth-margin.p1{float:left;margin:.2em 1.6em .8em -6px}
.also{position:relative} .eth-archive{position:absolute;left:-2px;top:-58px;height:64px}
.close{position:relative} .eth-close{height:58px;margin:0 auto 18px}
@media (max-width:760px){
  .eth-spread{height:46px} .eth-spread.p1{bottom:auto;top:-2%;left:auto;right:4%}
  .column .eth-margin{height:56px}
  .eth-archive{top:-44px;height:48px}
}
/* (8 Oct: with Notes on the Contents and a resident in residence, the handwritten note sat on "Write a page" - the air
   above the list is tightened and the line under Notes kept to one line, so the note has its own space again) */
.film-page .kicker{margin-top:10px}
.film-page .rule{margin:16px auto 22px}
.film-page .note-line{font-size:16px;white-space:nowrap}
.film-page .page-note{bottom:30px;font-size:16px}
/* Chris, 8 Oct, choosing from four golds: "D is best" - flat old gold sunk into the paper, like the brass on the cover.
   (Replaces the gradient above, whose dark band through the letters read as cheap shine: "The gold is wrong".) */
.film-page .contents-title,.landing .meta h1,.column .note-h,.day h2,.leaf-title,.where h2,.also h2,.film-page-right .feat-title{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#a8843f;-webkit-text-fill-color:#a8843f;filter:none;
  text-shadow:0 1px 0 rgba(255,250,235,.95),0 -1px 0 rgba(70,45,15,.35)}
.welcome-title{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#d4b06a;-webkit-text-fill-color:#d4b06a;filter:none;
  text-shadow:0 -1px 0 rgba(0,0,0,.55),0 1px 0 rgba(255,236,190,.25),0 2px 14px rgba(0,0,0,.6)}

/* WHITE PAPER (8 Oct 2026). Chris: "we may change to white paper. or more purples given ETH and BOOE themes... but lets
   go white". The film opening only - the desk build keeps its cream, byte for byte. Every sheet of the book's own paper,
   the boxed panels on it and the edge of the Archive block go from warm cream to a soft off-white; the ink, the gold,
   the oxblood and the pencil (which multiplies onto whatever paper it lies on) are unchanged. */
:root{--paper:#fdfcfa;--paper-shade:#ecebe7}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#fdfcfa; } }
:root[data-theme="dark"]{--paper:#fdfcfa}
.paper{background-color:#fdfcfa;background-image:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.9) 0%,rgba(253,252,250,0) 60%),radial-gradient(ellipse at 80% 90%,rgba(150,148,142,.10) 0%,rgba(253,252,250,0) 55%)}
.folio{background-image:radial-gradient(ellipse at 80% 0%,rgba(150,148,142,.07),transparent 50%)}
.plate,.where,.day{background:#f5f4f0}
.leaves{background-color:#e9e7e1;background-image:repeating-linear-gradient(0deg,rgba(110,108,100,.30) 0 1px,rgba(253,252,250,0) 1px 3px)}
body:has(.film-stage){background:linear-gradient(#120a05 0 50%,#fdfcfa 50% 100%)}
/* 8 Oct: all seven booelievers at the close (round 34 added vitalik and human). On a wide screen they stand in one row,
   each in an equal share of the line and never taller than the other tailpieces; a phone keeps two rows, four and three. */
@media (min-width:761px){
  .close .tailpiece{flex-wrap:nowrap;gap:clamp(6px,1.2vw,18px);width:min(820px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%)}   /* wider than the 620px close */
  .close .tailpiece .sketch{flex:1 1 0;min-width:0;width:auto;height:auto;max-height:140px;object-fit:contain;object-position:50% 100%}
}
@media (max-width:760px){
  .close .tailpiece .sketch{flex:0 0 calc(25% - 10px);width:auto;height:auto;max-height:clamp(70px,22vw,96px);object-fit:contain;object-position:50% 100%}
}