/* tapeclub. THE LOOK (LEAD.md, approved 2026-09-30; reference: the round 5 mockups).
   Faded paper, dark ink, IBM Plex Mono small and quiet, plain underlined links.
   Masking tape with marker on it is rare and means something: the header label and mixtape titles only.
   Covers carry one label-maker label each. Posters are sun-faded. Seen is a Sharpie X.
   No bright buttons, no pills, no cards, no glow, no icons, no badges, and no animation but the one short "slap" settle on a new notification (below).
   Textures are drawn with svg (data: urls, the CSP allows them as images) and the filters in the layout (FilterDefs).
   The hand-made variations (tears, tilts, letter wobble) are generated classes at the end of this file. */

@font-face { font-family: 'Covered By Your Grace'; src: url('/fonts/covered-by-your-grace.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Roboto Condensed'; src: url('/fonts/roboto-condensed.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Special Elite'; src: url('/fonts/special-elite.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Condensed'; src: url('/fonts/ibm-plex-sans-condensed.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Just Another Hand'; src: url('/fonts/just-another-hand.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nothing You Could Do'; src: url('/fonts/nothing-you-could-do.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Reenie Beanie'; src: url('/fonts/reenie-beanie.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Rock Salt'; src: url('/fonts/rock-salt.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --page: #e6dfca;
  --ink: #27231d;
  --dim: #645b4c;
  --rule: rgba(39, 35, 29, 0.42);
  --rule-soft: rgba(39, 35, 29, 0.16);
  --marker-ink: #16130f;
  --error: #7a2a1a;
  --tape-base: 225, 207, 162;

  --marker: 'Covered By Your Grace', 'Comic Sans MS', cursive;
  --body: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --gutter: 40px;
  /* how much marker letters wobble, and how deep a tape tear goes. each tape size sets its own. */
  --wob: 0.5;
  --td: 0.12em;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* the page: aged paper, faint uneven yellowing and photocopy toner. flat. */
html {
  color: var(--ink);
  font: 14px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
  background-color: var(--page);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -.15 .08'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='2600' preserveAspectRatio='none'><filter id='m' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.0022' numOctaves='3' seed='9' /><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .36  0 0 0 0 .12  .22 0 0 0 -.09'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  background-size: 220px 220px, 100% 100%;
  background-repeat: repeat, no-repeat;
}
body { margin: 0 auto; max-width: 1120px; padding: 0 var(--gutter); min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
main { flex: 1; padding: 0 0 24px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--rule); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
p { margin: 0 0 8px; max-width: 42rem; }
h1, h2, h3 { font-weight: 500; font-size: inherit; line-height: 1.4; margin: 0; }
h2, h3 { color: var(--dim); font-weight: 400; }
.quiet { color: var(--dim); }
.error { color: var(--error); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999rem; }
.skip:focus { left: 16px; top: 8px; z-index: 60; background: var(--page); padding: 4px 8px; }

/* a plain page heading: mono, a touch bigger. tape is for mixtape titles only. */
.page-h { font-size: 16px; font-weight: 500; margin: 56px 0 28px; }

/* --- controls: plain text in the same ink. no boxes, no pills. */
input, textarea, select { font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 8px 0; min-height: 44px; outline: none; }
input:focus, textarea:focus, select:focus { border-bottom-color: var(--ink); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
input::placeholder, textarea::placeholder { color: var(--dim); opacity: 1; }
textarea { resize: vertical; line-height: 1.5; }
select { padding-right: 4px; cursor: pointer; }
select option { background: var(--page); color: var(--ink); }
input[type='checkbox'], input[type='radio'] { min-height: 0; accent-color: var(--ink); width: 16px; height: 16px; margin: 0 8px 0 0; vertical-align: -3px; }
button, .btn { font: inherit; color: var(--ink); background: none; border: 0; border-radius: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--rule); }
button:hover, .btn:hover { text-decoration-color: currentColor; }
form.inline { display: inline; margin: 0; }
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 30rem; }
.stack input[type='text'], .stack input[type='search'], .stack textarea { width: 100%; }
.stack label { margin-top: 12px; color: var(--dim); }
.stack button { margin-top: 8px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.danger { margin-top: 72px; color: var(--dim); }
.danger summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.25em; }
.danger form { margin-top: 4px; color: var(--ink); }

/* --- the header: the tapeclub label on tape, a search line, the person */
.top { display: flex; align-items: center; gap: 12px 32px; min-height: 92px; }
.tape-logo { font-size: 32px; --r: -2.5deg; --wob: 0.36; --td: 0.147em; padding: 0.2em 0.7em 0.12em; }
.tape-logo .ink { filter: url(#inkxs); -webkit-text-stroke-width: 0.03em; letter-spacing: 0.03em; }
.top .search { flex: 1; max-width: 340px; margin-left: auto; display: flex; }
.top .search input { width: 100%; }
.top .search button { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.top .who, .top .who form { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin: 0; }
.top .who a, .top .who button { min-height: 44px; display: inline-flex; align-items: center; }
.top .handle { color: var(--dim); text-decoration-color: transparent; }
.top .handle:hover { text-decoration-color: var(--rule); }

/* --- masking tape. pale, matte, a little see-through: a faint crepe, a hair of edge, a soft thin lift shadow.
   the torn body is ::before (clip-path from a generated .tearN class); the strip carries the shadow. */
.tape {
  display: inline-block;
  position: relative;
  isolation: isolate;
  color: var(--marker-ink);
  font-family: var(--marker);
  font-weight: 400;
  padding: 0.2em 0.8em 0.14em;
  line-height: 1.05;
  transform: rotate(var(--r, 0deg));
  text-decoration: none;
  filter: drop-shadow(0 0.5px 0.4px rgba(120, 96, 52, 0.3)) drop-shadow(0 1px 1.6px rgba(90, 70, 36, 0.1));
}
.tape::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(var(--tape, var(--tape-base)), 0.9);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><filter id='c' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.8 .05' numOctaves='2' seed='8' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .4  0 0 0 0 .22  0 0 0 -.42 .27'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='200'><filter id='s' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.006 .02' numOctaves='2' seed='31' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .98  0 0 0 0 .9  .7 0 0 0 -.3'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>"),
    linear-gradient(180deg, rgba(150, 122, 70, 0.16) 0 1px, transparent 2px calc(100% - 2px), rgba(150, 122, 70, 0.18) calc(100% - 1px));
  background-position: var(--bx, 0) var(--by, 0), var(--by, 0) var(--bx, 0), 0 0;
}
a.tape:hover { text-decoration: none; }
a.tape:hover .ink { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.ink { display: inline-block; filter: url(#ink); color: var(--marker-ink); -webkit-text-stroke: 0.04em var(--marker-ink); letter-spacing: 0.01em; }
.ink .w { display: inline-block; white-space: nowrap; }
.ink .l { display: inline-block; transform-origin: 50% 80%; }

/* --- a tape page: the title on tape, one quiet line under it */
.hero { padding: 64px 0 0; }
.tape-h { margin: 0; font-size: 108px; line-height: 1; font-weight: 400; }
.tape-h .tape { --r: -1.8deg; --wob: 0.56; --td: 0.095em; padding: 0.16em 0.42em 0.1em; margin-left: -0.14em; max-width: 100%; overflow-wrap: anywhere; }
.tape-h .tape.len-2 { font-size: 80px; }
.tape-h .tape.len-3 { font-size: 58px; }
.edit-hero .tape-h .tape { font-size: 56px; }
.edit-hero .tape-h .tape.len-3 { font-size: 40px; }
.meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 32px; margin-top: 34px; color: var(--dim); }
.meta p { margin: 0; }
.meta .by { color: var(--ink); }
.acts { display: flex; flex-wrap: wrap; gap: 0 24px; align-items: baseline; }
.acts a, .acts button { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); }
.liner { margin: 18px 0 0; max-width: 40rem; }
.remix-lines { margin-top: 10px; color: var(--dim); }
.remix-lines p { margin: 0; }
.remix-milestone, .member-no { font-family: var(--marker); font-size: 1.25em; line-height: 1; }
.progress { margin: 0; }

/* the viewer's own switch: quiet words, the current one in ink */
.view-switch { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 56px 0 0; color: var(--dim); font-size: 12px; }
.view-switch a, .view-switch span { min-height: 44px; display: inline-flex; align-items: center; }
.view-switch a { color: var(--dim); }
.view-switch .is-on { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.admin-flag { margin-top: 8px; }

/* --- covers. set down by hand: a hair of tilt and drop. the label straddles the top edge. */
.zones { margin-top: 14px; padding-top: 6px; }
.zone + .zone { margin-top: 64px; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px 30px; }
.cover { position: relative; min-width: 0; }
/* the tilt is on the cover, not the list item: the sheet inside the item is position: fixed and a transform would trap it */
.cover > .cv, .result > .cv { transform: translateY(var(--cdy, 0px)) rotate(var(--cr, 0deg)); }
.cv { display: block; position: relative; padding-top: 13px; color: inherit; text-decoration: none; }
.art { display: block; position: relative; aspect-ratio: 2 / 3; background: var(--ink); }
.poster { display: block; width: 100%; height: 100%; aspect-ratio: 2 / 3; object-fit: cover; filter: url(#poster); }
.no-cover { display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; background: #d8d0b8; color: var(--dim); font-size: 12px; filter: none; }
.cover-meta { margin-top: 8px; color: var(--dim); font-size: 12px; display: flex; flex-wrap: wrap; gap: 0 10px; }
.tags { display: inline; }
.tag { color: var(--dim); }
.tag + .tag::before { content: '\00b7\00a0'; margin-left: 0.5ch; }
.tag-new { color: var(--ink); }
.year { color: var(--dim); }

/* seen: the cover goes pale under a black Sharpie X */
.is-seen .art::after { content: ''; position: absolute; inset: 0; background: var(--page); opacity: 0.5; }
.x { position: absolute; overflow: visible; pointer-events: none; z-index: 1; }
.x path { fill: none; stroke: var(--marker-ink); stroke-linecap: round; stroke-linejoin: round; opacity: 0.92; }
.x-cover { inset: 7% 6%; width: 88%; height: 86%; }
.x-spine { inset: 0; width: 100%; height: 100%; }
.x-small { position: static; display: inline-block; width: 12px; height: 18px; vertical-align: -3px; margin-right: 6px; }

/* --- label-maker labels. one per cover, pressed on by hand. `.lk-*` is the maker, `.lc-*` the colour of its tape. */
.lbls { display: flex; flex-direction: column; align-items: center; width: max-content; max-width: 112%; z-index: 2; pointer-events: none; }
.lbl-art { display: contents; }
.lbl { position: relative; display: block; width: max-content; max-width: 100%; white-space: nowrap; transform: rotate(var(--r, 0deg)); }
.lbl .lt { display: inline-block; position: relative; }
.lbl .ln { display: block; }
.lbl .c { display: inline-block; }
.lbls.two .lbl { white-space: nowrap; text-align: left; line-height: 1.2; }
.lbl.s2 { margin-top: 0.21em; transform: translateX(9px) rotate(var(--r, 0deg)); }
.at-cover { position: absolute; top: 0; left: 50%; transform: translateX(calc(-50% + var(--dx, 0px))); }
.at-own, .at-you { position: absolute; bottom: 6%; z-index: 3; }
.at-own { right: 7%; }
.at-you { left: 7%; }
.at-own .lbl { --r: 4.5deg; }
.at-you .lbl { --r: -3.5deg; }
.at-head, .at-chip { position: relative; align-items: flex-start; max-width: 100%; }
.at-inline { display: inline-flex; position: relative; vertical-align: middle; margin: 0 6px; }

/* a: the hand-squeeze embosser. vinyl strip, letters pushed up from behind go stress-white, light from above. */
.lk-embossed .lbl {
  background-color: #1c1c1d;
  color: #e4e2da;
  font: 700 12.5px/1 'Roboto Condensed', 'Arial Narrow', sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.5em 0.55em 0.44em 0.7em;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0.05) 14%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.045) 74%, rgba(0, 0, 0, 0.2) 92%, rgba(255, 255, 255, 0.07) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='40'><filter id='v' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='1.6 .5' numOctaves='1' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -.2 .12'/></filter><rect width='100%' height='100%' filter='url(%23v)'/></svg>");
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  clip-path: polygon(0 3%, 100% 0, 99.4% 100%, 0.5% 97%);
  filter: drop-shadow(0 1px 1px rgba(40, 30, 15, 0.38));
}
.lk-embossed .lt { filter: url(#stress); }
.lk-embossed .c { text-shadow: 0 -0.6px 0 rgba(255, 255, 255, 0.55), 0 0.9px 0.3px rgba(0, 0, 0, 0.95), 0 0 0.4px rgba(255, 255, 255, 0.4); }
.lk-embossed .sp { display: inline-block; inline-size: 0.45em; }
.lk-embossed.at-own .lbl, .lk-embossed.at-you .lbl { font-size: 10px; padding: 0.46em 0.4em 0.4em 0.6em; }
.lk-embossed.at-you .lbl { font-size: 9px; }
.lc-embossed-black .lbl { background-color: #1c1c1d; }
.lc-embossed-red .lbl { background-color: #6e1d1b; }
.lc-embossed-blue .lbl { background-color: #1d3160; }
.lc-embossed-green .lbl { background-color: #1d4329; }
.lc-embossed-brown .lbl { background-color: #4a2f1e; }
.lc-embossed-gray .lbl { background-color: #38393c; }

/* b: a stationery-store sticker typed on a typewriter. faint ruled border, ribbon ink. */
.lk-typed .lbl {
  background-color: #f2eee1;
  color: #1b1814;
  font: 400 15px/1.05 'Special Elite', 'Courier New', monospace;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  padding: 0.5em 0.8em 0.42em;
  border-radius: 2px;
  box-shadow: 0 0 0 0.5px rgba(80, 66, 40, 0.28), 0 1px 1.4px rgba(70, 56, 30, 0.2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='60'><filter id='p' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .25  0 0 0 -.6 .36'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}
.lk-typed .lbl::after { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(88, 104, 128, 0.42); border-radius: 1px; pointer-events: none; }
.lk-typed .lt { filter: url(#ribbon); }
.lk-typed .sp { display: inline-block; inline-size: 0.55em; }
.lk-typed.two .lbl { line-height: 1.2; }
.lk-typed.at-own .lbl, .lk-typed.at-you .lbl { font-size: 12.5px; padding: 0.46em 0.62em 0.38em; }
.lk-typed.at-you .lbl { font-size: 11px; }
.lk-typed.at-own .lbl::after, .lk-typed.at-you .lbl::after { inset: 2.5px; }
.lc-typed-cream .lbl { background-color: #f2eee1; }
.lc-typed-manila .lbl { background-color: #e9dcb4; }
.lc-typed-pink .lbl { background-color: #eed9d2; }
.lc-typed-blue .lbl { background-color: #dbe2e8; }
.lc-typed-green .lbl { background-color: #dfe5d0; }

/* c: a thermal label printer. laminated tape, die-cut corners, blank lead and trail, printed in one pass. */
.lk-printer .lbl {
  background-color: #f6f5f0;
  color: #111;
  font: 500 14px/1 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  letter-spacing: 0.005em;
  text-transform: lowercase;
  padding: 0.46em 1.5em 0.44em 1.3em;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(172deg, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 70%, rgba(90, 90, 80, 0.07) 100%);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
  filter: drop-shadow(0 0.6px 0.6px rgba(40, 34, 24, 0.34));
}
.lk-printer.two .lbl { line-height: 1.2; }
.lk-printer.at-own .lbl, .lk-printer.at-you .lbl { font-size: 11.5px; padding: 0.44em 1em 0.42em 0.9em; }
.lk-printer.at-you .lbl { font-size: 10.5px; }
.lc-printer-white .lbl { background-color: #f6f5f0; }
.lc-printer-yellow .lbl { background-color: #ecdb86; }
.lc-printer-clear .lbl { background-color: rgba(246, 245, 240, 0.7); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18); }

/* --- spines: a shelf of faded cases, the title on a label down each one */
.spines { list-style: none; margin: 0; padding: 0 0 8px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 5px; border-bottom: 2px solid var(--rule); }
.spines li { display: block; }
.spine { position: relative; display: block; width: 46px; height: 216px; color: #d9d1bb; text-decoration: none; overflow: hidden; }
.spine::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .85  0 0 0 -.5 .22'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); pointer-events: none; }
.sp0 { background-color: #3d372e; height: 212px; }
.sp1 { background-color: #33373a; height: 220px; }
.sp2 { background-color: #4a3c31; height: 216px; }
.sp3 { background-color: #363b31; height: 224px; }
.sp4 { background-color: #403c38; height: 208px; }
.at-spine { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); max-width: none; max-height: calc(100% - 44px); }
.at-spine .lbl { writing-mode: vertical-rl; max-width: none; max-height: 100%; }
.lk-embossed.at-spine .lbl { font-size: 11px; padding: 0.7em 0.44em 0.55em 0.5em; clip-path: polygon(3% 0, 100% 0.5%, 97% 100%, 0 99.4%); }
.lk-typed.at-spine .lbl { font-size: 12.5px; padding: 0.8em 0.46em 0.62em; }
.lk-printer.at-spine .lbl { font-size: 12px; padding: 1.1em 0.44em 1.3em 0.46em; }
.spine .at-own, .spine .at-you { position: absolute; left: 50%; right: auto; bottom: 30px; transform: translateX(-50%); }
.spine .at-own .lbl, .spine .at-you .lbl { writing-mode: vertical-rl; --r: 0deg; }
.spine .at-you { bottom: 30px; }
.spine-year { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: 0.02em; color: #d9d1bb; }
.is-seen .spine::after { content: ''; position: absolute; inset: 0; background: var(--page); opacity: 0.45; }
.spine .x { z-index: 2; }

/* --- the plain list: text only, the fallback and the quiet view */
.plain { margin: 0; padding: 0 0 0 28px; max-width: 46rem; }
.plain li { margin: 0 0 18px; }
.plain .name { color: var(--ink); }
.plain .year { margin: 0 8px; }
.plain .is-seen .name, .plain li.is-seen > .name { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--rule); }
.plain .row { gap: 0 16px; margin-top: 2px; font-size: 13px; }
.plain .owned-form { gap: 0 12px; }
.plain .owned-form select { min-width: 0; }
.plain .where-out { margin: 0; }

/* --- the title sheet and the recs drawer: a sheet of the same paper. closed until targeted (no script) or opened (script). */
.sheet, .drawer { display: none; }
html:not(.js) .sheet:target, html:not(.js) .drawer:target, .sheet.open, .drawer.open { display: block; position: fixed; inset: 0; z-index: 50; }
.sheet-back { position: absolute; inset: 0; display: block; background: rgba(39, 35, 29, 0.42); }
.sheet-card {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; outline: none;
  background-color: var(--page);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -.15 .08'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  border-top: 1px solid var(--rule);
  padding: 24px 16px max(28px, env(safe-area-inset-bottom));
}
.sheet-card > * + * { margin-top: 14px; }
.sheet-head { display: flex; align-items: flex-start; gap: 18px; }
.sheet-poster { flex: none; width: 76px; }
.sheet-poster .poster { aspect-ratio: 2 / 3; }
.sheet-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.sheet-title h2 { color: var(--ink); }
.sheet-title .cover-meta { margin: 0; }
.sheet-close { margin-left: auto; flex: none; margin-top: -10px; }
.sheet-marks { display: flex; flex-wrap: wrap; gap: 0 28px; align-items: center; }
.seen-form { margin: 0; }
.owned-form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.owned-form select { min-width: 7rem; }
.sheet .why { margin-top: 18px; }
/* the search sheet: the member's tapes in a list that scrolls inside the sheet when there are many */
.pick h3 { margin: 0 0 4px; font-weight: normal; color: var(--dim); font-size: 12px; }
.pick-list { list-style: none; margin: 0; padding: 0; max-height: 34vh; overflow-y: auto; }
.pick-list form { margin: 0; }
.pick-list button { text-align: left; width: 100%; }
.pick-new { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.drawer .sheet-head { align-items: center; }
.drawer .sheet-head h2 { flex: 1; color: var(--ink); }
html.has-sheet { overflow: hidden; }

/* the curator's line, in the owner's hand, straight on the paper */
.why { margin: 0; font-size: 24px; line-height: 1.2; color: var(--marker-ink); overflow-wrap: anywhere; }
.why.hand, .note-body.hand { filter: url(#inks); -webkit-text-stroke: 0.032em var(--marker-ink); }

/* select mode: hold a cover, tap more, tape over them once */
.selectbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom)); background: var(--page); border-top: 1px solid var(--rule); }
.selectbar-count { flex: 1 1 8rem; }
html.selecting body { padding-bottom: 5rem; }
.selecting .cv, .selecting .spine { cursor: pointer; }
.is-picked .art, .is-picked .spine { outline: 2px solid var(--ink); outline-offset: 4px; }
.is-picked .art::before { content: ''; position: absolute; inset: 0; background: var(--page); opacity: 0.35; z-index: 1; }
.bulk { margin: 12px 0 0; }
.pick { margin-right: 10px; }
.tap { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.tap img { -webkit-user-drag: none; }

/* --- the owner's "how it sits" panel. plain words and label chips. every target is 44px or more. */
.sits { margin: 72px 0 0; max-width: 46rem; }
.sits h2 { margin-bottom: 8px; color: var(--ink); font-weight: 500; }
.sits-form { display: flex; flex-direction: column; gap: 22px; }
.sits fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.sits legend { padding: 0; color: var(--dim); margin-bottom: 2px; }
.sits-row, .seg { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; }
.seg-count { gap: 0 2px; }
.sits-pair { display: flex; flex-wrap: wrap; gap: 22px 56px; }
.sits .sits-row button { color: var(--dim); text-decoration-color: transparent; }
.sits .sits-row button:hover { text-decoration-color: var(--rule); }
.sits .sits-row button.is-on { color: var(--ink); text-decoration-color: currentColor; }
.seg-opt { position: relative; display: block; }
.seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-opt > span { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--dim); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; }
.seg-opt input:checked + span { color: var(--ink); text-decoration-color: currentColor; }
.seg-opt input:focus-visible + span, .chip input:focus-visible + .chip-face { outline: 2px solid var(--ink); outline-offset: 3px; }
.sits-form > button[type='submit'] { align-self: flex-start; }
/* label choices: each one is a small label of that maker and colour, the checked one has a line drawn under it */
.chips { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.chip-face { min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 6px 2px 10px; }
.chip-face::after { content: ''; display: block; width: 70%; height: 2px; margin-top: 7px; background: transparent; }
.chip input:checked + .chip-face::after { background: var(--ink); }
.label-colors { display: none; margin-top: 4px; }
.label-colors.for-embossed { display: block; }
.sits:has(input[name='label_type']:checked) .label-colors { display: none; }
.sits:has(input[name='label_type'][value='embossed']:checked) .for-embossed,
.sits:has(input[name='label_type'][value='typed']:checked) .for-typed,
.sits:has(input[name='label_type'][value='printer']:checked) .for-printer { display: block; }
.label-colors legend { margin-bottom: 0; }

/* --- notes: written straight on the page in each author's hand, handle and time small underneath */
.notes { margin: 96px 0 0; max-width: 960px; }
.notes > h2 { margin-bottom: 26px; }
.note-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; align-items: start; }
.note.is-hidden { opacity: 0.6; }
.note-body { margin: 0; max-width: none; color: var(--marker-ink); overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.22; padding-left: 14px; text-indent: -14px; }
.note-meta { margin: 10px 0 0; font-size: 12px; color: var(--dim); display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.note-meta .row { gap: 0 14px; }
.note-meta button, .note-meta .quiet { font-size: 12px; color: var(--dim); }
.note-form { display: flex; flex-direction: row; align-items: flex-end; gap: 24px; max-width: 520px; margin: 44px 0 0; }
.note-form textarea { flex: 1; width: auto; min-height: 44px; resize: none; field-sizing: content; max-height: 12em; }
.note-form .error { flex-basis: 100%; }
.note-form { flex-wrap: wrap; }
.notes-empty { margin-top: 0; }
.hand-covered-by-your-grace { font-family: 'Covered By Your Grace', cursive; font-size: 27px; }
.hand-just-another-hand { font-family: 'Just Another Hand', cursive; font-size: 33px; line-height: 1.05; }
.hand-nothing-you-could-do { font-family: 'Nothing You Could Do', cursive; font-size: 20px; line-height: 1.5; }
.hand-reenie-beanie { font-family: 'Reenie Beanie', cursive; font-size: 32px; line-height: 1.05; }
.hand-rock-salt { font-family: 'Rock Salt', cursive; font-size: 17px; line-height: 1.6; }
.why.hand-just-another-hand, .why.hand-reenie-beanie { font-size: 28px; }
.why.hand-nothing-you-could-do { font-size: 18px; }
.why.hand-rock-salt { font-size: 15px; }

/* --- lists of mixtapes: the names are mixtape titles, so they are on tape */
.section { margin-top: 64px; }
.section > h2 { margin-bottom: 20px; }
.shelf { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 26px 30px; }
.tape-name { font-size: 30px; --wob: 0.5; --td: 0.13em; padding: 0.18em 0.6em 0.1em; }
.tape-name .ink { filter: url(#inks); -webkit-text-stroke-width: 0.034em; }
.tape-by { margin-top: 6px; font-size: 12px; color: var(--dim); }
.lurked { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 30px 34px; }
.lurked li { display: flex; flex-direction: column; align-items: flex-start; }
.home-tools { margin: 48px 0 0; }
.home-tools { display: flex; flex-wrap: wrap; gap: 0 28px; }
.home-tools .btn { min-height: 44px; }

/* --- title grids: search, recs, a lineup, adding to a tape. covers with their label, the year under. */
.results { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 52px 28px; }
.result { min-width: 0; }
.result .cover-meta a { color: var(--ink); }
.result form, .result > .quiet { margin-top: 2px; display: block; }
.drawer .results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; }

/* --- where to watch and find a copy */
.where-btn { display: inline-flex; align-items: center; min-height: 44px; }
.where-out:empty { display: none; }
.where-result { margin: 8px 0 0; }
.where-result section + section { margin-top: 14px; }
.where-result h3 { margin: 0 0 2px; }
.where-result ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.where-result li a { min-height: 32px; display: inline-flex; align-items: center; }
.where-page .where-result ul { flex-direction: column; }
.services-list { list-style: none; margin: 8px 0 0; padding: 0; columns: 3 12rem; column-gap: 24px; }
.services-list li { break-inside: avoid; }
.services-list label, .fonts label { display: flex; align-items: center; min-height: 36px; cursor: pointer; }
/* no stacked margin in the columns: the first column would sit lower than the others */
.services-list label { margin-top: 0; min-height: 48px; }
fieldset.plainset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.plainset legend { padding: 0; color: var(--dim); }

/* --- settings */
.settings-block { margin-top: 56px; max-width: 46rem; }
.settings-block .stack { max-width: none; }
.fonts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fonts label { gap: 4px; }
.font-sample { color: var(--marker-ink); filter: url(#inks); -webkit-text-stroke: 0.032em var(--marker-ink); }
.font-name { font-size: 12px; color: var(--dim); margin-left: 12px; }

/* --- the edit page */
.edit-hero { padding-top: 40px; }
.edit-tools { margin-top: 18px; }
.edit-items { list-style: none; margin: 72px 0 0; padding: 0; max-width: 46rem; }
.edit-item { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--rule-soft); }
.edit-item .art { width: 56px; flex: none; align-self: flex-start; }
.edit-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.edit-body .name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.edit-body form.inline { display: flex; align-items: flex-end; gap: 16px; }
.edit-body form.inline input[type='text'] { flex: 1; min-width: 0; }
.edit-body .row { gap: 0 20px; }
.drag { cursor: grab; color: var(--dim); font-size: 12px; min-height: 30px; display: inline-flex; align-items: center; }
.sortable-ghost { opacity: 0.4; }
.add, .import { margin-top: 72px; max-width: 46rem; }
.add .results { margin-top: 40px; max-width: none; }
.add > h2, .import > h2 { margin-bottom: 4px; }
.import textarea { min-height: 9rem; border: 1px solid var(--rule-soft); border-bottom-color: var(--rule); padding: 10px; }

/* --- the import review */
.import-lines { list-style: none; margin: 24px 0 0; padding: 0; max-width: 46rem; }
.import-line { padding: 20px 0; border-bottom: 1px solid var(--rule-soft); }
.import-said { margin: 0 0 10px; color: var(--dim); }
.import-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.import-option label { display: flex; align-items: center; gap: 14px; min-height: 44px; cursor: pointer; }
.import-option .art { width: 40px; flex: none; }
.import-option .cover-meta { margin: 0; font-size: 14px; color: var(--ink); gap: 0 12px; }
.import-option input[type='radio'] { margin: 0; flex: none; }
.import-cancel { display: block; margin-top: 24px; }
.import-left { margin: 8px 0 20px; padding-left: 22px; }
.import-form .row { margin-top: 20px; }
.import-done h2 { color: var(--ink); margin-bottom: 8px; }

/* the recs link after the covers */
.more { margin: 64px 0 0; }
.more a { display: inline-flex; min-height: 44px; align-items: center; }
.plain .where-out { flex-basis: 100%; }
.message { margin-top: 56px; }
.prose p { max-width: 40rem; }
.prose h2 { margin: 28px 0 6px; }
.search-page { margin-top: 48px; }

/* --- lurking */
.lurk-count { color: var(--dim); }

/* --- the footer */
.bottom { margin: 120px 0 0; padding: 0 0 40px; font-size: 11px; color: var(--dim); }
.bottom p { display: inline; margin: 0 6px 0 0; max-width: none; }
.bottom a { color: var(--dim); }

/* --- the store (phase 15): the handle on tape, mixtapes as shelves, plain lists of people */
.hlink { color: inherit; }
.count { color: var(--dim); margin-left: 6px; }
.store-hero .tape-h { font-size: 108px; }
.tape-h.hl-2 .tape { font-size: 84px; }
.tape-h.hl-3 .tape { font-size: 64px; }
.tape-h.hl-4 .tape { font-size: 50px; }
.store-shelves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 80px; }
.store-shelf { display: flex; flex-direction: column; align-items: flex-start; }
.shelf-covers { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 148px); gap: 44px 24px; }
.shelf-covers .cover { min-width: 0; }
.people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.people li { display: flex; align-items: center; min-height: 44px; }
.people a, .top10-list a, .lurker-info a, .pool a { display: inline-flex; align-items: center; min-height: 36px; }
.top10-list { margin: 0; padding: 0 0 0 28px; }
.top10-list li { min-height: 44px; }
.store-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 56px; max-width: 52rem; align-items: start; }
.store-list > h2 { margin-bottom: 8px; }
.store-list p { margin: 4px 0 0; }
.lurker-info { list-style: none; margin: 8px 0 0; padding: 0; }
.lurker-info li { padding: 6px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.people-hits { margin-top: 0; margin-bottom: 56px; }
.pool { list-style: none; margin: 8px 0 0; padding: 0; max-width: 40rem; }
.pool li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; min-height: 48px; border-bottom: 1px solid var(--rule-soft); }
.pool li.is-private { opacity: 0.7; }
.pool form button { min-height: 44px; }
.top10-edit { margin-top: 8px; }
.top10-edit .edit-item { padding: 4px 0; }
.top10-edit .edit-body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 28px; }
.top10-edit .edit-body .name { min-width: 11rem; }

/* --- the drop box (phase 15): covers with their labels, who dropped each one, a plain line, the recipient's two actions */
.drop-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 52px 28px; }
.drop { min-width: 0; }
.drop-by { margin: 8px 0 0; }
.drop-line { margin: 6px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.drop-landed { margin: 4px 0 0; font-size: 12px; }
.drop-acts { margin-top: 6px; display: flex; flex-direction: column; align-items: flex-start; }
.drop-put { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; max-width: 100%; }
.drop-put select { max-width: 100%; min-width: 0; }
.drop-acts button { font-size: 13px; }
.drop-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.result .drop-link { font-size: 12px; color: var(--dim); }
.sheet .drop-link { font-size: inherit; color: var(--ink); }
.drop-title { display: flex; align-items: flex-end; gap: 0 20px; margin-bottom: 8px; }
.drop-one { list-style: none; margin: 0; padding: 0; width: 150px; flex: none; }
.drop-form { max-width: 34rem; }
.drop-pick { list-style: none; margin: 4px 0 0; padding: 0; }
.drop-pick li { min-height: 40px; display: flex; align-items: center; }

/* --- in-app news (phase 15): a strip of masking tape per unseen item, slapped on at a slight angle. the drop is the big one:
   the dropped cover with the strip across it. the count by your handle is a plain number. */
.top .news-n { color: var(--ink); }
.news-stack { margin-top: 40px; }
.news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 26px 44px; }
.news-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; max-width: 100%; min-width: 0; }
.tape-news { font-size: 21px; --wob: 0.5; --td: 0.12em; padding: 0.2em 0.65em 0.12em; max-width: min(100%, 36rem); }
.tape-news .ink { filter: url(#inks); -webkit-text-stroke-width: 0.034em; }
a.tape-news { display: inline-flex; align-items: center; min-height: 44px; }
.news-x button { font-size: 12px; color: var(--dim); }
.news-drop { padding: 8px 0 4px; flex-direction: column; align-items: flex-start; }
.news-drop .news-x { margin-top: 2px; }
.news-cover { position: relative; display: block; width: 150px; flex: none; color: inherit; text-decoration: none; margin-right: 26px; }
.news-cover .tape-news { position: absolute; left: -8%; width: 134%; bottom: 12%; font-size: 18px; max-width: none; text-align: center; z-index: 4; }
.news-acts { margin: 18px 0 0; }
.news-plain { list-style: none; margin: 18px 0 0; padding: 0; }
.news-plain li { padding: 8px 0; overflow-wrap: anywhere; }
.news-plain a { display: inline-flex; align-items: center; min-height: 32px; }

/* the one motion: a new strip settles onto the page, a hair of a drop and a tilt, over before you notice. */
@keyframes slap {
  from { transform: translateY(-9px) rotate(calc(var(--r, 0deg) * 2.6)) scale(1.05); opacity: 0.35; }
  to { transform: rotate(var(--r, 0deg)); opacity: 1; }
}
.news-item .tape { animation: slap 120ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards; }

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tape-h { font-size: 81px; }
  .tape-h .tape.len-2 { font-size: 62px; }
  .tape-h .tape.len-3 { font-size: 46px; }
  .store-hero .tape-h { font-size: 81px; }
  .tape-h.hl-2 .tape { font-size: 62px; }
  .tape-h.hl-3 .tape { font-size: 48px; }
  .tape-h.hl-4 .tape { font-size: 38px; }
  .shelf-covers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .top { min-height: 0; padding: 20px 0 0; flex-wrap: wrap; gap: 8px 20px; }
  .tape-logo { font-size: 28px; }
  .top .who { margin-left: auto; flex: 1 1 0; min-width: 0; justify-content: flex-end; }
  .top .who, .top .who form { gap: 0 14px; flex-wrap: nowrap; min-width: 0; }
  /* a long handle gives way (ellipsis) instead of pushing the header onto two lines */
  .top .who .handle { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 44px; }
  /* on a phone the handle is the way to settings, so the header stays one line */
  .top .who .nav-settings { display: none; }
  .top .search { order: 3; flex-basis: 100%; max-width: none; }
  .hero { padding-top: 44px; }
  .tape-h { font-size: 56px; line-height: 1.02; }
  .tape-h .tape.len-2 { font-size: 46px; }
  .tape-h .tape.len-3 { font-size: 34px; }
  .store-hero .tape-h { font-size: 56px; }
  .tape-h.hl-2 .tape { font-size: 46px; }
  .tape-h.hl-3 .tape { font-size: 36px; }
  .tape-h.hl-4 .tape { font-size: 28px; }
  .shelf-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; }
  .shelf-covers .cover:nth-child(n+5) { display: none; }
  .store-lists { grid-template-columns: 1fr; gap: 40px; }
  .store-shelves { gap: 64px; }
  .edit-hero .tape-h .tape { font-size: 40px; }
  .edit-hero .tape-h .tape.len-3 { font-size: 30px; }
  .meta { margin-top: 26px; gap: 2px 18px; font-size: 13px; }
  .acts { width: 100%; margin-top: 4px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; }
  .zones { margin-top: 12px; }
  .view-switch { margin-top: 40px; gap: 0 16px; }
  .at-cover { transform: translateX(calc(-50% + var(--dx, 0px) * 0.5)); }
  .lk-embossed .lbl { font-size: 13.5px; }
  .lk-embossed.at-own .lbl { font-size: 11px; }
  .lk-printer .lbl { font-size: 14.5px; }
  .lk-printer.at-own .lbl { font-size: 12px; }
  .lk-embossed.at-spine .lbl { font-size: 11px; }
  .lk-printer.at-spine .lbl { font-size: 12px; }
  .note-list { grid-template-columns: 1fr; gap: 32px; }
  .notes { margin-top: 64px; }
  .hand-covered-by-your-grace { font-size: 24px; }
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; }
  .tape-name { font-size: 26px; }
  .tape-news { font-size: 19px; }
  .news-cover { width: 132px; margin-right: 20px; }
  .news-list { gap: 22px 28px; }
  .news-cover .tape-news { font-size: 16px; }
  .drop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; }
  .sits-pair { gap: 18px 40px; }
  .selectbar { gap: 0 20px; }
  .page-h { margin: 40px 0 22px; }
  .bottom { margin-top: 72px; }
}

@media (min-width: 40rem) {
  .sheet-card { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(34rem, 92vw); border: 1px solid var(--rule); padding: 28px 28px 30px; }
}
@media (min-width: 48rem) {
  .drawer .sheet-card { left: auto; right: 0; top: 0; bottom: 0; transform: none; width: 26rem; max-height: none; border: 0; border-left: 1px solid var(--rule); }
  .drawer .sheet-back { background: rgba(39, 35, 29, 0.25); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .news-item .tape { animation: none; } }

/* generated:start (scripts/look-css.mjs) */
.tear0 { --tape: 227, 208, 165; --bx: 95px; --by: 70px; }
.tear0::before { clip-path: polygon(8.2% 0.57px,20.9% 1.03px,31.7% 0.7px,44.5% 0.32px,54.3% 0.14px,67.4% 1.02px,75.5% 0.35px,91.6% 0.94px,calc(100% - calc(var(--td) * 0)) 0%,calc(100% - calc(var(--td) * 0.276)) 4.8%,calc(100% - calc(var(--td) * 0.234)) 11.5%,calc(100% - calc(var(--td) * 0.943)) 17.1%,calc(100% - calc(var(--td) * 1.224)) 28.3%,calc(100% - calc(var(--td) * 1.462)) 32.7%,calc(100% - calc(var(--td) * 0.924)) 43.3%,calc(100% - calc(var(--td) * 0.403)) 47.5%,calc(100% - calc(var(--td) * 0.435)) 51.5%,calc(100% - calc(var(--td) * 0.715)) 55.2%,calc(100% - calc(var(--td) * 0.384)) 65.8%,calc(100% - calc(var(--td) * 1.058)) 72%,calc(100% - calc(var(--td) * 1.195)) 100%,86.2% calc(100% - 0.09px),64.3% calc(100% - 0.02px),48% calc(100% - 0.38px),34% calc(100% - 0.91px),18.7% calc(100% - 0.43px),calc(var(--td) * 1.085) 100%,calc(var(--td) * 0.277) 85.7%,calc(var(--td) * 0.142) 79.8%,calc(var(--td) * 1.234) 73.5%,calc(var(--td) * 1.634) 67.4%,calc(var(--td) * 0.742) 57.4%,calc(var(--td) * 0.316) 53%,calc(var(--td) * 0.797) 43.5%,calc(var(--td) * 0.959) 33.1%,calc(var(--td) * 0.734) 29.7%,calc(var(--td) * 0.494) 24.7%,calc(var(--td) * 1.958) 13.9%,calc(var(--td) * 1.103) 3.4%,calc(var(--td) * 1.14) 0%); }
.tear1 { --tape: 223, 205, 158; --bx: 174px; --by: 29px; }
.tear1::before { clip-path: polygon(19.2% 0.07px,42.2% 0.87px,60.9% 0.54px,81.7% 0.75px,calc(100% - calc(var(--td) * 0.084)) 0%,calc(100% - calc(var(--td) * 0.104)) 9.4%,calc(100% - calc(var(--td) * 0.689)) 21.5%,calc(100% - calc(var(--td) * 0.939)) 29.2%,calc(100% - calc(var(--td) * 0.766)) 40.9%,calc(100% - calc(var(--td) * 0.995)) 52%,calc(100% - calc(var(--td) * 0.736)) 59.5%,calc(100% - calc(var(--td) * 0.509)) 63%,calc(100% - calc(var(--td) * 0.83)) 70.9%,calc(100% - calc(var(--td) * 1.021)) 79.7%,calc(100% - calc(var(--td) * 0.788)) 88.7%,calc(100% - calc(var(--td) * 0.465)) 95.2%,calc(100% - calc(var(--td) * 1.2)) 100%,91.6% calc(100% - 0.19px),75.1% calc(100% - 1.03px),65.8% calc(100% - 0.45px),54.6% calc(100% - 0.38px),47.1% calc(100% - 0.94px),35.8% calc(100% - 0.78px),20.2% calc(100% - 0.28px),11.7% calc(100% - 0.95px),calc(var(--td) * 0.998) 100%,calc(var(--td) * 0.231) 94.1%,calc(var(--td) * 0.178) 84.2%,calc(var(--td) * 1.303) 77.1%,calc(var(--td) * 0.69) 73.2%,calc(var(--td) * 0.412) 66.9%,calc(var(--td) * 1.556) 55.9%,calc(var(--td) * 1.257) 50.8%,calc(var(--td) * 0.397) 41.1%,calc(var(--td) * 0.629) 32.7%,calc(var(--td) * 0.716) 28.9%,calc(var(--td) * 0.439) 20.2%,calc(var(--td) * 0.349) 11.6%,calc(var(--td) * 0.787) 7.4%,calc(var(--td) * 0.224) 0%); }
.tear2 { --tape: 224, 205, 163; --bx: 196px; --by: 94px; }
.tear2::before { clip-path: polygon(14.4% 0.19px,23.9% 0.11px,34.5% 0.04px,47.8% 0.68px,59.5% 0.35px,74.8% 0.74px,88% 0.47px,calc(100% - calc(var(--td) * 0.264)) 0%,calc(100% - calc(var(--td) * 0.805)) 4%,calc(100% - calc(var(--td) * 0.184)) 11.4%,calc(100% - calc(var(--td) * 0.426)) 21.3%,calc(100% - calc(var(--td) * 0.354)) 33.5%,calc(100% - calc(var(--td) * 0.769)) 41.4%,calc(100% - calc(var(--td) * 0.702)) 45.7%,calc(100% - calc(var(--td) * 1.443)) 58.5%,calc(100% - calc(var(--td) * 1.235)) 70.2%,calc(100% - calc(var(--td) * 1.126)) 74.3%,calc(100% - calc(var(--td) * 0.496)) 81.5%,calc(100% - calc(var(--td) * 0.408)) 88.4%,calc(100% - calc(var(--td) * 0.96)) 100%,87.2% calc(100% - 0.87px),75.3% calc(100% - 1.01px),62% calc(100% - 0.5px),48.2% calc(100% - 0.35px),36.7% calc(100% - 0.08px),22.3% calc(100% - 0.14px),9.8% calc(100% - 0.37px),calc(var(--td) * 0.353) 100%,calc(var(--td) * 0.571) 88.1%,calc(var(--td) * 0.252) 76.2%,calc(var(--td) * 0.189) 66.5%,calc(var(--td) * 1.17) 54.3%,calc(var(--td) * 0.556) 48.2%,calc(var(--td) * 0.082) 35.2%,calc(var(--td) * 0.523) 24.5%,calc(var(--td) * 0.584) 19.4%,calc(var(--td) * 0.605) 10.9%,calc(var(--td) * 0.772) 0%); }
.tear3 { --tape: 228, 210, 166; --bx: 164px; --by: 12px; }
.tear3::before { clip-path: polygon(14.2% 0.54px,29% 0.06px,42% 0px,60% 0.34px,70.1% 0.89px,85.9% 0.87px,calc(100% - calc(var(--td) * 0.443)) 0%,calc(100% - calc(var(--td) * 0.596)) 8.5%,calc(100% - calc(var(--td) * 0.551)) 21.3%,calc(100% - calc(var(--td) * 0.766)) 33.4%,calc(100% - calc(var(--td) * 0.791)) 46%,calc(100% - calc(var(--td) * 0.521)) 50.8%,calc(100% - calc(var(--td) * 1.117)) 61.8%,calc(100% - calc(var(--td) * 0.646)) 74%,calc(100% - calc(var(--td) * 0.226)) 79.6%,calc(100% - calc(var(--td) * 0.684)) 88.8%,calc(100% - calc(var(--td) * 0.117)) 94.4%,calc(100% - calc(var(--td) * 0.134)) 99.5%,calc(100% - calc(var(--td) * 0.131)) 100%,82.5% calc(100% - 0.8px),65.5% calc(100% - 0.74px),47.8% calc(100% - 0.49px),34% calc(100% - 0.24px),17.4% calc(100% - 0.52px),calc(var(--td) * 1.126) 100%,calc(var(--td) * 1.61) 99.5%,calc(var(--td) * 0.654) 93.4%,calc(var(--td) * 1.735) 86.9%,calc(var(--td) * 1.395) 84.4%,calc(var(--td) * 1.343) 75.9%,calc(var(--td) * 1.111) 67.2%,calc(var(--td) * 1.588) 58.5%,calc(var(--td) * 0.899) 48.8%,calc(var(--td) * 1.567) 43.1%,calc(var(--td) * 2.029) 38.9%,calc(var(--td) * 1.01) 34%,calc(var(--td) * 1.104) 27.6%,calc(var(--td) * 1.016) 20.2%,calc(var(--td) * 1.931) 14.2%,calc(var(--td) * 1.593) 4.8%,calc(var(--td) * 0.813) 0%); }
.tear4 { --tape: 228, 210, 166; --bx: 112px; --by: 57px; }
.tear4::before { clip-path: polygon(14.2% 0.83px,22.5% 0.43px,38.1% 0.66px,49.3% 0.91px,59.7% 0.62px,77.8% 0.45px,84.6% 0.81px,calc(100% - calc(var(--td) * 0.623)) 0%,calc(100% - calc(var(--td) * 0.516)) 13.1%,calc(100% - calc(var(--td) * 1.208)) 21.2%,calc(100% - calc(var(--td) * 0.638)) 25.5%,calc(100% - calc(var(--td) * 0.925)) 38.6%,calc(100% - calc(var(--td) * 0.944)) 50.1%,calc(100% - calc(var(--td) * 1.346)) 58%,calc(100% - calc(var(--td) * 1.114)) 69.5%,calc(100% - calc(var(--td) * 0.969)) 78.9%,calc(100% - calc(var(--td) * 1.195)) 83.3%,calc(100% - calc(var(--td) * 1.324)) 87.2%,calc(100% - calc(var(--td) * 1.381)) 94.8%,calc(100% - calc(var(--td) * 0.814)) 100%,88.5% calc(100% - 0.86px),77.2% calc(100% - 0.49px),60.1% calc(100% - 0.75px),48.4% calc(100% - 0.63px),37.6% calc(100% - 0.86px),23% calc(100% - 0.04px),13.9% calc(100% - 0.65px),calc(var(--td) * 0.752) 100%,calc(var(--td) * 1.044) 97.1%,calc(var(--td) * 1.08) 84.8%,calc(var(--td) * 1.698) 80%,calc(var(--td) * 0.815) 74.8%,calc(var(--td) * 0.667) 65.6%,calc(var(--td) * 1.057) 56%,calc(var(--td) * 1.572) 52.1%,calc(var(--td) * 1.104) 40.2%,calc(var(--td) * 0.467) 28.6%,calc(var(--td) * 0.605) 22.3%,calc(var(--td) * 1.001) 14.1%,calc(var(--td) * 1.199) 7.5%,calc(var(--td) * 0.469) 0%); }
.tear5 { --tape: 225, 207, 163; --bx: 163px; --by: 4px; }
.tear5::before { clip-path: polygon(15.5% 0.68px,34.4% 0.04px,49.3% 0.8px,64.4% 0.24px,81.7% 0.3px,calc(100% - calc(var(--td) * 0.803)) 0%,calc(100% - calc(var(--td) * 1.203)) 7.7%,calc(100% - calc(var(--td) * 0.709)) 11.1%,calc(100% - calc(var(--td) * 1.045)) 17.6%,calc(100% - calc(var(--td) * 0.546)) 21.2%,calc(100% - calc(var(--td) * 0.751)) 29.5%,calc(100% - calc(var(--td) * 0.445)) 34.1%,calc(100% - calc(var(--td) * 0.454)) 45%,calc(100% - calc(var(--td) * 1.57)) 58.2%,calc(100% - calc(var(--td) * 0.788)) 67.8%,calc(100% - calc(var(--td) * 0.481)) 80%,calc(100% - calc(var(--td) * 1.081)) 88%,calc(100% - calc(var(--td) * 1.508)) 100%,89.8% calc(100% - 0.64px),75.9% calc(100% - 0.37px),63.9% calc(100% - 0.34px),58.3% calc(100% - 0.07px),46.7% calc(100% - 0.2px),30.7% calc(100% - 0.91px),25.1% calc(100% - 0.5px),13.3% calc(100% - 0.4px),calc(var(--td) * 0.359) 100%,calc(var(--td) * 0) 82.8%,calc(var(--td) * 1.036) 77.9%,calc(var(--td) * 0.38) 69%,calc(var(--td) * 1.337) 60.6%,calc(var(--td) * 0.474) 48.4%,calc(var(--td) * 0.468) 43.2%,calc(var(--td) * 0) 31.3%,calc(var(--td) * 0.519) 24%,calc(var(--td) * 0.513) 18.7%,calc(var(--td) * 0.192) 13.1%,calc(var(--td) * 0.72) 7.8%,calc(var(--td) * 0.576) 0%); }
.tear6 { --tape: 222, 205, 158; --bx: 119px; --by: 85px; }
.tear6::before { clip-path: polygon(10.2% 0.65px,26.9% 0.07px,38.7% 0.75px,47.8% 0.83px,62.6% 0.98px,74.1% 0.05px,84.7% 0.8px,calc(100% - calc(var(--td) * 0.612)) 0%,calc(100% - calc(var(--td) * 0.373)) 12.3%,calc(100% - calc(var(--td) * 0.887)) 21%,calc(100% - calc(var(--td) * 0.355)) 29.8%,calc(100% - calc(var(--td) * 0)) 33.8%,calc(100% - calc(var(--td) * 0.489)) 38.9%,calc(100% - calc(var(--td) * 0)) 50.3%,calc(100% - calc(var(--td) * 1.218)) 60.5%,calc(100% - calc(var(--td) * 0.129)) 67.6%,calc(100% - calc(var(--td) * 0.238)) 72.4%,calc(100% - calc(var(--td) * 0.392)) 82.9%,calc(100% - calc(var(--td) * 0.213)) 91.2%,calc(100% - calc(var(--td) * 0.885)) 100%,87.6% calc(100% - 0.78px),73.5% calc(100% - 0.39px),60.4% calc(100% - 1.02px),50% calc(100% - 0.12px),35.1% calc(100% - 0.21px),27% calc(100% - 0.15px),10.1% calc(100% - 0.6px),calc(var(--td) * 0.205) 100%,calc(var(--td) * 0) 93.1%,calc(var(--td) * 0.243) 88.7%,calc(var(--td) * 0.725) 83.3%,calc(var(--td) * 0.715) 73.8%,calc(var(--td) * 0.369) 68.3%,calc(var(--td) * 0.393) 62.2%,calc(var(--td) * 0.49) 50.8%,calc(var(--td) * 0.503) 40.5%,calc(var(--td) * 1.469) 36.2%,calc(var(--td) * 0.32) 27%,calc(var(--td) * 0.479) 18.2%,calc(var(--td) * 2.013) 7.4%,calc(var(--td) * 0.564) 0%); }
.tear7 { --tape: 227, 210, 162; --bx: 49px; --by: 24px; }
.tear7::before { clip-path: polygon(8.8% 0.59px,21.6% 0.22px,30.6% 0.43px,45.3% 0.24px,53.7% 0.35px,67.1% 0.14px,75.5% 0.34px,86.5% 0.88px,calc(100% - calc(var(--td) * 0.162)) 0%,calc(100% - calc(var(--td) * 0)) 6.9%,calc(100% - calc(var(--td) * 0)) 10.9%,calc(100% - calc(var(--td) * 0.706)) 21.9%,calc(100% - calc(var(--td) * 0.813)) 26.3%,calc(100% - calc(var(--td) * 0)) 38.2%,calc(100% - calc(var(--td) * 0.51)) 46.4%,calc(100% - calc(var(--td) * 0)) 56%,calc(100% - calc(var(--td) * 0.123)) 66.9%,calc(100% - calc(var(--td) * 0)) 76.9%,calc(100% - calc(var(--td) * 0)) 85.7%,calc(100% - calc(var(--td) * 0.133)) 94.3%,calc(100% - calc(var(--td) * 0.15)) 100%,89.2% calc(100% - 0.12px),72.1% calc(100% - 0.92px),61.9% calc(100% - 0.76px),50.9% calc(100% - 0.87px),37.3% calc(100% - 0.09px),28% calc(100% - 0.14px),11.9% calc(100% - 0.77px),calc(var(--td) * 0.246) 100%,calc(var(--td) * 1.048) 87.6%,calc(var(--td) * 0.566) 83.6%,calc(var(--td) * 0.868) 76.2%,calc(var(--td) * 1.361) 67.5%,calc(var(--td) * 0.46) 60.9%,calc(var(--td) * 0.917) 56.1%,calc(var(--td) * 0.482) 53%,calc(var(--td) * 0.641) 47.4%,calc(var(--td) * 0.951) 43.6%,calc(var(--td) * 1.01) 37.8%,calc(var(--td) * 1.086) 33%,calc(var(--td) * 1.071) 24.4%,calc(var(--td) * 1.143) 13.7%,calc(var(--td) * 0.763) 7.4%,calc(var(--td) * 1.155) 0%); }
.tr0 { --r: -2deg; }
.tr1 { --r: -1deg; }
.tr2 { --r: 0deg; }
.tr3 { --r: 1deg; }
.tr4 { --r: 2deg; }
.s0 { transform: translateY(calc(var(--wob) * -0.016em)) rotate(calc(var(--wob) * -4.48deg)) skewX(calc(var(--wob) * -3.87deg)) scale(calc(1 + var(--wob) * 0.013)); }
.s1 { transform: translateY(calc(var(--wob) * -0.026em)) rotate(calc(var(--wob) * -2.54deg)) skewX(calc(var(--wob) * -2.15deg)) scale(calc(1 + var(--wob) * 0.05)); }
.s2 { transform: translateY(calc(var(--wob) * 0.026em)) rotate(calc(var(--wob) * -3.99deg)) skewX(calc(var(--wob) * 0.22deg)) scale(calc(1 + var(--wob) * 0.041)); }
.s3 { transform: translateY(calc(var(--wob) * 0.001em)) rotate(calc(var(--wob) * 0.56deg)) skewX(calc(var(--wob) * -1.78deg)) scale(calc(1 + var(--wob) * -0.045)); }
.s4 { transform: translateY(calc(var(--wob) * 0.037em)) rotate(calc(var(--wob) * 0.99deg)) skewX(calc(var(--wob) * 3.87deg)) scale(calc(1 + var(--wob) * -0.017)); }
.s5 { transform: translateY(calc(var(--wob) * 0.026em)) rotate(calc(var(--wob) * 1.58deg)) skewX(calc(var(--wob) * 2.75deg)) scale(calc(1 + var(--wob) * -0.043)); }
.s6 { transform: translateY(calc(var(--wob) * -0.015em)) rotate(calc(var(--wob) * 2.54deg)) skewX(calc(var(--wob) * -1.71deg)) scale(calc(1 + var(--wob) * 0.023)); }
.s7 { transform: translateY(calc(var(--wob) * 0.03em)) rotate(calc(var(--wob) * -1.46deg)) skewX(calc(var(--wob) * -0.84deg)) scale(calc(1 + var(--wob) * 0.045)); }
.s8 { transform: translateY(calc(var(--wob) * 0.035em)) rotate(calc(var(--wob) * -0.66deg)) skewX(calc(var(--wob) * 1.17deg)) scale(calc(1 + var(--wob) * 0.004)); }
.s9 { transform: translateY(calc(var(--wob) * -0.033em)) rotate(calc(var(--wob) * -3.11deg)) skewX(calc(var(--wob) * -2.12deg)) scale(calc(1 + var(--wob) * 0.019)); }
.s10 { transform: translateY(calc(var(--wob) * -0.015em)) rotate(calc(var(--wob) * -0.08deg)) skewX(calc(var(--wob) * 0.65deg)) scale(calc(1 + var(--wob) * -0.037)); }
.s11 { transform: translateY(calc(var(--wob) * -0.004em)) rotate(calc(var(--wob) * -0.14deg)) skewX(calc(var(--wob) * -0.14deg)) scale(calc(1 + var(--wob) * -0.01)); }
.wl0 { transform: skewX(calc(var(--wob) * 1.76deg)); }
.wl1 { transform: skewX(calc(var(--wob) * 1.05deg)); }
.wl2 { transform: skewX(calc(var(--wob) * 0.42deg)); }
.wl3 { transform: skewX(calc(var(--wob) * -1.02deg)); }
.lk-embossed .j0 { transform: translateY(-0.024em) rotate(1.1deg); opacity: 0.8; }
.lk-embossed .j1 { transform: translateY(-0.012em) rotate(0.3deg); opacity: 0.87; }
.lk-embossed .j2 { transform: translateY(0.029em) rotate(0.6deg); opacity: 0.8; }
.lk-embossed .j3 { transform: translateY(0.003em) rotate(-0.5deg); opacity: 0.75; }
.lk-embossed .j4 { transform: translateY(-0.032em) rotate(-0.2deg); opacity: 0.75; }
.lk-embossed .j5 { transform: translateY(0.044em) rotate(0.7deg); opacity: 0.82; }
.lk-embossed .j6 { transform: translateY(-0.022em) rotate(-0.1deg); opacity: 0.82; }
.lk-embossed .j7 { transform: translateY(0.016em) rotate(0.7deg); opacity: 0.9; }
.lk-typed .j0 { transform: translate(0.002em, -0.03em) rotate(-1deg); opacity: 0.84; }
.lk-typed .j1 { transform: translate(-0.004em, 0.027em) rotate(0.7deg); opacity: 0.74; }
.lk-typed .j2 { transform: translate(-0.003em, 0.014em) rotate(1.2deg); opacity: 0.74; }
.lk-typed .j3 { transform: translate(-0.011em, -0.033em) rotate(1.1deg); opacity: 0.95; }
.lk-typed .j4 { transform: translate(0.018em, -0.032em) rotate(-0.1deg); opacity: 0.83; }
.lk-typed .j5 { transform: translate(0.009em, 0.028em) rotate(0.8deg); opacity: 0.78; }
.lk-typed .j6 { transform: translate(-0.017em, 0.001em) rotate(-0.5deg); opacity: 0.86; }
.lk-typed .j7 { transform: translate(0.018em, -0.003em) rotate(-1deg); opacity: 0.76; }
.lr0 { --r: -1.6deg; }
.lr1 { --r: -1.2deg; }
.lr2 { --r: -0.8deg; }
.lr3 { --r: -0.4deg; }
.lr4 { --r: 0deg; }
.lr5 { --r: 0.4deg; }
.lr6 { --r: 0.8deg; }
.lr7 { --r: 1.2deg; }
.lr8 { --r: 1.6deg; }
.ld0 { --dx: -12px; }
.ld1 { --dx: -6px; }
.ld2 { --dx: 0px; }
.ld3 { --dx: 6px; }
.ld4 { --dx: 12px; }
.cr0 { --cr: -0.9deg; }
.cr1 { --cr: -0.45deg; }
.cr2 { --cr: 0deg; }
.cr3 { --cr: 0.45deg; }
.cr4 { --cr: 0.9deg; }
.cy0 { --cdy: 0px; }
.cy1 { --cdy: 2px; }
.cy2 { --cdy: 4px; }
.cy3 { --cdy: 6px; }
/* generated:end */