/* ==========================================================================
   DORK — site stylesheet
   One file, cascade layers, every decision made once:
     tokens      colour, type, space, shape, motion
     pairs       colour pairs: any surface takes one with data-pair
     base        elements and utilities
     layout      the 12-column grid, sections, balance
     components  the reusable parts: type, labels, buttons, pictures, card, tile, list row, name/detail, logos
     chrome      the site frame on every page: strip, bar, drawers, radio, Top 10, ticker, ads, footer
     sections    what is genuinely unique to a homepage section
     states      dark mode, reduced motion, print
   To change a colour, a size or a curve, change a token. Later layers beat earlier ones whatever the specificity,
   so a section can adjust a component without !important.
   ========================================================================== */
@layer tokens, pairs, base, layout, components, chrome, sections, templates, states;

/* ================================================================ tokens */
@layer tokens {
  :root {
    /* palette */
    --green: #aefb01;   /* the app's lime (band-colours-n1, 30 Oct): the green accent on ink and violet, and Hype's field */ --electric: #0000ff; --blue: #0a45eb; --yellow: #fdf52d; --orange: #fd5500; --violet: #4a0ff5;
    --pink: #f5157a; --lime: #aefb01; --coral: #ff5c7a; --navy: #062a9a; --red: #e0103a; --black: #0a0a0a; --white: #fff;
    /* surfaces (flip in dark mode) */
    --paper: #fff; --paper-2: #f3f2ee; --ink: #0a0a0a; --ink-2: #5b5b58; --rule: #e3e2dd;
    /* greys on permanently black surfaces (strip, radio, footer): these never flip */
    --dk-rule: #2e2e2e; --dk-mute: #8f8f8b; --dk-hover: #1f1f1f;
    /* type */
    --f-display: Brunson, Impact, "Arial Narrow", sans-serif;
    --f-sans: Geist, "Helvetica Neue", Arial, sans-serif;
    --f-ui: Inter, Geist, "Helvetica Neue", Arial, sans-serif;
    --f-serif: Newsreader, Georgia, serif;
    --f-mono: "Silka Mono", "Geist Mono", ui-monospace, Menlo, monospace;   /* Silka Mono: the mono everywhere, as the app (Stephen) */
    --f-black: Amador, "UnifrakturMaguntia", serif;   /* Amador: the house blackletter on site and app (Stephen 29 Oct) */
    --t-hero: clamp(56px, 5.6vw, 104px);
    --t-band: clamp(72px, 8.9vw, 128px);   /* section-heading-n5: 128px on bands at 1440 */
    --t-flow: clamp(52px, 6.7vw, 96px);   /* 96px on white units at 1440 */
    --t-b: clamp(32px, 2.7vw, 46px);
    --t-xl: clamp(34px, 3.3vw, 56px);
    --t-l: clamp(22px, 1.8vw, 28px);
    --t-m: clamp(19px, 1.45vw, 22px);
    --t-s: 16.5px;
    --t-dek: clamp(17px, 1.3vw, 20px);
    --t-n: 10.5px;
    /* space */
    --m: clamp(16px, 2.6vw, 40px);           /* page margin */
    --g: clamp(20px, 2.2vw, 36px);           /* column gap */
    --g-s: clamp(14px, 1.4vw, 22px);         /* tight gap */
    --sec-y: clamp(56px, 5.8vw, 100px);      /* section padding */
    --bar: 68px; --strip: 40px; --hd: calc(var(--strip) + var(--bar)); --sticky-top: var(--hd);   /* --hd: the pinned header, strip and masthead together */
    /* shape: images are never rounded; only controls and interface panels */
    --r-ui: 12px; --r-pill: 999px; --r-tile: 8px;
    /* the Dork wordmark's proportions (img/dork-wordmark.png, set as --wordmark by the page) */
    --wm-ar: 4.1451;
    /* motion */
    --ease: cubic-bezier(.23, 1, .32, 1);          /* strong ease-out: anything entering or answering a press */
    --ease-io: cubic-bezier(.77, 0, .175, 1);      /* ease-in-out: things moving on screen (a row sliding along) */
    --ease-drawer: cubic-bezier(.32, .72, 0, 1);   /* panels and sheets */
    --t-press: 120ms; --t-fast: 150ms; --t-mid: 220ms;
  }
}

/* ================================================================ colour pairs
   --bg ground · --fg text · --dp display (big titles) · --ac accent (stops, stars) · --bb/--bf button
   Override any of them per act from the CMS with --act-bg / --act-dp etc. on the element. */
@layer pairs {
  [data-pair] { --bg: var(--act-bg, var(--pg)); --fg: var(--act-fg, var(--pt)); --dp: var(--act-dp, var(--pd)); --ac: var(--act-ac, var(--pa));
    --bb: var(--act-bb, var(--pbb)); --bf: var(--act-bf, var(--pbf)); --line: color-mix(in srgb, var(--fg) 22%, transparent);
    background: var(--bg); color: var(--fg); }
  [data-pair="paper"]  { --pg: var(--paper); --pt: var(--ink); --pd: var(--ink); --pa: var(--blue); --pbb: var(--ink); --pbf: var(--paper); }
  [data-pair="ink"]    { --pg: var(--black); --pt: #fff; --pd: #fff; --pa: var(--green); --pbb: var(--green); --pbf: var(--black); }
  [data-pair="blue"]   { --pg: var(--blue); --pt: #fff; --pd: var(--yellow); --pa: var(--yellow); --pbb: var(--yellow); --pbf: var(--black); }   /* ink on the yellow button, as the app */
  [data-pair="orange"] { --pg: var(--orange); --pt: var(--black); --pd: var(--black); --pa: var(--black); --pbb: var(--black); --pbf: #fff; }   /* the app's pair: ink button, white words */   /* all type black: nothing else reads on orange */
  [data-pair="pink"]   { --pg: var(--pink); --pt: var(--black); --pd: var(--black); --pa: var(--black); --pbb: var(--black); --pbf: #fff; }   /* as the app: all type ink on pink (Stephen 29 Oct: the app's pairs win) */
  [data-pair="green"], [data-pair="lime"] { --pg: var(--lime); --pt: var(--black); --pd: var(--violet); --pa: var(--violet); --pbb: var(--black); --pbf: #fff; }   /* the app's lime pair */
  [data-pair="electric"] { --pg: var(--blue); --pt: #fff; --pd: #fff; --pa: var(--yellow); --pbb: var(--yellow); --pbf: var(--black); }   /* Dork Live, as the app: white type, yellow button */
  [data-pair="violet"] { --pg: var(--violet); --pt: #fff; --pd: var(--green); --pa: var(--green); --pbb: var(--green); --pbf: var(--black); }
  [data-pair="coral"]  { --pg: var(--coral); --pt: var(--black); --pd: var(--navy); --pa: var(--navy); --pbb: var(--black); --pbf: #fff; }   /* button ink, as the app */
  [data-pair="yellow"] { --pg: var(--yellow); --pt: var(--black); --pd: var(--black); --pa: var(--blue); --pbb: var(--black); --pbf: var(--yellow); }
  [data-pair="navy"]   { --pg: var(--navy); --pt: #fff; --pd: #fff; --pa: var(--green); --pbb: #fff; --pbf: var(--navy); }   /* accent green, as the app */
  [data-pair="red"]    { --pg: var(--red); --pt: #fff; --pd: #fff; --pa: var(--black); --pbb: var(--black); --pbf: #fff; }
}

/* ================================================================ base */
@layer base {
  @font-face { font-family: Brunson; src: url(fonts/brunson-regular.woff2?v=caps) format("woff2"); font-display: swap; }
  @font-face { font-family: Geist; src: url(fonts/geist-variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
  @font-face { font-family: Newsreader; src: url(fonts/newsreader-variable.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
  @font-face { font-family: "Geist Mono"; src: url(fonts/geist-mono-variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
  @font-face { font-family: Amador; src: url(fonts/amador.woff2?v=caps) format("woff2"); font-display: swap; }
  @font-face { font-family: "Silka Mono"; src: url(fonts/silka-mono-medium.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }   /* one cut (Medium), as the app ships */
  *, *::before, *::after { box-sizing: border-box; }
  :root { color-scheme: light; accent-color: var(--ink); }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 12px); }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }   /* in-page jumps (A–Z, contents) glide; the script asks for instant where it must */
  body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--f-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; font-synthesis-weight: none; }   /* no faux bold: every weight used is a real one */
  :where(h1, h2, h3, h4) { text-wrap: balance; } :where(p, li, figcaption, blockquote) { text-wrap: pretty; }   /* no orphans in running text, even lines in headings */
  :where(time) { font-variant-numeric: tabular-nums; }
  :where(a, button, summary, label, [role="button"]) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }   /* no grey flash, no double-tap delay */
  :where(h1, h2, h3, p, ol, ul, figure, blockquote) { margin: 0; padding: 0; }
  :where(ol, ul) { list-style: none; }
  a { text-decoration: none; } a:not([data-pair]) { color: inherit; }   /* a link that is its own colour pair keeps the pair's text colour */
  img { display: block; max-width: 100%; }
  button, input { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
  input { width: 0; }   /* inputs size from their flex or grid track, never from their own default width */
  input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }   /* no browser-blue clear cross: Esc clears */
  :focus-visible { outline: 2px solid var(--fg, var(--blue)); outline-offset: 3px; border-radius: 2px; }
  :where(.btn, .chip, .pill, .icb, .shopb, .plusb, .edsel__b, .strip__ic):focus-visible { outline-offset: 2px; border-radius: var(--r-pill); }   /* rings follow the shape of what's pressed */
  main:focus { outline: none; }
  ::selection { background: var(--green); color: var(--black); }
  [hidden] { display: none !important; }
  :root[data-locked] { overflow: hidden; }   /* the mobile menu is open */
  /* utilities */
  .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hscroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .hscroll::-webkit-scrollbar { display: none; }
  .ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ic--s { width: .7em; height: .7em; }
  .ic--back { transform: rotate(180deg); }
  /* paired icons: one shows per state */
  .i-sun, .i-pause, .i-close { display: none; }
  :root[data-theme="dark"] .i-moon { display: none; } :root[data-theme="dark"] .i-sun { display: block; }
  :root[data-radio] [data-radio-toggle] .i-play { display: none; } :root[data-radio] [data-radio-toggle] .i-pause { display: block; }
  @keyframes pulse { 50% { opacity: .25; } }
  @keyframes drop { from { opacity: 0; transform: translateY(-4px); } }
  @keyframes pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
  @keyframes fade { from { opacity: 0; } }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}

/* ================================================================ layout */
@layer layout {
  .page, .sec--flow { background: var(--paper); color: var(--ink); }   /* every surface names its own ground, so dark mode never depends on body */
  .wrap { padding-inline: var(--m); }
  /* the grid: children span --s columns, --s-md under 1100px, --s-sm under 640px (set with at() in ui.py) */
  .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 44px; }
  .grid > * { grid-column: span var(--s, 12); min-width: 0; }
  .grid--in { column-gap: var(--g-s); row-gap: 36px; }
  .row4, .row5 { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line, var(--rule)); }
  .row5 { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--g-s); }
  .grid.row5 > * { grid-column: auto; }   /* row5 sets its own columns at every width */
  /* balance: columns stretch to the tallest; lists become equal-height rows; stacks spread; .push sits at the foot */
  .bal { align-items: stretch; }
  .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .col > .grid--in { flex: 1 1 auto; align-content: space-between; }
  .stack { justify-content: space-between; gap: 32px; }
  @media (min-width: 1101px) {
    .bal > :is(.stack, .lead) { container-type: inline-size; }
    .bal > .stack > .card, .bal > .lead > .card { flex: 1 1 auto; display: flex; flex-direction: column; } .bal > :is(.stack, .lead) > .card > .ph { flex: 1 1 auto; max-height: 100cqi; }   /* up to square, never taller */
  }   /* when a stack is shorter than its row, the pictures take up the slack (cropped round their focal point) rather than leaving a hole between cards */
  .lead { gap: 0; }
  .push { margin-top: auto; }
  .rows { display: flex; flex-direction: column; flex: 1 1 auto; }
  .rows > li { flex: 1 1 0; display: flex; }
  .rows > li > * { flex: 1; }
  .rows > li + li { border-top: 1px solid var(--line, var(--rule)); }
  .bal .rows > li:last-child, .bal .rel > li:last-child { border-bottom: 1px solid var(--line, var(--rule)); }   /* in a balanced grid a list closes with a rule on the column's last line, so every column visibly ends level */
  .bal .rows.rows--colhead > li:last-child { border-bottom: 0; }   /* unless another list's heading follows: its own rule closes it */
  @media (max-width: 640px) { .trim > li:nth-child(n+5) { display: none; } }   /* long lists: phones show the first four; the section's link has the rest */
  .rows--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); }
  .rows--2 > li, .rows--2 > li + li { border-top: 1px solid var(--line, var(--rule)); }
  @media (max-width: 640px) { .rows--2 { grid-template-columns: minmax(0, 1fr); } }
  .rows--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); }
  .rows--3 > li, .rows--3 > li + li { border-top: 1px solid var(--line, var(--rule)); }   /* every item carries its own rule, so each column's lines join up */
  /* a fixed 2×2: shared rows, so the tops of pictures and headlines align across both columns; spare height goes between the rows */
  .quad { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 28px var(--g); align-content: space-between; height: 100%; }
  /* a list split into two columns, filled down then across */
  .ranked { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: clamp(28px, 3vw, 56px); border-top: 2px solid currentColor; }
  .ranked > li { border-bottom: 1px solid var(--rule); }
  /* sections */
  .sec { padding-block: var(--sec-y); }
  .sec--flow + .sec--flow { padding-top: 0; }
  .sec--top { padding-bottom: 0; } .sec--top .flt { margin-bottom: 0; border-bottom: 0; padding-bottom: clamp(28px, 3vw, 44px); }   /* a page head that is only a title and its filters sits close to what it filters */
  .sec--tight { padding-block: clamp(40px, 4vw, 64px); }
  @media screen { html:not(.shot) .sec { content-visibility: auto; contain-intrinsic-size: auto 1000px; } }   /* sections off screen skip rendering until they're near: a long page stays quick */
  .sh { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-top: 18px; background: linear-gradient(var(--sh-rule, currentColor) 0 0) 0 0 / 100% 2px no-repeat; margin-bottom: clamp(28px, 2.8vw, 44px); }   /* the 2px rule is painted, not a border, so it can draw itself in */
  @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
    .sh { animation: sh-rule linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }   /* the rule draws across as the section comes up the screen, tied to the scroll so it never runs on its own */
  } }
  @keyframes sh-rule { from { background-size: 12% 2px; } }
  @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
    :is(.sh__t, .pq p) { animation: sh-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }   /* the title rises onto its rule as the section comes up */
  } }
  @keyframes sh-rise { from { translate: 0 .3em; } }
  .sh__t { font: 400 var(--head, var(--t-flow))/.82 var(--f-display); text-transform: uppercase; letter-spacing: 0; word-spacing: -.04em; margin-top: 4px; color: var(--dp, inherit); text-wrap: balance; }
  .sec--band .sh__t { --head: var(--t-band); line-height: .8; }
  .sh__a { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; justify-content: flex-end; padding-bottom: 8px; text-align: right; }
  .sec--band .sh__a { flex-direction: column; align-items: flex-end; }
  .stop { color: var(--ac, var(--blue)); }
  .sec--flow .stop { color: var(--blue); }
  .sh--k { flex-wrap: wrap; }   /* section-heading-n5: the strapline as a mono kicker over the title, led by a 28px rule */
  .sh__k { flex: 0 0 100%; display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; font: 500 var(--t-n)/1.35 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; text-align: left; }
  .sh__k::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
  .sh__k > .n { font: inherit; letter-spacing: inherit; }
  @media (min-width: 641px) { .sh { flex-wrap: wrap; } .sh__t { flex-shrink: 0; max-width: 100%; } .sh__a { margin-left: auto; } }   /* the aside drops below rather than squeeze the header onto two lines */
  @media (max-width: 1100px) {
    .grid > * { grid-column: span var(--s-md, 12); }
    .row5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stack { justify-content: flex-start; }
    .rows--3 { grid-template-columns: 1fr 1fr; }
    .ranked { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  }
  @media (max-width: 640px) {
    .grid > * { grid-column: span var(--s-sm, 12); } .grid { row-gap: 36px; }
    .row5 { grid-template-columns: 1fr 1fr; }
    .grid--in .dek { display: none; } .grid--in { row-gap: 28px; }
    .rows--3 { grid-template-columns: 1fr; }
    .sh { flex-direction: column; align-items: flex-start; } .sh__a, .sec--band .sh__a { align-items: center; justify-content: flex-start; text-align: left; flex-direction: row; }
    .sh__t { --head: 52px; } .sec--band .sh__t { --head: 72px; }
  }
  @media (max-width: 359px) { .sh__t { --head: 46px; } .sec--band .sh__t { --head: 62px; } }   /* the smallest phones: a long word (CONTRIBUTING) still fits */
}

/* ================================================================ components */
@layer components {
  /* ---------- type */
  .n { font: 500 var(--t-n)/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }   /* mono annotation */
  .bl { font-family: var(--f-black); font-weight: 400; text-transform: uppercase; letter-spacing: 0; font-size: 1em; line-height: 0; -webkit-text-stroke: .04em currentColor; paint-order: stroke fill; }   /* Amador has one cut with hairline strokes: a stroke in the letter's own colour brings it up to Brunson's weight (Stephen 30 Oct: titles always bold) */   /* blackletter swap: Amador, in every eligible word (blackletter-n4) */
  .t { display: block; text-wrap: balance; hanging-punctuation: first; overflow-wrap: break-word; }
  .t--hero { font: 400 var(--t-hero)/.88 var(--f-display); text-transform: uppercase; word-spacing: -.04em; color: var(--dp, inherit); }
  .t--b { font: 400 var(--t-b)/.9 var(--f-display); text-transform: uppercase; word-spacing: -.04em; color: var(--dp, inherit); }
  .t--xl { font: 750 var(--t-xl)/1 var(--f-sans); letter-spacing: -.045em; }
  .t--l { font: 700 var(--t-l)/1.08 var(--f-sans); letter-spacing: -.035em; }
  /* card-headline-n2: lead and large story cards set in Brunson capitals, like the heroes; M and S cards stay Geist */
  .card .t--xl { font: 400 clamp(40px, 4vw, 64px)/.88 var(--f-display); text-transform: uppercase; letter-spacing: 0; word-spacing: -.04em; }
  .card .t--l { font: 400 clamp(28px, 2.4vw, 38px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: 0; word-spacing: -.04em; }
  @media (max-width: 640px) { .card .t--xl { font-size: 40px; } .card .t--l { font-size: 30px; } }
  .t--m { font: 700 var(--t-m)/1.14 var(--f-sans); letter-spacing: -.028em; }
  .t--s { font: 650 var(--t-s)/1.24 var(--f-sans); letter-spacing: -.018em; text-wrap: pretty; }
  /* Hover underline, drawn relative to the text and never by adding line-height: the bar sits --u-y above the bottom of the
     font's content box, just under the descenders and clear of the next line's capitals at every title size. */
  .u { --u-w: max(2px, .05em); --u-y: .1em; background: linear-gradient(currentColor, currentColor) 0 calc(100% - var(--u-y)) / 0 var(--u-w) no-repeat; transition: background-size var(--t-mid) var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  @media (hover: hover) and (pointer: fine) { a:hover .u, button:hover .u { background-size: 100% var(--u-w); } }
  .n .u { --u-w: 1px; --u-y: 0px; }   /* small capitals take a hairline */
  .hang { --hang: .45em; margin-left: max(calc(var(--hang) * -1), calc(var(--m) * -1)); } .hang--1 { --hang: .22em; }   /* an opening quote hangs in the margin (see hang() in ui.py) */
  .t--hero .hang, .t--b .hang { --hang: .36em; } .t--hero .hang--1, .t--b .hang--1 { --hang: .17em; }
  .dek { font: 420 var(--t-dek)/1.46 var(--f-serif); letter-spacing: -.005em; font-optical-sizing: auto; text-wrap: pretty; }   /* the only serif */
  .acc { color: var(--ac); }
  /* name and detail: a bold line over a quieter one (tracks, albums, gigs, products, books, playlists) */
  .nd > b { display: block; font: 700 var(--nd-b, 15px)/1.2 var(--f-sans); letter-spacing: -.015em; }
  .nd > i { display: block; font: 400 var(--nd-i, 13.5px)/1.3 var(--f-sans); font-style: normal; opacity: .7; }

  /* ---------- labels (pills), links (chips), buttons, quiet links */
  .pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px currentColor; font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
  .pill--f { box-shadow: none; background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); }
  .sec--flow .pill--f { background: var(--ink); color: var(--paper); }
  .pill--w { color: #fff; height: 26px; padding: 0 12px; }
  .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px currentColor; font: 700 11px/1 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-press) var(--ease); }
  .chip:active { transform: scale(.96); }
  .chip i { font: 700 9px/1 var(--f-ui); font-style: normal; letter-spacing: .06em; padding: 3px 5px; margin-left: 2px; border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 12%, transparent); }   /* a count */
  .chip:is([aria-current="true"], [aria-pressed="true"]) { background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); }
  @media (hover: hover) and (pointer: fine) { .chip:hover { background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); } }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--r-pill); background: var(--bb, var(--ink)); color: var(--bf, var(--paper)); font: 500 12px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transition: transform 200ms var(--ease), background-color var(--t-fast) ease, color var(--t-fast) ease; align-self: flex-start; }
  .btn:active { transform: scale(.97); transition-duration: 100ms; }
  .btn .ic { width: 14px; height: 14px; }
  .btn--s { height: 38px; padding: 0 16px; font-size: 12px; }   /* buttons-n3: the app's PillButton, one size */
  .btn .mk { --cap: 8.5px; } .rel .mk { --cap: 11px; }   /* a strand's logo standing in for its name */
  .btn--ghost { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
  .btn--green { background: var(--green); color: var(--black); }
  .sec--flow .btn:not(.btn--ghost):not(.btn--green) { background: var(--ink); color: var(--paper); }
  .more { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--t-n)/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
  .more .ic { width: 13px; height: 13px; }
  .btn .ic--arrow, .more .ic, .rel .ic { transition: transform var(--t-mid) var(--ease); }
  @media (hover: hover) and (pointer: fine) { .btn:hover .ic--arrow, .more:hover .ic, .rel a:hover .ic { transform: translateX(3px); } }
  .colhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0 12px; border-top: 2px solid currentColor; }
  .rel { margin-top: auto; padding-top: 20px; }   /* related links at the foot of a lead */
  .rel li { border-top: 1px solid var(--line, var(--rule)); }
  .rel a { display: flex; align-items: center; gap: 10px; padding: 12px 0; font: 650 15px/1.25 var(--f-sans); letter-spacing: -.012em; }
  .rel .ic { width: 14px; height: 14px; opacity: .55; }
  @media (hover: hover) and (pointer: fine) { .rel a:hover .ic { opacity: 1; } }
  .score { display: inline-flex; gap: .12em; font-size: 15px; color: var(--ac, var(--violet)); }   /* whole stars only */
  .score svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .score svg.on { fill: currentColor; }
  :root[data-theme="dark"] .score:not([data-pair] *) { color: var(--green); }   /* violet stars sink into the dark ground; on a colour band they keep the band's accent */
  .score--l { font-size: 36px; }
  :is(.score--l, .score--xl) { clip-path: inset(0 -2px); transition: clip-path 700ms var(--ease-io) 250ms; }   /* a big rating fills in from the first star as the page arrives */
  @starting-style { :is(.score--l, .score--xl) { clip-path: inset(0 100% 0 -2px); } }
  @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
    .rv .score--l { transition: none; animation: stars-fill linear both; animation-timeline: view(); animation-range: entry 60% cover 40%; }   /* further down a page, the stars fill as they come into view */
  } }
  @keyframes stars-fill { from { clip-path: inset(0 100% 0 -2px); } }
  .live { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--red); color: #fff; font: 500 10px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
  .live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
  .live--green { background: var(--green); color: var(--black); }
  .key { display: inline-flex; align-items: center; gap: 5px; } .key .ic, .here .ic { width: 13px; height: 13px; stroke-width: 2; color: var(--red); }   /* the local pin, and its key */
  .here { display: inline-flex; }
  .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 22px; }   /* label, strand, date, local pin */
  .meta time, .meta .n { opacity: .7; }
  .sec--band :is(.meta time, .meta .n, .nd > i), [data-pair]:not([data-pair="paper"]) > :is(.meta, .hero__box .meta) :is(time, .n), .hero__box .meta .n { opacity: 1; }   /* on colour, quieter type keeps full strength: it's the size and face that make it quieter */
  .row > .meta:empty, .lrow__x > .meta:empty { display: none; }   /* in a list, a line with nothing left to say goes; in a grid of cards it stays, so headlines side by side still line up */
  .stack > .card > .meta:empty, .lead > .card > .meta:empty { display: none; }   /* a card with nothing beside it has nothing to line up with */
  @media (min-width: 1101px) { .bare-l > .meta { display: none; } }   /* a whole row of cards with nothing to say (aligned() in ui.py) */
  @media (min-width: 641px) and (max-width: 1100px) { .bare-m > .meta { display: none; } }
  @media (max-width: 640px) { .bare-s > .meta { display: none; } }
  time.is-new::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1.5px var(--ink); vertical-align: 1px; }   /* new since your last visit */
  .date { display: grid; justify-items: center; align-content: center; width: 60px; padding: 8px 0 7px; border-radius: var(--r-tile); background: var(--dp, var(--ink)); color: var(--bg, var(--paper)); line-height: 1; flex: none; }
  .date i { font: 500 9.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; }
  .date b { font: 400 32px/.9 var(--f-display); margin: 3px 0 2px; }
  .date--l { width: 80px; } .date--l b { font-size: 46px; }

  /* ---------- logos. Supplied artwork is a mask (.wm is the Dork wordmark, .lg the others), so every logo takes the text colour. */
  .wm, .lg { background: currentColor; -webkit-mask: var(--src, var(--wordmark)) var(--mpos, center) / contain no-repeat; mask: var(--src, var(--wordmark)) var(--mpos, center) / contain no-repeat; }
  .dlogo { --h: .72em; display: inline-block; height: var(--h); width: calc(var(--h) * var(--wm-ar)); vertical-align: 0; }   /* the wordmark as a word: cap height of the text around it */
  .sh__t .dlogo { --h: .74em; margin-right: .06em; }
  .pmk { --h: 17px; display: inline-flex; align-items: center; gap: calc(var(--h) * .16); height: var(--h); }   /* Dork+ */
  .pmk__w { width: calc(var(--h) * var(--wm-ar)); height: var(--h); }
  .pmk__p { --t: calc(var(--h) * .3); --c: var(--pmk-plus, var(--green)); width: calc(var(--h) * .86); height: calc(var(--h) * .86); background: linear-gradient(var(--c), var(--c)) center / 100% var(--t) no-repeat, linear-gradient(var(--c), var(--c)) center / var(--t) 100% no-repeat; }
  .pmk--l { --h: clamp(40px, 3.6vw, 54px); }
  .btn--green .pmk { --pmk-plus: var(--black); }
  .lg { --h: calc(var(--lgcap, .72em) / var(--capr)); display: inline-block; height: var(--h); width: calc(var(--h) * var(--ar)); vertical-align: calc(var(--h) * var(--desc) * -1); }   /* sized from the cap height; descenders hang */
  .lg--upset { --src: url(img/logo-upset.png); --ar: 4.4733; --capr: 1; --desc: 0; }
  .lg--hype  { --src: url(img/logo-hype.png);  --ar: 2.2033; --capr: .715; --desc: .256; }
  .lg--play  { --src: url(img/logo-play.png);  --ar: 1.4467; --capr: .56; --desc: .4; }
  .sh__t .lg { --lgcap: .74em; }
  /* strand marks: logos only, one cap height (--cap) */
  .mk { --cap: 9.5px; display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; font-size: calc(var(--cap) / .73); color: currentColor; }
  .mk i { font-style: normal; }
  .mk .lg { --lgcap: var(--cap); }
  .mk--popshop { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .02em; }   /* POPSHOP: Brunson capitals with one Amador swap (never the first or last letter); interim mark, 31 Oct */
  .mk--alright { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .015em; }
  .mk--sleeve { font-family: var(--f-serif); font-style: italic; font-weight: 500; letter-spacing: -.025em; text-transform: lowercase; font-size: calc(var(--cap) / .74); }
  .mk--popshop { --mk-c: var(--pink); } .mk--alright { --mk-c: #c9b400; } .mk--loop { --mk-c: var(--violet); } .mk--sleeve { --mk-c: var(--navy); } .mk--upset { --mk-c: var(--red); }
  :root[data-theme="dark"] :is(.mk--alright) { --mk-c: var(--yellow); } :root[data-theme="dark"] .mk--sleeve { --mk-c: #6f8cff; } :root[data-theme="dark"] .mk--loop { --mk-c: #9b7bff; } :root[data-theme="dark"] .mk--popshop { --mk-c: #ff4d9a; }
  .mk { transition: color var(--t-fast) ease; }
  @media (hover: hover) and (pointer: fine) { .sec--flow a:hover > .meta .mk, .sec--flow a:hover .row .meta .mk, .sec--flow .row:hover .mk { color: var(--mk-c, currentColor); } }   /* on a plain page, the story you point at shows its strand in colour */
  .mk--etc { font-family: var(--f-ui); font-weight: 700; letter-spacing: -.045em; text-transform: lowercase; }   /* as on readdork.com/etc */
  .mk--head { font-size: 1.08em; line-height: .8; letter-spacing: -.06em; }   /* etc. as a section header */
  .mk__loop { width: auto; height: calc(var(--cap) * 1.15); aspect-ratio: 2 / 1; stroke-width: 2.6; }

  /* ---------- pictures: never rounded, never animated */
  .ph { position: relative; overflow: hidden; aspect-ratio: var(--r, 3/2); background: var(--tone, color-mix(in srgb, currentColor 8%, transparent)); }   /* --tone: the photo's average colour, set at build, so a loading frame is never a grey box */
  img[loading="lazy"] { transition: opacity 420ms var(--ease); } img[data-wait] { opacity: 0; }   /* see site.js: late photos fade up */
  .ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 40%); }
  .ph--contain img { object-fit: contain; background: #111; }

  /* ---------- the story card */
  .card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .card > .ph { margin-bottom: 6px; }
  .card .dek { margin-top: 2px; }
  @media (min-width: 1101px) {   /* a 2×2 in a balanced row shares its rows (subgrid): pictures side by side stay one height, take up any slack, and the text beneath starts level */
    .bal .quad.quad--3.quad--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr auto auto; }
    .bal .quad.quad--3.quad--3 > .card { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 10px; }
    .bal .quad.quad--3.quad--3 > .card > .ph { align-self: stretch; width: 100%; }
  }
  .card--lead .dek { font-size: clamp(18px, 1.35vw, 21px); }
  .card--lead .t--xl, .card--lead .t--l { margin-top: 2px; }

  /* ---------- the tile: a small picture-led item. The picture always sits 10px above the text, whatever the gap. */
  .tile { --tile-g: 6px; position: relative; display: flex; flex-direction: column; gap: var(--tile-g); min-width: 0; text-align: left; }
  .tile.nd { --tile-g: 4px; }
  .tile > .ph { margin-bottom: calc(10px - var(--tile-g)); }

  /* ---------- the list row: something fixed-width on the left, text beside it, an optional tail */
  .lrow { display: grid; grid-template-columns: var(--cols, 38% minmax(0, 1fr)); gap: var(--lrow-g, 18px); align-items: center; width: 100%; padding: var(--lrow-y, 14px) 0; text-align: left; }
  .lrow__x { display: grid; gap: 6px; min-width: 0; } .lrow__x.nd { gap: 0; }
  .lrow--l { --cols: 44% minmax(0, 1fr); }
  .lrow--date { --cols: 60px minmax(0, 1fr) auto; }
  .lrow--time { --cols: 50px minmax(0, 1fr) auto; --lrow-g: 10px; --lrow-y: 10px; --nd-i: 13px; }
  .lrow--art { --cols: 40px minmax(0, 1fr) auto; --lrow-g: 12px; --lrow-y: 8px; }
  .lrow--ep { --cols: 64px minmax(0, 1fr) auto 36px; --lrow-g: 16px; --lrow-y: 12px; } .lrow--ep .lrow__x { gap: 4px; }
  .lrow--date > .pill { justify-self: start; }
  /* a round play button at the end of a row: it fills when the row is pointed at, on any ground */
  .prow__p { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
  .prow__p .ic { width: 13px; height: 13px; }
  @media (hover: hover) and (pointer: fine) { .lrow:hover .prow__p { background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); box-shadow: none; } }
  @media (max-width: 640px) { .lrow { grid-template-columns: var(--cols-sm, var(--cols, 110px minmax(0, 1fr))); } .lrow--date { --cols-sm: 56px minmax(0, 1fr); } .lrow--date > .pill { grid-column: 2; } }   /* --cols-sm: a row's columns on phones */
  /* a text-only story */
  .row { display: grid; align-content: center; gap: 7px; padding: 14px 0; }
  .colhead + .rows > li:first-child > .row { padding-top: 4px; }
  .rows--guide { counter-reset: guide; } .rows--guide > li { counter-increment: guide; }   /* a run of guides is numbered, and set a size up: they're the reason the page exists */
  .rows--guide .row::before { content: "Guide " counter(guide, decimal-leading-zero); font: 500 var(--t-n)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
  .rows--guide .t--s { font: 700 var(--t-m)/1.14 var(--f-sans); letter-spacing: -.025em; text-wrap: balance; }   /* the list's own heading already spaces it from the rule */
  /* an album: title and artist, date on the right */
  .alb { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-content: center; padding: 11px 0; --nd-b: 15.5px; }
  .alb > i { grid-column: 1; } .alb .n { grid-column: 2; grid-row: 1 / span 2; align-self: center; opacity: .7; }

  /* ---------- covers */
  .covs { display: grid; gap: var(--g-s); }
  .covs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .covs--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cov { --tile-g: 8px; }
  :is(.cov, .prod, .pzs__r) > .ph { box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 14px 24px -16px rgba(0,0,0,.5); transition: box-shadow var(--t-mid) var(--ease); }   /* covers are printed things: they sit on the page, and lift a little under the pointer */
  @media (hover: hover) and (pointer: fine) { :is(.cov, .prod, .pzs__r):hover > .ph { box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 24px 34px -18px rgba(0,0,0,.6); } }
  .cov__cap { display: flex; justify-content: space-between; gap: 10px; }   /* an issue cover: the act, then its price */
  .cov__pub { display: flex; align-items: flex-start; height: 24px; font-size: 19px; } .cov__pub .lg { --lgcap: 14px; }   /* the publication's logo, then the act */
  .cov__pub .lg--play { --lgcap: 24px; --capr: 1; }   /* the badges sit on one line; Play is drawn to its full height */
  @media (max-width: 1100px) { .covs--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .covs--4, .covs--6 { grid-template-columns: 1fr 1fr; } }

  /* ---------- products (drawer and shop band) */
  .prod { --nd-b: 16px; }
  .prod .ph { background: var(--paper-2); }
  .prod .ph--contain img { background: transparent; }
  .prod__p { margin-top: auto; padding-top: 6px; font: 800 17px/1 var(--f-ui); letter-spacing: -.01em; }

  /* ---------- panels: interface surfaces you act on, the only rounded ones */
  .panel { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r-ui); background: var(--bg); color: var(--fg); }
  .panel--soft { background: var(--paper-2); color: var(--ink); border-radius: 0; }
  .icb { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: background-color var(--t-fast) ease, transform 200ms var(--ease); }
  .icb .ic { width: 19px; height: 19px; } .icb:active { transform: scale(.92); }
  @media (hover: hover) and (pointer: fine) { .icb:hover, .strip__ic:hover { background: color-mix(in srgb, currentColor 10%, transparent); } }
  /* a search field or email field: a ruled pill with an icon */
  .field, .dsearch { display: flex; align-items: center; gap: 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 2px currentColor; } .field:has(input:focus-visible), .dsearch:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; }   /* the input itself has no outline: the pill shows focus */
  .field .ic, .dsearch .ic { width: 18px; height: 18px; opacity: .6; }
  .field input, .dsearch input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 16px var(--f-sans); outline: none; }

  /* ---------- tabs (strands, Most covered): see tabs() in ui.py */
  .stabs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 2px solid currentColor; }
  .stab { display: inline-flex; align-items: center; height: 56px; padding: 0 22px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 2px currentColor; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, transform 200ms var(--ease); }
  .stab:active { transform: scale(.97); }
  .stab[aria-selected="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
  .sec--flow .stab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  @media (max-width: 640px) { .stabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--m) * -1); padding-inline: var(--m); scroll-padding-inline: var(--m); } .stabs > * { flex: none; } .stab { height: 46px; padding: 0 16px; } }
  .stabs--s { gap: 6px; padding-bottom: 0; margin-bottom: 24px; border-bottom: 0; }
  .stab--s { height: 40px; padding: 0 16px; font: 800 12px/1 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; }
  @media (max-width: 640px) { .stabs--s { display: grid; grid-template-columns: 1fr 1fr; margin-inline: 0; padding-inline: 0; overflow: visible; } .stabs--s > .stab { justify-content: center; } }   /* small tabs come in twos: on phones they sit in full rows, every choice in view */
  .spanel:not([hidden]) { animation: rise 280ms var(--ease); }

  /* ---------- titles set over photographs: tight bars */
  .tb { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font: 400 var(--tb, clamp(64px, 7vw, 150px))/1 var(--f-display); text-transform: uppercase; word-spacing: -.04em; }
  @media (max-width: 1000px) { .tb--long { --tb: clamp(44px, 5.8vw, 64px); } }   /* on tablets a longer line (a quote) steps down so each half stays on one line and clear of the box */
  .tb > span { display: inline-block; padding: 5px 7px; background: var(--bg); color: var(--dp); text-box: trim-both cap alphabetic; }
  .tb .stop { color: var(--ac); }

  /* ---------- the hero: full bleed, title on tight bars on one side, standfirst boxed on the other. Desktop: always 3:2.
     The title sits at the foot of the picture; neither moves as you scroll. */
  .hero { --hero-pad: clamp(28px, 3.4vw, 56px); position: relative; height: max(520px, calc(100svh - 168px)); overflow: clip; isolation: isolate; background: #111;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: 0 var(--m) var(--hero-pad); }
  @media (min-width: 1101px) { .hero { width: 100%; height: auto; aspect-ratio: 3 / 2; } }
  .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 30%); }
  .hero__title { position: relative; z-index: 2; max-width: 60%; }   /* sits at the foot of the picture and stays there: it never rides over faces as you scroll */
  .hero__box { position: absolute; z-index: 2; left: var(--m); bottom: var(--hero-pad); width: min(360px, 28vw); display: grid; gap: 12px; padding: 16px 18px 15px; background: var(--bg); color: var(--fg); }
  .hero__box p { font: 420 16px/1.45 var(--f-serif); } .hero__box b { font: 700 16px/1 var(--f-sans); letter-spacing: -.02em; }
  .hero__box .pill--f { background: var(--fg); color: var(--bg); }
  .hero__go { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: translate var(--t-mid) var(--ease), background-color var(--t-fast) ease, color var(--t-fast) ease; } .hero__go .ic { width: 13px; height: 13px; }
  @media (hover: hover) and (pointer: fine) { .hero__box:hover .hero__go { translate: 3px 0; background: var(--fg); color: var(--bg); box-shadow: none; } }   /* the box says where it goes, and answers the pointer */
  .hero--left { align-items: flex-start; } .hero--left .tb { align-items: flex-start; }
  .hero--left .hero__box { left: auto; right: var(--m); }
  /* arrival: the two title bars wipe in from the side they hang on, one after the other, then the box settles. Once per page, never again on scroll */
  .hero .tb > span { clip-path: inset(0); transition: clip-path 700ms var(--ease-drawer), background-color var(--t-fast) ease, color var(--t-fast) ease; }
  .hero .tb > span + span { transition-delay: 90ms, 0ms, 0ms; }
  @starting-style { .hero .tb > span { clip-path: inset(0 0 0 100%); } .hero--left .tb > span { clip-path: inset(0 100% 0 0); } }
  .hero__box { transition: opacity 500ms var(--ease) 260ms, translate 600ms var(--ease) 260ms; }
  @starting-style { .hero__box { opacity: 0; translate: 0 10px; } }
  @media (hover: hover) and (pointer: fine) { .hero__title:hover .tb > span { background: var(--dp); color: var(--bg); } }
  .hero__box .u { --u-w: 2px; --u-y: .02em; }
  @media (max-width: 1100px) { .hero__box { width: min(360px, 42vw); } }
  @media (max-width: 1100px) and (min-width: 641px) { .hero--slot { height: clamp(560px, 88svh, 920px); } }
  @media (max-width: 640px) { @starting-style { .hero .tb > span { clip-path: inset(0 100% 0 0); } } }   /* one column: every title reads, and arrives, from the left */
  @media (max-width: 640px) {
    .hero { height: auto; padding: 0; align-items: stretch; background: var(--bg); }
    .hero__img { position: relative; height: auto; aspect-ratio: 4/5; object-position: var(--fp-m, var(--fp)); }
    .hero__title, .hero--left .hero__title { position: relative; inset: auto; max-width: none; margin-top: -40px; padding: 0 var(--m); }
    .tb { --tb: 54px; align-items: flex-start; } .tb--long { --tb: 36px; }   /* one column: every title reads from the left */
    .hero__box, .hero--left .hero__box { position: relative; inset: auto; width: auto; padding: 18px var(--m) 24px; }
  }

  /* ---------- the Popzines strip (magazine drawer) */
  .pz { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 22px; padding: 16px 20px; border-radius: var(--r-ui); background: var(--yellow); color: var(--black); }
  .pz__mark { font: 800 30px/1 var(--f-sans); letter-spacing: -.05em; }
  .pz__what { font: 420 16px/1.35 var(--f-serif); max-width: 54ch; }
  .pz__latest { display: flex; align-items: center; gap: 12px; font: 400 13.5px/1.3 var(--f-sans); max-width: 380px; }
  .pz__latest img { width: 72px; aspect-ratio: 3/2; object-fit: cover; flex: none; }
  .pz__latest b { display: block; font-weight: 700; }
  .pz__go { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--black); color: var(--yellow); transition: transform 200ms var(--ease); }
  .pz__go .ic { width: 16px; height: 16px; }
  @media (hover: hover) and (pointer: fine) { .pz:hover .pz__go { transform: translateX(3px); } }
  @media (max-width: 1100px) { .pz { grid-template-columns: auto 1fr auto; } .pz__what { display: none; } }
  @media (max-width: 640px) { .pz { grid-template-columns: 1fr auto; } .pz__latest { grid-column: 1 / -1; grid-row: 2; } }
}

