/* FR Log Book Skin — one physical object, rendered in the browser.
   Palette is the §4 token table, nothing else. Textures are generated
   in-file (SVG turbulence data URIs), no lifted assets. */

:root {
  --leather: #8A5F38;
  --leather-shadow: #6E4A2A;
  --leather-light: #B98A4E;
  --paper: #F6F2E7;
  --grid: #DDD5C5;
  --ink: #3A3428;
  --furniture: #6B6355;
  --garage: #1D1A17;
  --bench: #4A3B28;
  --ribbon: #5F574D;

  /* scene-material tokens — the rendered room only, separate from the
     book's section 4 table above. Scene colours never reuse book
     tokens; light and shade in the scene mix these with neutral
     #FFF/#000 so falloff stays neutral-dark, not brown-dark.
     --bench-timber: light Australian hardwood, clear varnish, pale
     honey. --wall: fresh pale paint, near-white with the faintest
     green hint. */
  --bench-timber: #DBB87C;
  --wall: #ECEEE3;

  /* long continuous grain, elongated along the bench depth axis */
  --tx-timber: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='600'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='0.09 0.006' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.3 0'/></filter><rect width='300' height='600' filter='url(%23t)'/></svg>");

  /* generated textures — fine grain, large mottle, wood, paper tooth */
  --tx-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.4 0'/></filter><rect width='220' height='220' filter='url(%23g)'/></svg>");
  --tx-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.012' numOctaves='4' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.5 0'/></filter><rect width='420' height='420' filter='url(%23m)'/></svg>");
  --tx-wood: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='300'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.006 0.05' numOctaves='3' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.25 0'/></filter><rect width='600' height='300' filter='url(%23w)'/></svg>");
  --tx-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' seed='23' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.12 0'/></filter><rect width='260' height='260' filter='url(%23p)'/></svg>");
  /* alpha-only noise for tall surfaces — applied as plain overlays, never
     via blend modes: blended backgrounds on very tall elements exceed the
     GPU texture cap and blank out mid-scroll. Colour is baked into each
     tile (leather-shadow darks, leather-light worn highs) so source-over
     layering still produces real tonal range. */
  --tx-pore: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='220' height='220' filter='url(%23d)'/></svg>");
  --tx-pore-leather: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='190' height='190'><filter id='pl'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.431 0 0 0 0 0.290 0 0 0 0 0.165 0 0 0 0.55 0'/></filter><rect width='190' height='190' filter='url(%23pl)'/></svg>");
  --tx-wear-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><filter id='wl'><feTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='4' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.725 0 0 0 0 0.541 0 0 0 0 0.306 0 0 0 0.5 0'/></filter><rect width='360' height='360' filter='url(%23wl)'/></svg>");
  --tx-wear-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><filter id='wd'><feTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='4' seed='13' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.431 0 0 0 0 0.290 0 0 0 0 0.165 0 0 0 0.5 0'/></filter><rect width='520' height='520' filter='url(%23wd)'/></svg>");

  --font-furniture: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-book: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--garage);
  color: var(--ink);
  font-family: var(--font-book);
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

a:focus-visible,
.logbook-closed:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}
.page a:focus-visible, .logbook-tab.is-active:focus-visible {
  outline-color: var(--ink);
}

/* ================= Garage backdrop (both frames) ================= */

.garage { position: fixed; inset: 0; z-index: -1; overflow: hidden; }

/* Frame 2 surround (pass 6): the same photograph as the landing,
   softened, so the near-white room carries into the open-book view.
   The dark rendered-room layers below stay in the file as the
   "rendered" fallback's backdrop; in photo mode they are overridden
   here — planes and warm glow off, vignette light. */
.garage__wall {
  position: absolute; inset: 0;
  background: url("/assets/bench-landing-desktop.jpg") center / cover no-repeat;
  filter: blur(16px) brightness(1.14);
  transform: scale(1.12); /* hides blur-softened edges */
}
@media (max-width: 880px) {
  .garage__wall { background-image: url("/assets/bench-landing-mobile.jpg"); }
}
.garage__plane, .garage__glow { display: none; }

