/* nordiksounds archive. tokens and rules from DESIGN.md */
:root {
  --desk: #111111;
  --paper: #d4d3cf;
  --ink: #1d1d1b;
  --ink-title: #141413;
  --ink-muted: #55544f;
  --rule: rgba(35, 35, 32, .6);
  --desk-text: #8d8b85;
  --desk-text-strong: #d6d4cc;
  --desk-fine: #807e78;
  --exhibit: #e6e3da;
  --signal: #c23a22;
  --signal-desk: #e2563c; /* the earlier orange-red: kept for reference, not used on the site */
  --stamp: #a01a1c;       /* classic inky stamp red, on paper */
  --stamp-desk: #c9272a;  /* the same ink where it sits on the dark desk, lifted so it stays readable */
  --pen: #23367a;
  --fountain: #15130f; /* old black ink, a touch warm */

  --type: "Courier Prime", "Courier New", ui-monospace, monospace;
  --caps: var(--type); /* titles share the typewriter face with the body */

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-tex: url(assets/paper-tile.jpg);
  --paper-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0v32M0 32h32' fill='none' stroke='%23232320' stroke-opacity='.075' stroke-width='1'/%3E%3C/svg%3E"); /* faint ruled grid: barely visible by design */
  --gutter: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --bar-h: calc(78px + var(--safe-top));
  --mech: cubic-bezier(.6, .04, .28, 1); /* slow, mechanical, no overshoot */
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--bar-h) + 16px); scrollbar-color: #3a3936 var(--desk); }
body {
  margin: 0;
  background: var(--desk);
  color: var(--desk-text);
  font: 400 0.9062rem/1.62 var(--type);
  text-transform: lowercase;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, dl, dd, figure { margin: 0; }
p, dd, li { text-wrap: pretty; } /* no single word stranded on a last line */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; }
::selection { background: var(--stamp-desk); color: var(--desk); }
:focus-visible { outline: 1.5px dashed var(--stamp-desk); outline-offset: 5px; }
.sheet :focus-visible { outline-color: var(--stamp); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap { white-space: nowrap; }
.keep-case { text-transform: none; }

/* ---------- top bar: fixed, desk shows through (same value as the page) ---------- */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 38px;
  padding: var(--safe-top) var(--gutter) 0;
  background: var(--desk);
  box-shadow: 0 -200px 0 var(--desk); /* iphone safari shows the page around the viewport, behind its clock and toolbar: fill that too. a shadow adds nothing to scroll to */
  font-size: 0.7812rem; letter-spacing: .02em;
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.eye {
  display: inline-block; width: 38px; aspect-ratio: 494 / 215;
  background: currentColor;
  -webkit-mask: url(brand/logo/nordiksounds-mark.svg) center / contain no-repeat;
          mask: url(brand/logo/nordiksounds-mark.svg) center / contain no-repeat;
}
.brand .eye { color: var(--desk-text-strong); }
/* the brand lettering itself, with the logo's own spacing */
.wordmark {
  display: inline-block; height: 13px; aspect-ratio: 504 / 62;
  background: var(--desk-text-strong);
  -webkit-mask: url(brand/logo/nordiksounds-wordmark.svg) center / contain no-repeat;
          mask: url(brand/logo/nordiksounds-wordmark.svg) center / contain no-repeat;
}
.tagline { margin-left: 8px; color: var(--desk-fine); }
.topbar nav { display: flex; gap: 38px; }
.topbar nav a, .cart { transition: color .2s; }
.topbar nav a:hover, .cart:hover { color: var(--desk-text-strong); }
.topbar nav a[aria-current] { color: var(--desk-text-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.cart { margin-left: 18px; }
.cart.bump { color: var(--desk-text-strong); }

main { padding-top: calc(96px + var(--safe-top)); }

/* ---------- paper ---------- */
.sheet {
  position: relative;
  max-width: 1344px; margin: 0 auto;
  background: var(--paper-grid), var(--paper-tex), var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 80px rgba(70, 66, 58, .14), inset 0 0 12px rgba(70, 66, 58, .12), 0 26px 48px -12px rgba(0, 0, 0, .7);
}
.type { filter: url(#ink); }
.sheet .type ::selection, .sheet ::selection { background: var(--ink); color: var(--paper); }

/* titles: heavy typewriter caps. courier prime bold, thickened, letters set tight;
   archive.js gives each letter one of three ink states (tw1 strike, tw2 overinked, tw3 dry ribbon) */
.caps {
  font: 700 2.75rem/1.05 var(--caps);
  color: var(--ink-title);
  letter-spacing: -.05em;
  -webkit-text-stroke: .035em currentColor; paint-order: stroke fill;
  text-transform: uppercase;
  white-space: nowrap; width: fit-content;
}
.caps > span[aria-hidden] > span { display: inline-block; white-space: pre; } /* keeps word spaces inside two-word titles */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- stamps ---------- */
.stamp {
  text-transform: uppercase;
  display: inline-block;
  border: 3px solid currentColor; border-radius: 3px;
  color: var(--stamp);
  font: 700 1.75rem/1 var(--type);
  padding: 7px 12px 8px;
  filter: url(#stamp);
}
.stamp-sm { white-space: nowrap; font-size: 0.875rem; border-width: 2px; padding: 5px 8px; }

/* ---------- 1. intro: the closed file ---------- */
.intro {
  position: fixed; inset: 0; z-index: 40;
  display: none; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: calc(var(--bar-h) + 30px) 16px 24px;
  background-color: var(--desk);
}
.has-intro .intro { display: flex; }
.has-intro { overflow: hidden; }
.has-intro main, .has-intro .footer { opacity: 0; }
html { scrollbar-gutter: stable; }
/* lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.folder {
  position: relative; flex: 0 1 auto;
  width: min(506px, calc(100vw - 48px), calc((100svh - 236px) * 902 / 1186)); aspect-ratio: 902 / 1186;
  perspective: 2200px; cursor: pointer;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5));
  transition: transform .7s var(--mech), filter .7s var(--mech);
}
.folder::before { /* a faint aura off the desk behind the file */
  content: ""; position: absolute; inset: -22% -38%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(226, 222, 208, .2), rgba(226, 222, 208, .08) 58%, transparent);
}
.arrive .folder::before { animation: arrive-up .4s ease-out both; }
.folder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.folder-cover {
  transform-origin: 6% 50%;
  backface-visibility: hidden;
  transition: transform .7s var(--mech);
}
/* hover: the file rises off the desk and the cover loosens at its edge */
@media (hover: hover) {
html:not(.arrive) .folder:hover, html:not(.arrive) .intro:has(.stamp-open:hover) .folder {
  transform: translateY(-12px);
  filter: drop-shadow(0 34px 34px rgba(0, 0, 0, .7));
}
html:not(.arrive) .folder:hover .folder-cover, html:not(.arrive) .intro:has(.stamp-open:hover) .folder-cover { transform: rotateY(-30deg); }
}
.desk-hint { margin: 30px 0 10px; color: var(--desk-text); font-size: 0.7812rem; letter-spacing: .04em; }
.stamp-open { color: var(--stamp-desk); font-size: 1.625rem; transition: transform .12s, opacity .3s; }
.stamp-open:active { transform: translateY(1px) scale(.98); }
.desk-hint { transition: opacity .3s; }
.folder-inside { opacity: 0; transition: opacity .3s; }
.folder-inside.loaded { opacity: 1; }
/* arriving from the drawer: the folder is already in place, only its caption and stamp fade up */
.arrive .intro .desk-hint, .arrive .intro .stamp-open { animation: arrive-up .4s ease-out both; }
@keyframes arrive-up { from { opacity: 0; } }

/* opening: one continuous move. the cover swings open, the camera falls into
   the file, and the page rises out of it while the desk is still fading */
.intro.lifting { pointer-events: none; background-color: transparent; transition: background-color .9s ease-out .45s; }
.intro.lifting .folder-cover { transform: rotateY(-112deg); transition: transform 1.3s var(--mech); }
.intro.lifting .folder {
  transform: translateY(-12px) scale(1.18); opacity: 0;
  transition: transform 1.35s var(--mech) .3s, opacity .9s ease-in .5s;
}
.intro.lifting .desk-hint, .intro.lifting .stamp-open { opacity: 0; }
.opening main, .opening .footer { animation: surface 1.2s var(--mech) .45s both; }
@keyframes surface { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }

/* ---------- 2. data sheet ---------- */
.datasheet { display: grid; grid-template-columns: 610px 1fr; min-height: 720px; }
.ds-info {
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px 44px; border-right: 1.5px solid var(--rule);
}
.ds-info .caps { margin-bottom: 40px; }
.ds-desc { max-width: 60ch; margin-bottom: 30px; }
.ds-desc .redact { height: 1em; vertical-align: -.12em; background: var(--ink-title); }

.specs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--rule); font-size: 0.7812rem; }
.specs > div {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 38px; padding: 4px 16px;
  border-bottom: 1.5px solid var(--rule);
}
.specs > div:nth-child(odd):not(.full) { padding-left: 0; border-right: 1.5px solid var(--rule); }
.specs > div:nth-child(even) { padding-right: 0; }
.specs > .full { grid-column: 1 / -1; padding: 0; }
.specs > .full:last-child { min-height: 52px; } /* room for the clearance stamp */
.specs dt { color: var(--ink-muted); }
.specs dd { text-align: right; font-variant-numeric: tabular-nums; }

.buy { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 36px; }
.label { font-size: 0.7812rem; color: var(--ink-muted); }
.price { font-weight: 700; font-size: 2.375rem; line-height: 1.15; letter-spacing: .02em; color: var(--ink-title); }

.stamp-acquire { padding: 8px 12px 9px; transition: transform .12s ease-out, color .25s; }
.stamp-acquire:active, .stamp-acquire.pressing { transform: translateY(1.5px) scale(.97); }
.stamp-acquire.acquired { color: var(--ink-title); }

.ds-exhibit { display: grid; place-items: center; padding: 64px 48px; }
.print {
  position: relative; width: min(540px, 100%);
  --k: 1; container-type: inline-size;
  padding: calc(12px * var(--k)) calc(12px * var(--k)) 0;
  background: #e9e6dc;
  box-shadow: 0 16px 28px -6px rgba(30, 28, 24, .45), 0 2px 4px rgba(30, 28, 24, .25);
  cursor: zoom-in;
  transition: transform .5s var(--mech), box-shadow .5s var(--mech);
}
/* hover: the print lifts off the sheet, its shadow drops further away */
@media (hover: hover) {
  .print[data-zoom]:hover { transform: translateY(-8px); box-shadow: 0 30px 40px -10px rgba(30, 28, 24, .5), 0 4px 8px rgba(30, 28, 24, .2); }
}
.print.lifted { visibility: hidden; }
.print:not([data-zoom]) { cursor: auto; }
.print:not(:has(figcaption)) { padding-bottom: 40px; } /* uncaptioned print: the thick bottom border of the stock */
.photo.free { aspect-ratio: auto; }

/* lightbox: the same print, floated to the middle of the screen over a blurred desk */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 24px 16px; border: 0; background: none;
  display: none; flex-direction: column; align-items: center; gap: 18px;
  overflow-y: auto; overscroll-behavior: contain;
}
.lightbox > :first-child { margin-top: auto !important; }
.lightbox > :last-child { margin-bottom: auto; }
.lightbox[open] { display: flex; }
.lightbox::backdrop {
  background: rgba(8, 8, 8, .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color .6s ease-out, backdrop-filter .6s ease-out, -webkit-backdrop-filter .6s ease-out;
}
@starting-style { .lightbox[open]::backdrop { background: rgba(8, 8, 8, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
.lightbox.closing::backdrop { background: rgba(8, 8, 8, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
.lightbox .print {
  width: min(720px, 100%, calc((100svh - 150px) / 1.12));
  margin: 0; cursor: zoom-out;
  box-shadow: 0 40px 70px -16px rgba(0, 0, 0, .75), 0 4px 10px rgba(0, 0, 0, .3);
}
.lightbox-close { color: var(--desk-text-strong); font-size: 0.8125rem; letter-spacing: .04em; padding: 8px; transition: opacity .3s .35s; }
@starting-style { .lightbox[open] .lightbox-close { opacity: 0; } }
.lightbox.closing .lightbox-close { opacity: 0; transition-delay: 0s; }
html:has(dialog[open]) { overflow: hidden; }
.lightbox:focus-visible { outline: none; }
.photo { display: block; width: 100%; aspect-ratio: 516 / 484; object-fit: cover; background: #2a2a29; }
.print figcaption { padding: calc(13px * var(--k)) calc(6px * var(--k)) calc(12px * var(--k)); font-size: calc(.9063rem * var(--k)); color: var(--ink); }
.clip {
  position: absolute; top: -3.7cqi; left: 12.6cqi; width: 5.2cqi; height: auto; z-index: 1; /* in proportion to the print, so it sits the same at any size */
  transform: rotate(-7deg);
  fill: none; stroke: #8f8e8a; stroke-width: 2.2; stroke-linecap: round;
  filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .35));
}

/* ---------- 3. case file + leaked tape ---------- */
.casefile { padding: 64px var(--gutter) 100px; max-width: 1440px; margin-inline: auto; } /* holds the dossier and the tape together on wide screens */
.desk-label { font-size: 0.7812rem; letter-spacing: .04em; margin-bottom: 52px; }
.cf-grid {
  display: grid; grid-template-columns: minmax(0, 800px) minmax(0, 464px);
  justify-content: space-between; gap: 40px;
}
.cf-doc-wrap { margin-left: 24px; display: flex; flex-direction: column; align-items: center; }
.cf-paper {
  position: relative; width: 100%; container-type: inline-size; cursor: zoom-in;
  transition: transform .5s var(--mech);
}
.cf-paper::after { /* the sheet in the photo gets the data sheet's paper. brightness lifts the tile to white so multiply adds flecks and grid, not a darker tone */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--paper-grid), var(--paper-tex);
  filter: brightness(1.148); mix-blend-mode: multiply;
  clip-path: polygon(5.83% 3.37%, 26.67% 3.29%, 77.78% 1.48%, 82.78% .84%, 88.33% 2.53%, 91.11% 6.32%, 92.11% 99.3%, 6.78% 99.73%);
}
@media (hover: hover) { .cf-paper:hover { transform: translateY(-6px); } }
.cf-paper.lifted { visibility: hidden; }
.doc-open { margin: 22px 0 0; padding: 8px; color: var(--desk-text-strong); font-size: .9375rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.doc-open:hover { color: #fff; }

/* ---------- contents log ----------
   old sets with holes where the glass was. each screen sits behind its hole: static first, then a dark
   layer that sets how much of it shows, then the picture. text never has static on top of it */
.contents-log { padding: 0 var(--gutter) 100px; }
.tvs { display: flex; align-items: flex-end; justify-content: center; width: min(1020px, 100%); margin-inline: auto; }
.tv { position: relative; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .55)); }
.tv-left { flex: 343 1 0; margin-right: -.5%; z-index: 1; }
.tv-stack { flex: 337 1 0; }
.tv-body { position: relative; display: block; width: 100%; height: auto; pointer-events: none; }
.screen {
  position: absolute; overflow: hidden; container-type: inline-size;
  background: url(assets/static-strip.webp) 0 0 / 100% 1600%, #0b0b0d;
  animation: vcr-static 1.07s steps(1) infinite;
}
.screen::after { /* curved glass: scanlines and dark corners */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .14) 2px 3px);
  box-shadow: inset 0 0 14cqi rgba(0, 0, 0, .75);
}
@keyframes vcr-static {
  0.00% { background-position: 0 0.00%; }
  6.25% { background-position: 0 6.67%; }
  12.50% { background-position: 0 13.33%; }
  18.75% { background-position: 0 20.00%; }
  25.00% { background-position: 0 26.67%; }
  31.25% { background-position: 0 33.33%; }
  37.50% { background-position: 0 40.00%; }
  43.75% { background-position: 0 46.67%; }
  50.00% { background-position: 0 53.33%; }
  56.25% { background-position: 0 60.00%; }
  62.50% { background-position: 0 66.67%; }
  68.75% { background-position: 0 73.33%; }
  75.00% { background-position: 0 80.00%; }
  81.25% { background-position: 0 86.67%; }
  87.50% { background-position: 0 93.33%; }
  93.75% { background-position: 0 100.00%; }
}
.screen-eye { inset: 6.31% 51.85% 75.08% 19.51%; animation-delay: -.3s; }
.screen-staff { inset: 32.19% 39.39% 45.48% 6.97%; animation-delay: -.7s; }
.screen-static { inset: 63.96% 43.62% 7.57% 4.60%; filter: brightness(1.6) contrast(1.1); }
.flash { /* the panel runs downhill on this set, so the picture does too. oversize so no corner shows */
  position: absolute; inset: -9%; width: 118%; max-width: none; height: 118%; object-fit: cover; transform: skewY(6deg);
  opacity: 0; filter: grayscale(1) contrast(1.25) brightness(.42) blur(.6px); animation: vcr-flash 15s steps(1) infinite;
}
.flash:nth-child(1) { object-fit: contain; padding: 22%; animation-delay: 0s; }
.flash:nth-child(2) { animation-delay: 3.75s; }
.flash:nth-child(3) { animation-delay: 7.5s; }
.flash:nth-child(4) { animation-delay: 11.25s; }
@keyframes vcr-flash { /* it barely holds: flickers in, breaks up and falls back to static */
  0% { opacity: .4; transform: skewY(6deg) translateX(5%); } .6% { opacity: 0; } 1.2% { opacity: .7; transform: skewY(6deg); }
  4% { opacity: .3; transform: skewY(6deg) translateX(-4%); } 4.5% { opacity: .7; transform: skewY(6deg); }
  7% { opacity: 0; } 8.2% { opacity: .55; transform: skewY(6deg) translateX(3%); } 8.7% { opacity: .7; transform: skewY(6deg); }
  12% { opacity: .25; } 12.4% { opacity: 0; } 13.2% { opacity: .6; } 16% { opacity: .3; transform: skewY(6deg) translateX(-6%); } 16.5% { opacity: 0; transform: skewY(6deg); }
}
.screen-static::before { /* static over the footage too */
  content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; opacity: .75;
  background: url(assets/static-strip.webp) 0 0 / 100% 1600%;
  animation: vcr-static 1.07s steps(1) infinite -.5s;
}
.screen-log { inset: 9.73% 9.55% 28.24% 12.09%; animation-delay: -.5s; }
.screen-eye .eye { position: absolute; left: 50%; top: 50%; width: 70%; translate: -50% -50%; transform: skewY(-13deg); color: #e8e8e4; filter: drop-shadow(0 0 4cqi rgba(255, 255, 255, .45)); }
.screen-staff img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: .8; animation: vcr-drop 13s steps(1) infinite; }
.screen-staff::before { /* the same static, over the picture too */
  content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; opacity: .7;
  background: url(assets/static-strip.webp) 0 0 / 100% 1600%;
  animation: vcr-static 1.07s steps(1) infinite -.2s;
}
.vcr-bar { /* a tracking band that rolls up the picture */
  position: absolute; left: 0; right: 0; top: 0; height: 16%; z-index: 1;
  background: linear-gradient(transparent, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .34) 55%, transparent);
  animation: vcr-roll 7s linear infinite;
}
@keyframes vcr-roll { from { transform: translateY(640%); } to { transform: translateY(-110%); } }
/* the signal drops out now and then: a couple of bad frames, then nothing but static */
@keyframes vcr-drop {
  0% { opacity: .8; transform: none; }
  18% { opacity: .5; transform: translateX(3%) skewX(2deg); } 18.6% { opacity: .8; transform: none; }
  19.4% { opacity: .35; transform: translateX(-4%); } 20% { opacity: .8; transform: none; }
  41% { opacity: .4; transform: translateX(5%) skewX(-3deg); } 41.8% { opacity: 0; transform: none; }
  52% { opacity: .3; transform: translateX(-3%); } 52.8% { opacity: .8; transform: none; }
  73% { opacity: 0; } 75% { opacity: .55; transform: translateX(2%); } 75.6% { opacity: 0; transform: none; } 78% { opacity: .8; }
}
.screen-log::before { content: ""; position: absolute; inset: 0; background: rgba(5, 6, 9, .74); }
.screen-log::after { box-shadow: inset 0 0 6cqi rgba(0, 0, 0, .6); } /* the corners stay legible */
.screen-log { display: flex; flex-direction: column; padding: 4.6% 5% 4.6% 5.4%; color: #f0f0ec; text-transform: uppercase; font-family: var(--type); text-shadow: 0 0 .35em rgba(255, 255, 255, .55); }
.crt-title { position: relative; margin: 0 0 2cqi; font: 700 max(15px, 8.4cqi)/1.1 var(--type); letter-spacing: .05em; }
.crt-list { position: relative; margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.crt-title, .crt-list { transform: skewY(-1.7deg); transform-origin: 50% 50%; } /* the set is turned a little: its lines run uphill to the right */
.crt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.crt-row dt { font-weight: 700; font-size: max(13px, 6.4cqi); line-height: 1.2; letter-spacing: .03em; white-space: nowrap; }
.crt-row dd { margin: 0; }
.crt-count { font-size: max(12px, 5.5cqi); line-height: 1.2; white-space: nowrap; }
@media (max-width: 860px) {
  .contents-log { padding-inline: 0; }
  .tvs { flex-direction: column-reverse; align-items: center; gap: 28px; }
  .tv-left, .tv-stack { flex: none; }
  .tv-left { width: 100%; margin: 0; }
  .tv-stack { width: 72%; }
  .screen-log { padding: 3.6% 3.6% 3.6% 4%; }
}

/* ---------- incident report ----------
   typed straight onto the paper of the case-file photo. one size (.doc font-size) drives
   everything, so on the sheet it scales with the photo and in the reader it is set in px */
.doc {
  position: absolute; inset: 10.2% 18.5% 4.6% 9.2%; /* the whole sheet: under the paperclip, edge to edge, down to the foot */
  display: flex; flex-direction: column;
  font-size: 2.38cqi; line-height: 1.5; color: var(--ink); /* measured: the largest size that still fits the sheet, photo included, at every width */
}
.doc-body { display: flow-root; }
.doc-body > p + p { margin-top: .9em; }
/* the clipped photo: the text runs round it. sized in em off .doc, like everything else on the sheet */
.doc .doc-print { z-index: 1; /* the typed lines have their own layers, and would take its taps */ float: right; width: 36%; margin: .4em 0 .7em 1.4em; padding: .5em .5em 0; rotate: 1.2deg; cursor: zoom-in; box-shadow: 0 .5em .9em -.2em rgba(30, 28, 24, .5), 0 1px 2px rgba(30, 28, 24, .25); }
.doc .doc-print figcaption { padding: .6em .2em .55em; font-size: .68em; line-height: 1.3; }
.doc-head { margin-bottom: 1.5em; letter-spacing: .14em; font-weight: 700; color: var(--ink-title); }
.doc-head h2 { font: inherit; font-size: 1.3em; margin: 0; }
.doc-head p { font-size: 1em; margin-top: .25em; }
.doc-mark { /* watermark: the eye, faint, in the middle of the page */
  position: absolute; left: 50%; top: 47%; width: 62%; translate: -50% -50%;
  color: var(--ink); opacity: .07; pointer-events: none;
}
.doc .addendum { font-size: 1.14em; margin-top: 1.1em; color: var(--ink-title); }
.doc .redact { width: 3.4ch; height: 1em; vertical-align: -.12em; background: var(--ink-title); }
.doc-foot { margin-top: auto; padding-top: .8em; display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5em; }
.doc-buy { display: flex; flex-direction: column; align-items: flex-end; gap: .7em; text-align: right; }
.doc-buy .label { font-size: .86em; }
.doc-price { font-weight: 700; font-size: 1.45em; line-height: 1.2; color: var(--ink-title); }
.doc .stamp-acquire { font-size: 1.2em; border-width: max(2px, .12em); padding: .25em .45em .3em; }
.doc .signoff { margin-top: 0; }
.doc .sig { font-size: 2.5em; margin-top: .15em !important; mix-blend-mode: multiply; line-height: 1; }

/* the reader: the same report on its own paper, set at reading size */
.lightbox .doc-reader {
  position: relative; width: min(680px, 100%); margin: 0;
  padding: 64px 64px 56px;
  background: var(--paper-grid), var(--paper-tex), var(--paper);
  box-shadow: inset 0 0 80px rgba(70, 66, 58, .3), 0 40px 70px -16px rgba(0, 0, 0, .75);
  cursor: auto;
}
.doc-reader .doc { position: static; font-size: 0.9375rem; min-height: 0; }
.doc-reader .doc-head { margin-bottom: 2.4em; } /* the reader letterhead sits beside the heading, not over the body */
.doc-reader .doc-foot { margin-top: 2.4em; }
.doc-reader .doc-mark { top: 50%; width: 58%; }
.doc-reader .doc-stamp { position: absolute; top: 48px; right: 56px; text-align: center; font-size: 0.6562rem; line-height: 1.4; color: var(--ink); }
.doc-reader .doc-stamp .eye { width: 66px; color: var(--ink-title); margin-bottom: 6px; }
.cf-sheet {
  width: 100%; /* the slight tilt is baked into the image: a live rotate would resample it soft */
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .6));
}
.tape { align-self: end; padding-bottom: 170px; text-align: center; }
.tape-hint { font-size: 0.7812rem; letter-spacing: .04em; margin-bottom: 18px; min-height: 2lh; }
.tape-hint .live, .tape-hint .busy { display: none; }
.tape.loading .tape-hint .idle, .tape.loading .tape-hint .live { display: none !important; }
.tape.loading .tape-hint .busy { display: inline; }
.rec { color: var(--stamp-desk); }
.cassette {
  display: block; width: 100%; position: relative;
  transition: transform .5s var(--mech), filter .5s var(--mech);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55));
}
@media (hover: hover) { .cassette:hover { transform: translateY(-2px); } }
/* reels cut from the cassette photo itself, turned by the tape transport in archive.js */
.reel { position: absolute; width: 9.75%; }
.reel-l { left: 24.37%; top: 38.5%; }
.reel-r { left: 66.02%; top: 38.72%; }
/* ascii-reveal draws in the typewriter face */
[data-decode] { --ascii-font: var(--type); --ascii-accent: var(--desk-text-strong); } /* red stays for stamps */
.tape.playing .cassette { transform: translateY(-6px); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(226, 86, 60, .22)); }
.tape.playing .idle { display: none; }
.tape.playing .live { display: inline; }
.tape.playing .rec { animation: rec 1.6s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .45; } }