/* ================================================================ chrome: the frame on every page */
@layer chrome {
  /* ---------- strand strip (light, over the masthead; a hairline between them) */
  .strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--strip); padding-inline: var(--m); position: relative; z-index: 45; background: var(--paper); color: var(--ink); box-shadow: inset 0 -1px 0 var(--rule); }
  .strip__l { display: flex; align-items: center; height: 100%; }
  .strip__mk { position: relative; display: flex; align-items: center; height: var(--strip); padding: 0 12px; opacity: .6; transition: opacity var(--t-fast) ease; }
  .strip__mk[aria-current] { opacity: 1; } .strip__mk[aria-current]::after { transform: scaleX(1); }   /* the strand you're in stays lit */
  .strip__mk:first-child { padding-left: 0; }
  .strip__mk .mk { --cap: 12px; }
  /* Dork Radio in the strip: always one press from playing, and the way to the station's page */
  .strip__rd { display: flex; align-items: center; gap: 8px; padding-right: 6px; }
  .strip__rp { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: var(--black); transition: scale var(--t-press) var(--ease), background-color var(--t-fast) ease, color var(--t-fast) ease; }
  .strip__rp .ic { width: 10px; height: 10px; } .strip__rp:active { scale: .9; }
  @media (hover: hover) and (pointer: fine) { .strip__rp:hover { background: var(--black); color: var(--green); } :root[data-theme="dark"] .strip__rp:hover { background: var(--paper-2); } }
  .strip__rl { display: flex; align-items: center; gap: 9px; } .strip__rl .rmk { font-size: 12.5px; } .strip__rl .dlogo { --h: .74em; }
  .strip__on { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); } .strip__on .eq { height: 9px; color: var(--green); } :root:not([data-theme="dark"]) .strip__on .eq { color: #00b300; }
  :root[data-radio] .strip__on { color: var(--ink); }
  @media (max-width: 1240px) { .strip__on { display: none; } } @media (max-width: 1100px) { .strip__r > a.n:last-child { display: none; } }   /* the newsletter link gives way first, then Dork Live; both are in the menu and footer */
  @media (max-width: 1000px) { .strip__lv { display: none !important; } } @media (max-width: 640px) { .strip__rd { display: none; } }   /* phones have the floating pill */
  .strip__mk::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease); }
  .strip__mk:first-child::after { left: 0; }
  .strip__mk.strip__mk--popshop { --mk-c: var(--pink); } .strip__mk.strip__mk--alright { --mk-c: #d8c400; } .strip__mk.strip__mk--loop { --mk-c: var(--violet); } .strip__mk.strip__mk--sleeve { --mk-c: var(--navy); } .strip__mk.strip__mk--upset { --mk-c: var(--red); }
  .strip__mk::after { background: var(--mk-c, var(--green)); }   /* each strand underlines in its own colour */
  :root[data-theme="dark"] .strip__mk.strip__mk--alright { --mk-c: var(--yellow); } :root[data-theme="dark"] .strip__mk.strip__mk--sleeve { --mk-c: #6f8cff; } :root[data-theme="dark"] .strip__mk.strip__mk--loop { --mk-c: #9b7bff; }
  @media (hover: hover) and (pointer: fine) { .strip__mk:hover { opacity: 1; } .strip__mk:hover::after { transform: scaleX(1); } }
  .strip__div { width: 1px; height: 14px; margin: 0 16px 0 12px; background: var(--rule); flex: none; }
  .strip__r { display: flex; align-items: center; gap: 18px; flex: none; }
  .strip__r > .n { opacity: .62; transition: opacity var(--t-fast) ease; } @media (hover: hover) and (pointer: fine) { .strip__r > .n:hover { opacity: 1; } }
  .strip__lv { display: inline-flex; align-items: center; gap: 7px; } .strip__lv .ic { width: 15px; height: 15px; }
  .strip__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; opacity: .7; transition: background-color var(--t-fast) ease, opacity var(--t-fast) ease, transform var(--t-press) var(--ease); }
  .strip__ic:active { transform: scale(.88); }
  @media (hover: hover) and (pointer: fine) { .strip__ic:hover { opacity: 1; } }
  .strip__ic .ic { width: 15px; height: 15px; }
  @media (max-width: 640px) { .strip__r > .n, .strip__div, .edsel__b span { display: none; } .strip__l { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); } }
  /* edition selector */
  .edsel { position: relative; }
  .edsel__b { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--rule); font: 600 12px/1 var(--f-ui); letter-spacing: .02em; transition: box-shadow var(--t-fast) ease, scale var(--t-press) var(--ease); }
  .edsel__b:active { scale: .96; }
  .edsel__b .ic { width: 14px; height: 14px; }
  @media (hover: hover) and (pointer: fine) { .edsel__b:hover { box-shadow: inset 0 0 0 1px var(--ink-2); } }
  .edsel__b[aria-expanded="true"] { box-shadow: inset 0 0 0 1px currentColor; }
  .edsel__m { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 250px; padding: 8px; border-radius: var(--r-ui); background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 24px 40px -18px rgba(0,0,0,.25); transform-origin: top right; animation: pop 180ms var(--ease); }   /* the menu grows out of the button that opened it */
  .edsel__m .n { display: block; padding: 8px 10px 10px; color: var(--ink-2); }
  .edsel__m a { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-radius: 8px; font: 600 14px/1 var(--f-ui); color: var(--ink); }
  .edsel__m a .ic { width: 14px; height: 14px; opacity: 0; transition: opacity var(--t-fast) ease, transform var(--t-mid) var(--ease); }
  .edsel__m a:hover { background: var(--paper-2); } .edsel__m a:hover .ic { opacity: .6; transform: translateX(2px); }
  .edsel__m a[aria-current="true"] { background: var(--green); color: var(--black); } .edsel__m a[aria-current="true"] .ic { opacity: 1; }
  /* a disclosure's chevron turns when it opens */
  .edsel__b .ic--s { width: 10px; height: 10px; opacity: .6; transition: transform var(--t-mid) var(--ease); }
  [aria-expanded="true"] > .ic--s { transform: rotate(180deg); }

  /* ---------- the bar */
  .hd { position: sticky; top: 0; z-index: 40; transition: box-shadow var(--t-mid) ease; }
  /* reading progress: a hairline along the foot of the header that fills as you read the story (the story, not the page: it's full at the last line, before Read next) */
  @supports (animation-timeline: view()) {
    div.page.page--story { timeline-scope: --story; } :is(.art, .feat) { view-timeline: --story block; }
    div.page.page--story .hd::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--blue); transform-origin: 0 50%; animation: read linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; pointer-events: none; z-index: 50; }   /* above the bar and strip, which stack at 40–45 inside the header */
    :root[data-theme="dark"] .hd::after { background: var(--green); }
  }
  @keyframes read { from { scale: 0 1; } }
  .hd[data-stuck] { box-shadow: 0 14px 28px -22px rgba(0,0,0,.32); }   /* once the page moves under it, the header lifts off it (site.js) */
  :root[data-theme="dark"] .hd[data-stuck] { box-shadow: 0 14px 28px -18px rgba(0,0,0,.9); }
  .bar { position: relative; z-index: 40; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; height: var(--bar); padding-inline: var(--m); background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
  /* masthead lockup: the wordmark, and for regional editions a short tag under it, right-aligned to the K */
  .lock { display: inline-grid; justify-items: end; row-gap: 3px; }
  .lock__ed { font: 800 8.5px/1 var(--f-ui); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
  .logo { display: block; width: 116px; height: 28px; }
  .bar__nav { display: flex; align-items: stretch; justify-content: center; align-self: stretch; }   /* full bar height: no dead gap between a nav item and its drawer */
  /* a section: an underline drawn just under its name (growing from the left on hover, like every link's), held while its
     drawer is open and on that section's own pages. The homepage marks none. */
  .nv { --nv-pad: 9px; display: flex; align-items: center; padding: 0 var(--nv-pad); font: 700 12px/1 var(--f-ui); letter-spacing: .075em; text-transform: uppercase; white-space: nowrap; }
  .nv > span { position: relative; }
  .nv { transition: opacity var(--t-fast) ease; }
  @media (hover: hover) and (pointer: fine) { .bar__nav:has(.nv:hover) .nv:not(:hover, [aria-expanded="true"]) { opacity: .45; } }   /* the section you point at comes forward; the rest step back */
  .nv > span::after { content: ""; position: absolute; left: 0; right: .075em; top: 100%; height: 2px; margin-top: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease); }   /* right: the letter-spacing after the last letter */
  @media (hover: hover) and (pointer: fine) { .nv:hover > span::after { transform: scaleX(1); } }
  .nv[aria-expanded="true"] > span::after, .nv[aria-current] > span::after { transform: scaleX(1); }
  .nv:focus-visible { outline: none; } .nv:focus-visible span { outline: 2px solid currentColor; outline-offset: 5px; border-radius: 2px; }
  .bar__act { grid-column: 3; display: flex; align-items: center; gap: 6px; }
  .bar__burger { display: none; }
  .bar__burger[aria-expanded="true"] .i-menu { display: none; } .bar__burger[aria-expanded="true"] .i-close { display: block; }
  .bar__burger .i-close { transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) ease; }
  @starting-style { .bar__burger .i-close { transform: rotate(-90deg) scale(.7); opacity: 0; } }   /* the cross turns in as the menu opens */
  .shopb, .plusb { display: inline-flex; align-items: center; gap: 8px; height: 40px; border-radius: var(--r-pill); background: var(--black); color: #fff; box-shadow: inset 0 0 0 1.5px var(--pill-edge, transparent); transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform 200ms var(--ease); }
  .shopb:active, .plusb:active { transform: scale(.96); }
  .shopb { padding: 0 16px 0 13px; font: 800 12px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
  .shopb .ic { width: 17px; height: 17px; }
  .shopb { position: relative; } .shopb[data-count]::after { content: attr(data-count); position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-pill); background: var(--green); color: var(--black); box-shadow: 0 0 0 2px var(--paper); font: 700 10.5px/1 var(--f-ui); letter-spacing: 0; transition: scale 300ms var(--ease); }
  @starting-style { .shopb[data-count]::after { scale: .4; } }   /* the bag count pops in when the first thing goes in */
  .plusb { padding: 0 5px 0 14px; }
  .plusb__me { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #262626; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; } .plusb__me .ic { width: 16px; height: 16px; }
  :root[data-member] .plusb__me { background: var(--green); color: var(--black); }
  .shopb[aria-expanded="true"], .plusb[aria-expanded="true"] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
  .plusb[aria-expanded="true"] .plusb__me { background: var(--ink); color: var(--paper); }
  @media (hover: hover) and (pointer: fine) {
    .shopb:hover, .plusb:hover { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
    .plusb:hover .plusb__me { background: var(--ink); color: var(--paper); }
  }
  .bar .icb[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
  @media (max-width: 1360px) { .nv { --nv-pad: 6px; font-size: 11px; letter-spacing: .06em; } }
  @media (max-width: 1240px) { .bar__nav { display: none; } .bar__burger { display: grid; } }
  @media (max-width: 640px) { :root { --bar: 58px; } .shopb { padding: 0 11px; } .shopb span, .plusb .pmk { display: none; } .plusb { padding: 0 5px; } }
  @media (max-width: 380px) { .bar { gap: 10px; } .logo { width: 96px; height: 24px; } .bar__act { gap: 2px; } .bar__act .icb { width: 36px; } }   /* the smallest phones: everything still fits on one line */

  /* ---------- drawers: one open at a time, under the bar */
  .drw { position: absolute; left: 0; right: 0; top: 100%; }
  .drw__p { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 24px; padding: 32px var(--m) 40px; background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--rule), 0 24px 40px -24px rgba(0,0,0,.25); max-height: calc(100svh - var(--hd) - 24px); overflow: auto; animation: drop 200ms var(--ease); }
  .drw__l { grid-column: 1 / span 3; display: grid; gap: 14px; align-content: start; }
  .drw__t { font: 400 clamp(48px, 4.4vw, 76px)/.82 var(--f-display); text-transform: uppercase; } .drw__t .u { --u-w: 4px; --u-y: -.02em; }   /* the section's name goes to its front page */
  .drw__l .dek { font-size: 16.5px; }
  .drw__links { padding-top: 14px; border-top: 2px solid currentColor; display: grid; }
  .drw__links a { display: block; padding: 5px 0; font: 700 17px/1.2 var(--f-sans); letter-spacing: -.02em; }
  .drw__c { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-s); align-content: start; }
  .drw__list--2 { grid-column: span 2; }
  .drw__grp { grid-column: span var(--n); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: var(--g-s); align-content: start; }
  .drw__grp > .colhead { grid-column: 1 / -1; }
  .drw__covs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-s); }
  .drw__shop { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-s); }
  .pz--drw { grid-column: 1 / -1; margin-top: 8px; }
  .drw__list .colhead + .rows { margin-top: -6px; }
  .pls a { display: block; padding: 9px 0 10px; border-bottom: 1px solid var(--rule); }
  /* Dork Live's next shows: a blue panel, each poster shown whole (posters are 4:5) */
  .drw__live { align-self: start; padding: 0 16px 6px; }
  .drw__live .colhead { border-top: 0; padding-top: 14px; } .drw__live .colhead .more { color: var(--dp); }
  .lrow--poster { --cols: 76px minmax(0, 1fr); --lrow-g: 14px; --lrow-y: 12px; } .lrow--poster .lrow__x { gap: 5px; } .lrow--poster .t { color: var(--dp); }
  .drw__live .rows > li + li { border-top-color: var(--line); }
  /* a podcast episode in a drawer: square art, the episode, a play button */
  .lrow--pod { --cols: 56px minmax(0, 1fr) 32px; --lrow-g: 14px; --lrow-y: 10px; } .lrow--pod .lrow__x { gap: 5px; } .lrow--pod .prow__p { width: 32px; height: 32px; }
  /* the directory: an A–Z index, three full rows of nine */
  .azl { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; margin-bottom: 22px; }
  .azl a { display: grid; place-items: center; height: 46px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); font: 400 clamp(22px, 1.9vw, 30px)/1 var(--f-display); transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
  @media (hover: hover) and (pointer: fine) { .azl a:hover { background: var(--ink); color: var(--paper); box-shadow: none; } }
  .search { grid-column: 1 / span 9; display: flex; align-items: center; gap: 14px; height: 76px; border-bottom: 2px solid currentColor; }
  .search .ic { width: 26px; height: 26px; } .search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 700 clamp(24px, 2.6vw, 40px) var(--f-sans); letter-spacing: -.035em; outline: none; } .search:has(input:focus-visible) { box-shadow: 0 2px 0 currentColor; }   /* the field has no outline of its own: focus thickens its rule */
  .search input { caret-color: var(--blue); } :root[data-theme="dark"] .search input { caret-color: var(--green); }
  .search kbd { padding: 5px 7px 4px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-2); }
  @media (pointer: coarse), (max-width: 640px) { .search kbd { display: none; } }
  .sg { grid-column: 1 / span 9; margin-top: -12px; border-bottom: 1px solid var(--rule); }
  .sg li + li { border-top: 1px solid var(--rule); }
  .sg a { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 12px 10px; border-radius: 8px; }
  .sg a .n { color: var(--ink-2); } .sg__t { font: 700 17px/1.3 var(--f-sans); letter-spacing: -.015em; }
  .sg mark { background: color-mix(in srgb, var(--green) 55%, transparent); color: inherit; }
  .sg [aria-selected] a { background: var(--paper-2); }
  @media (hover: hover) and (pointer: fine) { .sg a:hover { background: var(--paper-2); } }
  .sg__none { padding: 14px 10px; color: var(--ink-2); }
  @media (max-width: 1100px) { .sg { grid-column: 1 / -1; } }
  @media (max-width: 640px) { .sg a { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
  .drw__p--search .chips { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 4px; mask: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }   /* one line of topics that runs off the edge rather than leaving one stranded on a second line */
  .drw__p--search .chips::-webkit-scrollbar { display: none; } .drw__p--search .chips > * { flex: none; } .drw__p--search .chips .n { margin-right: 8px; color: var(--ink-2); }
  .scrim { position: fixed; inset: 0; z-index: 35; background: rgba(10,10,10,.34); animation: fade 240ms ease; }
  @media (max-width: 1100px) { .drw__l, .drw__c, .search { grid-column: 1 / -1; } }
  /* The section drawers open from the desktop nav (over 1240px). Below that, only search, the shop, Dork+ and the menu open. */
  @media (max-width: 640px) { .drw__shop { grid-template-columns: 1fr 1fr; row-gap: 28px; } }
  /* the mobile menu (≤1240px): the same SECS as the desktop nav */
  .drw__p--menu { display: none; }
  @media (max-width: 1240px) { .drw__p--menu:not([hidden]) { display: flex; flex-direction: column; gap: 22px; } }
  .mnu__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mnu__cta .btn { justify-content: center; }
  .mnu { border-top: 2px solid currentColor; }
  .mnu li { display: grid; gap: 6px; padding: 12px 0 13px; border-bottom: 1px solid var(--rule); }
  .mnu__k { font: 400 40px/.86 var(--f-display); text-transform: uppercase; }
  .mnu__s { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 2px; font: 500 14px/1.4 var(--f-sans); color: var(--ink-2); }
  .mnu__f { display: grid; gap: 10px; } .mnu__f > .n { color: var(--ink-2); }
  .mnu__f--row { display: flex; gap: 20px; padding-top: 14px; border-top: 1px solid var(--rule); }
  .mnu__mk { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; } .mnu__mk .mk { --cap: 15px; }
  @media (min-width: 641px) { .mnu { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--g); } }
  /* the Dork+ account: a compact panel under its button */
  .drw__p--plus { position: absolute; right: var(--m); top: 8px; width: min(380px, calc(100vw - 2 * var(--m))); display: block; padding: 10px; border-radius: var(--r-ui); box-shadow: 0 0 0 1px var(--rule), 0 24px 48px -16px rgba(0,0,0,.35); }
  .acct { display: grid; gap: 14px; }
  :root:not([data-member]) .acct--in, :root[data-member] .acct--out { display: none; }
  .acct__card { display: grid; gap: 10px; padding: 22px 20px 20px; border-radius: 8px; }
  .acct__card .n { color: var(--green); } .acct__card .t { color: #fff; }
  .acct__perks { display: grid; gap: 2px; padding: 0 8px; }
  .acct__perks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
  .acct__perks .ic, .acct__menu .ic { width: 18px; height: 18px; margin-top: 1px; }
  .acct__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 8px 8px; }
  .acct__menu { display: grid; padding: 0 4px; }
  .acct__menu a { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 6px; font: 600 15px/1.2 var(--f-sans); letter-spacing: -.01em; }
  .acct__menu a:hover { background: var(--paper-2); }
  .acct__menu em { font: 700 10px/1 var(--f-ui); font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: 5px 7px; border-radius: var(--r-pill); background: var(--green); color: var(--black); }
  .acct__foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 6px; border-top: 1px solid var(--rule); }
  .acct__foot button { display: inline-flex; align-items: center; gap: 6px; } .acct__foot .ic { width: 14px; height: 14px; }

  /* ---------- Dork Radio, the mark: the wordmark, then RADIO in Inter caps, cap heights matched */
  .rmk { display: inline-flex; align-items: baseline; gap: .3em; white-space: nowrap; }
  .rmk__r { font: 800 1em/1 var(--f-ui); letter-spacing: .01em; text-transform: uppercase; }
  /* ---------- now playing: a title too long for its space scrolls to its end and back, never cut off with an ellipsis */
  .scrl { display: block; min-width: 0; overflow: hidden; white-space: nowrap; }
  .scrl__in { display: inline-flex; align-items: baseline; gap: .6em; }
  .scrl[data-over] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 18px), transparent); }
  .scrl[data-over] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 16px), transparent); }   /* a title too long for its line slides between soft edges, never sliced */
  .scrl[data-over] .scrl__in { padding-left: 10px; animation: scrl var(--scrl-t, 8s) ease-in-out infinite alternate; }
  @keyframes scrl { 0%, 15% { transform: none; } 85%, 100% { transform: translateX(var(--scrl-d)); } }
  /* ---------- Dork Radio: pieces shared by the floating player and the radio page */
  .rbar__live { display: inline-flex; align-items: center; gap: 7px; color: var(--green); white-space: nowrap; } @media (max-width: 360px) { .rbar__247 { display: none; } }   /* the smallest phones: "Live" alone, so it never runs under the buttons */
  .rbar__vol { display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--dk-mute); } .rbar__vol input { width: 86px; accent-color: var(--green); }
  .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; } .eq i { width: 2.5px; height: 35%; background: currentColor; }
  :root[data-radio] .eq i { animation: eq 800ms ease-in-out infinite alternate; }
  :root[data-radio] .eq i:nth-child(2) { animation-delay: -300ms; } :root[data-radio] .eq i:nth-child(3) { animation-delay: -550ms; } :root[data-radio] .eq i:nth-child(4) { animation-delay: -150ms; }
  @keyframes eq { to { height: 100%; } }
  .trk { scroll-snap-align: start; }
  @media (max-width: 1100px) { .rbar__vol { display: none; } }

  /* ---------- Dork Radio, floating: a pill fixed to the foot of the screen that opens upwards (prototype, alongside the bar) */
  .fr { position: fixed; z-index: 38; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); translate: -50% 0; display: grid; grid-template-columns: minmax(0, 1fr); width: max-content; max-width: calc(100vw - 24px);
    border-radius: 28px; background: var(--electric); color: #fff;   /* solid: see-through blue over a white page made the song title hard to read */
    box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 20px 44px -14px rgba(0,0,0,.55);
    transition: translate 600ms var(--ease), opacity 400ms ease, border-radius 380ms var(--ease); }
  .fr:not([data-in]) { translate: -50% calc(100% + 40px); opacity: 0; }   /* rises in once the page has settled */
  .fr[data-open] { border-radius: 22px; }
  /* the panel: grows upwards from the pill (0fr to 1fr), its contents fading in just behind it */
  .fr__pn { contain: inline-size; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease); }   /* the panel takes the pill's width, never sets it */
  .fr[data-open] .fr__pn { grid-template-rows: 1fr; }
  .fr__in { min-height: 0; overflow: hidden; padding: 0 16px; opacity: 0; transition: opacity 180ms ease, padding 420ms var(--ease); }
  .fr[data-open] .fr__in { padding: 18px 16px 4px; opacity: 1; transition-delay: 90ms, 0ms; }
  .fr__h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
  .fr__t { font-size: 30px; line-height: 1; }
  .fr__h .more { color: var(--green); }
  .fr .stabs { margin-bottom: 4px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.2); }
  .fr .stab--s { height: 32px; padding: 0 12px; box-shadow: none; color: rgba(255,255,255,.72); }
  .fr .stab[aria-selected="true"], .fr .stab:hover { background: rgba(255,255,255,.16); color: #fff; }   /* the lighter inset pill marks where you are */
  .fr__list { max-height: min(340px, 48svh); overflow-y: auto; scrollbar-width: none; }
  .fr__list .lrow { color: #fff; } .fr__list .lrow > .n { color: rgba(255,255,255,.62); } .fr__list > li + li { border-top-color: rgba(255,255,255,.18); }
  .fr .rbar__live, .fr__h .more { color: var(--green); }
  .fr__list .prow__p { width: 32px; height: 32px; }
  /* the pill itself */
  .fr__row { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 10px; }
  .fr__play { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: var(--black); flex: none; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform 200ms var(--ease); }
  .fr__play .ic { width: 15px; height: 15px; } .fr__play:active { transform: scale(.92); }
  .fr__art { width: 38px; height: 38px; object-fit: cover; flex: none; transition: width 380ms var(--ease), opacity 250ms ease, margin 380ms var(--ease); }
  .fr__now { display: grid; gap: 3px; min-width: 0; max-width: 250px; padding-right: 4px; overflow: hidden; }
  .fr__now > .n { display: flex; gap: 10px; color: rgba(255,255,255,.72); white-space: nowrap; } .fr__now > .n b { color: #fff; font-weight: 500; }
  .fr__np { font: 400 14.5px/1.2 var(--f-sans); }
  .fr__np b { font-weight: 700; letter-spacing: -.01em; } .fr__np .scrl__in > span { opacity: .78; }   /* the song, not the whole line */
  .fr__opt { display: flex; align-items: center; gap: 2px; max-width: 420px; overflow: hidden; transition: max-width 420ms var(--ease), opacity 250ms ease; }
  .fr__div { width: 1px; height: 26px; margin: 0 6px 0 2px; background: rgba(255,255,255,.28); flex: none; }
  .fr__b { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); font: 500 10.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: rgba(255,255,255,.82); transition: background-color var(--t-fast) ease, color var(--t-fast) ease, scale var(--t-press) var(--ease); }
  .fr__b:active { scale: .95; }
  .fr__b .ic { width: 15px; height: 15px; }
  .fr__b[aria-expanded="true"] { background: rgba(255,255,255,.16); color: #fff; } @media (hover: hover) and (pointer: fine) { .fr__b:hover { background: rgba(255,255,255,.16); color: #fff; } }
  /* slim by default: play and now playing. It opens out while the pointer is on it (data-exp, set by site.js) and closes when it leaves */
  .fr:not([data-exp]) .fr__opt { max-width: 0; opacity: 0; }
  .fr:not([data-exp]) .fr__art { width: 0; opacity: 0; margin-right: -10px; }
  /* folded (audit #8): just the play button, bottom-left in the gutter, once the reader is past the first screen */
  .fr[data-mini] { left: 16px !important; translate: 0 0 !important; width: auto; }
  .fr[data-mini] :is(.fr__now, .fr__opt, .fr__art, .fr__div) { display: none; }
  .fr[data-mini] .fr__row { height: 52px; padding: 0 5px; }
  @media (max-width: 640px) {
    .fr { width: calc(100vw - 20px); bottom: calc(10px + env(safe-area-inset-bottom)); }
    .fr__now { flex: 1 1 auto; max-width: none; min-width: 0; } .fr__b span { display: none; } .fr__b { width: 40px; padding: 0; justify-content: center; }
    .fr__row { min-width: 0; overflow: hidden; border-radius: 28px; } .fr__art { display: none; } .fr__opt { flex: none; }
    .fr__t { font-size: 24px; } .fr__h .more { display: none; }
    .fr[data-mini] { width: auto; left: 10px !important; }
  }

  /* ---------- the Top 10: a shallow, scrollable navigation bar above the hero */
  /* ---------- trending topics: one thin, ranked line under the masthead. A green tab carries the label; the topics run
     after it, numbered in mono, a hairline between each; the line fades out at the edge when there are more than fit */
  .trd { display: flex; align-items: stretch; height: 40px; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule); }
  .trd__k { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 18px 0 var(--m); background: var(--green); color: var(--black); }   /* Dork green in both themes */
  .trd__k .ic { width: 15px; height: 15px; stroke-width: 2.4; }
  .trd__k .n { color: inherit; }
  .trd__l { display: flex; align-items: center; min-width: 0; flex: 1; padding-right: var(--m); scroll-snap-type: x proximity; }
  .trd__l:not([data-end]) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }   /* the fade says there's more; it goes once you reach the end (site.js) */
  .trd__l > li { flex: none; display: flex; align-items: center; height: 100%; scroll-snap-align: start; }
  .trd__l > li + li::before { content: ""; width: 1px; height: 14px; background: var(--rule); }
  .trd__l a { display: flex; align-items: baseline; gap: 9px; padding: 0 20px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
  .trd__l a .u { --u-w: 1px; --u-y: -3px; }
  .trd__l > li:first-child a { padding-left: 18px; }
  .trd__go { flex: none; display: grid; place-items: center; width: 40px; border-left: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
  .trd__go:active .ic { scale: .8; } .trd__go .ic { transition: transform var(--t-mid) var(--ease), scale var(--t-press) var(--ease); }
  .trd__go[hidden] { display: none; } .trd__go .ic { width: 15px; height: 15px; transition: transform var(--t-mid) var(--ease); } .trd__go[data-back] .ic { transform: rotate(180deg); }
  @media (hover: hover) and (pointer: fine) { .trd__go:not([data-back]):hover .ic { transform: translateX(2px); } .trd__go[data-back]:hover .ic { transform: rotate(180deg) translateX(2px); } }
  @media (pointer: coarse) { .trd__go { display: none; } }   /* fingers swipe */
  .trd__n { font: 500 10px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); transition: color var(--t-fast) ease; }
  @media (hover: hover) and (pointer: fine) { .trd__l a:hover .trd__n { color: var(--blue); } }
  :root[data-theme="dark"] .trd__l a:hover .trd__n { color: var(--green); }
  @media (max-width: 640px) { .trd { height: 38px; } .trd__k { padding-right: 12px; } .trd__k .n { display: none; } .trd__l a { padding: 0 14px; font-size: 11px; letter-spacing: .07em; } .trd__l > li:first-child a { padding-left: 14px; } }   /* on a phone the tab is just the icon: the topics get the room */
  /* the cut-through under the header on pages without a full-width picture */
  .ad--top > .ad { border-top: 0; }
  .top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 12px var(--m); background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule); }
  .top__t { font: 400 30px/.8 var(--f-display); text-transform: uppercase; white-space: nowrap; padding-right: 18px; border-right: 2px solid currentColor; }
  .top__t .stop { color: var(--blue); }
  .top__ctl { display: flex; gap: 4px; } .top__ctl .icb { width: 34px; height: 34px; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, opacity var(--t-fast) ease, transform var(--t-press) var(--ease); } .top__ctl .icb:disabled { opacity: .25; cursor: default; }
  @media (hover: hover) and (pointer: fine) { .top__ctl .icb:not(:disabled):hover { background: var(--ink); color: var(--paper); box-shadow: none; } }
  .top__row { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 22px; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .top__row > li { scroll-snap-align: start; } .top__row > li + li { padding-left: 22px; border-left: 1px solid var(--rule); }
  .t10 { display: flex; align-items: center; gap: 11px; height: 56px; }
  .t10__k { flex: none; min-width: .62em; margin-right: 1px; font: 400 44px/.74 var(--f-display); color: var(--ink); text-align: center; transition: color var(--t-fast) ease; }   /* the running order, in the display face */
  @media (hover: hover) and (pointer: fine) { .t10:hover .t10__k { color: var(--blue); } }
  :root[data-theme="dark"] .t10:hover .t10__k { color: var(--green); }
  .t10 .ph { flex: none; height: 56px; width: 84px; margin: 0; } .t10--art .ph { width: 56px; }
  .t10__x { display: grid; gap: 4px; width: 172px; }
  .t10__x .n { color: var(--ink-2); font-size: 9.5px; }
  .t10__x b { font: 700 14px/1.15 var(--f-sans); letter-spacing: -.015em; }
  .t10__x .u { --u-w: 1.5px; --u-y: .06em; }
  .t10 .score { font-size: 11px; color: var(--ink); }
  @media (max-width: 640px) { .top { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding-block: 10px; } .top__ctl { display: none; } .top__t { font-size: 24px; padding-right: 12px; } .t10 { height: 44px; } .t10__x { width: 150px; } .t10__x b { font-size: 13px; } .t10 .ph { width: 64px; height: 44px; } .t10--art .ph { width: 44px; } }
  /* top10-b: full headlines, never cut off; on phones the heading sits over the row and the first story fits the screen */
  .t10 { height: auto; min-height: 56px; } .t10__x { width: 196px; }
  @media (max-width: 900px) { .t10 { min-height: 44px; width: 100%; } .t10__x { width: auto; flex: 1 1 auto; min-width: 0; } .top__row { grid-auto-columns: calc(100vw - 2 * var(--m) - 112px); -webkit-mask-image: none; mask-image: none; } }
  @media (max-width: 640px) { .top { grid-template-columns: 1fr; gap: 10px; } .top__t { justify-self: start; border-right: 0; padding-right: 0; } .top__row { grid-auto-columns: calc(100vw - 2 * var(--m)); } }

  /* ---------- ticker */
  .tick { display: flex; height: 42px; background: var(--green); color: var(--black); overflow: hidden; }
  .tick__k { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 var(--m); background: var(--black); color: var(--green); }
  .tick__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
  .tick__v { flex: 1; overflow: hidden; mask: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }   /* headlines slide out from under the label and fade before the button, rather than being guillotined */
  .tick__t { display: flex; align-items: center; height: 100%; width: max-content; animation: marquee var(--dur, 90s) linear infinite; }
  .tick__dup { display: contents; }
  .tick a { display: flex; align-items: center; gap: 10px; padding: 0 22px; font: 650 14px/1 var(--f-sans); letter-spacing: -.01em; border-right: 1px solid rgba(10,10,10,.2); }
  .tick a .u { --u-w: 1.5px; --u-y: -2px; }
  .tick time { font: 500 10.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
  .tick:hover .tick__t, .tick:focus-within .tick__t, .tick[data-paused] .tick__t { animation-play-state: paused; }
  .tick__p { flex: none; display: grid; place-items: center; width: 42px; background: var(--black); color: #fff; transition: color var(--t-fast) ease; } .tick__p .ic { width: 13px; height: 13px; transition: scale var(--t-press) var(--ease); }
  .tick__p:active .ic { scale: .78; } .tick[data-paused] .tick__p { color: var(--green); }   /* paused, the play mark lights up: the row is waiting for you */
  @media (hover: hover) and (pointer: fine) { .tick__p:hover { color: var(--green); } }
  .tick .i-pause { display: block; } .tick[data-paused] .i-pause, .tick:not([data-paused]) .i-play { display: none; } .tick[data-paused] .i-play { display: block; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* ---------- ads: a quiet neutral band, the slot's space reserved (no layout shift) */
  .ad { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 18px var(--m) 24px; background: var(--paper-2); border-block: 1px solid var(--rule); }   /* tablets (30 Oct): the 970px label line no longer widens the track past the page */
  .ad__l { color: var(--ink-2); font-size: 9.5px; }
  /* ad-n3: a neutral grey field with a slim line over the creative: Advertisement at the left, the ad-free way out with
     Dork+ at the right (Dork+ readers see no ads); on phones only the way out shows. */
  .ad { background: #f2f2f2; border-block: 1px solid #e2e2e2; }
  .ad__line { width: 970px; max-width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: inherit; }
  .ad__line .ad__lab { font-size: var(--t-n); color: var(--ink-2); }
  .ad__free { color: var(--ink); text-decoration: none; font: 600 13px/1 var(--f-sans); display: inline-flex; gap: 6px; align-items: center; }
  .ad__free .pmk { --h: 12px; } .ad__free .ic { width: 12px; height: 12px; }
  @media (max-width: 767px) { .ad__line { width: 320px; justify-content: flex-end; } .ad__line .ad__lab { display: none; } }
  .ad__demo, .ad__demo img { display: block; width: 100%; height: 100%; } .ad__demo img { object-fit: contain; }   /* the prototype's stand-in creative fills its slot exactly */
  .ad__box { width: 970px; max-width: 100%; height: 250px; }
  .ad__box:empty { background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--ink) 4%, transparent) 10px 11px); outline: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent); outline-offset: -1px; }
  .ad__box:empty { display: grid; place-items: center; } .ad__box:empty::after { content: "970 × 250"; font: 500 var(--t-n)/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); }   /* the prototype's empty slot says what it holds */
  @media (max-width: 1000px) { .ad__box { width: 300px; } .ad__box:empty::after { content: "300 × 250"; } }

  /* ---------- footer (always black) */
  .foot { padding-block: clamp(48px, 5vw, 80px) 110px; }   /* the bottom leaves room for the radio pill over the footer's last line */
  .lock--foot { display: grid; row-gap: clamp(6px, .8vw, 14px); }
  .lock--foot .lock__ed { font-size: clamp(14px, 2.1vw, 36px); letter-spacing: .12em; }
  .foot__mark { --mpos: left top; justify-self: stretch; aspect-ratio: 1600 / 386; }
  @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
    .foot__mark { animation: foot-mark linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }   /* the sign-off: the wordmark rises out of its own baseline as you reach the end */
  } }
  @keyframes foot-mark { from { clip-path: inset(62% 0 0 0); translate: 0 18%; } }
  .foot__g { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--g-s); row-gap: 40px; margin: clamp(40px, 5vw, 72px) 0; }   /* the site's index: eight columns, then every artist */
  .foot__c { display: grid; align-content: start; min-width: 0; }
  .foot__c > .n { padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--dk-rule); color: var(--dk-mute); }
  .foot__c a { display: flex; align-items: center; column-gap: .28em; min-height: 27px; font: 500 15px/1.3 var(--f-sans); transition: color var(--t-fast) ease; }   /* one row pitch across every column, logos included, so the lines run level across the footer */ .foot__c a:hover { color: var(--green); }
  .foot__all { display: inline-flex !important; align-items: center; gap: 6px; } .foot__all .ic { width: 13px; height: 13px; }
  .foot__hubs { grid-column: 1 / -1; } .foot__hubs > div { columns: 6; column-gap: var(--g-s); } .foot__hubs > div a { break-inside: avoid; }   /* 29 artists and "All artists": 30 names, level in three columns or two */
  .foot__legal { display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--dk-rule); color: var(--dk-mute); }
  .foot__soc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; padding-block: 18px; border-top: 1px solid var(--dk-rule); font-weight: 700; } .foot__soc .n { color: var(--dk-mute); }
  .foot__c .mk { --cap: 13.5px; } .foot__c .lg { --lgcap: 13.5px; }   /* the strands' logos at the height of the words around them */
  .foot__eds { align-items: center; } .foot__eds .chips { display: flex; flex-wrap: wrap; gap: 8px; } .foot__eds .chip { font-weight: 700; } .foot__eds .chip[aria-current="true"] { background: #fff; color: var(--black); box-shadow: none; }   /* on the ink footer the edition you're on is the white one */
  .foot__legal a { display: inline-flex; align-items: center; gap: 6px; } .foot__legal .ic { width: 13px; height: 13px; }
  @media (max-width: 1100px) { .foot__g { grid-template-columns: repeat(4, minmax(0, 1fr)); } .foot__hubs > div { columns: 4; } }
  @media (max-width: 640px) { .foot__g { grid-template-columns: 1fr 1fr; column-gap: 16px; } .foot__g > .foot__c { grid-column: auto; } .foot__g > .foot__hubs { grid-column: 1 / -1; } .foot__hubs > div { columns: 2; } .foot__legal { flex-direction: column; gap: 8px; } .foot { padding-bottom: 160px; } .foot__soc .n { flex-basis: 100%; } }

  /* ---------- edition suggestion toast */
  .toast { position: fixed; left: 50%; bottom: 96px; z-index: 90; translate: -50% 0; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; border-radius: var(--r-pill); background: var(--black); color: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.3); font: 500 14px/1.3 var(--f-sans); animation: rise 300ms var(--ease); max-width: calc(100vw - 32px); }
  .toast .ic { width: 16px; height: 16px; color: var(--green); }
  .toast--s { gap: 10px; padding: 12px 20px 12px 16px; }   /* a message on its own: even padding, icon first */
  .toast--a { padding-right: 8px; gap: 12px; } .toast .pmk { --h: .92em; vertical-align: -.08em; margin-left: .15em; }
  .toast__a { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: var(--r-pill); background: var(--green); color: var(--black); font: 700 11px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; transition: scale var(--t-press) var(--ease); } .toast__a:active { scale: .96; }
  .toast[data-out] { opacity: 0; translate: -50% 8px; transition: opacity 180ms ease, translate 200ms var(--ease); }
  .toast button { height: 32px; padding: 0 14px; border-radius: var(--r-pill); font: 700 11px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; }
  .toast button:first-of-type { background: var(--green); color: var(--black); } .toast button + button { box-shadow: inset 0 0 0 1px #444; }
  /* prototype only: the template switcher, bottom left */
  .pgs { position: fixed; left: 16px; bottom: 16px; z-index: 70; font: 600 13px/1.2 var(--f-ui); }
  .pgs__b { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 14px; border-radius: var(--r-pill); background: rgba(10,10,10,.82); color: #fff; backdrop-filter: blur(8px); font: 800 11px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
  .pgs__b span { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--green); color: var(--black); font-size: 10px; }
  .pgs__l { position: absolute; left: 0; bottom: 44px; width: min(620px, calc(100vw - 24px)); max-height: 72vh; overflow: auto; padding: 14px 10px 8px; border-radius: var(--r-ui); background: var(--black); color: #fff; box-shadow: 0 20px 40px -12px rgba(0,0,0,.5); columns: 3 180px; column-gap: 8px; }
  .pgs__l[hidden] { display: none; } .pgs__g { break-inside: avoid; padding-bottom: 12px; }
  .pgs__h { display: block; padding: 0 10px 6px; font: 500 10px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
  .pgs__l a { display: block; padding: 6px 10px; border-radius: 8px; } .pgs__l a:hover { background: var(--dk-hover); } .pgs__l a[aria-current] { color: var(--green); }
  @media (max-width: 900px) { .pgs { bottom: 84px; left: 12px; } }   /* clear of the radio pill */
  @media (max-width: 640px) { .pgs__l { columns: auto; } }   /* one column that scrolls: columns inside a capped height spill sideways */
  @media print { .pgs { display: none; } }
  /* prototype only: the act colour switcher on the hero */
}

/* ================================================================ sections: only what is unique to a homepage section, in running order */
@layer sections {
  @media (min-width: 641px) { .sec--band .sh__a > .btn { align-self: flex-end; } }   /* on a band the aside stacks right-aligned: a button under a longer line sits flush right with it */
  /* bands: headlines on a colour band take its display colour */
  .sec--band .card .t--m, .sec--band .card .t--l { color: var(--dp); }   /* headline sizes take the band's display colour; the small size keeps its text colour, which always passes contrast */
  .sec--band[data-pair="ink"] .card .t { color: #fff; }

  /* ---------- the latest: live feed column */
  .feed { gap: 0; }
  .feed__h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 2px solid currentColor; }
  .feed__h .n { color: var(--ink-2); }
  .feed .row { padding: 12px 0; gap: 6px; }
  .feed .rows li:nth-child(-n+3) time::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--red); vertical-align: 1px; }
  .feed > .more { padding-top: 14px; border-top: 2px solid currentColor; } .feed .rows > li:last-child { border-bottom: 0; }   /* the feed closes with its own heavier rule */
  /* ---------- features: six across (the sixth only below desktop) */
  @media (min-width: 1101px) { .row5 > :nth-child(n+6) { display: none; } }
  /* ---------- also today: the radio card */
  .panel__now { display: grid; gap: 4px; }
  .panel .t--m { color: inherit; } .panel__sub { font: 500 16px/1.2 var(--f-sans); opacity: .7; }
  .panel__next { margin-top: auto; }
  .panel__next > .n { display: block; padding-bottom: 8px; border-bottom: 1px solid var(--dk-rule); color: var(--dk-mute); }
  .panel__next li { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--dk-rule); font: 500 13px/1.3 var(--f-sans); color: #d4d4d4; }
  .panel__next li .n { color: var(--dk-mute); padding-top: 1px; }
  .panel .btn { align-self: stretch; }
  @media (max-width: 640px) {   /* phones: the artwork beside what's playing, not a full-width square */
    .radio { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px 16px; align-items: center; }
    .radio > .meta, .radio > .panel__next, .radio > .btn { grid-column: 1 / -1; }
  }
  /* ---------- the magazine */
  .mag .sh { --sh-rule: var(--yellow); }
  .mag__t { gap: 18px; } .mag__t .t { color: var(--yellow); } .mag__t .more { margin-top: auto; }
  .mag .btn { background: var(--yellow); color: var(--black); }   /* pink on yellow is 3.5:1; black is 15:1 */
  /* ---------- Popzines: the object given room */
  .pzs__l { gap: 20px; } .pzs__l .more { margin-top: auto; }
  .pzs__r { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--g); align-items: start; }
  .pzs__d { display: grid; gap: 14px; align-content: start; height: 100%; }
  .pzs__facts { display: grid; border-top: 2px solid currentColor; }
  .pzs__facts li { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .pzs__facts b { font: 700 16px/1.25 var(--f-sans); letter-spacing: -.015em; } .pzs__facts i { font-weight: 400; font-style: normal; opacity: .7; }
  .pzs__ship { opacity: .7; }
  .pzs__d .btn { justify-self: start; margin-top: auto; } .pzs__d .btn .ic { width: 16px; height: 16px; }
  @media (max-width: 640px) { .pzs__r { grid-template-columns: 1fr; } }
  /* ---------- the shop band */
  .shop__cats { margin-bottom: 28px; }
  .shop__g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px var(--g-s); align-items: stretch; }
  .shop .prod .ph { background: rgba(255,255,255,.08); }
  .shop .prod b { color: var(--dp); }
  .shop__foot { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 36px; padding-top: 20px; border-top: 2px solid currentColor; }
  .shop__sub { display: flex; align-items: center; gap: 20px; } .shop__sub .t { color: var(--dp); }
  @media (max-width: 1100px) { .shop__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shop__foot { flex-wrap: wrap; } }
  @media (max-width: 640px) { .shop__g { grid-template-columns: 1fr 1fr; } }
  /* ---------- reviews: albums, then a strip per kind */
  .rv { gap: 14px; } .rv .t--hero { color: #fff; }
  .rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--g-s); align-content: space-between; height: 100%; }
  .rc { --nd-b: 16.5px; --nd-i: 14.5px; }
  .rc .score { margin-top: 4px; } .tile > .score:last-child, .trk > .n:last-child { margin-top: auto; padding-top: 4px; }   /* stars sit level along a row, however many lines the titles above them take */
  .rvs { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: var(--g); margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
  .rvs:first-of-type { margin-top: 56px; }
  .rvs__h { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  .rvs__t { font: 800 28px/1.05 var(--f-sans); letter-spacing: -.03em; text-transform: none; color: var(--dp); }   /* sub-heads: Geist, sentence case, so the two heading levels never look alike (section-heading-n5) */
  @media (max-width: 640px) { .rvs__t { font-size: 22px; } }
  .rvs__k { display: grid; gap: 8px; } .rvs__n { opacity: .7; }
  .rvs__g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g-s); }
  .rvs > .rvs__g:first-child { grid-column: 1 / -1; }   /* a lane with no sub-head (section fronts' Reviews rail) takes the full width; it collapsed into the 2fr head column (audit #1) */
  .rvs.rvs--bare.rvs--bare { margin-top: 0; padding-top: 0; border-top: 0; }
  .rvs__c .n { opacity: .7; }
  @media (max-width: 1100px) { .rvs { grid-template-columns: 1fr; } .rvs__h { flex-direction: row; justify-content: space-between; align-items: baseline; } .rvs__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rvs__c:nth-child(n+4) { display: none; } }
  @media (max-width: 640px) { .rgrid, .rvs__g { grid-template-columns: 1fr 1fr; } .rvs__c:nth-child(n+3) { display: none; } }
  /* ---------- new music */
  .np { gap: 0; } .np > .card { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
  /* ---------- Hype: the lead act's name is the headline */
  .hyl { gap: 14px; }
  .hyl__who { font: 400 clamp(64px, 7vw, 124px)/.84 var(--f-display); text-transform: uppercase; color: var(--dp); margin-top: 6px; }
  .hyl .dek { max-width: 60ch; }
  .hyb { margin-top: 48px; }
  .hyb__g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px var(--g-s); margin: 4px 0 28px; }
  .hyn { --tile-g: 8px; }
  @media (max-width: 1100px) { .hyb__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .hyb__g { grid-template-columns: 1fr 1fr; } }
  /* ---------- etc.: four sections in one, each named in etc.'s own style */
  .etc .sh__t { color: #fff; }
  .etc__side { gap: 28px; }
  .etc__g { align-items: start; padding: 0; }
  .etc__row { margin-top: 56px; }
  .etc__c { gap: 14px; } .etc__c .rows { margin-top: auto; } .etc__c > .card { padding-bottom: 14px; border-bottom: 1px solid var(--line, var(--rule)); }   /* the lead story closes with a rule, as the lines under it do */
  .etc__h { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 2px solid currentColor; }
  .etc__n { font: 700 clamp(30px, 2.4vw, 40px)/.9 var(--f-ui); letter-spacing: -.055em; text-transform: lowercase; }
  .etc__n span { color: var(--ac); }
  .books { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; align-items: end; }   /* covers whole in their own shapes; titles line up */
  .book { --nd-b: 14.5px; --nd-i: 13px; }
  /* ---------- festivals, and the hub under them */
  .hub { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 20px; margin-top: 44px; padding: 18px 22px; border-radius: var(--r-ui); background: var(--black); color: #fff; }
  .hub__t { font: 800 clamp(24px, 2vw, 32px)/1 var(--f-sans); letter-spacing: -.045em; }
  .hub__s { font: 500 15px/1.3 var(--f-sans); color: #bdbdbd; }
  .hub__go { display: inline-flex; align-items: center; gap: 8px; color: var(--green); } .hub__go .ic { width: 13px; height: 13px; transition: transform var(--t-mid) var(--ease); }
  .hub:hover .hub__go .ic { transform: translateX(3px); }
  @media (max-width: 1100px) { .hub { grid-template-columns: auto 1fr auto; } .hub__s { display: none; } }
  @media (max-width: 640px) { .hub { grid-template-columns: 1fr auto; } .hub .pill { display: none; } }
  /* ---------- gigs, albums, artists */
  .chips--foot { margin-top: 18px; }
  .dsearch { height: 48px; padding: 0 20px; width: min(460px, 40vw); } .dsearch input { font-size: 15px; }
  @media (max-width: 640px) { .dsearch { width: 100%; } .sh__a:has(.dsearch) { align-self: stretch; } }
  /* ---------- most covered: the numbers mean a ranking here */
  .most__r { --cols: 76px minmax(0, 1fr) auto; }
  .most__n { font: 400 64px/.8 var(--f-display); color: var(--blue); text-align: right; font-variant-numeric: tabular-nums; }
  .most__a { font: 400 clamp(30px, 2.6vw, 44px)/.9 var(--f-display); text-transform: uppercase; }
  .most__go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .3; transition: opacity var(--t-fast) ease, transform var(--t-mid) var(--ease); }
  .most__go .ic { width: 14px; height: 14px; }
  .most__go { transition: opacity var(--t-fast) ease, transform var(--t-mid) var(--ease), background-color var(--t-fast) ease, color var(--t-fast) ease; }
  @media (hover: hover) and (pointer: fine) { .most__r:hover .most__go { opacity: 1; transform: translateX(3px); background: var(--ink); color: var(--paper); box-shadow: none; } }   /* the row you point at: its arrow fills and steps forward */
  @media (max-width: 640px) { .most__r { --cols-sm: 48px minmax(0, 1fr); } .most__n { font-size: 44px; } .most__go { display: none; } }
  /* ---------- Dork Live */
  .live__note { margin-bottom: 20px; padding: 10px 14px; border-radius: var(--r-ui); box-shadow: inset 0 0 0 1px var(--line); display: inline-block; }
  .lvlead { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: 1fr auto; gap: 0 28px; }
  .lvlead > .ph { grid-row: 1 / span 2; }
  .lvlead__t { display: grid; gap: 14px; align-content: end; padding-bottom: 20px; }
  .lvlead__v { font: 700 20px/1.2 var(--f-sans); letter-spacing: -.02em; }
  .lvlead .btn { justify-self: start; } .lvlead .btn .ic { width: 16px; height: 16px; }
  .dlive .rows { border-top: 2px solid currentColor; } .dlive .pill--f { background: var(--dp); color: var(--bg); }
  @media (max-width: 640px) { .lvlead { grid-template-columns: 1fr; row-gap: 18px; } .lvlead > .ph { grid-row: auto; } }
  /* ---------- read it first (Dork+) */
  .plg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px var(--g-s); height: 100%; align-content: space-between; }
  .plk { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--green); color: var(--black); } .plk .pmk { --h: 11px; --pmk-plus: var(--black); }
  @media (min-width: 1600px) { .plx.card--lead .ph { --r: 7/6 !important; } }   /* wide screens: a touch taller, so the lead ends level with the grid */
  @media (max-width: 640px) { .plg { grid-template-columns: 1fr 1fr; } }
  /* ---------- watch + listen */
  .watch .sh__t { --head: var(--t-band); line-height: .8; }
  .sub { display: flex; align-items: flex-end; gap: 24px; padding-top: 14px; border-top: 1px solid var(--dk-rule); margin-bottom: 24px; }
  .sub--gap { margin-top: clamp(56px, 5vw, 88px); }
  .sub__t { font: 800 28px/1.05 var(--f-sans); letter-spacing: -.03em; text-transform: none; }
  .sub > .n { flex: 1; padding-bottom: 6px; color: var(--dk-mute); } .sub .more { padding-bottom: 6px; color: var(--green); }
  .vid { position: relative; }
  .vid__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: var(--black); transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform 200ms var(--ease); }
  .vid__play .ic { width: 28px; height: 28px; } .vid:active .vid__play { transform: scale(.95); }
  .vid__dur { position: absolute; right: 12px; bottom: 12px; padding: 4px 7px 3px; border-radius: 4px; background: rgba(0,0,0,.72); color: #fff; }
  .eps5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g-s); margin-top: 32px; }
  .pod { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: end; }
  .pod__t { display: grid; gap: 20px; } .pod__t .t--hero { color: #fff; }
  .pod__ctl { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; }
  .pod__on { display: flex; gap: 20px; }   /* the places to listen stay together when the line breaks */
  .wave { display: flex; align-items: center; gap: 3px; height: 56px; } .wave i { flex: 1; height: calc(var(--h) * 1%); border-radius: 2px; background: currentColor; opacity: .32; }
  .wave i:nth-child(-n+9) { opacity: 1; background: var(--green); }
  @media (max-width: 1100px) { .eps5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .eps5 > :nth-child(n+4) { display: none; } }   /* full rows only: 5, then 3, then 4 */
  @media (max-width: 640px) { .eps5 { grid-template-columns: 1fr 1fr; } .eps5 > :nth-child(4) { display: block; } .pod { grid-template-columns: 1fr; } .sub { flex-direction: column; align-items: flex-start; gap: 10px; } .sub__t { font-size: 22px; } .sub .more { white-space: normal; } }
  /* ---------- the newsletter */
  .nl__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; padding-top: 16px; border-top: 2px solid currentColor; }
  .nl__t { grid-column: 1 / span 7; font: 400 clamp(88px, 10vw, 180px)/.8 var(--f-display); text-transform: uppercase; word-spacing: -.04em; color: var(--violet); margin-top: 8px; }
  .nl__f { grid-column: 8 / span 5; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .field { height: 56px; padding: 0 5px 0 20px; } .field .ic { opacity: .55; }
  .field .btn { height: 46px; }
  .nl__ok { display: none; color: var(--violet); } .nl__f.is-done .nl__ok { display: block; } .nl__f.is-done .nl__small { display: none; }
  .nl__small { color: var(--ink-2); }
  @media (max-width: 1100px) { .nl__t, .nl__f { grid-column: 1 / -1; } .nl__f { margin-top: 24px; } }
  @media (max-width: 640px) { .nl__g { display: block; } .nl__t { font-size: clamp(48px, 18vw, 72px); } }
  /* ---------- the strands: tabbed; two covers stacked on the right */
  .stab .mk { --cap: 20px; }
  .spanel__h { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 32px; }
  .spanel__mk { --cap: clamp(64px, 7.6vw, 136px); color: var(--dp); }
  .spanel__h > .n { flex: 1; } .spanel__h > :is(.spanel__mk, .n) { align-self: baseline; }   /* the genre sits on the logo's baseline, not under its descenders */ .spanel__h > .btn { align-self: baseline; }
  .covs2 { gap: 16px; justify-content: space-between; align-items: end; }   /* a print cover (3:4) beside a digital one (4:5): their names line up, both shown whole */
  @media (max-width: 1100px) { .covs2 { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); column-gap: var(--g-s); justify-content: start; } .covs2 > .colhead { grid-column: 1 / -1; } }   /* side by side once the column goes full width */
  @media (max-width: 640px) { .stab .mk { --cap: 15px; } .spanel__h { flex-wrap: wrap; } .spanel__mk { --cap: 56px; } }
  /* ---------- everything Dork */
}

