/* NOISE & GRIT — site stylesheet, design 2 (2026-10-24)
   "Back cover": the page reads like the printed back of a record sleeve.
   Two brand faces in contrast: Big Shoulders (condensed, logo world) only for page titles,
   catalogue names and prices; Archivo at full width 125 % for section headings, set in sentence case.
   Key-value content is set like a tracklist with dotted leaders.
   One memorable element: the official 16-bar waveform, large and dimmed behind the home title
   (as in the approved "waveform" wallpaper). Prices sit on a small paper price sticker. */

@font-face { font-family: "Big Shoulders Display"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("/fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("/fonts/big-shoulders-display-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  src: url("/fonts/archivo-latin-standard-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  src: url("/fonts/archivo-latin-ext-standard-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap;
  src: url("/fonts/archivo-latin-standard-italic.woff2") format("woff2-variations"); }

:root {
  /* sleeve */
  --sleeve: #0d0d0c;
  --sleeve-2: #171615;
  --sleeve-3: #211f1d;
  --rule: #3a3734;
  --text: #f2f0eb;
  --text-2: #b4afa5;   /* 8.6:1 on sleeve */
  --text-3: #8f8a81;   /* 5.6:1 on sleeve, never below 16px */
  /* insert (paper) */
  --paper: #d8d4ca;
  --paper-2: #cbc6bb;
  --ink: #151413;
  --ink-2: #4a4640;    /* 7.0:1 on paper */
  /* type */
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --step--1: 1rem;        /* 16px  captions, legal minimum */
  --step-0: 1.125rem;     /* 18px  body */
  --step-1: 1.3125rem;    /* 21px  lead / product copy */
  --step-2: 1.75rem;      /* 28px */
  --step-3: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --step-4: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
  --step-5: clamp(3.25rem, 1.4rem + 7.4vw, 8rem);
  --h2: clamp(1.75rem, 1.15rem + 2vw, 2.9rem);     /* wide section heading */
  --h2-s: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);  /* wide label heading (spec column, cards) */
  --leader: radial-gradient(circle, currentColor 1.1px, transparent 1.5px) 0 100% / 7px 4px repeat-x;
  /* space */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.75rem);
  --max: 82rem;
  --measure: 38rem;
  --section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --focus: #f2f0eb;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .22 0 0 0 0 .18 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23f)'/%3E%3C/svg%3E");
  --speck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .08 0 0 0 -6 1.5'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23s)'/%3E%3C/svg%3E");
  --rough-top: polygon(0.00% 3.2px, 2.08% 3.9px, 4.17% 6.5px, 6.25% 3.3px, 8.33% 3.6px, 10.42% 4.1px, 12.50% 1.3px, 14.58% 3.6px, 16.67% 4.4px, 18.75% 5.6px, 20.83% 0.7px, 22.92% 2.1px, 25.00% 0.6px, 27.08% 5.7px, 29.17% 4.9px, 31.25% 0.3px, 33.33% 6.9px, 35.42% 6.8px, 37.50% 4.6px, 39.58% 4.3px, 41.67% 1.1px, 43.75% 0.1px, 45.83% 3.7px, 47.92% 0.4px, 50.00% 1.3px, 52.08% 1.7px, 54.17% 0.2px, 56.25% 3.2px, 58.33% 3.1px, 60.42% 5.9px, 62.50% 3.6px, 64.58% 4.5px, 66.67% 3.5px, 68.75% 4.6px, 70.83% 3.2px, 72.92% 1.9px, 75.00% 7.0px, 77.08% 7.0px, 79.17% 5.9px, 81.25% 5.0px, 83.33% 2.2px, 85.42% 1.6px, 87.50% 2.0px, 89.58% 0.5px, 91.67% 5.4px, 93.75% 2.8px, 95.83% 5.9px, 97.92% 2.7px, 100.00% 6.7px, 100% 100%, 0% 100%);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--sleeve);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
/* grain over the whole sleeve, never over interaction */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background-image: var(--grain); opacity: .075; mix-blend-mode: overlay;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 1em; }
strong { font-weight: 650; }
code { font-family: var(--body); font-stretch: 88%; font-weight: 600; font-size: .95em; color: var(--text); }
.insert code { color: var(--ink); }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: .35em; }
::selection { background: var(--text); color: var(--sleeve); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 1px; }
.insert :focus-visible { --focus: var(--ink); outline-color: var(--ink); }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--text); color: var(--sleeve);
  padding: .75rem 1rem; font-weight: 650; text-decoration: none; }
.skip:focus { top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
h1, .display {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  line-height: .86; letter-spacing: .005em; margin: 0 0 .4em; text-wrap: balance;
}
h1 { font-size: var(--step-5); }
/* section headings: wide Archivo, sentence case, the counterweight to the condensed titles */
h2 { font-family: var(--body); font-weight: 800; font-stretch: 125%; text-transform: none;
  font-size: var(--h2); line-height: 1.04; letter-spacing: -.018em; margin: 0 0 .55em; text-wrap: balance; }
h3 { font-family: var(--body); font-size: var(--step-1); font-weight: 700; line-height: 1.25;
  font-stretch: 100%; margin: 0 0 .45em; letter-spacing: -.005em; }
h4 { font-size: var(--step-1); font-weight: 650; margin: 0 0 .4em; line-height: 1.3; }
.lead { font-size: var(--step-1); line-height: 1.55; color: var(--text); max-width: var(--measure); }
.muted { color: var(--text-2); }
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--h2-s); margin-top: 2em; }
.prose h3 { margin-top: 1.8em; }
.prose p, .prose li { color: var(--text-2); }
.prose strong { color: var(--text); }

