/* canonical @layer order is declared in reset.css (loaded first) */

@layer structure {
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    font-optical-sizing: auto;
  }

  /* layout primitives (local tunables carry fallbacks → contract tokens) */
  .stack > * + * { margin-block-start: var(--flow-space, var(--space-m)); }
  .flow  > * + * { margin-block-start: var(--flow-space, var(--space-m)); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-s)); align-items: center; }
  .center  { margin-inline: auto; max-inline-size: var(--measure); padding-inline: var(--gutter); }
  .grid    { display: grid; gap: var(--grid-gap, var(--space-l));
             grid-template-columns: repeat(auto-fit, minmax(min(var(--col, 18rem), 100%), 1fr)); }
  .sidebar { display: flex; flex-wrap: wrap; gap: var(--space-l); }
  .sidebar > :first-child { flex-basis: var(--sidebar-main, 22rem); flex-grow: 1; }
  .sidebar > :last-child  { flex-grow: 999; min-inline-size: var(--sidebar-min, 60%); }

  /* typography */
  h1 { font-family: var(--font-display); font-size: var(--step-4); letter-spacing: -0.02em; }
  h2 { font-family: var(--font-display); font-size: var(--step-2); letter-spacing: -0.01em; }
  h3 { font-size: var(--step-1); }
  a  { color: var(--link); text-underline-offset: 0.15em; }
  .eyebrow { color: var(--text-muted); font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; }
  .lede { font-size: var(--step-1); color: var(--text-muted); max-inline-size: var(--measure); }
  .prose { max-inline-size: var(--measure); }
  .prose :is(h2, h3) { margin-block-start: var(--space-l); }
  .prose a { color: var(--accent); }
  code, .code { font-family: var(--font-mono); font-size: 0.9em; }

  /* site chrome */
  .site-nav { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: baseline;
              padding: var(--space-m) var(--gutter); border-block-end: var(--border-width) solid var(--border); }
  .site-nav__home { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
                    text-decoration: none; text-transform: lowercase; margin-inline-end: auto; }
  .site-nav a { color: var(--text-muted); text-decoration: none; }
  .site-nav a:hover { color: var(--text); }
  /* nav-item hover: refined pill highlight + animated underline (brand excluded) */
  .site-nav a:not(.site-nav__home) { position: relative; padding: var(--space-3xs) var(--space-s); margin-block: calc(-1 * var(--space-3xs)); border-radius: var(--radius); transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
  .site-nav a:not(.site-nav__home)::after { content: ""; position: absolute; inset-inline: var(--space-s); inset-block-end: 0.15rem; block-size: 0.12rem; border-radius: var(--radius-sm); background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform var(--dur) var(--ease); }
  .site-nav a:not(.site-nav__home):hover { background: color-mix(in oklab, var(--accent) 14%, transparent); }
  .site-nav a:not(.site-nav__home):hover::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) { .site-nav a:not(.site-nav__home)::after { transition-duration: 0s; } }
  .site-nav__logo { display: block; block-size: 2rem; inline-size: auto; }
  .site-nav__links { display: contents; }   /* transparent on desktop: links stay flex children (brand left, links right) */
  /* ── site footer (config-driven; degrades to a © line) ──────────────── */
  .site-footer {
    position: relative;
    margin-block-start: var(--space-3xl);
    padding: var(--space-2xl) var(--gutter) var(--space-xl);
    color: var(--text-muted);
    border-block-start: var(--border-width) solid var(--border);
    background:
      linear-gradient(to bottom, color-mix(in oklab, var(--accent) 9%, transparent), transparent var(--space-2xl)),
      var(--glass-bg, color-mix(in oklab, var(--surface) 60%, transparent));
    backdrop-filter: blur(var(--glass-blur, 0.75rem));
  }
  .site-footer::before {
    content: ""; position: absolute; inset-block-start: calc(-1 * var(--border-width)); inset-inline: 0;
    block-size: 0.12rem; background: linear-gradient(to right, transparent, var(--accent), transparent); opacity: 0.7;
  }
  .site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-2xl); max-inline-size: 82rem; margin-inline: auto; padding-block-end: var(--space-xl); }
  .site-footer__brand { flex: 1 1 16rem; min-inline-size: 14rem; }
  .site-footer__mark { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--text); text-decoration: none; text-transform: lowercase; }
  .site-footer__logo { display: block; block-size: 2rem; inline-size: auto; }
  .site-footer__tagline { margin-block-start: var(--space-s); max-inline-size: 32ch; color: var(--text-muted); text-wrap: balance; }
  .site-footer__cols { flex: 3 1 28rem; display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
  .site-footer__head { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text); margin-block-end: var(--space-s); }
  .site-footer__list { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); }
  .site-footer__link { position: relative; display: inline-block; padding: var(--space-3xs) var(--space-xs); margin-inline-start: calc(-1 * var(--space-xs)); color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
  .site-footer__link::after { content: ""; position: absolute; inset-inline: var(--space-xs); inset-block-end: 0.1rem; block-size: 0.1rem; border-radius: var(--radius-sm); background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
  .site-footer__link:hover { color: var(--text); background: color-mix(in oklab, var(--accent) 14%, transparent); }
  .site-footer__link:hover::after { transform: scaleX(1); }
  .site-footer__ext { color: var(--accent); }
  .site-footer__base { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-l); align-items: baseline; justify-content: space-between; max-inline-size: 82rem; margin-inline: auto; padding-block-start: var(--space-l); border-block-start: var(--border-width) solid var(--border); font-size: var(--step--1); }
  .site-footer__copy { color: var(--text); }
  .site-footer__legal { color: var(--text-muted); }
  @media (prefers-reduced-motion: reduce) { .site-footer__link::after { transition-duration: 0s; } }
  @media (max-width: 48em) { .site-footer__cols { flex-basis: 100%; } }
  @media (max-width: 24em) { .site-footer__cols { grid-template-columns: 1fr; } .site-footer__base { flex-direction: column; } }
  .page { padding-block-start: var(--space-2xl); }
  .page--home > header, .page--index > header { margin-block-end: var(--space-l); }
  .page--home { max-inline-size: min(100%, 72rem); }
  .home-logo { display: block; inline-size: min(100%, 26rem); block-size: auto; }
  .page--home > header h1 { text-transform: lowercase; }

  /* pills / links */
  .pill { display: inline-flex; gap: 0.4em; align-items: center; padding: var(--space-2xs) var(--space-s);
          border: var(--border-width) solid color-mix(in oklab, var(--accent) 45%, transparent);
          border-radius: 100vmax; color: var(--text); text-decoration: none;
          transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
  .pill:hover { background: color-mix(in oklab, var(--accent) 14%, transparent); border-color: var(--accent); }
  .pill--buy { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

  /* release */
  .release { align-items: start; }
  .release__art { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
  .byline { color: var(--text-muted); }
  .tracklist { margin-block-start: var(--space-xl); }
  .track { padding-block: var(--space-s); border-block-end: var(--border-width) solid var(--border); }
  .track__no { inline-size: 2ch; color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .track__dur { margin-inline-start: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .track__canvas { flex: 0 0 auto; inline-size: 3.25rem; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: var(--shadow-1); }

  /* blocks */
  .hero__img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); }
  .pullquote { border-inline-start: 0.2rem solid var(--accent); padding-inline-start: var(--space-m); font-size: var(--step-1); font-style: italic; }
  .figure figcaption, .pullquote figcaption { margin-block-start: var(--space-2xs); color: var(--text-muted); font-size: var(--step--1); }
  .code { background: var(--surface-2); padding: var(--space-s) var(--space-m); border-radius: var(--radius); overflow-x: auto; }

  /* review */
  .rating { color: var(--accent); font-size: var(--step-2); font-weight: 700; }
  .proscons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: var(--space-l); align-items: start; }
  .pros .h, .cons .h { color: var(--text-muted); font-weight: 700; text-transform: uppercase; font-size: var(--step--1); letter-spacing: 0.08em; }
  .pros li, .cons li { padding-block: var(--space-3xs); }
  .specs { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2xs) var(--space-m); }
  .specs dt { color: var(--text-muted); }
  /* review / editorial / profile polish */
  .card-soft { background: color-mix(in oklab, var(--surface) 70%, transparent); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); padding: var(--space-m) var(--space-l); }
  .rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs); }
  .rating__stars { color: var(--accent); font-size: var(--step-2); letter-spacing: 0.12em; }
  .rating__num { font-size: var(--step-1); font-weight: 700; }
  .rating__max { color: var(--text-muted); }
  .pros, .cons { list-style: none; display: grid; gap: var(--space-3xs); }
  .pros { border-block-start: 0.18rem solid color-mix(in oklab, var(--accent) 65%, transparent); }
  .cons { border-block-start: 0.18rem solid color-mix(in oklab, var(--text-muted) 55%, transparent); }
  .tags { list-style: none; padding: 0; }
  .tag { font-size: var(--step--1); color: var(--text-muted); padding: var(--space-3xs) var(--space-s); border: var(--border-width) solid var(--border); border-radius: 99rem; }
  .profile-links { margin-block-start: var(--space-l); }

  /* ── long-form editorial: breakout lane + feature blocks ───────────── */
  .article-body {
    display: grid;
    grid-template-columns:
      [bleed-start] minmax(var(--gutter), 1fr)
      [wide-start] minmax(0, 7rem)
      [text-start] min(var(--measure), 100% - 2 * var(--gutter))
      [text-end] minmax(0, 7rem)
      [wide-end] minmax(var(--gutter), 1fr) [bleed-end];
  }
  .article-body > * { grid-column: text-start / text-end; }
  .article-body > .is-wide { grid-column: wide-start / wide-end; }
  .article-body > .is-bleed { grid-column: bleed-start / bleed-end; }
  .article-body > .prose:first-of-type > p:first-child::first-letter {
    float: inline-start; font-family: var(--font-display); font-size: var(--step-4);
    line-height: 0.8; padding-inline-end: var(--space-xs); padding-block-start: var(--space-3xs); color: var(--accent);
  }

  /* figure — captioned, breakout-capable */
  .figure-x { margin-block: var(--space-xl); }
  .figure-x__img { inline-size: 100%; aspect-ratio: var(--fig-ratio, 16 / 9); object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
  .figure-x.is-bleed .figure-x__img { border-radius: 0; }
  .figure-x__cap { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); align-items: baseline; justify-content: space-between; max-inline-size: var(--measure); margin-inline: auto; margin-block-start: var(--space-s); padding-inline: var(--gutter); color: var(--text-muted); font-size: var(--step--1); }
  .figure-x__credit { text-transform: uppercase; letter-spacing: 0.08em; }

  /* signal chain */
  .chain { margin-block: var(--space-2xl); }
  .chain__eyebrow { color: var(--accent); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; margin-block-end: var(--space-s); }
  .chain__flow { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); list-style: none; padding: 0; }
  .chain__step { display: grid; gap: var(--space-3xs); padding: var(--space-m); background: color-mix(in oklab, var(--surface) 70%, transparent); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); }
  .chain__no { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--step--1); }
  .chain__name { font-family: var(--font-display); font-size: var(--step-1); }
  .chain__detail { color: var(--text-muted); font-size: var(--step--1); }
  .chain__step[data-role="source"] { border-inline-start: 0.2rem solid color-mix(in oklab, var(--accent) 70%, var(--border)); }
  .chain__step[data-role="out"] { border-inline-start: 0.2rem solid color-mix(in oklab, var(--text) 40%, var(--border)); }

  /* by-the-numbers stat band */
  .statband { margin-block: var(--space-3xl); padding-block: var(--space-2xl); border-block: var(--border-width) solid var(--border); background: linear-gradient(color-mix(in oklab, var(--accent) 7%, transparent), transparent); }
  .statband__intro { max-inline-size: var(--measure); margin-inline: auto; padding-inline: var(--gutter); margin-block-end: var(--space-l); color: var(--text-muted); text-align: center; }
  .statband__grid { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); max-inline-size: 82rem; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
  .statband__val { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
  .statband__unit { font-size: var(--step-1); color: var(--text-muted); }
  .statband__lab { margin-block-start: var(--space-xs); color: var(--text-muted); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; }
  .statband__note { color: var(--text-muted); font-size: var(--step--1); }

  /* section divider */
  .divider { margin-block-start: var(--space-3xl); padding-block-start: var(--space-l); border-block-start: var(--border-width) solid var(--border); text-align: center; }
  .divider__eyebrow { color: var(--accent); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.16em; }
  .divider__title { font-family: var(--font-display); font-size: var(--step-3); letter-spacing: -0.02em; margin-block-start: var(--space-xs); }
  .divider__dek { max-inline-size: 46ch; margin-inline: auto; margin-block-start: var(--space-s); color: var(--text-muted); font-size: var(--step-1); text-wrap: balance; }

  /* section breakdown — annotated arrangement timeline */
  .breakdown { margin-block: var(--space-2xl); }
  .breakdown__eyebrow { color: var(--accent); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; margin-block-end: var(--space-s); }
  .breakdown__list { list-style: none; padding: 0; display: grid; gap: var(--space-s); }
  .breakdown__row { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-m); padding-inline-start: var(--space-m); border-inline-start: 0.15rem solid color-mix(in oklab, var(--accent) 40%, var(--border)); }
  .breakdown__at { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); }
  .breakdown__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-s); }
  .breakdown__section { font-family: var(--font-display); font-size: var(--step-1); }
  .breakdown__meter { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); padding: var(--space-3xs) var(--space-2xs); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); }
  .breakdown__note { color: var(--text-muted); flex-basis: 100%; }

  /* A/B compare — two players side by side */
  .abcompare { margin-block: var(--space-2xl); }
  .abcompare__prompt { margin-block-end: var(--space-m); color: var(--text-muted); }
  .abcompare__grid { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
  .abcompare__side { display: grid; gap: var(--space-s); padding: var(--space-m); background: color-mix(in oklab, var(--surface) 70%, transparent); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); }
  .abcompare__label { font-family: var(--font-display); font-size: var(--step-1); }

  /* date archive — month-grouped index timeline */
  .index-group + .index-group { margin-block-start: var(--space-2xl); }
  .index-group__month { font-family: var(--font-display); font-size: var(--step-2); color: var(--text-muted); padding-block-end: var(--space-s); border-block-end: var(--border-width) solid var(--border); }

  /* media switcher (facade-first) */
  .media { margin-block: var(--space-m); }
  .media__stage { display: grid; place-items: center; min-block-size: 9rem; overflow: hidden;
                  background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); }
  .media__stage--links { min-block-size: auto; padding: var(--space-m); }
  .media__stage iframe, .embed-live iframe { inline-size: 100%; display: block; }
  .media__play { display: inline-flex; gap: 0.5em; align-items: center; padding: var(--space-s) var(--space-l);
                 border-radius: 100vmax; background: var(--accent); color: var(--on-accent); font-weight: 600; }
  .media__note { color: var(--text-muted); }
  .media__switch { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block-start: var(--space-xs); }
  .media__option { padding: var(--space-2xs) var(--space-s); border: var(--border-width) solid var(--border);
                   border-radius: 100vmax; color: var(--text-muted); font-size: var(--step--1); text-decoration: none; }
  .media__option:hover { color: var(--text); border-color: var(--accent); }
  .media__option[aria-pressed="true"] { color: var(--text); border-color: var(--accent);
                                        background: color-mix(in oklab, var(--accent) 16%, transparent); }
  .embed-facade { display: grid; place-items: center; gap: var(--space-2xs); inline-size: 100%; min-block-size: 8rem;
                  background: var(--surface); color: var(--text); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); }
  .embed-facade__play { font-size: var(--step-3); color: var(--accent); }

  /* bento layout — tile mosaic; the card with imagery becomes the hero (2×2) */
  [data-layout="bento"] .cards {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    grid-auto-rows: minmax(12rem, auto);
    grid-auto-flow: row dense;
  }
  /* hero the card with imagery — only when there are ≥4 cards to balance it */
  [data-layout="bento"] .cards:has(.card:nth-child(4)) .card--poster { grid-column: span 2; grid-row: span 2; }

  /* collection: cards + related */
  .cards { --col: 16rem; }
  .card { position: relative; background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
          transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .card:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-2); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
  .card__link { display: flex; flex-direction: column; block-size: 100%; color: inherit; text-decoration: none; }
  .card__bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: 0; }
  .card__body { position: relative; z-index: 1; display: grid; gap: var(--space-2xs); padding: var(--space-m); margin-block-start: auto; }
  .card__type { color: var(--accent); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; }
  .card__title { font-size: var(--step-1); }
  .card__summary { color: var(--text-muted); }
  /* poster card: a page/cover image fills the tile; text floats over a bottom scrim */
  .card--poster { min-block-size: 15rem; }
  .card--poster .card__body { padding-block-start: var(--space-2xl); background: linear-gradient(transparent, color-mix(in oklab, var(--bg) 55%, transparent) 45%, color-mix(in oklab, var(--bg) 92%, transparent)); }
  .card--poster .card__summary { color: color-mix(in oklab, var(--text) 80%, transparent); }
  .related { margin-block-start: var(--space-2xl); padding-block-start: var(--space-l); border-block-start: var(--border-width) solid var(--border); }

  :focus-visible { outline: 0.15rem solid var(--focus-ring); outline-offset: 0.15rem; }

  @media (max-width: 48em) {
    [data-layout="bento"] .cards { grid-template-columns: 1fr; grid-auto-rows: auto; }
    [data-layout="bento"] .cards:has(.card:nth-child(4)) .card--poster { grid-column: auto; grid-row: auto; }
    /* upper nav: brand over a single-row, centered, scrollable link rail — never wraps, no hamburger */
    .site-nav { flex-direction: column; align-items: center; gap: var(--space-s); }
    .site-nav__home { margin-inline-end: 0; }
    .site-nav__links { display: flex; flex-wrap: nowrap; justify-content: safe center; gap: var(--space-xs); inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
    .site-nav__links::-webkit-scrollbar { display: none; }
    .site-nav a:not(.site-nav__home) { flex: 0 0 auto; white-space: nowrap; padding: var(--space-xs) var(--space-s); margin-block: 0; }
  }

  /* ── tablet bento band (48–64em): 2 cols, wide hero (not 2×2) ────── */
  @media (min-width: 48.0625em) and (max-width: 64em) {
    [data-layout="bento"] .cards { grid-template-columns: repeat(2, 1fr); }
    [data-layout="bento"] .cards:has(.card:nth-child(4)) .card--poster { grid-column: span 2; grid-row: span 1; }
  }

  /* ── phone pass (≤30em) ───────────────────────────────────────────── */
  @media (max-width: 30em) {
    /* tighter posters + page top */
    .card--poster { min-block-size: 11rem; }
    .page { padding-block-start: var(--space-xl); }

    /* footer: single column, comfy tap targets, trimmed chrome */
    .site-footer { margin-block-start: var(--space-2xl); padding-block-start: var(--space-xl); }
    .site-footer__inner { gap: var(--space-xl); }
    .site-footer__cols { grid-template-columns: 1fr; gap: var(--space-l); }
    .site-footer__link { padding-block: var(--space-xs); }

    /* primary CTAs: fatter tap targets */
    .pill { padding: var(--space-xs) var(--space-m); }
    .streaming.cluster, .profile-links.cluster { gap: var(--space-xs); }

    /* review specs stack */
    .specs { grid-template-columns: 1fr; gap: var(--space-2xs); }
    .specs dt { margin-block-start: var(--space-xs); }

    /* editorial: smaller drop cap, stacked breakdown rows, trimmed stat band */
    .article-body > .prose:first-of-type > p:first-child::first-letter { font-size: var(--step-3); padding-inline-end: var(--space-2xs); }
    .breakdown__row { grid-template-columns: 1fr; gap: var(--space-2xs); padding-inline-start: var(--space-s); }
    .breakdown__at { font-size: var(--step--1); }
    .statband { margin-block: var(--space-2xl); padding-block: var(--space-xl); }
    .statband__grid { gap: var(--space-l); }
  }

  /* ── profile: magazine hero (portrait masthead + facts) ─────────────── */
  .profile-hero { max-inline-size: var(--measure); margin-inline: auto; padding-inline: var(--gutter); margin-block-end: var(--space-2xl); }
  .profile-hero--portrait { display: grid; gap: var(--space-xl); align-items: center; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); max-inline-size: 72rem; }
  .profile-hero__portrait { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
  .profile-hero__name { font-size: clamp(var(--step-4), 8vw, 5rem); line-height: 0.95; letter-spacing: -0.02em; text-wrap: balance; }
  .profile-facts { display: grid; gap: var(--space-2xs) var(--space-m); grid-template-columns: max-content 1fr; margin-block-start: var(--space-m); font-size: var(--step--1); }
  .profile-facts__row { display: contents; }
  .profile-facts dt { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
  .profile-facts dd { margin: 0; }
  @media (max-width: 48em) { .profile-hero--portrait { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-l); } }
  @media (max-width: 30em) { .profile-hero--portrait { grid-template-columns: 1fr; gap: var(--space-l); text-align: center; } .profile-hero__portrait { inline-size: min(100%, 16rem); margin-inline: auto; } .profile-facts { justify-content: center; } }
}

@layer type-accents {
  [data-type="release"]   { --accent: var(--accent-base); }
  [data-type="editorial"] { --accent: oklch(from var(--accent-base) l c calc(h + 180)); }
  [data-type="review"]    { --accent: oklch(from var(--accent-base) l c calc(h + 40)); }
  [data-type="profile"]   { --accent: oklch(from var(--accent-base) l c calc(h - 50)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}