/* ================================================================ templates: story pages, indexes and hubs, built from the same parts */
@layer templates {
  /* ---------- display titles: Brunson, capitals, tight. Each template title sets only its size (--dt) and leading (--dt-lh) */
  :is(.pq p, .ah__t, .hyc__who, .fo__t, .ctn__who, .subs__t, .srh__n, .shw__t, .auh__t, .vnh__t, .acp__t, .alr__q) { font: 400 var(--dt)/var(--dt-lh, .82) var(--f-display); text-transform: uppercase; word-spacing: -.04em; text-wrap: balance; }
  /* ---------- the coloured band a template opens with (album, live review, artist, strand, show, venue) */
  :is(.rvh, .lvh, .ah, .sth, .shw, .vnh, .eph) { padding-block: clamp(32px, 4vw, 64px); }
  /* ---------- a Follow button, once followed, turns to outline (artists, strands, venues, writers) */
  .btn[data-follow][aria-pressed="true"] { background: transparent; color: var(--bb, var(--ink)); box-shadow: inset 0 0 0 2px currentColor; }
  /* ---------- a story: header, then body and rail */
  .art { padding-top: clamp(28px, 3vw, 48px); }
  .art__h { display: grid; gap: 18px; padding-bottom: clamp(24px, 2.4vw, 36px); }
  .crumbs { display: flex; align-items: center; gap: 10px; font: 500 var(--t-n)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
  .crumbs > span { opacity: .45; } .crumbs a { display: inline-flex; align-items: center; gap: .45em; min-height: 24px; } .crumbs .mk { --cap: 12px; }
  @media (hover: hover) and (pointer: fine) { .crumbs a:hover { text-decoration: underline; text-underline-offset: .25em; } }
  .t--art { font: 800 clamp(34px, 4vw, 64px)/1.02 var(--f-sans); letter-spacing: -.045em; text-wrap: balance; }
  .dek--art { font-size: clamp(19px, 1.7vw, 25px); line-height: 1.38; max-width: 44ch; }
  .byl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--rule); }
  .byl__who { display: inline-flex; align-items: baseline; gap: 8px; } .byl__who a { font: 700 15px/1.2 var(--f-sans); letter-spacing: -.01em; }
  @media (hover: hover) and (pointer: fine) { .byl__who a:hover { text-decoration: underline; text-underline-offset: .2em; } }
  .byl__when { order: 3; flex-basis: 100%; color: var(--ink-2); }   /* names and the share buttons share a line; the date and read time sit under the names */
  .byl__act { order: 2; display: flex; gap: 6px; margin-left: auto; }
  .icb--line { width: 38px; height: 38px; box-shadow: inset 0 0 0 1.5px var(--rule); }
  .icb--line .ic { width: 17px; height: 17px; }
  .icb--line[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; } .icb--line[aria-pressed="true"] .ic { fill: currentColor; }
  .art__g { display: grid; grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); column-gap: var(--g); align-items: start; }
  .art__main { min-width: 0; }
  .fig { display: grid; gap: 10px; }
  .fig figcaption { color: var(--ink-2); line-height: 1.5; } figcaption.n > span, .fig--cover > .n > span { display: block; margin-top: 2px; }   /* the photo credit on its own line, never run on from the caption */
  .fig--lead { margin-bottom: clamp(28px, 2.6vw, 40px); }
  /* ---------- running text: Geist, a comfortable measure, links you can see */
  .prose { max-width: 700px; font: 400 clamp(17px, 1.25vw, 19px)/1.64 var(--f-sans); letter-spacing: -.006em; }
  .prose > * + * { margin-top: 1.15em; }
  .prose p { text-wrap: pretty; hanging-punctuation: first; }
  .prose a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: color var(--t-fast) ease, text-decoration-color var(--t-fast) ease; }
  @media (hover: hover) and (pointer: fine) { .prose a:not([class]):hover { color: var(--blue); text-decoration-color: currentColor; } :root[data-theme="dark"] .prose a:not([class]):hover { color: var(--green); } }
  .prose .xh { margin-top: 1.8em; font: 400 clamp(34px, 3vw, 48px)/.9 var(--f-display); text-transform: uppercase; word-spacing: -.04em; }
  .prose .xh + p { margin-top: .7em; }
  .pq { margin-block: 1.6em !important; padding-top: 18px; border-top: 3px solid currentColor; }
  .pq p { --dt: clamp(34px, 3.4vw, 56px); --dt-lh: .92; color: var(--dp, var(--ink)); }
  .pq cite { display: block; margin-top: 14px; font-style: normal; color: var(--ink-2); }
  .fig--wide { margin-block: 1.8em !important; }
  .ad--in { margin-inline: calc(var(--m) * -1); padding-inline: 0; background: transparent; border: 0; border-block: 1px solid var(--rule); }
  .ad--in .ad__box { width: 300px; height: 250px; } .ad--in .ad__box:empty::after { content: "300 × 250"; }
  @media (min-width: 641px) { .ad--in { margin-inline: 0; } }
  .inrel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 0; border-block: 1px solid var(--rule); }
  .inrel .n { color: var(--blue); } .inrel .ic--arrow { width: 18px; height: 18px; transition: transform var(--t-mid) var(--ease); }
  @media (hover: hover) and (pointer: fine) { .inrel:hover .ic--arrow { transform: translateX(3px); } }
  .inplus { display: grid; gap: 10px; padding: 20px 22px; border-radius: var(--r-ui); font-size: 16px; line-height: 1.45; }
  .inplus .pmk { --h: 22px; } .inplus a { text-decoration: underline; text-underline-offset: .2em; } .inplus a .pmk { --h: 12px; vertical-align: -1px; }
  .art__foot { max-width: 700px; margin-top: clamp(32px, 3vw, 48px); padding-top: 18px; border-top: 2px solid currentColor; display: grid; gap: 22px; }
  /* ---------- a cover story: the hero, then one centred column; pictures and quotes step out of it */
  .feat { --col: 700px; padding-top: clamp(36px, 4vw, 64px); }
  .feat__h, .prose--feat, .feat__foot { max-width: var(--col); margin-inline: auto; }
  .feat__h { display: grid; gap: 18px; padding-bottom: clamp(28px, 3vw, 44px); }
  .feat__t { font-size: clamp(30px, 3vw, 46px); }
  .prose--feat { max-width: var(--col); font-size: clamp(17px, 1.3vw, 20px); }
  .prose--feat > p:first-child::first-letter { float: left; margin: .08em .1em 0 -.02em; font: 400 5.1em/.78 var(--f-display); color: var(--dp); text-transform: uppercase; }
  .prose--feat .pq, .prose--feat .fig--wide { margin-inline: calc((min(100vw - 2 * var(--m), 1100px) - var(--col)) / -2); }
  .prose--feat .pq p { font-size: clamp(40px, 4.6vw, 76px); }
  .prose--feat .fig--wide figcaption { max-width: var(--col); margin-inline: auto; }
  .fig--cover { width: min(100%, 420px); margin-inline: auto; } .fig--cover > .n { color: var(--ink-2); line-height: 1.5; }
  .feat__outro { font: 500 15px/1.5 var(--f-sans); color: var(--ink-2); }
  .hero--feat .hero__box { pointer-events: none; } .hero--feat .hero__go { display: none; }   /* on the story itself the box goes nowhere */
  @media (max-width: 800px) { .prose--feat .pq, .prose--feat .fig--wide { margin-inline: 0; } }
  @media (max-width: 640px) { .pq .hang { --hang: 0em; } }   /* no margin to hang a quote mark in on a phone */
  @media (max-width: 640px) { .prose--feat .fig--wide { margin-inline: calc(var(--m) * -1); } .prose--feat .fig--wide figcaption { padding-inline: var(--m); } }
  /* ---------- an album review: the record on a black band, then the words */
  .rvh__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g); align-items: center; }
  .rvh__art { display: grid; gap: 14px; }
  .rvh__listen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .rvh__listen > .n { margin-right: 6px; opacity: .7; }
  .rvh__x { display: grid; gap: 20px; align-content: center; }
  .rvh__t { color: #fff; } .rvh__t .acc { color: var(--green); }
  .score--xl svg { width: 34px; height: 34px; }
  .rvh .dek--art { max-width: 36ch; }
  .facts { display: grid; border-top: 2px solid currentColor; max-width: 520px; }
  .facts li { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line, var(--rule)); }
  .facts b { font: 700 16px/1.25 var(--f-sans); letter-spacing: -.015em; }
  .art--rv .byl { margin-top: 0; border-top: 0; padding-top: 0; margin-bottom: clamp(24px, 2.4vw, 36px); }
  .rgrid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); height: auto; }
  @media (max-width: 1100px) { .rgrid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 800px) { .rvh__g { grid-template-columns: minmax(0, 1fr); } .rvh__art { max-width: 520px; } }
  @media (max-width: 640px) { .rgrid--6 { grid-template-columns: 1fr 1fr; } .score--xl svg { width: 28px; height: 28px; } }
  /* ---------- a live review: the night on its festival's colours */
  .lvh__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g); align-items: end; }
  .lvh__x { display: grid; gap: 22px; }
  .lvh__t { color: var(--dp); }
  .lvh .facts { max-width: none; }
  .lvh__fig figcaption { color: inherit; opacity: .75; }
  .fgrps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g-s); row-gap: 36px; }
  .fgrp { grid-column: span var(--n); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: var(--g-s); row-gap: 12px; align-content: start; }
  .fgrp > .colhead { grid-column: 1 / -1; }
  .fgrp .dcard .t { color: var(--fg); }
  @media (max-width: 1100px) { .lvh__g { grid-template-columns: minmax(0, 1fr); } .lvh__fig { order: -1; } }
  @media (max-width: 800px) { .fgrps, .fgrp { grid-template-columns: 1fr 1fr; } .fgrp { grid-column: 1 / -1; } }
  /* ---------- a section index: filters, the top stories, then the river, a day at a time */
  .flt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin: -8px 0 clamp(28px, 2.8vw, 40px); padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
  .flt__mks { display: flex; align-items: center; gap: 18px; } .flt__mks > .n { color: var(--ink-2); }
  .flt__mk { display: inline-flex; align-items: center; min-height: 32px; opacity: .64; transition: opacity var(--t-fast) ease; } .flt__mk .mk { --cap: 13px; }
  @media (hover: hover) and (pointer: fine) { .flt__mk:hover { opacity: 1; } }
  .river { padding-top: 0; } .ad + .river, .ad + .sec--flow { padding-top: var(--sec-y); }   /* after an ad, a section opens with its full space again */
  .day + .day { margin-top: clamp(48px, 5vw, 80px); }
  .day__t { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 14px; margin-bottom: 28px; border-top: 2px solid currentColor; font: 400 clamp(40px, 4vw, 64px)/.86 var(--f-display); text-transform: uppercase; word-spacing: -.04em; }
  .day__t .n { font-size: var(--t-n); color: var(--ink-2); word-spacing: normal; }
  .day__l { margin-top: 32px; } .day__l .rows > li:first-child { border-top: 1px solid var(--rule); }
  .day__one { --lrow-g: var(--g); padding: 0; }
  @media (max-width: 640px) { .day__one { --cols: minmax(0, 1fr); } .day__l { row-gap: 0; } .day__l > * + * .rows > li:first-child { border-top: 1px solid var(--rule); } .day__l .rows > li:last-child { border-bottom: 0; } .day .grid .t--l { font: 650 var(--t-s)/1.24 var(--f-sans); letter-spacing: -.018em; }
    .flt__mks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--m) * -1); padding-inline: var(--m); } .flt__mks > * { flex: none; } }
  .pg { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(48px, 5vw, 72px); padding-top: 22px; border-top: 2px solid currentColor; }
  .pg__ns { display: flex; align-items: center; gap: 4px; }
  .pg__n { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--r-pill); font: 700 13px/1 var(--f-ui); font-variant-numeric: tabular-nums; transition: background-color var(--t-fast) ease; }
  .pg__n[aria-current] { background: var(--ink); color: var(--paper); }
  @media (hover: hover) and (pointer: fine) { .pg__n:not([aria-current]):hover { background: color-mix(in srgb, currentColor 10%, transparent); } }
  .pg__gap { display: flex; gap: 4px; padding: 0 10px; color: var(--ink-2); } .pg__gap i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }   /* more pages: three dots on the numerals' centre line, not a baseline ellipsis */
  .pg__n { transition: background-color var(--t-fast) ease, scale var(--t-press) var(--ease); } .pg__n:active { scale: .92; }
  @media (max-width: 640px) { .flt .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--m) * -1); padding-inline: var(--m); } .flt__mks { flex-wrap: nowrap; gap: 13px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--m) * -1); padding-inline: var(--m); } .flt__mks > * { flex: none; } .flt__mk .mk { --cap: 11.5px; } }   /* the strands stay on one line: none left alone on a second */
  /* ---------- an artist hub: who they are, then everything Dork has on them */
  .ah__g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--g); align-items: end; }
  .ah__x { display: grid; gap: 22px; }
  .ah__t { --dt: clamp(72px, 9vw, 168px); --dt-lh: .8; color: var(--dp); }
  .ah .dek { max-width: 46ch; }
  .ah .facts { max-width: none; }
  .ah__act { display: flex; align-items: center; gap: 16px; } .ah__act .n { opacity: .75; }
  .ah__fig figcaption { display: none; }
  .subnav { display: flex; gap: 6px; }
  .recs { border-top: 2px solid currentColor; }
  .recs > li { border-bottom: 1px solid var(--rule); }
  .rec { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: var(--g); padding: 16px 0; }
  .rec__y { font: 400 44px/.8 var(--f-display); color: var(--blue); }
  .rec__t { font: 800 clamp(22px, 2.2vw, 34px)/1.05 var(--f-sans); letter-spacing: -.04em; }
  :root[data-theme="dark"] .rec__y { color: var(--green); }
  .tl { border-top: 2px solid currentColor; }
  .tl__y { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--g); padding: 18px 0 22px; border-bottom: 1px solid var(--rule); }
  .tl__n { font: 400 clamp(64px, 7vw, 120px)/.8 var(--f-display); }
  .tl .rows > li:first-child .row { padding-top: 0; }
  @media (max-width: 1100px) { .ah__g { grid-template-columns: minmax(0, 1fr); } .ah__fig { order: -1; } }
  @media (max-width: 640px) { .rec { grid-template-columns: 64px minmax(0, 1fr); } .rec .more { display: none; } .rec__y { font-size: 30px; } .tl__y { grid-template-columns: minmax(0, 1fr); gap: 8px; } .subnav { margin-inline: calc(var(--m) * -1); padding-inline: var(--m); } }
  /* ---------- the reviews index */
  .rvw__k { color: var(--green); } .rvw .rvh__x > a:not(.btn) { display: block; } .rvw .rvh__x > .btn { justify-self: start; }
  .rgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); height: auto; row-gap: 40px; }
  @media (max-width: 640px) { .rgrid--4 { grid-template-columns: 1fr 1fr; } }
  /* ---------- a strand: its logo, big, on its own colours */
  .sth__g { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--g); align-items: end; }
  .sth__x { display: grid; gap: 24px; }
  .sth__t .mk { --cap: clamp(56px, 13vw, 240px); color: var(--dp); }
  .sth .t--l { max-width: 30ch; }
  .sth__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
  .sth__c .covs2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-s); }
  .stos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-s); }
  .sto { display: grid; gap: 10px; align-content: space-between; min-height: 180px; padding: 20px; border-radius: var(--r-ui); transition: transform 200ms var(--ease); }
  .sto__mk .mk { --cap: clamp(28px, 2.6vw, 40px); color: var(--dp); }
  .sto .ic--arrow { width: 20px; height: 20px; transition: transform var(--t-mid) var(--ease); }
  @media (hover: hover) and (pointer: fine) { .sto:hover .ic--arrow { transform: translateX(4px); } }
  @media (max-width: 1100px) { .sth__g { grid-template-columns: minmax(0, 1fr); } .sth__c { max-width: 480px; } .stos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sto { min-height: 140px; padding: 16px; } }
  /* ---------- Hype: every new name as a card, then the playlist */
  .hycs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--g-s); }
  .hyc { --tile-g: 8px; }
  .hyc__who { --dt: clamp(30px, 2.6vw, 44px); --dt-lh: .86; color: var(--violet); margin-top: 2px; }
  :root[data-theme="dark"] .hyc__who { color: var(--green); }
  .hyp__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g); align-items: start; }
  .hyp__x { display: grid; gap: 18px; justify-items: start; } .hyp__x > .n { color: var(--green); }
  .hyp__t { font: 400 clamp(88px, 10vw, 180px)/.8 var(--f-display); text-transform: uppercase; } .hyp__t .stop { color: var(--green); }
  .hyp__l { border-top: 2px solid currentColor; }
  .hyp__l .lrow--art { --cols: 36px minmax(0, 1fr) 32px; } .hyp__l .n { opacity: .6; } .hyp__l .prow__p { width: 32px; height: 32px; }
  @media (max-width: 1100px) { .hycs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hyp__g { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 640px) { .hycs { grid-template-columns: 1fr 1fr; } }
  /* ---------- a festival hub */
  .fh__heads { display: grid; gap: 10px; } .fh__heads > .n { opacity: .75; }
  .fh .chip { box-shadow: inset 0 0 0 1.5px currentColor; }
  .fpod__g { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--g); align-items: center; }
  .fpod__x { display: grid; gap: 18px; } .fpod__x > .n { color: var(--green); } .fpod .t--hero { color: #fff; }
  .fos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-s); }
  .fo__t { --dt: clamp(30px, 2.8vw, 48px); --dt-lh: .86; margin-top: 4px; }
  @media (max-width: 800px) { .fpod__g { grid-template-columns: minmax(0, 1fr); } .fpod__g > .ph { max-width: 280px; } .fos { grid-template-columns: minmax(0, 1fr); } }
  /* ---------- the gig guide */
  .gg__tools { display: grid; gap: 12px; margin: -8px 0 clamp(28px, 2.8vw, 40px); padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
  .lrow--gig { --cols: 64px minmax(0, 1fr) auto; --lrow-y: 14px; --nd-b: 18px; --nd-i: 14px; }
  .lrow--gig > .n { font-size: 13px; }
  .gg__more { margin-top: 28px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; } .gg__more .more { color: var(--ink); }
  .gg__note { max-width: 36ch; margin-bottom: 32px; }
  @media (max-width: 640px) { .gg__tools .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--m) * -1); padding-inline: var(--m); } .gg__tools .chip { flex: none; } }
  /* ---------- the magazine: what's inside, subscribing, back issues */
  .ctns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px var(--g-s); margin-bottom: 44px; }
  .ctn { display: grid; gap: 8px; align-content: start; } .ctn > .ph { margin-bottom: 4px; }
  .ctn__who { --dt: clamp(30px, 2.6vw, 44px); --dt-lh: .86; }
  .colhead .pmk { --h: 10px; vertical-align: -1px; }
  .subs__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g); align-items: end; }
  .subs__t { --dt: clamp(64px, 8vw, 150px); --dt-lh: .8; color: var(--dp); }
  .subs__x { display: grid; gap: 20px; } .subs__x .dlogo { height: .72em; }
  .subs__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
  .shop__g--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1100px) { .subs__g { grid-template-columns: minmax(0, 1fr); } .shop__g--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 800px) { .ctns, .shop__g--4 { grid-template-columns: 1fr 1fr; } }
  /* ---------- a product page */
  .pdp { padding-top: clamp(28px, 3vw, 48px); }
  .pdp__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g); align-items: start; }
  .pdp__gal { display: grid; gap: 10px; position: sticky; top: calc(var(--hd) + 20px); }
  .pdp__main .ph { background: var(--paper-2); }
  .pdp__ths { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .pdp__th { border-radius: var(--r-tile); box-shadow: inset 0 0 0 1px var(--rule); padding: 4px; transition: box-shadow var(--t-fast) ease, scale var(--t-press) var(--ease); } .pdp__th .ph { background: transparent; }
  .pdp__th:active { scale: .97; }
  .pdp__th[aria-current] { box-shadow: inset 0 0 0 2px var(--ink); }
  @media (hover: hover) and (pointer: fine) { .pdp__th:hover { box-shadow: inset 0 0 0 2px var(--ink-2); } }
  .pdp__x { display: grid; gap: 18px; }
  .pdp__code { color: var(--violet); } :root[data-theme="dark"] .pdp__code { color: var(--green); }
  .pdp__price { display: flex; align-items: baseline; gap: 10px; } .pdp__price b { font: 800 32px/1 var(--f-sans); letter-spacing: -.04em; } .pdp__price .n { color: var(--ink-2); }
  .pdp__buy { display: flex; gap: 10px; }
  .qty { display: flex; align-items: center; flex: none; height: 52px; padding: 0 6px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 2px currentColor; }
  .qty button { display: grid; place-items: center; width: 40px; height: 100%; text-align: center; font: 600 20px/1 var(--f-sans); } .qty input { width: 32px; border: 0; background: none; text-align: center; font: 700 16px var(--f-sans); -moz-appearance: textfield; } .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
  .btn--l { height: 52px; padding: 0 26px; flex: 1; justify-content: center; font-size: 13px; }
  .pdp__ship { color: var(--ink-2); }
  .accd { border-top: 2px solid currentColor; }
  .accd details { border-bottom: 1px solid var(--rule); }
  .accd summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; list-style: none; font: 700 16px/1.2 var(--f-sans); letter-spacing: -.01em; }
  .accd summary::-webkit-details-marker { display: none; }
  .accd summary::after { content: "+"; font: 400 24px/1 var(--f-sans); transition: transform var(--t-mid) var(--ease); } .accd details[open] summary::after { transform: rotate(45deg); }
  @supports selector(::details-content) {   /* the answer slides open rather than jumping */
    .accd { interpolate-size: allow-keywords; }
    .accd details::details-content { block-size: 0; overflow: clip; transition: block-size 280ms var(--ease-drawer), content-visibility 280ms allow-discrete; }
    .accd details[open]::details-content { block-size: auto; }
  }
  .accd details p { padding: 0 0 18px; max-width: 52ch; color: var(--ink-2); line-height: 1.55; }
  @media (max-width: 900px) { .pdp__g { grid-template-columns: minmax(0, 1fr); } .pdp__gal { position: static; } }
  /* ---------- watch + listen: playlists, and Dork Radio */
  .pls2 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g-s); }
  .pl { position: relative; display: grid; align-content: space-between; gap: 18px; aspect-ratio: 1; padding: 18px; }
  .pl__t { font: 400 clamp(34px, 3.2vw, 56px)/.84 var(--f-display); text-transform: uppercase; color: var(--dp); }
  .pl__ic { position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; padding: 11px; border-radius: 50%; background: var(--fg); color: var(--bg); transition: transform 200ms var(--ease); }
  @media (hover: hover) and (pointer: fine) { .pl:hover .pl__ic { transform: scale(1.08); } }
  .pl .n { max-width: 70%; }
  .rpro__g { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g); }
  .rpro__t { font-size: clamp(40px, 5vw, 88px); line-height: 1; } .rpro__t .rmk { color: #fff; }
  .rh { background: var(--electric); color: #fff; padding-block: clamp(36px, 4.4vw, 72px); }
  .rh__g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--g); align-items: end; }
  .rh__x { display: grid; gap: 22px; justify-items: start; }
  .rh__t { font-size: clamp(40px, 6.2vw, 112px); line-height: 1; }
  @media (max-width: 640px) { .rh__t { font-size: 12.4vw; } }
  .rh__live { display: inline-flex; align-items: center; gap: 8px; font: 800 12px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
  .rh .t--l { max-width: 30ch; }
  .rh__now { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: end; padding: 16px; border-radius: var(--r-ui); background: rgba(0,0,0,.28); }
  .rh__art { width: 100%; aspect-ratio: 1; object-fit: cover; }
  .rh__np { display: grid; gap: 12px; min-width: 0; } .rh__np > .n { color: var(--green); }
  .rh__song { font: 800 clamp(22px, 2.2vw, 34px)/1.1 var(--f-sans); letter-spacing: -.035em; } .rh__song span span { font-weight: 500; opacity: .75; }
  .rh__wave { height: 44px; } .rh__wave i:nth-child(-n+9) { background: var(--green); }
  .rh__ctl { display: flex; align-items: center; gap: 16px; }
  .rh__play { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: var(--black); transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform 200ms var(--ease); }
  .rh__play .ic { width: 22px; height: 22px; } .rh__play:active { transform: scale(.94); }
  @media (hover: hover) and (pointer: fine) { .rh__play:hover { background: var(--black); color: var(--green); box-shadow: inset 0 0 0 2px var(--green); } }
  :root[data-radio] .rh__play .i-play { display: none; } :root[data-radio] .rh__play .i-pause { display: block; }
  .trg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px var(--g-s); }
  @media (max-width: 1100px) { .pls2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pls2 > :nth-child(n+4) { display: none; } .rh__g { grid-template-columns: minmax(0, 1fr); } .rpro__g { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
  @media (max-width: 640px) { .pls2, .trg { grid-template-columns: 1fr 1fr; } .pls2 > :nth-child(n+4) { display: grid; } .pls2 > :nth-child(5) { display: none; } .rh__now { grid-template-columns: minmax(0, 1fr); } .rh__art { max-width: 240px; } }
  /* ---------- the directory: every artist, A to Z */
  .azk { position: sticky; top: calc(var(--hd) + 8px); z-index: 5; display: grid; grid-template-columns: repeat(27, minmax(0, 1fr)); gap: 3px; margin-bottom: 36px; padding: 6px; border-radius: var(--r-ui); background: var(--paper); box-shadow: 0 0 0 1px var(--rule), 0 12px 24px -16px rgba(0,0,0,.2); }
  .azk > * { display: grid; place-items: center; height: 38px; border-radius: 8px; font: 400 22px/1 var(--f-display); transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
  .azk > span { opacity: .25; }
  @media (hover: hover) and (pointer: fine) { .azk a:hover { background: var(--ink); color: var(--paper); } }
  .azbs { columns: 4 220px; column-gap: var(--g); }
  .vcbs { columns: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--g); align-items: start; }   /* cities in rows: every row starts level */
  @media (max-width: 1000px) { .vcbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .vcbs { grid-template-columns: minmax(0, 1fr); } }
  .azb { break-inside: avoid; padding: 14px 0 26px; border-top: 2px solid currentColor; scroll-margin-top: calc(var(--hd) + 80px); }
  .azb__l { font: 400 64px/.8 var(--f-display); margin-bottom: 12px; color: var(--blue); }
  :root[data-theme="dark"] .azb__l { color: var(--green); }
  .azb li a { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font: 600 17px/1.3 var(--f-sans); letter-spacing: -.015em; }
  .azb em { font: 700 9px/1 var(--f-ui); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border-radius: var(--r-pill); background: var(--green); color: var(--black); }
  .azb[hidden] { display: none; }
  @media (max-width: 900px) { .azk { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
  /* ---------- search results */
  .search--page { height: 72px; margin-bottom: 20px; } .search--page .btn { flex: none; }
  .srh__tabs { margin-bottom: 32px; } .srh__tabs .chip i { font-style: normal; margin-left: 2px; }
  .srh__top { display: grid; gap: var(--g); padding: clamp(20px, 2.4vw, 36px); border-radius: var(--r-ui); margin-bottom: 36px; }
  .srh__x { display: grid; gap: 12px; justify-items: start; } .srh__x > .n { opacity: .75; }
  .srh__n { --dt: clamp(48px, 6vw, 104px); color: var(--dp); }
  .srrs { border-top: 2px solid currentColor; max-width: 980px; } [data-srh-tabs][hidden] ~ .srrs { border-top: 0; }   /* a search re-run in the page hides the tabs; the search field's own rule then heads the results */
  .srrs > li { border-bottom: 1px solid var(--rule); }
  .srr__none { display: grid; gap: 8px; padding: 32px 0; } [data-srh-top][hidden], [data-srh-tabs][hidden] { display: none; }
  .srr { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--g); padding: 20px 0; align-items: start; }
  .srr.srr--noph { grid-template-columns: minmax(0, 1fr); }
  .srr__x { display: grid; gap: 8px; }
  .srr mark { background: color-mix(in srgb, var(--green) 55%, transparent); color: inherit; padding: 0 .08em; }
  @media (max-width: 640px) { .srh__top { grid-template-columns: minmax(0, 1fr); } .srr { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; } .search--page .btn { display: none; } }
  /* ---------- Dork+ */
  .plh { padding-block: clamp(40px, 5vw, 88px); }
  .plh__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g); align-items: end; }
  .plh__x { display: grid; gap: 22px; justify-items: start; }
  .pmk--xl { --h: clamp(48px, 9vw, 150px); }
  @media (max-width: 640px) { .pmk--xl { --h: 14vw; } .plh__line { font-size: 12vw; } }
  .plh__line { font: 400 clamp(40px, 4.6vw, 80px)/.86 var(--f-display); text-transform: uppercase; color: var(--green); word-spacing: -.04em; }
  .plh .t--l { max-width: 40ch; color: #fff; }
  .plh__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .plh__mem { background: var(--green); color: var(--black); }
  .pks { display: grid; gap: 2px; border-top: 2px solid currentColor; }
  .pk { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--dk-rule); }
  .pk .ic { grid-row: span 2; width: 20px; height: 20px; color: var(--green); margin-top: 2px; }
  .pk b { font: 700 18px/1.2 var(--f-sans); letter-spacing: -.02em; } .pk span { color: var(--dk-mute); font-size: 15px; line-height: 1.45; }
  @media (max-width: 1000px) { .plh__g { grid-template-columns: minmax(0, 1fr); } }
  /* ---------- the newsletter as a page, and not found */
  .nl--page { padding-top: clamp(40px, 5vw, 88px); }
  .nf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 760px; } .nf .search { grid-column: auto; }
  .nf__code { font: 400 clamp(120px, 20vw, 320px)/.78 var(--f-display); color: var(--blue); }
  @media (min-width: 901px) { .nf { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); padding-bottom: clamp(24px, 3vw, 48px); align-items: end; max-width: none; } .nf__code { grid-row: 1 / span 3; font-size: clamp(200px, 26vw, 400px); margin-bottom: -.04em; } }   /* the number carries the page; the way out sits beside it */
  :root[data-theme="dark"] .nf__code { color: var(--green); }
  /* ---------- a Dork Live show */
  .shw__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g); align-items: start; }
  .shw__x { display: grid; gap: 22px; align-content: start; }
  .shw__when { display: flex; align-items: center; gap: 16px; }
  .shw__t { --dt: clamp(72px, 9vw, 168px); --dt-lh: .8; color: var(--dp); }
  .shw .facts, .pdp .facts { max-width: none; }
  .shw__act { display: flex; flex-wrap: wrap; gap: 10px; } .shw__act .btn--l { flex: 0 1 auto; }
  .shw__rev { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 16px 0; border-block: 1px solid var(--line); }
  .shw__rev .n { grid-column: 1 / -1; opacity: .75; } .shw__rev .ic--arrow { width: 18px; height: 18px; transition: transform var(--t-mid) var(--ease); }
  @media (hover: hover) and (pointer: fine) { .shw__rev:hover .ic--arrow { transform: translateX(3px); } }
  @media (max-width: 900px) { .shw__g { grid-template-columns: minmax(0, 1fr); } .shw__g > .ph { max-width: 420px; } }
  /* ---------- a session: the film first */
  .vph { padding-block: clamp(24px, 3vw, 48px) clamp(40px, 4vw, 64px); }
  .vph .crumbs { margin-bottom: 18px; }
  .vpl__b { position: relative; display: block; width: 100%; }
  .vpl__b .vid__play { width: clamp(64px, 7vw, 104px); height: clamp(64px, 7vw, 104px); }
  @media (hover: hover) and (pointer: fine) { .vpl__b:hover .vid__play { background: var(--black); color: var(--green); box-shadow: inset 0 0 0 2px var(--green); } }
  .vpl[data-playing] .vid__play { display: none; } .vpl[data-playing] .ph::after { content: "Playing"; position: absolute; left: 16px; top: 16px; font: 500 var(--t-n)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-radius: 4px; background: var(--green); color: var(--black); }
  .vph__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g); margin-top: 28px; align-items: end; }
  .vph__x { display: grid; gap: 10px; } .vph__x > .n { color: var(--green); } .vph .t--hero { color: #fff; }
  .vph__d { display: grid; gap: 18px; } .vph__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
  @media (max-width: 900px) { .vph__g { grid-template-columns: minmax(0, 1fr); } }
  /* ---------- a writer */
  .auh { padding-block: clamp(36px, 4vw, 64px) 0; }
  .auh__g { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g); align-items: end; }
  .auh__av { display: grid; place-items: center; width: clamp(96px, 11vw, 176px); aspect-ratio: 1; border-radius: 50%; background: var(--green); color: var(--black); font: 400 clamp(48px, 5.4vw, 88px)/1 var(--f-display); }
  .auh__x { display: grid; gap: 14px; } .auh__x > .n { color: var(--ink-2); }
  .auh__t { --dt: clamp(56px, 7.4vw, 128px); }
  @media (max-width: 640px) { .auh__g { grid-template-columns: minmax(0, 1fr); } }
  /* ---------- a venue */
  .vnh__g { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--g); align-items: end; }
  .vnh__x { display: grid; gap: 22px; } .vnh__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
  .vnh__t { --dt: clamp(72px, 10vw, 184px); --dt-lh: .8; color: var(--dp); }
  .vnh .facts { max-width: 560px; }
  @media (max-width: 800px) { .vnh__g { grid-template-columns: minmax(0, 1fr); } .vnh__g > .ph { max-width: 320px; } }
  /* ---------- a member's account */
  .acp { padding-block: clamp(32px, 4vw, 56px); }
  .acp__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g); align-items: end; }
  .acp__x { display: grid; gap: 14px; justify-items: start; } .acp__x .pmk { --h: 26px; } .acp__x > .n { color: var(--dk-mute); }
  .acp__t { --dt: clamp(64px, 8vw, 144px); --dt-lh: .8; }
  .acp__t .stop { color: var(--green); }
  .acp__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .acp__nav :is(a, button) { display: flex; text-align: left; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; font: 600 14px/1.2 var(--f-sans); transition: background-color var(--t-fast) ease; }
  .acp__nav :is(a, button) .ic { width: 17px; height: 17px; } .acp__nav a[aria-current] { background: #fff; color: var(--black); }
  @media (hover: hover) and (pointer: fine) { .acp__nav :is(a, button):not([aria-current]):hover { background: var(--dk-hover); } }
  @media (max-width: 900px) { .acp__g { grid-template-columns: minmax(0, 1fr); } }
  /* ---------- an album */
  .al__by { font: 800 clamp(22px, 2.2vw, 32px)/1.1 var(--f-sans); letter-spacing: -.035em; color: var(--green); justify-self: start; }
  .alr { display: grid; gap: 16px; max-width: 900px; justify-items: start; }
  .alr > .n { color: var(--ink-2); }
  .alr__q { --dt: clamp(40px, 4.6vw, 80px); --dt-lh: .9; }
  /* ---------- the design system page */
  .sy__p { max-width: 44ch; }
  .sws { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }   /* ten pairs: rows of five, or two */
  @media (max-width: 640px) { .sws { grid-template-columns: 1fr 1fr; } }
  .sw { position: relative; display: grid; align-content: space-between; aspect-ratio: 1; padding: 14px; box-shadow: inset 0 0 0 1px var(--rule); }
  .sw__t { font: 400 64px/.8 var(--f-display); color: var(--dp); } .sw__ac { position: absolute; right: 14px; top: 6px; font: 400 64px/1 var(--f-display); } .sw .stop { color: var(--ac); }
  .sym .pmk { --h: 32px; }
  .tys { border-top: 2px solid currentColor; }
  .ty { display: grid; gap: 10px; padding: 18px 0 22px; border-bottom: 1px solid var(--rule); } .ty > .n:first-child { color: var(--ink-2); }
  .syc { display: grid; gap: 22px; }
  .syc__r { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
  .syc__r > .n:first-child { flex-basis: 100%; color: var(--ink-2); }
  .syb { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px 44px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
  .sym { display: grid; gap: 10px; font-size: 44px; } .sym .mk { --cap: 32px; } .sym > .n { font-size: var(--t-n); color: var(--ink-2); }
  .syb--covers { display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); gap: var(--g-s); padding-top: 28px; border: 0; } .syb--covers > .n { grid-column: 1 / -1; color: var(--ink-2); }
  /* ---------- a list issue: the Hype List */
  .hlh { padding-block: clamp(32px, 4vw, 64px) clamp(40px, 5vw, 80px); }
  .hlh__t { margin: 18px 0 28px; font: 400 clamp(88px, 14vw, 260px)/.78 var(--f-display); text-transform: uppercase; word-spacing: -.04em; color: var(--dp); }
  .hlh__t .stop { color: var(--black); }
  .hlh__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g); align-items: start; }
  .hlh__jump { display: flex; flex-wrap: wrap; gap: 6px; }
  .hles { display: grid; gap: clamp(48px, 5vw, 88px); }
  .hle { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g); align-items: end; scroll-margin-top: calc(var(--hd) + 24px); }
  .hle:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .hle:nth-child(even) > .ph { order: 2; }   /* the picture swaps sides and keeps its width */
  .hle__x { display: grid; gap: 18px; padding-bottom: 6px; }
  .hle__n { color: var(--ink-2); }
  .hle__who { font: 400 clamp(56px, 6.4vw, 120px)/.8 var(--f-display); text-transform: uppercase; word-spacing: -.04em; color: var(--violet); text-wrap: balance; }
  :root[data-theme="dark"] .hle__who { color: var(--green); }
  .hle__news { display: grid; gap: 6px; padding: 14px 0; border-block: 1px solid var(--rule); } .hle__news .n { color: var(--ink-2); }
  .hle__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  @media (max-width: 900px) { .hlh__g, .hle, .hle:nth-child(even) { grid-template-columns: minmax(0, 1fr); } .hle:nth-child(even) > .ph { order: 0; } }
  /* ---------- a podcast episode */
  .eph__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g); align-items: end; }
  .eph__x { display: grid; gap: 20px; } .eph__k { color: var(--green); } .eph .t--hero { color: #fff; }
  .eph__on { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); } .eph__on > .n { opacity: .75; }
  @media (max-width: 900px) { .eph__g { grid-template-columns: minmax(0, 1fr); } .eph__g > .ph { max-width: 360px; } }
  /* playlist: its colour, four sleeves whole in a square, the tracks in two level columns */
  .pyh { background: var(--bg); color: var(--fg); padding-block: clamp(32px, 4vw, 64px); }
  .pyh__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g); align-items: end; }
  .pyh__m { display: grid; grid-template-columns: 1fr 1fr; }
  .pyh__x { display: grid; gap: 18px; justify-items: start; }
  .pyh__t { font: 400 clamp(88px, 13vw, 220px)/.8 var(--f-display); text-transform: uppercase; color: var(--dp); margin-block: 6px -4px; }
  .pyh__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; }
  .plt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: var(--g); }
  .plt > li:nth-child(6) { border-top: 0; }
  .lrow--plt { --cols: 30px 64px minmax(0, 1fr); --lrow-g: 16px; --lrow-y: 12px; --cols-sm: 26px 56px minmax(0, 1fr); }
  .plt__n { font: 500 var(--t-n)/1 var(--f-mono); letter-spacing: .06em; opacity: .7; }
  .pls2--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1100px) { .pls2--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pls2--4 > :nth-child(n+4) { display: grid; } }
  @media (max-width: 900px) { .pyh__g { grid-template-columns: minmax(0, 1fr); } .pyh__m { max-width: 360px; } .plt { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } .plt > li:nth-child(6) { border-top: 1px solid var(--line); } }
  @media (max-width: 640px) { .pls2--4 > :nth-child(5) { display: grid; } }
  /* Dork's own pages: about, editorial standards, advertise */
  .mail { font: 500 13px/1.3 var(--f-mono); letter-spacing: .02em; overflow-wrap: anywhere; }
  .ab__i { max-width: 34ch; }
  .tms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
  .tm { display: grid; align-content: start; justify-items: start; gap: 8px; padding-top: 18px; border-top: 2px solid currentColor; }
  .tm__av { display: grid; place-items: center; width: 72px; aspect-ratio: 1; margin-bottom: 10px; border-radius: 50%; background: var(--green); color: var(--black); font: 400 34px/1 var(--f-display); }
  .tm--s .tm__av { width: 52px; font-size: 24px; background: var(--ink); color: var(--paper); }
  .tm__n { font: 800 clamp(20px, 1.7vw, 26px)/1.05 var(--f-sans); letter-spacing: -.02em; }
  .tm > .n { opacity: .75; }
  [data-pair] .tm { border-top-color: var(--line); } [data-pair] .tm--s .tm__av, .abx .tm__av { background: var(--green); color: var(--black); }
  .abnf { padding-top: 18px; border-top: 1px solid var(--line, var(--rule)); font: 700 clamp(17px, 1.5vw, 21px)/2 var(--f-sans); letter-spacing: -.01em; text-wrap: balance; } .abnf li { display: inline; } .abnf li:not(:last-child) { margin-right: clamp(20px, 2.4vw, 36px); } .abnf a { white-space: nowrap; }   /* a running roll, balanced so no name sits alone on the last line */
  .abx__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
  .abx__c { display: grid; align-content: start; justify-items: start; gap: 22px; }
  .abx__c + .abx__c { padding-left: var(--g); border-left: 1px solid var(--line); }
  .abx__t { font: 400 clamp(48px, 5vw, 88px)/.84 var(--f-display); text-transform: uppercase; color: var(--dp); }
  .abx .tm { border-top: 0; padding-top: 0; }
  .docl { display: flex; flex-wrap: wrap; gap: 12px 40px; padding-top: 20px; margin-top: clamp(40px, 4vw, 64px); border-top: 2px solid currentColor; }
  .docl a { display: inline-flex; align-items: center; gap: 10px; font: 800 clamp(18px, 1.5vw, 22px)/1.1 var(--f-sans); letter-spacing: -.015em; }
  .docl .ic { width: 16px; height: 16px; transition: transform var(--t-mid) var(--ease); }
  @media (hover: hover) and (pointer: fine) { .docl a:hover .ic { transform: translateX(3px); } }
  .doch { display: grid; gap: 18px; justify-items: start; padding-bottom: clamp(28px, 3vw, 48px); margin-bottom: clamp(28px, 3vw, 48px); border-bottom: 2px solid currentColor; }
  .doch__t { font: 400 clamp(64px, 9vw, 150px)/.82 var(--f-display); text-transform: uppercase; word-spacing: -.04em; text-wrap: balance; }
  .doc__g { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--g); align-items: start; }
  .doc__toc { position: sticky; top: calc(var(--sticky-top, 0px) + 24px); display: grid; gap: 12px; }
  .doc__toc ol { display: grid; }
  .doc__toc a { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; padding: 8px 0; font: 700 15px/1.3 var(--f-sans); border-top: 1px solid var(--rule); }
  .doc__toc a .n { opacity: .6; }
  .doc__b { max-width: 720px; }
  .doc__s { scroll-margin-top: 140px; } .doc__s + .doc__s { margin-top: 2.2em; }
  .doch > .dek { max-width: 40ch; }
  .doc__s p + p { margin-top: .9em; }
  .doc__s .xh { margin-top: .25em; } .doc__k { display: block; opacity: .6; }
  .doc__b .mail { font-size: .86em; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
  .doc__c { display: grid; gap: 14px; margin-top: 2.6em; padding: 24px; border-radius: 0; background: var(--green); color: var(--black); }
  .doc__c p { display: grid; gap: 4px; margin: 0; } .doc__c b { font: 800 17px/1.2 var(--f-sans); } .doc__c .mail { text-decoration: none; }
  .adh { padding-block: clamp(36px, 5vw, 88px); background: var(--bg); color: var(--fg); }
  .adh__g { display: grid; gap: 28px; }
  .adh__t { font: 400 clamp(76px, 13vw, 230px)/.8 var(--f-display); text-transform: uppercase; word-spacing: -.04em; color: #fff; }
  .adh__t span { color: var(--green); }
  .adh__x { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-top: 24px; border-top: 1px solid var(--line); }
  .adh__x .btn { text-transform: none; letter-spacing: 0; font: 500 14px/1 var(--f-mono); }
  .adss { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
  .adss--s { margin-top: clamp(28px, 3vw, 48px); }
  .ads { display: grid; align-content: start; gap: 6px; padding-top: 14px; border-top: 2px solid currentColor; }
  .ads__v { font: 400 clamp(72px, 8vw, 136px)/.8 var(--f-display); letter-spacing: -.01em; }
  .ads--s { border-top-width: 1px; } .ads--s .ads__v { font-size: clamp(48px, 4.6vw, 80px); }
  .ads b { font: 800 17px/1.2 var(--f-sans); } .ads .n { opacity: .7; }
  .adh__h { margin-top: clamp(24px, 2.6vw, 40px); }
  .adws { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-s); }
  .adw { display: grid; align-content: start; gap: 10px; min-height: 340px; padding: 22px; border-radius: 0; background: var(--bg); color: var(--fg); }
  .adw__t { font: 400 clamp(48px, 4.4vw, 76px)/.84 var(--f-display); text-transform: uppercase; color: var(--dp); margin: 28px 0 8px; }
  .adw__f { font: 800 19px/1.15 var(--f-sans); } .adw p { font: 500 15px/1.45 var(--f-sans); }
  .adrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
  .adr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 20px; padding: 18px 0 20px; border-top: 2px solid currentColor; border-bottom: 1px solid var(--rule); }
  .adr > .n { grid-column: 1 / -1; } .adr__t { font: 800 clamp(22px, 2vw, 30px)/1.1 var(--f-sans); letter-spacing: -.02em; overflow-wrap: anywhere; }
  .adr .ic { width: 20px; height: 20px; transition: transform var(--t-mid) var(--ease); }
  @media (hover: hover) and (pointer: fine) { .adr:hover .ic { transform: translateX(4px); } }
  @media (max-width: 1100px) { .tms, .adws { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adss { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
  @media (max-width: 900px) { .doc__g { grid-template-columns: minmax(0, 1fr); } .doc__toc { position: static; } .abx__g, .adrs { grid-template-columns: minmax(0, 1fr); } .abx__c + .abx__c { padding: 32px 0 0; border-left: 0; border-top: 1px solid var(--line); } }
  .nw { white-space: nowrap; }
  @media (max-width: 640px) { .ep__show { display: none; } }   /* the radio page’s episode rows: the show name goes on phones, where it would wrap round its dot */
  .scr.bkh { padding-bottom: clamp(32px, 4vw, 64px); } .bkh__g { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: var(--g); align-items: end; margin-top: 18px; }
  .bkh__c { max-width: 340px; } .bkh .scr__x { gap: 20px; } .bkh .scr__ep { font-size: .42em; }
  .bks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-s); max-width: 780px; align-items: end; } .bks .book { --nd-b: 16px; }
  @media (max-width: 640px) { .bkh__g { grid-template-columns: minmax(0, 1fr); } .bkh__c { max-width: 220px; } }
  .sx__jump { flex-wrap: wrap; gap: 12px 28px; } .sx__jump .flt__mk { opacity: 1; } .sx__jump .mk { --cap: 18px; }
  /* strands index: a band each, the lead picture and covers alternating sides */
  .sxb__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); align-items: start; }
  .sxb--flip .sxb__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sxb--flip .sxb__x { order: 3; } .sxb--flip .sxb__c { order: 1; } .sxb--flip .sxb__ld { order: 2; }
  .sxb__x { display: grid; gap: 18px; justify-items: start; } .sxb__t { font-size: clamp(56px, 6vw, 110px); line-height: 1; } .sxb__t .mk { --cap: clamp(40px, 4.4vw, 80px); }
  .sxb__ld { display: grid; gap: 14px; } .sxb__ld .t { color: var(--dp); }
  .sxb__c .covs2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-s); }
  @media (max-width: 1000px) { .sxb__g, .sxb--flip .sxb__g { grid-template-columns: minmax(0, 1fr); } .sxb__c { max-width: 480px; } .sxb--flip :is(.sxb__x, .sxb__c, .sxb__ld) { order: 0; } }
  .rl__i { max-width: 40ch; margin-bottom: clamp(28px, 3vw, 44px); }
  .rlws { display: grid; }
  .rlw { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--g); padding: 18px 0 28px; border-top: 2px solid currentColor; }
  .rlw__l { display: grid; align-content: start; gap: 8px; } .rlw__h { font: 400 clamp(36px, 3.4vw, 60px)/.86 var(--f-display); text-transform: uppercase; } .rlw__l .n { color: var(--ink-2); }
  .lrow--rel { --cols: minmax(0, 1fr) auto; --cols-sm: minmax(0, 1fr) auto; } .rl__t { display: grid; justify-items: end; gap: 4px; text-align: right; } .rl__go { color: var(--blue); }
  :root[data-theme="dark"] .rl__go { color: var(--green); }
  @media (max-width: 900px) { .rlw { grid-template-columns: minmax(0, 1fr); } }
  .lrow--ca { --cols: 130px minmax(0, 1fr) auto; --cols-sm: 90px minmax(0, 1fr) auto; }
  :root:not([data-member]) .mem-only, :root[data-member] .guest-only { display: none; }
  :root[data-member] .ad { display: none; }   /* Dork+ Digital reads ad-free (readdork.com/dorkplus) */   /* pages that differ signed in and out */
  .acg { padding-top: clamp(40px, 5vw, 88px); }
  .acg__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g); align-items: end; padding-top: 16px; border-top: 2px solid currentColor; }
  .acg__t { font: 400 clamp(72px, 10vw, 180px)/.8 var(--f-display); text-transform: uppercase; }
  .acg__x { display: grid; gap: 20px; } .acg__act { display: flex; flex-wrap: wrap; gap: 10px; }
  @media (max-width: 900px) { .acg__g { grid-template-columns: minmax(0, 1fr); } }
  .alg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) var(--g-s); }
  @media (max-width: 560px) { .alg { gap: 20px 10px; } .alg .nd b { font-size: 14px; } } @media (max-width: 360px) { .alg .nd > :is(b, i) { overflow-wrap: anywhere; } }   /* a single long title (BODYSCANNER) is wider than a third of the smallest phones */
  .syf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--g); max-width: 980px; } .syf .fl { align-content: start; } .syf .qty { justify-self: start; }
  @media (max-width: 640px) { .syf { grid-template-columns: minmax(0, 1fr); } }
  /* a topic hub (Oasis Live ’27) */
  .tph { padding-block: clamp(32px, 4vw, 64px); background: var(--bg); color: var(--fg); }
  .tph__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g); align-items: end; margin-top: 18px; }
  .tph__t { font: 400 clamp(80px, 12vw, 220px)/.8 var(--f-display); text-transform: uppercase; color: #fff; word-spacing: -.04em; }
  .tph__x { display: grid; gap: 20px; }
  .tph__line { font: 400 clamp(36px, 3.4vw, 60px)/.86 var(--f-display); text-transform: uppercase; color: var(--green); }
  .tph__act { display: flex; gap: 10px; }
  .tpv { width: 100%; max-width: 980px; border-collapse: collapse; }
  .tpv tbody th[scope="rowgroup"] { text-align: left; padding: 28px 0 10px; border-bottom: 2px solid currentColor; }
  .tpv tbody:first-of-type th[scope="rowgroup"] { padding-top: 0; }
  .tpv th[scope="row"], .tpv td { padding: 14px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; }
  .tpv th[scope="row"] { width: 40%; font: 400 clamp(28px, 2.4vw, 40px)/.9 var(--f-display); text-transform: uppercase; }
  .tpv td { font: 700 17px/1.3 var(--f-sans); padding-left: 16px; }
  @media (max-width: 640px) { .tpv th[scope="row"] { width: 44%; font-size: 24px; } .tpv td { font-size: 15px; } }
  @media (max-width: 900px) { .tph__g { grid-template-columns: minmax(0, 1fr); } }
  /* Before Doors, the series */
  .srh2 { padding-block: clamp(32px, 4vw, 64px); background: var(--bg); color: var(--fg); }
  .srh2__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g); align-items: end; margin: 18px 0 clamp(28px, 3vw, 48px); }
  .srh2__t { font: 400 clamp(80px, 11vw, 200px)/.8 var(--f-display); text-transform: uppercase; color: #fff; }
  .srh2__g .t--l { color: rgba(255,255,255,.85); max-width: 34ch; }
  .srh2__new .t--hero { color: #fff; } .srh2__new .acc { color: var(--green); }
  .bdts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) var(--g-s); }
  .bdt { display: grid; gap: 10px; }
  @media (max-width: 900px) { .srh2__g { grid-template-columns: minmax(0, 1fr); } .bdts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .bdts { grid-template-columns: minmax(0, 1fr); } }
  /* Dork+ plans: three level cards, the popular one in black */
  .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-s); align-items: stretch; }
  .tier { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px; padding: clamp(20px, 2.2vw, 32px); background: var(--paper-2); color: var(--ink); }
  .tier--pick { background: var(--bg); color: var(--fg); }
  .tier__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
  .tier__n { display: inline-flex; align-items: center; gap: 8px; font: 800 20px/1.1 var(--f-sans); letter-spacing: -.02em; } .tier__n .pmk { --h: 17px; }
  .tier__flag { background: var(--green); color: var(--black); }
  .tier__s { font: 500 15px/1.4 var(--f-sans); opacity: .75; }
  .tier__p { display: flex; align-items: flex-start; gap: 4px; margin: 6px 0 4px; font-size: clamp(64px, 5.4vw, 96px); line-height: .82; } .tier__p b { font: 400 1em/.82 var(--f-display); } .tier__p .n { align-self: flex-end; margin-left: 6px; opacity: .7; font-size: var(--t-n); line-height: 1.3; }
  .tier__l { display: grid; align-content: start; gap: 9px; padding-top: 16px; border-top: 1px solid var(--line, var(--rule)); }
  .tier__l li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font: 500 15px/1.4 var(--f-sans); } .tier__l .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--green); }
  .tier:not(.tier--pick) .tier__l .ic { color: var(--ink); }
  .tier .btn { justify-self: stretch; margin-top: 10px; }
  @media (max-width: 900px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
  /* the magazine archive: an issue to a row, the covers one size, the issue's name filling what's left */
  .arc { display: grid; gap: clamp(28px, 3vw, 44px); }
  .arc__r { display: grid; grid-template-columns: repeat(var(--per), minmax(0, 1fr)); gap: var(--g-s); padding-top: 16px; border-top: 2px solid currentColor; }
  .arc__cs { display: contents; }
  @media (min-width: 901px) { .arc__l { --grow: calc(1 + (var(--span, 1) - 1) * .75); } }   /* inline --span can't be undone by a media rule, so the growth is switched on here instead */
  .arc__l { grid-column: span var(--span); display: grid; align-content: start; justify-items: start; gap: 10px; }
  .arc__m { display: grid; font: 400 calc(clamp(44px, 4.3vw, 76px) * var(--grow, 1))/.82 var(--f-display); text-transform: uppercase; }   /* a month with fewer covers has more room: its name grows into it */ .arc__m b { font-weight: inherit; white-space: nowrap; }
  .arc__m span { font-size: .5em; line-height: 1; margin-top: .12em; color: var(--ink-2); }
  .arc__l .n { color: var(--ink-2); }
  @media (max-width: 900px) { .arc__m { font-size: clamp(30px, 4.6vw, 44px); } }   /* tablets keep the desktop rows; the month names step down to fit their column */
  @media (max-width: 640px) {
    .arc__r { grid-template-columns: minmax(0, 1fr); }
    .arc__l { grid-column: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .arc__l .n { grid-row: 2; } .arc__l .more { grid-row: 1 / 3; grid-column: 2; }
    .arc__cs { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(140px, 38vw, 220px); gap: var(--g-s); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); margin-inline: calc(var(--m) * -1); padding-inline: var(--m); }
    .arc__cs > * { scroll-snap-align: start; }
  }
  /* the venue guide: cities as the directory's letters */
  .vc__jump { margin-bottom: 36px; }
  .vcb__c { font: 400 clamp(40px, 3.4vw, 56px)/.84 var(--f-display); text-transform: uppercase; color: var(--blue); } :root[data-theme="dark"] .vcb__c { color: var(--green); }
  .vcb > .n { display: block; margin: 8px 0 12px; opacity: .7; }
  :root[data-theme="dark"] :is(.adw[data-pair="ink"], .si__s, .tier--pick) { box-shadow: inset 0 0 0 1px var(--dk-rule); }   /* a black panel on a black page keeps its edge */
  /* sign in: the form, and what Dork+ gets you beside it */
  .si__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g); align-items: stretch; }
  .si__f, .si__in { align-content: start; } .frm__t.si__t { font-size: clamp(56px, 6vw, 104px); }
  :root:not([data-member]) .si__in, :root[data-member] .si__f { display: none; }
  .si__fg { justify-self: start; font: 500 14px/1.3 var(--f-sans); color: var(--ink-2); }
  .si__alt { font: 700 16px/1.4 var(--f-sans); padding-top: 18px; border-top: 1px solid var(--rule); }
  .si__in { justify-items: start; } .si__out { display: inline-flex; align-items: center; gap: 8px; } .si__out .ic { width: 14px; height: 14px; }
  .si__s { display: grid; align-content: start; gap: 22px; padding: clamp(24px, 2.6vw, 40px); background: var(--bg); color: var(--fg); }
  .si__perks { display: grid; } .si__perks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
  .si__perks .ic { width: 20px; height: 20px; color: var(--green); } .si__perks b { display: block; font: 800 16px/1.3 var(--f-sans); } .si__perks i { font: 500 14px/1.45 var(--f-sans); font-style: normal; opacity: .75; }
  @media (max-width: 900px) { .si__g { grid-template-columns: minmax(0, 1fr); } }
  /* subscribe: the covers whole beside the pitch; where it's going sets the price */
  .sbh { padding-block: clamp(32px, 4vw, 64px); background: var(--bg); color: var(--fg); }
  .sbh__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g); align-items: end; }
  .sbh__x { display: grid; gap: 20px; justify-items: start; }
  .sbh__t { font: 400 clamp(min(80px, 24vw), 10.2vw, 190px)/.8 var(--f-display); text-transform: uppercase; color: var(--dp); }
  .sbf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g); align-items: start; }
  .sbf__o { display: grid; gap: 30px; }
  .seg--p span { gap: 10px; height: 48px; padding: 0 18px; font-size: 13px; } .seg--p i { font-style: normal; font-weight: 500; opacity: .7; letter-spacing: .02em; }
  .seg--p input:checked + span i { opacity: .8; }
  .sbf__note { max-width: 52ch; padding: 14px 16px; background: var(--paper-2); font: 500 14px/1.5 var(--f-sans); border-left: 3px solid var(--violet); }
  .sbf__s { margin-top: 0; } .sbf__p { display: flex; align-items: flex-start; gap: 4px; font: 400 clamp(64px, 6vw, 104px)/.82 var(--f-display); } .sbf__c { font: 800 .42em/1 var(--f-sans); margin-top: .08em; }
  @media (max-width: 900px) { .sbh__g, .sbf { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 640px) { .sbh__covs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .sbh__covs .cov__cap { display: none; } }   /* on a phone the four covers are a strip, so the form isn't three screens down */
  /* a festival in pictures: every photograph whole at 3:2, rows always full; the lightbox */
  .glh { padding-block: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 48px); background: var(--bg); color: var(--fg); }
  .glh__g { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-top: 18px; }
  .glh__t { font: 400 clamp(80px, 12vw, 210px)/.8 var(--f-display); text-transform: uppercase; color: var(--dp); }
  .glh__x { display: grid; gap: 6px; text-align: right; } .glh__x b { font: 800 clamp(20px, 1.8vw, 28px)/1.1 var(--f-sans); letter-spacing: -.02em; }
  .gl .wrap { display: grid; gap: clamp(28px, 3vw, 44px); }
  .gl__r { display: grid; gap: clamp(28px, 3vw, 44px) var(--g-s); } .gl__r--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gl__r--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl__i { display: grid; align-content: start; gap: 12px; margin: 0; }
  .gl__b { display: block; width: 100%; padding: 0; cursor: zoom-in; }
  .gl__b:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
  .gl__i figcaption { display: grid; gap: 4px; } .gl__i figcaption b { font: 800 clamp(17px, 1.3vw, 20px)/1.15 var(--f-sans); letter-spacing: -.015em; }
  .gl__i figcaption a { font: 800 clamp(17px, 1.3vw, 20px)/1.2 var(--f-sans); letter-spacing: -.015em; }
  .gl__i--lead figcaption a { font-size: clamp(22px, 2vw, 32px); }
  @media (max-width: 900px) { .gl__r--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gl__r--3 > :last-child { grid-column: 1 / -1; } }
  @media (max-width: 560px) { .gl__r--3, .gl__r--2 { grid-template-columns: minmax(0, 1fr); } .gl__r--3 > :last-child { grid-column: auto; } .glh__x { text-align: left; } }
  .lb { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: #0a0a0a; color: #fff; }
  .lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .lb::backdrop { background: #0a0a0a; }
  .lb, .lb::backdrop { transition: opacity 220ms ease, display 220ms allow-discrete, overlay 220ms allow-discrete; }   /* the lightbox fades in and out; photos inside cross-fade */
  .lb:not([open]), .lb:not([open])::backdrop { opacity: 0; }
  @starting-style { .lb[open], .lb[open]::backdrop { opacity: 0; } }
  html.lb-open { overflow: hidden; }
  .lb__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--m); }
  .lb__x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); } .lb__x .ic { width: 18px; height: 18px; transition: scale var(--t-press) var(--ease); }
  .lb__x:active, .lb__nav:active { scale: .92; }
  .lb__f { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 14px; min-height: 0; margin: 0; padding: 0 clamp(16px, 8vw, 120px) 24px; }
  .lb__f img { transition: opacity 180ms ease; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; align-self: center; }
  .lb__f figcaption { display: grid; gap: 4px; text-align: center; } .lb__f a { font: 800 20px/1.2 var(--f-sans); color: #fff; } .lb__f figcaption .n { color: rgba(255,255,255,.7); }
  .lb__nav { position: fixed; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #0a0a0a; transition: scale var(--t-press) var(--ease); }
  .lb__nav .ic { width: 18px; height: 18px; } .lb__nav--p { left: 16px; } .lb__nav--p .ic { rotate: 180deg; } .lb__nav--n { right: 16px; }
  @media (max-width: 640px) { .lb__nav { top: auto; bottom: 16px; translate: none; width: 44px; height: 44px; } .lb__f { padding-bottom: 80px; } }
  /* the bag: lines on the left, the summary beside them, sticky */
  .bgh { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 24px; padding-bottom: 20px; border-bottom: 2px solid currentColor; }
  .bgh .crumbs { flex-basis: 100%; }
  .bgh__t { font: 400 clamp(64px, 9vw, 150px)/.82 var(--f-display); text-transform: uppercase; word-spacing: -.04em; }
  .bgp__g { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--g); align-items: start; }
  .bgls > li + li { border-top: 1px solid var(--rule); }
  .bgl { display: grid; grid-template-columns: clamp(96px, 11vw, 150px) minmax(0, 1fr) auto; gap: clamp(16px, 2vw, 28px); align-items: start; padding: 24px 0; }
  .bgl__pic .ph { background: var(--paper-2); }
  .bgl__x { display: grid; justify-items: start; gap: 6px; }
  .bgl__n { font: 800 clamp(19px, 1.6vw, 24px)/1.1 var(--f-sans); letter-spacing: -.02em; }
  .bgl__s { font: 500 15px/1.4 var(--f-sans); color: var(--ink-2); } .bgl__note { color: var(--ink-2); }
  .bgl__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 10px; }
  .qty button { transition: opacity var(--t-fast) ease, scale var(--t-press) var(--ease); } .qty button:active:not([aria-disabled="true"]) { scale: .82; } .qty button[aria-disabled="true"] { opacity: .28; cursor: default; }
  .qty--s { height: 42px; } .qty--s button { width: 34px; font-size: 18px; }
  .bgl__rm { font: 500 var(--t-n)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 8px 0; }
  .bgl__p { font: 800 clamp(18px, 1.5vw, 22px)/1.1 var(--f-sans); font-variant-numeric: tabular-nums; }
  .bgs { position: sticky; top: calc(var(--sticky-top, 0px) + 24px); display: grid; gap: 18px; margin-top: 24px; padding: clamp(20px, 2vw, 30px); background: var(--paper-2); }
  .bgs__t { font: 400 clamp(36px, 3vw, 52px)/.84 var(--f-display); text-transform: uppercase; }
  .bgs__l { display: grid; } .bgs__l > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); font: 500 15px/1.3 var(--f-sans); }
  .bgs__l dd { margin: 0; text-align: right; } .bgs__l > div:first-child dd { font: 800 20px/1.1 var(--f-sans); font-variant-numeric: tabular-nums; }
  .bgs .btn { width: 100%; } .bgs .n { color: var(--ink-2); line-height: 1.5; } .bgs .more { margin-top: 6px; color: var(--ink); }
  .bgp__empty { grid-column: 1 / -1; padding: 40px 0; font: 800 clamp(22px, 2vw, 30px)/1.2 var(--f-sans); display: grid; gap: 14px; justify-items: start; }
  .prods--4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-s); }
  @media (max-width: 900px) { .bgp__g { grid-template-columns: minmax(0, 1fr); } .bgs { position: static; } .prods--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
  @media (max-width: 520px) { .bgl { grid-template-columns: 88px minmax(0, 1fr); } .bgl__p { grid-column: 2; grid-row: 1; justify-self: end; } .bgl__x { grid-row: 1; grid-column: 2; padding-right: 64px; } }
  /* support: two notes, then the form */
  .spg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g); align-items: start; }
  .spg__l { display: grid; gap: 28px; }
  .spn { display: grid; gap: 10px; padding-top: 16px; border-top: 2px solid currentColor; }
  .spn__t { font: 800 clamp(20px, 1.6vw, 24px)/1.1 var(--f-sans); letter-spacing: -.02em; } .spn p { font: 500 16px/1.55 var(--f-sans); color: var(--ink-2); }
  .frm { display: grid; gap: 22px; padding: clamp(22px, 2.4vw, 36px); background: var(--paper-2, #f2f2ee); }
  .frm__t { font: 400 clamp(40px, 3.6vw, 60px)/.84 var(--f-display); text-transform: uppercase; }
  .frm__2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .fl { display: grid; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
  .fl > label:not(.drop), .fl > legend, .fl__l { font: 500 var(--t-n)/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 0; margin-bottom: 8px; }
  .fl input:not([type]), .fl input[type="email"], .fl input[type="password"], .fl textarea { width: 100%; min-height: 50px; padding: 13px 16px; border: 0; border-radius: var(--r-ui); background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px #8c8c88; font: 500 16px/1.4 var(--f-sans); transition: box-shadow var(--t-fast) ease; }
  .fl textarea { resize: vertical; min-height: 160px; }
  .fl :is(input, textarea) { transition: box-shadow var(--t-fast) ease; caret-color: var(--blue); } :root[data-theme="dark"] .fl :is(input, textarea) { caret-color: var(--green); }
  @media (hover: hover) and (pointer: fine) { .fl :is(input, textarea):hover:not(:focus) { box-shadow: inset 0 0 0 1.5px var(--ink); } }
  .fl :is(input, textarea):focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
  .fl__pw { position: relative; } .fl__pw input { padding-right: 54px; }
  .fl__eye { position: absolute; right: 5px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-2); transition: color var(--t-fast) ease, scale var(--t-press) var(--ease); }
  .fl__eye:active { scale: .9; } .fl__eye .ic { width: 19px; height: 19px; } .fl__eye[aria-pressed="true"] { color: var(--ink); }
  .fl__eye .i-hide, .fl__eye[aria-pressed="true"] .i-show { display: none; } .fl__eye[aria-pressed="true"] .i-hide { display: block; }
  @media (hover: hover) and (pointer: fine) { .fl__eye:hover { color: var(--ink); } }
  .fl.is-bad :is(input, textarea) { box-shadow: inset 0 0 0 2px var(--red); }
  .segs { display: flex; flex-wrap: wrap; gap: 8px; }
  .seg { position: relative; cursor: pointer; } .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .seg span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px currentColor; font: 700 12px/1 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, scale var(--t-press) var(--ease); }
  .seg:active span { scale: .97; }
  .seg input:checked + span { background: var(--ink); color: var(--paper); }
  .seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
  .drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 16px; border-radius: var(--r-ui); border: 1.5px dashed #8c8c88; text-align: center; cursor: pointer; font: 500 15px/1.4 var(--f-sans); }
  .drop .ic { width: 22px; height: 22px; } .drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .drop:focus-within { border-color: var(--ink); border-style: solid; } .drop:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) { .drop:hover { border-color: var(--ink); } .seg:hover span { background: color-mix(in srgb, currentColor 8%, transparent); } .seg:hover input:checked + span { background: var(--ink); } }
  .drop__l { display: grid; gap: 4px; font: 500 13px/1.3 var(--f-mono); } .drop__l:empty { display: none; }
  .frm__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .frm__err { color: var(--red); }
  @media (max-width: 900px) { .spg, .frm__2 { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 640px) { .tm__av { width: 56px; font-size: 26px; } .adw { min-height: 0; } .adws { grid-template-columns: minmax(0, 1fr); } }
  /* ---------- a film & TV review on etc. */
  .scr { padding-block: clamp(28px, 3vw, 48px) 0; }
  .scr__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g); align-items: end; margin: 18px 0 28px; }
  .scr__x { display: grid; gap: 14px; } .scr__k { color: var(--green); }
  .scr__t { color: #fff; } .scr__ep { display: block; margin-top: .12em; font-size: .5em; color: var(--green); }
  .scr__fig { margin-inline: calc(var(--m) * -1); } .scr__fig figcaption { display: none; }
  @media (max-width: 900px) { .scr__g { grid-template-columns: minmax(0, 1fr); } }
  /* ---------- the rail: an ad that stays in view, then what everyone's reading */
  .rail { align-self: stretch; }
  .rail__in { display: grid; gap: 32px; height: 100%; align-content: start; }
  .ad--rail { position: sticky; top: calc(var(--hd) + 20px); }   /* what's being read first; then the ad stays in view down the story */
  .ad--rail { padding: 14px 0 0; background: transparent; border: 0; justify-items: stretch; }
  .ad--rail .ad__box { width: 100%; max-width: 300px; height: 600px; justify-self: center; } .ad--rail .ad__box:empty::after { content: "300 × 600"; }
  :root[data-theme="dark"] :is(.inrel .n, .pdp__code) { color: var(--green); }
  @media (max-width: 1100px) {
    .art__g { grid-template-columns: minmax(0, 1fr); }
    .rail { margin-top: 48px; } .ad--rail { display: none; }
    .prose, .art__foot { max-width: 720px; }
  }
  @media (max-width: 640px) {
    .byl__act { margin-left: 0; width: 100%; }
    .fig--lead { margin-inline: calc(var(--m) * -1); } .fig--lead figcaption { padding-inline: var(--m); }
  }
}