/* rough rule: hand-cut line, used where a divider carries structure */
.rule { height: 3px; border: 0; margin: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='3' preserveAspectRatio='none'%3E%3Cpath d='M0 1.2 L60 1.6 L130 .9 L210 1.5 L290 1.1 L360 1.8 L430 1 L520 1.5 L600 1.2 L600 2.2 L520 2.4 L430 2.1 L360 2.6 L290 2 L210 2.5 L130 1.9 L60 2.4 L0 2.1Z' fill='%233a3734'/%3E%3C/svg%3E") center/100% 100% no-repeat; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--sleeve); border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; }
.brand { display: block; flex: none; padding: .9rem 0; }
.brand img { height: 22px; width: auto; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .15rem; }
.nav li { margin: 0; }
.nav a { white-space: nowrap; }
.nav a, .nav button.search-trigger {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem .7rem;
  font: 550 1.0625rem/1.2 var(--body); color: var(--text-2); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.nav a:hover, .nav button.search-trigger:hover { color: var(--text); }
.nav a[aria-current="page"], .nav a[aria-current="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
.search-trigger svg, .nav .search-item svg { width: 1.15rem; height: 1.15rem; flex: none; }
.nav .search-item a { border: 1px solid var(--rule); margin-left: .5rem; color: var(--text); }
.menu-toggle { display: none; margin-left: auto; min-height: 2.75rem; padding: .4rem .9rem; background: none; color: var(--text);
  border: 1px solid var(--rule); font: 600 1.0625rem var(--body); cursor: pointer; }

@media (max-width: 1100px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: .5rem; }
  .nav { position: fixed; inset: 4.75rem 0 0 0; background: var(--sleeve); display: none; overflow-y: auto;
    border-top: 1px solid var(--rule); margin: 0; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; padding: 1rem var(--gutter) 3rem; gap: 0; }
  .nav li { border-bottom: 1px solid var(--rule); }
  .nav a { font: 800 1.6rem/1.1 var(--body); font-stretch: 125%; letter-spacing: -.015em; color: var(--text); min-height: 4rem; padding: .6rem 0; width: 100%; }
  .nav a[aria-current="page"] { box-shadow: none; text-decoration: underline; text-decoration-thickness: 3px; }
  .nav .search-item a { border: 0; margin: 0; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 520px) { .brand img { height: 18px; } }

/* ---------- buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem;
  padding: .75rem 1.5rem; font: 700 1.0625rem/1.2 var(--body); text-decoration: none; cursor: pointer;
  border: 2px solid var(--paper); background: var(--paper); color: var(--ink); transition: background .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--text); border-color: var(--text); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--text-3); }
.btn--ghost:hover { background: transparent; border-color: var(--text); color: var(--text); }
.insert .btn { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.insert .btn:hover { background: transparent; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.text-link { font-weight: 600; }

/* ---------- hero (home) ---------- */
/* The waveform sits large and dimmed behind the title, cut by the right edge of the page,
   as in the approved "waveform" wallpaper. The title is set over it, bottom left. */
.hero { position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(5rem, 3rem + 12vw, 14rem) clamp(3.5rem, 2rem + 5vw, 6.5rem);
  border-bottom: 1px solid var(--rule); }
.hero .wrap { position: static; }  /* the art is placed against the whole hero */
.hero .wrap > div { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(3.6rem, .9rem + 10.2vw, 11.75rem); line-height: .82; margin-bottom: .3em; max-width: 9.5em; }
.hero .lead { margin-bottom: 0; max-width: 34rem; color: var(--text-2); }
.hero__art { position: absolute; z-index: -1; margin: 0; pointer-events: none;
  top: 50%; right: max(-3rem, calc((100vw - var(--max)) / 2 - 6rem)); transform: translateY(-50%);
  width: min(50vw, 44rem); }
.hero .wave { color: var(--rule); max-height: none; }
/* the catalogue follows the hero directly; the hero's bottom rule separates them */
.hero + .section { padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem) !important; }
@media (max-width: 860px) {
  .hero { padding-top: clamp(11rem, 40vw, 16rem); }
  .hero__art { top: 1.25rem; transform: none; right: -14vw; width: 88vw; }
}
.wave { width: 100%; height: auto; max-height: 34rem; color: var(--text); overflow: visible; }
.wave rect { transform-box: fill-box; transform-origin: 50% 50%; }
.wave .bar { fill: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .js .wave .bar { animation: settle 1.25s cubic-bezier(.2,.75,.25,1) both; animation-delay: calc(var(--i) * 45ms + 120ms); }
  @keyframes settle {
    0% { transform: scaleY(.04); opacity: .2; }
    55% { transform: scaleY(1.08); opacity: 1; }
    100% { transform: scaleY(1); opacity: 1; }
  }
}
.hero__art figcaption { display: none; }

/* ---------- sections ---------- */
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); max-width: 46rem; }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--text-2); max-width: 34rem; }
.section-head > div { margin-top: .5rem; }

/* ---------- category index (home): a tracklist ----------
   name ........................ state
   description                                */
.index { list-style: none; margin: 0; padding: 0; }
.index li { margin: 0; }
.index a { display: grid; grid-template-columns: max-content minmax(2rem, 1fr) max-content;
  grid-template-areas: "name leader state" "desc desc desc"; column-gap: 1rem; align-items: baseline;
  padding: clamp(1rem, 2vw, 1.6rem) 0 clamp(1rem, 2vw, 1.5rem); text-decoration: none; }
.index a::before { content: ""; grid-area: leader; align-self: baseline; height: .6em; background: var(--leader); color: var(--text-3); }
.index__name { grid-area: name; font: 800 var(--step-4)/.86 var(--display); text-transform: uppercase; }
.index__desc { grid-area: desc; color: var(--text-2); margin: .55rem 0 0; max-width: 34rem; }
.index__state { grid-area: state; font-size: var(--step--1); color: var(--text-2); text-align: right; }
.index__state strong { display: block; color: var(--text); font-weight: 700; }
.index a:hover::before, .index a:focus-visible::before { color: var(--text); }
.index a:hover .index__desc { color: var(--text); }
@media (max-width: 860px) {
  .index a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "desc" "state"; }
  .index a::before { display: none; }
  .index li + li a { border-top: 1px solid var(--rule); }
  .index__state { text-align: left; margin-top: .5rem; }
  .index__state strong { display: inline; margin-right: .4rem; }
}

/* ---------- feature (PatternBridge on home) ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.feature__shot { margin: 0; border: 1px solid var(--rule); }
.feature__shot img { width: 100%; }
.shot-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; overflow: hidden; }
.shot-zoom img { transition: transform .5s ease; transform-origin: 30% 30%; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) { .shot-zoom:hover img, .shot-zoom:focus-visible img { transform: scale(1.6); } }
.zoombox__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem clamp(1rem, 3vw, 2rem); }
.zoombox__hint { color: var(--text-2); font-size: var(--step--1); }
.zoombox__stage { height: calc(100vh - 5.5rem); overflow: auto; display: flex; padding: 0 clamp(.5rem, 2vw, 1.5rem) 1.5rem; }
.zoombox__stage img { margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; cursor: zoom-in; }
.zoombox__stage.is-actual img { max-width: none; max-height: none; cursor: zoom-out; }
.feature__logo { width: min(100%, 26rem); margin: 0 0 1.5rem -.4rem; }
.feature h3 { font-size: var(--h2-s); font-stretch: 125%; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.price { font: 800 var(--step-3)/1 var(--display); margin: 1.5rem 0 .3rem; }
.price small { font: 500 var(--step-0)/1.4 var(--body); color: var(--text-2); margin-left: .5rem; text-transform: none; }
/* record-shop price sticker: paper, ink, slightly off-square */
.feature .price, .buybox .price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .55rem;
  background-color: var(--paper); color: var(--ink); padding: .55rem .9rem .5rem; transform: rotate(-1.6deg);
  background-image: var(--speck), var(--fibre); background-size: 300px 300px, 600px 600px;
  box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 8px 20px -10px rgba(0,0,0,.7); }
.feature .price small, .buybox .price small { color: var(--ink-2); margin: 0; font-weight: 600; font-size: 1rem; }
.status { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--step--1); color: var(--text); font-weight: 550; }
.status::before { content: ""; width: .6rem; height: .6rem; border: 2px solid currentColor; border-radius: 50%; flex: none; }
.status--available::before { background: currentColor; }
@media (max-width: 900px) { .feature { grid-template-columns: minmax(0, 1fr); } }