.exhibit-b {
  margin: 42px 6px 0; padding: 22px 24px;
  border: 1.5px solid var(--exhibit);
  color: var(--exhibit); text-align: left; font-size: 0.8438rem;
}
.redact {
  display: inline-block; width: 4ch; height: 1.05em; vertical-align: -.15em;
  background: var(--exhibit);
}

/* ---------- 4. faq ---------- */
.faq {
  display: grid; grid-template-columns: 400px 1fr; margin-bottom: 0; /* runs down to the footer's rule; height is only its entries, so nothing is reserved */
  max-width: none; padding-inline: max(0px, calc((100% - 1344px) / 2)); /* paper edge to edge, contents at the sheet's width */
}
/* the texture scales gently with the box's height, so opening an entry makes the paper shift. the grid stays put */
.faq { background-size: auto, auto calc(1155px + (100% - 356px) * .45), auto; }
.faq-intro { padding: 36px 44px; border-right: 1.5px solid var(--rule); }
.faq-list { padding: 22px 48px 30px 44px; }
.faq-list details { border-bottom: 1.5px solid var(--rule); }
.faq-list summary {
  display: grid; grid-template-columns: 70px 1fr auto; align-items: baseline;
  padding: 14px 0; cursor: pointer; list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "[+]"; padding-left: 16px; }
