html{color-scheme:light}body{margin:0}
img{max-width:100%}[hidden]{display:none!important}
  /* An open notebook on a dark desk. Left leaf: only Marcus. Right leaf:
     only the editor - the plate, who the man was, where he came from, and
     where the thought comes from. The gutter between them is the rule. */
  :root{
    --desk:#2b2620; --paper:#efe6d4; --paper2:#e7dcc6; --ink:#211c14; --soft:#6d6353;
    --accent:#6b6134; --rule:#cdbfa4; --glow:rgba(107,97,52,.10); --edge:rgba(33,28,20,.17);
    --book:"EB Garamond",Garamond,Georgia,"Times New Roman",serif;
    /* the entry only. Everything a modern editor wrote stays set in type,
       so the two can never be confused for one another. */
    --hand:"Caveat","EB Garamond",Georgia,serif;
    /* Two noises: long fibres running with the sheet, and a coarse
       mottle for the blotching an animal skin never loses. The first
       version was set so faint it may as well not have been there. */
    --fibre:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.03 1.1' numOctaves='5' seed='11'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.17'/></feComponentTransfer></filter><rect width='260' height='260' filter='url(%23f)'/></svg>");
    --mottle:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.009' numOctaves='3' seed='4'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.13'/></feComponentTransfer></filter><rect width='420' height='420' filter='url(%23m)'/></svg>");
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
    --desk:#100e0b; --paper:#1e1a14; --paper2:#191510; --ink:#e8dfcc; --soft:#9b9280;
    --accent:#b7a066; --rule:#38301f; --glow:rgba(183,160,102,.10); --edge:rgba(0,0,0,.5);
    color-scheme:dark;}}
  :root[data-theme="dark"]{
    --desk:#100e0b; --paper:#1e1a14; --paper2:#191510; --ink:#e8dfcc; --soft:#9b9280;
    --accent:#b7a066; --rule:#38301f; --glow:rgba(183,160,102,.10); --edge:rgba(0,0,0,.5);
    color-scheme:dark;}

  *{box-sizing:border-box}
  /* .spread is display:grid, which outranks the UA rule for [hidden]. The
     publish skeleton supplies this with !important, so the bug only shows
     when the file is opened on its own - which is how it was found. */
  [hidden]{display:none!important}
  /* THE ROOM IS LIT EVEN WITH THE LAMP UP.
     Three things, none of which touch the text: the desk falls off into
     shadow at its corners, a warm wash sits over everything at low
     alpha, and the leaf itself catches more light at the top than at the
     foot. On the background and as an overlay with no blend mode, so
     contrast on the words is exactly what it was. */
  body{background:
      radial-gradient(120% 90% at 50% -8%, #3a332a 0%, var(--desk) 58%, #0a0907 100%),
      var(--desk);
    color:var(--ink);font-family:var(--book);margin:0;
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0;
    -webkit-font-smoothing:antialiased}
  .wrap{max-width:1180px;margin:0 auto;padding-block:34px 54px}

  .head{text-align:center;margin:0 0 24px;color:var(--paper)}
  .head h1{font-size:clamp(28px,5.6vw,42px);font-weight:400;margin:0;text-wrap:balance}
  .head .by{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;
    text-transform:uppercase;opacity:.62;margin-top:9px}

  /* the book */
  /* PARCHMENT: fibre from a turbulence filter and two soft stains, all
     in the background so none of it sits over the words. */
  .book{position:relative;background:
      linear-gradient(180deg, rgba(255,226,170,.13) 0%, rgba(255,226,170,0) 24%),
      radial-gradient(38% 26% at 12% 9%, rgba(140,104,52,.13), rgba(0,0,0,0) 70%),
      radial-gradient(30% 22% at 92% 72%, rgba(126,94,44,.12), rgba(0,0,0,0) 70%),
      radial-gradient(14% 10% at 72% 23%, rgba(120,88,40,.10), rgba(0,0,0,0) 72%),
      radial-gradient(18% 12% at 31% 88%, rgba(120,88,40,.09), rgba(0,0,0,0) 74%),
      var(--mottle), var(--fibre),
      var(--paper);
    border-radius:2px;
    /* the block of pages underneath, and the book sitting on the desk */
    box-shadow:
      0 1px 0 1px var(--paper2), 0 2px 0 2px rgba(0,0,0,.1),
      0 3px 0 3px var(--paper), 0 4px 0 4px rgba(0,0,0,.08),
      0 5px 0 5px var(--paper2),
      0 24px 50px rgba(0,0,0,.55), 0 1px 0 rgba(255,236,196,.1) inset}
  .cover{margin:0;border-bottom:1px solid var(--rule)}
  .cover img{display:block;width:100%;height:auto;border-radius:3px 3px 0 0}
  .opening{font-size:17px;line-height:1.7;color:var(--soft);margin:0;
    padding:22px clamp(20px,4vw,42px);text-align:center;max-width:62ch;margin-inline:auto}
  .opening em{color:var(--ink);font-style:italic}

  .spread{display:grid;grid-template-columns:1fr 1fr;position:relative;
    border-top:1px solid var(--rule)}
  /* The spine. Each leaf darkens as it curves down into the gutter, and
     lifts again at its outer edge, which is what makes a flat rectangle
     read as a sheet with a bend in it. */
  .spread::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:
      linear-gradient(90deg, rgba(60,44,20,.09) 0%, rgba(0,0,0,0) 7%,
        rgba(0,0,0,0) 41%, rgba(60,44,20,.07) 47.5%, rgba(40,28,10,.2) 50%,
        rgba(60,44,20,.07) 52.5%, rgba(0,0,0,0) 59%,
        rgba(0,0,0,0) 93%, rgba(60,44,20,.09) 100%)}
  .spread::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
    background:rgba(40,28,10,.3);pointer-events:none;z-index:1}
  .verso{padding:clamp(26px,3.6vw,46px) clamp(22px,3.2vw,40px);position:relative;
    display:flex;flex-direction:column;justify-content:flex-start}
  .recto{padding:clamp(26px,3.6vw,46px) clamp(22px,3.2vw,40px);display:flex;flex-direction:column;gap:20px;
    background:var(--mottle),linear-gradient(90deg,rgba(90,66,30,.045),rgba(0,0,0,0) 22%)}

  /* Rubricated, the way a scribe numbers an entry: at the head of the
     line, in the same hand, in another colour. It used to float in the
     top corner as a folio mark, which is a printer's habit. */
  .num{color:var(--accent);margin-right:.18em;white-space:nowrap}
  .numonly{margin-bottom:.1em}
  /* Caveat runs small for its point size, hence the jump. */
  .said{font-family:var(--hand);font-size:clamp(25px,3.1vw,34px);line-height:1.46;margin:0;
    text-wrap:pretty;letter-spacing:.004em}
  /* No drop cap. It is a printer's convention, nobody puts one in their
     own notebook, and floating it made the hand wrap raggedly round it. */
  .litany{font-family:var(--hand);margin:0;padding:0;list-style:none;display:flex;flex-direction:column;
    gap:9px;font-size:clamp(20px,2.2vw,25px);line-height:1.42}
  .litany li{padding-left:18px;position:relative}
  .litany li::before{content:"";position:absolute;left:0;top:.74em;width:8px;height:1px;background:var(--accent)}

  /* THE PLATE IS TAPED IN, not printed on the page. It is a separate
     piece of paper: a cream mount, a small fixed tilt (--tilt, set per
     entry from its number so a plate never moves between visits), a
     shadow that puts it ON the leaf rather than in it, and two strips
     of tape over the top corners. The tape is translucent, so the
     parchment shows through it, and its ends are torn rather than cut -
     a clean rectangle reads as a graphic, a ragged one reads as tape. */
  .plate{position:relative;margin:4px 0 30px;padding:9px 9px 11px;
    background:linear-gradient(160deg,var(--paper) 0%,var(--paper2) 100%);
    border:1px solid var(--rule);transform:rotate(var(--tilt,-.6deg));
    box-shadow:0 1px 2px rgba(0,0,0,.14), 0 10px 22px rgba(0,0,0,.22)}
  .plate img{display:block;width:100%;height:auto}
  .plate.tall{max-width:290px;margin-inline:auto}
  /* Two strips across the top corners, each half on the photograph and
     half on the leaf - which is the only thing that makes it read as
     stuck down rather than printed. Translucent, so the parchment and
     the picture both show through, with a bright edge along the top
     where light catches the film. The ends are FEATHERED with a mask,
     not cut into a zigzag: at this size a drawn tear renders as a
     chunky arrow, while a soft end reads as tape every time. */
  .plate::before,.plate::after{content:"";position:absolute;z-index:2;
    width:94px;height:21px;top:4px;
    background:linear-gradient(100deg,
      rgba(252,246,226,.44) 0%, rgba(238,229,203,.26) 42%,
      rgba(252,247,230,.4) 70%, rgba(236,227,200,.28) 100%);
    box-shadow:0 1px 2px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,253,244,.34);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7px,
      #000 calc(100% - 7px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7px,
      #000 calc(100% - 7px),transparent 100%)}
  .plate::before{left:-31px;transform:rotate(-45deg)}
  .plate::after{right:-31px;transform:rotate(45deg)}
  @media (max-width:700px){
    .plate::before,.plate::after{width:74px}
    .plate::before{left:-24px}.plate::after{right:-24px}
  }

  .bio p{margin:0;font-size:15.5px;line-height:1.66;color:var(--ink)}
  .who b{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.04em;font-weight:500}
  .who span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--soft);margin-top:3px}
  .lb{position:relative;height:56px;margin:4px 0 2px}
  .lb-rule{position:absolute;left:0;right:0;top:30px;height:1px;background:var(--rule)}
  /* the years he was writing this: a column through the whole thing */
  .lb-now{position:absolute;top:14px;height:22px;background:rgba(120,92,40,.14);
    border-left:1px dashed var(--soft);border-right:1px dashed var(--soft)}
  .lb-nowlab{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
    font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
  /* the person */
  .lb-band{position:absolute;top:25px;height:11px;border-radius:2px;background:var(--accent)}
  .lb-band.maybe{background:repeating-linear-gradient(90deg,
    var(--accent) 0 3px, rgba(0,0,0,0) 3px 6px)}
  .lb-span{position:absolute;top:38px;transform:translateX(-50%);white-space:nowrap;
    font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--accent)}
  .lb-none{position:absolute;top:38px;left:0;font-family:var(--mono);font-size:9px;
    letter-spacing:.04em;color:var(--soft);font-style:italic}
  .lb-tick{position:absolute;top:26px;width:1px;height:9px;background:var(--soft);opacity:.75}
  /* every label sits at its own year, which is the whole point */
  .lb-pt{position:absolute;top:14px;transform:translateX(-50%);white-space:nowrap;
    font-family:var(--mono);font-size:8px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
  .lb-pt.first{transform:none}
  .lb-pt.last{transform:translateX(-100%)}
  .thought .lab,.mapbox .lab,.lifebox .lab{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--soft);margin-bottom:7px}
  .thought p{margin:0;font-size:15.5px;line-height:1.64;color:var(--ink)}

  /* turning the page */
  .c-sub{font-family:var(--book);font-size:17px;line-height:1.6;color:var(--soft);margin:14px 0 0}
  .c-list{list-style:none;margin:0;padding:0;counter-reset:none;display:flex;flex-direction:column}
  .c-list li+li{border-top:1px solid var(--rule)}
  .c-list button{display:grid;grid-template-columns:34px 1fr;gap:2px 12px;width:100%;text-align:left;
    background:none;border:0;cursor:pointer;padding:9px 2px;color:var(--ink);font-family:var(--book)}
  .c-list button:hover .c-who{color:var(--accent)}
  .c-n{grid-row:span 2;font-family:var(--mono);font-size:10.5px;color:var(--accent);
    letter-spacing:.08em;padding-top:4px}
  .c-who{font-size:18px;line-height:1.3}
  .c-role{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
  .c-list button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  /* THE TURN. A leaf sized to half the spread, hinged at the spine,
     swinging through 180 degrees. The content behind it swaps at the
     halfway point, so what you see when it lands is the next page. */
  .bookwrap{perspective:2200px;perspective-origin:50% 42%}
  .turner{position:absolute;top:0;bottom:0;width:50%;z-index:20;pointer-events:none;
    transform-style:preserve-3d;opacity:0;
    background:
      linear-gradient(90deg, rgba(40,28,10,.14) 0%, rgba(0,0,0,0) 9%, rgba(0,0,0,0) 86%, rgba(60,44,20,.1) 100%),
      var(--mottle), var(--fibre), var(--paper);
    box-shadow:0 0 26px rgba(0,0,0,.4)}
  .turner.fwd{right:0;transform-origin:left center}
  .turner.back{left:0;transform-origin:right center}
  .turning.fwd .turner.fwd{opacity:1}
  .turning.back .turner.back{opacity:1}
  .turning.fwd .turner.fwd{animation:leafFwd .62s cubic-bezier(.4,.05,.3,1) both}
  .turning.back .turner.back{animation:leafBack .62s cubic-bezier(.4,.05,.3,1) both}
  @keyframes leafFwd{from{transform:rotateY(0)}to{transform:rotateY(-178deg)}}
  @keyframes leafBack{from{transform:rotateY(0)}to{transform:rotateY(178deg)}}
  @media (prefers-reduced-motion:reduce){.turner{display:none}}

  /* OPENING A MAP OR A PLATE.
     Both are too small on the leaf to read - the map is 260px wide and
     carries nine labels. A click lifts a copy out onto the desk. It is a
     button, not a div with a handler, so it is reachable by keyboard and
     announces itself. */
  .zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;color:inherit}
  .zoom:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .lightbox{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
    padding:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px))
            max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));
    background:rgba(8,6,4,.9);cursor:zoom-out}
  /* An explicit width, not just a max. The panel is a flex child, so
     with only max-width it shrank to its content - and its content was
     an SVG at width:100%, which then had nothing to resolve against.
     That is why the map opened the same size it started. */
  .lb-inner{width:min(1240px,94vw);max-height:92vh;overflow:auto;cursor:default;
    background:var(--paper);padding:clamp(12px,2vw,22px);border-radius:2px;
    box-shadow:0 24px 60px rgba(0,0,0,.7)}
  .lb-inner svg{display:block;width:100%;height:auto}
  /* a tall plate should not blow past the window */
  .lb-inner img{display:block;width:auto;max-width:100%;max-height:84vh;margin:0 auto}
  .lb-inner.wide{width:min(1240px,94vw)}
  .lb-close{position:absolute;top:max(18px,env(safe-area-inset-top,0px));
    right:max(18px,env(safe-area-inset-right,0px));
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:3px;
    padding:0 15px;min-height:42px;cursor:pointer}
  .lb-close:hover{border-color:var(--accent);color:var(--accent)}
  .lb-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  .turn{display:flex;align-items:center;gap:12px;padding:16px clamp(20px,4vw,42px);
    border-top:1px solid var(--rule)}
  .turn button{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
    background:none;color:var(--ink);border:1px solid var(--rule);border-radius:3px;
    padding:0 16px;min-height:46px;cursor:pointer}
  .turn button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
  .turn button:disabled{opacity:.32;cursor:default}
  .turn .folio{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--soft);letter-spacing:.1em}
  .rail{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;padding:0 clamp(20px,4vw,42px) 18px}
  .d{font-family:var(--mono);font-size:10px;letter-spacing:.05em;background:none;color:var(--soft);
    border:1px solid transparent;border-radius:3px;min-width:36px;min-height:34px;cursor:pointer}
  .d:hover{color:var(--ink);border-color:var(--rule)}
  .d[aria-current="true"]{color:var(--accent);border-color:var(--accent)}
  .d:focus-visible,.turn button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  .colophon{font-family:var(--mono);font-size:11px;line-height:1.8;color:var(--paper);opacity:.5;
    max-width:76ch;margin:22px auto 0;text-align:center}
  .colophon b{opacity:1;font-weight:500}

  /* READING BY CANDLELIGHT.
     A pool of warm light follows the pointer and the rest of the leaf
     falls away. Two layers: one that takes the light out, one that puts
     the amber back in, so the lit part is warm rather than merely
     visible. It is a mode, not the design - the page has to be readable
     the moment it loads, for anyone who shares it or skims it - so there
     is always a way to turn the lamp up, and it is remembered.
     A touch screen has no pointer to follow, so it never starts there. */
  .lampglow{position:fixed;inset:0;pointer-events:none;z-index:30;
    background:radial-gradient(90% 70% at 50% 2%,
      rgba(255,196,118,.16) 0%, rgba(255,176,92,.07) 38%, rgba(0,0,0,0) 72%);
    transition:opacity .45s ease}
  /* the candle takes over; two light sources would fight */
  .lampglow{opacity:calc(.22 + var(--lamp,1) * .78)}

  /* ONE DIAL, CANDLE TO LAMP. --lamp runs 0..1 and drives how wide the
     pool is, how dark it is outside it, and how lit the room is. At 0
     you read by a stub of candle and the pool follows the pointer; at 1
     it has grown past the edge of any screen. Starts full, because the
     first frame is what a shared link shows. */
  .candleWrap{position:fixed;inset:0;pointer-events:none;z-index:40;
    opacity:calc(1 - var(--lamp,1));transition:opacity .25s linear}
  .candleDark{position:absolute;inset:0;
    background:radial-gradient(circle var(--pool,3000px) at var(--mx,50%) var(--my,45%),
      rgba(6,5,3,0) 0%, rgba(6,5,3,0) 26%, rgba(6,5,3,.74) 62%, rgba(6,5,3,.94) 100%)}
  .candleWarm{position:absolute;inset:0;mix-blend-mode:soft-light;
    background:radial-gradient(circle calc(var(--pool,3000px) * .92) at var(--mx,50%) var(--my,45%),
      rgba(255,186,104,.55) 0%, rgba(255,160,70,.2) 45%, rgba(0,0,0,0) 72%)}
  @media (prefers-reduced-motion:no-preference){
    .candleDark{animation:flicker 4.4s ease-in-out infinite}
    @keyframes flicker{0%,100%{transform:scale(1)} 18%{transform:scale(1.014)}
      34%{transform:scale(.994)} 52%{transform:scale(1.02)}
      71%{transform:scale(.998)} 86%{transform:scale(1.009)}}}

  /* THE THREE FIRES IN THE PICTURE GIVE OFF LIGHT.
     His lamp and the two camp fires burn through the darkening layer, so
     turning the reader's lamp down puts the page out AROUND them and not
     them. They have to be their own fixed layer above .candleWrap: the
     cover lives inside .bookwrap, which sets a perspective and therefore
     a stacking context, so nothing inside it can be lifted over a
     z-index:40 overlay however high its own z-index goes. JS keeps this
     layer sitting exactly on the cover image; the three spans are placed
     in percentages of it, so they stay on the flames at any width.
     They burn BRIGHTER as the room dims - that inverse is the whole
     trick, and what makes them read as sources rather than bright paint. */
  .fires{position:fixed;z-index:45;pointer-events:none;opacity:0;
    transition:opacity .25s linear}
  .fires.on{opacity:1}
  .f{position:absolute;border-radius:50%;mix-blend-mode:screen;
    transform:translate(-50%,-50%);
    opacity:calc(.3 + (1 - var(--oil,1)) * .7)}
  .f.lamp{left:30%;top:66.5%;width:26%;aspect-ratio:1;
    background:radial-gradient(circle,rgba(255,201,120,.92) 0%,rgba(255,170,76,.4) 32%,rgba(255,150,60,0) 68%)}
  .f.fireA{left:59.5%;top:77%;width:15%;aspect-ratio:1;
    background:radial-gradient(circle,rgba(255,178,88,.95) 0%,rgba(255,132,44,.38) 34%,rgba(255,120,40,0) 68%)}
  .f.fireB{left:69.5%;top:64%;width:10.5%;aspect-ratio:1;
    background:radial-gradient(circle,rgba(255,172,82,.86) 0%,rgba(255,128,40,.32) 34%,rgba(255,120,40,0) 68%)}
  /* each burns on its own clock; three synchronised fires read as one
     animation rather than as three fires */
  @media (prefers-reduced-motion:no-preference){
    .f.lamp{animation:burn 5.1s ease-in-out infinite}
    .f.fireA{animation:burn 3.4s ease-in-out infinite .4s}
    .f.fireB{animation:burn 4.3s ease-in-out infinite 1.1s}
    @keyframes burn{
      0%,100%{transform:translate(-50%,-50%) scale(1)}
      27%{transform:translate(-50%,-50%) scale(1.08)}
      52%{transform:translate(-50%,-50%) scale(.95)}
      78%{transform:translate(-50%,-50%) scale(1.04)}}}

  .gauge{position:fixed;z-index:50;right:max(14px,env(safe-area-inset-right,0px));
    bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;
    background:var(--paper);border:1px solid var(--rule);border-radius:4px;
    padding:8px 13px 8px 10px;box-shadow:0 4px 16px rgba(0,0,0,.45)}
  .lampicon{width:20px;height:26px;flex:none;color:var(--accent)}
  .lampicon .oil{transform-box:fill-box;transform-origin:bottom;
    transform:scaleY(calc(.1 + var(--oil,1) * .9));transition:transform .12s linear}
  .gauge input{-webkit-appearance:none;appearance:none;width:100px;height:24px;background:none;cursor:pointer}
  .gauge input::-webkit-slider-runnable-track{height:3px;border-radius:2px;
    /* --oil is the dial. --lamp is the brightness it produces, which
       tops out at .225 - using it here made a full dial draw a
       quarter-filled track. */
    background:linear-gradient(90deg,var(--accent) 0%,var(--accent) calc(var(--oil,1) * 100%),
      var(--rule) calc(var(--oil,1) * 100%),var(--rule) 100%)}
  .gauge input::-moz-range-track{height:3px;border-radius:2px;background:var(--rule)}
  .gauge input::-moz-range-progress{height:3px;border-radius:2px;background:var(--accent)}
  .gauge input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
    background:var(--paper);border:2px solid var(--accent);margin-top:-5.5px}
  .gauge input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;
    background:var(--paper);border:2px solid var(--accent)}
  .gauge input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .gauge .cap{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--soft);white-space:nowrap;min-width:60px}

  /* The rail is pinned to the right and grows leftwards, so on a phone
     it ran off the left edge and took the Pen / Italic / Caveat buttons
     with it. Pin both edges and let it wrap instead. */
  @media (max-width:560px){
    .gauge{left:max(10px,env(safe-area-inset-left,0px));
      right:max(10px,env(safe-area-inset-right,0px));
      flex-wrap:wrap;justify-content:center;gap:8px;padding:8px 10px}
    .gauge input{width:auto;flex:1 1 70px;min-width:56px}
    /* the slider already shows the level; the words are what push the
       rail onto a second row, and a second row covers more of the text */
    .gauge .cap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
      overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    .gauge .hands{margin-right:0}
    .gauge .hands button{padding:7px 10px;min-height:30px}
  }
  @media (max-width:860px){
    .spread{grid-template-columns:1fr;background:var(--paper)}
    .recto{border-top:1px solid var(--rule);background:var(--paper2)}
    .plate.tall{max-width:100%}
  }
  @media (prefers-reduced-motion:no-preference){
    .spread{animation:turn .28s ease both}
    @keyframes turn{from{opacity:.4}to{opacity:1}}}

  .alsoin{max-width:40em;margin:34px auto 0;padding:16px 18px;border:1px solid var(--rule);
    border-radius:3px;background:var(--glow)}
  .alsoin h2{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--accent);margin:0 0 7px;font-weight:400}
  .alsonote{font-size:12.5px;line-height:1.66;color:var(--soft);margin:0 0 14px}
  .alsoin ul{list-style:none;margin:0;padding:0}
  .alsoin li{margin:0 0 15px}
  .alsoin li:last-child{margin-bottom:0}
  .alsoin q{display:block;quotes:none;font-family:var(--book);font-size:14px;
    line-height:1.68;color:var(--ink);margin:0 0 5px}
  .alsoref{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--accent);text-decoration:none}
  .alsoref:hover{text-decoration:underline}
  .alsow{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--soft)}


  /* Cross-document view transitions turn a real navigation into a page
     turn, with no JavaScript and no router. Browsers without them simply
     navigate, which is the correct fallback: the links work first and
     the animation is decoration. */
  @view-transition { navigation: auto }
  @media (prefers-reduced-motion:no-preference){
    ::view-transition-old(root){animation:leaf-out .26s ease-in both}
    ::view-transition-new(root){animation:leaf-in .3s ease-out both}
    @keyframes leaf-out{to{opacity:0;transform:translateX(-18px)}}
    @keyframes leaf-in{from{opacity:0;transform:translateX(22px)}}
  }

  /* ── THE HAND ──────────────────────────────────────────────────────
     Each needs its OWN size and leading: Homemade Apple is a real pen
     and wants air under every line, the chancery italic is a text face
     and wants far less. One size for all three makes two unreadable. */
  :root{
    --scripture:"Homemade Apple",cursive;
    --scripture-size:14.6px; --scripture-lead:2.08; --scripture-space:.004em;
  }
  html.t-chancery{--scripture:"EB Garamond",Georgia,serif;
    --scripture-size:17px; --scripture-lead:1.76; --scripture-space:0}
  html.t-caveat{--scripture:"Caveat","EB Garamond",serif;
    --scripture-size:21px; --scripture-lead:1.62; --scripture-space:.005em}
  .scripture{font-family:var(--scripture);font-size:var(--scripture-size);
    line-height:var(--scripture-lead);letter-spacing:var(--scripture-space);
    font-style:var(--scripture-style,normal);color:var(--ink);max-width:40em}
  html.t-chancery .scripture{--scripture-style:italic}
  .vs b{font-family:var(--mono);font-size:9.5px;font-weight:500;color:var(--accent);
    vertical-align:.42em;margin-right:4px;letter-spacing:.02em}
  .vs{display:inline}
  .vs:target b{background:var(--accent);color:var(--paper);padding:1px 3px;border-radius:2px}

  /* THE FURNITURE SITS ABOVE THE LAMP, NOT UNDER IT.
     The breadcrumb, the heading and the colophon are on the DESK, not
     on parchment. Their colours were already right - light on dark -
     but they sit UNDERNEATH the candle overlay, which is fixed at
     z-index 40 and centres its pool of light on the pointer. With the
     pointer anywhere near the book, the top and bottom of the page
     fell outside the pool and were dimmed to nothing: the title was
     brown on brown and the colophon could not be read at all.
     They are apparatus, not the book. The lamp is for reading the
     text; it has no business hiding the way out. .wrap sets no
     transform, so a z-index here clears the overlay - the same trick
     the lit tent and the camp fires use on the Meditations cover.
     The book itself stays under the lamp, which is the point of it. */
  .crumbrow,.head,.colophon{position:relative;z-index:45}
  /* and at .5 on a dark desk the colophon was faint even unobscured */
  .colophon{opacity:.85}

  /* The breadcrumb and the search box sit on the DESK, above the book,
     not on parchment - so both take their colours from the dark end of
     the palette rather than the page's. */
  .crumbrow{display:flex;align-items:center;justify-content:center;gap:16px;
    flex-wrap:wrap;margin:0 0 16px}
  .crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--soft);
    text-align:center;margin:0}
  .crumb a{color:var(--soft)}
  .crumb a:hover{color:var(--accent)}
  .crumb b{color:var(--ink);font-weight:500}

  .crumbfind{display:flex;align-items:center;gap:7px;
    background:rgba(0,0,0,.2);border:1px solid var(--rule);border-radius:3px;
    padding:0 11px;min-height:34px;max-width:100%}
  .crumbfind:focus-within{border-color:var(--accent)}
  .crumbfind svg{width:13px;height:13px;color:var(--soft);flex:none}
  .crumbfind:focus-within svg{color:var(--accent)}
  .crumbfind input{font-family:var(--mono);font-size:11px;letter-spacing:.04em;
    color:var(--ink);background:none;border:0;outline:0;padding:0;
    width:clamp(130px,17vw,200px);min-height:32px;-webkit-appearance:none}
  /* Under 16px, iOS zooms the page the moment the field is focused and
     leaves the reader scrolled sideways into a layout they did not ask
     for. The look only matters on a desktop, where this does not happen. */
  @media (max-width:860px){ .crumbfind input{font-size:16px;letter-spacing:0} }
  .crumbfind input::placeholder{color:var(--soft);opacity:.85}
  @media (max-width:560px){ .crumbfind input{width:min(58vw,210px)} }
  .h1c{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--soft);margin-top:10px}

  @media (min-width:901px){
    .recto{position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;
      scrollbar-width:thin}
  }
  @media (max-width:900px){ .scripture{max-width:none} }

  h2.lab{margin:0 0 7px;font-weight:500}
  .thought.arg p{font-style:italic}
  .who-list,.notes{list-style:none;margin:0;padding:0}
  .who-list li{margin:0 0 11px;padding:0 0 0 11px;border-left:2px solid var(--rule)}
  .who-list b{display:block;font-family:var(--mono);font-size:12px;font-weight:500;
    letter-spacing:.03em}
  .who-list span{display:block;font-size:14.5px;line-height:1.5;color:var(--ink)}
  .who-list em{display:block;font-family:var(--mono);font-size:10px;color:var(--ink);opacity:.72;
    font-style:normal;margin-top:2px}
  .notes li{position:relative;margin:0 0 12px;padding-left:15px;font-size:15px;
    line-height:1.65;color:var(--ink)}
  .notes li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;
    background:var(--accent)}
  /* --soft is a CAPTION colour and these are paragraphs. The "Not
     known" blocks carry some of the most useful writing on the leaf -
     what the census cannot be reconciled with, where Emmaus is not,
     how much of Livy is legend - and they were the faintest thing on
     the page, dimmed further by the lamp. They take the ink colour
     now and are marked as a different kind of block by a rule down
     the side instead of by being hard to read. */
  .thought.unk{border-left:2px solid var(--rule);padding-left:13px}
  .thought.unk p{color:var(--ink)}
  .thought.unk .lab{color:var(--soft)}

  .tb{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink);text-decoration:none;
    border:1px solid var(--rule);border-radius:2px;padding:0 15px;min-height:42px;line-height:40px}
  .tb:hover{border-color:var(--accent);color:var(--accent)}
  .tb.big{min-height:46px;line-height:44px;padding:0 20px}
  a.d{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

  /* The way out, at the foot of the book. It has to live INSIDE .book:
     anything below falls outside the pool of lamplight and cannot be
     read, which is what happened to an earlier contents list. */
  .foot{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
    padding:16px clamp(16px,3vw,30px) 22px;border-top:1px solid var(--rule)}
  .foot a{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--soft);text-decoration:none}
  .foot a:hover{color:var(--accent)}
  .ribbon-go{color:var(--accent)!important}

  /* ── the ribbon ───────────────────────────────────────────────────
     One per book, because that is what a ribbon is. Untouched it is a
     stub at the head of the book; placed, it falls the length of the
     leaf and shows its swallowtail below the bottom edge. */
  .book{position:relative}
  .ribbon{position:absolute;top:-6px;right:14px;z-index:25;
    width:22px;height:58px;padding:0;border:0;cursor:pointer;
    /* a dull silk, not a bright one: at full saturation it was the
       loudest thing on a page of brown ink, and it lay across the
       right-hand leaf instead of down its margin */
    background:linear-gradient(90deg,#5a1a18 0%,#7d2722 38%,#8e332b 55%,#631d19 100%);
    box-shadow:0 2px 6px rgba(0,0,0,.45);
    transition:height .3s cubic-bezier(.3,.7,.3,1),filter .2s}
  .ribbon::after{content:"";position:absolute;left:0;right:0;top:0;height:7px;
    background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0))}
  .ribbon-tip{position:absolute;left:0;right:0;bottom:-12px;height:13px;
    background:inherit;clip-path:polygon(0 0,100% 0,100% 100%,50% 54%,0 100%)}
  .ribbon:hover{filter:brightness(1.12)}
  .ribbon:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .ribbon.placed{height:calc(100% + 34px)}
  .ribbon.elsewhere{opacity:.42}
  @media (prefers-reduced-motion:reduce){.ribbon{transition:none}}

  /* ── highlighting ─────────────────────────────────────────────────
     Anchored to a leaf and a pair of character offsets into the verse's
     own text. The text is generated and never changes, so an offset is
     a stable address; matching on the selected STRING would misfire on
     every repeated phrase, and this book is full of them. */
  mark.hl{background:rgba(214,178,74,.42);color:inherit;border-radius:2px;
    padding:.05em 0;cursor:pointer;box-shadow:0 0 0 1px rgba(160,128,40,.25)}
  mark.hl:hover{background:rgba(214,178,74,.62)}
  .selbar{position:fixed;z-index:55;transform:translate(-50%,-125%)}
  .selbar button{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;background:var(--ink);color:var(--paper);border:0;
    border-radius:3px;padding:0 13px;min-height:36px;cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.5)}

  /* Day, night, or follow the system. The palette already had the
     data-theme hooks; it simply had no switch, so a reader whose
     machine is set to dark could never see the parchment. */
  .theme{display:inline-flex;align-items:center;justify-content:center;margin-left:10px;
    width:34px;min-height:34px;padding:0;border:1px solid var(--rule);border-radius:3px;
    background:none;color:var(--soft);cursor:pointer}
  .theme:hover{color:var(--accent);border-color:var(--accent)}
  .theme svg{width:17px;height:17px}
  .theme .i-day,.theme .i-night{display:none}
  :root[data-theme="light"] .theme .i-auto{display:none}
  :root[data-theme="light"] .theme .i-day{display:inline}
  :root[data-theme="dark"] .theme .i-auto{display:none}
  :root[data-theme="dark"] .theme .i-night{display:inline}

  .hands{display:flex;gap:1px;background:var(--rule);border:1px solid var(--rule);
    border-radius:3px;overflow:hidden;margin-right:12px}
  .hands button{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
    padding:6px 9px;border:0;background:var(--paper);color:var(--soft);cursor:pointer;min-height:26px}
  .hands button[aria-pressed="true"]{background:var(--accent);color:var(--paper)}
  @media (max-width:560px){ .hands button{padding:6px 7px;font-size:9px} }

  /* ── search ───────────────────────────────────────────────────────── */
  .srch{max-width:720px;margin:0 auto 10px;padding:0 clamp(16px,3vw,30px)}
  .srch input{width:100%;font-family:var(--book);font-size:18px;color:var(--ink);
    background:var(--paper);border:1px solid var(--rule);border-radius:3px;
    padding:14px 16px;min-height:52px;-webkit-appearance:none}
  .srch input:focus{outline:2px solid var(--accent);outline-offset:1px}
  .srch-help{font-family:var(--mono);font-size:10.5px;line-height:1.9;color:var(--soft);
    max-width:720px;margin:0 auto 26px;padding:0 clamp(16px,3vw,30px)}
  .srch-help b{color:var(--ink);font-weight:500}
  .res{max-width:860px;margin:0 auto;padding:0 clamp(16px,3vw,30px) 10px}
  .res-count{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--accent);margin:0 0 4px}
  .res-grp{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--soft);margin:26px 0 8px;padding-top:12px;border-top:1px solid var(--rule)}
  .hit{display:block;padding:11px 10px;border-bottom:1px solid var(--rule);
    text-decoration:none;color:var(--ink)}
  .hit:hover{background:var(--glow)}
  .hit-ref{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--accent);
    display:block;margin-bottom:3px}
  .hit-t{font-size:16px;line-height:1.6}
  .hit mark{background:var(--accent);color:var(--paper);padding:0 2px;border-radius:2px}
  .res-none{font-size:16px;color:var(--soft);padding:16px 10px}
  .jump{display:block;padding:14px 10px;margin-bottom:6px;border:1px solid var(--accent);
    border-radius:3px;text-decoration:none;color:var(--ink);background:var(--glow)}

