/* The Vault+ Liberated. Same grammar as /liberationday and /theend:
   black field, Yeezy for headings and labels, the system face for anything
   you read, hairlines for structure, red for numerals, underlines and the one
   primary action. No cards, no glass, no icon badges.
   Motion: one settle on arrival, an opening row, a button that says what it
   is doing. Hover states are hard cuts. */

@font-face {
  font-family: 'Yeezy';
  src: url('/liberationday/assets/yeezy-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --red: #ff0000;
  --ink: #fff;
  --ink-70: rgba(255, 255, 255, .68);  /* 9.6:1 on black, text you read */
  --ink-50: rgba(255, 255, 255, .46);  /* 5:1, labels and small print */
  --ink-30: rgba(255, 255, 255, .3);   /* marks only, never text */
  --ink-12: rgba(255, 255, 255, .12);  /* hairline */
  --ink-07: rgba(255, 255, 255, .07);  /* hairline inside a block */
  --ink-04: rgba(255, 255, 255, .04);
  --display: 'Yeezy', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max: 920px;
  --gutter: clamp(20px, 4vw, 40px);
  --r-l: 14px; --r-m: 12px; --r-s: 10px;
  --settle: cubic-bezier(.16, .84, .24, 1);
  --move: cubic-bezier(.2, .7, .2, 1);
  --bar-h: 56px;
  --ctl: 40px; /* every control is this tall */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); background: #000; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; color: var(--ink); overflow-x: clip;
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
/* the field: a red glow over the top of the page with static grain baked in.
   One fixed layer under everything, never blended over the list. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; transform: translateZ(0);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(110% 60% at 50% -8%, rgba(255, 0, 0, .42) 0%, rgba(255, 0, 0, .12) 40%, transparent 68%);
}
::selection { background: #fff; color: #000; }
a { color: inherit; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .22em; }
h1, h2, h3, h4, p, ul, ol, dl, dd, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.i { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: -999px; top: 10px; z-index: 99; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 10px; }

/* ── glass: the one surface. Fill, blur, top highlight, rim brighter top-left.
   Only on a handful of boxes, never on the long list. ── */
.glass {
  position: relative; isolation: isolate; border-radius: var(--r-l);
  background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .06));
  -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.06); backdrop-filter: blur(18px) saturate(180%) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 40px -22px rgba(0, 0, 0, .9);
}
.glass::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .07) 38%, rgba(255, 255, 255, .03) 62%, rgba(255, 255, 255, .18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* the micro label: the only small caps on the page */
.kicker { font: 700 .66rem/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }
.kicker i { font-style: normal; padding: 0 .35em; color: var(--ink-30); }
.kicker b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* ── bar ── */
.bar {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  height: var(--bar-h); padding: 0 max(var(--gutter), calc((100% - var(--max)) / 2));
  background: none; border: 0; pointer-events: none;
}
.bar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; font: 700 .7rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.brand img { width: auto; height: 14px; display: block; }
.brand b { font-weight: 700; color: var(--ink-50); padding-left: 10px; border-left: 1px solid var(--ink-30); line-height: 14px; }
.bar__out { justify-self: end; margin: 0; }
.bar__out button, .bar__link {
  display: inline-grid; place-items: center; height: var(--bar-h); padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none;
  font: 700 .66rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); white-space: nowrap;
}
.bar__out button:hover, .bar__link:hover { color: #fff; }

/* ── tabs: text, with the red underline marking where you are ── */
.tabs { display: inline-flex; align-items: stretch; gap: clamp(18px, 3vw, 30px); }
.tabs > a, .tabs > button {
  position: relative; display: grid; place-items: center; height: var(--ctl); padding: 0; background: none; border: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  font: 700 .66rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50);
}
.tabs > a:hover, .tabs > button:hover { color: #fff; }
.tabs > [aria-current], .tabs > [aria-pressed="true"] { color: #fff; }
.tabs > [aria-current]::after, .tabs > [aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--red); }
.tabs--nav > a { height: var(--bar-h); }
.tabs--nav > [aria-current]::after { bottom: -1px; }

/* ── page ── */
main { width: min(var(--max), 100% - 2 * var(--gutter)); margin: 0 auto; padding-bottom: 24px; }
.top { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: clamp(36px, 7vw, 72px) 0 clamp(28px, 4vw, 44px); text-align: center; }
.top h1 { font: 700 clamp(2rem, 6.4vw, 3.6rem)/.94 var(--display); letter-spacing: -.015em; word-spacing: -.06em; text-transform: uppercase; text-wrap: balance; }
.top h1 img { display: block; width: min(640px, 82vw); height: auto; margin: 0 auto; }   /* the white wordmark (2026-09-24): wide, so it needs more width than the old stacked scribble */
/* the wall: the bubbles from the logged-out pop splash behind the logo, darker in the middle so the logo reads,
   gone by the time the page starts */
.top--wall { position: relative; padding-top: clamp(64px, 11vw, 120px); padding-bottom: clamp(24px, 4vw, 44px); }   /* tighter under the elegy (owner, 2026-09-25: huge gap) */
.top--wall > :not(.wall) { position: relative; }
.wall {
  position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden;
  -webkit-mask-image: radial-gradient(64% 72% at 50% 46%, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .75) 62%, #000 100%), linear-gradient(#000 60%, transparent 100%);
  mask-image: radial-gradient(64% 72% at 50% 46%, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .75) 62%, #000 100%), linear-gradient(#000 60%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.wall__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.top--wall .top__line { color: #fff; }
/* the inscription under the logo: what this was, who made it, when, and what has become of it. set like lettering on a
   stone: a tracked capital line, a short red rule, then two quiet sentences. no selling, no features */
.elegy { display: grid; justify-items: center; gap: 10px; max-width: 46ch; margin-top: 6px; text-align: center; }
.elegy p { margin: 0; font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.5; color: #fff; text-wrap: balance; }
.elegy .elegy__head { font: 700 clamp(.78rem, 1.5vw, .95rem)/1.5 var(--display); letter-spacing: .24em; text-transform: uppercase; }
.elegy .elegy__head::after { content: ""; display: block; width: 36px; height: 2px; margin: 16px auto 8px; background: var(--red); }
.elegy .elegy__last { color: var(--ink-70); }
.door .elegy p { font-size: 1.05rem; color: #fff; } .door .elegy .elegy__head { font-size: .86rem; } .door .elegy .elegy__last { color: var(--ink-70); }
.top__line { max-width: 44ch; font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.5; color: var(--ink-70); text-wrap: pretty; }

.notice { display: flex; align-items: flex-start; gap: 16px; max-width: 720px; margin: calc(-1 * clamp(12px, 3vw, 32px)) auto 0; padding: 18px 22px; }
.notice__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-s); background: #fff; color: #000; font-size: 1.15rem; }
.notice__ic .i { stroke-width: 2.2; }
.notice p { align-self: center; font-size: .94rem; line-height: 1.55; color: var(--ink-70); text-wrap: pretty; }
.notice b { color: #fff; font-weight: 600; }
.notice__terms { display: block; margin-top: 4px; font-size: .84rem; color: var(--ink-50); }

/* ── section: heading left, micro label right, one hairline under both ── */
.sec, .g { padding-top: clamp(40px, 7vw, 76px); }
.sec__head { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--ink-12); }
.sec__head h2 { font: 700 clamp(1.4rem, 3.6vw, 2rem)/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
/* every section title wears a red star each side, like the pop footer's separators (owner, 2026-09-24) */
.sec__head h2::before, .sec__head h2::after { content: "\2605"; color: var(--red); font-size: .62em; vertical-align: .18em; }
.sec__head h2::before { margin-right: .55em; }
.sec__head h2::after { margin-left: .55em; }
.sec__head .kicker { text-align: right; flex: none; }
/* on the list, that hairline is also the ticked-off meter */
.have__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.have__bar span { display: block; height: 100%; background: #fff; transform: scaleX(var(--have, 0)); transform-origin: left center; }
.have__note { padding-top: 14px; font-size: .84rem; color: var(--ink-50); }

/* ── get everything: ONE composition of three boxes on one grid. the torrent is the wide red field (the one thing most people
   want); the catalogue and the licence are two equal glass boxes under it. every box has the same padding, the same radius and
   the same inner order: number, title, words, then the action LEFT-aligned at the foot with its small print beside it. nothing
   is centred under anything, and every box's edges line up with the section's hairline ── */
/* (the old two-column ladder and its rungs were retired 2026-09-24; the cards below replace them) */
.flow i { font: 700 .66rem/1 var(--display); font-style: normal; letter-spacing: .1em; color: var(--red); font-variant-numeric: tabular-nums; }

.rung--field .btn--ink { background: #000; color: #fff; box-shadow: none; }
.rung--field .btn--line, .rung--field .btn--line[aria-disabled="true"] { background: none; color: #000; box-shadow: inset 0 0 0 1.5px #000; }
.rung--field .btn:hover { background: #fff; color: #000; box-shadow: none; }
.rung--field .btn--line[aria-disabled="true"]:hover { background: none; box-shadow: inset 0 0 0 1.5px #000; }

/* ── buttons: one red, the rest outlined, all the same height, hover is a cut to white ── */
.btn, .dl {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: var(--ctl); padding: 0 16px;
  border: 0; border-radius: var(--r-s); cursor: pointer; text-decoration: none; white-space: nowrap;
  color: #fff; background: none; box-shadow: inset 0 0 0 1px var(--ink-30);
}
.btn { font: 700 .68rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.btn > .i, .btn .dl__ic, .btn .dl__ic .i { width: 18px; height: 18px; }
.btn--primary { background: var(--red); box-shadow: none; }
.btn:hover, .dl:hover, .dl:focus-visible { background: #fff; color: #000; box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: default; color: var(--ink-30); background: none; box-shadow: inset 0 0 0 1px var(--ink-12); }
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { color: var(--ink-30); background: none; box-shadow: inset 0 0 0 1px var(--ink-12); }
.btn:active:not([disabled]), .dl:active { transform: scale(.97); }

/* download control: arrow, ring while asking the server, tick once the browser has it */
.dl { width: 118px; padding: 0 14px 0 11px; justify-content: flex-start; gap: 8px; font: 500 .82rem/1 var(--body); font-variant-numeric: tabular-nums; }
.dl [data-label] { margin-left: auto; }                      /* sizes line up down their right edge */
.dl--ghost { width: 70px; padding: 0 10px 0 8px; gap: 6px; box-shadow: inset 0 0 0 1px var(--ink-12); color: var(--ink-70); }
.dl--ghost [data-label] { margin-left: 0; }
.dl--off, .dl--off:hover { justify-content: center; color: var(--ink-30); background: none; box-shadow: inset 0 0 0 1px var(--ink-12); cursor: default; }
.dl__ic { position: relative; width: 20px; height: 20px; flex: none; }
.dl__ic .i { position: absolute; inset: 0; width: 20px; height: 20px; }
.i--ring, .i--check { opacity: 0; }
.i--check { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-width: 2.4; }
[aria-busy="true"] { pointer-events: none; }
[aria-busy="true"] .i--rest, .is-started .i--rest { opacity: 0; }
[aria-busy="true"] .i--ring { opacity: 1; animation: spin .7s linear infinite; }
.is-started, .is-started:hover { background: #fff; color: #000; box-shadow: none; }
.is-started .i--check { opacity: 1; stroke-dashoffset: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── tools: one row of controls, all outlined the same way ── */
.tools { display: grid; grid-template-columns: minmax(160px, 1fr) auto auto auto; gap: 8px clamp(14px, 2.4vw, 24px); align-items: center; padding: 18px 0; border-bottom: 1px solid var(--ink-12); }
.field, .select { position: relative; display: flex; align-items: center; height: var(--ctl); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--ink-12); color: var(--ink-50); }
.field { gap: 9px; padding: 0 12px; }
.field:focus-within, .select:focus-within { box-shadow: inset 0 0 0 1px #fff; color: #fff; }
.field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: #fff; font-size: .95rem; }
.field input::placeholder { color: var(--ink-50); }
.field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.select select { height: 100%; max-width: 190px; padding: 0 34px 0 14px; border: 0; outline: 0; background: none; color: #fff; font-size: .9rem; -webkit-appearance: none; appearance: none; cursor: pointer; }
.select select option { color: #000; }
.select .i { position: absolute; right: 10px; pointer-events: none; }
.check { display: inline-flex; align-items: center; gap: 9px; min-height: var(--ctl); font-size: .88rem; color: var(--ink-70); cursor: pointer; white-space: nowrap; }
.check input { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; background: center / 14px no-repeat; box-shadow: inset 0 0 0 1px var(--ink-30); cursor: pointer; }
.check input:checked { background-color: #fff; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.8 4.4 4.4L19 7.4' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* the count sits inside the right end of the search box */
.tools .field { grid-area: 1 / 1; padding-right: 96px; }
.tools__count { grid-area: 1 / 1; justify-self: end; padding-right: 14px; font-size: .8rem; color: var(--ink-50); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }

/* ── list: hairlines between rows, nothing around them ── */
.row { position: relative; border-bottom: 1px solid var(--ink-07); content-visibility: auto; contain-intrinsic-size: auto 81px; }
.row[hidden] { display: none; }
.row summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) 196px 14px; align-items: center; gap: 16px; padding: 12px 0; cursor: pointer; list-style: none; }
/* columns, the same on every row, audio or video: cover / words / room for the controls / the plus at the far right edge.
   the controls sit in that room (absolutely placed, so they are not inside the clickable summary): [info, video only] [download] */
.row__plus { grid-column: 4; }
.row summary::-webkit-details-marker { display: none; }
.row summary:hover .row__title { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.row summary:focus-visible { outline-offset: -2px; }
.thumb { position: relative; width: 56px; height: 56px; border-radius: 10px; background: var(--ink-07); display: grid; place-items: center; color: var(--ink-30); }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.thumb__done { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; border-radius: 6px; background: #fff; color: #000; display: none; place-items: center; font-size: 10px; box-shadow: 0 0 0 2px #000; }
.thumb__done .i { stroke-width: 3.2; stroke-dasharray: none; }
.row.is-done .thumb__done { display: grid; }
.row.is-done .row__title { color: var(--ink-70); }
.row__text { min-width: 0; display: grid; gap: 3px; }
.row__title { font-weight: 600; font-size: .96rem; line-height: 1.25; }
.row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: .8rem; line-height: 1.3; color: var(--ink-50); }
.row__meta .i { font-size: .85rem; color: var(--red); margin-right: -5px; }
.row__size { display: none; }
/* the family's plus: open turns it to a minus, as a cut */
.row__plus { position: relative; width: 14px; height: 14px; color: var(--ink-50); }
.row__plus::before, .row__plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor; }
.row__plus::after { transform: rotate(90deg); }
details[open] .row__plus { color: #fff; }
details[open] .row__plus::after { display: none; }
.row__act { position: absolute; top: 20px; right: 30px; display: flex; justify-content: flex-end; gap: 8px; width: 196px; }

.more { padding: 6px 0 26px 72px; display: grid; gap: 16px; max-width: 760px; }
.more__desc { font-size: .92rem; line-height: 1.6; color: var(--ink-70); max-width: 64ch; }
.more__hint { font-size: .82rem; color: var(--ink-50); }
.tracks { counter-reset: t; font-size: .88rem; border-top: 1px solid var(--ink-07); }
.tracks li { counter-increment: t; display: grid; grid-template-columns: 2em 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ink-07); color: var(--ink-70); }
.tracks li::before { content: counter(t, decimal-leading-zero); font: 700 .62rem/2.2 var(--display); letter-spacing: .1em; color: var(--red); }
.tracks li span:last-child { color: var(--ink-50); white-space: nowrap; font-variant-numeric: tabular-nums; }
.facts { display: grid; gap: 8px; font-size: .86rem; }
.facts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
.facts dt { color: var(--ink-50); }
.facts dd { color: var(--ink-70); }
.na { color: var(--ink-50); }
.hash { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hash code { font: .74rem/1.5 var(--mono); word-break: break-all; -webkit-user-select: all; user-select: all; }
.copy { height: 24px; padding: 0 9px; border: 0; border-radius: 6px; background: none; box-shadow: inset 0 0 0 1px var(--ink-30); font-size: .74rem; color: #fff; cursor: pointer; }
.copy:hover { background: #fff; color: #000; box-shadow: none; }
.check--mine { justify-self: start; min-height: 0; }
.row__error { margin: 0 0 16px 72px; padding: 10px 14px; border-radius: var(--r-s); font-size: .86rem; color: #fff; box-shadow: inset 0 0 0 1px var(--red); }
.row__error[hidden] { display: none; }
/* a failed download inside one of the top boxes: the message takes its own full line under the button. (it is a <p>, so the
   boxes' paragraph colour has to be beaten; and on the red field a red outline is invisible, so there it is black) */
.rung .rung__act .row__error { flex: 1 1 100%; margin: 0; max-width: none; white-space: normal; color: #fff; font-size: .84rem; }
.rung.rung--field .rung__act .row__error { flex: none; color: #000; box-shadow: inset 0 0 0 1.5px #000; }

.state { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 56px 20px; text-align: center; color: var(--ink-50); border-bottom: 1px solid var(--ink-07); }
.state[hidden] { display: none; }
.state--error { color: #fff; margin-top: 40px; border: 0; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--red); }

/* ── guide ── */
.top--text h1 { font-size: clamp(2.2rem, 7vw, 4.2rem); }
.guide { padding-bottom: 24px; }
.g > p, .g > .two, .g > .media, .g > .prov, .g > .flow { margin-top: 22px; }
.g > p { max-width: 60ch; color: var(--ink-70); }
.g b { color: #fff; font-weight: 600; }
.g .fine, .fine { font-size: .84rem; color: var(--ink-50); max-width: 70ch; }
.g h3 { font: 700 1.02rem/1.25 var(--display); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }

.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px clamp(16px, 3vw, 32px); }
.flow li { display: grid; gap: 6px; align-content: start; padding: 20px; font-size: .88rem; line-height: 1.45; color: var(--ink-70); }
.flow li + li::before { content: ""; position: absolute; top: 50%; left: calc(-1 * clamp(16px, 3vw, 32px) + 4px); width: calc(clamp(16px, 3vw, 32px) - 8px); height: 2px; background: var(--red); }
.flow__ic, .media__ic { display: block; font-size: 2.6rem; line-height: 0; color: #fff; }
.flow__ic { margin: 14px 0 12px; }
.media__ic { margin-bottom: 16px; }
.flow__ic .i, .media__ic .i { stroke-width: 1.4; }
.flow b { font: 700 .92rem/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }

.media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.media > section { padding: 24px 22px; font-size: .9rem; }
.media p { color: var(--ink-70); }
.media ul, .rules { display: grid; gap: 8px; color: var(--ink-70); }
.media ul { margin-top: 14px; }
.media li, .rules li, .terms li, .lic ul li { position: relative; padding-left: 1.4em; }
.media li::before, .rules li::before, .terms li::before, .lic ul li::before { content: ""; position: absolute; left: 0; top: .78em; width: .7em; height: 2px; background: var(--ink-30); }
.media__more { margin-top: 16px; font-size: .86rem; }

.prov { font-size: .92rem; overflow: hidden; }
.prov li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 13px 20px; border-top: 1px solid var(--ink-07); }
.prov li:first-child { border-top: 0; }
.prov a { font-weight: 600; }
.prov span { color: var(--ink-70); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.rules { font-size: .94rem; }
.tree, .cmd { font: .8rem/1.6 var(--mono); padding: 20px; color: var(--ink-70); overflow-x: auto; white-space: pre; overflow-wrap: normal; }
.cmd { margin-top: 22px; color: #fff; max-width: 560px; }
.cmd span { display: block; margin: 14px 0 4px; font: 700 .62rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }
.cmd span:first-child { margin-top: 0; }

/* footer: pop's own partial, pop's own rules */
.site-foot { margin-top: clamp(48px, 8vw, 96px); padding: 1.5rem 1.5rem 1rem; border-top: 1px solid var(--ink-07); position: relative; z-index: 1; }
.footer-inner { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.footer-links { display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; justify-content: center; }
.footer-links .footer-sep { color: var(--red); font-size: 1.2rem; line-height: 1; opacity: .9; user-select: none; }
.footer-links a { display: flex; align-items: center; justify-content: center; opacity: .4; }
.footer-links a:hover { opacity: .7; }
.footer-links img { width: 20px; height: 20px; object-fit: contain; }
.footer-links .x-link svg { width: 16px; height: 16px; fill: #fff; }
.footer-links a.wordmark img { width: auto; height: 12px; }
.footer-links a.wordmark--goonbate img { height: 15px; }
.footer-links a.wordmark--cult img { height: 16px; }
.footer-links a.wordmark--haus img { height: 11px; }       /* the Haus logo: one line of Franklin caps, sized to sit level with The Vault+ mark */
.footer-links a.wordmark sup { font-size: 8px; color: #fff; line-height: 1; margin-left: 1px; align-self: flex-start; }
.footer-copy { font: 700 .6rem/1.5 var(--display); color: rgba(255, 255, 255, .25); text-align: center; letter-spacing: .02em; }
.footer-copy a { color: rgba(255, 255, 255, .3); text-decoration: none; }
.footer-copy a:hover { color: rgba(255, 255, 255, .5); }
.footer-copy .copy-sep { color: var(--red); font-size: .55rem; display: inline-block; margin: 0 .45rem; vertical-align: 1px; opacity: .85; user-select: none; }

/* licence page */
.lic { max-width: 760px; padding-top: clamp(32px, 6vw, 56px); }
.lic__get { margin-bottom: 36px; }
.lic h1 { font: 700 clamp(1.7rem, 5vw, 2.6rem)/.96 var(--display); letter-spacing: -.015em; text-transform: uppercase; margin: 0 0 8px; }
.lic h2 { font: 700 1.05rem/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; margin: 44px 0 14px; padding-top: 24px; border-top: 1px solid var(--ink-12); }
.lic h1 + h2 { margin-top: 0; padding-top: 0; border: 0; color: var(--ink-70); }
.lic h3, .lic h4 { font: 700 .66rem/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; margin: 30px 0 10px; color: var(--ink-50); }
.lic p, .lic li { color: var(--ink-70); font-size: .97rem; line-height: 1.6; }
.lic p { margin: 0 0 14px; }
.lic strong { color: #fff; font-weight: 600; }
.lic ul, .lic ol { margin: 0 0 16px; display: grid; gap: 6px; }
.lic ol { list-style: decimal; padding-left: 22px; }
.lic__table { overflow-x: auto; margin: 0 0 16px; border-top: 1px solid var(--ink-12); }
.lic table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.lic th { text-align: left; padding: 12px 16px 12px 0; font: 700 .62rem/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }
.lic td { padding: 10px 16px 10px 0; border-top: 1px solid var(--ink-07); color: var(--ink-70); }
.lic tr.no td:last-child strong { color: var(--red); }

/* terms gate: the box stays sharp, a short strip of what is waiting sits blurred behind it */
.terms { z-index: 2; max-width: 760px; margin: calc(-1 * clamp(20px, 4vw, 48px)) auto 18px; padding: clamp(22px, 4vw, 32px); }
.locked .notice { margin-top: 0; }
.terms .sec__head h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
.terms ul { display: grid; gap: 10px; margin: 20px 0 22px; color: var(--ink-70); font-size: .95rem; line-height: 1.5; }
.terms .check { min-height: 0; color: #fff; white-space: normal; align-items: flex-start; line-height: 1.35; }
.terms .check input { margin-top: 1px; }
.terms__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; font-size: .88rem; color: var(--ink-70); }
.locked .behind {
  max-height: 420px; overflow: hidden; filter: blur(7px); opacity: .9;
  -webkit-mask-image: linear-gradient(#000 35%, transparent 96%); mask-image: linear-gradient(#000 35%, transparent 96%);
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
.locked main { padding-bottom: 0; }

/* ── host mode (thevault.locker): the way in, and the gates. one glass box, the same width and padding as the terms box, sharp
   above the blurred strip. numbered steps use the red numerals of the boxes above; hairlines between them, nothing around them ── */
.host.locked .notice { position: relative; z-index: 2; margin: calc(-1 * clamp(12px, 3vw, 32px)) auto 14px; }
.host .terms { margin-top: 0; }
.notice--next { margin-top: 12px; }
/* HOW TO GET IN (locked page) and the three steps: the Guide's card language, so the whole site reads as one thing.
   numbered glass cards with a drawn icon and red connectors; two "know this" cards; the way in is the red field */
.getin { position: relative; z-index: 2; }
/* (second pass, owner: "too many boxes". the six steps are ONE ruled list, no cards: red numeral, drawn icon, title, a line.
   the two things to know are plain text under a hairline. the only box left is the red one, which is the action) */
.path { margin-top: 6px; }
.path li { display: grid; grid-template-columns: 2.4em 44px minmax(0, 1fr); align-items: center; gap: 0 14px; padding: 16px 0; border-bottom: 1px solid var(--ink-07); }
.path li > i { font: 700 .66rem/1 var(--display); font-style: normal; letter-spacing: .1em; color: var(--red); font-variant-numeric: tabular-nums; }
.path__ic { display: block; font-size: 2rem; line-height: 0; color: #fff; }
.path__ic .i { stroke-width: 1.4; }
.path div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; gap: 2px 20px; }
.path b { font: 700 .92rem/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.path div > span { font-size: .92rem; line-height: 1.5; color: var(--ink-70); }
.path div > span b { font: inherit; text-transform: none; letter-spacing: 0; color: #fff; font-weight: 600; }
.path a { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .2em; white-space: nowrap; }
.path a:hover { color: var(--red); }
.path__label { margin-top: 34px; padding-bottom: 12px; border-bottom: 1px solid var(--ink-12); font: 700 .66rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }
.path--know { margin-top: 0; }
/* exactly the steps' own columns (the number column is left empty), so icons, titles and lines stand in the same three
   straight lines as the steps above. the label sits over the title column's left edge like everything else */
.path--know .path__ic { color: var(--red); }
/* the role, shown the way Discord shows one: a red pill with a slow shine across it */
.rolechip { display: inline-flex; align-items: center; gap: .45em; padding: .16em .7em .18em .55em; border-radius: 999px; vertical-align: baseline; white-space: nowrap;
  font: 700 .82em/1.3 var(--body); letter-spacing: 0; text-transform: none; color: #fff;
  background: linear-gradient(110deg, #c40000 0%, #ff0000 38%, #ff6a6a 50%, #ff0000 62%, #c40000 100%) 0 0 / 250% 100%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 0 18px -4px rgba(255, 0, 0, .8); }
.rolechip::before { content: ""; width: .62em; height: .62em; border-radius: 50%; background: #fff; }
.rung--field .rolechip { background: #000; box-shadow: none; }
.rolechip--bar { font-size: .68rem; animation: none; flex: none; }
.rolechip--legacy { background: #fff; color: #000; box-shadow: none; } .rolechip--legacy::before { background: var(--red); }
@media (prefers-reduced-motion: no-preference) { .rolechip { animation: chip 3.6s linear infinite; } @keyframes chip { to { background-position: -250% 0; } } }

/* INSIDE: real covers and their names on the locked page, wider than the text column. the first row is sharp and each row
   under it is softer. NOTHING is laid over it (an overlay showed as a box with hard edges): the covers themselves are blurred
   row by row, and the grid is faded out with a mask, so what shows through at the bottom is the page's own background */
.peek { position: relative; z-index: 1; width: min(1320px, 100vw - 2 * var(--gutter)); left: 50%; transform: translateX(-50%); margin-top: clamp(44px, 7vw, 80px); }
.peek .sec__head { width: min(var(--max), 100%); margin: 0 auto; }
.peek__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 22px 16px; margin-top: 24px; padding: 0 2px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 26%, rgba(0, 0, 0, .55) 58%, transparent 94%); mask-image: linear-gradient(to bottom, #000 0%, #000 26%, rgba(0, 0, 0, .55) 58%, transparent 94%); }
.peek__grid li { display: grid; gap: 9px; align-content: start; min-width: 0; }
.peek__grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-s); background: var(--ink-07); }
.peek__grid span { font-size: .8rem; font-weight: 600; line-height: 1.3; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peek__grid li:nth-child(n+9) { filter: blur(1.5px); opacity: 0.95; }
.peek__grid li:nth-child(n+17) { filter: blur(5px); opacity: 0.8; }
.peek__grid li:nth-child(n+25) { filter: blur(11px); opacity: 0.6; }
.peek__grid li:nth-child(n+33) { filter: blur(18px); opacity: 0.4; }
.peek__grid li:nth-child(n+33) { display: none; }      /* four rows: the fifth only made an empty gap before the footer */
.host.locked:has(.peek) .site-foot { margin-top: 12px; }
.peek__more { position: absolute; left: 0; right: 0; bottom: 9%; z-index: 2; margin: 0; text-align: center; font: 700 clamp(1rem, 2.2vw, 1.35rem)/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 18px #000, 0 0 40px #000; }
.host.locked:has(.peek) .behind { display: none; }      /* the grid replaces the made-up rows */
.host.locked:has(.peek) main { padding-bottom: 0; }

.getin__go { margin-top: 28px; }
.getin__go .rung__act form { margin: 0; display: grid; }
.getin__go .btn .i { width: 18px; height: 18px; }

.terms .stepper li { padding-left: 0; } .terms .stepper li::before { content: none; display: none; }      /* the licence box styles its own list items with a dash: not these */
.stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.stepper li { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; padding-bottom: 12px; border-bottom: 2px solid var(--ink-12); color: var(--ink-50); }
.stepper b { font: 700 .62rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.stepper__ic { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-30); font-size: .8rem; }
.stepper__ic .i { width: 15px; height: 15px; stroke-width: 2.4; }
.stepper .is-now { color: #fff; border-bottom-color: var(--red); }
.stepper .is-now .stepper__ic { background: var(--red); color: #000; box-shadow: none; }
.stepper .is-done { color: var(--ink-70); border-bottom-color: var(--ink-30); }
.stepper .is-done .stepper__ic { background: #fff; color: #000; box-shadow: none; }
.panel__ic { margin: 0 0 14px; color: var(--red); font-size: 3rem; }
.panel__checks--rows { gap: 0; border-top: 1px solid var(--ink-07); }
.panel__checks--rows .check { padding: 14px 0; border-bottom: 1px solid var(--ink-07); }
.notice--next .notice__ic .i { stroke-width: 2.6; }

.panel { z-index: 2; max-width: 760px; margin: 0 auto 18px; padding: clamp(22px, 4vw, 32px); }
.panel .sec__head h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
.steps li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--ink-07); }
.steps .rung__n { margin: 0; }
.steps p, .panel__lead, .panel__rules p { font-size: .95rem; line-height: 1.5; color: var(--ink-70); text-wrap: pretty; }
.steps b, .panel__who b { color: #fff; font-weight: 600; }
.steps a:hover { color: var(--red); }
.panel__lead { margin-top: 20px; }
.panel__rules { display: grid; gap: 10px; margin-top: 20px; padding-left: 14px; border-left: 2px solid var(--red); }
.panel__rules p { color: #fff; }
.panel__checks { display: grid; gap: 14px; margin-top: 22px; }
.panel .check { min-height: 0; color: #fff; white-space: normal; align-items: flex-start; line-height: 1.35; }
.panel .check input { margin-top: 1px; }
.panel__msg { margin-top: 18px; padding: 10px 14px; border-radius: var(--r-s); font-size: .88rem; line-height: 1.45; color: #fff; box-shadow: inset 0 0 0 1px var(--red); }
.panel__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; }
.panel__act form { margin: 0; }
.panel__act .btn { height: 44px; }
.panel__who { font-size: .84rem; color: var(--ink-50); }
.dob { display: flex; gap: 10px; margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.dob label { display: grid; gap: 6px; }
.dob span { font: 700 .62rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }
.dob input { width: 68px; height: 48px; padding: 0; border: 0; outline: 0; border-radius: var(--r-s); background: none; box-shadow: inset 0 0 0 1px var(--ink-30); text-align: center; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: #fff; }
.dob label:last-child input { width: 92px; }
.dob input::placeholder { color: var(--ink-30); }
.dob input:focus { box-shadow: inset 0 0 0 1px #fff; }
form.bar__out { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bar__who { min-width: 0; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--ink-70); }

/* ── widths ── */
@media (max-width: 900px) {
  .tools { grid-template-columns: auto 1fr auto; }
  .tools .field, .tools__count { grid-area: 1 / 1 / 2 / -1; }
  .tools .check { justify-self: end; }
  .media, .two { grid-template-columns: 1fr; }
  .flow li + li::before { display: none; }
  .media > section { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 20px; }
  .media > section > * { grid-column: 2; }
  .media > section > .media__ic { grid-column: 1; grid-row: 1 / span 4; margin: 2px 0 0; }
  .flow { grid-template-columns: 1fr 1fr; gap: 12px; }
  .peek__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .peek__grid li:nth-child(n) { filter: none; opacity: 1; }
  .peek__grid li:nth-child(n+6) { filter: blur(1.5px); opacity: 0.95; }
  .peek__grid li:nth-child(n+11) { filter: blur(5px); opacity: 0.8; }
  .peek__grid li:nth-child(n+16) { filter: blur(11px); opacity: 0.6; }
  .peek__grid li:nth-child(n+21) { filter: blur(18px); opacity: 0.4; }
}
@media (max-width: 780px) {
  .rung--field { grid-template-columns: minmax(0, 1fr) 210px; gap: 20px 24px; }
}
@media (max-width: 620px) {
  :root { --bar-h: 48px; }
  .tabs--nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; border-top: 1px solid var(--ink-07); margin: 0 calc(-1 * var(--gutter)); }
  .tabs--nav > a { height: 44px; }
  html { scroll-padding-top: 108px; }
  .sec__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sec__head .kicker { text-align: left; }
  .sec__head h2 { line-height: 1.15; }
  .sec__head h2::before, .sec__head h2::after { font-size: .55em; }
  .ladder { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rung { --pad: 20px; gap: 18px; }
  .rung--field { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rung__act .btn { flex: 1 1 100%; height: 48px; }
  .rung--field .rung__act .btn { flex: none; }      /* (that column is a stack: a flex basis of 100% there means height, and squashed them flat) */
  .tools { grid-template-columns: 1fr auto; }
  .tools .select { grid-column: 1 / -1; grid-row: 3; }
  .tools .check { grid-row: 2; grid-column: 2; }
  .select select { max-width: none; width: 100%; }
  .row summary { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px 100px 12px 0; }      /* the same room on every row: two 40px controls and their gap */
  .thumb { width: 44px; height: 44px; }
  .row__plus { display: none; }
  .row__size { display: inline; }
  .row__act { top: 14px; right: 0; width: 88px; }
  .dl, .dl--ghost { min-width: 0; width: var(--ctl); padding: 0; justify-content: center; }
  .dl [data-label] { display: none; }
  .dl--off { width: auto; padding: 0 10px; font-size: .74rem; }
  .more { padding: 0 0 22px; }
  .row__error { margin-left: 0; }
  .flow { grid-template-columns: 1fr; gap: 10px; }
  .flow li { grid-template-columns: 52px 1fr; gap: 2px 14px; padding: 16px; }
  .flow i { display: none; }
  .flow__ic { grid-row: 1 / span 2; margin: 0; align-self: center; font-size: 2.3rem; }
  .notice { padding: 16px; gap: 12px; }
  .media > section { grid-template-columns: 1fr; padding: 20px 18px; }
  .media > section > *, .media > section > .media__ic { grid-column: 1; grid-row: auto; }
  .media > section > .media__ic { margin-bottom: 14px; }
  .prov li { grid-template-columns: 1fr; gap: 2px; }
  .path li { grid-template-columns: 2em 36px minmax(0, 1fr); align-items: start; } .path__ic { font-size: 1.7rem; margin-top: 4px; }
  .path div { grid-template-columns: 1fr; }
  .peek__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .peek__grid li:nth-child(n+16) { display: none; }
  .peek__grid li:nth-child(n) { filter: none; opacity: 1; }
  .peek__grid li:nth-child(n+4) { filter: blur(1.5px); opacity: 0.95; }
  .peek__grid li:nth-child(n+7) { filter: blur(5px); opacity: 0.8; }
  .peek__grid li:nth-child(n+10) { filter: blur(11px); opacity: 0.6; }
  .peek__grid li:nth-child(n+13) { filter: blur(18px); opacity: 0.4; }

  .stepper b { display: none; } .stepper li.is-now b { display: inline; }
  .panel__act .btn, .panel__act form { flex: 1 1 100%; }
  .panel__act form .btn { width: 100%; }
  .bar__who { max-width: 12ch; }
  .host.locked .bar > span:empty { display: none; }
}
@media (max-width: 480px) {
  .bar__who { display: none; }      /* no room beside the wordmark. the locked page says the name in its panel */
  .rolechip--bar { display: none; }
}

/* ── motion ── */
@media (prefers-reduced-motion: no-preference) {
  .top { animation: settle 1.1s var(--settle) both; }
  @keyframes settle { from { opacity: 0; transform: translateY(12px); } }
  .dl__ic .i { transition: opacity .2s var(--move), stroke-dashoffset .45s var(--settle) .08s; }
  .have__bar span { transition: transform .6s var(--settle); }
  .btn, .dl { transition: transform .2s var(--move); }

  /* opening rows, where the browser can animate to auto height */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .row details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .42s var(--settle), opacity .3s var(--move), content-visibility .42s allow-discrete; }
    .row details[open]::details-content { block-size: auto; opacity: 1; }
  }
}

/* the owner's test bar (private preview only; never rendered for anyone else) */
.testbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: #111; border-top: 2px solid var(--red); font: 600 .74rem/1 var(--body); }
.testbar b { margin-right: 6px; font: 700 .62rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.testbar button { height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: #fff; box-shadow: inset 0 0 0 1px var(--ink-30); font: inherit; cursor: pointer; }
.testbar button:hover { background: #fff; color: #000; }
.testbar button[aria-pressed="true"] { background: var(--red); color: #000; box-shadow: none; }
body:has(.testbar) { padding-bottom: 96px; }


/* ── Using the torrent: four steps beside a working example of a torrent app's file list.
   The window is the one glass box; rows are plain. Unticked rows fall back to the small-print alpha, ticked rows are white. ── */
.tguide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 clamp(24px, 4vw, 48px); align-items: start; margin-top: 22px; }
.tsteps { margin-top: 0; }
.tsteps li:first-child { padding-top: 4px; }
.tsteps div { grid-template-columns: 1fr; gap: 4px; }
.tsteps a { white-space: normal; }
.tpick { margin: 0; position: sticky; top: calc(var(--bar-h) + 20px); }
.tpick__win { overflow: hidden; font-size: .86rem; }
.tpick__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--ink-07); }
.tpick__bar b { font-weight: 600; font-size: .8rem; color: var(--ink-70); }
.tpick__dots { display: flex; gap: 6px; }
.tpick__dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-30); }
.tpick__head, .tf__row label, label.tf__row { display: grid; grid-template-columns: 18px 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.tpick__head { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 16px 8px 90px; border-bottom: 1px solid var(--ink-07); font: 700 .6rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }
.tpick__tree { padding: 6px 0; }
.tf__row { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 6px; min-height: 36px; padding: 0 16px 0 10px; }
.tf__row label, label.tf__row { cursor: pointer; min-height: 36px; }
label.tf__row { padding-left: 46px; grid-template-columns: 18px 16px minmax(0, 1fr) auto; }
.tf__chev { width: 20px; height: 28px; padding: 0; border: 0; background: none; color: var(--ink-50); cursor: pointer; display: grid; place-items: center; }
.tf__chev .i { transform: rotate(-90deg); }
.tf__chev[aria-expanded="true"] .i { transform: none; }
.tf__chev:hover { color: #fff; }
.tf__ic { width: 16px; height: 16px; color: var(--ink-50); }
.tf__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; opacity: .5; filter: grayscale(1); }      /* unticked: dimmed, emoji greyed, so the pick reads at a glance */
.tf__size { color: var(--ink-50); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .8rem; }
.tf__row:hover .tf__name { opacity: .75; }
.tpick input { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 5px; background: center / 13px no-repeat; box-shadow: inset 0 0 0 1px var(--ink-30); cursor: pointer; }
.tpick input:checked { background-color: #fff; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.8 4.4 4.4L19 7.4' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tpick input:indeterminate { background-color: #fff; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12h11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.tf__row:has(input:checked) .tf__name, .tf__row:has(input:indeterminate) .tf__name { opacity: 1; filter: none; }
.tf__row:has(input:checked) .tf__ic, .tf__row:has(input:indeterminate) .tf__ic { color: #fff; }
.tf__row:has(input:checked) .tf__size, .tf__row:has(input:indeterminate) .tf__size { color: var(--ink-70); }
.tpick__foot { display: grid; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid var(--ink-07); }
.tpick__foot p { font-size: .84rem; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.tpick__foot b { color: #fff; font-weight: 600; }
.tpick__meter { display: block; height: 2px; background: var(--ink-12); }
.tpick__meter i { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: left; transform: scaleX(max(var(--sel, 0), .004)); }
.tpick figcaption { margin-top: 12px; font-size: .8rem; line-height: 1.45; color: var(--ink-50); }
.g > .tguide + .fine { margin-top: 26px; }
@media (max-width: 900px) {
  .tguide { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tpick { position: static; }
}
@media (max-width: 620px) {
  .tf__row { padding-right: 12px; padding-left: 6px; }
  label.tf__row { padding-left: 38px; }
  .tpick__head { padding-left: 86px; padding-right: 12px; }
  .tpick__win { font-size: .82rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .tpick__meter i { transition: transform .45s var(--settle); }
}
/* torrent file vs magnet link: two plain columns under one hairline, drawn icon above each */
.tkinds { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--ink-12); }
.tkinds__two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px clamp(24px, 4vw, 48px); }
.tkinds__two p { font-size: .92rem; line-height: 1.55; color: var(--ink-70); max-width: 44ch; }
.tkinds__ic { display: block; font-size: 2rem; line-height: 0; color: #fff; margin-bottom: 12px; }
.tkinds__ic .i { stroke-width: 1.4; }
.tkinds .fine { margin-top: 16px; }
@media (max-width: 620px) { .tkinds__two { grid-template-columns: 1fr; } }
/* keep sharing: the guide's one red field, black ink, a drawn network with "you" in the middle */
.share { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 20px clamp(24px, 5vw, 56px); margin-top: 36px; padding: clamp(22px, 4vw, 34px); border-radius: var(--r-l); background: var(--red); color: #000; }
.share h3 { color: #000; }
.share p { max-width: 52ch; font-size: .95rem; line-height: 1.55; color: rgba(0, 0, 0, .78); }
.share p + p { margin-top: 12px; }
.share b { color: #000; font-weight: 700; }
.share__net { width: 100%; height: auto; overflow: visible; }
.share__lines { fill: none; stroke: #000; stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.share__dots { fill: var(--red); stroke: #000; stroke-width: 1.8; }
.share__you { fill: #000; }
.share__net text { font: 700 9px/1 var(--display); letter-spacing: .2em; fill: #000; }
@media (max-width: 620px) {
  .share { grid-template-columns: 1fr; }
  .share__net { max-width: 220px; }
}

/* ── kit: real products on light plates (store photos are black on transparent, so they need a shelf to stand on) ── */
.kit { display: grid; gap: 14px; margin-top: 26px; }
.kit--two { grid-template-columns: 1fr 1fr; }
.kit--three { grid-template-columns: repeat(3, 1fr); }
.item { display: flex; flex-direction: column; padding: 14px 14px 18px; font-size: .9rem; }
.item__plate { position: relative; aspect-ratio: 16 / 10; margin-bottom: 16px; border-radius: var(--r-m); background: radial-gradient(120% 90% at 50% 30%, #fbfbfb 0%, #e9e9e9 60%, #d9d9d9 100%); overflow: hidden; }
.item__plate img { position: absolute; inset: 11%; width: 78%; height: 78%; object-fit: contain; }
.item > *:not(.item__plate) { padding: 0 6px; }
.item__tier { font: 700 .62rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 8px; }
.item__tier--premium, .item__tier--pick { color: var(--red); }
.item h3 { margin-bottom: 4px; }
.item__name { color: var(--ink-70); font-size: .86rem; }
.item__facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; }
.item__facts div { display: grid; gap: 3px; }
.item__facts dt { font: 700 .58rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); }
.item__facts dd { margin: 0; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.item__line { margin-top: 14px; color: var(--ink-70); line-height: 1.5; }
.item > .buy { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding: 18px 6px 0; }
.buy__btn { display: inline-flex; align-items: baseline; gap: 6px; height: 34px; align-items: center; padding: 0 11px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ink-30); text-decoration: none; font-size: .8rem; color: #fff; white-space: nowrap; }
.buy__btn b { font: 700 .62rem/1 var(--display); letter-spacing: .14em; }
.buy__btn span { color: var(--ink-70); font-variant-numeric: tabular-nums; }
.buy__btn.is-here { background: var(--red); box-shadow: none; }
.buy__btn.is-here span { color: #fff; }
.buy__btn:hover, .buy__btn.is-here:hover { background: #fff; color: #000; box-shadow: none; }
.buy__btn:hover span { color: #000; }
.item__note { margin-top: 10px; font-size: .76rem; color: var(--ink-50); }

.plug { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 22px; }
.plug p { max-width: 58ch; color: var(--ink-70); font-size: .92rem; }
.plug__art { width: 100%; height: auto; }
.plug__cord { fill: none; stroke: var(--ink-30); stroke-width: 6; stroke-linecap: round; }
.plug__body { fill: none; stroke: #fff; stroke-width: 2; }
.plug__tip { fill: none; stroke: var(--ink-50); stroke-width: 2; }
.plug__bolt { fill: var(--red); }

/* the speed tool: same window as the torrent list. two segmented choices, then four cables racing */
.speed { margin: 30px 0 0; }
.speed__ctl { display: grid; gap: 14px; padding: 16px; border-bottom: 1px solid var(--ink-07); }
.seg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.seg legend { float: left; width: 5.6rem; padding: 0; margin-right: 4px; font: 700 .6rem/34px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-block; line-height: 34px; height: 34px; padding: 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ink-12); font-size: .82rem; color: var(--ink-70); white-space: nowrap; }
.seg em { font-style: normal; font-variant-numeric: tabular-nums; }
.seg label:hover span { color: #fff; box-shadow: inset 0 0 0 1px var(--ink-30); }
.seg input:checked + span { background: #fff; color: #000; box-shadow: none; font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.race { padding: 8px 16px 14px; }
.race li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 7.2rem; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ink-07); }
.race li:last-child { border-bottom: 0; }
.race__who { display: grid; gap: 2px; }
.race__who b { font-weight: 600; font-size: .88rem; }
.race__who span, .race__time span { font-size: .74rem; color: var(--ink-50); }
.race__bar { height: 10px; border-radius: 3px; background: var(--ink-07); overflow: hidden; }
.race__bar i { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--red); transform-origin: left; transform: scaleX(max(var(--t, 1), .006)); }
.race li.is-capped .race__bar i { background: var(--ink-50); }
.race__time { display: grid; gap: 2px; text-align: right; }
.race__time b { font-weight: 700; font-variant-numeric: tabular-nums; }
.speed figcaption { margin-top: 12px; font-size: .8rem; line-height: 1.45; color: var(--ink-50); }
.g > .speed__two { margin-top: 26px; gap: 28px; }
.speed__two p { color: var(--ink-70); font-size: .92rem; }
@media (max-width: 900px) {
  .kit--three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .kit--two, .kit--three { grid-template-columns: 1fr; }
  .plug { grid-template-columns: 1fr; } .plug__art { max-width: 150px; }
  .seg legend { float: none; width: 100%; line-height: 1; margin-bottom: 4px; }
  .race li { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .race__bar { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: no-preference) {
  .race__bar i { transition: transform .5s var(--settle); }
}
/* storage shelf: two groups, finished drives as cards, bare parts as pairs (part + box = something you can use) */
.g > .kit__head { margin: 40px 0 0; font-size: .92rem; letter-spacing: .06em; }
.g > .kit__sub { margin-top: 8px; max-width: 64ch; font-size: .9rem; color: var(--ink-50); }
.g > .kit__head + .kit__sub + .kit { margin-top: 18px; }
.kit--pairs { grid-template-columns: 1fr; }
.pair { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; padding: 14px; align-items: start; }
.pair__plates { align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.pair__plates .item__plate { margin: 0; aspect-ratio: 1; }
.pair__plus { font: 700 1.6rem/1 var(--display); color: var(--red); }
.pair__words { padding: 6px 6px 4px 0; font-size: .9rem; }
.pair__words .item__line { margin-top: 8px; }
.pair__part { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ink-07); }
.pair__part .item__name b { color: #fff; font-weight: 600; margin-right: 4px; }
.pair__part .item__name span { display: block; margin-top: 3px; font-size: .78rem; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.buy--sm { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.buy--sm .buy__btn { height: 30px; padding: 0 10px; }
.g > .kit__care { margin-top: 30px; gap: 28px; }
.kit__care p { color: var(--ink-70); font-size: .92rem; }
@media (max-width: 780px) {
  .pair { grid-template-columns: 1fr; }
  .pair__plates .item__plate { aspect-ratio: 4 / 3; }
  .pair__words { padding: 0 6px 6px; }
}
.buy__lab { align-self: center; margin-right: 4px; font: 700 .6rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); }
.buy--sm .buy__lab { flex-basis: auto; }

/* ── premium pass ── */
/* the cable graphic: two plugs the same shape, and what each moves in a second (a 15 x 5 grid, one square = 40 MB) */
.pipe { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 26px; overflow: hidden; }
.pipe__one { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 22px; align-items: end; padding: 26px 26px 22px; }
.pipe__one + .pipe__one { border-left: 1px solid var(--ink-07); }
.plugart { width: 76px; height: auto; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
.pipe__words h3 { margin-bottom: 14px; }
.dots { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; max-width: 250px; }
.dots i { aspect-ratio: 1; border-radius: 2px; background: var(--ink-07); }
.dots i.on { background: var(--red); }
.pipe__speed { margin-top: 14px; display: grid; gap: 2px; }
.pipe__speed b { font: 700 1.55rem/1 var(--body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pipe__speed span { font-size: .8rem; color: var(--ink-50); }
.pipe__key { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 12px 26px; border-top: 1px solid var(--ink-07); font-size: .78rem; color: var(--ink-50); }
.dots--key { display: inline-grid; grid-template-columns: 11px; }
/* what fits: 1.5 TB against three drives */
.fits { margin-top: 24px; padding: 20px 22px 12px; }
.fits__head { font-size: .86rem; color: var(--ink-50); margin-bottom: 6px; }
.fits__head b { font: 700 1.25rem/1 var(--body); letter-spacing: -.01em; color: #fff; margin-right: 4px; }
.fits li { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 15rem; gap: 16px; align-items: center; padding: 11px 0; border-top: 1px solid var(--ink-07); font-size: .86rem; }
.fits li:first-child { border-top: 0; }
.fits__who { color: #fff; }
.fits__say { color: var(--ink-50); font-size: .8rem; }
.fits__bar { position: relative; height: 12px; border-radius: 3px; background: var(--ink-12); }
.fits__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--f) * 100%); border-radius: 3px; background: var(--red); }
.fits__bar--over { background: none; }
.fits__bar--over i { width: 100%; background: repeating-linear-gradient(135deg, var(--red) 0 6px, #7a0000 6px 12px); }
.fits__bar--over::after { content: ""; position: absolute; right: -6px; top: -4px; bottom: -4px; width: 2px; background: #fff; }
.fits li:first-child .fits__say { color: #fff; }
/* copies: real drives on plates */
.flow__ph { display: grid; place-items: center; height: 92px; margin: 14px 0 12px; border-radius: var(--r-s); background: radial-gradient(120% 90% at 50% 30%, #fbfbfb 0%, #e9e9e9 60%, #d9d9d9 100%); }
.flow__ph img { max-width: 70%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.flow__ph--dark { background: #000; box-shadow: inset 0 0 0 1px var(--ink-12); }
.flow__ph--dark img { max-width: 76%; }
.flow__ph--ic { color: #222; font-size: 3.6rem; line-height: 0; }
.flow__ph--ic .i { stroke-width: 1.3; }
/* checksum: three fingerprints, one damaged */
.hash { margin-top: 22px; padding: 6px 20px; }
.hash__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--ink-07); }
.hash__row:first-child { border-top: 0; }
.hash__who { font: 700 .6rem/1.4 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); }
.hash code { font: .82rem/1.6 var(--mono); color: var(--ink-70); overflow-wrap: anywhere; }
.hash mark { background: var(--red); color: #fff; border-radius: 3px; padding: 0 2px; }
.hash__say { grid-column: 2; display: flex; align-items: center; gap: 6px; font-size: .84rem; color: #fff; }
.hash__say:empty { display: none; }
.hash__say .i { width: 1.1em; height: 1.1em; }
.hash .is-bad .hash__say .i { color: var(--red); }
.g > .hash + p { margin-top: 18px; }
/* speed tool: the drives, pictured */
.seg img { width: 24px; height: 24px; margin: -4px 7px -7px -4px; padding: 2px; border-radius: 6px; background: #e9e9e9; object-fit: contain; vertical-align: middle; }
@media (max-width: 900px) {
  .fits li { grid-template-columns: 11rem minmax(0, 1fr); }
  .fits__say { grid-column: 2; }
  .flow__ph { height: 76px; }
}
@media (max-width: 620px) {
  .pipe { grid-template-columns: 1fr; }
  .pipe__one + .pipe__one { border-left: 0; border-top: 1px solid var(--ink-07); }
  .pipe__one { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 20px 18px; }
  .plugart { width: 56px; }
  .fits li { grid-template-columns: 1fr; gap: 6px; }
  .fits__say { grid-column: 1; }
  .flow__ph { grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; align-self: center; }
  .flow__ph img { max-height: 40px; max-width: 80%; }
  .flow__ph--ic { font-size: 2rem; }
  .hash__row { grid-template-columns: 1fr; }
  .hash__say { grid-column: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   CATALOGUE SYSTEM, 2026-09-24 (refactor). One set of tokens; the bar, the head, the switcher, the toolbar and
   the rows all draw from it. The glass is pop.thevault.locker's header pill: black 45% + blur(20px) saturate(150%),
   a 0.5px 6% border, two soft shadows, a hairline inner highlight; red only on the active pill.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --t-title: 1.6rem;  --t-h3: .98rem;  --t-body: .9rem;  --t-meta: .78rem;  --t-tag: .7rem;  --t-label: .64rem;
  --sur-1: rgba(255, 255, 255, .035);    /* elevated */
  --sur-2: rgba(255, 255, 255, .06);     /* interactive */
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --glass: color-mix(in srgb, #000 45%, transparent);
  --glass-line: rgba(255, 255, 255, .06);
  --glass-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .03), inset 0 -1px 0 -.5px rgba(255, 255, 255, .05), 0 2px 8px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --glass-red: color-mix(in srgb, var(--red) 18%, color-mix(in srgb, #000 50%, transparent));
  --glass-red-line: color-mix(in srgb, var(--red) 55%, rgba(255, 255, 255, .08));
  --glass-red-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--red) 25%, transparent), inset 0 -1px 0 -.5px rgba(255, 255, 255, .05), 0 2px 8px rgba(0, 0, 0, .3), 0 4px 18px color-mix(in srgb, var(--red) 35%, transparent);
  --ctl: 36px; --ctl-s: 30px; --ico: 16px; --cover: 56px; --col-gap: 14px; --col-text: calc(var(--cover) + var(--col-gap)); --r: 10px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── the page bar: pop's header. a fixed, transparent strip 16px in from the edges; three glass pills, 47px tall ── */
:root { --bar-h: 47px; --bar-inset: 16px; }
.bar { position: fixed; top: var(--bar-inset); left: 0; right: 0; height: var(--bar-h); padding: 0 var(--bar-inset); gap: 12px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.pill--nav > a { white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 4px; height: var(--bar-h); padding: 0 .9rem; border-radius: var(--r-pill); border: .5px solid var(--glass-line); background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--glass-shadow); }
.pill--brand { justify-self: start; padding: 0 1rem 0 .9rem; }
.pill--nav { justify-self: center; padding: 0 .45rem; }
.pill--me { justify-self: end; padding: 0 .45rem 0 .9rem; }
.brand { gap: 10px; }
.brand img { height: 16px; }
.brand b { font-size: .68rem; line-height: 16px; }
.pill--nav > a, .bar__out button, .bar__link { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-pill); font: 700 var(--t-label)/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); text-decoration: none; background: none; border: 0; cursor: pointer; transition: color .15s var(--ease), background .15s var(--ease); }
.pill--nav > a:hover, .bar__out button:hover, .bar__link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.pill--nav > a[aria-current] { color: #fff; background: var(--glass-red); box-shadow: inset 0 0 0 .5px var(--glass-red-line); }
.pill--nav > a::after { display: none; }
.bar__out { display: inline-flex; align-items: center; gap: 8px; }
.bar__who { font-size: var(--t-meta); color: rgba(255, 255, 255, .7); }
.rolechip--bar { font-size: .62rem; }
main { padding-top: calc(var(--bar-h) + 2 * var(--bar-inset)); }
.top { margin-top: calc(-1 * (var(--bar-h) + 2 * var(--bar-inset))); padding-top: calc(clamp(36px, 7vw, 72px) + var(--bar-h) + 2 * var(--bar-inset)); }   /* the bubbles wall runs up behind the bar, as pop's splash does */
html { scroll-padding-top: calc(var(--bar-h) + 2 * var(--bar-inset)); }

/* ── catalogue head: the title with its stars, the figures as a metadata strip on the same rule ── */
.sec__head h2 { font-size: var(--t-title); letter-spacing: .05em; }
.sec__head h2::before, .sec__head h2::after { font-size: .55em; vertical-align: .16em; }
.cat__head { align-items: flex-end; gap: var(--s-4) var(--s-5); padding-bottom: var(--s-3); }
.cat__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; }
.cat__meta > div { display: grid; gap: 2px; }
.cat__meta dt { font: 700 var(--t-label)/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); }
.cat__meta dd { font: 600 var(--t-h3)/1.1 var(--body); color: #fff; font-variant-numeric: tabular-nums; }
.cat__meta dd b { font-weight: 600; }
.cat__of { color: var(--ink-30); font-weight: 500; }
.list__sum { padding-top: var(--s-4); font-size: var(--t-body); line-height: 1.55; color: var(--ink-70); max-width: 72ch; }
.have__note { padding-top: var(--s-2); font-size: var(--t-meta); color: var(--ink-50); }

/* ── the switcher: one segmented glass pill; the chosen segment is the red pill ── */
.cat__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0 var(--s-3); }
.switch { display: inline-flex; align-items: center; height: var(--ctl); padding: 3px; border-radius: var(--r-pill); border: .5px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); }
.switch__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 28px; padding: 0 14px 0 12px; margin: 0; border: 0; box-shadow: none; border-radius: var(--r-pill); background: none; color: rgba(255, 255, 255, .7); cursor: pointer; font: 700 var(--t-label)/1 var(--display); letter-spacing: .16em; text-transform: uppercase; line-height: 1; transition: color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease); }
.switch__btn > * { line-height: 1; box-shadow: none; padding: 0; border-radius: 0; background: none; display: inline-block; }
.switch__btn .i { width: 13px; height: 13px; stroke-width: 2; flex: none; margin-top: -1px; opacity: .7; }
.switch__btn[aria-selected="true"] .i { opacity: 1; }
.switch__btn i { font-style: normal; font: 600 .72rem/1 var(--body); letter-spacing: 0; color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; margin-left: 1px; }
.switch__btn:hover { color: #fff; }
.switch__btn[aria-selected="true"] { color: #fff; background: var(--glass-red); box-shadow: inset 0 0 0 .5px var(--glass-red-line); }
.switch__btn[aria-selected="true"] i { color: rgba(255, 255, 255, .8); }
.switch__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.switch__where { margin: 0; font-size: var(--t-meta); color: var(--ink-50); white-space: nowrap; }
.switch__where > span[hidden] { display: none; }
.shelf-panel[hidden] { display: none; }
.tools [data-audio-only][hidden] { display: none; }

/* ── the toolbar: search, tag, hide ticked, one height, one hairline under ── */
.tools { grid-template-columns: minmax(200px, 1fr) auto auto; gap: var(--s-2) var(--s-3); padding: 0 0 var(--s-3); border-bottom: 1px solid var(--line); }
.field, .select { height: var(--ctl); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--sur-1); transition: box-shadow .15s var(--ease); }
.field:focus-within, .select:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.field { gap: 8px; padding: 0 12px; } .field .i { width: var(--ico); height: var(--ico); }
.field input { font-size: var(--t-body); }
.select select { font-size: var(--t-body); max-width: 200px; padding: 0 32px 0 12px; }
.tools__count { font-size: var(--t-meta); padding-right: 12px; }
.check--tool { height: var(--ctl); font-size: var(--t-body); gap: 8px; }
.check--tool input, .check--mine input { width: 16px; height: 16px; border-radius: 5px; background-size: 11px; }

/* ── rows: [cover] [title / meta / description / tags / file details] … [download]; one left edge for everything ── */
.row { border-bottom: 1px solid var(--line); contain-intrinsic-size: auto 220px; transition: background .15s var(--ease); }
.row:hover { background: linear-gradient(90deg, var(--sur-1), transparent 60%); }
.row__head { display: grid; grid-template-columns: var(--cover) minmax(0, 1fr) auto; gap: var(--col-gap); padding: var(--s-4) 0 var(--s-2); align-items: start; }
.row__text { min-width: 0; display: grid; }
.row__head .row__act { display: flex; justify-content: flex-end; gap: 8px; }
.row__head .thumb { width: var(--cover); height: var(--cover); border-radius: 9px; background: var(--sur-1); box-shadow: inset 0 0 0 1px var(--line); }
.row__text { gap: 3px; padding-top: 2px; }
.row__head .row__title { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; letter-spacing: -.005em; color: #fff; }
.row__meta { font-size: var(--t-meta); line-height: 1.4; color: var(--ink-50); gap: 0 var(--s-3); font-variant-numeric: tabular-nums; }
.row__meta > span:first-child { color: var(--ink-70); font-weight: 500; }
.row__meta .row__size { display: inline; }
.row__path { color: var(--ink-30); }
.row__head .row__act { position: static; width: auto; padding-top: 8px; }
.row__desc { margin: var(--s-2) 0 0 var(--col-text); font-size: var(--t-body); line-height: 1.55; color: var(--ink-70); max-width: 68ch; }
.trk { counter-reset: t; margin: var(--s-2) 0 0 var(--col-text); border-top: 1px solid var(--line); }
.trk li { counter-increment: t; display: grid; }
.trk li::before { content: counter(t, decimal-leading-zero); font-family: var(--display); font-weight: 700; }
.trk__thumb { overflow: hidden; background: var(--sur-1); display: grid; place-items: center; color: var(--ink-30); }
.trk__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trk__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk__time { color: var(--ink-50); white-space: nowrap; font-variant-numeric: tabular-nums; }
.trk li { grid-template-columns: 2em 22px minmax(0, 1fr) auto; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); color: var(--ink-70); align-items: center; }
.trk li::before { font-size: .6rem; line-height: 1; color: var(--red); letter-spacing: .08em; }
.trk__thumb { width: 30px; height: 30px; border-radius: 6px; }
.trk__thumb .i { width: 12px; height: 12px; }
.trk__time { font-size: var(--t-meta); }
.row.is-done .trk li { color: var(--ink-50); }
.grp { display: flex; align-items: center; padding: var(--s-5) 0 var(--s-1); font: 700 var(--t-label)/1 var(--display); letter-spacing: .24em; color: var(--red); gap: var(--s-3); }
.grp::after { content: ""; flex: 1; height: 1px; }
.grp[hidden] { display: none; }
.row[hidden] { display: none; }
.row { position: relative; content-visibility: auto; }
.grp::after { background: var(--line); }
.list--audio > .grp:first-child { padding-top: var(--s-3); }

/* file details: a quiet opener under the row, a compact label/value list */
.row__more { margin-left: var(--col-text); }
.row__more summary { display: inline-flex; align-items: center; gap: 8px; padding: var(--s-2) 0; font-size: var(--t-meta); color: var(--ink-50); cursor: pointer; list-style: none; transition: color .15s var(--ease); }
.row__more summary::-webkit-details-marker { display: none; }
.row__more summary:hover, .row__more[open] summary { color: var(--ink-70); }
.row__more .row__plus { position: relative; display: block; width: 10px; height: 10px; color: currentColor; }
.row__more .row__plus::before, .row__more .row__plus::after, .sub__item .row__plus::before, .sub__item .row__plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor; }
.row__more .row__plus::after, .sub__item .row__plus::after { transform: rotate(90deg); }
.sub__item .row__plus { position: relative; }
.row__more[open] .row__plus::after { display: none; }
.row__more .more { padding: 0 0 var(--s-4); gap: var(--s-3); max-width: none; }
.facts { gap: 5px; font-size: var(--t-meta); }
.facts > div { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: start; }
.facts > div > dt { grid-column: 1; color: var(--ink-50); } .facts > div > dd { grid-column: 2; color: var(--ink-70); }
.facts dd.hash { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.facts dd.hash code { flex: 1 1 240px; min-width: 0; font-size: .72rem; line-height: 1.5; }
.more__hint { font-size: var(--t-meta); }
.check--mine { font-size: var(--t-meta); gap: 8px; }

/* ── buttons: primary (download) white, quiet pill (torrent only / preparing), small secondary (Copy) ── */
.row__head .dl { height: var(--ctl); min-width: 112px; padding: 0 12px 0 10px; gap: 8px; border-radius: var(--r); background: #fff; color: #000; box-shadow: none; font: 600 var(--t-meta)/1 var(--body); font-variant-numeric: tabular-nums; transition: background .15s var(--ease), transform .15s var(--ease); }
.row__head .dl:hover, .row__head .dl:focus-visible { background: var(--red); color: #000; }
.row__head .dl:active { transform: translateY(1px); }
.row__head .dl .dl__ic, .row__head .dl .dl__ic .i { width: var(--ico); height: var(--ico); }
.row__head .dl [data-label] { margin-left: auto; }
.row__head .dl--off, .row__head .dl--off:hover { height: var(--ctl-s); min-width: 0; padding: 0 10px; border-radius: var(--r-pill); background: none; color: var(--ink-50); box-shadow: inset 0 0 0 1px var(--line); font: 700 var(--t-label)/1 var(--display); letter-spacing: .12em; text-transform: uppercase; transform: none; }
.copy { height: 24px; padding: 0 9px; border-radius: 6px; font: 600 var(--t-tag)/1 var(--body); color: var(--ink-70); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .15s var(--ease), color .15s var(--ease); }
.copy:hover { background: #fff; color: #000; box-shadow: none; }
.thumb .i, .files__ic .i { width: var(--ico); height: var(--ico); }
.thumb--folder { color: var(--ink-50); }
.thumb--folder .i { width: 20px; height: 20px; }

/* other shelf: sub-folders and files, the same edge and rhythm */
.sub { margin: var(--s-2) 0 0 var(--col-text); border-top: 1px solid var(--line); }
.sub__item details summary { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); color: var(--ink-70); cursor: pointer; list-style: none; }
.sub__item details summary::-webkit-details-marker { display: none; }
.sub__item details summary .row__plus { grid-column: 1; grid-row: 1; width: 10px; height: 10px; }
.sub__name { grid-column: 2; min-width: 0; }
.sub__n { grid-column: 3; font-size: var(--t-meta); color: var(--ink-50); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sub__n i { font-style: normal; padding: 0 .3em; color: var(--ink-30); }
.sub__item details summary:hover .sub__name, .sub__item details[open] summary { color: #fff; }
.sub__item details[open] summary .row__plus::after { display: none; }
.files { padding: 2px 0 6px 20px; }
.files li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 0; font-size: var(--t-meta); color: var(--ink-50); }
.files__ic { color: var(--ink-30); } .files__ic .i { width: 12px; height: 12px; }
.files__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-70); }
.files__size { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* skeleton rows: same grid and heights as real rows, one slow shimmer */
.row--sk { pointer-events: none; }
.sk { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--sur-1) 0%, var(--sur-2) 45%, var(--sur-1) 90%); background-size: 220% 100%; }
.row--sk .thumb.sk { border-radius: 9px; box-shadow: none; }
.sk--t { height: 13px; width: 44%; max-width: 300px; }
.sk--m { height: 10px; width: 30%; max-width: 200px; margin-top: 3px; }
.sk--b { width: 112px; height: var(--ctl); border-radius: var(--r); margin-top: 8px; }
.row--sk .trk li { grid-template-columns: 1fr; padding: 8px 0; }
.sk--tr { height: 10px; width: 52%; max-width: 340px; }
@media (prefers-reduced-motion: no-preference) { .sk { animation: shimmer 1.6s linear infinite; } @keyframes shimmer { from { background-position: 120% 0; } to { background-position: -100% 0; } } }
.list__sentinel { height: 1px; }

/* ── widths ── */
@media (max-width: 1024px) {
  .cat__meta { gap: var(--s-2) var(--s-4); }
  .bar__who { display: none; }
}
@media (max-width: 780px) {
  .cat__head { align-items: flex-start; flex-direction: column; gap: var(--s-3); }
  .cat__bar { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .switch__where { white-space: normal; }
  .tools { grid-template-columns: 1fr auto; }
  .tools .select { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  :root { --cover: 48px; --col-gap: 12px; }
  :root { --bar-h: 42px; --bar-inset: 10px; }
  .bar { grid-template-columns: 1fr auto; grid-template-rows: auto auto; height: auto; padding: 0 var(--bar-inset); gap: 8px; }
  .pill { height: var(--bar-h); }
  .pill--nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; }
  .pill--me { padding-left: .45rem; }
  main { padding-top: calc(2 * var(--bar-h) + 8px + 2 * var(--bar-inset)); }
  .top { margin-top: calc(-1 * (2 * var(--bar-h) + 8px + 2 * var(--bar-inset))); padding-top: calc(36px + 2 * var(--bar-h) + 8px + 2 * var(--bar-inset)); }
  html { scroll-padding-top: calc(2 * var(--bar-h) + 8px + 2 * var(--bar-inset)); }
  .switch { width: 100%; }
  .switch__btn { flex: 1; justify-content: center; padding: 0 8px; }
  .switch__btn i { display: none; }
  .tools { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .tools .field { grid-area: 1 / 1 / 2 / 2; min-width: 0; padding-right: 12px; }
  .tools__count { grid-area: 1 / 2 / 2 / 3; position: static; justify-self: end; padding: 0 0 0 4px; }
  .tools .select { grid-area: 2 / 1 / 3 / 2; }
  .tools .check--tool { grid-area: 2 / 2 / 3 / 3; justify-self: end; }
  .select select { max-width: none; width: 100%; }
  .switch__btn { min-width: 0; padding: 0 8px; gap: 5px; }
  .switch__btn > span { font-size: .58rem; letter-spacing: .12em; }
  .switch__btn .i { width: 12px; height: 12px; }
  .facts dd.hash code { flex-basis: 100%; }
  .cat__meta { gap: var(--s-2) var(--s-4); }
  .row__head { grid-template-columns: var(--cover) minmax(0, 1fr); padding: var(--s-3) 0 var(--s-2); }
  .row__head .row__act { justify-content: flex-start; }
  .row__head .row__act { grid-column: 2; padding-top: 6px; }
  .row__head .dl { min-width: 0; width: auto; height: var(--ctl-s); padding: 0 12px 0 10px; }
  .row__head .dl [data-label] { display: inline; }
  .row__desc, .tags, .trk, .row__more, .sub { margin-left: 0; }
  .trk li { grid-template-columns: 1.8em 20px minmax(0, 1fr) auto; gap: 8px; }
  .trk__thumb { width: 26px; height: 26px; }
  .facts > div { grid-template-columns: 76px minmax(0, 1fr); }
  .sk--b { width: 96px; height: var(--ctl-s); }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   ROWS, 2026-09-24 (design pass). Content first, action second: a 72px cover, the title, one quiet meta line,
   the description at a reading measure, pop's tag chips, the track ladder inside the same surface, then a footer
   line (download link · file details · I have this). A small round download button sits on the title baseline at
   the right; nothing else lives in that column. Rows are separated by a hairline; hover lifts to the elevated surface.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --cover: 120px; --col-gap: 22px; --col-text: calc(var(--cover) + var(--col-gap)); --t-h3: 1.06rem; }
.row { padding: 0; border-bottom: 1px solid var(--line); transition: background .18s var(--ease), box-shadow .18s var(--ease); }
.row:hover { background: var(--sur-1); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r); }
.row__grid { display: grid; grid-template-columns: var(--cover) minmax(0, 1fr) auto; column-gap: var(--col-gap); align-items: start; padding: var(--s-5) var(--s-3) var(--s-4); }
.row__head, .row__head .row__act, .row__head .dl { display: none; }   /* the old head line is gone */
.thumb { width: var(--cover); height: var(--cover); border-radius: 10px; overflow: hidden; background: var(--sur-1); box-shadow: inset 0 0 0 1px var(--line), 0 6px 18px -8px rgba(0, 0, 0, .8); display: grid; place-items: center; color: var(--ink-30); text-decoration: none; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .i { width: 20px; height: 20px; }
.thumb--folder .i { width: 22px; height: 22px; color: var(--ink-50); }
.row__body { min-width: 0; display: grid; gap: var(--s-2); padding-top: 3px; }
.row__title { margin: 0; font: 600 var(--t-h3)/1.3 var(--body); letter-spacing: -.012em; color: #fff; text-wrap: balance; }
.row__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-50); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.row__meta .dot { padding: 0 .5em; color: var(--ink-30); }
.row__path { color: var(--ink-30); }
.row__desc { margin: 2px 0 0; font: 400 1rem/1.6 var(--body); color: var(--ink-70); max-width: 66ch; letter-spacing: -.004em; }
.row__desc br + br { display: block; content: ""; margin-top: .4em; }

/* pop's tag chips (style.css .filter-tag-btn on the slug pages) */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.tag { --tag-color: #6b7280; display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .9rem; border-radius: 999px; font: 700 .72rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .78); background-color: color-mix(in srgb, var(--tag-color) 12%, rgba(15, 15, 17, .88)); border: 1px solid color-mix(in srgb, var(--tag-color) 30%, rgba(255, 255, 255, .15)); box-shadow: none; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); cursor: default; }
.tag .ti { font-size: .9rem; line-height: 1; color: var(--tag-color); opacity: .85; }
@supports not (color: color-mix(in srgb, #000, #fff)) { .tag { background: rgba(15, 15, 17, .88); border-color: rgba(255, 255, 255, .15); } }
.tag:hover { background-color: color-mix(in srgb, var(--tag-color) 15%, color-mix(in srgb, #000 50%, transparent)); border-color: color-mix(in srgb, var(--tag-color) 35%, rgba(255, 255, 255, .1)); color: color-mix(in srgb, var(--tag-color) 90%, #fff); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 1px 1px 0 -.5px rgba(255, 255, 255, .12), 0 2px 8px color-mix(in srgb, var(--tag-color) 25%, transparent); }
.tag:hover .ti { opacity: 1; }

/* the track ladder: pop's slug-page list, inside the row surface */
.trk { margin: var(--s-2) 0 0; padding: 0; list-style: none; counter-reset: none; border-top: 1px solid var(--line); }
.trk li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--line); border-radius: 6px; transition: background .15s var(--ease); }
.trk li:hover { background: rgba(255, 255, 255, .04); }
.trk li::before { content: none; }
.trk__n { font: 700 .74rem/1 var(--display); color: var(--ink-30); text-align: center; font-variant-numeric: tabular-nums; }
.trk__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .92rem/1.3 var(--body); color: rgba(255, 255, 255, .85); }
.trk__time { font: 600 .82rem/1 var(--body); color: var(--ink-50); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row.is-done .trk__title { color: var(--ink-50); }

/* the footer line: download link, the details opener as a text link with a chevron, the tick */
.row__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--t-meta); }
.dl-link { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0; border: 0; background: none; color: #fff; text-decoration: none; font: 600 var(--t-meta)/1 var(--body); box-shadow: none; transition: color .15s var(--ease); }
.dl-link .dl__ic, .dl-link .dl__ic .i { width: 16px; height: 16px; }
.dl-link b { font-weight: 500; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.dl-link:hover, .dl-link:focus-visible { color: var(--red); background: none; box-shadow: none; }
.dl-link:hover b { color: var(--ink-70); }
.dl-off { display: inline-flex; align-items: center; gap: 7px; height: 28px; font: 700 var(--t-label)/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); }
.dl-off .i { width: 14px; height: 14px; }
.row__more { margin: 0; flex: 1 1 100%; order: 10; }
.row__more summary { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; font: 500 var(--t-meta)/1 var(--body); color: var(--ink-50); cursor: pointer; list-style: none; transition: color .15s var(--ease); }
.row__more summary::-webkit-details-marker { display: none; }
.row__more summary .i { width: 12px; height: 12px; transition: transform .18s var(--ease); }
.row__more[open] summary .i { transform: rotate(180deg); }
.row__more summary:hover, .row__more[open] summary { color: #fff; }
.row__more .row__plus { display: none; }
.row__more .more { padding: var(--s-3) 0 var(--s-2); }
.facts { gap: 6px; font-size: var(--t-meta); }
.facts > div { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
.check--mine { margin-left: auto; }
.check--mine input { width: 16px; height: 16px; }

/* the round download button, right column, on the title's baseline */
.dl-ic { grid-column: 3; align-self: start; margin-top: 2px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: var(--sur-1); box-shadow: inset 0 0 0 1px var(--line-2); text-decoration: none; transition: background .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); }
.dl-ic .dl__ic, .dl-ic .dl__ic .i { width: 18px; height: 18px; }
.dl-ic:hover, .dl-ic:focus-visible { background: #fff; color: #000; box-shadow: none; }
.dl-ic:active { transform: translateY(1px); }
.dl-ic.is-started, .dl-link.is-started { color: var(--red); }

/* the letter dividers: pop's dotted section label */
.grp { display: flex; align-items: center; gap: .65rem; padding: var(--s-6) 0 var(--s-2) var(--s-3); font: 800 .7rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.grp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(255, 0, 0, .6); }
.grp::after { content: ""; flex: 1; height: 1px; background: var(--line); margin-left: .35rem; }
.list--audio > .grp:first-child, .list--video > .grp:first-child { padding-top: var(--s-4); }

/* other shelf, same language */
.sub { margin: var(--s-2) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sub__item details summary { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); font: 600 .92rem/1.3 var(--body); color: rgba(255, 255, 255, .85); cursor: pointer; list-style: none; }
.sub__item details summary .i { width: 12px; height: 12px; color: var(--ink-50); transition: transform .18s var(--ease); }
.sub__item details[open] summary .i { transform: rotate(180deg); }
.sub__item details summary .row__plus { display: none; }
.sub__n { font: 500 var(--t-meta)/1 var(--body); color: var(--ink-50); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sub__n .dot { padding: 0 .4em; color: var(--ink-30); }
.files { padding: 2px 0 6px 22px; }
.files li { grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; padding: 5px 0; font-size: var(--t-meta); }

/* skeletons on the new grid */
.row--sk .row__grid { padding: var(--s-5) var(--s-3) var(--s-4); }
.row--sk .thumb.sk { border-radius: 10px; box-shadow: none; }
.sk--t { height: 15px; width: 42%; max-width: 320px; }
.sk--m { height: 10px; width: 30%; max-width: 220px; }
.sk--d { height: 10px; width: 64%; max-width: 560px; margin-top: 4px; }
.sk--f { height: 10px; width: 22%; max-width: 160px; margin-top: 10px; }
.sk--ic { width: 40px; height: 40px; border-radius: 50%; margin-top: 2px; }
.sk--b { display: none; }
.row--sk .trk li { grid-template-columns: 1fr; }
.row--sk .trk li::before { content: none; }

@media (max-width: 780px) {
  :root { --cover: 96px; --col-gap: 16px; }
  .row__grid { padding: var(--s-4) var(--s-2) var(--s-3); }
  .row__meta .dot { padding: 0 .4em; }
}
@media (max-width: 620px) {
  :root { --cover: 76px; --col-gap: 12px; }
  .row:hover { background: none; box-shadow: none; }
  .row__grid { grid-template-columns: var(--cover) minmax(0, 1fr) auto; padding: var(--s-4) 0 var(--s-3); }
  .row__body { padding-top: 0; }
  /* phones: cover + title/meta + button on the first row; everything else runs full width under them */
  .row__grid { grid-template-columns: var(--cover) minmax(0, 1fr) auto; grid-auto-rows: auto; }
  .row__grid > .thumb { grid-row: 1; grid-column: 1; }
  .row__grid > .dl-ic { grid-row: 1; grid-column: 3; }
  .row__grid > .row__body { display: contents; }
  .row__body > .row__title { grid-row: 1; grid-column: 2; align-self: end; margin-bottom: 2px; }
  .row__body > .row__meta { grid-row: 2; grid-column: 2 / -1; margin-top: 2px; }
  .row__body > .row__desc, .row__body > .tags, .row__body > .trk, .row__body > .row__foot, .row__body > .sub { grid-column: 1 / -1; }
  .row__body > .row__desc { margin-top: var(--s-3); }
  .row__body > .tags { margin-top: var(--s-2); }
  .row__meta .dot { padding: 0 .35em; }
  .row__desc { font-size: .95rem; }
  .dl-ic { width: 36px; height: 36px; }
  .dl-ic .dl__ic, .dl-ic .dl__ic .i { width: 16px; height: 16px; }
  .tag { padding: .4rem .75rem; font-size: .68rem; }
  .row__foot { gap: var(--s-2) var(--s-4); }
  .check--mine { margin-left: 0; }
  .trk li { padding: 7px 2px; }
  .facts > div { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   HEADER + BOXES, 2026-09-24. Bar labels readable (display face .8rem, tracked), 16px Tabler icons on every item,
   every pill 47px, items centred. Notices as cards in the Get everything column. The Get everything ladder as three cards with an icon
   plate, a title, one line, facts, and the action.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --bar-h: 47px; --bar-inset: 16px; --bar-item: 33px; --bar-label: .8rem; }
.bar { height: var(--bar-h); gap: 12px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.pill { height: var(--bar-h); gap: 2px; padding: 0 7px; align-items: center; }
.pill--brand { padding: 0 16px 0 14px; }
.pill--nav { padding: 0 7px; }
.pill--me { padding: 0 7px 0 14px; gap: 4px; }
.brand { display: inline-flex; align-items: center; gap: 12px; height: var(--bar-h); }
.brand img { height: 18px; width: auto; display: block; }
.brand b { display: inline-flex; align-items: center; height: 18px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .22); font: 700 .7rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.pill--nav > a, .bar__out button, .bar__link, .bar__who { display: inline-flex; align-items: center; gap: 8px; height: var(--bar-item); padding: 0 14px 0 12px; margin: 0; border: 0; border-radius: var(--r-pill); background: none; box-shadow: none; font: 700 var(--bar-label)/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); text-decoration: none; cursor: pointer; white-space: nowrap; transition: color .15s var(--ease), background .15s var(--ease); }
.pill--nav > a .ti, .bar__out button .ti, .bar__link .ti, .bar__who .ti { font-size: 16px; line-height: 1; width: 16px; text-align: center; opacity: .85; }
.pill--nav > a > span, .bar__out button > span, .bar__link > span, .bar__who > span { line-height: 1; padding-top: 1px; }   /* Yeezy sits a hair high; this puts the caps on the icon's x-height */
.pill--nav > a:hover, .bar__out button:hover, .bar__link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.pill--nav > a[aria-current] { color: #fff; background: var(--glass-red); box-shadow: inset 0 0 0 .5px var(--glass-red-line); }
.pill--nav > a[aria-current] .ti { opacity: 1; }
.bar__who { cursor: default; text-transform: none; letter-spacing: 0; font: 500 .84rem/1 var(--body); color: rgba(255, 255, 255, .78); padding-right: 6px; max-width: 22ch; }
.bar__who > span { overflow: hidden; text-overflow: ellipsis; }
.rolechip--bar { font-size: .66rem; height: 24px; align-self: center; }
.bar__out { display: inline-flex; align-items: center; gap: 6px; height: var(--bar-h); }
main { padding-top: calc(var(--bar-h) + 2 * var(--bar-inset)); }

/* notices: one compact card each */
.notice { display: none; }
.note { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; margin: clamp(12px, 3vw, 32px) 0 14px; padding: 22px 24px 22px 22px; border-radius: var(--r-l); }   /* same column and edges as the Get everything cards */
.note + .note { margin-top: 12px; }
.note__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line); color: #fff; }
.note__ic .i { width: 26px; height: 26px; }
.note--next .note__ic { background: var(--glass-red); box-shadow: inset 0 0 0 .5px var(--glass-red-line); }
.note__body { min-width: 0; display: grid; gap: 8px; padding-top: 2px; }
.note__title { margin: 0; font: 800 1.02rem/1.25 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.note__title time { font-variant-numeric: tabular-nums; }
.note__body p { margin: 0; font: 400 1rem/1.6 var(--body); color: var(--ink-70); max-width: 66ch; }
.note__body a.sir { color: rgba(255, 255, 255, .85); border-bottom-color: var(--ink-30); }
/* the invitation under the dates: a short lead and two quiet chips, toolbar height */
.note__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.note__body .note__lead { margin: 0; font: 500 1rem/1.4 var(--body); color: #fff; }
.note__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: var(--ctl); padding: 0 14px 0 12px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-2); color: #fff; text-decoration: none; font: 700 .68rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: background .15s var(--ease), box-shadow .15s var(--ease); }
.chip .ti { font-size: 16px; color: var(--red); }
.chip:hover, .chip:focus-visible { background: var(--glass-red); box-shadow: inset 0 0 0 1px var(--glass-red-line); }
.chip:active { transform: scale(.97); }
.note__body time { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); }
.note__body p [data-ends-left] { color: rgba(255, 255, 255, .85); }
.note__fine { display: block; margin-top: 6px; font-size: .86rem; color: var(--ink-50); }
.note__fine a { color: var(--ink-70); text-decoration: underline; text-underline-offset: .15em; }

/* the ladder as three cards */
.ladder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: var(--s-4) 0 0; list-style: none; margin: 0; }
.card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 22px 24px 22px 22px; border-radius: var(--r-l); }
.card--torrent { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 26px 26px 24px; background: linear-gradient(145deg, rgba(255, 0, 0, .10), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .05)); }
.card__plate { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line); color: #fff; }
.card__plate .i { width: 26px; height: 26px; }
.card--torrent .card__plate { width: 64px; height: 64px; border-radius: 16px; }
.card--torrent .card__plate .i { width: 30px; height: 30px; }
.card__plate--red { background: var(--glass-red); box-shadow: inset 0 0 0 .5px var(--glass-red-line), 0 8px 24px -10px rgba(255, 0, 0, .5); }
.card__body { min-width: 0; display: grid; gap: 6px; padding-top: 2px; }
.card__title { margin: 0; font: 800 1.02rem/1.25 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.card--torrent .card__title { font-size: 1.22rem; }
.card__line { margin: 0; font: 400 .95rem/1.55 var(--body); color: var(--ink-70); max-width: 60ch; }
.card__facts { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; font: 500 .8rem/1.5 var(--body); color: var(--ink-50); font-variant-numeric: tabular-nums; }
.card__facts span:first-child { color: #fff; font-weight: 600; }
.card__facts i { font-style: normal; padding: 0 .5em; color: var(--ink-30); }
.card__apps { margin: 2px 0 0; font: 400 .82rem/1.5 var(--body); color: var(--ink-50); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.card__apps a { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-70); text-decoration: none; font-size: .76rem; font-weight: 600; transition: background .15s var(--ease), color .15s var(--ease); }
.card__apps a:hover { background: #fff; color: #000; box-shadow: none; }
.card__act { display: grid; gap: 8px; justify-items: end; align-self: center; text-align: right; }
.card__act .btn { height: 40px; padding: 0 16px; font: 700 .7rem/1 var(--display); letter-spacing: .14em; white-space: nowrap; }
.btn--white { background: #fff; color: #000; box-shadow: none; }
.btn--white:hover, .btn--white:focus-visible { background: var(--red); color: #000; }
.btn--line { background: none; color: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--line:hover { background: #fff; color: #000; box-shadow: none; }
.btn--line[disabled], .btn--line[aria-disabled="true"] { color: var(--ink-50); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.btn--line[disabled]:hover, .btn--line[aria-disabled="true"]:hover { background: none; color: var(--ink-50); }
.card__foot { font: 400 .76rem/1.4 var(--body); color: var(--ink-50); max-width: 26ch; text-decoration: none; }
a.card__foot { color: var(--ink-70); text-decoration: underline; text-underline-offset: .15em; }
.card .row__error { grid-column: 1 / -1; margin: 0; }

/* Tabler glyphs: the family must beat the page's own stacks, or the glyph is a blank box */
.ti { font-family: 'tabler-icons' !important; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; }

/* the quiet Sir link */
a.sir { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s var(--ease), color .15s var(--ease); }
a.sir:hover, a.sir:focus-visible { color: #fff; border-bottom-color: currentColor; }
.site-foot a.sir { color: inherit; }

@media (max-width: 1024px) { .bar__who { max-width: 14ch; } }
@media (max-width: 900px) { .brand b { display: none; } .rolechip--bar { display: none; } .pill--nav > a, .bar__out button, .bar__link { padding: 0 11px 0 10px; gap: 7px; } :root { --bar-label: .76rem; } }
@media (max-width: 900px) {
  .card, .card--torrent { grid-template-columns: 56px minmax(0, 1fr); }
  .card__act { grid-column: 2; justify-items: start; text-align: left; align-self: auto; }
}
@media (max-width: 780px) { .bar__who { display: none; } }
@media (max-width: 620px) {
  :root { --bar-h: 44px; --bar-inset: 10px; --bar-item: 32px; --bar-label: .74rem; }
  .bar { grid-template-columns: 1fr auto; grid-template-rows: auto auto; height: auto; padding: 0 var(--bar-inset); gap: 8px; }
  .pill { height: var(--bar-h); }
  .pill--nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; }
  .pill--nav > a { flex: 1; justify-content: center; }
  .pill--me { padding-left: 7px; }
  .brand img { height: 16px; } .brand b { height: 16px; font-size: .64rem; }
  main { padding-top: calc(2 * var(--bar-h) + 8px + 2 * var(--bar-inset)); }
  .top { margin-top: calc(-1 * (2 * var(--bar-h) + 8px + 2 * var(--bar-inset))); padding-top: calc(36px + 2 * var(--bar-h) + 8px + 2 * var(--bar-inset)); }
  html { scroll-padding-top: calc(2 * var(--bar-h) + 8px + 2 * var(--bar-inset)); }
  .note { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 18px 16px; }
  .note__ic { width: 48px; height: 48px; border-radius: 12px; }
  .note__ic .i { width: 22px; height: 22px; }
  .note__title { font-size: .96rem; }
  .note__ask, .note__chips { flex-direction: column; align-items: stretch; }
  .chip { justify-content: center; }
  .card, .card--torrent { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 18px 16px; }
  .card__plate, .card--torrent .card__plate { width: 48px; height: 48px; border-radius: 12px; }
  .card__plate .i, .card--torrent .card__plate .i { width: 22px; height: 22px; }
  .card--torrent .card__title { font-size: 1.08rem; }
  .card__act { grid-column: 1 / -1; }
  .card__act .btn { width: 100%; justify-content: center; }
  .card__foot { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   DOCUMENTS, 2026-09-24: the licence, the terms, the privacy policy (and the archived Vault+ terms). One reading column
   at 68ch, a header card in the glass system, a contents rail that follows the reader, section numbers as small red
   plates, hairline tables. The words are untouched; this is presentation only. Old .lic rules above are now unused.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --ink-80: rgba(255, 255, 255, .8); --doc-off: calc(var(--bar-h) + 2 * var(--bar-inset)); }
.view-doc { background: #000; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main.doc { --max: 965px; padding-top: calc(var(--doc-off) + 20px); }   /* rail 224 + gap 56 + column 68ch: the header card ends where the column ends */
.doc__progress { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* the header card */
.doc__head { display: grid; gap: 14px; padding: 30px 34px 28px; border-radius: var(--r-l); }
.doc__kicker { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; font: 700 .7rem/1.5 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }
.doc__kicker i { font-style: normal; padding: 0 .7em; color: var(--ink-30); }
.doc__kicker span:first-child { color: var(--red); }
.doc__title { margin: 0; font: 800 clamp(1.7rem, 4.2vw, 2.5rem)/1 var(--display); letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.doc__sub { margin: -4px 0 0; font: 700 1rem/1.35 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-70); }
.doc__meta { margin: 6px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 18px; font: 400 .9rem/1.5 var(--body); }
.doc__meta dt { color: var(--ink-50); }
.doc__meta dt strong, .doc__meta dd strong { color: var(--ink-50); font-weight: 500; }
.doc__meta dd { margin: 0; color: var(--ink-80); }
.doc__meta dd a { color: #fff; text-decoration: underline; text-underline-offset: .15em; text-decoration-color: var(--ink-30); }
.doc__acts { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.doc__acts .btn { gap: 8px; padding: 0 16px 0 13px; }
.doc__acts .ti { font-size: 16px; }

/* rail + column */
.doc__grid { display: grid; grid-template-columns: 224px minmax(0, 68ch); gap: 56px; align-items: start; margin-top: 36px; }
.toc { position: sticky; top: calc(var(--doc-off) + 8px); }
.toc__open { display: none; }
.toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-height: calc(100vh - var(--doc-off) - 32px); overflow: auto; overscroll-behavior: contain; scrollbar-width: none; border-left: 1px solid var(--ink-12); }
.toc__list::-webkit-scrollbar { display: none; }
.toc a { display: grid; grid-template-columns: 1.8em minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 12px 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font: 500 .82rem/1.35 var(--body); color: var(--ink-50); text-decoration: none; transition: color .15s var(--ease), border-color .15s var(--ease); }
.toc a b { font: 700 .66rem/1.35 var(--display); letter-spacing: .04em; color: var(--ink-30); font-variant-numeric: tabular-nums; }
.toc a b .ti { font-size: 12px; }
.toc a:hover { color: #fff; }
.toc a[aria-current="true"] { color: #fff; border-left-color: var(--red); }
.toc a[aria-current="true"] b { color: var(--red); }

/* the reading column */
.doc__body { min-width: 0; font: 400 1rem/1.65 var(--body); color: var(--ink-80); }
.doc__body p { margin: 0 0 16px; }
.doc__body strong { color: #fff; font-weight: 600; }
.doc__body a { color: #fff; text-decoration: underline; text-underline-offset: .18em; text-decoration-color: var(--ink-30); transition: text-decoration-color .15s var(--ease); }
.doc__body a:hover { text-decoration-color: currentColor; }
.doc__short { display: grid; gap: 10px; padding: 24px 28px; border-radius: var(--r-l); margin: 0 0 12px; }
.doc__short-h { margin: 0; font: 800 .74rem/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.doc__short-body > :last-child { margin-bottom: 0; }
.doc__part { margin: 28px 0 8px; font: 700 .74rem/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }
.doc__sec { padding: 34px 0 20px; border-top: 1px solid var(--ink-12); scroll-margin-top: calc(var(--doc-off) + 16px); }
.doc__short + .doc__sec { border-top: 0; padding-top: 28px; }
.doc__sec h2 { margin: 0 0 18px; display: flex; gap: 14px; align-items: flex-start; font: 800 1.28rem/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.doc__num { flex: none; display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 9px; border-radius: 9px; background: var(--glass-red); box-shadow: inset 0 0 0 .5px var(--glass-red-line); font: 800 .8rem/1 var(--display); letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums; transform: translateY(-.1em); }
.doc__h2 { padding-top: .22em; }
.doc__sec h3 { margin: 26px 0 10px; font: 700 .76rem/1.4 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); }
.doc__sec h4 { margin: 20px 0 8px; font: 700 .7rem/1.4 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-30); }
.doc__def { padding-left: 18px; border-left: 2px solid var(--ink-12); }
.doc__def strong { display: inline-block; }
.doc__sign { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--ink-12); line-height: 1.7; }
.doc__body ul, .doc__body ol { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.doc__body li { position: relative; padding-left: 1.6em; }
.doc__body ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: .75em; height: 1.5px; background: var(--ink-30); }
.doc__body ol { counter-reset: doc; }
.doc__body ol li { padding-left: 2.1em; counter-increment: doc; }
.doc__body ol li::before { content: counter(doc) "."; position: absolute; left: 0; top: 0; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.doc__table { overflow-x: auto; margin: 6px 0 22px; }
.doc__body table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.45; }
.doc__body th { text-align: left; vertical-align: bottom; padding: 8px 18px 10px 0; border-bottom: 1px solid var(--ink-12); font: 700 .64rem/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); }
.doc__body td { vertical-align: top; padding: 11px 18px 11px 0; border-top: 1px solid var(--ink-07); color: var(--ink-70); }
.doc__body tr:first-child td { border-top: 0; }
.doc__body th:last-child, .doc__body td:last-child { padding-right: 0; min-width: 9em; }
.doc__body tr.yes td:last-child strong { color: #fff; }
.doc__body tr.no td:last-child strong { color: var(--red); }
.doc__foot { margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--ink-12); font: 500 .78rem/1.5 var(--body); color: var(--ink-50); font-variant-numeric: tabular-nums; }
.doc__foot i { font-style: normal; padding: 0 .3em; color: var(--ink-30); }

/* back to top */
.totop { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px 0 12px; border-radius: var(--r-pill); color: #fff; text-decoration: none; font: 700 .68rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; opacity: 0; translate: 0 8px; pointer-events: none; transition: opacity .2s var(--ease), translate .2s var(--ease); }
.totop .ti { font-size: 16px; }
.totop.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }

@media (max-width: 1100px) {
  main.doc { --max: 68ch; }
  .doc__grid { grid-template-columns: minmax(0, 68ch); gap: 20px; margin-top: 28px; }
  .toc { position: static; }
  .toc__open { display: inline-flex; align-items: center; gap: 8px; height: var(--ctl); padding: 0 14px 0 12px; border-radius: var(--r-pill); border: 0; background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: #fff; font: 700 .68rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
  .toc__open .ti { font-size: 16px; }
  .toc__open b { font-weight: 700; color: var(--ink-50); padding-left: 8px; border-left: 1px solid var(--ink-30); line-height: 1; }
  .toc__open[aria-expanded="true"] { background: var(--glass-red); box-shadow: inset 0 0 0 1px var(--glass-red-line); }
  .toc__list { display: none; max-height: none; margin-top: 12px; }
  .toc.is-open .toc__list { display: grid; }
  .toc a { padding: 7px 12px 7px 14px; }
}
@media (min-width: 621px) and (max-width: 1100px) { .toc.is-open .toc__list { display: block; columns: 2; column-gap: 28px; } .toc.is-open .toc__list li { break-inside: avoid; } }   /* read down, then across */
@media (max-width: 780px) {
  .doc__head { padding: 22px 22px 20px; }
  .doc__grid { margin-top: 20px; }
  .doc__sec h2 { font-size: 1.14rem; }
  .doc__short { padding: 18px 20px; }
}
@media (max-width: 620px) {
  main.doc { padding-top: calc(2 * var(--bar-h) + 8px + 2 * var(--bar-inset) + 12px); }
  .doc__head { padding: 20px 18px 18px; }
  .doc__meta { grid-template-columns: 1fr; gap: 2px; }
  .doc__meta dt { margin-top: 6px; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
  .doc__meta dt:first-child { margin-top: 0; }
  .doc__acts .btn { flex: 1 1 auto; justify-content: center; }
  .doc__sec { padding: 26px 0 14px; }
  .doc__sec h2 { gap: 12px; font-size: 1.06rem; }
  .doc__num { min-width: 28px; height: 28px; padding: 0 7px; border-radius: 8px; font-size: .72rem; }
  .doc__body table { font-size: .86rem; }
  .doc__body th, .doc__body td { padding-right: 12px; }
  .totop { right: 12px; bottom: 12px; }
  .totop span { display: none; } .totop { padding: 0 12px; }
}
@media print {
  .bar, .toc, .totop, .doc__progress, .doc__acts, .site-foot { display: none !important; }
  html, body, .view-doc { background: #fff !important; color: #000 !important; }
  main.doc { padding-top: 0; --max: 100%; }
  .doc__grid { display: block; }
  .doc__head, .doc__short { background: none !important; border: 1px solid #bbb; box-shadow: none; backdrop-filter: none; }
  .doc__body, .doc__body p, .doc__body li, .doc__body td, .doc__body th, .doc__meta dd, .doc__meta dt, .doc__kicker, .doc__foot, .doc__sub, .doc__part, .doc__sec h3, .doc__sec h4 { color: #000 !important; }
  .doc__title, .doc__sec h2, .doc__body strong, .doc__body a { color: #000 !important; }
  .doc__num { background: none; box-shadow: none; border: 1px solid #c00; color: #c00 !important; }
  .doc__short-h, .doc__body tr.no td:last-child strong { color: #c00 !important; }
  .doc__sec { break-inside: auto; border-top-color: #ddd; }
  .doc__sec h2 { break-after: avoid; }
}

/* closed notice as a red field (2026-09-25): narrower than the Get everything cards, black ink, same chips as the torrent field */
.note--red { max-width: 760px; margin-left: auto; margin-right: auto; background: var(--red); color: #000; box-shadow: 0 18px 44px -22px rgba(255, 0, 0, .7); }
.note--red .note__ic { background: #000; color: #fff; box-shadow: none; }
.note--red .note__title { color: #000; }
.note--red .note__body p { color: rgba(0, 0, 0, .78); }
.note--red .note__body time, .note--red .note__body p [data-ends-left] { color: #000; }
.note--red .note__body .note__lead { color: #000; font-weight: 700; }
.note--red .note__fine { color: rgba(0, 0, 0, .6); }
.note--red .note__fine a { color: rgba(0, 0, 0, .8); }
.note--red .chip { background: #000; color: #fff; box-shadow: none; }
.note--red .chip .ti { color: var(--red); }
.note--red .chip:hover, .note--red .chip:focus-visible { background: #fff; color: #000; box-shadow: none; }
.note--red .chip:hover .ti { color: #000; }

.note--red { margin-top: 0; }

/* six shelves (2026-09-25): the switcher may wrap on narrow screens; playlist and ebook rows reuse the audio row */
.switch { flex-wrap: wrap; height: auto; min-height: var(--ctl); row-gap: 3px; }
.thumb--book { height: calc(var(--cover) * 1.4); }
.thumb--book img { object-fit: cover; object-position: top; }
.trk--pl li.trk--video .trk__title::after, .trk--pl li.trk--missing .trk__title::after { font: 700 .58rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; margin-left: .6em; color: var(--ink-50); }
.trk--pl li.trk--video .trk__title::after { content: "video · torrent"; }
.trk--pl li.trk--missing .trk__title::after { content: "not matched"; color: var(--red); }
.files--copies { margin: var(--s-2) 0 0; padding: 0; }
.files--copies li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); color: var(--ink-70); }
.files--copies .files__name { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.45; }
.files--copies .files__size { font-variant-numeric: tabular-nums; color: var(--ink-50); white-space: nowrap; }
.switch__where a { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 620px) { .switch__btn { flex: 1 1 30%; } .switch__btn i { display: inline-block; } .files--copies { margin-left: 0; } }   /* the counts stay on phones (owner, 2026-09-25) */

/* the where-line sits under the tabs, never beside them (owner, 2026-09-25: it shoved the buttons sideways) */
.cat__bar { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.switch__where { white-space: normal; }
.terms { margin-top: 0; }   /* the hero no longer has the deep padding the negative margin was pulling into (2026-09-25) */

/* the master real spec on a video row when the site serves a recode (2026-09-25) */
.row__tv { margin: 6px 0 0; font: 700 .68rem/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); }

/* the Liberation Day preview (2026-09-25) */
.clip { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--red); border: 0; color: #fff; box-shadow: 0 0 14px rgba(255, 0, 0, .45); cursor: pointer; padding: 0; transition: transform .12s ease, background .12s ease; }
.clip .i { width: 13px; height: 13px; }
.clip:hover, .clip:focus-visible { transform: scale(1.1); }
.clip.is-on { background: #fff; color: #000; box-shadow: 0 0 0 3px rgba(255, 0, 0, .55); }
.clip.is-on .i--play { display: none; }
.clip:not(.is-on) .i--pause { display: none; }
.trk--clip li { position: relative; grid-template-columns: 2em 32px minmax(0, 1fr) auto; }
.clip__bar { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--red); width: 0; }
.trk__title small { font: 600 .62rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); margin-left: .6em; }
.soon { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); color: rgba(255, 255, 255, .75); font: 700 .68rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; background: none; cursor: pointer; }
.soon .i { width: 16px; height: 16px; }
.soon:hover, .soon:focus-visible { background: #fff; color: #000; box-shadow: none; }
.soon-box { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.soon-box[hidden] { display: none; }
.soon-box__card { max-width: 440px; padding: 26px 26px 24px; border-radius: 18px; background: #0b0b0b; box-shadow: inset 0 0 0 1.5px var(--red), 0 30px 80px -30px #000; color: #fff; }
.soon-box__card h3 { margin: 0 0 10px; font: 800 1.05rem/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.soon-box__card p { margin: 0 0 10px; font: 400 1rem/1.55 var(--body); color: var(--ink-70); }
.soon-box__act { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; align-items: center; }
.soon-box__act .btn--primary { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--red); color: #fff; text-decoration: none; font: 700 .7rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.soon-box__act button { background: none; border: 0; color: #fff; font: 600 .9rem var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }
#cat-loading[hidden] { display: none; }

/* play over the cover: on hover (desktop), always in the corner (touch) */
.row--audio .thumb { position: relative; }
.thumb__play { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: inherit; background: rgba(0, 0, 0, .5); cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.thumb__btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 0 22px rgba(255, 0, 0, .6); }
.thumb__btn .i { width: 18px; height: 18px; }
.thumb__play.is-on .i--play, .clip.is-on .i--play { display: none; }
.thumb__play:not(.is-on) .i--pause { display: none; }
.row--audio:hover .thumb__play, .thumb__play:focus-visible, .thumb__play.is-on { opacity: 1; }
.thumb__play.is-on .thumb__btn { background: #fff; color: #000; }
@media (hover: none) {
  .thumb__play { opacity: 1; background: none; place-items: end; padding: 6px; }
  .thumb__btn { width: 34px; height: 34px; }
  .thumb__btn .i { width: 14px; height: 14px; }
}

/* 2026-09-26: rows drawn at full size straight away (no deferred rendering), so the page length doesn't jump as rows appear */
#catalogue .row { content-visibility: visible; contain-intrinsic-size: none; }