/* ---------- insert (printed paper) ---------- */
.insert { position: relative; background-color: var(--paper); color: var(--ink);
  background-image: var(--speck), var(--fibre), var(--grain); background-size: 300px 300px, 600px 600px, 240px 240px;
  clip-path: var(--rough-top); margin-top: -8px; padding-top: 8px; }
.insert::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 160px rgba(60, 50, 35, .14); }
.insert a { color: var(--ink); }
.insert .muted, .insert p { color: var(--ink-2); }
.insert h2, .insert h3, .insert .display { color: var(--ink); }
.insert ::selection { background: var(--ink); color: var(--paper); }

.manifesto { display: grid; gap: 0; }
.manifesto__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: baseline;
  padding-block: clamp(1.4rem, 3vw, 2.5rem); border-bottom: 2px solid var(--ink); }
.manifesto__row:first-child { border-top: 2px solid var(--ink); }
.manifesto__row h2 { font-size: var(--h2); margin: 0; }
.manifesto__row p { margin: 0; font-size: var(--step-1); max-width: 30rem; color: var(--ink-2); }
@media (max-width: 760px) { .manifesto__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- page heads ---------- */
.page-head { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.page-head h1 { font-size: var(--step-5); margin-bottom: .3em; }
.page-head .lead { color: var(--text-2); }
.crumbs { font-size: var(--step--1); color: var(--text-2); margin-bottom: 1.5rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--text-3); }

/* ---------- catalogue ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-block: 1rem; border-block: 1px solid var(--rule); margin-bottom: 2rem; }
.toolbar__count { margin: 0 auto 0 0; color: var(--text-2); }
.field { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--step--1); color: var(--text-2); }
.field select { font: 500 1.0625rem var(--body); color: var(--text); background: var(--sleeve-2); border: 1px solid var(--rule);
  min-height: 2.75rem; padding: .4rem 2.2rem .4rem .8rem; appearance: none; border-radius: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f2f0eb' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; }
.filters { display: flex; flex-wrap: wrap; gap: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.card { position: relative; display: flex; flex-direction: column; }
.card__art { aspect-ratio: 1; background: var(--sleeve-2); border: 1px solid var(--rule); overflow: hidden; margin-bottom: 1rem; }
.card__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__art img { transform: scale(1.025); }
.card__type { font-size: var(--step--1); color: var(--text-2); margin: 0 0 .2rem; }
.card__title { font: 800 var(--step-2)/1 var(--display); text-transform: uppercase; margin: 0 0 .5rem; font-size: 2rem; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__title a:focus-visible { outline: none; }
.card:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 6px; }
.card__desc { color: var(--text-2); margin: 0 0 1rem; }
.card__meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .9rem; border-top: 1px solid var(--rule); }
.card__price { font-weight: 650; font-size: var(--step-1); }
@media (prefers-reduced-motion: reduce) { .card__art img { transition: none; } }

.empty { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem 4rem; padding-block: 2.5rem 1rem; border-top: 1px solid var(--rule); }
.empty h2 { font-size: var(--h2); }
.empty ul { list-style: none; padding: 0; margin: 0; }
.empty li { border-bottom: 1px solid var(--rule); margin: 0; }
.empty li a { display: flex; justify-content: space-between; padding: 1rem 0; text-decoration: none; font-weight: 600; }
.empty li a:hover { text-decoration: underline; }
.empty li span { color: var(--text-2); font-weight: 400; }
@media (max-width: 760px) { .empty { grid-template-columns: minmax(0, 1fr); } }
.no-results { padding: 2rem 0; color: var(--text-2); }

/* ---------- product page ---------- */
.product-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; padding-bottom: var(--section); }
@media (max-width: 980px) { .product-top { grid-template-columns: minmax(0, 1fr); } }
.gallery__main { margin: 0; }
.gallery__open { display: block; width: 100%; padding: clamp(.4rem, 1vw, .8rem); background: var(--sleeve-2); border: 1px solid var(--rule); cursor: zoom-in; position: relative; }
.gallery__open img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; }
.gallery__open .zoom, .shot-zoom .zoom { position: absolute; right: .8rem; top: .8rem; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; background: rgba(13,13,12,.85); color: var(--text); padding: .35rem .5rem; font: 550 var(--step--1)/1.2 var(--body); border: 1px solid var(--rule); }
.zoom__label { display: none; }
@media (hover: hover) { .gallery__open:hover .zoom__label, .gallery__open:focus-visible .zoom__label, .shot-zoom:hover .zoom__label, .shot-zoom:focus-visible .zoom__label { display: inline; } }
.gallery__main figcaption { margin-top: .9rem; color: var(--text-2); font-size: var(--step--1); line-height: 1.5; min-height: 3em; }
.gallery__thumbs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; padding: 0; margin: 1rem 0 0; }
@media (max-width: 520px) { .gallery__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery__thumbs li { margin: 0; }
.gallery__thumbs button { display: block; width: 100%; padding: .3rem; background: var(--sleeve-2); border: 1px solid var(--rule); cursor: pointer; text-align: left; color: var(--text-2); font: 500 1rem/1.3 var(--body); }
.gallery__thumbs button span { display: block; padding: .5rem .3rem .3rem; overflow-wrap: anywhere; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--text); color: var(--text); }
.gallery__thumbs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
.gallery__main img.is-swapping { opacity: .35; }
.gallery__main img { transition: opacity .18s ease; }

.buybox { position: sticky; top: 6.5rem; border: 0; border-top: 3px solid var(--text); background: var(--sleeve-2); padding: clamp(1.25rem, 2.5vw, 2rem); }
.buybox__logo { width: 100%; max-width: 22rem; margin: 0 0 1.25rem -.3rem; }
.buybox .price { margin: 1.5rem 0 .6rem -.2rem; font-size: var(--step-4); }
.buybox .note { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); color: var(--text-2); font-size: var(--step--1); }
.buybox .note p { margin-bottom: .75em; }
.cta-unavailable { margin-top: 1.5rem; }
.btn--buy { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: transparent; border: 2px dashed var(--text-3); color: var(--text-2); cursor: not-allowed; }
.btn[disabled]:hover { background: transparent; border-color: var(--text-3); color: var(--text-2); }
.buy-note { margin: .75rem 0 0; font-size: var(--step--1); color: var(--text-2); }
.buy-note strong { color: var(--text); }
@media (max-width: 980px) { .buybox { position: static; } }