/* ================================================================ states */
@layer states {
  @media (hover: hover) and (pointer: fine) {
    /* a button answers the pointer by changing its fill, never its shape: solid turns to outline, outline fills */
    .btn:hover { background: transparent; color: var(--bb, var(--ink)); box-shadow: inset 0 0 0 2px currentColor; }
    .btn--ghost:hover { background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); box-shadow: none; }
    .btn--green:hover { background: var(--black); color: var(--green); box-shadow: inset 0 0 0 2px var(--green); }
    .btn--green:hover .pmk { --pmk-plus: var(--green); }
    .fr__play:hover, .vid:hover .vid__play { background: var(--black); color: var(--green); box-shadow: inset 0 0 0 2px var(--green); }   /* the round play buttons speak the same way */
    .stab:not([aria-selected="true"]):hover { background: color-mix(in srgb, currentColor 12%, transparent); }
  }
  :root[data-theme="dark"] { --paper: #0e0e0e; --paper-2: #1a1a1a; --ink: #f2f2f0; --ink-2: #9d9d99; --rule: var(--dk-rule); --pill-edge: var(--dk-mute); color-scheme: dark; }
  :root[data-theme="dark"] :is(.sec--flow .stop, .nl__t, .most__n) { color: var(--green); }
  :root[data-theme="dark"] [data-pair="ink"] { --pg: #000; }
  :root[data-theme="dark"] .bar { box-shadow: 0 1px 0 var(--dk-rule); }
  :root[data-theme="dark"] .sec--flow .panel[data-pair="ink"] { box-shadow: inset 0 0 0 1px var(--dk-rule); }   /* a black panel on a near-black page keeps its edge */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
    .tick__t { animation: none !important; }
  }
  @media print {   /* printing gives a clean running list of the page's stories */
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .strip, .bar, .trd, .fr, .tick, .top, .ad, .toast, .scrim, .nl, .foot__g, .foot__soc, [data-top], .hero--feat, video, .rail, .byl__act, .inplus, .pgs, .flt, .pg, :is(.art, .feat) ~ * { display: none !important; }
    .art__g { display: block; } .prose { max-width: none; font-size: 12pt; } .pq p { font-size: 22pt; }   /* a story prints as the story */
    [data-pair] { background: none !important; color: #000 !important; --dp: #000; --fg: #000; --ac: #000; }
    .sec { padding-block: 24px; } .card, .row, .sh { break-inside: avoid; } .hero { height: auto; min-height: 0; }
    .lock--foot, .doc ~ *, .doc__toc, .docl { display: none !important; }   /* a policy prints as the policy */
    .doc__g { display: block; } .doc__c { background: none !important; box-shadow: inset 0 0 0 1.5px #000; } .doc__s { break-inside: avoid; }
  }
}

/* Outside the layers on purpose: an embedding page's own unlayered body styles would otherwise beat ours. */
html body { background: var(--paper); color: var(--ink); }

/* the theme switch: the new colours spread from the button in a circle (site.js); the browser's own crossfade is switched off */
:root[data-vt="theme"]::view-transition-old(root), :root[data-vt="theme"]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }   /* the theme switch draws its own circle */
/* moving between pages: the page cross-fades quickly and the pinned header holds still, so the site feels like one place rather than a series of loads */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .hd { view-transition-name: masthead; }
  :root[data-vt="theme"] .hd { view-transition-name: none; }
  ::view-transition-group(root) { animation-duration: 200ms; animation-timing-function: ease; }
  ::view-transition-group(masthead) { animation-duration: 0s; }
}

