/* File cabinet for "Selected works & datasets" (built by js/cabinet.js).
   Same room as the bookcase: one lamp up and to the left, real textures for what CSS can't
   fake (enamel, chips, manila fibre, a coffee ring), CSS for shape, light and colour.
   Notes: mockups/cabinet/NOTES.md. Textures: mockups/cabinet/make_textures.py. */

.office { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start;
  --cab-steel: url("../cabinet/tex/steel.webp"); --cab-wear: url("../cabinet/tex/steel-wear.webp");
  --cab-manila: url("../cabinet/tex/manila.webp"); --cab-coffee: url("../cabinet/tex/coffee.webp");
  --cab-paper: url("../assets/tex/paper.webp"); --cab-oak: url("../assets/tex/oak.webp"); --cab-foil: url("../assets/tex/foil-mask.webp");
  --paint: #6a7060; --gap: #12130e; --typed: "Courier Prime", ui-monospace, monospace;
  --ring: 0 0 0 3px #f7f3ea, 0 0 0 6px #7b2d3b; }
.cab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the cabinet: a painted-steel, five-drawer vertical file ---------- */
.cabinet { position: sticky; top: 84px; clip-path: inset(0 -90px -420px -90px); perspective: 1150px; perspective-origin: 50% -110%; transition: perspective-origin .5s ease; }
/* js/cabinet.js moves the eye to sit the same height above whichever drawer is pulled */
/* the top, seen just from above: lighter, it faces the lamp; a little dust */
.cab-top { position: relative; z-index: 2; height: 9px; margin: 0 1px; clip-path: polygon(2.5% 0, 97.5% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, rgba(255,248,230,.24), rgba(255,248,230,.05) 60%, rgba(0,0,0,.1)), var(--cab-steel) 0 0 / 256px, color-mix(in srgb, var(--paint), #fff 12%);
  background-blend-mode: normal, multiply; box-shadow: inset 0 -1px 0 rgba(255,250,235,.35); }
.cab-body { position: relative; transform-style: preserve-3d; padding: 30px 14px 13px; border-radius: 0 0 2px 2px;
  background: radial-gradient(130% 80% at 10% 0%, rgba(255,246,226,.16), rgba(255,246,226,0) 60%), linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.16)),
    var(--cab-steel) 40px 10px / 256px, var(--paint);
  background-blend-mode: normal, normal, multiply;
  box-shadow: inset 1.5px 0 0 rgba(255,250,235,.16), inset -2px 0 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,250,235,.2), 16px 30px 34px -22px rgba(25,14,5,.75); }
/* chips and rub on the top rail, from the same wear sheet as the drawers */
.cab-body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; pointer-events: none; opacity: .9;
  background: var(--cab-wear) 0 -400px / 300px 600px; }
/* the top rail as a real plane just in front of the drawers' boxes, so an opening top drawer can never show through
   it (a preserve-3d parent's own background isn't depth-sorted the same way in every engine) */
.cab-rail { position: absolute; left: 0; right: 0; top: 0; height: 30px; transform: translateZ(.6px); pointer-events: none;
  background: radial-gradient(130% 260% at 10% 0%, rgba(255,246,226,.16), rgba(255,246,226,0) 60%), var(--cab-wear) 0 -400px / 300px 600px, var(--cab-steel) 40px 10px / 256px, var(--paint);
  background-blend-mode: normal, normal, multiply; box-shadow: inset 1.5px 0 0 rgba(255,250,235,.16), inset -2px 0 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,250,235,.2); }