.spec { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1rem 4rem; padding-block: clamp(2.25rem, 4vw, 3.5rem); border-top: 1px solid var(--rule); }
.spec > h2 { font-size: var(--h2-s); margin: .15rem 0 0; }
.spec__body { max-width: 46rem; min-width: 0; }
.spec__body > p, .spec__body li { color: var(--text-2); }
.spec__body > p:first-child { color: var(--text); font-size: var(--step-1); }
@media (max-width: 860px) { .spec { grid-template-columns: minmax(0, 1fr); } }
.modules { margin-top: 1.5rem; }
.modules > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: .25rem 2rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--rule); }
.modules > div:last-child { border-bottom: 1px solid var(--rule); }
.modules h3 { font-size: var(--step-0); margin: 0; }
.modules p { margin: 0; color: var(--text-2); }
@media (max-width: 620px) { .modules > div { grid-template-columns: 1fr; } }
.table-wrap { overflow-x: auto; margin-top: 1.25rem; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: var(--step-0); }
th, td { text-align: left; padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font-weight: 650; color: var(--text); border-bottom: 2px solid var(--text-3); }
td { color: var(--text-2); }
td.yes { color: var(--text); font-weight: 600; }
.callout { margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px dashed var(--text-3); background: transparent; color: var(--text); }
.callout p:last-child { margin: 0; }
/* key / value as a tracklist: label ........ value */
dl.facts { display: grid; grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr); gap: .7rem 1rem; margin: 1.25rem 0 0; }
dl.facts dt { display: flex; align-items: baseline; gap: .6rem; color: var(--text); font-weight: 700; }
dl.facts dt::after { content: ""; flex: 1 1 1.5rem; min-width: 1.5rem; height: .55em; background: var(--leader); color: var(--text-3); }
dl.facts dd { margin: 0; color: var(--text-2); }
@media (max-width: 560px) { dl.facts { grid-template-columns: 1fr; gap: .1rem; } dl.facts dt::after { display: none; } dl.facts dd { margin-bottom: .8rem; } }

/* ---------- lightbox ---------- */
dialog.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #0a0a09; color: var(--text); }
dialog.lightbox::backdrop { background: rgba(0,0,0,.6); }
.lightbox__inner { height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(.75rem, 2vw, 1.5rem); gap: 1rem; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lightbox__count { color: var(--text-2); font-size: var(--step--1); }
.lightbox__stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; min-height: 0; }
.lightbox__stage figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.lightbox__stage img { max-height: calc(100vh - 11rem); width: auto; max-width: 100%; object-fit: contain; }
.lightbox__stage figcaption { margin-top: .8rem; color: var(--text-2); font-size: var(--step--1); max-width: 60rem; text-align: center; }
.icon-btn { min-width: 3rem; min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--sleeve-2); color: var(--text); border: 1px solid var(--rule); cursor: pointer; font: 600 1rem var(--body); padding: 0 .9rem; }
.icon-btn:hover { border-color: var(--text); }
.icon-btn svg { width: 1.3rem; height: 1.3rem; }
@media (max-width: 700px) { .lightbox__stage { grid-template-columns: 1fr; } .lightbox__stage .icon-btn { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  dialog.lightbox[open] .lightbox__stage img { animation: lb-in .22s ease-out; }
  @keyframes lb-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
}

/* ---------- search ---------- */
dialog.search { width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); margin: 4.5rem auto auto; padding: 0;
  background: var(--sleeve-2); color: var(--text); border: 1px solid var(--text-3); }
dialog.search::backdrop { background: rgba(0,0,0,.72); }
.search-box { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); }
.search-box svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--text-2); }
.search-box input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: 500 1.375rem/1.3 var(--body); padding: .4rem 0; }
.search-box input:focus { outline: none; }
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-box:focus-within { box-shadow: inset 0 -2px 0 var(--text); }
.search-results { list-style: none; margin: 0; padding: .5rem; overflow-y: auto; max-height: 60vh; }
.search-results li { margin: 0; }
.search-results a { display: block; padding: .85rem 1rem; text-decoration: none; border: 1px solid transparent; }
.search-results a:hover, .search-results a:focus-visible, .search-results a.is-active { background: var(--sleeve-3); border-color: var(--rule); outline: none; }
.search-results .r-title { display: block; font-weight: 650; font-size: var(--step-0); }
.search-results .r-kind { color: var(--text-3); font-weight: 500; font-size: 1rem; margin-left: .5rem; }
.search-results .r-text { display: block; color: var(--text-2); font-size: 1rem; line-height: 1.45; margin-top: .15rem; }
.search-results mark { background: none; color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; }
.search-hint { padding: 1rem 1.5rem 1.25rem; color: var(--text-2); font-size: 1rem; margin: 0; }
.search-hint a { color: var(--text); }
.search-page .search-box { border: 1px solid var(--text-3); background: var(--sleeve-2); }
.search-page .search-results { max-height: none; padding: 1rem 0; }
kbd { font: 600 .9rem var(--body); border: 1px solid var(--rule); padding: .05rem .4rem; color: var(--text-2); }

/* ---------- legal ---------- */
.legal-note { border: 1px solid var(--rule); background: var(--sleeve-2); padding: 1rem 1.25rem; color: var(--text-2); margin-bottom: 2.5rem; max-width: var(--measure); }
.legal-note p { margin: 0; }
.updated { color: var(--text-3); font-size: var(--step--1); }
address { font-style: normal; }