/* ================================================================ shared components from the live-site audit (site/comp.py)
   Each serves three or more templates. They take their colours from the surface they sit on (currentColor, --ink,
   --rule, --dp), so the same part works on white, on a colour band and in dark mode. */
@layer components {
  /* pager: Load more with an honest count, and real page links (logarithmic jumps) for crawlers */
  .pg--more { align-items: center; }
  .pg__lm { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .pg__count { color: var(--ink-2); }
  .pg--more .pg__ns { flex-wrap: wrap; }

  /* tags, grouped, each with Follow */
  .tgs { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line, var(--rule)); }
  .tgs__g { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: start; gap: 12px; } .tgs__g > .n { padding-top: 11px; color: var(--ink-2); }
  .tgs__l { display: flex; flex-wrap: wrap; gap: 6px; }
  .tg { display: inline-flex; align-items: stretch; height: 34px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px currentColor; overflow: hidden; }
  .tg__n { display: flex; align-items: center; padding: 0 12px 0 14px; font: 700 11px/1 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
  .tg__f { display: grid; place-items: center; width: 34px; box-shadow: inset 1.5px 0 0 currentColor; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; } .tg__f .ic { width: 13px; height: 13px; transition: rotate var(--t-mid) var(--ease); }
  .tg__f[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .tg__f[aria-pressed="true"] .ic { rotate: 45deg; }   /* following: filled; press again to stop (the plus turns to a cross) */
  @media (hover: hover) and (pointer: fine) { .tg__f:not([aria-pressed="true"]):hover { background: color-mix(in srgb, currentColor 12%, transparent); } }
  @media (max-width: 640px) { .tgs__g { grid-template-columns: minmax(0, 1fr); gap: 8px; } .tgs__g > .n { padding-top: 0; } }

  /* coverage river, related acts, data source */
  .cov-r .rows { margin-bottom: 14px; } .ra .chips { margin-top: 4px; }
  .dsrc { margin-top: 18px; color: var(--ink-2); } .dsrc a { color: var(--ink); }

  /* tracklist */
  .tl2s { counter-reset: none; }
  .tl2 { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line, var(--rule)); transition: background-color var(--t-fast) ease; }
  .tl2__n { font: 500 12px/1 var(--f-mono); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
  .tl2__t { font: 650 16px/1.3 var(--f-sans); letter-spacing: -.01em; } .tl2__d { color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .tl2.is-cur { background: color-mix(in srgb, var(--dp, var(--blue)) 12%, transparent); } .tl2.is-cur .tl2__n { color: var(--dp, var(--blue)); }
  :root[data-theme="dark"] .tl2.is-cur { background: color-mix(in srgb, var(--green) 14%, transparent); } :root[data-theme="dark"] .tl2.is-cur .tl2__n { color: var(--green); }

  /* discography: one row that scrolls, never a ragged last row */
  .dg .stabs { margin-bottom: 18px; }
  .dscs { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(140px, 15vw, 190px); gap: var(--g-s); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 4px; }
  .dscs::-webkit-scrollbar { display: none; } .dsc { scroll-snap-align: start; } .dsc__cur { color: var(--dp, var(--blue)); }
  .ph--none { display: grid; place-items: center; background: color-mix(in srgb, currentColor 7%, transparent); } .ph--none span { font: 400 64px/1 var(--f-display); opacity: .35; text-transform: uppercase; }

  /* lyrics (blank bars in the prototype: the words come licensed) */
  .lyr__t { display: grid; gap: 10px; padding: 18px 0; max-width: 560px; }
  .lyr__b { display: block; height: 12px; width: var(--w); background: color-mix(in srgb, currentColor 10%, transparent); } .lyr__b[style="--w:0%"] { height: 4px; }

  /* embeds: nothing loads until you press play */
  .emb { display: grid; gap: 8px; margin: 1.6em 0; }
  .emb__b { position: relative; display: block; width: 100%; padding: 0; text-align: left; }
  .emb__p { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: var(--black); transition: scale var(--t-press) var(--ease), background-color var(--t-fast) ease, color var(--t-fast) ease; }
  .emb__p .ic { width: 24px; height: 24px; } .emb__b:active .emb__p { scale: .94; }
  @media (hover: hover) and (pointer: fine) { .emb__b:hover .emb__p { background: var(--black); color: var(--green); box-shadow: inset 0 0 0 2px var(--green); } }
  .emb__k { position: absolute; left: 12px; bottom: 12px; padding: 5px 9px; border-radius: var(--r-pill); background: rgba(10,10,10,.78); color: #fff; }
  .emb figcaption { color: var(--ink-2); } .emb figcaption span { display: block; }
  .emb--spotify .emb__b { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px; background: var(--black); color: #fff; border-radius: var(--r-ui); }
  .emb--spotify .emb__p { position: static; translate: none; width: 48px; height: 48px; grid-row: 1; grid-column: 2; justify-self: end; } .emb--spotify .emb__p .ic { width: 18px; height: 18px; }
  .emb--spotify .emb__k { position: static; grid-column: 2; grid-row: 1; background: none; padding: 0; color: rgba(255,255,255,.7); }

  /* photo run inside a story */
  .ps { margin: 1.8em 0; display: grid; gap: 8px; }
  .ps__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ps__i .ph img { transition: opacity var(--t-mid) ease; } @media (hover: hover) and (pointer: fine) { .ps__i:hover .ph img { opacity: .86; } }
  .ps__more { display: grid; place-content: center; justify-items: center; gap: 4px; aspect-ratio: 3/2; background: var(--ink); color: var(--paper); } .ps__more b { font: 400 44px/1 var(--f-display); }
  .ps figcaption { color: var(--ink-2); }
  @media (max-width: 640px) { .ps__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* the lowdown */
  .lowd { max-width: 700px; margin: 0 0 1.6em; border-top: 2px solid currentColor; border-bottom: 1px solid var(--rule); }
  .lowd summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; } .lowd summary::-webkit-details-marker { display: none; }
  .lowd summary::after { content: "+"; font: 400 22px/1 var(--f-sans); transition: rotate var(--t-mid) var(--ease); } .lowd[open] summary::after { rotate: 45deg; }
  .lowd__c { margin-left: auto; color: var(--ink-2); }
  .lowd ol { counter-reset: lw; padding-bottom: 14px; } .lowd li { counter-increment: lw; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 8px 0; font: 600 17px/1.4 var(--f-sans); letter-spacing: -.01em; }
  .lowd li::before { content: counter(lw); font: 400 24px/1 var(--f-display); color: var(--blue); } :root[data-theme="dark"] .lowd li::before { color: var(--green); }

  /* topic box, notices, disclosure */
  .tpb { display: grid; gap: 10px; margin: 1.8em 0; padding: 22px 24px 18px; }
  .tpb__k { color: var(--green); } .tpb__t { font: 400 clamp(34px, 3vw, 48px)/.85 var(--f-display); text-transform: uppercase; } .tpb__l { font: 600 17px/1.35 var(--f-sans); }
  .tpb__x { display: grid; gap: 0; margin-top: 4px; border-top: 1px solid var(--dk-rule); } .tpb__x li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dk-rule); } .tpb__x a { display: flex; justify-content: space-between; width: 100%; font-weight: 700; } .tpb__x .n { color: var(--dk-mute); }
  .ntc { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; border-radius: var(--r-ui); background: color-mix(in srgb, currentColor 7%, transparent); font: 650 15px/1.3 var(--f-sans); }
  .ntc__d { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); flex: none; } .ntc--closed .ntc__d { background: var(--red); } .ntc--live .ntc__d { background: var(--green); animation: pulse 1.6s ease-in-out infinite; }
  .ntc .more { margin-left: auto; }
  .dsc-l { display: flex; align-items: center; gap: 10px; color: var(--ink-2); } .dsc-l__k { padding: 4px 8px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); }

  /* the Dork+ wall */
  .gt { display: grid; gap: 0; }
  .gt__fade { -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); max-height: 16em; overflow: hidden; }
  .gt__box { display: grid; gap: 16px; justify-items: start; padding: clamp(24px, 3vw, 40px); margin-top: -1em; }
  .gt__box > .n { color: var(--green); } .gt__t { font: 800 clamp(26px, 2.4vw, 36px)/1.05 var(--f-sans); letter-spacing: -.035em; } .gt__t .pmk { --h: .82em; vertical-align: -.06em; }
  .gt__p { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-top: 1px solid var(--dk-rule); } .gt__p li { display: grid; gap: 4px; padding: 12px 12px 12px 0; } .gt__p li + li { padding-left: 12px; box-shadow: inset 1px 0 0 var(--dk-rule); } .gt__p .n { color: var(--dk-mute); } .gt__p .pmk { --h: 15px; }
  .gt__act { display: flex; flex-wrap: wrap; gap: 10px; }
  @media (max-width: 640px) { .gt__p { grid-template-columns: minmax(0, 1fr); } .gt__p li + li { padding-left: 0; box-shadow: inset 0 1px 0 var(--dk-rule); } }

  /* tour dates, past shows, places */
  .lrow--place { --cols: minmax(0, 1fr) auto; } .lrow--place > .n { color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .tdt .rows, .plc .rows { margin-bottom: 14px; } .pst .dsrc { margin-top: 12px; }

  /* shop: variant picker, buy, strips, share */
  .vp { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; } .vp legend { padding: 0; margin-bottom: 10px; } .vp__o { display: flex; flex-wrap: wrap; gap: 8px; }
  .atb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .atb .btn { flex: 1 1 200px; }
  .btn.is-sold { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--rule); cursor: not-allowed; transform: none; }
  .pstr__g { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 16vw, 210px); gap: var(--g-s); overflow-x: auto; scrollbar-width: none; } .pstr__g::-webkit-scrollbar { display: none; }
  .shr { display: flex; align-items: center; gap: 6px; } .shr > .n { margin-right: 6px; color: var(--ink-2); } [data-pair] .shr > .n { color: inherit; opacity: .8; }

  /* in print now */
  .ip__g { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--g); }
  .ip__x { display: grid; gap: 14px; justify-items: start; } .ip__t { font: 400 var(--t-flow)/.8 var(--f-display); text-transform: uppercase; color: var(--dp); } .ip__d { opacity: 1; }
  .ip__act { display: flex; align-items: center; gap: 18px; }
  .ip__cs { display: flex; gap: 12px; } .ip__c { width: clamp(90px, 9vw, 140px); } .ip__c .ph { box-shadow: 0 14px 24px -16px rgba(0,0,0,.5); }
  @media (max-width: 900px) { .ip__g { grid-template-columns: minmax(0, 1fr); } .ip__cs { overflow-x: auto; scrollbar-width: none; } .ip__c { flex: none; width: 110px; } }
}