.faq-list details[open] summary::after { content: "[–]"; }
.faq-list summary:hover .q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.qn { font-size: 0.7812rem; color: var(--ink-muted); }
.faq-list details p { padding: 0 60px 18px 70px; margin-top: -4px; font-size: 0.8438rem; max-width: 80ch; }


/* ---------- 5. footer ---------- */
.footer {
  margin: 0 48px; padding: 70px 0 110px;
  border-top: 1px solid #2c2c2a;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.footer img { width: 230px; margin-bottom: 44px; }
.footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 38px; font-size: 0.7812rem; letter-spacing: .02em; }
.footer nav a:hover { color: var(--desk-text-strong); }
.footer .footer-legal { margin-top: 18px; gap: 4px 26px; font-size: 0.75rem; color: var(--desk-fine); } /* fine print, a step quieter than the archive links */
.footer .footer-legal a:hover { color: var(--desk-text-strong); }
.footer p { margin-top: 20px; font-size: 0.75rem; color: var(--desk-fine); letter-spacing: .03em; }

/* ---------- cart: a paper slip pushed in from the right edge of the desk ---------- */
.drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(440px, 100vw); height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: none; color: var(--ink);
  transform: translateX(105%);
  transition: transform .6s var(--mech), overlay .6s allow-discrete, display .6s allow-discrete;
}
.drawer[open] { transform: none; }
@starting-style { .drawer[open] { transform: translateX(105%); } }
.drawer::backdrop {
  background: rgba(8, 8, 8, 0);
  transition: background-color .6s ease-out, overlay .6s allow-discrete, display .6s allow-discrete;
}
.drawer[open]::backdrop { background: rgba(8, 8, 8, .62); }
@starting-style { .drawer[open]::backdrop { background: rgba(8, 8, 8, 0); } }