.garage__wall--rendered {
  position: absolute; inset: 0;
  background:
    var(--tx-grain),
    /* uneven light: a warm pool high left of centre, a dimmer spill
       right, sides falling away — a dim room, not a colour fill */
    radial-gradient(ellipse 46% 40% at 38% 16%,
      color-mix(in srgb, var(--leather-light) 30%, transparent) 0%,
      transparent 68%),
    radial-gradient(ellipse 38% 34% at 78% 30%,
      color-mix(in srgb, var(--bench) 45%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--garage) 84%, var(--leather-light)) 0%,
      color-mix(in srgb, var(--garage) 94%, var(--leather-light)) 46%,
      color-mix(in srgb, var(--garage) 80%, #000) 100%);
  background-size: 220px 220px, 100% 100%, 100% 100%, 100% 100%;
  background-blend-mode: overlay, normal, normal, normal;
  opacity: 1;
}

/* receding side planes — only meant to read in Frame 2 */
.garage__plane {
  position: absolute; top: -12%; bottom: -12%; width: 46%;
  filter: blur(9px); opacity: 0;
  transition: opacity .4s ease;
}
.frame-reading .garage__plane { opacity: .85; }
.garage__plane--a {
  left: -14%;
  transform: perspective(900px) rotateY(38deg);
  background:
    var(--tx-mottle),
    linear-gradient(100deg,
      color-mix(in srgb, var(--bench) 72%, var(--garage)) 0%,
      color-mix(in srgb, var(--bench) 30%, var(--garage)) 55%,
      var(--garage) 90%);
  background-blend-mode: overlay, normal;
  box-shadow: inset -30px 0 60px color-mix(in srgb, #000 40%, transparent);
}
.garage__plane--b {
  right: -14%;
  transform: perspective(900px) rotateY(-34deg);
  background:
    var(--tx-mottle),
    linear-gradient(-100deg,
      color-mix(in srgb, var(--leather-shadow) 55%, var(--garage)) 0%,
      color-mix(in srgb, var(--leather-shadow) 22%, var(--garage)) 52%,
      var(--garage) 88%);
  background-blend-mode: overlay, normal;
  box-shadow: inset 30px 0 60px color-mix(in srgb, #000 40%, transparent);
}
/* a low bench plane under the held-up book */
.frame-reading .garage__glow {
  background:
    radial-gradient(ellipse 62% 40% at 50% 16%,
      color-mix(in srgb, var(--leather-light) 30%, transparent) 0%,
      transparent 66%),
    linear-gradient(180deg,
      transparent 72%,
      color-mix(in srgb, var(--bench) 42%, transparent) 100%);
}

.garage__glow {
  position: absolute; inset: -10%;
  background: radial-gradient(ellipse 70% 52% at 50% 22%,
    color-mix(in srgb, var(--leather-light) 38%, transparent) 0%,
    transparent 70%);
}

/* light vignette to suit the photo backdrop (pass 6) — the old dark
   values (32% / 55% / 88% stops) belonged to the rendered dark room */
.garage__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 82% 72% at 50% 40%,
    transparent 45%,
    color-mix(in srgb, #000 14%, transparent) 82%,
    color-mix(in srgb, #000 26%, transparent) 100%);
}

/* ================= Frame 1 — standing at the bench ================= */

.frame-bench { height: 100dvh; overflow: hidden; }

.bench-scene {
  position: fixed; inset: 0;
  perspective: 1250px;
  perspective-origin: 50% 20%;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.55,.06,.35,1), opacity .75s ease;
}

.bench, .bench-stage {
  position: absolute;
  left: -24vw; right: -24vw; top: 33%; bottom: -42%;
  transform-origin: 50% 0%;
  transform: rotateX(53deg);
  transform-style: preserve-3d;
}

.bench { box-shadow: 0 -2px 40px color-mix(in srgb, #000 55%, transparent); }

/* one solid hardwood slab, clear varnish: no plank lines. Long grain
   flows toward the vanishing point, faint tone bands vary across the
   width, and a broad soft sheen sits where the warm light pools. */
.bench__timber {
  position: absolute; inset: 0;
  background:
    var(--tx-timber),
    /* fine continuous grain lines along the depth axis, two offset
       periods so the spacing never reads as boards */
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 26px,
      color-mix(in srgb, #000 9%, transparent) 26.6px,
      transparent 28px, transparent 47px),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 71px,
      color-mix(in srgb, #000 7%, transparent) 71.6px,
      transparent 73px, transparent 118px),
    /* gentle tone variation across the slab width */
    linear-gradient(90deg,
      color-mix(in srgb, var(--bench-timber) 94%, #000) 0%,
      var(--bench-timber) 22%,
      color-mix(in srgb, var(--bench-timber) 96%, #FFF) 38%,
      var(--bench-timber) 57%,
      color-mix(in srgb, var(--bench-timber) 93%, #000) 74%,
      var(--bench-timber) 100%),
    /* junction shadow under the wall */
    linear-gradient(180deg,
      color-mix(in srgb, #000 30%, transparent) 0%,
      color-mix(in srgb, #000 10%, transparent) 9%,
      transparent 20%),
    /* varnish sheen: broad soft highlight in the light pool */
    radial-gradient(ellipse 34% 26% at 50% 30%,
      color-mix(in srgb, #FFF 20%, transparent) 0%,
      color-mix(in srgb, #FFF 8%, transparent) 55%,
      transparent 75%),
    radial-gradient(ellipse 42% 36% at 50% 34%,
      color-mix(in srgb, var(--bench-timber) 92%, #FFF) 0%,
      var(--bench-timber) 40%,
      color-mix(in srgb, var(--bench-timber) 52%, #000) 78%,
      color-mix(in srgb, var(--bench-timber) 26%, #000) 100%);
  background-size: 300px 600px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-blend-mode: soft-light, normal, normal, normal, normal, normal, normal;
}

/* front edge of the bench top */
.bench__edge {
  position: absolute; left: 0; right: 0; bottom: -18px; height: 18px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bench-timber) 38%, #000),
    color-mix(in srgb, var(--bench-timber) 14%, #000));
}

.bench-stage { pointer-events: none; }

/* --- the closed book, lying on the bench --- */

.logbook-closed {
  pointer-events: auto;
  position: absolute;
  /* pass 6: seated into the photo's lit pool, clear of the wall/bench
     junction line (was top: 5% against the rendered room).
     Pass 7 trial: realistic scale (~16.5vw, down from the 21vw hero
     scale) and re-seated a touch higher — owner to confirm or revert. */
  left: 49%; top: 7%;
  width: clamp(160px, 16.5vw, 240px);
  aspect-ratio: 0.74;
  transform: translateX(-50%) rotate(6.5deg);
  transform-style: preserve-3d;
  border-radius: 6px 14px 14px 6px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .3s ease;
}
.logbook-closed:hover { transform: translateX(-50%) rotate(6.5deg) translateY(-6px); }

.logbook-closed__shadow {
  position: absolute; inset: -7% -13% -17% -11%;
  background: radial-gradient(ellipse 54% 50% at 52% 56%,
    #000 0%,
    color-mix(in srgb, #000 62%, transparent) 55%,
    transparent 80%);
  transform: translate(4%, 9%);
  z-index: 0;
}
.logbook-closed__ribbon { z-index: 1; }
.logbook-closed__stack { z-index: 2; }
.logbook-closed__cover { z-index: 3; }

/* page block under the cover — reads as thickness */
.logbook-closed__stack {
  position: absolute; inset: 1.5% -1.8% -2.6% 1%;
  border-radius: 4px 12px 12px 4px;
  background:
    repeating-linear-gradient(180deg,
      var(--paper) 0px, var(--paper) 2px,
      var(--grid) 2.6px, var(--paper) 3.4px),
    var(--paper);
  box-shadow:
    inset -2px -2px 4px color-mix(in srgb, var(--furniture) 50%, transparent),
    1px 3px 6px color-mix(in srgb, #000 45%, transparent);
}

.logbook-closed__cover {
  position: absolute; inset: 0;
  border-radius: 6px 14px 14px 6px;
  background:
    var(--tx-grain),
    var(--tx-grain),
    var(--tx-mottle),
    radial-gradient(ellipse 120% 90% at 30% 20%,
      color-mix(in srgb, var(--leather-light) 40%, var(--leather)) 0%,
      var(--leather) 52%,
      var(--leather-shadow) 100%),
    var(--leather);
  background-size: 110px 110px, 260px 260px, 340px 340px, 100% 100%, 100% 100%;
  background-blend-mode: overlay, overlay, soft-light, normal, normal;
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--leather-light) 60%, transparent),
    inset -6px -10px 26px color-mix(in srgb, var(--leather-shadow) 80%, transparent),
    inset 3px 3px 14px color-mix(in srgb, var(--leather-light) 30%, transparent),
    0 2px 5px color-mix(in srgb, #000 40%, transparent);
  display: grid;
  align-content: center;
  justify-items: center;
  transform-origin: 4% 50%;
  transition: transform .72s cubic-bezier(.6,.05,.3,1);
}

/* spine crease + hinge shading on the left of the cover */
.logbook-closed__cover::before {
  content: "";
  position: absolute; left: 6%; top: 0; bottom: 0; width: 3.5%;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--leather-shadow) 75%, transparent) 40%,
    color-mix(in srgb, var(--leather-shadow) 90%, transparent) 55%,
    transparent 100%);
  border-radius: 4px;
}

/* worn corners and edge rub */
.logbook-closed__cover::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle 90px at 100% 0%, color-mix(in srgb, var(--leather-light) 42%, transparent) 0%, transparent 60%),
    radial-gradient(circle 110px at 100% 100%, color-mix(in srgb, var(--leather-light) 34%, transparent) 0%, transparent 62%),
    radial-gradient(circle 70px at 0% 100%, color-mix(in srgb, var(--leather-shadow) 60%, transparent) 0%, transparent 70%);
  mix-blend-mode: soft-light;
}

.logbook-closed__stitch {
  position: absolute; inset: 4.5%;
  border: 1.5px dashed color-mix(in srgb, var(--leather-shadow) 85%, transparent);
  border-radius: 4px 10px 10px 4px;
  opacity: .8;
}

.logbook-closed__title {
  font-family: var(--font-furniture);
  font-weight: 300;
  font-size: clamp(13px, 1.5vw, 19px);
  letter-spacing: .34em;
  text-transform: uppercase;
  text-align: center;
  color: color-mix(in srgb, var(--leather-shadow) 88%, #000);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--leather-light) 55%, transparent);
  padding: 0 12%;
  line-height: 2;
  z-index: 1;
}

/* the cover carries the invitation — embossed like the rest, quieter
   than the title. The interactive element keeps aria-label "Open the
   log book"; this is the visible wording only. */
.logbook-closed__readme {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: clamp(13px, 1.3vw, 18px);
  color: color-mix(in srgb, var(--leather-shadow) 55%, transparent);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--leather-light) 35%, transparent);
  margin-top: 1.1em;
  transform: rotate(-1deg);
  z-index: 1;
}

.logbook-closed__emboss {
  position: absolute; right: 9%; bottom: 6.5%;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 26px);
  color: color-mix(in srgb, var(--leather-shadow) 90%, #000);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--leather-light) 50%, transparent);
  transform: rotate(-2deg);
}

.logbook-closed__ribbon {
  position: absolute;
  left: 56%; bottom: -21%;
  width: 8%; height: 30%;
  /* pass 7: gradient deepened — the old stops (85%/100% ribbon mids)
     washed out against the bright photo backdrop */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ribbon) 42%, #000) 0%,
    color-mix(in srgb, var(--ribbon) 68%, #000) 40%,
    color-mix(in srgb, var(--ribbon) 82%, #000) 65%,
    color-mix(in srgb, var(--ribbon) 45%, #000) 100%);
  transform: rotate(9deg) skewX(-3deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 87%, 0 100%);
  box-shadow: 3px 5px 7px color-mix(in srgb, #000 55%, transparent);
}

/* ---------- the rendered workshop scene (SWAP:BENCH-SCENE) ----------
   Styles for the swappable scene partial only. The book, its stage and
   the transition never live in here. Everything is set dressing: low
   contrast, soft focus, palette tones — the book stays the subject. */

.scene, .scene__props { position: absolute; inset: 0; pointer-events: none; }

/* photographic backdrop (pass 6): the graded stills carry their own
   light and vignette, so the screen-space pool overlay and the scene
   perspective stay off in this mode. Desktop frame by default, the
   portrait crop on narrow screens. */
.scene--photo { perspective: none; }
.scene__photo {
  position: absolute; inset: 0;
  background: url("/assets/bench-landing-desktop.jpg") center / cover no-repeat;
}
@media (max-width: 880px) {
  .scene__photo { background-image: url("/assets/bench-landing-mobile.jpg"); }
}
/* the scene carries its own perspective (matching .bench-scene, so the
   book stage stays aligned) and flattens it: props and pool then paint
   over the bench plane in plain DOM order, no 3D z-fighting */
.scene {
  perspective: 1250px;
  perspective-origin: 50% 20%;
}

/* matte plaster, lit from the one warm source: brightest low centre
   where the bench light spills up, falling to neutral-dark at the top
   and sides */
.scene__wall {
  position: absolute; left: 0; right: 0; top: 0; height: 33.5%;
  background:
    var(--tx-grain),
    radial-gradient(ellipse 58% 90% at 50% 100%,
      color-mix(in srgb, var(--bench-timber) 16%, transparent) 0%,
      transparent 62%),
    radial-gradient(ellipse 150% 160% at 50% 100%,
      transparent 30%,
      color-mix(in srgb, #000 34%, transparent) 74%,
      color-mix(in srgb, #000 62%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--wall) 38%, #000) 0%,
      color-mix(in srgb, var(--wall) 64%, #000) 48%,
      color-mix(in srgb, var(--wall) 88%, #000) 86%,
      color-mix(in srgb, var(--wall) 94%, #000) 100%);
  background-size: 220px 220px, 100% 100%, 100% 100%, 100% 100%;
  background-blend-mode: overlay, normal, normal, normal;
}

/* skirting shadow line: the wall/bench join reads structural */
.scene__wall::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1.6vh;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--wall) 34%, #000) 0%,
    color-mix(in srgb, var(--wall) 22%, #000) 100%);
  box-shadow:
    0 -1px 0 color-mix(in srgb, #000 30%, transparent),
    0 4px 9px color-mix(in srgb, #000 40%, transparent);
}

/* screen-space light: pool on the bench, falloff at the edges */
.scene__pool {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 46% 34% at 50% 54%,
      color-mix(in srgb, var(--bench-timber) 14%, transparent) 0%,
      transparent 70%),
    radial-gradient(ellipse 96% 88% at 50% 46%,
      transparent 32%,
      color-mix(in srgb, #000 50%, transparent) 68%,
      color-mix(in srgb, #000 90%, transparent) 100%);
}

.prop { position: absolute; filter: blur(2.2px) drop-shadow(0 7px 7px color-mix(in srgb, #000 45%, transparent)); }
.prop--whiteboard, .prop--calendar { filter: blur(1.5px) drop-shadow(0 4px 5px color-mix(in srgb, #000 35%, transparent)); }

/* monitor and speaker silhouettes, screens off, rim-lit from the lamp */
.prop--monitor .prop-monitor__screen {
  position: absolute; inset: 0 0 22% 0;
  border-radius: 6px;
  background:
    radial-gradient(ellipse 60% 45% at 30% 22%,
      color-mix(in srgb, var(--paper) 7%, transparent) 0%, transparent 65%),
    linear-gradient(165deg,
      color-mix(in srgb, var(--garage) 55%, var(--bench)) 0%,
      color-mix(in srgb, var(--garage) 88%, #000) 75%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--leather-light) 30%, transparent),
    0 0 0 2px color-mix(in srgb, var(--garage) 70%, #000);
}
.prop--monitor .prop-monitor__stand {
  position: absolute; left: 46%; bottom: 7%; width: 8%; height: 16%;
  background: color-mix(in srgb, var(--garage) 75%, #000);
}
.prop--monitor .prop-monitor__base {
  position: absolute; left: 30%; bottom: 4%; width: 40%; height: 4%;
  border-radius: 40%;
  background: color-mix(in srgb, var(--garage) 68%, #000);
}

.prop--speaker {
  border-radius: 7px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--garage) 68%, var(--bench)) 0%,
    color-mix(in srgb, var(--garage) 88%, #000) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--leather-light) 26%, transparent);
}
.prop--speaker::before {
  content: "";
  position: absolute; left: 22%; top: 12%; width: 56%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, #000 45%, transparent) 0%,
    color-mix(in srgb, #000 20%, transparent) 55%,
    transparent 72%);
}

/* flat rubber mats, generic — no marks, no brands */
.prop--barmat {
  border-radius: 10px;
  transform: scaleY(.55) rotate(-2.5deg);
  background: color-mix(in srgb, var(--ribbon) 30%, var(--garage));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 8%, transparent);
  filter: blur(2.4px) drop-shadow(0 2px 2px color-mix(in srgb, #000 40%, transparent));
}
.prop--barmat + .prop--barmat { transform: scaleY(.55) rotate(3deg); }

.prop--spraycan {
  border-radius: 5px 5px 4px 4px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--garage) 60%, var(--bench)) 0%,
    color-mix(in srgb, var(--furniture) 45%, var(--garage)) 38%,
    color-mix(in srgb, var(--garage) 75%, #000) 100%);
}
.prop--spraycan .prop-spraycan__cap {
  position: absolute; left: 20%; top: -12%; width: 60%; height: 16%;
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--garage) 70%, #000);
}

.prop--can {
  border-radius: 4px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--furniture) 40%, var(--garage)) 0%,
    color-mix(in srgb, var(--furniture) 60%, var(--garage)) 40%,
    color-mix(in srgb, var(--garage) 80%, #000) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 18%, transparent);
}

/* whiteboard with short hand-written results, dimmed to the room */
.prop--whiteboard {
  border-radius: 4px;
  transform: rotate(-1.2deg);
  background: color-mix(in srgb, var(--paper) 42%, var(--garage));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--furniture) 45%, var(--garage)),
    inset 0 0 18px color-mix(in srgb, var(--garage) 30%, transparent);
}
.prop-whiteboard__tray {
  position: absolute; left: 28%; bottom: -7%; width: 44%; height: 5%;
  background: color-mix(in srgb, var(--furniture) 50%, var(--garage));
}
.prop-whiteboard__lines {
  position: absolute; inset: 9% 8%;
  display: flex; flex-direction: column; gap: .5em;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: clamp(9px, .95vw, 15px);
  line-height: 1.15;
  color: color-mix(in srgb, var(--ink) 72%, var(--garage));
}
.prop-whiteboard__lines span:nth-child(2) { transform: rotate(-.8deg); }
.prop-whiteboard__lines span:nth-child(3) { transform: rotate(.6deg); }

/* wall calendar — the date renders live */
.prop--calendar {
  border-radius: 3px;
  transform: rotate(1.2deg);
  background: color-mix(in srgb, var(--paper) 48%, var(--garage));
  text-align: center;
}
.prop-calendar__band {
  position: absolute; left: 0; right: 0; top: 0; height: 17%;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--ribbon) 55%, var(--garage));
}
.prop-calendar__month {
  position: absolute; left: 0; right: 0; top: 22%;
  font-family: var(--font-furniture);
  font-weight: 400;
  font-size: clamp(7px, .62vw, 10px);
  letter-spacing: .24em;
  color: color-mix(in srgb, var(--furniture) 85%, var(--garage));
}
.prop-calendar__day {
  position: absolute; left: 0; right: 0; top: 34%;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(15px, 1.55vw, 26px);
  color: color-mix(in srgb, var(--ink) 68%, var(--garage));
}

/* --- the one orchestrated moment: opening (and its reverse) --- */

.is-opening .bench-scene {
  transform: scale(1.75) translateY(9%);
  opacity: 0;
}
.is-opening .logbook-closed__cover {
  transform: rotateY(-155deg);
}

.reading {
  transition: transform .5s cubic-bezier(.55,.06,.45,1), opacity .5s ease;
}
.is-closing .reading {
  transform: scale(.9) translateY(5vh);
  opacity: 0;
}
.is-closing .garage__plane { opacity: 0; }

/* ================= Frame 2 — reading spread ================= */

.frame-reading { min-height: 100dvh; overflow-x: hidden; }

.reading {
  display: grid;
  justify-items: center;
  padding: 5vh max(2vw, 76px) 7vh 2vw;
}

.logbook-open {
  position: relative;
  width: min(1180px, 95vw);
  border-radius: 14px 20px 20px 14px;
  padding: clamp(16px, 2.1vw, 28px);
  padding-right: clamp(26px, 3vw, 42px); /* room for the page-stack edge */
  background:
    /* worn tonal mottle, light and dark passes */
    var(--tx-pore-leather),
    var(--tx-wear-light),
    var(--tx-wear-dark),
    /* light direction: warm key from upper left, falling to shadow */
    linear-gradient(128deg,
      color-mix(in srgb, var(--leather-light) 55%, transparent) 0%,
      color-mix(in srgb, var(--leather-light) 18%, transparent) 26%,
      transparent 52%,
      color-mix(in srgb, var(--leather-shadow) 62%, transparent) 100%),
    radial-gradient(ellipse 130% 100% at 34% 12%,
      color-mix(in srgb, var(--leather-light) 34%, var(--leather)) 0%,
      var(--leather) 48%,
      var(--leather-shadow) 100%),
    var(--leather);
  background-size: 190px 190px, 360px 360px, 520px 520px, 100% 100%, 100% 100%, 100% 100%;
  box-shadow:
    inset 0 2px 3px color-mix(in srgb, var(--leather-light) 70%, transparent),
    inset 2px 0 3px color-mix(in srgb, var(--leather-light) 35%, transparent),
    inset -6px -10px 30px color-mix(in srgb, var(--leather-shadow) 95%, transparent),
    inset 0 0 70px color-mix(in srgb, #000 30%, transparent),
    /* cast shadow lightened pass 6 to suit the near-white surround */
    0 30px 70px color-mix(in srgb, #000 34%, transparent),
    0 6px 18px color-mix(in srgb, #000 24%, transparent);
}

/* edge wear and frame vignette as a plain overlay (no blend — see token
   note): rubbed corners catch the light, edges fall darker */
.logbook-open::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle 130px at 0% 0%, color-mix(in srgb, var(--leather-light) 45%, transparent) 0%, transparent 65%),
    radial-gradient(circle 110px at 100% 0%, color-mix(in srgb, var(--leather-light) 30%, transparent) 0%, transparent 62%),
    radial-gradient(circle 150px at 100% 100%, color-mix(in srgb, var(--leather-shadow) 55%, transparent) 0%, transparent 68%),
    radial-gradient(circle 120px at 0% 100%, color-mix(in srgb, var(--leather-light) 26%, transparent) 0%, transparent 62%),
    linear-gradient(90deg, color-mix(in srgb, #000 28%, transparent) 0%, transparent 3.5%, transparent 96.5%, color-mix(in srgb, #000 34%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, #000 22%, transparent) 0%, transparent 2.5%, transparent 97%, color-mix(in srgb, #000 30%, transparent) 100%);
  pointer-events: none;
  z-index: 0;
}

.spread { z-index: 1; }
.logbook-open__stitch, .logbook-open__stack { z-index: 2; }

.logbook-open__stitch {
  position: absolute; inset: 9px;
  border: 1.5px dashed color-mix(in srgb, var(--leather-shadow) 80%, transparent);
  border-radius: 9px 14px 14px 9px;
  pointer-events: none;
  opacity: .75;
}

/* page-stack edge along the right of the spread */
.logbook-open__stack {
  position: absolute;
  top: clamp(20px, 2.6vw, 34px);
  bottom: clamp(20px, 2.6vw, 34px);
  right: clamp(12px, 1.5vw, 20px);
  width: clamp(9px, 1vw, 14px);
  border-radius: 0 6px 6px 0;
  background:
    repeating-linear-gradient(90deg,
      var(--paper) 0px, var(--paper) 1.6px,
      var(--grid) 2.2px, var(--paper) 2.8px),
    var(--paper);
  box-shadow:
    inset -2px 0 3px color-mix(in srgb, var(--furniture) 55%, transparent),
    inset 0 2px 3px color-mix(in srgb, var(--furniture) 40%, transparent),
    inset 0 -2px 3px color-mix(in srgb, var(--furniture) 40%, transparent);
}

/* the ribbon nub was removed pass 6 (owner call: unnecessary set
   dressing); the Bench tab and the page-furniture link remain the two
   ways back to the bench. */

.spread {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border-radius: 8px;
}

/* gutter shadow between the pages */
.spread::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: calc(41.666% - 26px); width: 52px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--furniture) 34%, transparent) 42%,
    color-mix(in srgb, var(--ink) 38%, transparent) 50%,
    color-mix(in srgb, var(--furniture) 34%, transparent) 58%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.page {
  position: relative;
  min-width: 0;
  padding: clamp(20px, 2.8vw, 42px) clamp(18px, 2.6vw, 40px);
  background:
    radial-gradient(ellipse 120% 80% at 30% 8%,
      color-mix(in srgb, var(--paper) 96%, var(--leather-light)) 0%,
      var(--paper) 55%,
      color-mix(in srgb, var(--paper) 94%, var(--furniture)) 100%),
    var(--paper);
  display: flex;
  flex-direction: column;
}

/* paper tooth as a plain overlay (no blend — see token note) */
.page::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--tx-pore);
  background-size: 220px 220px;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
.page > * { position: relative; z-index: 1; }

.page--left {
  border-radius: 10px 0 0 10px;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--grid) 70%, transparent);
}

.page--right {
  border-radius: 0 10px 10px 0;
}

.page__furniture {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 10px;
  margin-bottom: clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--grid);
  font-family: var(--font-furniture);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--furniture);
}
.page__furniture--foot {
  border-bottom: 0;
  border-top: 1px solid var(--grid);
  padding-top: 10px;
  padding-bottom: 0;
  margin-top: auto;
  margin-bottom: 0;
}
.furniture-link { color: var(--furniture); text-decoration: none; }
.furniture-link:hover { color: var(--ink); }

.page__body { flex: 0 1 auto; }
.page--left .page__body { position: sticky; top: 3vh; padding-bottom: 2rem; }

.furniture-eyebrow {
  font-family: var(--font-furniture);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--furniture);
  margin: 2.2em 0 .8em;
}
.page__body > .furniture-eyebrow:first-child { margin-top: 0; }

.garage-list {
  list-style: none;
  margin: 0; padding: 0;
}
.garage-list li { margin: 0 0 .55em; }
.garage-list a {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.garage-list a:hover { border-bottom-color: var(--leather); }
.garage-list a[aria-current="page"] {
  border-bottom: 2px solid var(--leather);
}

.hand-note {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--ink);
  transform: rotate(-.6deg);
  margin: .2em 0 1em;
}
.hand-note--lead { font-size: 1.6rem; }

/* ---------- the written layer: markdown rendered onto the paper ---------- */

.page__body--entry {
  font-size: 1.04rem;
  line-height: 1.68;
  color: var(--ink);
}

.entry-title {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  margin: 0 0 .35em;
  transform: rotate(-.5deg);
}

.page__body--entry h1 {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.15;
  margin: .2em 0 .6em;
  transform: rotate(-.4deg);
}

.page__body--entry h2 {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.65rem;
  line-height: 1.2;
  margin: 1.6em 0 .5em;
  padding-bottom: .15em;
  border-bottom: 1px solid var(--grid);
  transform: rotate(-.3deg);
}

.page__body--entry h3 {
  font-family: var(--font-furniture);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--furniture);
  margin: 1.8em 0 .6em;
}

.page__body--entry p { margin: 0 0 1em; }

.page__body--entry a { color: var(--ink); text-decoration-color: var(--leather); text-underline-offset: 3px; }
.page__body--entry a:hover { color: var(--leather-shadow); }

.page__body--entry ul, .page__body--entry ol { margin: 0 0 1em; padding-left: 1.3em; }
.page__body--entry li { margin-bottom: .35em; }
.page__body--entry li::marker { color: var(--furniture); }

.page__body--entry hr {
  border: 0;
  border-top: 1px solid var(--grid);
  margin: 1.8em 0;
}

.page__body--entry em { color: var(--furniture); }

.page__body--entry strong { letter-spacing: .01em; }

.entry-foot {
  margin-top: 3em;
  padding-top: 1.2em;
  border-top: 1px solid var(--grid);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--furniture);
}
.entry-foot a { color: var(--furniture); }

/* ---------- index tabs on the book edge ---------- */

.logbook-tabs {
  position: absolute;
  top: clamp(70px, 10vh, 120px);
  right: -1px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 5;
}

/* card stock stuck in the book: chunky, edge-lit, brand-coloured via
   per-bike --tab-face/--tab-edge data (LOG stays leather) */
.logbook-tab {
  --tab-face: #C29659; /* worn leather face, AA vs near-black text */
  --tab-edge: var(--leather-shadow);
  display: block;
  min-width: 84px;
  padding: 15px 18px 15px 20px;
  border-radius: 0 10px 10px 0;
  transform: translateX(calc(100% - 5px));
  font-family: var(--font-furniture);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--garage);
  background:
    var(--tx-paper),
    linear-gradient(180deg,
      color-mix(in srgb, var(--tab-face) 82%, var(--paper)) 0%,
      var(--tab-face) 28%,
      var(--tab-face) 74%,
      color-mix(in srgb, var(--tab-face) 74%, var(--tab-edge)) 100%);
  background-size: 260px 260px, 100% 100%;
  box-shadow:
    3px 4px 8px color-mix(in srgb, #000 50%, transparent),
    1px 1px 2px color-mix(in srgb, #000 35%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--paper) 55%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--tab-edge) 80%, transparent),
    inset 7px 0 9px -7px color-mix(in srgb, #000 55%, transparent);
  transition: transform .15s ease;
}
.logbook-tab:hover { transform: translateX(calc(100% - 1px)); }
.logbook-tab:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

.logbook-tab.is-active {
  --tab-face: var(--paper);
  --tab-edge: var(--grid);
  color: var(--ink);
  transform: translateX(calc(100% - 2px));
}

/* the way back: dark leather like the cover, set apart from the
   content tabs. Paper text — near-black fails AA on this face, and
   the shade is the distinguishing feature (deviation noted). */
.logbook-tab--bench {
  --tab-face: var(--leather);
  --tab-edge: var(--leather-shadow);
  color: var(--paper);
  margin-bottom: 18px;
}

/* ================= Responsive ================= */

@media (max-width: 880px) {
  /* the spread closes to a single page filling the viewport */
  .reading { padding: 68px 8px 8vh; }

  .logbook-open {
    width: 100%;
    padding: 12px;
    padding-right: 20px;
  }

  .spread { grid-template-columns: 1fr; }
  .spread::before { display: none; }
  .page--left { display: none; }
  .page--right { border-radius: 8px; }

  .logbook-tabs {
    top: auto;
    bottom: 100%;
    right: 18px;
    flex-direction: row;
    gap: 8px;
  }
  .logbook-tab {
    transform: none;
    border-radius: 10px 10px 0 0;
    min-width: 0;
    padding: 12px 16px 15px;
    box-shadow:
      3px -3px 8px color-mix(in srgb, #000 40%, transparent),
      inset 0 2px 0 color-mix(in srgb, var(--paper) 55%, transparent),
      inset 0 -7px 9px -7px color-mix(in srgb, #000 55%, transparent);
  }
  .logbook-tab:hover { transform: none; }
  .logbook-tab.is-active { transform: none; padding-bottom: 18px; }
  .logbook-tab--bench { margin: 0 10px 0 0; }

  /* small clutter goes, key props stay */
  .prop--minor { display: none; }

  .reading { position: relative; }

  /* Frame 1 simplifies but keeps the angle */
  .bench, .bench-stage { left: -55vw; right: -55vw; top: 30%; bottom: -50%; transform: rotateX(48deg); }
  /* pass 6: re-seated against the portrait photo crop — smaller and
     higher than the rendered-room values (62vw / 20%), which sat the
     book too low and ran it off the fold and onto the bark edge.
     Pass 7 trial: scaled by the same ratio as desktop (53vw x 16.5/21). */
  .logbook-closed { width: clamp(150px, 42vw, 220px); top: 15%; }
}

/* ================= Reduced motion ================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}