/* ---------- support paths ---------- */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.paths > section { padding: clamp(1.5rem, 3vw, 2.25rem); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.paths h2 { font-size: var(--h2-s); margin-bottom: .5rem; }
.paths p, .paths li { color: var(--text-2); }
.paths .addr { color: var(--text); font-weight: 650; font-size: var(--step-1); margin-bottom: 1rem; display: inline-block; }
@media (max-width: 760px) { .paths { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding-block: clamp(3rem, 6vw, 5rem) 2rem; color: var(--text-2); font-size: var(--step--1); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.footer-brand img { height: 64px; width: auto; margin-bottom: 1.25rem; }
.footer-brand p { max-width: 22rem; }
.site-footer h2 { font: 650 1.0625rem/1.3 var(--body); text-transform: none; color: var(--text); margin: 0 0 .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0 0 .5rem; }
.site-footer a { text-decoration: none; color: var(--text-2); }
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.footer-base { align-items: center; }
.footer-base p { margin: 0; }
.policies { position: relative; }
.policies__toggle { background: none; border: 0; padding: .5rem 0; font: inherit; color: var(--text-2); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--rule); }
.policies__toggle:hover, .policies__toggle[aria-expanded="true"] { color: var(--text); text-decoration-color: currentColor; }
.policies__menu { position: absolute; right: 0; bottom: calc(100% + .5rem); z-index: 20; min-width: 15rem; margin: 0; padding: .5rem; list-style: none;
  background: var(--sleeve-2); border: 1px solid var(--rule); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.site-footer .policies__menu li { margin: 0; }
.site-footer .policies__menu a { display: block; padding: .55rem .75rem; color: var(--text-2); text-decoration: none; }
.site-footer .policies__menu a:hover, .site-footer .policies__menu a:focus-visible { background: var(--sleeve-3); color: var(--text); }
@media (max-width: 520px) { .policies__menu { right: auto; left: 0; } }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
  body { font-size: 1.0625rem; }
  :root { --step-1: 1.1875rem; --step-2: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print { body::after, .site-header, .site-footer { display: none; } body { background: #fff; color: #000; } }

/* ---------------------------------------------------------------- help & user guides */
.help-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 1.5rem; }
.help-card { padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-top: 1px solid var(--rule); background: none; }
.help-card h2 { font-size: var(--h2-s); margin-bottom: .5rem; }
.help-card h2 a { text-decoration: none; }
.help-card p { color: var(--text-2); }
.help-card__meta a { color: var(--text); }

.guide-head { padding-bottom: 2rem; }
.guide-head h1 { font-size: var(--step-4); hyphens: manual; overflow-wrap: break-word; }
.guide-body h2, .guide-body h3, .g-toc a { overflow-wrap: break-word; }
.guide-head__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1.5rem; }
.lang-switch { display: inline-flex; border: 1px solid var(--rule); }
.lang-switch a { padding: .55rem 1rem; text-decoration: none; color: var(--text-2); font-weight: 600; min-height: 2.75rem; display: inline-flex; align-items: center; }
.lang-switch a + a { border-left: 1px solid var(--rule); }
.lang-switch a:hover { color: var(--text); }
.lang-switch a[aria-current="page"] { background: var(--text); color: var(--sleeve); }
.guide-head__product { color: var(--text-2); }

.guide-layout { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; border-top: 1px solid var(--rule); padding-top: 2rem; }
.guide-side { position: sticky; top: 6.5rem; max-height: calc(100vh - 8rem); overflow-y: auto; overscroll-behavior: contain; padding-right: .25rem; }
.guide-search label { display: block; font-weight: 650; margin-bottom: .4rem; }
.guide-search input { width: 100%; min-height: 2.9rem; padding: .55rem .8rem; background: var(--sleeve-2); color: var(--text); border: 1px solid var(--rule); font: inherit; font-size: var(--step--1); }
.guide-search input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.guide-search__status { min-height: 1.5em; margin: .5rem 0 1.25rem; color: var(--text-2); font-size: var(--step--1); }
.g-toc summary { cursor: pointer; font-family: var(--body); font-weight: 800; font-stretch: 125%; letter-spacing: -.01em; font-size: 1.2rem; padding: .25rem 0 .75rem; }
.g-toc__list, .g-toc__list ol { list-style: none; margin: 0; padding: 0; }
.g-toc__list > li { margin: 0 0 .55rem; }
.g-toc__list > li > a { font-weight: 650; color: var(--text); }
.g-toc__list ol { margin: .35rem 0 .2rem .9rem; border-left: 1px solid var(--rule); padding-left: .75rem; }
.g-toc__list ol li { margin: .25rem 0; }
.g-toc a { text-decoration: none; color: var(--text-2); font-size: var(--step--1); line-height: 1.35; display: inline-block; }
.g-toc a:hover, .g-toc a.is-current { color: var(--text); text-decoration: underline; }

.guide-body { max-width: 46rem; min-width: 0; }
.guide-body h2 { font-size: var(--h2); margin: 0 0 .6em; }
.g-chapter { padding-bottom: 1.5rem; }
.g-chapter:not([hidden]) ~ .g-chapter { border-top: 1px solid var(--rule); padding-top: 2.25rem; }
.g-block--h3 { margin-top: 2rem; }
.g-block h3 { font-size: var(--step-1); margin-bottom: .5em; }
.guide-body p, .guide-body li { color: var(--text-2); }
.guide-body strong, .guide-body code { color: var(--text); }
.guide-body ul, .guide-body ol { padding-left: 1.25rem; }
.guide-body li { margin-bottom: .4rem; }
.guide-body a { overflow-wrap: anywhere; }
.guide-body mark { background: var(--text); color: var(--sleeve); padding: 0 .1em; }
.guide-body .callout { margin: 1.25rem 0; }
.guide-foot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.guide-body [hidden] { display: none !important; }
@media (max-width: 980px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .guide-side { position: static; max-height: none; overflow: visible; padding: 0 0 1.5rem; border-bottom: 1px solid var(--rule); }
}
@media print { .guide-side, .guide-head__bar, .guide-foot { display: none; } .guide-layout { display: block; } }

/* ---------------------------------------------------------------- product key features */
.features { padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--rule); }
.features__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.features__head h2 { font-size: var(--h2); margin: 0; }
.features__head p { margin: 0; color: var(--text); font-size: var(--step-1); max-width: 34rem; }
.feat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5rem); }
.feat { margin: 0; padding: 1.25rem 0 1.6rem; border-top: 1px solid var(--rule); }
/* the six points are not a sequence, so their numbers are not shown */
.feat__no { display: none; }
.feat h3 { font-size: var(--step-1); font-stretch: 100%; margin: 0 0 .45rem; }
.feat p { margin: 0; color: var(--text-2); }
.features__note { margin: 1rem 0 0; color: var(--text-3); font-size: var(--step--1); max-width: 46rem; }
.features sup { font-size: .7em; line-height: 0; }

@media (max-width: 620px) { .feat-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- release-news sign-up */
.notify { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.notify__title { margin: 0 0 .25rem; font-weight: 650; color: var(--text); }
.notify__text { margin: 0 0 .75rem; color: var(--text-2); font-size: var(--step--1); }
.notify__row { display: flex; gap: .5rem; }
.notify__row input { flex: 1 1 auto; min-width: 0; min-height: 3.25rem; padding: .55rem .8rem; background: var(--sleeve); color: var(--text); border: 1px solid var(--rule); font: inherit; font-size: var(--step--1); }
.notify__row input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.notify__row .btn { flex: 0 0 auto; padding-inline: 1.1rem; }
.notify__small { margin: .6rem 0 0; color: var(--text-3); font-size: var(--step--1); }
.notify__small a { color: var(--text-2); }
.notify__status { margin: .5rem 0 0; color: var(--text); font-size: var(--step--1); min-height: 1px; }
.notify.is-done .notify__row { display: none; }
@media (max-width: 380px) { .notify__row { flex-direction: column; } }
.notify-dialog { width: min(28rem, calc(100vw - 2rem)); padding: clamp(1.5rem, 4vw, 2.25rem); text-align: center; background: var(--sleeve-2); color: var(--text); border: 1px solid var(--rule); }
.notify-dialog::backdrop { background: rgba(8, 8, 7, .78); }
.notify-dialog h2 { font-size: var(--h2-s); margin: 0 0 .6rem; }
.notify-dialog p { color: var(--text-2); margin: 0 0 .9rem; }
.notify-dialog__help { text-align: left; font-size: var(--step--1); color: var(--text-3); border-top: 1px solid var(--rule); margin: 1.25rem 0 1.75rem; padding-top: 1rem; }
.nowrap { white-space: nowrap; }
.notify-dialog .notify-dialog__q { color: var(--text-2); font-weight: 600; margin: 0 0 .5rem; }
.notify-dialog__help ul { margin: 0; padding-left: 1.1rem; }
.notify-dialog__help li { margin: 0 0 .35rem; }
.notify-dialog__help li:last-child { margin-bottom: 0; }
.notify-dialog .btn { min-width: 8rem; margin-inline: auto; }

/* ---------- release-news card (non-modal slide-in) ---------- */
dialog.nl-popup { position: fixed; inset: auto 1.25rem 1.25rem auto; margin: 0; z-index: 60;
  width: min(23rem, calc(100vw - 2.5rem)); padding: 1.4rem 1.4rem 1.1rem; background: var(--sleeve-2); color: var(--text);
  border: 1px solid var(--rule); border-top: 3px solid var(--text); box-shadow: 0 18px 50px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(1.5rem); transition: opacity .25s ease, transform .25s ease; }
dialog.nl-popup.is-in { opacity: 1; transform: none; }
.nl-popup__x { position: absolute; top: .25rem; right: .25rem; width: 2.75rem; height: 2.75rem; background: transparent; border: 0; color: var(--text-2);
  font-size: 1.6rem; line-height: 1; cursor: pointer; }
.nl-popup__x:hover { color: var(--text); }
.nl-popup__kicker { margin: 0 0 .3rem; color: var(--text-3); font-size: var(--step--1); font-weight: 650; letter-spacing: .08em; }
.nl-popup h2 { font-size: 1.45rem; margin: 0 0 .3rem; padding-right: 2rem; }
.nl-popup .notify { margin-top: .2rem; padding-top: 0; border-top: 0; }
.nl-popup .notify__title { display: none; }
.nl-popup .notify__text { margin-bottom: .7rem; }
.nl-popup p { color: var(--text-2); }
.nl-popup__no { display: block; margin: .5rem auto 0; padding: .5rem 1rem; min-height: 2.5rem; background: transparent; border: 0; color: var(--text-3);
  font: inherit; font-size: var(--step--1); text-decoration: underline; cursor: pointer; }
.nl-popup__no:hover { color: var(--text); }
.nl-popup__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.nl-popup [hidden] { display: none !important; }
@media (max-width: 520px) {
  dialog.nl-popup { inset: auto 0 0 0; width: 100%; max-width: none; border-left: 0; border-right: 0; border-bottom: 0; }
  .nl-popup__actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { dialog.nl-popup { transition: none; transform: none; } }

/* ================================================================
   Record-shop layer (design 2, draft 6)
   Balance: clean and readable, with boom bap / lo-fi objects as accents:
   paper title strips, a record pulled out of its sleeve, the catalogue as
   record sleeves (a record slides out on hover), label-tape headings,
   paper price sticker, torn paper inserts. Everything sits straight.
   ================================================================ */
:root {
  --torn: polygon(0 6px, 4% 0, 9% 5px, 15% 1px, 22% 6px, 29% 2px, 37% 0, 44% 5px, 52% 1px, 59% 6px, 67% 2px, 74% 0, 82% 5px, 89% 1px, 95% 6px, 100% 2px, 100% calc(100% - 6px), 96% 100%, 91% calc(100% - 5px), 85% calc(100% - 1px), 78% calc(100% - 6px), 71% calc(100% - 2px), 63% 100%, 56% calc(100% - 5px), 48% calc(100% - 1px), 41% calc(100% - 6px), 33% calc(100% - 2px), 26% 100%, 18% calc(100% - 5px), 11% calc(100% - 1px), 5% calc(100% - 6px), 0 calc(100% - 2px));
  --sleeve-ink: #151413;
  /* a pressed record: label, run-out groove, grooves, light reflections */
  --vinyl:
    radial-gradient(circle, #0b0b0a 0 1.4%, transparent 1.5%),
    radial-gradient(circle, var(--paper) 0 17.4%, #a9a397 17.5% 17.8%, transparent 17.9%),
    radial-gradient(circle, transparent 0 17.9%, #0e0e0d 18% 21.5%, transparent 21.6%),
    conic-gradient(from 25deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.13) 18deg, rgba(255,255,255,0) 40deg 180deg, rgba(255,255,255,.1) 198deg, rgba(255,255,255,0) 222deg),
    repeating-radial-gradient(circle, #131312 0 .5%, #1b1a18 .8%, #131312 1.1%),
    radial-gradient(circle, #121211 0 49%, #262422 49.2% 49.8%, transparent 50%);
}
body::after { opacity: .085; }

/* -- page titles on paper strips, one strip per line -- */
.hero h1, .page-head h1 {
  display: inline; color: var(--ink);
  background-color: var(--paper); background-image: var(--speck), var(--fibre); background-size: 300px 300px, 600px 600px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: .04em .14em 0; line-height: 1.04;
  filter: drop-shadow(.04em .04em 0 rgba(0,0,0,.45));  /* one shadow for all lines together, so no line edge shows on the line above */
}
.page-head h1 { font-size: var(--step-5); }
.page-head h1 + .lead, .page-head h1 + p { margin-top: 1.9rem; }
.page-head .crumbs { margin-bottom: 1.25rem; }
.page-head + .product-top { margin-top: 1.5rem; }

/* -- home hero: title left, record pulled out of its sleeve right -- */
.hero { --S: min(30vw, 26rem); padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); border-bottom: 0; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--S) * 1.75); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero .wrap > div { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(3rem, 1rem + 4vw, 6rem); }
.hero h1 + .lead { margin-top: 1.8rem; }
.hero .lead { color: var(--text-2); max-width: 32rem; }
.hero__art { position: relative; z-index: 0; margin: 0; width: var(--S); aspect-ratio: 1; justify-self: start; pointer-events: none; top: auto; right: auto; transform: none; }
.hero .wave { display: none; }
.hero__art::before {                /* the record, half out of the sleeve */
  content: ""; position: absolute; inset: 2%; border-radius: 50%; z-index: 0;
  background: url("/brand/ng-symbol-dark.svg") 50% 40% / 8% auto no-repeat, url("/brand/ng-wordmark-one-line-dark.svg") 50% 58.5% / 19% auto no-repeat, var(--vinyl);  /* label: symbol above the hole, wordmark below */
  box-shadow: 0 18px 36px -14px rgba(0,0,0,.9);
  transform: translateX(76%) rotate(0deg);
}
.hero__art::after {                 /* the sleeve */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-color: var(--sleeve-ink);
  background-image:
    url("/brand/ng-logo.svg"),
    radial-gradient(circle at 50% 50%, transparent 0 41%, rgba(242,240,235,.06) 41.6% 43.2%, transparent 44%),
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 6% 94%, rgba(0,0,0,.35));
  background-repeat: no-repeat; background-size: 46% auto, 100% 100%, 100% 100%; background-position: 9% 91%, center, center;
  box-shadow: inset 0 0 0 1px rgba(242,240,235,.08), inset 0 0 40px rgba(0,0,0,.55), 14px 0 22px -10px rgba(0,0,0,.75), 0 24px 44px -18px rgba(0,0,0,.9);
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero__art::before { animation: pull-out 1.2s cubic-bezier(.2,.7,.2,1) both .15s; }
  @keyframes pull-out { from { transform: translateX(0) rotate(-60deg); } to { transform: translateX(76%) rotate(0deg); } }
}
@media (max-width: 860px) {
  .hero { --S: min(54vw, 19rem); }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero__art { order: -1; margin-bottom: 1rem; }
  .hero h1 { font-size: clamp(2.4rem, 11vw, 4rem); }
}

/* -- catalogue on a torn sheet of paper -- */
.section:has(#catalogue-title) {
  position: relative; background-color: var(--paper); color: var(--ink);
  background-image: var(--speck), var(--fibre), var(--grain); background-size: 300px 300px, 600px 600px, 240px 240px;
  clip-path: var(--torn); margin-block: -1px; padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
.section:has(#catalogue-title) .section-head p { color: var(--ink-2); }
.section:has(#catalogue-title) :focus-visible { outline-color: var(--ink); }

/* -- the categories as record sleeves; on hover a record slides out of the top -- */
.section:has(#catalogue-title) .index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); padding-top: clamp(3rem, 6vw, 5rem); }
.section:has(#catalogue-title) .index li { position: relative; isolation: isolate; margin: 0; }
.section:has(#catalogue-title) .index li::before {
  content: ""; position: absolute; z-index: -1; left: 7%; top: 3%; width: 86%; aspect-ratio: 1; border-radius: 50%;
  background: var(--vinyl); box-shadow: 0 6px 14px -6px rgba(0,0,0,.6);
  transform: translateY(0); transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.section:has(#catalogue-title) .index li:hover::before, .section:has(#catalogue-title) .index li:focus-within::before { transform: translateY(-34%); }
.section:has(#catalogue-title) .index a {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .55rem;
  aspect-ratio: 1; padding: clamp(1rem, 1.6vw, 1.4rem); border: 0 !important; text-decoration: none;
  background-color: var(--sleeve-ink); color: var(--text);
  background-image:
    radial-gradient(circle at 50% 46%, transparent 0 38%, rgba(242,240,235,.07) 38.6% 40.4%, transparent 41%),
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 7% 93%, rgba(0,0,0,.3));
  box-shadow: inset 0 0 0 1px rgba(242,240,235,.07), inset 0 0 44px rgba(0,0,0,.55), 0 16px 30px -16px rgba(0,0,0,.8);
}
.section:has(#catalogue-title) .index a::before { display: none; }
.section:has(#catalogue-title) .index__name { color: var(--text); font-size: clamp(1.7rem, .9rem + 1.9vw, 2.75rem); line-height: .88; }
.section:has(#catalogue-title) .index__desc { color: var(--text-2); font-size: 1rem; line-height: 1.45; margin: 0; max-width: none; }
.section:has(#catalogue-title) .index__state { position: absolute; top: clamp(.9rem, 1.5vw, 1.25rem); left: clamp(1rem, 1.6vw, 1.4rem); right: auto;
  display: flex; flex-direction: row; align-items: center; gap: .6rem; color: var(--text-2); font-size: .95rem; text-align: left; }
.section:has(#catalogue-title) .index a:hover .index__desc { color: var(--text); }
@media (max-width: 1100px) { .section:has(#catalogue-title) .index { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(3rem, 7vw, 4.5rem); } }
@media (max-width: 560px) {
  .section:has(#catalogue-title) .index { grid-template-columns: minmax(0, 1fr); }
  .section:has(#catalogue-title) .index a { aspect-ratio: auto; min-height: 16rem; }
  .section:has(#catalogue-title) .index li::before { width: 60%; left: 20%; }
}
@media (prefers-reduced-motion: reduce) { .section:has(#catalogue-title) .index li::before { transition: none; } }

/* -- status: a small printed sticker, straight -- */
.index__state strong, .feature .status, .buy-note strong {
  display: inline-block; font: 800 .95rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em;
  background: var(--paper); color: var(--ink); padding: .4rem .55rem .32rem; border: 0;
}
.feature .status::before { display: none; }
.feature .status { display: table; margin-top: .75rem; }  /* status sits under the price sticker, as in the buy box */
.buy-note strong { display: table; margin: .2rem 0 .7rem; }

/* -- screenshots: clean, framed like a print, no tape -- */
.feature__shot { border: 0; padding: .5rem; background: var(--sleeve-2); box-shadow: inset 0 0 0 1px var(--rule), 0 22px 44px -22px rgba(0,0,0,.9); }
.gallery__open { border: 0; background: var(--sleeve-2); box-shadow: inset 0 0 0 1px var(--rule); }

/* -- price sticker: straight -- */
.feature .price, .buybox .price { transform: none; }

/* -- manifesto insert: torn edges, all statements alike -- */
.insert { clip-path: var(--torn); margin-block: 2rem; }
.manifesto__row { border-bottom: 0 !important; border-top: 0 !important; padding-block: clamp(1rem, 2.4vw, 2rem); align-items: center; }
.manifesto__row + .manifesto__row { border-top: 2px dashed rgba(21,20,19,.35) !important; }
.manifesto .display { transform: none !important; }

/* -- section headings as embossed label tape -- */
.section-head h2, .features__head h2, .spec > h2, .empty h2, .paths h2, .help-card h2, .prose h2, .guide-body h2 {
  display: inline-block; max-width: 100%; font-family: var(--body); font-stretch: 112%; font-weight: 700; text-transform: uppercase;
  letter-spacing: .11em; line-height: 1.5; color: var(--paper);
  background: #262422; padding: .3em .6em .26em; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.45), 0 2px 3px rgba(0,0,0,.45);
  text-shadow: 0 -1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.16);
}
.section-head h2, .features__head h2 { font-size: clamp(1.1rem, .9rem + .8vw, 1.6rem); }
.spec > h2 { font-size: .95rem; align-self: start; justify-self: start; }
.prose h2, .guide-body h2, .paths h2, .help-card h2, .empty h2 { font-size: 1rem; }
.section-head, .features__head { justify-items: start; }
.section-head h2 + p, .features__head h2 + p { margin-top: 1rem; }
.help-card h2 a { text-decoration: none; }
.section:has(#catalogue-title) .section-head h2 { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- product page: liner notes
   Everything below gallery and buy box is printed on paper, like the liner notes of a record. */
.buybox { border-top: 0; box-shadow: inset 0 0 0 1px var(--rule); }
.liner { position: relative; background-color: var(--paper); color: var(--ink);
  background-image: var(--speck), var(--fibre), var(--grain); background-size: 300px 300px, 600px 600px, 240px 240px;
  clip-path: var(--torn); padding-block: clamp(2.5rem, 4vw, 4rem) clamp(3rem, 5vw, 5rem); }
.liner ::selection { background: var(--ink); color: var(--paper); }
.liner :focus-visible { outline-color: var(--ink); }
.liner a { color: var(--ink); }
.liner p, .liner li, .liner dd, .liner td { color: var(--ink-2); }
.liner .spec__body > p:first-child, .liner .features__head p { color: var(--ink); }
.liner h3, .liner dt, .liner th, .liner strong, .liner code, .liner td.yes { color: var(--ink); }
.liner .features, .liner .spec { border-top: 1.5px solid rgba(21,20,19,.28); }
.liner .features { border-top: 0; padding-top: clamp(1rem, 2vw, 2rem); }
.liner .feat { border-top: 1.5px solid rgba(21,20,19,.28); }
.liner .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .liner .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .liner .feat-grid { grid-template-columns: minmax(0, 1fr); } }
.liner .features__note { color: var(--ink-2); }
.liner .spec > h2, .liner .features__head h2 { background: var(--ink); color: var(--paper); }
.liner dl.facts dt::after { color: var(--ink-2); opacity: .7; }
.liner .modules > div { border-color: rgba(21,20,19,.28); }
.liner th, .liner td { border-color: rgba(21,20,19,.25); }
.liner thead th { border-bottom-color: var(--ink); }
.liner .callout { border-color: var(--ink-2); color: var(--ink); }
.liner .callout p { color: var(--ink); }

.liner dl.facts dt { color: var(--ink); }
.liner dl.facts dd { color: var(--ink-2); }

/* ================================================================
   Draft 7: home sleeves with character
   Worn record jackets (ring wear, rubbed edges, stamped ink with
   small gaps), a bigger paper or ink label with the logo in the
   upper half, a printed ring around the label. Everything straight.
   ================================================================ */
:root {
  --wear-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.81 0 0 0 0 0.79 0 0 0 0 0.75 0 0 0 -24 7.4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23w)'/%3E%3C/svg%3E");
  --wear-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.082 0 0 0 0 0.078 0 0 0 0 0.075 0 0 0 -24 7.4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23w)'/%3E%3C/svg%3E");
  --grooves:
    radial-gradient(circle, transparent 0 22.4%, #0e0e0d 22.5% 26.5%, transparent 26.6%),
    conic-gradient(from 25deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.13) 18deg, rgba(255,255,255,0) 40deg 180deg, rgba(255,255,255,.1) 198deg, rgba(255,255,255,0) 222deg),
    repeating-radial-gradient(circle, #131312 0 .5%, #1b1a18 .8%, #131312 1.1%),
    radial-gradient(circle, #121211 0 49%, #262422 49.2% 49.8%, transparent 50%);
  --spindle: radial-gradient(circle, #0b0b0a 0 1.4%, transparent 1.5%);
  /* label printed in ink, logo in paper */
  --record-ink:
    url("/brand/ng-logo.svg") 50% 42.1% / 18% auto no-repeat,
    var(--spindle),
    radial-gradient(circle, transparent 0 20.2%, rgba(216,212,202,.3) 20.3% 20.5%, transparent 20.6%),
    radial-gradient(circle, #1d1c1a 0 22%, #3a3734 22.1% 22.4%, transparent 22.5%),
    var(--grooves);
  /* label printed on paper, logo in ink */
  --record-paper:
    url("/brand/ng-logo-dark.svg") 50% 42.1% / 18% auto no-repeat,
    var(--spindle),
    radial-gradient(circle, transparent 0 20.2%, rgba(21,20,19,.35) 20.3% 20.5%, transparent 20.6%),
    radial-gradient(circle, var(--paper) 0 22%, #a9a397 22.1% 22.4%, transparent 22.5%),
    var(--grooves);
  --jacket-shadow: 14px 0 22px -10px rgba(0,0,0,.75), 0 24px 44px -18px rgba(0,0,0,.9);
}

/* hero: the record sits further in, the label stays fully visible */
.hero__art::before { background: var(--record-ink); transform: translateX(72%); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pull-out { from { transform: translateX(0) rotate(-60deg); } to { transform: translateX(72%) rotate(0deg); } }
}

/* the jacket: worn paper jacket, logo stamped top left */
.hero__art::after {
  background-color: #cfcabe;
  background-image:
    var(--wear-paper),
    url("/brand/ng-logo-dark.svg"),
    radial-gradient(circle at 54% 57%, transparent 0 34.5%, rgba(70,58,44,.2) 35.5% 37.5%, transparent 39%),
    radial-gradient(circle at 56% 55%, transparent 0 35%, rgba(70,58,44,.09) 36% 38.5%, transparent 40%),
    linear-gradient(90deg, rgba(60,50,40,.18), transparent 4% 96%, rgba(40,32,24,.32)),
    linear-gradient(rgba(60,50,40,.14), transparent 4% 95%, rgba(60,50,40,.2)),
    var(--speck), var(--fibre), var(--grain);
  background-size: 300px 300px, 46% auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 300px 300px, 600px 600px, 240px 240px;
  background-position: 0 0, 8% 8%, center, center, center, center, 0 0, 0 0, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat;
  box-shadow: inset 0 0 0 1px rgba(40,32,24,.25), inset 0 0 30px rgba(60,48,36,.28), var(--jacket-shadow);
  border-radius: 2px 3px 3px 2px;
}

/* catalogue: the black jackets get the same wear; the record inside has the paper label */
.section:has(#catalogue-title) .index li::before { background: var(--record-paper); }
.section:has(#catalogue-title) .index a {
  background-image:
    var(--wear-ink),
    radial-gradient(circle at 54% 44%, transparent 0 35%, rgba(242,240,235,.08) 36% 38%, transparent 39.5%),
    radial-gradient(circle at 56% 42%, transparent 0 35.5%, rgba(242,240,235,.045) 36.5% 39%, transparent 40.5%),
    linear-gradient(90deg, rgba(242,240,235,.06), transparent 3% 97%, rgba(0,0,0,.35)),
    linear-gradient(rgba(242,240,235,.05), transparent 3% 96%, rgba(242,240,235,.04));
  background-size: 300px 300px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(242,240,235,.13), inset 0 0 5px rgba(242,240,235,.07), inset 0 0 44px rgba(0,0,0,.55), 0 16px 30px -16px rgba(0,0,0,.8);
}

/* -- draft 8: layout fixes -- */
/* "Buy once, keep it": same two-column layout as the manifesto rows, less empty space */
.section:has(#about-title) { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.section:has(#about-title) .section-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: center !important; max-width: none; margin-bottom: 0; }
.section:has(#about-title) .section-head > div { margin-top: 0; }
@media (max-width: 760px) { .section:has(#about-title) .section-head { grid-template-columns: minmax(0, 1fr); } }
/* catalogue: less air between the intro and the jackets (still room for the record on hover) */
.section:has(#catalogue-title) .section-head { margin-bottom: 0; }
/* product gallery: ten thumbnails as two rows of five, no single one left over */
.gallery__thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.gallery__thumbs li { display: flex; }
.gallery__thumbs button { font-size: .875rem; height: 100%; }
@media (max-width: 520px) { .gallery__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery__thumbs button { font-size: 1rem; } }
/* product page: shorter gap between the liner notes and the footer */
.liner + .section--tight { padding-block: clamp(1.25rem, 2.5vw, 2.25rem); }