.slip {
  min-height: 100%; display: flex; flex-direction: column;
  padding: 30px 32px 36px;
  background: var(--paper-grid), var(--paper-tex), var(--paper);
  box-shadow: inset 0 0 70px rgba(70, 66, 58, .14), -24px 0 40px -10px rgba(0, 0, 0, .6);
}
.slip-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 18px; border-bottom: 1.5px solid var(--rule); }
.slip-head .caps { font-size: 2rem; }
.close { font-size: 0.9375rem; color: var(--ink); padding: 4px; }
.close:hover, .remove:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.slip-meta { margin: 12px 0 24px; font-size: 0.875rem; color: var(--ink); }
.slip-body { display: flex; flex-direction: column; flex: 1; }
.items { list-style: none; margin: 0; padding: 0; }
.items li {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: start;
  padding: 16px 0; border-bottom: 1.5px solid var(--rule);
}
.items img { filter: drop-shadow(0 4px 5px rgba(30, 28, 24, .4)); margin-top: 3px; }
.item-title { font-weight: 700; font-size: 1.0625rem; color: var(--ink-title); }
.item-facts { font-size: 0.875rem; color: var(--ink); }
.item-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--rule); font-variant-numeric: tabular-nums; }
.qty button { width: 30px; height: 28px; font-size: 1.0625rem; line-height: 1; color: var(--ink-title); }
.qty button:hover:not(:disabled) { background: var(--ink-title); color: var(--paper); }
.qty button:disabled { color: var(--ink-muted); opacity: .5; cursor: default; }
.qty span { min-width: 2.2ch; text-align: center; font-weight: 700; font-size: 0.9375rem; color: var(--ink-title); }
.remove { font-size: 0.875rem; color: var(--ink); padding: 4px 0; }
.item-price { font-weight: 700; font-size: 1.0625rem; color: var(--ink-title); }
.totals { margin: 18px 0 28px; font-size: 0.9375rem; color: var(--ink); }
.totals p { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.total { font-weight: 700; font-size: 1.875rem; color: var(--ink-title); }
.stamp-checkout { align-self: stretch; text-align: center; font-size: 1.5rem; padding: 10px 12px; transition: transform .12s ease-out; }
.stamp-checkout.pressing, .stamp-checkout:active { transform: translateY(1.5px) scale(.98); }
.continue {
  align-self: stretch; margin-top: 12px; padding: 10px 12px;
  border: 1.5px solid var(--rule); color: var(--ink); font-size: 0.875rem; text-align: center;
  transition: border-color .2s, background-color .2s;
}
.continue:hover { border-color: var(--ink); }
.empty + .continue { margin-top: 24px; }
.note { margin-top: 14px; font-size: 0.875rem; color: var(--ink); min-height: 2lh; }
.empty { margin-top: 8px; color: var(--ink); }

/* ---------- manifest ---------- */
.manifest { max-width: 860px; margin-bottom: 70px; } /* one page of a letter: title at the head, the letter under it */
.letter-head { padding: 72px 72px 0; }
.manifest-body { padding: 48px 72px 80px; }
.letter { font-size: 1.0312rem; line-height: 1.65; } /* the letter reads a size up from the rest of the archive */
.manifest-body p + p { margin-top: 1.1em; }
/* specimens: underlined by hand in ballpoint, the way a reader marks the word that matters */
.pen-under { position: relative; white-space: nowrap; }
.pen-under::after {
  content: ""; position: absolute; left: -4%; right: -6%; bottom: -.34em; height: .5em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C40 5 80 9 120 6 S175 5 197 4' fill='none' stroke='%2323367a' stroke-width='2.1' stroke-linecap='round'/%3E%3Cpath d='M14 10 C60 8 120 10 182 7' fill='none' stroke='%2323367a' stroke-width='1.3' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
}
.letter a, .faq-list a { text-decoration: underline dotted 1px; text-underline-offset: 3px; }
.letter a:hover, .faq-list a:hover { text-decoration-style: solid; }

/* void: the same typewriter, struck hard: bold.
   it surfaces out of an ascii skeleton and, now and then, sinks back */
.void { position: relative; display: inline-block; }
.void-word { font-weight: 700; color: var(--ink-title); transition: opacity .6s ease-out; }
/* the skeleton animates every frame; under the ink filter that re-filters the whole paragraph
   each frame, which phones render as a shimmer. this line keeps its ink spans but not the filter */
.letter p:has(.void) { filter: none; }
.void.armed .void-word { opacity: 0; }
.void.armed.surfaced .void-word { opacity: 1; }
.void-sk {
  position: absolute; inset: 0 -.15em; display: flex; align-items: center;
  --ascii-font: var(--type); --ascii-skeleton: var(--ink);
  overflow: hidden; transition: opacity .5s ease-out;
}
.void.surfaced .void-sk { opacity: 0; }
.void-sk .ars { width: 100%; --ars-base: .5; --ars-wave: 1; } /* darker than a loading skeleton: it has to read on paper */
.void-sk .ars-line { width: 100% !important; line-height: 1.1; }
/* the manifest: a real sheet of laid letter paper. the page photo sits on top and fades into a seamless
   strip of the same paper, so the sheet can be as long as the letter; our eye is printed where a letterhead goes */
.sheet.letter-sheet {
  background: url(assets/letter-page.webp) top center / 100% auto no-repeat, url(assets/letter-tile.jpg) top center / 100% auto repeat-y, #efe9dd;
  box-shadow: 0 26px 48px -12px rgba(0, 0, 0, .7);
}
.letter-eye {
  display: block; width: clamp(84px, 15%, 128px); margin: 0 auto; padding-top: 0; position: relative; top: 76px;
  color: #494949; mix-blend-mode: multiply; /* the logo's eye colour, brand/tokens.css */
}
.letter-sheet .manifest-body { padding-top: 152px; }

/* legal pages: the manifest's letter sheet, set for reading policy */
.legal-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.legal .manifest-body { font-size: 0.9375rem; line-height: 1.7; }
.legal h2 { font: 700 1rem/1.4 var(--type); color: var(--ink-title); margin: 2.2em 0 .5em; }
.legal p + p { margin-top: .8em; }
.legal ul { margin: .5em 0 0; padding-left: 2ch; }
.legal li { padding-left: .5ch; }
.legal li + li { margin-top: .4em; }
.legal li::marker { content: "– "; }
.legal strong { font-weight: 700; color: var(--ink-title); }
.legal a { text-decoration: underline dotted 1px; text-underline-offset: 3px; }
.todo { background: rgba(194, 58, 34, .14); color: var(--stamp); padding: 0 .2em; } /* a gap the business still has to fill */

/* the photograph clipped to the letter, then the sign-off */
.attached { margin: 64px 0 0; }
.attached .print { width: min(460px, 100%); margin: 0 auto; rotate: -1.2deg; }
.signoff { margin-top: 52px; }
.signoff p + p { margin-top: 0; }
.sig {
  margin-top: 14px !important;
  font: 400 3.25rem/1.1 "Mrs Saint Delafield", cursive; text-transform: none;
  color: var(--fountain); filter: url(#fountain); mix-blend-mode: multiply; /* signed in black with an old fountain pen */
}

/* ---------- landing: the hero ---------- */
.landing main { padding-top: 0; }
.hero { position: relative; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 2.6svh, 28px); padding: calc(var(--bar-h) + 12px) 8px 24px; background: radial-gradient(58% 58% at 50% 56%, #1a1a18, var(--desk) 72%); }
.hero::before { /* the site's noise, behind everything on this page */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background: var(--noise); animation: noise-jump .8s steps(1) infinite;
  -webkit-mask-image: linear-gradient(transparent var(--bar-h), #000 calc(var(--bar-h) + 140px), #000 calc(100% - 140px), transparent);
          mask-image: linear-gradient(transparent var(--bar-h), #000 calc(var(--bar-h) + 140px), #000 calc(100% - 140px), transparent); /* fades out before the solid nav and footer, so no hard band */
}
.hero-tease, .hero-actions { position: relative; z-index: 2; }
.past-hero .hero::before { animation-play-state: paused; }
.hero-copy { display: contents; }
/* the wall: one render of the whole stack (scripts/wall-scene.html), with holes where the glass is and live screens behind */
.wall { position: relative; z-index: 1; width: min(100%, 1040px, calc((100svh - var(--bar-h) - 270px) / 0.765)); }
.wall-stage { position: relative; }
.wall .tv-body { position: relative; display: block; width: 100%; height: auto; pointer-events: none; }
.wall .screen { animation-delay: var(--s, 0s); }
.wall .sk { position: absolute; inset: -4%; rotate: var(--r, 0deg); } /* follows its set, which sits a little crooked */
.wall .eye-sig { rotate: var(--r, 0deg); }
.wall-glow { position: absolute; max-width: none; height: auto; pointer-events: none; animation: wall-glow 7s steps(1) infinite; } /* the light off all the screens, one baked image */
@keyframes wall-glow { 0% { opacity: 1; } 31% { opacity: .88; } 32% { opacity: 1; } 58% { opacity: .82; } 59% { opacity: .95; } 60% { opacity: 1; } 84% { opacity: .9; } 85% { opacity: 1; } }
.wall .feed { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; opacity: .8; animation: vcr-drop var(--t, 13s) steps(1) infinite var(--d, 0s); }
.wall .sk.has-feed::after { /* static over the footage */
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen; opacity: .55;
  background: url(assets/static-strip.webp) 0 0 / 100% 1600%; animation: vcr-static 1.07s steps(1) infinite var(--s, 0s);
}
.wall .lit::before { content: ""; position: absolute; inset: 0; background: rgba(206, 206, 200, .84); } /* a pale screen for the dark eyes */
.wall .eye-sig { position: absolute; left: 19%; top: 50%; width: 62%; max-width: none; height: auto; translate: 0 -50%; animation: eye-signal var(--t, 11s) steps(1) infinite var(--d, 0s); }
/* now and then the signal loses the eye too */
@keyframes eye-signal { 0% { opacity: 1; } 37% { opacity: .35; transform: translateX(4%); } 37.6% { opacity: 1; transform: none; } 71% { opacity: 0; } 73% { opacity: .5; } 73.5% { opacity: 0; } 75% { opacity: 1; } }
.past-hero .wall * { animation-play-state: paused; } /* nothing runs once the wall has scrolled away */
/* the teaser, typed in white above the wall */
.hero-tease { text-align: center; font: 700 clamp(1.05rem, 2vw, 1.9rem)/1.4 var(--type); color: #fff; letter-spacing: .01em; text-wrap: balance; }
.hero-tease .redact { width: 10ch; height: .82em; vertical-align: -.06em; background: var(--exhibit); }
.hero-tease { --ascii-font: var(--type); --ascii-glyph: rgba(255, 255, 255, .6); --ascii-skeleton: #fff; }
.decode-pending .hero-tease { visibility: hidden; } /* a beat while the decoder loads, so the words don't flash in first */
@keyframes blink { 50% { opacity: 0; } }
.hero-actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
/* two typed commands in brackets, white on a dark plate; hover lifts the plate to white and opens the brackets */
.hero-btn {
  display: inline-flex; justify-content: center; align-items: baseline; gap: .35em;
  padding: 14px 22px; color: #fff; background: rgba(8, 8, 8, .58);
  font: 700 1.125rem/1.2 var(--type); letter-spacing: .03em; white-space: nowrap;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: background-color .3s var(--mech), color .3s var(--mech), translate .3s var(--mech), gap .3s var(--mech);
}
.hero-btn::before { content: "[" / ""; }
.hero-btn::after { content: "]" / ""; }
.hero-btn:focus-visible { background: #fff; color: var(--desk); translate: 0 -3px; gap: .7em; }
@media (hover: hover) { .hero-btn:hover { background: #fff; color: var(--desk); translate: 0 -3px; gap: .7em; } } /* no stuck white after a tap */
.hero-btn:active { translate: 0 -1px; }
.hero-btn:focus-visible { outline-color: #fff; }
.landing .footer { border-top: 0; padding-top: 80px; }
.footer-logo { display: block; margin-bottom: 44px; }
.footer-logo img { margin-bottom: 0; }

/* ---------- security clearance: a card swiped through a reader, over the blurred page ---------- */
@font-face { font-family: "Pixelbasel"; src: url(fonts/pixelbasel/pixelbasel.ttf) format("truetype"); font-display: swap; }
.clearance {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none; color: var(--exhibit); overflow: hidden;
  opacity: 0; transition: opacity .35s ease-out, overlay .35s allow-discrete, display .35s allow-discrete; outline: none;
}
.clearance[open] { opacity: 1; }
@starting-style { .clearance[open] { opacity: 0; } }
.clearance::backdrop { background: rgba(8, 8, 8, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cl-close { position: absolute; top: 18px; right: 22px; z-index: 5; padding: 6px; font-size: .9375rem; color: var(--desk-text-strong); }
.cl-close:hover { color: #fff; }
.cl-stage { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 16px 24px; perspective: 1200px; }
.cl-copy { width: min(440px, 100%); min-height: 6.8em; margin-bottom: 26px; text-align: center; color: #fff; }
.cl-copy p + p { margin-top: .55em; }
.cl-copy p:nth-child(3) { color: var(--desk-text-strong); }

.id-card {
  --cw: min(320px, 76vw);
  position: relative; z-index: 1; flex: none; width: var(--cw); aspect-ratio: 1.586; container-type: inline-size;
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .6));
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transform-origin: 50% 100%;
}
.dragging .id-card { cursor: grabbing; }
/* the face: brick-red bands around white, a ghost numeral through it all, a lanyard slot punched right through */
.id-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 3.6cqi;
  --brick: #911b01; background: #f6f5f1; color: #111; text-transform: none; font-family: var(--caps);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1586 1000' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1586V1000H0ZM70 395a26 26 0 0 0-26 26V619a26 26 0 0 0 52 0V421a26 26 0 0 0-26-26Z'/%3E%3C/svg%3E") center / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1586 1000' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1586V1000H0ZM70 395a26 26 0 0 0-26 26V619a26 26 0 0 0 52 0V421a26 26 0 0 0-26-26Z'/%3E%3C/svg%3E") center / 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.id-top { flex: none; height: 23%; display: flex; justify-content: space-between; align-items: center; padding: 0 3.6cqi; background: var(--brick); color: #fbeee9; }
.id-mark { position: relative; z-index: 2; display: flex; align-items: center; gap: 2.4cqi; }
.id-mark .wordmark { height: 5.2cqi; background: #fff; }
.id-mark .eye { width: 13.5cqi; color: #fff; }
.id-kind { position: relative; z-index: 2; font: 500 4.2cqi/1 Jost, var(--type); letter-spacing: .02em; color: #fbe4dc; }
.id-mid { position: relative; flex: 1; min-height: 0; padding: 2.4cqi 3.6cqi 0 8.6cqi; }
.id-num { position: absolute; z-index: 1; right: 3cqi; top: -.145em; font: 700 88.4cqi/1 Jost, sans-serif; color: rgba(120, 118, 114, .3); pointer-events: none; } /* measured: Jost's 5 is .713em of ink starting .145em down, so it fills the card exactly, edge to edge */
.id-level { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.id-level p { font: 700 14.6cqi/1 Jost, sans-serif; letter-spacing: -.005em; -webkit-text-stroke: .018em #111; color: #111; }
.id-level svg { width: 7.4cqi; fill: #111; }
.id-mid label { position: relative; z-index: 2; display: block; margin-top: 1.4cqi; font: 500 max(10px, 3cqi)/1.2 Jost, sans-serif; color: #55544f; }
.id-mid input {
  position: relative; z-index: 2; display: block; width: 100%; padding: .1em 0 .2em; border: 0; border-bottom: 1.5px solid #111; border-radius: 0; outline: none; background: transparent;
  font: 400 16px/1.3 var(--type); color: #111; text-transform: none; user-select: text; -webkit-user-select: text; caret-color: var(--brick);
}
.id-mid input:focus { border-bottom-width: 2px; }
.id-mid input[aria-invalid="true"] { border-bottom-color: var(--stamp); }
.id-bottom { position: relative; flex: none; height: 11%; display: grid; place-items: center; background: var(--brick); color: #fff; font: 500 3.1cqi/1 Jost, sans-serif; letter-spacing: .03em; }

/* success: the card has gone into the reader; a tick is drawn where it was */
.cl-success {
  position: absolute; z-index: 3; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 22px; color: #fff;
}
.cl-success[hidden] { display: none; }
.cl-success svg { width: 72px; margin-bottom: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: square; }
.cl-success circle { stroke-dasharray: 183; stroke-dashoffset: 183; animation: tick-draw .45s var(--mech) forwards; }
.cl-success path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: tick-draw .3s var(--mech) .35s forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
.cl-success p { max-width: 440px; outline: none; color: var(--desk-text-strong); }
.cl-success p:first-of-type { font-weight: 700; font-size: 1.125rem; color: #fff; margin-bottom: .35em; }
.cl-success strong { font-weight: 700; color: #fff; text-transform: none; word-break: break-all; }
.filed .cl-copy, .filed .id-card { visibility: hidden; }

/* the reader: a 3d render (assets/reader.webp, from scripts/reader-scene.html) split at the slot. the part above
   sits behind the card, the front lip and body in front of it; the lcd and light are live html on top */
.reader-back, .reader { width: min(400px, 91vw); flex: none; background: url(assets/reader.webp) 0 0 / 100% auto no-repeat; }
.reader-back { position: relative; z-index: 0; margin-top: 24px; aspect-ratio: 46.7; }
.reader { position: relative; z-index: 2; aspect-ratio: 3.14; background-position: 0 100%; filter: drop-shadow(0 22px 20px rgba(0, 0, 0, .75)); }
.reader-lcd {
  /* a backlit mono lcd: grey-green glass, faint pixel grid, dark segments */
  position: absolute; left: 23%; right: 23%; top: 54%; bottom: 18%; display: grid; place-items: center; border-radius: 1px;
  box-shadow: inset 0 2px 5px rgba(20, 28, 14, .6), inset 0 0 0 1px rgba(20, 28, 14, .35);
  background:
    repeating-linear-gradient(0deg, rgba(30, 40, 22, .09) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(30, 40, 22, .09) 0 1px, transparent 1px 3px),
    #a4b28f;
  font: 400 clamp(.875rem, 4.4vw, 1.125rem)/1 "Pixelbasel", var(--type); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #1a2212; text-shadow: 1.5px 1.5px 0 rgba(30, 40, 22, .22);
}
.reader-led { position: absolute; left: 89.2%; top: 68.4%; width: 3.6%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; }
.reader[data-state="reading"] .reader-led { background: #d8e8c8; box-shadow: 0 0 10px 2px #cfe6bb; }
.reader[data-state="granted"] .reader-led { background: #e8f4d8; box-shadow: 0 0 12px 3px #d6efc0; }
.reader[data-state="error"] .reader-led { background: var(--stamp-desk); box-shadow: 0 0 10px 2px var(--stamp-desk); }
.reader[data-state="error"] .reader-lcd { background-color: #c49a85; }
.cl-hint { min-height: 1.6em; margin-top: 20px; text-align: center; color: var(--desk-text-strong); }
.cl-auto { margin-top: 6px; padding: 8px; font-size: .8125rem; color: var(--desk-text); }
.cl-auto:hover { color: #fff; }
.cl-consent { width: min(440px, 100%); margin-top: 10px; text-align: center; font-size: .75rem; color: var(--desk-text); }
.cl-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cl-consent a:hover { color: #fff; }
@media (max-height: 640px) { .cl-copy { margin-bottom: 12px; font-size: .8125rem; } .reader-back { margin-top: 14px; } .cl-hint { margin-top: 10px; } .cl-stage { padding-top: 40px; } }

/* ---------- the archive: a filing drawer seen from above ----------
   the stage is fixed and only the files move; each stop in the page's height is one file, and drawer.js settles on the nearest */
.archive-page.drawer-on::before, body[data-product]::before { /* faint film noise: one tile, jumped around a few times a second */
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .05;
  background: var(--noise);
  animation: noise-jump .8s steps(1) infinite;
}
body[data-product]::before { z-index: 44; } /* product page: over the page and hero, under the solid nav and buy bar */
@keyframes noise-jump {
  0% { background-position: 0 0; } 17% { background-position: -83px 47px; } 33% { background-position: 61px -112px; }
  50% { background-position: -37px -71px; } 67% { background-position: 109px 89px; } 83% { background-position: -127px 23px; }
}
.archive-page main { padding-top: 0; }
.archive-page:not(.drawer-on) main { padding-top: calc(var(--bar-h) + var(--view-h, 48px)); }
.archive-page:not(.drawer-on) .drawer-view { display: none; }
html:has(.archive-page.drawer-on) { overscroll-behavior-y: none; } /* no rubber-band dragging the page around */
.archive-page.drawer-on .footer { display: none; }
.stage { position: fixed; inset: 0 0 auto; height: 100dvh; overflow: hidden; --w: min(480px, 86vw, 58svh); } /* never moves: only the files do */
.stops > div { height: 32svh; }
.stops > div:last-child { height: 100svh; }
.stack { list-style: none; margin: 0; padding: 0; position: absolute; left: 50%; top: 0; width: var(--w); translate: -50% 0; }
.file { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 50% 0; will-change: transform; }
.file-btn { display: block; position: relative; width: 100%; color: var(--ink-title); text-align: left; }
.file-lift { display: block; position: relative; transition: translate .3s var(--mech); }
@media (hover: hover) {
  body:not(.scrolling) .file-btn:hover .file-lift { translate: 0 -22px; }
  body:not(.scrolling) .file.front .file-btn:hover .file-lift { translate: 0 -8px; }
}
.file-btn:focus-visible { outline-offset: -6px; }
.file-photo { display: block; width: 100%; height: auto; position: relative; }
.file-tab { /* the only place a file carries its name */
  position: absolute; top: 0; left: var(--tab, 8%); z-index: 1; padding: .45em .8em .5em;
  font: 700 clamp(.72rem, calc(var(--w) * .034), .95rem)/1 var(--type); white-space: nowrap; color: var(--ink-title);
  background: var(--paper-tex), #dedcd6; box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.redact-name { display: inline-block; width: 3ch; height: .85em; vertical-align: -.08em; background: currentColor; }
.file.shake .file-lift { animation: shake .36s steps(6, jump-none); }
@keyframes shake { 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
.file.jolt .file-lift { animation: jolt .24s steps(3, jump-end); } /* each file lands with a stop-motion knock */
@keyframes jolt { 0% { translate: 0 7px; } 34% { translate: 0 -4px; } 67% { translate: 0 2px; } }
.drawer-on.leaving .file:not(.flying), .drawer-on.leaving .stage-foot, .drawer-on.leaving .back-hint, .drawer-on.leaving .view-controls, .drawer-on.leaving .flying .file-tab { opacity: 0; transition: opacity .3s ease-out; }
.file.flying { transition: transform .6s var(--mech), filter .6s var(--mech); z-index: 200 !important; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }

.stage-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 150; padding-bottom: env(safe-area-inset-bottom); background: var(--desk); }
.back-hint { display: none; }
.start-hint {
  position: absolute; bottom: 100%; left: 50%; translate: -50% 0; width: max-content; max-width: calc(100vw - 24px); margin-bottom: 14px;
  display: flex; align-items: center; gap: 9px; padding: 9px 13px;
  font-size: .9375rem; color: #fff; background: var(--desk); border: 1px solid var(--desk-text);
  transition: opacity .35s ease-out, visibility 0s;
}
.start-hint.gone { opacity: 0; visibility: hidden; transition: opacity .35s ease-out, visibility 0s .35s; }
.start-hint svg { flex: none; }
.start-hint .on-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .start-hint .on-touch { display: none; } .start-hint .on-mouse { display: inline; } .start-hint svg { rotate: 180deg; } }
.file-card {
  display: flex; justify-content: center; align-items: center; gap: 32px;
  padding: 14px 24px 16px; background: var(--desk); border-top: 1px solid #2c2c2a; color: var(--desk-text);
}
.file-card-name { font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--desk-text-strong); white-space: nowrap; }
.file-card-facts { font-size: .8125rem; }
.file-card-facts i { font-style: normal; }
.file-card .stamp { color: var(--stamp-desk); font-size: 1.25rem; padding: 7px 14px 8px; white-space: nowrap; }

/* the view control: a row under the nav, saying exactly what it will do */
.view-controls {
  position: fixed; top: var(--bar-h); left: 0; right: 0; z-index: 49;
  display: flex; justify-content: flex-end; align-items: center; gap: 18px;
  padding: 0 var(--gutter) 10px; background: var(--desk); font-size: .8125rem;
}
.view-toggle { display: flex; align-items: center; gap: 12px; padding: 6px 10px; color: var(--desk-text-strong); border: 1px solid #3a3936; transition: border-color .2s; }
.view-toggle:hover { border-color: var(--desk-text-strong); }
.slider { position: relative; display: block; width: 38px; height: 20px; border: 1.5px solid var(--desk-text-strong); }
.slider i { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; background: var(--desk-text-strong); transition: translate .22s var(--mech); }
.view-toggle[aria-checked="true"] .slider i { translate: 18px 0; }

/* the simple view: one sheet ruled into equal cells, every file a print with its facts typed under it */
.sheet.ledger { max-width: none; margin: 0; color: var(--ink); }
.ledger-head { padding: 48px var(--gutter) 40px; }
.ledger-head .caps { zoom: 2.6; }
.ledger-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid var(--rule); }
.ledger-grid li { display: flex; border-bottom: 1.5px solid var(--rule); border-right: 1.5px solid var(--rule); }
.ledger-grid li:nth-child(3n) { border-right: 0; }
.cell { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; padding: 40px 44px 36px; text-align: left; color: inherit; }
.cell-print {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; margin-bottom: 20px;
  background: #1a1a18; outline: 8px solid #e9e6dc; outline-offset: -8px;
  box-shadow: 0 10px 18px -6px rgba(30, 28, 24, .45), 0 1px 3px rgba(30, 28, 24, .25);
  transition: translate .3s var(--mech), box-shadow .3s var(--mech);
}
@media (hover: hover) { .cell:hover .cell-print { translate: 0 -5px; box-shadow: 0 20px 26px -8px rgba(30, 28, 24, .5), 0 2px 5px rgba(30, 28, 24, .2); } }
.cell-print img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.cell-print .eye { width: 34%; color: #55544f; }
.cell-status { position: absolute; top: 18px; right: 18px; background: #e9e6dc; filter: none; } /* the ink grain eats type this small */
.cell-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cell-name { font-weight: 700; font-size: 1.1875rem; color: var(--ink-title); }
.cell-price { font-size: 1.0625rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-title); }
.cell-type { display: block; margin-top: 2px; color: var(--ink-muted); }
.cell-tags { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 14px; font-size: .8125rem; color: var(--ink-muted); }
.cell-sealed .cell-tags { color: var(--stamp); text-transform: uppercase; }

/* ---------- phone buy bar ---------- */
.buybar { display: none; }

/* phones and tablets: svg filters render soft on these screens, so typed text and titles print clean */
@media (max-width: 860px), (pointer: coarse) {
  .type { filter: none; }
  .wall { width: 100%; aspect-ratio: 1 / 0.7623; min-height: 0; clip-path: inset(-200px -100px 0); } /* the top four rows of the stack */
  .wall-stage { width: 127%; margin-left: -13.5%; }
  .row-base { display: none; }
  .caps span span { filter: none !important; } /* the ink-bleed filters are set per letter, inline */
}
.caps.as-image { transform: none; }
.caps-img { display: block; height: 1.365em; width: auto; max-width: none; margin: -.1575em; } /* the capture keeps 15% of the 1.05em line as bleed room all round */

/* ---------- smaller desks (layout not yet in mockups, DESIGN.md §11) ---------- */
@media (max-width: 1180px) {
  .tagline { display: none; }
  .datasheet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cf-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .cf-doc-wrap { margin-left: 0; }
  .tape { padding-bottom: 80px; }
}
@media (max-width: 860px) {
  :root { --gutter: 16px; --bar-h: calc(88px + var(--safe-top)); --buy-h: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .topbar { flex-wrap: wrap; align-content: center; row-gap: 10px; column-gap: 0; }
  /* iphone safari clips fixed elements to the page area and shows the scrolling page behind its clock and toolbar.
     sticky bars are part of that page, so they and their shadows reach the screen edges. margins keep them out of the flow */
  .topbar { position: sticky; top: 0; margin-bottom: calc(-1 * var(--bar-h)); }
  body[data-product]::before { display: block; position: sticky; inset: 0 auto auto; height: 100lvh; margin-bottom: -100lvh; } /* part of the setup confirmed on iphone: see redraw in archive.js */
  body.redraw[data-product]::before { display: none; }
  .topbar nav { order: 3; width: 100%; gap: 22px; font-size: 0.75rem; white-space: nowrap; overflow-x: auto; scrollbar-width: none; } /* with large browser text the links scroll sideways instead of being cut off */
  .topbar nav::-webkit-scrollbar { display: none; }
  .cart { margin-left: 0; }
  main { padding-top: calc(var(--bar-h) + 12px); }
  .sheet { margin: 0 16px; }
  .sheet.faq { margin: 0; }
  .faq .faq-intro { border-bottom: 0; padding: 26px 22px 0; }
  .datasheet, .faq { grid-template-columns: 1fr; }
  .letter-head { padding: 44px 22px 0; }
  .letter-eye { top: 44px; }
  .letter-sheet .manifest-body { padding-top: 96px; }
  .legal-head { flex-direction: column; align-items: flex-start; gap: 14px; } /* the stretched title is wider than its box: stamp goes under it */
  .legal #title { zoom: .5; } /* two-word legal titles are long; same ink, smaller */
  .manifest-body { padding: 32px 22px 48px; }
  .slip { padding: 24px 20px 28px; }
  .ds-info, .faq-intro { border-right: 0; border-bottom: 1.5px solid var(--rule); padding: 44px 22px 36px; }
  .ds-exhibit { padding: 44px 22px; }
  /* shrink the title with zoom, not font-size, so the ink-bleed filters shrink with it (DESIGN.md §8) */
  #title { zoom: .66; }
  .price { font-size: 2rem; }
  .stamp-acquire { font-size: 1.5rem; }
  .specs { grid-template-columns: 1fr; }
  .specs > div:nth-child(n):not(.full) { padding: 4px 0; border-right: 0; }
  .casefile { padding: 56px 16px 64px; }
  .cf-grid { grid-template-columns: 1fr; gap: 56px; }
  .tape { padding-bottom: 0; max-width: 464px; justify-self: center; width: 100%; }
  .faq-list { padding: 8px 22px 24px; }
  .faq-list summary { grid-template-columns: 48px 1fr auto; }
  .faq-list details p { padding: 0 0 18px 48px; }
  .footer { margin: 0 16px; }
  .file-card { justify-content: space-between; gap: 12px; padding: 12px 16px 14px; }
  .start-hint { font-size: .8125rem; padding: 8px 10px; gap: 7px; }
  /* phones: appears as the last files come up, and tapping it works too */
  .back-hint {
    display: flex; align-items: center; justify-content: center; gap: 8px; position: absolute; z-index: 150; top: calc(var(--bar-h) + var(--view-h, 48px) + 8px); left: 50%; translate: -50% 0; width: max-content; max-width: calc(100vw - 24px);
    padding: 6px 9px; font-size: .75rem; white-space: nowrap; color: var(--desk-text-strong); background: var(--desk); border: 1px solid #3a3936;
    opacity: 0; transition: opacity .25s ease-out;
  }
  .back-hint.show { opacity: 1; }
  .back-hint svg { flex: none; }
  .file-card-name { font-size: 1.1rem; }
  .file-card-facts { font-size: .75rem; }
  .file-card .stamp { font-size: 1.05rem; padding: 6px 10px; }
  .view-controls { gap: 8px; padding-bottom: 8px; font-size: .75rem; white-space: nowrap; }
  .view-toggle { padding: 5px 8px; gap: 8px; }
  .ledger-head { padding: 32px 16px 28px; }
  .ledger-head .caps { zoom: 1.1; }
  .ledger-grid { grid-template-columns: repeat(2, 1fr); }
  .ledger-grid li:nth-child(3n) { border-right: 1.5px solid var(--rule); }
  .ledger-grid li:nth-child(2n) { border-right: 0; }
  .cell { padding: 16px 14px 18px; }
  .cell-print { margin-bottom: 12px; outline-width: 5px; outline-offset: -5px; }
  .cell-status { top: 10px; right: 10px; font-size: .6875rem; padding: 2px 5px; filter: none; } /* the ink grain eats type this small */
  .cell-line { flex-direction: column; gap: 0; }
  .cell-name { font-size: 1rem; }
  .cell-price { font-size: .9375rem; }
  .cell-type { font-size: .8125rem; }
  .cell-tags { font-size: .75rem; margin-top: 8px; }
  .buybar {
    position: sticky; bottom: 0; z-index: 45; height: var(--buy-h); margin-top: calc(-1 * var(--buy-h));
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--desk); border-top: 1px solid #2c2c2a;
    box-shadow: 0 200px 0 var(--desk);
    translate: 0 110%; /* no slide: safari leaves a strip under the bar while it's animating */
  }
  .buybar.show { translate: none; }
  .buybar p { display: flex; flex-direction: column; line-height: 1.25; }
  .buybar-name { font-size: 0.75rem; color: var(--desk-text); }
  .buybar-price { font-weight: 700; font-size: 1.25rem; color: var(--desk-text-strong); }
  .buybar .stamp-acquire { font-size: 1.25rem; padding: 7px 16px 8px; color: var(--stamp-desk); }
  .buybar .stamp-acquire.acquired { color: var(--desk-text-strong); } /* ink black would vanish on the desk */
  body:has(.buybar) .footer { padding-bottom: 180px; } /* the bar never covers the last links */
  .hero-tease { font-size: min(1.4rem, 5.2vw); }
  .doc-open { font-size: .75rem; white-space: nowrap; }
  .fc-price { display: block; }
  .fc-price i { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .hero-btn { min-width: 0; font-size: 1rem; padding: 14px 12px; }
  .cf-doc-wrap { width: 92%; margin-inline: auto; }
  .lightbox .doc-reader { padding: 40px 22px 36px; }
  .doc-reader .doc { font-size: 0.9062rem; }
  .doc-reader .doc-stamp { top: 28px; right: 20px; font-size: 0.5938rem; }
  .doc-reader .doc-stamp .eye { width: 48px; }
  .doc-reader .doc-head { padding-right: 96px; }
  /* thumb-sized tap targets without moving the type */
  .topbar nav a, .cart { padding: 10px 0; margin: -10px 0; }
  .close, .remove { padding: 8px; margin: -8px; }
  .footer nav { gap: 4px 26px; }
  .footer nav a { padding: 8px 0; }
}
@media (max-width: 400px) {
  .topbar nav { gap: 10px; letter-spacing: 0; justify-content: space-between; }
}

/* reduced motion: nothing travels, but every state change still shows as a short fade.
   transforms snap; opacity, colour and the blur behind dialogs still ease */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-property: opacity, color, background-color, border-color, backdrop-filter, -webkit-backdrop-filter, overlay, display !important;
    transition-duration: .2s !important; transition-delay: 0s !important;
  }
  .drawer, .drawer[open] { transform: none; translate: none; }
  .drawer { opacity: 0; }
  .drawer[open] { opacity: 1; }
  @starting-style { .drawer[open] { opacity: 0; } }
  .tape.playing .cassette { transform: none; } /* the red glow and "● playing" carry the state */
  .ds-exhibit .print:hover, .cf-paper:hover, .folder:hover { transform: none; }
}