/* lock cylinder, top right of the face frame */
.cab-lock { position: absolute; transform: translateZ(1.2px); top: 8px; right: 17px; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1c1b18 0 1.2px, transparent 1.4px), linear-gradient(#1c1b18, #1c1b18) 50% 50% / 1.4px 7px no-repeat,
    radial-gradient(circle at 38% 32%, #f6f3ea, #b5b2a8 38%, #6d6a62 70%, #a9a69c);
  box-shadow: 0 0 0 1.5px #3e3d36, 0 0 0 2.5px rgba(255,250,235,.18), 1px 2px 2px rgba(0,0,0,.5); }
.cab-plinth { position: relative; height: 18px; margin: 0 8px; border-radius: 0 0 2px 2px;
  background: radial-gradient(40% 70% at 28% 60%, rgba(10,8,5,.45), transparent 70%), radial-gradient(18% 50% at 71% 40%, rgba(10,8,5,.3), transparent 70%),
    linear-gradient(180deg, #0f100c, #2b2e25 30%, #23261e), var(--cab-steel) 0 0 / 256px;
  background-blend-mode: normal, normal, multiply; box-shadow: 0 10px 12px -6px rgba(25,14,5,.55); }

/* ---------- a drawer ---------- */
.drawer { --D: 214px; position: relative; display: block; width: 100%; height: 92px; margin: 0 0 11px; padding: 0; border: 0; background: none;
  cursor: pointer; transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; }
.drawer:last-of-type { margin-bottom: 0; }
.drawer:focus-visible { outline: none; }
.dhov, .dmove, .dbox { position: absolute; inset: 0; transform-style: preserve-3d; }
/* hover: the drawer eases out a few px on its runners, with a little give at the end */
.dhov { transition: transform .38s cubic-bezier(.3,.7,.25,1.35); }
.drawer:hover .dhov { transform: translateZ(7px); }
.drawer[aria-expanded="true"] .dhov { transform: none; transition-duration: .2s; }
/* the box behind the front: two steel sides, a floor and a back, and what's filed inside */
.dbox { pointer-events: none; visibility: hidden; }
/* the box stays hidden through the hover nudge, so nothing can glimpse past the rail before you pull */
.drawer.moving .dbox, .drawer[aria-expanded="true"] .dbox { visibility: visible; }
.dside, .dfloor, .dback { position: absolute; display: block; }
.dside { top: 17px; bottom: 3px; width: var(--D); transform-origin: 0 50%; transform: rotateY(90deg);
  background: linear-gradient(90deg, rgba(255,240,215,.1), rgba(0,0,0,.25) 30%, rgba(0,0,0,.78)), var(--cab-steel) 0 0 / 256px, color-mix(in srgb, var(--paint), #000 14%); background-blend-mode: normal, multiply; }
.dside.l { left: 4px; } .dside.r { left: calc(100% - 4px); }
.dside::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,248,230,.28); }
.dfloor { left: 4px; right: 4px; bottom: 3px; height: var(--D); transform-origin: 50% 100%; transform: rotateX(90deg);
  background: linear-gradient(0deg, rgba(255,246,228,.08), rgba(0,0,0,.35) 45%, rgba(0,0,0,.8)), repeating-linear-gradient(90deg, transparent 0 22px, rgba(0,0,0,.18) 22px 24px, rgba(255,246,228,.05) 24px 25px),
    var(--cab-steel) 0 0 / 256px, #50564a; background-blend-mode: normal, normal, multiply; }
.dback { left: 4px; right: 4px; top: 17px; bottom: 3px; transform: translateZ(calc(-1 * var(--D))); background: #0b0c09; }
/* the front's top return, seen from above once the drawer is out */
.dlip { position: absolute; left: 0; right: 0; top: 0; height: 15px; transform-origin: 50% 0; transform: rotateX(-90deg);
  background: linear-gradient(0deg, rgba(255,248,230,.22), rgba(0,0,0,.2)), var(--cab-steel) 0 0 / 256px, color-mix(in srgb, var(--paint), #fff 9%); background-blend-mode: normal, multiply; }
/* folders standing in the drawer: each is a real plane at its own depth, tabs up */
.df, .dfollow { position: absolute; left: 10px; right: 10px; bottom: 4px; height: calc(100% - 24px + var(--hv, 0px)); transform-origin: 50% 100%; transform: translateZ(calc(var(--z) * -1px)) rotateX(var(--ln, 0deg));
  background: linear-gradient(rgba(8,5,0,var(--dk)), rgba(8,5,0,calc(var(--dk) + .25))), var(--cab-manila) 0 0 / 200px, var(--st); background-blend-mode: normal, multiply;
  box-shadow: inset 0 1.5px 0 rgba(255,245,220,.45), inset 0 -10px 12px -6px rgba(0,0,0,.45); }
.df::before { content: ""; position: absolute; bottom: 100%; left: var(--tx); width: var(--tw); height: 9px; clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  background: linear-gradient(var(--band) 0 2.5px, var(--lab) 2.5px), var(--st); filter: brightness(calc(1 - var(--dk))); }
.df.dcard { left: 24px; right: 24px; height: calc(100% - 38px); background: linear-gradient(rgba(8,5,0,var(--dk)), rgba(8,5,0,calc(var(--dk) + .2))), linear-gradient(transparent 7px, rgba(190,60,60,.5) 7px 8px, transparent 8px), #f4f0e6; }
.df.dcard::before { display: none; }
.df.divider { background: linear-gradient(rgba(8,5,0,var(--dk)), rgba(8,5,0,calc(var(--dk) + .2))), #b9a37a; }
.df.divider::before { display: block; left: 8%; width: 24%; height: 11px; background: linear-gradient(#7b2d3b 0 3px, #efe7d4 3px); }
.dfollow { left: 18px; right: 18px; height: calc(100% - 34px); transform: translateZ(calc(var(--z) * -1px)) rotateX(10deg);
  background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.7)), var(--cab-steel) 0 0 / 256px, var(--paint); background-blend-mode: normal, multiply; }

/* the front: pressed steel with rolled edges, a dark reveal all round, light from the upper left */
.dfront { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 8px; border-radius: 3px; transform: translateZ(.5px);
  background: linear-gradient(180deg, rgba(255,246,228,var(--lt, .1)), rgba(255,246,228,0) 42%, rgba(0,0,0,.05) 70%, rgba(0,0,0,.16)),
    linear-gradient(90deg, rgba(255,246,228,.07), rgba(255,246,228,0) 40%, rgba(0,0,0,.08)),
    var(--cab-steel) var(--sx, 0) var(--sy, 0) / 256px, var(--paint);
  background-blend-mode: normal, normal, multiply;
  box-shadow: 0 0 0 2px var(--gap), 0 -1px 0 2px rgba(0,0,0,.25), 1px 4px 3px 1px rgba(0,0,0,.42),
    inset 0 1.5px 0 rgba(255,250,235,.3), inset 0 4px 3px -2px rgba(255,250,235,.1), inset 1.5px 0 0 rgba(255,250,235,.13),
    inset 0 -2px 0 rgba(0,0,0,.32), inset 0 -6px 5px -4px rgba(0,0,0,.25), inset -1.5px 0 0 rgba(0,0,0,.22); }
.dwear { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--wo, .9);
  background: var(--cab-wear) 0 calc(var(--wv) * 50%) / 100% 300%; transform: scaleX(var(--wf, 1)); }
.drawer:focus-visible .dfront { box-shadow: 0 0 0 2.5px var(--gap), var(--ring), 1px 4px 3px 1px rgba(0,0,0,.42), inset 0 1.5px 0 rgba(255,250,235,.3), inset 0 -2px 0 rgba(0,0,0,.32); }

/* brass card holder, riveted, with a yellowed celluloid window */
.holder { position: relative; padding: 3px 9px; border-radius: 1.5px;
  background: radial-gradient(30% 60% at 85% 70%, rgba(40,25,5,.35), transparent 70%), linear-gradient(180deg, #e6d49f 0, #b59855 26%, #8b6d36 50%, #c3aa6a 76%, #7a5f2e 100%);
  box-shadow: inset 0 0 0 .5px rgba(60,40,10,.7), 0 1px 0 rgba(255,245,220,.2), 1px 2px 2px rgba(0,0,0,.45); }
.holder::before, .holder::after { content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4e7bd, #9a7d40 60%, #5c4519); box-shadow: 0 .5px .5px rgba(0,0,0,.6); }
.holder::before { left: 2.5px; } .holder::after { right: 2.5px; }
.dlabel { position: relative; display: grid; min-width: 150px; padding: 4px 9px 3px; text-align: center; color: #26221c;
  font: 700 12.5px/1.25 var(--typed); letter-spacing: .05em; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(0,0,0,.07), transparent 35%), var(--cab-paper) 0 0 / 140px, var(--card, #eee4cb); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.dlabel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,.3) 0 14%, rgba(255,255,255,0) 26% 58%, rgba(255,255,255,.12) 66%, rgba(255,255,255,0) 76%), rgba(214,190,120,.1); }
.dlabel small { font-weight: 400; font-size: 10.5px; letter-spacing: .03em; text-transform: none; color: #5d5243; }
.dlabel .ty span, .tl span { display: inline-block; transform: translateY(var(--y)); opacity: var(--o); }
.card-fresh { --card: #f4f0e6; }
.card-old { --card: #e2cfa4; } .card-old .dlabel small { color: #4a4034; }
.card-old .dlabel { box-shadow: inset 0 1px 2px rgba(0,0,0,.3), inset 0 0 8px rgba(120,80,20,.35); }
/* a Dymo strip in the holder: embossed letters on oxblood tape, a second strip for the count */
.card-dymo .dlabel { gap: 3px; padding: 3px 6px; background: var(--cab-paper) 0 0 / 140px, #e9dfc6; }
.card-dymo .dymo { justify-self: center; padding: 2px 7px 1px; border-radius: 1.5px; font: 400 11.5px/1.3 var(--mono); letter-spacing: .14em; color: #f6ece8;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%, rgba(0,0,0,.16)), #7b2d3b;
  text-shadow: 0 -.5px 0 rgba(0,0,0,.35), 0 .5px 0 rgba(255,255,255,.25); box-shadow: 0 .5px 1px rgba(0,0,0,.4); }
.card-dymo .dymo + .dymo { transform: rotate(-1deg) translateX(3px); font-size: 10px; letter-spacing: .1em; }

/* chrome pull with a thumb latch; warm room reflected in the highlights */
.pull { position: relative; width: 92px; height: 17px; border-radius: 3px 3px 9px 9px / 3px 3px 10px 10px;
  background: linear-gradient(180deg, #fbf7ec 0, #cfccc2 17%, #7a786f 40%, #393833 52%, #8e8c84 63%, #e7e3d7 85%, #9b998f 100%);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.55), 2px 4px 3px rgba(0,0,0,.42), inset 0 -1px 1px rgba(0,0,0,.3); transition: filter .2s; }
.pull::before { content: ""; position: absolute; left: 34%; right: 34%; bottom: 3px; height: 5px; border-radius: 1px 1px 3px 3px;
  background: linear-gradient(180deg, #24231f, #57554e 60%, #c8c5bb); box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.pull::after { content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.1) 60%, rgba(255,255,255,.45)); }
.drawer:hover .pull { filter: brightness(1.06); }

/* ---------- the desk: oak, under the same lamp ---------- */
.desk { position: relative; height: 620px; padding: 22px 26px 26px; border-radius: 3px; scroll-margin-top: 80px;
  background: radial-gradient(110% 80% at 10% -8%, rgba(255,232,192,.3), rgba(255,232,192,0) 55%), radial-gradient(150% 120% at 55% 35%, rgba(20,10,0,0) 45%, rgba(20,10,0,.34)),
    var(--cab-oak) 0 0 / 512px 256px, #8f6a43;
  box-shadow: inset 0 1px 0 rgba(255,236,205,.28), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 0 #43301d, 0 26px 36px -26px rgba(30,15,5,.85); }
.desk-in { position: relative; display: flex; flex-direction: column; height: 100%; }
.layer { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.desk-scroll { flex: 1; min-height: 0; overflow: auto; margin: -10px -12px -14px; padding: 10px 12px 14px; container-type: inline-size;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(30,15,0,.45) transparent; }
.desk-scroll:has(.doc-grid), .desk-scroll:has(.cards) { -webkit-mask: linear-gradient(#000 calc(100% - 28px), transparent); mask: linear-gradient(#000 calc(100% - 28px), transparent); }
.desk-scroll:has(.scatter) { overflow: visible; }
.desk-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 22px; }
.desk-slip { margin: 0; padding: 7px 13px 6px; font: 400 13.5px/1.35 var(--typed); color: #26221c; rotate: -.7deg;
  background: var(--cab-paper) 0 0 / 160px, #f1eadb; box-shadow: 0 0 0 .5px rgba(70,50,25,.3), 1px 2px 3px rgba(30,15,0,.35); }
.desk-slip b { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.desk-btn { min-height: 44px; font: 13px var(--mono); background: var(--paper-3); color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: 0 16px; cursor: pointer;
  box-shadow: 0 3px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.desk-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); } .desk-btn:active { transform: translateY(3px); box-shadow: none; }
.desk-btn:focus-visible { outline: none; box-shadow: 0 3px 0 var(--ink), var(--ring); }
/* nothing out: one typed card on the blotter */
.desk-empty { position: relative; display: grid; place-items: center; height: 100%; }
.desk-note { width: 260px; padding: 30px 20px 16px; rotate: -2.2deg; font: 15px/1.6 var(--typed); color: #2a2620;
  background: linear-gradient(transparent 20px, rgba(190,60,60,.45) 20px 21px, transparent 21px), repeating-linear-gradient(transparent 0 23px, rgba(70,110,160,.2) 23px 24px), var(--cab-paper) 0 0 / 180px, #fbf8ef;
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 3px 10px 14px -8px rgba(30,15,0,.6); }
.desk-note p { margin: 0; } .desk-note p span, .tl span, .ty span { display: inline-block; transform: translateY(var(--y)); opacity: var(--o); } .desk-note .sub { display: block; margin-top: 4px; font-size: 12.5px; color: #5d5446; }

/* ---------- index cards (shower thoughts) ---------- */
.cards { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 24px; margin: 0; padding: 8px 6px; }
.cards:focus, .scatter:focus { outline: none; } .cards:focus-visible, .scatter:focus-visible { outline: 3px solid #f7f3ea; outline-offset: 6px; }
.index-card { position: relative; min-height: 150px; padding: 27px 18px 16px; rotate: var(--r); font: 15px/1.6 var(--typed); color: #2b2620;
  background: linear-gradient(transparent 21px, rgba(190,60,60,.45) 21px 22px, transparent 22px), repeating-linear-gradient(transparent 0 23px, rgba(70,110,160,.2) 23px 24px),
    linear-gradient(90deg, rgba(120,90,40,calc(var(--age) * .12)), transparent 10%, transparent 90%, rgba(120,90,40,calc(var(--age) * .14))), var(--cab-paper) var(--mx, 0) 0 / 180px, #fbf8ef;
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 3px 10px 14px -8px rgba(30,15,0,.6); }
.index-card p { margin: 0; } .index-card span { display: block; margin-top: 10px; font-size: 12.5px; color: #5d5446; }
.index-card.pinned::before { content: ""; position: absolute; top: -9px; left: 50%; width: 14px; height: 30px; margin-left: -7px; rotate: 6deg;
  border: 2px solid #a3a29b; border-radius: 7px; border-bottom-color: #7f7e78; box-shadow: 1px 1px 1px rgba(0,0,0,.25); }

/* ---------- layout A, "cards": a tidy grid of paper cards; scrolls inside the desk if it must ---------- */
.doc-grid { list-style: none; margin: 0; padding: 4px 2px 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; align-items: start; }
@container (max-width: 640px) { .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 400px) { .doc-grid { grid-template-columns: 1fr; } }
.doc { rotate: var(--r); }
.doc-card { position: relative; display: grid; align-content: start; gap: 7px; width: 100%; min-height: 156px; padding: 12px 14px 15px; border: 0; border-radius: 1px; text-align: left; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, rgba(110,80,30,calc(var(--age) * .12)), rgba(110,80,30,0) 16px), linear-gradient(90deg, rgba(110,80,30,calc(var(--age) * .1)), rgba(110,80,30,0) 8%, rgba(110,80,30,0) 92%, rgba(110,80,30,calc(var(--age) * .12))),
    linear-gradient(150deg, rgba(255,255,255,.25), rgba(255,255,255,0) 45%), var(--cab-paper) var(--mx, 0) var(--my, 0) / 220px, #f6f1e4;
  box-shadow: 0 0 0 .5px rgba(70,50,25,.28), 0 1px 1px rgba(0,0,0,.16), 3px 8px 12px -8px rgba(30,15,0,.6);
  transition: transform .3s cubic-bezier(.3,.7,.25,1.3), box-shadow .3s; }
.doc-card:hover, .doc-card:focus-visible { transform: translateY(-5px) rotate(calc(var(--r) * -1)); outline: none;
  box-shadow: 0 0 0 .5px rgba(70,50,25,.28), 0 1px 1px rgba(0,0,0,.12), 5px 18px 20px -12px rgba(30,15,0,.65); }
.doc-card:focus-visible { box-shadow: var(--ring), 5px 18px 20px -12px rgba(30,15,0,.65); }
.dc-head { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(123,45,59,.38);
  font: 700 11px/1.2 var(--typed); letter-spacing: .08em; text-transform: uppercase; color: #4f463a; }
.dc-head span span { display: inline-block; transform: translateY(var(--y)); opacity: var(--o); }
.dc-title { font: 500 17px/1.25 var(--serif); color: #1e1b18; }
.dc-q { font: italic 15px/1.35 var(--serif); color: #7b2d3b; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dc-q.meta { font-style: normal; color: #4f463a; }
.dc-clip { position: absolute; top: -11px; right: 58px; width: 14px; height: 44px; rotate: 4deg; pointer-events: none; filter: drop-shadow(1px 1.5px .6px rgba(0,0,0,.35)); }
.dc-clip svg { display: block; width: 100%; height: 100%; overflow: visible; }
.item.lifted { visibility: hidden; }

/* ---------- layout B, "scatter": printed pages strewn over the desk ---------- */
.scatter { position: relative; list-style: none; margin: 0; padding: 0; height: 100%; }
.page { position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, 150px); rotate: var(--r0); }
.page:has(.pg:hover), .page:has(.pg:focus-visible) { z-index: 20; }
.pg { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.32; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .3s cubic-bezier(.3,.7,.25,1.3); }
.pg:hover, .pg:focus-visible { transform: translateY(-6px) scale(1.06) rotate(calc(var(--r0) * -.45)); outline: none; }
/* some documents are a few pages thick, the sheets under it not quite squared up */
.page.thick .pg::before, .page.thick .pg::after { content: ""; position: absolute; inset: 0; background: var(--cab-paper) 0 0 / 160px, #efe9db; box-shadow: 0 0 0 .5px rgba(70,50,25,.25), 1px 2px 3px rgba(30,15,0,.3); }
.page.thick .pg::before { rotate: -3deg; translate: -3px 3px; } .page.thick .pg::after { rotate: 2deg; translate: 3px 1px; background-color: #f3eee2; }
.pg-paper { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 6%; padding: 11% 11% 10%; overflow: hidden;
  background: linear-gradient(180deg, rgba(110,80,30,calc(var(--age) * .12)), rgba(110,80,30,0) 10%), linear-gradient(90deg, rgba(110,80,30,calc(var(--age) * .1)), rgba(110,80,30,0) 9%, rgba(110,80,30,0) 91%, rgba(110,80,30,calc(var(--age) * .12))),
    linear-gradient(150deg, rgba(255,255,255,.3), rgba(255,255,255,0) 45%), var(--cab-paper) var(--mx, 0) var(--my, 0) / 200px, #f8f4ea;
  box-shadow: 0 0 0 .5px rgba(70,50,25,.3), 0 1px 1px rgba(0,0,0,.18), 3px 8px 12px -6px rgba(30,15,0,.6); transition: box-shadow .3s; }
.pg:hover .pg-paper { box-shadow: 0 0 0 .5px rgba(70,50,25,.3), 0 1px 1px rgba(0,0,0,.12), 8px 20px 22px -10px rgba(30,15,0,.6); }
.pg:focus-visible .pg-paper { box-shadow: var(--ring), 8px 20px 22px -10px rgba(30,15,0,.6); }
.pg-head { padding-bottom: 4%; border-bottom: 1px solid rgba(123,45,59,.35); font: 700 8.5px/1.2 var(--typed); letter-spacing: .06em; text-transform: uppercase; color: #4f463a; white-space: nowrap; overflow: hidden; }
.pg-title { font: 600 12px/1.22 var(--serif); color: #1e1b18; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* body text, too small to read, the way a page looks from arm's length */
.pg-text { flex: 1; min-height: 0;
  background: linear-gradient(90deg, rgba(40,30,20,.0) 0 62%, #f8f4ea 62%) 0 calc((var(--lines) - 1) * 8px) / 100% 8px no-repeat,
    repeating-linear-gradient(180deg, rgba(40,30,20,.24) 0 2px, transparent 2px 8px) 0 0 / 100% calc(var(--lines) * 8px) no-repeat; }
.pg-staple { position: absolute; left: 7%; top: 5%; width: 16%; height: 2px; rotate: -35deg; border-radius: 1px; background: linear-gradient(#e7e6e1, #8d8c86); box-shadow: 0 1px .5px rgba(0,0,0,.35); }
.pg-ear { position: absolute; right: 0; bottom: 0; width: 16%; aspect-ratio: 1; background: linear-gradient(315deg, #8f6a43 0 50%, #e8e1d0 50%, #d9d0bc); box-shadow: -1px -1px 2px rgba(30,15,0,.25); }
.coffee { position: absolute; pointer-events: none; mix-blend-mode: multiply; background: var(--cab-coffee) 0 0 / 100%; }
.pg-paper .coffee { width: 105%; aspect-ratio: 1; right: -48%; top: 34%; opacity: .75; rotate: 40deg; }
.page.note { width: var(--w); min-height: 0; aspect-ratio: 1 / .62; padding: 9% 7% 5%; rotate: var(--r0); font-size: 14px; }
/* the typed slip that names the page under your cursor or keyboard focus */
.cab-peek { position: absolute; z-index: 40; width: 260px; padding: 12px 15px 11px; rotate: -.8deg; pointer-events: none; opacity: 0; transform: translateY(4px);
  background: linear-gradient(transparent 0 6px, rgba(190,60,60,.4) 6px 7px, transparent 7px), var(--cab-paper) 0 0 / 160px, #fbf8ef;
  box-shadow: 0 0 0 .5px rgba(70,50,25,.3), 3px 10px 16px -8px rgba(30,15,0,.65); transition: opacity .16s, transform .16s; }
.cab-peek.on { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.cab-peek b { display: block; font: 600 16px/1.25 var(--serif); color: #1e1b18; }
.cab-peek i { display: block; margin-top: 5px; font: italic 14.5px/1.35 var(--serif); color: #7b2d3b; }
.cab-peek i:empty { display: none; }
.cab-peek span { display: block; margin-top: 8px; font: 11.5px/1.3 var(--typed); letter-spacing: .06em; text-transform: uppercase; color: #4f463a; }

/* ---------- the document, picked up to read: laid over the desk, which stays as it was ---------- */
.openp { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; }
.op-stage { flex: 1; min-height: 0; display: grid; justify-items: center; align-items: start; padding-top: 6px; }
/* the paper: printed, a second page under it, sitting slightly off square */
.sheet-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(100%, 560px); max-height: 100%; rotate: var(--sr, .6deg); }
.sheet-wrap::before, .sheet-wrap::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cab-paper) 0 0 / 220px, #f1ecdf; box-shadow: 0 0 0 .5px rgba(80,60,30,.2), 0 1px 2px rgba(0,0,0,.18), 3px 10px 18px -8px rgba(30,15,0,.55); }
.sheet-wrap::before { rotate: -1.6deg; translate: -4px 5px; } .sheet-wrap::after { rotate: 1deg; translate: 4px 2px; background-color: #f4efe3; }
.sheet { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 9px; min-height: min(400px, 100%); overflow: auto; padding: 32px 30px 22px;
  background: linear-gradient(155deg, rgba(255,255,255,.25), rgba(255,255,255,0) 40%), linear-gradient(320deg, rgba(90,60,20,.09), rgba(90,60,20,0) 18%), var(--cab-paper) 30px 60px / 256px, #f8f4ea;
  box-shadow: 0 0 0 .5px rgba(80,60,30,.22), 0 1px 2px rgba(0,0,0,.2), 4px 14px 24px -10px rgba(30,15,0,.6); }
.sheet .s-head { margin: 0 0 6px; font: 12.5px/1.3 var(--typed); letter-spacing: .06em; text-transform: uppercase; color: #4f463a; }
.sheet .sq { margin: 0; color: #7b2d3b; font-style: italic; font-size: 17px; line-height: 1.32; }
.sheet h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.2; color: #1e1b18; }
.sheet h3:focus { outline: none; } .sheet h3:focus-visible { outline: 2px solid #7b2d3b; outline-offset: 4px; }
.sheet .sm { margin: 0; font: 12.5px var(--mono); color: #5c564d; } .sheet .sd { margin: 0; font-size: 17px; line-height: 1.42; color: #35302a; }
.sheet .sa { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; padding-top: 14px; }
.sheet .s-alt { margin: 4px 0 0; font: 12.5px/1.5 var(--typed); color: #4f463a; }
.sheet .s-alt a { color: #6e2232; display: inline-block; padding: 6px 2px; }
.sheet .s-alt a:focus-visible { outline: 2px solid #7b2d3b; outline-offset: 1px; }
/* a Gem clip: the inner loop on top of the paper, the outer loop behind it */
.clip { position: absolute; z-index: 0; top: -14px; right: 54px; width: 20px; height: 62px; rotate: 5deg; pointer-events: none; }
.clip.front { z-index: 2; filter: drop-shadow(1px 1.5px .6px rgba(0,0,0,.35)); }
.clip svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- hold to download ---------- */
.hold { position: relative; overflow: hidden; min-width: 170px; min-height: 46px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 8px; background: var(--paper-3); color: var(--ink);
  font: 12.5px var(--mono); cursor: pointer; box-shadow: 0 4px 0 var(--ink); transform: translateY(-2px); transition: transform .15s, box-shadow .15s, background .18s, color .18s;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hold:hover { transform: translateY(-4px); box-shadow: 0 6px 0 var(--ink); background: #f3e6d6; }
.hold:focus-visible { outline: none; box-shadow: 0 4px 0 var(--ink), var(--ring); }
.hold.holding { transform: translateY(2px); box-shadow: none; color: #fff; }
.hold.done { color: #f6efe0; background: #2f4a3a; border-color: #1f3328; box-shadow: 0 4px 0 #1f3328; }
.hold-fill { position: absolute; inset: 0; background: var(--accent); transform: translateX(-101%); }
.hold.done .hold-fill { display: none; }
.hold-label { position: relative; }
.ext { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 8px; background: var(--paper-3); color: var(--ink);
  font: 12.5px var(--mono); text-decoration: none; box-shadow: 0 4px 0 var(--ink); transform: translateY(-2px); transition: transform .15s, box-shadow .15s; }
.ext:hover { transform: translateY(-4px); box-shadow: 0 6px 0 var(--ink); }
.ext:focus-visible { outline: none; box-shadow: 0 4px 0 var(--ink), var(--ring); }

/* ---------- narrow: cabinet above the desk ---------- */
@media (max-width: 860px) {
  .office { grid-template-columns: 1fr; gap: 30px; }
  .cabinet { position: relative; top: 0; width: 100%; max-width: 320px; margin: 0 auto; }
  .desk { height: auto; min-height: 0; padding: 18px 14px 26px; }
  .desk-in, .layer { height: auto; }
  .desk-scroll { overflow: visible; -webkit-mask: none !important; mask: none !important; }
  .desk-empty { min-height: 170px; }
  .cards { grid-template-columns: 1fr; }
  /* stacked: the sheet replaces the desk's contents rather than lying over them */
  .desk-in.reading .layer { display: none; }
  .desk-in.reading .openp { position: static; }
  .cab-peek { width: min(240px, 80%); }
}
@media (max-width: 620px) {
  .sheet { padding: 26px 18px 18px; }
  .clip { right: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .dhov, .doc-card, .pg, .cab-peek, .pull, .hold, .ext, .desk-btn { transition: none; }
  .drawer:hover .dhov { transform: none; }
  .doc-card:hover, .doc-card:focus-visible, .pg:hover, .pg:focus-visible { transform: none; }
}

/* ---------- scattered pages with their real first page (cabinet/covers/, from make_covers.py) ---------- */
.pg-paper.has-cover { padding: 0; gap: 0; background: #fbf9f3; }
.pg-cover { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* printed on paper, lying on a desk under a warm lamp: a little paper tooth and yellowing over the scan */
.pg-paper.has-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgba(150,110,40,calc(var(--age) * .12)), rgba(150,110,40,0) 12%), linear-gradient(90deg, rgba(150,110,40,calc(var(--age) * .1)), rgba(150,110,40,0) 9%, rgba(150,110,40,0) 91%, rgba(150,110,40,calc(var(--age) * .12))),
    linear-gradient(150deg, rgba(255,250,240,0), rgba(120,90,50,.06)), var(--cab-paper) var(--mx, 0) var(--my, 0) / 200px, #f6efe0; }
.pg-paper.has-cover .pg-staple, .pg-paper.has-cover .pg-ear, .pg-paper.has-cover .coffee { z-index: 2; }

/* ---------- the cabinet's look: data-board, data-empty, data-paint, data-finish and data-hw on .office ---------- */
.office { --paint-base: #6a7060; --paint: var(--paint-base); --cab-leather: url("../assets/tex/leather.webp"); --cab-cloth: url("../assets/tex/cloth.webp"); }

/* cabinet colour: enamels that existed on real office steel */
.office[data-paint="oxblood"] { --paint-base: #6c2a33; }
.office[data-paint="battleship"] { --paint-base: #5d656b; }
.office[data-paint="putty"] { --paint-base: #b3a78d; }
.office[data-paint="navy"] { --paint-base: #2e3c50; }
.office[data-paint="mint"] { --paint-base: #8aa898; }
.office[data-paint="black"] { --paint-base: #2b2a27; }

/* finish: worn (default), restored (no chips, a fresh glossy coat), patina (decades more of it) */
.office[data-finish="restored"] { --cab-wear: linear-gradient(transparent, transparent); }
.office[data-finish="restored"] .dfront::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(172deg, rgba(255,255,255,.14) 0 22%, rgba(255,255,255,0) 34%), linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0) 30%); }
.office[data-finish="patina"] { --paint: color-mix(in srgb, var(--paint-base), #5b4528 26%); }
.office[data-finish="patina"] .dwear { opacity: 1; filter: contrast(1.25) saturate(1.2); }
.office[data-finish="patina"] .dfront::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .75;
  background: var(--cab-wear) 0 calc((2 - var(--wv)) * 50%) / 100% 300%; transform: scale(-1, -1); }
.office[data-finish="patina"] .dlabel { --card: #dcc89c; }

/* hardware: brass holder + chrome pull (default), all brass, or blackened */
.office[data-hw="brass"] .pull { background: linear-gradient(180deg, #fbefc4 0, #d7bb72 17%, #9c7a36 40%, #5e451a 52%, #a88a45 63%, #e8d18e 85%, #a2853f 100%); }
.office[data-hw="brass"] .pull::before { background: linear-gradient(180deg, #2b210f, #6b5426 60%, #d6bd7a); }
.office[data-hw="black"] .holder { background: linear-gradient(180deg, #57544e 0, #2c2b28 30%, #141412 52%, #3a3834 78%, #151513 100%); }
.office[data-hw="black"] .holder::before, .office[data-hw="black"] .holder::after { background: radial-gradient(circle at 35% 30%, #8a8780, #2a2926 60%, #0d0d0c); }
.office[data-hw="black"] .pull { background: linear-gradient(180deg, #8d8a82 0, #4a4843 17%, #24231f 40%, #0e0e0d 52%, #2f2e2a 63%, #66635c 85%, #2b2a27 100%); }
.office[data-hw="black"] .pull::after { background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.05) 60%, rgba(255,255,255,.2)); }

/* board: what the desk is made of. A pseudo-element lies over the oak; content sits above it */
.desk::before, .desk::after { content: ""; position: absolute; pointer-events: none; display: none; }
.desk-in { z-index: 1; }
/* leather-topped writing desk: a hide inlaid in the oak, gilt-tooled border */
.office[data-board="leather"], .office[data-board="oxblood"] { --hide: #2e4535; }
.office[data-board="oxblood"] { --hide: #5a1e28; }
.office[data-board="leather"] .desk::before, .office[data-board="oxblood"] .desk::before { display: block; inset: 11px; border-radius: 2px;
  background: radial-gradient(110% 80% at 12% -5%, rgba(255,236,200,.18), rgba(255,236,200,0) 55%), radial-gradient(150% 120% at 55% 35%, rgba(0,0,0,0) 45%, rgba(0,0,0,.38)), var(--cab-leather) 0 0 / 300px, var(--hide);
  background-blend-mode: normal, normal, multiply; box-shadow: inset 0 2px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,236,205,.22); }
.office[data-board="leather"] .desk::after, .office[data-board="oxblood"] .desk::after { display: block; inset: 19px; border: 1px solid rgba(222,190,112,.55); outline: .5px solid rgba(222,190,112,.3); outline-offset: 3px;
  -webkit-mask: var(--cab-foil) 0 0 / 200px; mask: var(--cab-foil) 0 0 / 200px; }
/* blotter: a pad of green blotting paper with leather corners, on the oak */
.office[data-board="blotter"] .desk::before { display: block; inset: 16px 20px; border-radius: 1px;
  background: radial-gradient(110% 80% at 12% -5%, rgba(255,240,210,.22), rgba(255,240,210,0) 55%), radial-gradient(60% 40% at 72% 64%, rgba(30,40,60,.07), rgba(30,40,60,0) 70%), var(--cab-paper) 0 0 / 220px, #9fae93;
  box-shadow: 0 1px 1px rgba(0,0,0,.25), 2px 6px 12px -6px rgba(30,15,0,.6); }
.office[data-board="blotter"] .desk::after { display: block; inset: 16px 20px;
  background: linear-gradient(135deg, #5e2a22 0 38px, transparent 38px) 0 0 / 54px 54px no-repeat, linear-gradient(225deg, #5e2a22 0 38px, transparent 38px) 100% 0 / 54px 54px no-repeat,
    linear-gradient(45deg, #5e2a22 0 38px, transparent 38px) 0 100% / 54px 54px no-repeat, linear-gradient(315deg, #5e2a22 0 38px, transparent 38px) 100% 100% / 54px 54px no-repeat;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,.35)); }
/* library table: green baize inset, brass-edged */
.office[data-board="baize"] .desk::before { display: block; inset: 12px; border-radius: 2px;
  background: radial-gradient(110% 80% at 12% -5%, rgba(255,236,200,.2), rgba(255,236,200,0) 55%), radial-gradient(150% 120% at 55% 35%, rgba(0,0,0,0) 45%, rgba(0,0,0,.32)), var(--cab-cloth) 0 0 / 180px, #2f5440;
  background-blend-mode: normal, normal, multiply; box-shadow: inset 0 0 0 1.5px rgba(205,170,95,.7), inset 0 2px 6px rgba(0,0,0,.5); }
/* 1950s office desk: battleship linoleum with an aluminium edge band */
.office[data-board="lino"] .desk { border-radius: 7px;
  background: radial-gradient(110% 80% at 10% -8%, rgba(255,240,215,.22), rgba(255,240,215,0) 55%), radial-gradient(150% 120% at 55% 35%, rgba(0,0,0,0) 45%, rgba(0,0,0,.28)), var(--cab-steel) 0 0 / 300px, #5d6b61;
  background-blend-mode: normal, normal, multiply;
  box-shadow: inset 0 0 0 4px #b9bdb9, inset 0 0 0 5px #6f726e, inset 0 1px 0 4px rgba(255,255,255,.4), 0 2px 0 #3e413e, 0 26px 36px -26px rgba(30,15,5,.85); }

/* empty desk: a gilt inscription (default), a small brass plaque, just the lamp, or nothing at all */
.desk-inscr, .desk-plaque { display: none; margin: 0; }
.office:not([data-empty]) .desk-inscr, .office[data-empty="gilt"] .desk-inscr { display: grid; justify-items: center; gap: 10px; text-align: center; }
.desk-inscr .l1 { font: 500 19px/1.2 var(--serif); letter-spacing: .34em; text-transform: uppercase; padding-left: .34em; }
.desk-inscr .l2 { font: italic 17px/1.2 var(--serif); letter-spacing: .04em; }
.desk-inscr .l1, .desk-inscr .l2 { color: #e9d49a; background: var(--foil, linear-gradient(#f1dc9c, #b8913f)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.45)); }
.desk-inscr i { display: block; width: 120px; height: 7px; background: radial-gradient(circle, #d9bf7a 0 2px, transparent 2.5px) 50% 50% / 7px 7px no-repeat, linear-gradient(#c8aa63, #c8aa63) 0 50% / 50px .75px no-repeat, linear-gradient(#c8aa63, #c8aa63) 100% 50% / 50px .75px no-repeat; opacity: .85; }
.office[data-empty="plaque"] .desk-plaque { display: block; position: absolute; left: 50%; bottom: 6px; translate: -50% 0; padding: 7px 26px 6px; border-radius: 2px;
  font: 600 11.5px/1 var(--serif); letter-spacing: .3em; text-transform: uppercase; color: #3a2a0e;
  background: radial-gradient(40% 80% at 80% 70%, rgba(60,40,5,.28), rgba(60,40,5,0) 70%), linear-gradient(180deg, #ecdca8 0, #c9ab62 30%, #a5853f 55%, #d2b875 80%, #8f7232 100%);
  text-shadow: 0 1px 0 rgba(255,240,200,.55); box-shadow: inset 0 0 0 .5px rgba(60,40,10,.7), 0 1px 0 rgba(255,245,220,.25), 1px 3px 4px rgba(0,0,0,.45); }
.office[data-empty="plaque"] .desk-plaque::before, .office[data-empty="plaque"] .desk-plaque::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: linear-gradient(45deg, transparent 45%, rgba(40,25,5,.7) 45% 55%, transparent 55%), radial-gradient(circle at 35% 30%, #f4e7bd, #9a7d40 60%, #5c4519); }
.office[data-empty="plaque"] .desk-plaque::before { left: 8px; } .office[data-empty="plaque"] .desk-plaque::after { right: 8px; }
.office[data-empty="lamp"] .desk-empty::before { content: ""; position: absolute; inset: -22px -26px -26px; pointer-events: none;
  background: radial-gradient(48% 52% at 40% 38%, rgba(255,226,170,.26), rgba(255,226,170,.08) 55%, rgba(255,226,170,0) 75%); mix-blend-mode: screen; }

.pg-paper.has-cover > .pg-head, .pg-paper.has-cover > .pg-title, .pg-paper.has-cover > .pg-text { display: none; }

/* ---------- more boards: everyday surfaces rather than a study (round 4) ---------- */
.office { --cab-cork: url("../cabinet/tex/cork.webp"); }
/* birch plywood: pale, the plies showing on the edge */
.office[data-board="ply"] .desk { border-radius: 2px;
  background: radial-gradient(110% 80% at 10% -8%, rgba(255,250,235,.35), rgba(255,250,235,0) 55%), radial-gradient(150% 120% at 55% 35%, rgba(60,40,10,0) 50%, rgba(60,40,10,.18)),
    var(--cab-oak) 0 0 / 700px 220px, #e3cfa6; background-blend-mode: normal, normal, soft-light;
  box-shadow: inset 0 0 0 2px #c9ae7f, inset 0 0 0 3px #8c6a3e, inset 0 0 0 5px #d8bf90, inset 0 0 0 6px #8c6a3e, 0 2px 0 #b89a6a, 0 26px 36px -26px rgba(30,15,5,.7); }
/* a scuffed pine table: warm, knotty, a few dents and pen marks */
.office[data-board="pine"] .desk {
  background: radial-gradient(110% 80% at 10% -8%, rgba(255,240,210,.3), rgba(255,240,210,0) 55%),
    radial-gradient(14px 9px at 23% 61%, rgba(90,45,10,.55), rgba(90,45,10,.2) 60%, rgba(90,45,10,0) 100%), radial-gradient(10px 7px at 78% 24%, rgba(90,45,10,.5), rgba(90,45,10,0) 100%),
    linear-gradient(97deg, rgba(40,40,80,0) 62%, rgba(40,40,80,.22) 62.1%, rgba(40,40,80,0) 62.6%) 0 0 / 100% 40% no-repeat,
    var(--cab-oak) 30px 0 / 600px 300px, #d2a46b; background-blend-mode: normal, normal, normal, normal, soft-light;
  box-shadow: inset 0 1px 0 rgba(255,240,210,.4), inset 0 -2px 0 rgba(0,0,0,.18), 0 2px 0 #8d6436, 0 26px 36px -26px rgba(30,15,5,.75); }
/* speckled formica, the kind on every grad-lounge table, with a chrome edge */
.office[data-board="formica"] .desk { border-radius: 6px;
  background: radial-gradient(110% 80% at 10% -8%, rgba(255,255,255,.3), rgba(255,255,255,0) 55%),
    radial-gradient(circle, rgba(60,55,45,.5) 0 .8px, transparent 1.2px) 0 0 / 13px 11px, radial-gradient(circle, rgba(150,120,80,.45) 0 1px, transparent 1.5px) 5px 7px / 17px 19px,
    radial-gradient(circle, rgba(255,255,255,.6) 0 .8px, transparent 1.2px) 9px 3px / 11px 15px, var(--cab-steel) 0 0 / 300px, #d9d2c0;
  background-blend-mode: normal, normal, normal, normal, multiply;
  box-shadow: inset 0 0 0 3px #c9ccca, inset 0 0 0 4px #8d908d, inset 0 1px 0 3px rgba(255,255,255,.6), 0 2px 0 #7e817e, 0 26px 36px -26px rgba(30,15,5,.6); }
/* a self-healing cutting mat: green, gridded, with the 45 degree guides and a few knife scores */
.office[data-board="mat"] .desk { border-radius: 8px;
  background: radial-gradient(110% 80% at 10% -8%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%),
    linear-gradient(28deg, rgba(255,255,255,0) 49.9%, rgba(210,230,215,.18) 50%, rgba(255,255,255,0) 50.2%) 0 0 / 100% 100%,
    linear-gradient(rgba(220,235,225,.55) 0 1px, transparent 1px) 0 0 / 100px 100px, linear-gradient(90deg, rgba(220,235,225,.55) 0 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(rgba(220,235,225,.18) 0 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(220,235,225,.18) 0 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(45deg, rgba(255,255,255,0) 49.8%, rgba(220,235,225,.25) 50%, rgba(255,255,255,0) 50.2%) 0 0 / 300px 300px, #2c5a48;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.12), 0 2px 0 #1c3b2f, 0 22px 30px -24px rgba(10,20,15,.8); }
/* kraft paper rolled over the table and taped down at the corners */
.office[data-board="kraft"] .desk { border-radius: 1px;
  background: radial-gradient(110% 80% at 10% -8%, rgba(255,245,225,.28), rgba(255,245,225,0) 55%),
    linear-gradient(104deg, rgba(255,240,215,0) 36%, rgba(255,240,215,.14) 36.4%, rgba(60,35,10,.1) 37%, rgba(255,240,215,0) 38%),
    linear-gradient(8deg, rgba(255,240,215,0) 70%, rgba(60,35,10,.08) 70.4%, rgba(255,240,215,.1) 71%, rgba(255,240,215,0) 72%),
    var(--cab-manila) 0 0 / 300px, #b48c5c; background-blend-mode: normal, normal, normal, multiply;
  box-shadow: inset 0 0 30px rgba(60,35,10,.25), 0 1px 0 rgba(0,0,0,.2), 0 22px 30px -24px rgba(30,15,5,.7); }
.office[data-board="kraft"] .desk::after { display: block; inset: -6px;
  background: linear-gradient(135deg, transparent 0 18px, rgba(236,226,196,.92) 18px 44px, transparent 44px) 0 0 / 70px 70px no-repeat,
    linear-gradient(225deg, transparent 0 18px, rgba(236,226,196,.92) 18px 44px, transparent 44px) 100% 0 / 70px 70px no-repeat,
    linear-gradient(45deg, transparent 0 18px, rgba(236,226,196,.92) 18px 44px, transparent 44px) 0 100% / 70px 70px no-repeat,
    linear-gradient(315deg, transparent 0 18px, rgba(236,226,196,.92) 18px 44px, transparent 44px) 100% 100% / 70px 70px no-repeat; }
/* a cork desk mat */
.office[data-board="cork"] .desk { border-radius: 4px;
  background: radial-gradient(110% 80% at 10% -8%, rgba(255,240,210,.22), rgba(255,240,210,0) 55%), radial-gradient(150% 120% at 55% 35%, rgba(30,15,0,0) 50%, rgba(30,15,0,.3)), var(--cab-cork) 0 0 / 200px, #a87a4a;
  box-shadow: inset 0 0 0 1px rgba(60,35,10,.4), inset 0 2px 4px rgba(255,240,210,.15), 0 2px 0 #6e4a28, 0 24px 32px -24px rgba(30,15,5,.75); }

/* ---------- boards of four: arrows to the next and previous board ---------- */
.desk-scroll { position: relative; }
.pg-nav { position: absolute; z-index: 25; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  color: #f7f3ea; background: rgba(20,12,4,.18); border: 1px solid rgba(247,243,234,.4); -webkit-tap-highlight-color: transparent;
  transition: background .2s, border-color .2s, transform .25s cubic-bezier(.3,.7,.25,1.3); }
.pg-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pg-nav.next { right: -18px; } .pg-nav.prev { left: -18px; }
.pg-nav:hover { background: rgba(20,12,4,.34); border-color: rgba(247,243,234,.75); }
.pg-nav.next:hover { transform: translateX(3px); } .pg-nav.prev:hover { transform: translateX(-3px); }
.pg-nav:focus-visible { outline: none; box-shadow: var(--ring); }
.pg-nav[hidden] { display: none; }
.office[data-board="ply"] .pg-nav, .office[data-board="formica"] .pg-nav, .office[data-board="pine"] .pg-nav { color: #2a2218; background: rgba(255,250,240,.35); border-color: rgba(42,34,24,.45); }
.pg-dots { position: absolute; z-index: 25; left: 50%; bottom: -14px; translate: -50% 0; display: flex; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pg-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(247,243,234,.35); box-shadow: 0 0 0 .5px rgba(0,0,0,.25); }
.pg-dots i.on { background: rgba(247,243,234,.9); }
.office[data-board="ply"] .pg-dots i, .office[data-board="formica"] .pg-dots i, .office[data-board="pine"] .pg-dots i { background: rgba(42,34,24,.3); } 
.office[data-board="ply"] .pg-dots i.on, .office[data-board="formica"] .pg-dots i.on, .office[data-board="pine"] .pg-dots i.on { background: rgba(42,34,24,.8); }
@media (max-width: 860px) { .pg-nav.next { right: -6px; } .pg-nav.prev { left: -6px; } .pg-dots { bottom: -4px; } }
@media (prefers-reduced-motion: reduce) { .pg-nav { transition: none; } .pg-nav:hover { transform: none; } }
/* headless desk (the room): just a way back, top right, over the board */
.desk-head.solo { position: absolute; z-index: 28; top: 0; right: 0; margin: 0; }
.desk-head.solo + .desk-scroll { margin-top: 0; }

/* ---------- fit the writing screen in one window (v3 snaps each section to the viewport) ---------- */
@media (min-width: 861px) {
  .desk { height: clamp(470px, calc(100svh - 270px), 620px); }
}
@media (min-width: 861px) and (max-height: 880px) { .cabinet { zoom: .9; } }
@media (min-width: 861px) and (max-height: 800px) { .cabinet { zoom: .8; } }
@media (min-width: 861px) and (max-height: 720px) { .cabinet { zoom: .72; } }
/* phone: while a drawer is open the cabinet steps aside and the desk takes its place */
@media (max-width: 860px) {
  .office.cab-away .cabinet { display: none; }
  .office { scroll-margin-top: 84px; }
}

/* ---------- the reproducibility packet: a thick, clipped stack with section tabs ---------- */
.page.packet .pg::before, .page.packet .pg::after { content: ""; position: absolute; inset: 0; background: var(--cab-paper) 0 0 / 160px, #eee7d8; box-shadow: 0 0 0 .5px rgba(70,50,25,.28), 1px 2px 3px rgba(30,15,0,.3); }
.page.packet .pg::before { rotate: -2.4deg; translate: -4px 5px; } .page.packet .pg::after { rotate: 1.6deg; translate: 4px 3px; background-color: #f3eee2; }
.pk-sheets { position: absolute; inset: 0; pointer-events: none; }
/* the stack's edge: a few more sheets showing along the bottom and side */
.pg-paper:has(.pk-cover) { box-shadow: 0 0 0 .5px rgba(70,50,25,.3), 0 1px 0 #e9e2d2, 0 2px 0 #f4efe4, 0 3px 0 #e6dfce, 0 4px 0 #f1ebdf, 0 5px 0 #e3dbc9, 1px 7px 10px -3px rgba(30,15,0,.55); overflow: visible; }
.pk-tabs { position: absolute; right: -7%; top: 16%; display: grid; gap: 4px; z-index: -1; }
.pk-tabs i { display: block; padding: 2px 6px 2px 9px; border-radius: 0 3px 3px 0; font: 700 7.5px/1.2 var(--typed); letter-spacing: .06em; text-transform: uppercase; color: #2a2620; font-style: normal;
  background: hsl(calc(30 + var(--k) * 70) 38% 72%); box-shadow: 1px 1px 1px rgba(30,15,0,.25); translate: calc(var(--k) * 2px) 0; }
.pk-cover { position: relative; display: flex; flex-direction: column; gap: 5%; height: 100%; }
.pk-kind { padding-bottom: 4%; border-bottom: 1.5px solid #2a2620; font: 700 8.5px/1.2 var(--typed); letter-spacing: .12em; text-transform: uppercase; color: #2a2620; }
.pk-title { font: 600 12.5px/1.2 var(--serif); color: #1e1b18; }
.pk-list { display: grid; gap: 3px; margin-top: 4%; font: 9px/1.25 var(--typed); color: #3a332a; }
.pk-where { margin-top: auto; font: italic 9.5px/1.2 var(--serif); color: #5c564d; }
/* a black binder clip across the top edge, its two steel handles folded back */
.pk-clip { position: absolute; left: 50%; top: -5%; width: 34%; height: 9%; translate: -50% 0; border-radius: 2px 2px 3px 3px; z-index: 3;
  background: linear-gradient(180deg, #3a3a3a, #121212 60%, #2a2a2a); box-shadow: 0 2px 2px rgba(0,0,0,.4); }
.pk-clip::before, .pk-clip::after { content: ""; position: absolute; top: -70%; width: 34%; height: 90%; border: 1.5px solid #b9b9b4; border-bottom: 0; border-radius: 40% 40% 0 0; }
.pk-clip::before { left: 12%; rotate: -12deg; } .pk-clip::after { right: 12%; rotate: 12deg; }

/* ---------- phones (no hover): every page carries its title underneath ---------- */
.pg-cap { display: none; }
@media (max-width: 860px) {
  .pg-cap { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; position: absolute; left: -2%; right: -2%; top: calc(100% + 8px);
    font: 500 13px/1.25 var(--serif); color: #f7f3ea; text-shadow: 0 1px 2px rgba(20,10,0,.7); text-align: center; }
  .page { rotate: calc(var(--r0) * .5); }
}