/* ================================================================ templates added after the live-site audit (site/tpl_new.py) */
@layer templates {
  /* story formats */
  .art__k { color: var(--ink-2); }
  .art__foot .tgs { border-top: 0; padding-top: 0; }   /* the foot's own rule heads the tags */
  .lsis { counter-reset: none; max-width: 700px; margin-top: 1.4em; border-top: 2px solid currentColor; }
  .lsi { display: grid; grid-template-columns: clamp(64px, 7vw, 96px) minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
  .lsi__n { font: 400 clamp(56px, 6vw, 88px)/.78 var(--f-display); color: var(--blue); font-variant-numeric: tabular-nums; } :root[data-theme="dark"] .lsi__n { color: var(--green); }
  .lsi__t { font: 800 clamp(22px, 2vw, 28px)/1.1 var(--f-sans); letter-spacing: -.03em; margin-bottom: 8px; }
  .lsi__x p { font: 400 clamp(17px, 1.25vw, 19px)/1.6 var(--f-sans); } .lsi__x .emb { margin-bottom: 0; }

  /* catalogue */
  .trk__about .t { max-width: 34ch; margin-top: 4px; }
  .dscs--v { grid-auto-columns: clamp(220px, 24vw, 300px); }
  .vid-t { display: grid; gap: 6px; } .vid-t .n { color: var(--ink-2); }
  .vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px var(--g-s); } .vgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 900px) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .vgrid { grid-template-columns: minmax(0, 1fr); } }
  .vph .emb { margin: 0; } .vph .emb figcaption { color: rgba(255,255,255,.7); }

  /* playlists */
  .plps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-s); }
  .plp { display: grid; gap: 8px; align-content: start; min-height: 220px; padding: 20px; border-radius: var(--r-ui); background: var(--ink); color: var(--paper); transition: transform 200ms var(--ease); }
  .plp:nth-child(1) { background: var(--pink); color: var(--black); } .plp:nth-child(2) { background: var(--blue); color: #fff; } .plp:nth-child(3) { background: var(--green); color: var(--black); } .plp:nth-child(4) { background: var(--red); color: #fff; }
  .plp__t { font: 400 clamp(56px, 5vw, 84px)/.8 var(--f-display); text-transform: uppercase; margin-top: auto; } .plp__d { font: 700 15px/1.25 var(--f-sans); } .plp .wm { --h: .8em; }
  .plp:active { transform: scale(.98); }
  @media (max-width: 1100px) { .plps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .lrow--pl { --cols: 40px minmax(0, 1fr) auto; }
  .plc__i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; } .plc__i .ic { width: 14px; height: 14px; }
  .azk__a { font: 400 22px/1 var(--f-display); }

  /* gigs, tours, venues, scenes */
  .ggd + .ggd { margin-top: 28px; } .ggd .rows { margin-top: 0; }
  .stos--1 { grid-template-columns: minmax(0, 1fr); margin-bottom: 24px; } .stos--1 .sto { min-height: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
  .stos--1 .sto__mk { font: 400 clamp(34px, 3vw, 48px)/.85 var(--f-display); text-transform: uppercase; }
  .vofs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g-s); border-top: 2px solid currentColor; }
  .vof { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--rule); --nd-b: 17px; --nd-i: 13px; }
  .prose--s { font-size: 17px; max-width: none; }
  .scvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--g); border-top: 2px solid currentColor; }
  .scv { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--rule); } .scv__n { font: 800 clamp(20px, 1.7vw, 26px)/1.1 var(--f-sans); letter-spacing: -.03em; } .scv .n { color: var(--ink-2); } .scv__d { font: 400 16px/1.45 var(--f-sans); color: var(--ink-2); }
  @media (max-width: 640px) { .scvs, .vofs { grid-template-columns: minmax(0, 1fr); } }
  .sc__t { font: 400 clamp(88px, 11vw, 200px)/.8 var(--f-display); text-transform: uppercase; color: var(--dp); }

  /* festivals and the forecast */
  .fsy { display: flex; flex-wrap: wrap; gap: 6px; } .fsy .chip[aria-current] { background: var(--fg); color: var(--bg); box-shadow: none; }
  .lup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
  .lup__h li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--rule); font: 400 clamp(28px, 2.4vw, 40px)/.9 var(--f-display); text-transform: uppercase; } .lup__h .n { font-size: var(--t-n); color: var(--ink-2); }
  .lup__o li { padding: 8px 0; border-bottom: 1px solid var(--rule); font: 700 16px/1.25 var(--f-sans); letter-spacing: -.01em; }
  .lup__t { margin-top: 36px; } .lup__tl { font: 700 17px/1.8 var(--f-sans); letter-spacing: -.01em; }
  @media (max-width: 1100px) { .lup { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } } @media (max-width: 640px) { .lup { grid-template-columns: minmax(0, 1fr); } }
  .wxs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; align-self: end; }
  .wxs li { display: grid; gap: 6px; padding: 18px; background: color-mix(in srgb, currentColor 10%, transparent); } .wxs b { font: 400 clamp(40px, 4vw, 64px)/.85 var(--f-display); }
  .wxds { border-top: 2px solid currentColor; margin-bottom: 20px; }
  .wxd { display: grid; grid-template-columns: 60px minmax(0, 1fr) 110px 120px; align-items: center; gap: var(--g-s); padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .wxd__c { display: grid; gap: 4px; } .wxd__c b { font: 700 17px/1.2 var(--f-sans); } .wxd__c .n { color: var(--ink-2); }
  .wxd__t { display: flex; align-items: baseline; gap: 8px; } .wxd__t b { font: 400 44px/.8 var(--f-display); } .wxd__t i { font: 400 28px/.8 var(--f-display); font-style: normal; color: var(--ink-2); }
  .wxd__r { display: grid; gap: 2px; } .wxd__r b { font: 700 17px/1 var(--f-sans); } .wxd__r i { font-style: normal; color: var(--ink-2); font-size: 14px; }
  @media (max-width: 640px) { .wxd { grid-template-columns: 60px minmax(0, 1fr) auto; } .wxd__r { display: none; } }

  /* the archive */
  .yrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--g); border-top: 2px solid currentColor; }
  .yr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-s); padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .yr__y { font: 400 clamp(64px, 6vw, 104px)/.8 var(--f-display); } .yr__a { font: 600 15px/1.4 var(--f-sans); color: var(--ink-2); } .yr .ic { width: 18px; height: 18px; transition: translate var(--t-mid) var(--ease); }
  @media (hover: hover) and (pointer: fine) { .yr:hover .ic { translate: 4px 0; } .yr:hover .yr__y { color: var(--blue); } :root[data-theme="dark"] .yr:hover .yr__y { color: var(--green); } }
  .yrs > li:first-child { grid-column: 1 / -1; } .yrs > li:first-child .yr__y { font-size: clamp(96px, 10vw, 180px); }   /* the current year leads across the width; the ten before it pair off level */
  @media (max-width: 800px) { .yrs { grid-template-columns: minmax(0, 1fr); } }
  .yrn { display: flex; justify-content: space-between; margin-bottom: 28px; } .more--back .ic { order: -1; }
  .yrm { margin-top: 14px; }
  .gn__i { max-width: 40ch; }
  .gnb__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g); align-items: start; }
  .gnb__t .mk { --cap: clamp(36px, 4vw, 64px); color: var(--dp); } .gnb { padding-block: clamp(40px, 4vw, 64px); }
  .gnb__l { display: flex; flex-wrap: wrap; gap: 6px 26px; padding-top: 14px; border-top: 2px solid currentColor; }   /* a run of words, so there's never a half-empty row */
  .gnl { display: inline-flex; align-items: center; gap: 8px; font: 400 clamp(36px, 3.6vw, 60px)/1 var(--f-display); text-transform: uppercase; } .gnl .ic { width: .4em; height: .4em; }
  @media (max-width: 800px) { .gnb__g { grid-template-columns: minmax(0, 1fr); } }
  .gnrs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--g); border-top: 2px solid currentColor; }
  .gnr { display: grid; gap: 8px; padding: 18px 0 20px; border-bottom: 1px solid var(--rule); --nd-b: 19px; } .gnr__q { font: 420 16px/1.45 var(--f-serif); }
  @media (max-width: 1100px) { .gnrs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .gnrs { grid-template-columns: minmax(0, 1fr); } }
  .trls { border-top: 2px solid currentColor; max-width: 980px; }
  .trl { display: grid; grid-template-columns: clamp(80px, 9vw, 140px) minmax(0, 1fr); gap: var(--g); padding: 22px 0; border-bottom: 1px solid var(--rule); }
  .trl__y { font: 400 clamp(56px, 6vw, 96px)/.78 var(--f-display); color: var(--ink-2); } .trl__x { display: grid; gap: 10px; } .trl__why { font: 420 17px/1.45 var(--f-serif); color: var(--ink-2); }
  .sth__g > .ph { align-self: end; }

  /* culture directories */
  .cst { border-top: 2px solid currentColor; margin-bottom: 28px; } .cst li { border-bottom: 1px solid var(--rule); } .cst a { display: grid; gap: 2px; padding: 11px 0; --nd-b: 17px; }
  .lrow--rv { --cols: 120px minmax(0, 1fr) 0; } .lrow--cr { --cols: 64px minmax(0, 1fr) 0; }

  /* shop and print */
  .sel { display: inline-flex; align-items: center; gap: 10px; } .sel select { height: 38px; padding: 0 34px 0 14px; border: 0; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px currentColor; background: transparent; color: inherit; font: 700 12px/1 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
  .is__buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g); padding-top: 8px; } .is__buy > div { display: grid; gap: 14px; align-content: start; }
  .is__read { padding: 20px; background: var(--ink); color: var(--paper); border-radius: var(--r-ui); } .is__read .colhead { border-top-color: currentColor; } .is__read .pmk { --h: .9em; }
  @media (max-width: 900px) { .is__buy { grid-template-columns: minmax(0, 1fr); } }
  .ip__cs--l .ip__c { width: clamp(140px, 16vw, 220px); display: grid; gap: 8px; } .ip__cs--l { flex-wrap: wrap; }
  .fl__acts { margin: 8px 0 12px; } .fl__note { color: var(--ink-2); }
}