.emap{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:2px}
.m-land{fill:var(--paper);stroke:var(--rule);stroke-width:.7}
.m-sea{fill:var(--glow)}
.m-sealab{font-family:var(--mono);font-size:8px;letter-spacing:.2em;fill:var(--soft);opacity:.72}
.m-sealab.sm{font-size:6.5px;letter-spacing:.14em}
.m-route{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-dasharray:3 3;opacity:.85}
.m-base{fill:var(--soft);stroke:var(--soft);opacity:.62}
.m-base text{stroke:none}
.m-bicon{fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.m-bl{font-family:var(--mono);font-size:7.5px;letter-spacing:.05em}
.m-on{fill:var(--accent);stroke:var(--accent)}
.m-on .m-icon{fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin="round"}
.m-on text{stroke:none}
.m-here{fill:var(--ink);stroke:var(--ink)}
.m-here g{fill:none;stroke-width:1.3}
.m-here text{stroke:none}
.m-l{font-family:var(--mono);font-size:9px;letter-spacing:.03em}
.map-note{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--soft);margin:7px 0 0}

  .mapbox .lab,.lifebox .lab{margin:0 0 7px;font-weight:500}
  .scripture .said,.scripture .litany{font-family:var(--scripture);
    font-size:var(--scripture-size);line-height:var(--scripture-lead);
    font-style:var(--scripture-style,normal)}
  .contents{padding:0 clamp(18px,3.5vw,38px) 8px}
  .contents .lab{display:block;margin:4px 0 14px}
  .toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
  .toc a{display:grid;grid-template-columns:54px 1fr auto;gap:4px 14px;align-items:baseline;
    padding:11px 6px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
  .toc a:hover{background:var(--glow)}
  .toc-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--accent)}
  .toc-t{font-size:17px;line-height:1.5}
  .toc-v{font-family:var(--mono);font-size:10px;color:var(--soft);white-space:nowrap}
  @media (max-width:560px){ .toc a{grid-template-columns:44px 1fr} .toc-v{grid-column:2} }