@layer components {
  /* States: one shape for empty, failed, stale, conflict, offline, private */
  .stt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px 20px 20px; border-radius: var(--r-ui); background: color-mix(in srgb, currentColor 6%, transparent); }
  .stt__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); }
  .stt__ic .ic { width: 18px; height: 18px; }
  .stt--failed .stt__ic { background: var(--red); color: var(--white); }
  .stt--stale .stt__ic { background: var(--yellow); color: var(--black); }
  .stt--conflict .stt__ic { background: var(--blue); color: var(--white); }
  .stt--private .stt__ic { background: var(--green); color: var(--black); }
  .stt__x { display: grid; gap: 6px; align-content: start; padding-top: 6px; }
  .stt__t { margin: 0; font: 750 17px/1.25 var(--f-sans); text-wrap: balance; }
  .stt__p { margin: 0; font: 450 15px/1.45 var(--f-sans); color: color-mix(in srgb, currentColor 72%, transparent); text-wrap: pretty; }
  .stt__a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 8px; }
  .stt__a .btn { align-self: center; }
  /* Loading: grey shapes that hold the space */
  .skl { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--g); }
  .skl__c { display: grid; gap: 10px; align-content: start; }
  .skl__i, .skl__l { display: block; border-radius: 2px; background: color-mix(in srgb, currentColor 9%, transparent); animation: skl 1.4s ease-in-out infinite; }
  .skl__i { aspect-ratio: 3/2; } .skl__l { height: 12px; } .skl__l--s { width: 55%; }
  .skl__c:nth-child(2) > * { animation-delay: .15s; } .skl__c:nth-child(3) > * { animation-delay: .3s; }
  @keyframes skl { 50% { opacity: .45; } }
  @media (prefers-reduced-motion: reduce) { .skl__i, .skl__l { animation: none; } }
  /* Busy button: same size, spinner leads, can't be pressed twice */
  .btn[aria-busy="true"] { cursor: progress; }
  .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
  @keyframes spin { to { rotate: 1turn; } }
  @media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }
  /* Field errors */
  .fl input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--red); }
  .fl__err { display: flex; align-items: flex-start; gap: 8px; margin: 0; font: 600 14px/1.35 var(--f-sans); color: var(--red); }
  .fl__err .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
}
@layer templates {
  .sys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--g); margin-top: clamp(28px, 3vw, 44px); }
  .sys__c { display: grid; grid-template-rows: auto 1fr; gap: 14px; min-width: 0; } .sys__c > :last-child { align-self: start; } .sys__c > .stt { align-self: stretch; }
  .sys__r { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .sys .skl { --n: 3 !important; gap: 12px; }
  @media (max-width: 1100px) { .sys { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sys__c:first-child { grid-column: 1 / -1; } }
  @media (max-width: 640px) { .sys { grid-template-columns: minmax(0, 1fr); } }
}

@layer states {
  /* Any button that can't be pressed right now looks it, whatever it sits in */
  .btn:disabled:not([aria-busy]), .btn.is-sold { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--rule); cursor: not-allowed; transform: none; }
  :root[data-theme="dark"] .btn:disabled:not([aria-busy]), :root[data-theme="dark"] .btn.is-sold { color: color-mix(in srgb, currentColor 60%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 30%, transparent); }
}
@layer states { :root[data-theme="dark"] .fl__err { color: var(--coral); } :root[data-theme="dark"] .fl input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--coral); } }
@layer templates { .acg .stt { max-width: 780px; } }
@layer components {
  .ph--type { place-items: end start; } .ph--type span { padding: 14px 14px 12px; font: 400 clamp(24px, 2.2vw, 34px)/.88 var(--f-display); text-transform: uppercase; text-wrap: balance; opacity: .55; }
  .stab i { margin-left: 7px; font-style: normal; opacity: .6; font-variant-numeric: tabular-nums; }
  .alr--s + .ra, .alr--s ~ .dsrc { margin-top: 12px; }
}
@layer templates { .alr--s .alr__q { --dt: clamp(30px, 2.6vw, 42px); --dt-lh: .92; } }
@layer templates {
  /* phone fits: heads whose one long word sets their width, strands in one column, issue covers in a row of four */
  :is(.shw__x, .vnh__x, .lvh__x, .ah__x) { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  @media (max-width: 480px) { .shw__t, .ah__t { --dt: clamp(50px, 16.5vw, 72px); } .vnh__t { --dt: clamp(50px, 17vw, 72px); } }
  @media (max-width: 480px) { .stos { grid-template-columns: minmax(0, 1fr); } .sto { min-height: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } }
  @media (max-width: 900px) { .ip__cs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } .ip__c { width: auto; } }
  .pdp__ths { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .vofs { grid-template-columns: minmax(0, 1fr); }
  @media (max-width: 900px) { .azk--26 { grid-template-columns: repeat(13, minmax(0, 1fr)); } }
}
@layer templates {
  .facts { grid-template-columns: minmax(0, 1fr); } .facts > li > :last-child { overflow-wrap: anywhere; min-width: 0; }
  @media (max-width: 400px) { .btn--l { max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 52px; padding-block: 12px; line-height: 1.2; } }
}
@layer templates { @media (max-width: 640px) { .stabs--s.stabs--n3.stabs--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } }
@layer components {
  /* What happened next: editor-chosen follow-ups on an older story */
  .whn { max-width: 700px; margin: 0 0 1.6em; border-top: 2px solid currentColor; border-bottom: 1px solid var(--rule); }
  .whn__h { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0 4px; } .whn__k { color: var(--blue); } :root[data-theme="dark"] .whn__k { color: var(--green); } .whn__s { color: var(--ink-2); }
  .whn ol { display: grid; }
  .whn__i { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; align-items: baseline; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); }
  .whn li:first-child .whn__i { border-top: 0; }
  .whn__t { font: 650 17px/1.3 var(--f-sans); letter-spacing: -.01em; text-wrap: pretty; }
  @media (max-width: 640px) { .whn__i { grid-template-columns: minmax(0, 1fr) auto; } .whn__i time { grid-column: 1 / -1; } }
}
@layer templates { .sys__one { display: grid; gap: 14px; margin-top: 40px; } }
@layer templates { :root[data-theme="dark"] .dsc__cur { color: var(--green); } }
@layer templates { .auh__av--sq { border-radius: 0; } }
@layer templates {
  .accd summary { overflow: clip; overflow-clip-margin: 2px; }   /* the + turning to × never widens the row */
  @media (max-width: 640px) { .trl__y { font-size: 44px; } }
  .trl__why { font: 450 16px/1.5 var(--f-sans); }   /* the editor's note: serif is for standfirsts only */
  @media (max-width: 480px) { .sto { grid-template-columns: minmax(0, 1fr) auto; } .sto__mk { grid-column: 1; } .sto > .n { grid-column: 1; grid-row: 2; } .sto > .ic { grid-column: 2; grid-row: 1 / span 2; } }
}
@layer templates {
  .emb--spotify .emb__b { grid-template-columns: 96px minmax(0, 1fr) auto; } .emb--spotify .emb__p { grid-column: 3; } .emb--spotify .emb__k { grid-column: 2; }
  .gt__box { margin-top: 0; }   /* the fade ends where the box begins; nothing sits on top of the words */
  @media (max-width: 900px) { .ip__cs--l { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ip__cs--l .ip__c { width: auto; } }
}
@layer templates {
  /* a photo run is one full row whatever its count; on phones two to a row, the first spanning both when the count is odd */
  .ps__g { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  @media (max-width: 640px) { .ps__g { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps__g > :first-child:nth-last-child(odd) { grid-column: 1 / -1; } }
}
@layer templates { @media (max-width: 480px) { .emb--spotify .emb__b { grid-template-columns: 72px minmax(0, 1fr) auto; } .emb--spotify .emb__k { font-size: 10px; } } }
@layer templates { @media (max-width: 480px) { .emb--spotify .emb__b { grid-template-columns: 72px minmax(0, 1fr); } .emb--spotify .emb__k { display: none; } .emb--spotify .emb__p { grid-column: 2; } } }
/* c-reading-session-pills-a (30 Oct): the News / Features / Reviews / Live switcher in the pack's chip style: 32px
   outlined chips in small bold capitals, the current one filled, with a hairline under the row. */
nav.read-session-pills { gap: 6px !important; padding-block: 16px !important; border-bottom: 1px solid var(--rule); }
nav.read-session-pills > .n { margin-right: 8px; color: var(--ink-2); }
nav.read-session-pills > a.chip { min-height: 32px !important; height: 32px; padding: 0 13px !important; font: 700 11px/1 var(--f-sans) !important; letter-spacing: .05em; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px currentColor; }
@media (max-width: 600px) { nav.read-session-pills { flex-wrap: nowrap !important; overflow-x: auto; } }
/* c-hero-slot-b (30 Oct): the section hub hero loses its dark gradient over the photograph. */
.native-section-hero__overlay { display: none !important; }
/* article-feature-el05-n3 (30 Oct): text size as one black pill track, three sizes in white mono, the current on a
   white thumb, the same shape as the header's Dork+ and Shop buttons. */
.reading-text-size:not(.reading-text-size--line) { display: inline-flex !important; align-items: center; gap: 2px !important; padding: 3px; border-radius: 999px; background: var(--ink); flex-wrap: nowrap !important; }
.reading-text-size:not(.reading-text-size--line) > .n { font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #8f8f8b; padding: 0 10px 0 12px; }
.reading-text-size:not(.reading-text-size--line) button { height: 34px !important; min-height: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; color: #fff !important; font: 500 10.5px/1 var(--f-mono) !important; letter-spacing: .08em !important; text-transform: uppercase; cursor: pointer; }
.reading-text-size:not(.reading-text-size--line) button[aria-pressed="true"] { background: #fff !important; color: var(--ink) !important; }
@media (max-width: 600px) { .reading-text-size:not(.reading-text-size--line) > .n { display: none; } .reading-text-size:not(.reading-text-size--line) button { padding: 0 12px !important; } }
/* c-chips-a (30 Oct): the pack's chips everywhere; rows wrap instead of running off the side of the page. */
main .chips:not(.drw__p--search .chips) { flex-wrap: wrap !important; overflow-x: visible !important; mask: none !important; margin-inline: 0 !important; padding-inline: 0 !important; }
main .chips > .chip { flex: none; }
/* c-search-a: the pack's search field on every page: words typed large in Geist on a 2px ink rule, a small ink Search pill. */
main :is(.dsearch, form.field) { box-shadow: none !important; border-radius: 0 !important; border-bottom: 2px solid currentColor; padding: 4px 0 10px !important; height: auto !important; gap: 14px; }
main :is(.dsearch, form.field) input { font: 600 clamp(20px, 2vw, 30px)/1.2 var(--f-sans) !important; letter-spacing: -.02em; padding: 0; }
main :is(.dsearch, form.field) input::placeholder { color: inherit; opacity: .5; }
main :is(.dsearch, form.field) .btn { flex: none; background: var(--ink); color: var(--paper); box-shadow: none; }
/* c-pager-a: the pack's pager on every list: a 1px rule, Load more as an outlined pill, page numbers with the current one in a filled circle. */
main :is(.pg, .nl-pagination, .native-artists__pagination, .gig-pagination, .credit-pagination, .at-pagination, .pagination) { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; border-top: 1px solid currentColor; padding-top: 18px; margin-top: 32px; }
main :is(.pg, .nl-pagination, .native-artists__pagination, .gig-pagination, .credit-pagination, .at-pagination, .pagination) [aria-current="page"] { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 999px; background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); font: 700 13px/1 var(--f-sans); }
main :is(.pg, .nl-pagination, .native-artists__pagination, .gig-pagination, .credit-pagination, .at-pagination, .pagination) .n { font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
/* c-about-n1 (30 Oct): About set like a magazine profile: the first paragraph whole as a large Newsreader standfirst
   across the full width, the rest in two balanced newspaper columns of Geist with a 1px rule (whole paragraphs, never
   cut at a full stop). */
main :is(.nvp-prose, .nap-bio, .track-copy, .nsp-prose, .studio-about):has(> p) { columns: 2; column-gap: calc(var(--g, 32px) * 1.4); column-rule: 1px solid color-mix(in srgb, currentColor 20%, transparent); margin-top: 24px; max-width: none; }
main :is(.nvp-prose, .nap-bio, .track-copy, .nsp-prose, .studio-about) > p { margin: 0 0 1em; font: 400 17px/1.6 var(--f-sans); }
main :is(.nvp-prose, .nap-bio, .track-copy, .nsp-prose, .studio-about) > p:first-child { column-span: all; font: 400 clamp(21px, 1.7vw, 26px)/1.35 var(--f-serif); max-width: 52ch; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid currentColor; }
main :is(.nvp-prose, .nap-bio, .track-copy, .nsp-prose, .studio-about) > p:only-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
@media (max-width: 800px) { main :is(.nvp-prose, .nap-bio, .track-copy, .nsp-prose, .studio-about) { columns: 1; } main :is(.nvp-prose, .nap-bio, .track-copy, .nsp-prose, .studio-about) > p:first-child { font-size: 22px; } }
main .nap-bio > .nap-attribution, main .nap-bio > p:not(:first-child):is(.nap-attribution, .nap-verified) { column-span: all; font: 400 13px/1.4 var(--f-sans) !important; opacity: .7; }
/* c-dircards-a (30 Oct): the pack's directory tile: picture whole at its own shape, the name in bold Geist, the date or
   city in grey beneath, four to a row; venues, which have no pictures, as a ruled list. */
main .nfp-cards { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 30px var(--g, 28px) !important; }
main .nfp-cards > article h3 { font: 700 16.5px/1.24 var(--f-sans) !important; letter-spacing: -.018em; text-transform: none !important; margin: 10px 0 0; }
main .nfp-cards > article p { font: 400 14px/1.35 var(--f-sans) !important; color: var(--ink-2); text-transform: none !important; letter-spacing: 0 !important; margin: 4px 0 0; }
main .nvd-cards { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 var(--g, 28px) !important; border-top: 1px solid currentColor; }
main .nvd-cards > article { padding: 12px 0; border-bottom: 1px solid var(--rule); box-shadow: none !important; background: none !important; }
main .nvd-cards > article .ph, main .nvd-cards .nvd-no-map { display: none !important; }
main .nvd-cards > article h3 { font: 700 16.5px/1.24 var(--f-sans) !important; text-transform: none !important; margin: 0; }
@media (max-width: 800px) { main :is(.nfp-cards, .nvd-cards) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 14px !important; } main .nvd-cards { gap: 0 14px !important; } }
/* c-dirmast-n1 (30 Oct): directory mastheads as a print index page: the name very large across seven columns, the
   trail, intro, counts and search in a ruled five-column panel to its right, and the A–Z as a dictionary thumb index,
   every letter a cell between 1px rules. Directory mastheads only (not artist, album or section fronts). */
:is(section[aria-labelledby="festival-directory-title"], section[aria-labelledby="venue-directory-title"], section[aria-labelledby="album-directory-title"], section[aria-labelledby="track-directory-title"], section[aria-labelledby="lyrics-directory-title"], section[aria-labelledby="label-directory-title"], section[aria-labelledby="studio-directory-title"], section[aria-labelledby="etc-dir-title"], section[aria-labelledby="lyrics-artists-title"], section[aria-labelledby="playlists-title"], section[aria-labelledby="setlist-directory"], section[aria-labelledby="credits-browse"], section[aria-labelledby^="dx-"], section[aria-labelledby="directory"]) > .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--g, 32px); align-items: end; }
:is(section[aria-labelledby="festival-directory-title"], section[aria-labelledby="venue-directory-title"], section[aria-labelledby="album-directory-title"], section[aria-labelledby="track-directory-title"], section[aria-labelledby="lyrics-directory-title"], section[aria-labelledby="label-directory-title"], section[aria-labelledby="studio-directory-title"], section[aria-labelledby="etc-dir-title"], section[aria-labelledby="lyrics-artists-title"], section[aria-labelledby="playlists-title"], section[aria-labelledby="setlist-directory"], section[aria-labelledby="credits-browse"], section[aria-labelledby^="dx-"], section[aria-labelledby="directory"]) > .wrap > * { grid-column: 2; margin: 0 0 14px; padding-left: clamp(18px, 1.8vw, 28px); border-left: 1px solid var(--rule); min-width: 0; }
:is(section[aria-labelledby="festival-directory-title"], section[aria-labelledby="venue-directory-title"], section[aria-labelledby="album-directory-title"], section[aria-labelledby="track-directory-title"], section[aria-labelledby="lyrics-directory-title"], section[aria-labelledby="label-directory-title"], section[aria-labelledby="studio-directory-title"], section[aria-labelledby="etc-dir-title"], section[aria-labelledby="lyrics-artists-title"], section[aria-labelledby="playlists-title"], section[aria-labelledby="setlist-directory"], section[aria-labelledby="credits-browse"], section[aria-labelledby^="dx-"], section[aria-labelledby="directory"]) > .wrap > header.sh { grid-column: 1; grid-row: 1 / span 6; align-self: end; padding: 0; border: 0; margin: 0; }
/* Audit #2 (31 Oct): a directory whose results live in the same wrap as its header (Photographers, via the utility
   template) keeps the title-left / search-right header row, then runs the results and pagination full width. */
section[aria-labelledby="directory"] > .wrap:has(> .utility-grid) > header.sh { grid-row: 1; }
section[aria-labelledby="directory"] > .wrap:has(> .utility-grid) > :is(.utility-grid, nav.pg) { grid-column: 1 / -1; padding-left: 0; border-left: 0; margin: 36px 0 0; }
@media (max-width: 640px) { section[aria-labelledby="directory"] .sh__t { font-size: min(13.5vw, 64px) !important; overflow-wrap: normal; } }
:is(section[aria-labelledby="festival-directory-title"], section[aria-labelledby="venue-directory-title"], section[aria-labelledby="album-directory-title"], section[aria-labelledby="track-directory-title"], section[aria-labelledby="lyrics-directory-title"], section[aria-labelledby="label-directory-title"], section[aria-labelledby="studio-directory-title"], section[aria-labelledby="etc-dir-title"], section[aria-labelledby="lyrics-artists-title"], section[aria-labelledby="playlists-title"], section[aria-labelledby="setlist-directory"], section[aria-labelledby="credits-browse"], section[aria-labelledby^="dx-"], section[aria-labelledby="directory"]) > .wrap > header.sh .sh__t { font-size: clamp(72px, 8.6vw, 156px); }
:is(section[aria-labelledby="festival-directory-title"], section[aria-labelledby="venue-directory-title"], section[aria-labelledby="album-directory-title"], section[aria-labelledby="track-directory-title"], section[aria-labelledby="lyrics-directory-title"], section[aria-labelledby="label-directory-title"], section[aria-labelledby="studio-directory-title"], section[aria-labelledby="etc-dir-title"], section[aria-labelledby="lyrics-artists-title"], section[aria-labelledby="playlists-title"], section[aria-labelledby="setlist-directory"], section[aria-labelledby="credits-browse"], section[aria-labelledby^="dx-"], section[aria-labelledby="directory"]) > .wrap > :is(.nfp-letters, nav[aria-label*="letter" i], .azl, .azk) { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 0 !important; margin-top: clamp(22px, 2vw, 32px); padding: 0; border: 0; border-block: 1px solid currentColor; }
:is(section[aria-labelledby="festival-directory-title"], section[aria-labelledby="venue-directory-title"], section[aria-labelledby="album-directory-title"], section[aria-labelledby="track-directory-title"], section[aria-labelledby="lyrics-directory-title"], section[aria-labelledby="label-directory-title"], section[aria-labelledby="studio-directory-title"], section[aria-labelledby="etc-dir-title"], section[aria-labelledby="lyrics-artists-title"], section[aria-labelledby="playlists-title"], section[aria-labelledby="setlist-directory"], section[aria-labelledby="credits-browse"], section[aria-labelledby^="dx-"], section[aria-labelledby="directory"]) > .wrap > :is(.nfp-letters, nav[aria-label*="letter" i], .azl, .azk) > * { display: grid !important; place-items: center; height: auto !important; min-width: 0 !important; padding: 12px 0 !important; border: 0 !important; border-left: 1px solid var(--rule) !important; border-radius: 0 !important; box-shadow: none !important; font: 400 clamp(22px, 1.9vw, 30px)/1 var(--f-display) !important; text-transform: uppercase; }
:is(section[aria-labelledby="festival-directory-title"], section[aria-labelledby="venue-directory-title"], section[aria-labelledby="album-directory-title"], section[aria-labelledby="track-directory-title"], section[aria-labelledby="lyrics-directory-title"], section[aria-labelledby="label-directory-title"], section[aria-labelledby="studio-directory-title"], section[aria-labelledby="etc-dir-title"], section[aria-labelledby="lyrics-artists-title"], section[aria-labelledby="playlists-title"], section[aria-labelledby="setlist-directory"], section[aria-labelledby="credits-browse"], section[aria-labelledby^="dx-"], section[aria-labelledby="directory"]) > .wrap > :is(.nfp-letters, nav[aria-label*="letter" i], .azl, .azk) > :first-child { border-left: 0 !important; }
:is(section[aria-labelledby="festival-directory-title"], section[aria-labelledby="venue-directory-title"], section[aria-labelledby="album-directory-title"], section[aria-labelledby="track-directory-title"], section[aria-labelledby="lyrics-directory-title"], section[aria-labelledby="label-directory-title"], section[aria-labelledby="studio-directory-title"], section[aria-labelledby="etc-dir-title"], section[aria-labelledby="lyrics-artists-title"], section[aria-labelledby="playlists-title"], section[aria-labelledby="setlist-directory"], section[aria-labelledby="credits-browse"], section[aria-labelledby^="dx-"], section[aria-labelledby="directory"]) > .wrap > :is(.nfp-letters, nav[aria-label*="letter" i], .azl, .azk) > span { opacity: .3; }
@media (max-width: 800px) {
  :is(section[aria-labelledby="festival-directory-title"], section[aria-labelledby="venue-directory-title"], section[aria-labelledby="album-directory-title"], section[aria-labelledby="track-directory-title"], section[aria-labelledby="lyrics-directory-title"], section[aria-labelledby="label-directory-title"], section[aria-labelledby="studio-directory-title"], section[aria-labelledby="etc-dir-title"], section[aria-labelledby="lyrics-artists-title"], section[aria-labelledby="playlists-title"], section[aria-labelledby="setlist-directory"], section[aria-labelledby="credits-browse"], section[aria-labelledby^="dx-"], section[aria-labelledby="directory"]) > .wrap { grid-template-columns: minmax(0, 1fr); }
  :is(section[aria-labelledby="festival-directory-title"], section[aria-labelledby="venue-directory-title"], section[aria-labelledby="album-directory-title"], section[aria-labelledby="track-directory-title"], section[aria-labelledby="lyrics-directory-title"], section[aria-labelledby="label-directory-title"], section[aria-labelledby="studio-directory-title"], section[aria-labelledby="etc-dir-title"], section[aria-labelledby="lyrics-artists-title"], section[aria-labelledby="playlists-title"], section[aria-labelledby="setlist-directory"], section[aria-labelledby="credits-browse"], section[aria-labelledby^="dx-"], section[aria-labelledby="directory"]) > .wrap > * { grid-column: 1; grid-row: auto !important; padding-left: 0; border-left: 0; }
  :is(section[aria-labelledby="festival-directory-title"], section[aria-labelledby="venue-directory-title"], section[aria-labelledby="album-directory-title"], section[aria-labelledby="track-directory-title"], section[aria-labelledby="lyrics-directory-title"], section[aria-labelledby="label-directory-title"], section[aria-labelledby="studio-directory-title"], section[aria-labelledby="etc-dir-title"], section[aria-labelledby="lyrics-artists-title"], section[aria-labelledby="playlists-title"], section[aria-labelledby="setlist-directory"], section[aria-labelledby="credits-browse"], section[aria-labelledby^="dx-"], section[aria-labelledby="directory"]) > .wrap > :is(.nfp-letters, nav[aria-label*="letter" i], .azl, .azk) { grid-template-columns: repeat(9, 1fr); }
  :is(section[aria-labelledby="festival-directory-title"], section[aria-labelledby="venue-directory-title"], section[aria-labelledby="album-directory-title"], section[aria-labelledby="track-directory-title"], section[aria-labelledby="lyrics-directory-title"], section[aria-labelledby="label-directory-title"], section[aria-labelledby="studio-directory-title"], section[aria-labelledby="etc-dir-title"], section[aria-labelledby="lyrics-artists-title"], section[aria-labelledby="playlists-title"], section[aria-labelledby="setlist-directory"], section[aria-labelledby="credits-browse"], section[aria-labelledby^="dx-"], section[aria-labelledby="directory"]) > .wrap > :is(.nfp-letters, nav[aria-label*="letter" i], .azl, .azk) > * { border-bottom: 1px solid var(--rule) !important; font-size: 20px !important; }
}


/* drop-p2 (30 Oct): The Drop as a whole blue field on a twelve-column grid, records three to a row, songs in two ruled
   columns that end level (an odd last song runs the full width), the small units with a Brunson head on the left. */
main > section.wrap:has(> section.drop){max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
main section.drop{--W:#fff;background:var(--blue,#1f3bff)!important;color:var(--W)!important;border:0!important;border-radius:0!important;box-shadow:none!important;max-width:none!important;width:100%!important;margin:0!important;padding:clamp(36px,3.4vw,56px) var(--m,clamp(16px,2.5vw,36px)) clamp(48px,4.4vw,80px)!important;text-align:left!important;display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g,28px);row-gap:0;align-items:start}
main section.drop [hidden], main section.drop > aside > :empty{display:none!important}
main section.drop > *{justify-self:stretch!important;width:auto!important;grid-column:1/-1;margin-left:0!important;margin-right:0!important;text-align:left!important;max-width:none!important}
main section.drop a{color:inherit}
/* masthead */
main section.drop > header{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g,28px);align-items:end;padding:0!important;border:0!important}
main section.drop > header > p.n{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:0 0 16px!important;font:500 10.5px/1.2 var(--f-mono)!important;letter-spacing:.06em;text-transform:uppercase;border:0!important;padding:0!important}
main section.drop > header > p.n::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
main section.drop > header > h1{grid-column:1/9;font:400 clamp(96px,13vw,200px)/.82 var(--f-display)!important;text-transform:uppercase;margin:0!important;padding-top:18px;border-top:2px solid currentColor;color:var(--W)!important}
main section.drop > header > h1 span{color:var(--green,#aefb01)!important}
main section.drop > header > p:not(.n){grid-column:9/-1;font:700 clamp(18px,1.5vw,22px)/1.25 var(--f-sans)!important;margin:0 0 14px!important;align-self:end}
main section.drop > header > nav{grid-column:9/-1;display:flex!important;flex-wrap:wrap;gap:8px;justify-content:flex-start!important;margin:0 0 4px!important}
main section.drop > header > nav a{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px currentColor;font:700 11px/1 var(--f-ui,var(--f-sans));letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
main section.drop > header > nav a[aria-current]{background:var(--W)!important;color:#111!important}
main section.drop > p.n{grid-column:1/9;margin:28px 0 0!important;padding-top:12px!important;border-top:1px solid currentColor;font:500 10.5px/1.2 var(--f-mono)!important;letter-spacing:.06em;text-transform:uppercase;align-self:center}
main section.drop > button:first-of-type{grid-column:9/-1;justify-self:end!important;width:auto!important;margin:28px 0 0!important}
main section.drop > p.connection{display:none!important}
/* unit openers: Brunson head under a 1px rule, kicker style */
main section.drop > h2, main section.drop aside > h2{display:block!important;width:auto!important;font:400 clamp(44px,4.2vw,64px)/.88 var(--f-display)!important;text-transform:uppercase;margin:0!important;padding-top:14px;border-top:1px solid currentColor;color:var(--W)!important;text-align:left!important}
main section.drop > h2{margin-top:clamp(56px,5vw,88px)!important}
/* records: three to a row, big whole sleeves, folio label over a rule */
main section.drop ol.records{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:40px var(--g,28px)!important;margin:28px 0 0!important;padding:0!important;list-style:none;align-items:start!important}
main section.drop ol.records > li{display:flex!important;flex-direction:column;align-items:stretch!important;text-align:left!important;gap:0!important;padding:0!important;margin:0!important}
main section.drop ol.records > li > img{order:0;width:100%!important;height:auto!important;aspect-ratio:1/1;object-fit:contain;object-position:left bottom;background:transparent;margin:0 0 12px!important;border-radius:0!important}
main section.drop ol.records > li > p.n{order:1;margin:0!important;padding:8px 0 0;border-top:1px solid currentColor;font:500 10.5px/1.2 var(--f-mono)!important;letter-spacing:.06em;text-transform:uppercase}
main section.drop ol.records > li > h3{order:2;font:400 clamp(30px,2.6vw,40px)/.9 var(--f-display)!important;text-transform:uppercase;margin:10px 0 6px!important;text-align:left!important;color:var(--W)!important}
main section.drop ol.records > li > p:not(.n){order:3;font:400 17px/1.3 var(--f-sans)!important;margin:0!important;text-align:left!important}
/* songs: two newspaper columns of ruled rows */
main section.drop ol.songs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--g,28px);width:100%!important;margin:28px 0 0!important;padding:0!important;list-style:none;border-top:0!important}
main section.drop ol.songs > li{break-inside:avoid;display:flex!important;justify-content:space-between;align-items:center;gap:16px;padding:12px 0!important;margin:0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.35)!important;text-align:left!important;min-height:66px;box-sizing:border-box}
main section.drop ol.songs > li > div{flex:1 1 auto;min-width:0;text-align:left!important}
main section.drop ol.songs > li h3{font:700 17px/1.2 var(--f-sans)!important;margin:0!important;text-align:left!important;color:var(--W)!important}
main section.drop ol.songs > li p{font:400 15px/1.3 var(--f-sans)!important;margin:2px 0 0!important;text-align:left!important;opacity:.85}
main section.drop ol.songs > li > button{flex:none;height:32px!important;padding:0 14px!important;border-radius:999px!important;border:0!important;box-shadow:inset 0 0 0 1.5px currentColor!important;background:transparent!important;color:inherit!important;font:500 11px/1 var(--f-mono)!important;letter-spacing:.05em;text-transform:uppercase}
/* the three small units: head in the left three columns, content in the right nine */
main section.drop > aside:not([hidden]){display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g,28px);margin:clamp(56px,5vw,88px) 0 0!important;padding:0!important;border:0!important;text-align:left!important}
main section.drop > aside > h2{grid-column:1/5;grid-row:1/span 9;align-self:start}
main section.drop > aside > *:not(h2){grid-column:6/-1;margin:0!important;text-align:left!important;justify-self:start}
main section.drop > aside > p{padding:12px 0!important;border-top:1px solid rgba(255,255,255,.35);font:400 17px/1.4 var(--f-sans)!important;width:100%}
main section.drop > aside > p:first-of-type{border-top:1px solid currentColor}
main section.drop > aside .picks{display:flex!important;flex-wrap:wrap;gap:8px;justify-content:flex-start!important;margin-top:12px!important}
main section.drop > aside .picks > *{margin:0!important}
main section.drop > aside > button{margin-top:14px!important}
main section.drop > nav{grid-column:1/-1;display:flex!important;justify-content:space-between!important;margin:clamp(56px,5vw,88px) 0 0!important;padding-top:12px!important;border-top:1px solid currentColor;font:500 11px/1 var(--f-mono)!important;letter-spacing:.06em;text-transform:uppercase}
main section.drop > nav a{text-decoration:none}
main section.drop > nav a:first-child::before{content:"← "} main section.drop > nav a:last-child::after{content:" →"}
@media (max-width:800px){
 main section.drop > header > h1, main section.drop > header > p:not(.n), main section.drop > header > nav, main section.drop > p.n, main section.drop > button:first-of-type{grid-column:1/-1}
 main section.drop > header > h1{font-size:96px!important;margin-bottom:18px!important}
 main section.drop > button:first-of-type{justify-self:start!important;margin-top:16px!important}
 main section.drop ol.songs > li{flex-wrap:nowrap!important;flex-direction:row!important}
 main section.drop ol.songs > li > button{padding:0 10px!important;font-size:10px!important}
 main section.drop ol.records{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 14px!important}
 main section.drop ol.records > li > h3{font-size:26px!important}
 main section.drop ol.songs{grid-template-columns:minmax(0,1fr)} main section.drop ol.songs > li:last-child:nth-child(odd){grid-column:auto}
 main section.drop > aside > h2, main section.drop > aside > *:not(h2){grid-column:1/-1;grid-row:auto}
 main section.drop > aside > h2{margin-bottom:14px!important}
}

main section.drop ol.songs > li:last-child:nth-child(odd){grid-column:1/-1}
main section.drop > header > h1 .bl{color:var(--green,#aefb01)}
main section.drop :is(section.guess, aside.fantasy){display:none!important}

/* information-p2 (30 Oct): About Dork as a print masthead and contacts grid in the homepage language; all of the page's text kept. */
main .t4ab{background:var(--paper,#fff);color:var(--ink);padding:clamp(40px,4vw,72px) 0 clamp(56px,5vw,96px)}
main .t4ab .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g,28px);row-gap:0}
main .t4ab .k{grid-column:1/-1;display:flex;align-items:center;gap:12px;font:500 10.5px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px}
main .t4ab .k::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
main .t4ab h1{grid-column:1/-1;font:400 clamp(72px,8.9vw,128px)/.84 var(--f-display);text-transform:uppercase;margin:0;padding-top:18px;border-top:2px solid var(--ink)}
main .t4ab h1 .stop{color:var(--blue)}
main .t4ab .fol{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding-top:10px;margin-top:clamp(48px,4.4vw,72px);font:500 10.5px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
main .t4ab .p{grid-column:span 3;padding-top:22px}
main .t4ab .p + .p{border-left:1px solid var(--rule,#ddd);padding-left:var(--g,28px);margin-left:calc(var(--g,28px) * -1 + 0px)}
main .t4ab .p .r{font:500 10.5px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px;opacity:.75}
main .t4ab .p .nm{font:400 clamp(30px,2.6vw,40px)/.9 var(--f-display);text-transform:uppercase;margin:0 0 14px}
main .t4ab .p.s .nm{font-size:clamp(24px,2vw,30px)}
main .t4ab .p a{font:500 12px/1.3 var(--f-mono);letter-spacing:.02em;color:inherit;text-decoration:underline;text-underline-offset:3px}
main .t4ab .lede{grid-column:1/-1;column-count:2;column-gap:var(--g,28px);max-width:none!important;font:400 clamp(20px,1.7vw,26px)/1.4 var(--f-serif);margin:22px 0 0;max-width:62ch}
main .t4ab .side{grid-column:1/4;padding-top:22px;font:500 10.5px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
main .t4ab .blk{grid-column:span 4;padding-top:22px}
main .t4ab .blk + .blk{border-left:1px solid var(--rule,#ddd);padding-left:var(--g,28px);margin-left:calc(var(--g,28px) * -1)}
main .t4ab .blk h2{font:400 clamp(26px,2.2vw,34px)/.9 var(--f-display);text-transform:uppercase;margin:0 0 14px}
main .t4ab .blk p{font:400 16px/1.55 var(--f-sans);margin:0 0 .8em}
main .t4ab .blk a, main .t4ab .lede a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:800px){ main .t4ab .lede{column-count:1} main .t4ab .wrap{grid-template-columns:repeat(2,minmax(0,1fr))} main .t4ab .wrap{column-gap:16px} main .t4ab .p{grid-column:span 1;border-left:0!important;padding-left:0!important;margin-left:0!important} main .t4ab .p a{font-size:11px;overflow-wrap:anywhere} main .t4ab .lede, main .t4ab .side, main .t4ab .blk{grid-column:1/-1} main .t4ab .blk + .blk{border-left:0;padding-left:0;margin-left:0;border-top:1px solid var(--rule,#ddd);margin-top:22px} main .t4ab h1{font-size:64px} }
/* c-faq-b: the festival Good to know rows (shared with ArtistFaq) */
main .faqb { padding: 14px 0; border-bottom: 1px solid var(--rule); } main .faqb:first-of-type { border-top: 1px solid var(--ink); }
main .faqb h3 { font: 700 18px/1.3 var(--f-sans) !important; letter-spacing: -.015em; text-transform: none !important; margin: 0 0 6px; }
main .faqb p { font: 400 16px/1.5 var(--f-sans); margin: 0; }
/* c-crumb-a (30 Oct): the pack's trail: Silka Mono capitals at 10.5px, levels separated by a '/' at 45% strength, the
   page you are on last and unlinked, above the page title. */
main :is(nav.crumbs, .nfp-crumbs, nav[aria-label="Breadcrumb"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 10.5px/1.2 var(--f-mono) !important; letter-spacing: .06em; text-transform: uppercase; }
main :is(nav.crumbs, .nfp-crumbs, nav[aria-label="Breadcrumb"]) > [aria-hidden="true"] { opacity: .45; }
main :is(nav.crumbs, .nfp-crumbs, nav[aria-label="Breadcrumb"]) a { text-decoration: none; }
@media (hover: hover) { main :is(nav.crumbs, .nfp-crumbs, nav[aria-label="Breadcrumb"]) a:hover { text-decoration: underline; text-underline-offset: .2em; } }
/* shop-mast-a (30 Oct): "THE DORK SHOP." in lime Brunson on violet with the DORK logo, a 2px lime rule above, the
   strapline in mono and Your bag beside it. */
section.shop[aria-labelledby="catalogue"] > .wrap > header.sh { border-top: 2px solid var(--lime, #aefb01); padding-top: 22px; }
section.shop[aria-labelledby="catalogue"] .sh__t { color: var(--lime, #aefb01) !important; font-size: clamp(64px, 8.4vw, 120px) !important; }
section.shop[aria-labelledby="catalogue"] .sh__t .dlogo { --h: .74em; }
section.shop[aria-labelledby="catalogue"] > .wrap > p.dek { font: 500 10.5px/1.3 var(--f-mono) !important; letter-spacing: .06em; text-transform: uppercase; text-align: right; margin: -8px 0 24px; }
section.shop[aria-labelledby="catalogue"] .sh__a .more { font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
/* shop-shelves-b and shop-grid-a: pictures whole at one height on the light ground, shelves on one baseline, products six to a row on the collection page */
section.shop :is(.shelf__g, .shop-products) img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: contain; background: #f3f1ee; display: block; border-radius: 0; box-shadow: none; }
section.shop .shelves--paired { align-items: end; }
section.shop .shop-products { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 32px 20px !important; }
section.shop .shop-products + nav.shop-pages, section.shop p.n:has(+ .shop-products) { border-top: 1px solid color-mix(in srgb, currentColor 50%, transparent); padding-top: 10px; }
@media (max-width: 640px) { section.shop .shop-products { grid-template-columns: 1fr 1fr !important; } section.shop[aria-labelledby="catalogue"] > .wrap > p.dek { text-align: left; margin-top: 0; } }
/* c-title-b (30 Oct): section heads at one size with the kicker over a 28px rule; Hype set as its logo. */
.sh__t .lg--hype { --lgcap: .74em; }
/* c-video-b: video thumbnails lose YouTube's letterbox bars (the 4:3 frames hold a 16:9 picture) */
main :is(.nap-video, .mvp-card .ph, .t1v-ph) img[src*="hqdefault"] { object-fit: cover; transform: scale(1.34); }

/* Shared builds of three picked components, for pages beyond the artist page (30 Oct):
   c-coverage-b (.t1c-*), c-related-b (.t1e-g) and c-shows-n1 (.shn). */
.t1c-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px var(--g,28px)}
.t1c-c{display:grid;gap:10px;align-content:start;color:inherit;text-decoration:none}
.t1c-ph{aspect-ratio:3/2;overflow:hidden}
.t1c-ph img{display:block;width:100%!important;height:100%!important;object-fit:cover;object-position:50% 35%}
.t1c-n{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.t1c-h{font:400 clamp(22px,1.8vw,28px)/.95 var(--f-display);text-transform:uppercase}
.t1c-c:hover .t1c-h{text-decoration:underline}
.t1c-x{font:400 15px/1.45 var(--f-sans)}
.t1c-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--g,28px);margin-top:36px;border-top:1px solid currentColor}
.t1c-l>*{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none}
.t1c-l .t1c-h{font:700 16px/1.3 var(--f-sans);text-transform:none}
.t1c-l .t1c-n{white-space:nowrap}
.t1e-g{display:grid;grid-template-columns:repeat(var(--t1e-n,6),minmax(0,1fr));gap:28px var(--g-s,18px);list-style:none;margin:0;padding:0}
.t1e-g>*{min-width:0;color:inherit;text-decoration:none}
.t1e-g .ph{aspect-ratio:1/1;border-radius:0;overflow:hidden}
.t1e-g .ph img{width:100%!important;height:100%!important;object-fit:cover;border-radius:0}
.t1e-g h3{font:400 22px/.95 var(--f-display);text-transform:uppercase;margin:10px 0 0;border-top:1px solid var(--ink);padding-top:8px}
.t1e-g .n{display:block;margin-top:6px}
.t1e-g .t1e-ty{aspect-ratio:1;background:var(--black,#0b0b0b);color:#fff;display:flex;align-items:flex-end;padding:10%;box-sizing:border-box;font:400 clamp(22px,1.8vw,30px)/.9 var(--f-display);text-transform:uppercase;overflow-wrap:anywhere}
.shn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(var(--g,32px)*1.4);list-style:none;margin:0;padding:0}
.shn>li{margin:0;border:0;min-width:0}
.shn__a{display:grid;grid-template-columns:136px minmax(0,1fr) auto;gap:0 16px;align-items:end;padding:16px 0 14px;border-bottom:1px solid currentColor;color:inherit;text-decoration:none}
.shn__d{grid-row:1/span 2;display:flex;align-items:flex-end;gap:8px}
.shn__d b{font:400 64px/.78 var(--f-display)}
.shn__d span{font:500 10.5px/1.35 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding-bottom:2px}
.shn__t{grid-column:2;font:700 clamp(19px,1.45vw,21px)/1.14 var(--f-sans);letter-spacing:-.028em}
.shn__p{grid-column:2;display:block;font:500 10.5px/1.35 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border-top:1px solid var(--rule);margin-top:8px;padding-top:6px}
.shn__c{grid-column:3;grid-row:1/span 2;align-self:center;display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 12px/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.shn__c--off{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.shn__x{font:500 10.5px/1.35 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;margin:8px 0 0}
.shn__x a{color:inherit}
@media(max-width:800px){.t1c-g,.t1c-l{grid-template-columns:minmax(0,1fr)}.t1e-g{grid-template-columns:repeat(2,minmax(0,1fr))}.shn{grid-template-columns:minmax(0,1fr)}.shn__a{grid-template-columns:112px minmax(0,1fr)}.shn__d b{font-size:52px}.shn__c{grid-column:2;grid-row:auto;justify-self:start;margin-top:10px}}
/* c-title-b: the blue full stop after the Hype logo (on the lime band the accent stop was invisible) */
section[data-pair="green"] .sh__t .stop{color:var(--blue)}
/* c-hero-r1 (30 Oct): the entity page hero (EntityHero.astro). The field in the page's pair; text left; the picture fills
   the right-hand column and is always shown whole (contain, never cropped: 3:2 band photographs keep every member). The
   title is Brunson capitals on a tape that hugs each line (box-decoration-break), crossing into the picture's column. */
.t1h{background:var(--pg);color:var(--pt);--line:color-mix(in srgb,var(--pt) 24%,transparent);position:relative;display:flow-root;padding:0;overflow:hidden}
.t1h a:not(.chip):not(.btn){color:inherit}
.t1h-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);min-height:min(720px,46vw)}
.t1h--noart .t1h-g{grid-template-columns:minmax(0,1fr);min-height:0}
.t1h-art{grid-column:2;grid-row:1;position:relative;margin:0;min-width:0}
.t1h-art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.t1h-x{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:clamp(32px,3.4vw,56px) 0 clamp(32px,3.4vw,56px) var(--m);position:relative;z-index:1;min-width:0}
.t1h--noart .t1h-x{padding-right:var(--m)}
.t1h-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.t1h-crumbs>*:not([aria-hidden="true"])+*:not([aria-hidden="true"])::before{content:"/";opacity:.45;margin-right:12px}.t1h-crumbs>[aria-hidden="true"]{opacity:.45}
.t1h-crumbs a{text-decoration:none}.t1h-crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.t1h-crumbs .t1h-cur{opacity:.72}.t1h-crumbs .mk{--cap:11px}
.t1h-t{font:400 clamp(76px,8.4vw,150px)/1.26 var(--f-display);text-transform:uppercase;word-spacing:-.04em;text-wrap:wrap;width:calc(100% + 30vw);max-width:calc(100% + 30vw);color:var(--black);margin:0;overflow-wrap:anywhere}
.t1h--noart .t1h-t{width:auto;max-width:100%}
.t1h-t.t1h-t--l{font-size:clamp(56px,6vw,108px)}.t1h-t.t1h-t--xl{font-size:clamp(44px,4.4vw,80px)}
.t1h-t>.t1h-tp{background:var(--green);color:var(--black);padding:.03em .16em .02em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.t1h-t .bl{line-height:0}
.t1h-rest{display:grid;gap:22px;justify-items:start;padding-right:clamp(24px,3vw,48px);min-width:0}
.t1h-by{display:block;font:700 var(--t-l,28px)/1.1 var(--f-sans);letter-spacing:-.02em;color:var(--pa)!important;margin:0;text-decoration:none}
.t1h-score{display:inline-flex;gap:.12em;font-size:34px;color:var(--pa);line-height:1;margin:2px 0}
.t1h-dek{font:400 clamp(19px,1.7vw,25px)/1.38 var(--f-serif);max-width:36ch;margin:0}
.t1h-facts{display:grid;border-top:2px solid currentColor;margin:2px 0 0;padding:0;width:100%;max-width:520px;list-style:none}
.t1h-facts>div,.t1h-facts>li{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.t1h-facts dt,.t1h-facts .n{font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.t1h-facts dd,.t1h-facts b{margin:0;font:700 16px/1.25 var(--f-sans);letter-spacing:-.015em}
.t1h-facts dd a,.t1h-facts>li>a{font:700 16px/1.25 var(--f-sans);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.t1h-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.t1h-links>*{margin:0!important}
.t1h-links .chip,.t1h-links .btn{height:36px!important;padding:0 16px!important;font:500 11.5px/1 var(--f-mono)!important;letter-spacing:.05em!important;text-transform:uppercase;border-radius:999px;background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor!important;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.t1h-links .btn--f,.t1h-links .is-on{background:var(--pbb)!important;color:var(--pbf)!important;box-shadow:none!important}
.t1h-links .follow-subject{display:contents}
.t1h-lab{font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin:0;flex-basis:100%}
.t1h-tags{font:500 10.5px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin:0}
@media(max-width:800px){
 .t1h-g{grid-template-columns:minmax(0,1fr);min-height:0}
 .t1h-art{grid-column:1;grid-row:1}
 .t1h-art img{position:static;width:100%;height:auto;max-height:78vh;object-fit:contain}
 .t1h-x{grid-column:1;grid-row:2;padding:0 var(--m) 32px;gap:20px}
 .t1h-t{margin-top:-.62em}.t1h--noart .t1h-t{margin-top:0}
 .t1h--noart .t1h-x{margin-top:0;padding-top:32px}
 .t1h-t,.t1h-t.t1h-t--l{width:auto;max-width:100%;font-size:clamp(46px,14vw,64px);line-height:1.28}.t1h-t.t1h-t--xl{font-size:clamp(36px,10vw,48px)}
 .t1h-t{order:0}.t1h-crumbs{order:1;margin:0}.t1h-kind{order:1}.t1h-rest{order:2;padding-right:0;gap:18px}
 .t1h-facts>div,.t1h-facts>li{grid-template-columns:120px minmax(0,1fr)}
}

/* Typographic sleeve (audit #5, the picked fallback): a card with no picture shows its title in white Brunson on black,
   its act in green mono, in place of the grey DORK placeholder. Set by scripts/image-fallback.mjs. */
.ph[data-sleeve] { position: relative; background: #0a0a0a; }
.tsleeve { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 9%; color: #fff; overflow: hidden; }
.tsleeve i { font: 500 10px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--green, #02ff01); }
.tsleeve b { font: 400 clamp(18px, 2.2vw, 34px)/.86 var(--f-display); text-transform: uppercase; letter-spacing: 0; word-spacing: -.04em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* Audit #9: a two-digit day never stacks ('2 / 7') in setlist and on-stage date tiles. */
.shn__d > b { white-space: nowrap; overflow-wrap: normal; word-break: normal; }

/* audit #10 (picks-70): PLAY. Sleeves and photographs fill the square (no empty band above landscape photos), the week's
   cover feature is a real unit (picture, kicker, two links), the catch-up line is one slim row, and songs drop the repeated
   NEW tag and use a round play button. */
main section.drop ol.records > li > img{object-fit:cover!important;object-position:center 30%!important}
main section.drop > aside.drop-cover{align-items:start}
main section.drop > aside.drop-cover > h2{grid-column:1/5!important;grid-row:1/span 3!important}
main section.drop > aside.drop-cover > .drop-cover__img{grid-column:6/-1!important;display:block;width:100%!important;justify-self:stretch!important}
main section.drop > aside.drop-cover > .drop-cover__img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 25%}
main section.drop > aside.drop-cover > p.drop-cover__k{padding:10px 0 0!important;margin-top:14px!important;border-top:1px solid currentColor!important;font:500 10.5px/1.2 var(--f-mono)!important;letter-spacing:.06em;text-transform:uppercase}
main section.drop > aside.drop-cover > .drop-cover__a{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px!important}
main section.drop > aside.drop-cover > .drop-cover__a a{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px currentColor;font:700 11px/1 var(--f-sans);letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
main section.drop > aside.drop-cover > .drop-cover__a a:first-child{background:var(--W);color:#111;box-shadow:none}
main section.drop > aside[data-drop-catchup]:not([hidden]){display:flex!important;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:28px!important;padding:12px 0!important;border-top:1px solid currentColor!important;border-bottom:1px solid rgba(255,255,255,.35)!important}
main section.drop > aside[data-drop-catchup] > h2{font:500 10.5px/1.2 var(--f-mono)!important;letter-spacing:.06em;padding:0!important;border:0!important;margin:0!important}
main section.drop > aside[data-drop-catchup] > p.n{font:500 10.5px/1.2 var(--f-mono)!important;letter-spacing:.06em;text-transform:uppercase;padding:0!important;border:0!important;width:auto!important}
main section.drop > aside[data-drop-catchup] > p:not(.n){display:none!important}
main section.drop > aside[data-drop-catchup] > button{margin:0 0 0 auto!important}
main section.drop ol.songs .new{display:none!important}
main section.drop ol.songs > li > button[data-drop-preview]{width:36px!important;height:36px!important;padding:0!important;font-size:0!important;display:inline-grid;place-items:center}
main section.drop ol.songs > li > button[data-drop-preview]::before{content:"";width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;margin-left:3px}
@media (max-width:800px){
 main section.drop > aside.drop-cover > h2, main section.drop > aside.drop-cover > *, main section.drop > aside.drop-cover > .drop-cover__img{grid-column:1/-1!important;grid-row:auto!important}
 main section.drop > aside.drop-cover > h2{margin-bottom:14px!important}
}

/* audit (picks-71): one look for the page searches and selects. Searches use the house field (an underlined line with the
   search button as a pill at its end); selects use the house pill select. Covers Screen and Game reviews, Music videos,
   Playlists, Artists, Reviews filters and the 404. */
main :is(.review-search,.nf__row,.mvh-search,.native-artists__search .field){display:flex!important;align-items:center;gap:12px;flex-wrap:nowrap!important;border:0!important;border-bottom:2px solid currentColor!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;padding:0 0 8px!important;height:auto!important;width:100%;max-width:none}
main form.review-search.review-search.review-search{flex-wrap:wrap!important}
main .nf__search .nf__row.nf__row{flex-direction:row!important}
main .review-search > label{flex:0 0 100%;margin:0 0 6px;font:500 10.5px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
main .mvh-search{flex-direction:column;align-items:stretch!important}
main .mvh-search > .n,main .native-artists__search > label{font:500 10.5px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
main :is(.review-search,.nf__row,.mvh-search,.native-artists__search .field) input{flex:1 1 auto!important;min-width:0!important;width:auto!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;outline:none;padding:6px 0!important;height:auto!important;font:600 clamp(20px,2vw,30px)/1.2 var(--f-sans)!important;letter-spacing:-.02em;color:inherit}
main :is(.review-search,.nf__row,.mvh-search,.native-artists__search .field) input::placeholder{color:inherit;opacity:.5}
main :is(.review-search,.nf__row,.mvh-search,.native-artists__search .field):focus-within{outline:2px solid currentColor;outline-offset:4px}
main :is(.review-search,.nf__row) button{flex:none;width:auto!important;margin:0!important;height:40px;padding:0 18px!important;border:0!important;border-radius:999px!important;background:var(--ink)!important;color:var(--paper,#fff)!important;font:700 11px/1 var(--f-sans)!important;letter-spacing:.05em;text-transform:uppercase}
main :is(.native-review-filters,.mvh-tools,.npd-form,.native-artists__filters) select{height:38px;padding:0 34px 0 14px!important;border:0!important;border-radius:999px!important;box-shadow:inset 0 0 0 1.5px currentColor!important;background-color:transparent!important;color:inherit;font:700 12px/1 var(--f-ui,var(--f-sans))!important;letter-spacing:.05em;text-transform:uppercase;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%)!important;background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%!important;background-size:5px 5px!important;background-repeat:no-repeat!important;min-width:0;max-width:100%}

/* audit (picks-71): body copy is one column on phones (Track 'About the track', Venue history) */
@media (max-width:700px){main :is(.track-copy,.nvp-prose){columns:auto!important;column-count:1!important}}

/* audit (picks-71): the review indexes set their title once; the grid's own head becomes a mono label (Album, EP, Live
   and All reviews). */
main :is(section,div).sh-h1:not(h1) ~ section.sec--flow header.sh--k > h2.sh__t{font:500 10.5px/1.2 var(--f-mono)!important;letter-spacing:.06em!important;text-transform:uppercase!important;word-spacing:0!important;margin:0!important}
main :is(section,div).sh-h1:not(h1) ~ section.sec--flow header.sh--k > h2.sh__t :is(.stop,.bl){color:inherit!important;font:inherit!important}
main :is(section,div).sh-h1:not(h1) ~ section.sec--flow header.sh--k > h2.sh__t .stop{display:none}

/* audit (picks-71): pill rows that wrapped into stacks on phones scroll sideways inside the gutter instead (festival day
   tabs, magazine years). The page itself never scrolls sideways. */
@media (max-width:800px){
 main nav.nfp-daynav, main nav.flt.mgz-years div.chips.chips{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;gap:8px;max-width:100%;padding-bottom:4px}
 main nav.nfp-daynav::-webkit-scrollbar, main nav.mgz-years .chips::-webkit-scrollbar{display:none}
 main nav.nfp-daynav > *, main nav.flt.mgz-years div.chips.chips > *{flex:none!important;white-space:nowrap}
}

/* audit (picks-71): plain disclosure lists (album credits) use the house + / − toggle, not the browser triangle */
main details:not([class]) > summary:not([class]){list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font:500 11px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
main details:not([class]) > summary:not([class])::-webkit-details-marker{display:none}
main details:not([class]) > summary:not([class])::before{content:"+";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;font:600 13px/1 var(--f-sans);flex:none}
main details[open]:not([class]) > summary:not([class])::before{content:"−"}

/* audit (picks-72): artist fact band on phones: a fixed label column so labels never break (MEMBERS) and values line up. */
@media (max-width:700px){
 main .nap-facts dl > div{display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;gap:0 12px!important;align-items:baseline}
 main .nap-facts dl > div > dt{white-space:nowrap;overflow-wrap:normal;word-break:normal;width:auto!important;min-width:0}
 main .nap-facts dl > div > dd{margin:0!important;min-width:0}
}
/* artist hero actions on phones: Follow and Tickets share a row; Ask Dork is a text link under them. */
@media (max-width:700px){
 main .t1h-links.nap-actions{display:flex!important;flex-wrap:wrap!important;align-items:center;gap:10px!important}
 main .t1h-links.nap-actions > :is(.follow-subject,a.btn,.btn){flex:1 1 calc(50% - 5px)!important;width:auto!important;min-width:0}
 main .t1h-links.nap-actions .follow-subject > .btn{width:100%!important;justify-content:center}
 main .t1h-links.nap-actions > a.chip{flex:0 0 100%!important;order:9;background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;height:auto!important;text-decoration:underline;text-underline-offset:3px;justify-content:flex-start}
}

/* Audit #10 (picks-73): entity pages (Single/Album, Film/TV/Game, Person, Writer) keep one big title; their secondary section headings are a step down so sparse sections don't read as empty billboards */
:is(article.native-album, article.etc-entity, section.native-person) .sec--flow .sh__t { --head: clamp(30px, 3.5vw, 46px); }
:is(article.native-album, article.etc-entity, section.native-person) .sec--flow .sh { min-height: 0; }
@media (max-width: 640px) { :is(article.native-album, article.etc-entity, section.native-person) .sec--flow .sh__t { --head: 34px; } }
/* "In good company": an act without a picture gets a solid disc, so the row keeps its rhythm */
.nal-similar-grid article.nal-noph > a { display: block; }
.nal-similar-grid article.nal-noph > a::before { content: ""; display: block; aspect-ratio: 1; border-radius: 50%; background: var(--ink); margin-bottom: 10px; }
/* Single and album covers carry their own lettering: on phones the headline sits below the picture instead of over it */
@media (max-width: 640px) { article.native-album .t1h-t { margin-top: 0; padding-top: 18px; } }

/* Audit: long story lists (Live reviews index, strand "More coverage") were a big photo beside one small headline, two-thirds of each row empty. On desktop they are a three-up grid, picture over headline */
@media (min-width: 900px) {
  ol.editorial-story-list:has(a.lrow.lrow--38) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; align-items: start; }
  ol.editorial-story-list:has(a.lrow.lrow--38) > li { border: 0; min-width: 0; display: block; }
  ol.editorial-story-list a.lrow[style*="38%"] { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; padding: 0; }
  ol.editorial-story-list a.lrow[style*="38%"] .pill { display: none; }
}

/* Digital covers: close the last row. Ten covers sit five across (two full rows), not six then four */
@media (min-width: 900px) {
  .covs--6.covs--n10.covs--n10, .covs--6.covs--n5.covs--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .covs--6.covs--n8.covs--n8, .covs--6.covs--n4.covs--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}