/* ============================================================
   PAYAL AGARWAL — site.css
   Light-default theme override on the lbcom framework.
   Accent: muted ochre. Background: warm off-white.
   ============================================================ */

@layer overrides {

  /* ── Default to LIGHT theme. ──
     Framework's :root tokens are dark-default; we override so that
     :root resolves to the LIGHT primitive palette by default and
     [data-theme=dark] flips us back to the original dark primitives.
     This avoids the white-cube flicker on first load. */
  :root {
    /* warm off-white background, warm-black text */
    --_gray-950: oklch(97.2% .005 75);  /* page bg — warm off-white */
    --_gray-900: oklch(95.5% .006 75);  /* surface */
    --_gray-850: oklch(93.2% .006 70);  /* surface 2 */
    /* borders darkened from L86.5/L78 → L63/L56 so UI components
       (form fields, chips, input frames) clear WCAG 1.4.11's 3:1
       non-text contrast against the warm off-white page bg. */
    --_gray-800: oklch(63%   .008 65);  /* border  — 3.23:1 on bg */
    --_gray-750: oklch(56%   .009 60);  /* border 2 — 4.30:1 on bg */
    --_warm-100: oklch(18%   .005 35);  /* primary text — warm-black */
    --_warm-300: oklch(27%   .006 35);  /* body text */
    --_warm-500: oklch(42%   .006 32);  /* secondary */
    --_warm-600: oklch(52%   .005 30);  /* tertiary */
    /* muted ochre accent — darkened from L60 → L52 so it clears 4.5:1
       both as foreground on the warm bg (links/labels/eyebrows) and
       as background for white-text buttons (.btn--p, .nav__cta).
       Hue + chroma unchanged: still the same muted ochre. */
    --_amber-400: oklch(52% .105 70);
  }

  /* ── Dark override (user-toggled). ──
     Restores the framework's dark palette + a warmer dark accent
     so the painting still feels "framed" in either mode. */
  [data-theme=dark] {
    color-scheme: dark light;
    --_gray-950: oklch(15% .003 35);
    --_gray-900: oklch(18.5% .004 35);
    --_gray-850: oklch(22% .005 35);
    /* borders lightened from L28/L34 → L51/L55 so UI components clear
       3:1 non-text contrast against the dark page bg. */
    --_gray-800: oklch(51% .005 35);    /* border  — 3.42:1 on bg, 3.10:1 on sur */
    --_gray-750: oklch(55% .006 35);    /* border 2 — 3.94:1 on bg */
    --_warm-100: oklch(94% .008 70);
    --_warm-300: oklch(84% .006 65);
    --_warm-500: oklch(70% .005 55);
    --_warm-600: oklch(62% .005 45);
    --_amber-400: oklch(68% .11 70);
  }

  /* ── Nav: light-mode brand. ──
     Framework hardcodes a dark backdrop on .nav; override for light. */
  .nav {
    background: oklch(97% .005 75 / .85);
    border-bottom: 1px solid var(--bdr);
    transition: background-color .35s ease, border-color .35s ease;
  }
  [data-theme=dark] .nav { background: oklch(15% .003 35 / .85); }

  /* ── Brand wordmark in nav ── */
  .nav__name { letter-spacing: .005em; transition: color .35s ease, text-shadow .35s ease; }
  .nav__sub  { color: var(--ac); transition: color .35s ease, text-shadow .35s ease; }
  .nav__link { transition: color var(--dur) var(--ease), text-shadow .35s ease; }
  .nav__ham span { transition: background var(--dur) var(--ease); }

  /* ── Nav over hero (homepage, until hero scrolls past) ──
     Transparent backdrop, light text, text-shadow as belt-and-suspenders
     against bright zones in the blurred painting behind. */
  .nav.nav--over-hero {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav.nav--over-hero .nav__name {
    color: rgba(255,255,255,.97);
    text-shadow: 0 1px 3px rgba(0,0,0,.55);
  }
  .nav.nav--over-hero .nav__sub {
    color: rgba(255,217,170,.92);
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
  }
  .nav.nav--over-hero .nav__link {
    color: rgba(255,255,255,.88);
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
  }
  .nav.nav--over-hero .nav__link:hover,
  .nav.nav--over-hero .nav__link[aria-current] { color: #fff; }
  .nav.nav--over-hero .nav__link[aria-current]:after {
    background: oklch(82% .09 70);
  }
  .nav.nav--over-hero .nav__ham span { background: #fff; }

  /* ============================================================
     ARTISTE-SPECIFIC COMPONENTS
     ============================================================ */

  /* ── Full-bleed hero painting (home page) ──
     Pattern: painting is always shown CONTAINED (no crop, ever). A blurred,
     amplified, darkened copy of the same image fills the rest of the viewport
     as the backdrop. Looks full-bleed at any aspect ratio. */
  .art-hero {
    position: relative;
    margin-top: calc(var(--nav) * -1);
    min-height: 100svh;
    padding-top: calc(var(--nav) + var(--s5));
    padding-bottom: var(--s6);
    overflow: hidden;
    background: #14110e;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .art-hero__bg {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    background-size: cover;
    background-position: center;
    filter: blur(52px) brightness(.42) saturate(1.1);
    z-index: 0;
    transform: scale(1.05);
  }
  /* Top + bottom darker bands keep nav text and caption legible no matter
     what the painting's luminosity does in those zones. Middle stays cleaner
     so the contained painting itself dominates. */
  .art-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.18) 18%,
      rgba(0,0,0,.18) 62%,
      rgba(0,0,0,.58) 100%);
  }
  .art-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s5);
    padding-inline: var(--s4);
    max-width: var(--wrap);
    width: 100%;
  }
  .art-hero__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(68svh, 780px);
    object-fit: contain;
    box-shadow: 0 32px 96px rgba(0,0,0,.55);
    border-radius: 2px;
  }
  .art-hero__cap {
    text-align: center;
    max-width: 740px;
    color: #fff;
  }
  .art-hero__eye {
    font-size: var(--t-xs);
    letter-spacing: .22em;
    text-transform: uppercase;
    /* Lightened from L82 → L88 so this eyebrow clears 4.5:1 even when the
       hero painting (post brightness(.42) blur) happens to be a bright one.
       Still a warm ochre, just a touch creamier. */
    color: oklch(88% .065 75);
    margin-bottom: var(--s3);
    display: block;
  }
  .art-hero__name {
    font-family: DMSerif, Georgia, serif;
    font-size: var(--t-3xl);
    color: #fff;
    line-height: 1.02;
    margin-bottom: var(--s2);
  }
  .art-hero__sub {
    font-family: DMSerif, serif;
    font-style: italic;
    font-size: var(--t-md);
    /* Was .78 — bumped to .9 so it still clears 4.5:1 even over a bright
       hero painting (where the .18 mid-scrim doesn't darken much). */
    color: rgba(255,255,255,.9);
    margin-bottom: var(--s4);
  }
  .art-hero__meta {
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    /* Was .68 — bumped to .9 for the same reason. */
    color: rgba(255,255,255,.9);
    display: flex;
    gap: var(--s3);
    flex-wrap: wrap;
    align-items: center;
    & a { color: oklch(88% .065 75); border-bottom: 1px solid currentColor; }
    & a:hover { color: #fff; }
  }

  /* ── Works grid (low-density tiles) ── */
  .works-grid {
    display: grid;
    gap: var(--s5);
    grid-template-columns: 1fr;
  }
  @media (min-width: 720px) {
    .works-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  }
  @media (min-width: 1100px) {
    .works-grid { grid-template-columns: 1fr 1fr 1fr; }
  }
  .work {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .35s var(--ease);
  }
  .work:hover { transform: translateY(-2px); }
  .work__frame {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 2px;
    background: var(--sur);
    margin-bottom: var(--s3);
  }
  .work__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.16,1,.3,1), filter .4s ease;
  }
  .work:hover .work__img { transform: scale(1.025); }
  .work__badge {
    position: absolute;
    top: var(--s3);
    left: var(--s3);
    font-size: var(--t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 4px 10px;
    background: rgba(255,255,255,.92);
    /* Badge backgrounds are hardcoded (sit on top of the painting) so the
       foreground must also be theme-independent — otherwise the dark-theme
       --_warm-100 (light) would land on a near-white pill. */
    color: oklch(18% .005 35);
    border-radius: 2px;
    font-weight: 500;
  }
  .work__badge--sold    { background: oklch(38% .03 35); color: #fff; }
  /* --exh: dark text on the ochre pill clears 4.5:1 in light (5.20) and
     dark (6.69). White text on the same pill failed in both themes. */
  .work__badge--exh     { background: var(--ac); color: var(--bg); }
  .work__badge--avail   { background: rgba(255,255,255,.92); color: oklch(18% .005 35); }
  .work__title {
    font-family: DMSerif, Georgia, serif;
    font-size: var(--t-lg);
    color: var(--hi);
    line-height: 1.2;
    margin-bottom: 2px;
  }
  .work__meta {
    font-size: var(--t-xs);
    letter-spacing: .08em;
    color: var(--tx2);
    text-transform: uppercase;
  }

  /* ── Filter chips ── */
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-bottom: var(--s6);
  }
  .chip {
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: var(--s2) var(--s4);
    border: 1px solid var(--bdr);
    border-radius: 100px;
    color: var(--tx2);
    background: none;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
  }
  .chip:hover { border-color: var(--tx3); color: var(--hi); }
  .chip[aria-pressed=true] {
    background: var(--hi);
    color: var(--bg);
    border-color: var(--hi);
  }

  /* ── Piece detail page ── */
  .piece-hero {
    margin-top: calc(var(--nav) * -1);
    padding-top: var(--nav);
    background: var(--sur);
  }
  .piece-hero__img-wrap {
    width: 100%;
    max-height: 92svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sur2);
  }
  .piece-hero__img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 92svh;
    object-fit: contain;
  }

  .piece-meta {
    padding-block: var(--s6) var(--s5);
    border-bottom: 1px solid var(--bdr);
  }
  .piece-meta__title {
    font-family: DMSerif, serif;
    font-size: var(--t-2xl);
    color: var(--hi);
    line-height: 1.1;
    margin-bottom: var(--s3);
  }
  .piece-meta__sub {
    font-style: italic;
    font-family: DMSerif, serif;
    color: var(--tx2);
    font-size: var(--t-md);
    margin-bottom: var(--s5);
  }
  .piece-meta__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s3);
    margin-bottom: var(--s5);
  }
  @media (min-width: 720px) {
    .piece-meta__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
  }
  @media (min-width: 1024px) {
    .piece-meta__grid { grid-template-columns: repeat(4, 1fr); }
  }
  .piece-meta__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .piece-meta__lbl {
    font-size: var(--t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tx3);
  }
  .piece-meta__val {
    font-size: var(--t-b);
    color: var(--hi);
  }

  .piece-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    align-items: center;
  }

  .piece-callout {
    background: var(--sur);
    border-left: 3px solid var(--ac);
    padding: var(--s4) var(--s5);
    margin-block: var(--s5);
    border-radius: 0 var(--r) var(--r) 0;
  }
  .piece-callout__lbl {
    font-size: var(--t-xs);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ac);
    display: block;
    margin-bottom: var(--s2);
  }
  .piece-callout__h {
    font-family: DMSerif, serif;
    font-size: var(--t-lg);
    color: var(--hi);
    margin-bottom: var(--s2);
  }

  /* ── Process / gallery (multi-image sections, grouped by type) ── */
  .process {
    padding-block: var(--s6);
  }
  .process__h {
    font-family: DMSerif, serif;
    font-size: var(--t-xl);
    color: var(--hi);
    margin-bottom: var(--s5);
  }
  .process__sub {
    font-family: DMSerif, serif;
    font-size: var(--t-md);
    color: var(--ac);
    letter-spacing: .04em;
    margin-top: var(--s6);
    margin-bottom: var(--s4);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--bdr);
  }
  .process__sub:first-child { margin-top: 0; }
  .process__group {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s5);
    margin-bottom: var(--s4);
  }
  @media (min-width: 760px) {
    /* Details + texture + alt-angle benefit from being wider/single; with-artist looks
       great in a two-up. We get a clean default with single-column on mobile and
       two-column for groups with 2+ shots on tablet+. */
    .process__group:has(.process__shot:nth-child(2)) {
      grid-template-columns: 1fr 1fr;
    }
  }
  .process__shot {
    margin: 0;
  }
  .process__img {
    width: 100%;
    height: auto;
    border-radius: 2px;
    background: var(--sur2);
    display: block;
  }
  .process__cap {
    margin-top: var(--s3);
    font-size: var(--t-sm);
    color: var(--tx2);
    font-style: italic;
    line-height: 1.55;
  }

  /* ── Relationship rows (awards / exhibitions / press for this piece) ── */
  .rel-row {
    padding-block: var(--s5);
    border-top: 1px solid var(--bdr);
  }
  .rel-row__h {
    font-size: var(--t-xs);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tx3);
    margin-bottom: var(--s3);
  }
  .rel-item {
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--bdr);
  }
  .rel-item:last-child { border-bottom: none; }
  .rel-item__h {
    font-family: DMSerif, serif;
    font-size: var(--t-md);
    color: var(--hi);
    margin-bottom: 2px;
  }
  .rel-item__d {
    font-size: var(--t-sm);
    color: var(--tx2);
  }

  /* ── Awards row (home + about page) ── */
  .awards {
    padding-block: var(--s6);
  }
  .awards__h {
    font-size: var(--t-xs);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tx3);
    text-align: center;
    margin-bottom: var(--s5);
  }
  .awards__list {
    display: grid;
    gap: var(--s5);
    grid-template-columns: 1fr;
  }
  @media (min-width: 720px) {
    .awards__list { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1024px) {
    .awards__list { grid-template-columns: repeat(3, 1fr); }
  }
  .award {
    text-align: center;
    padding: var(--s5);
    border: 1px solid var(--bdr);
    border-radius: 2px;
  }
  .award__year {
    font-size: var(--t-xs);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ac);
    display: block;
    margin-bottom: var(--s2);
  }
  .award__name {
    font-family: DMSerif, serif;
    font-size: var(--t-md);
    color: var(--hi);
    line-height: 1.25;
    margin-bottom: var(--s2);
  }
  .award__comp {
    font-size: var(--t-sm);
    color: var(--tx2);
    font-style: italic;
  }
  .award__work {
    font-size: var(--t-xs);
    color: var(--tx3);
    margin-top: var(--s2);
  }

  /* ── Tentative awards (unverified / awaiting catalogue) ──
     Previously rendered with inline style "opacity:.45;border-style:dashed".
     opacity:.45 against the warm-off-white bg makes even pure black cap at
     ~3.3:1, well below the 4.5:1 normal-text threshold; no token tuning can
     lift it. We substitute a different visual differentiator: dashed border
     + faint neutral fill (still WCAG-compliant for text contrast since the
     text colors remain the standard award tokens which already pass against
     this subtle tint). */
  .award--tentative {
    border-style: dashed;
    border-color: var(--bdr2);
    background: var(--sur);
  }
  [data-theme=dark] .award--tentative { background: var(--sur); }

  /* ── Press strip / cards ── */
  .press-card {
    background: var(--sur);
    border: 1px solid var(--bdr);
    border-left: 3px solid var(--ac);
    padding: var(--s5);
    margin-block: var(--s5);
  }
  .press-card__pub {
    font-size: var(--t-xs);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ac);
    display: block;
    margin-bottom: var(--s2);
  }
  .press-card__h {
    font-family: DMSerif, serif;
    font-size: var(--t-lg);
    color: var(--hi);
    line-height: 1.3;
    margin-bottom: var(--s3);
  }
  .press-card__meta {
    font-size: var(--t-xs);
    color: var(--tx3);
    letter-spacing: .08em;
  }

  /* ── Studio List signup ── */
  .studio-list {
    background: var(--sur);
    border: 1px solid var(--bdr);
    border-radius: 2px;
    padding: var(--s6) var(--s5);
    text-align: center;
  }
  .studio-list__eye {
    font-size: var(--t-xs);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ac);
    display: block;
    margin-bottom: var(--s3);
  }
  .studio-list__h {
    font-family: DMSerif, serif;
    font-size: var(--t-xl);
    color: var(--hi);
    margin-bottom: var(--s3);
  }
  .studio-list__sub {
    color: var(--tx2);
    max-width: 52ch;
    margin-inline: auto;
    margin-bottom: var(--s5);
    line-height: 1.6;
  }
  .studio-list__form {
    display: flex;
    gap: var(--s2);
    flex-direction: column;
    max-width: 480px;
    margin-inline: auto;
  }
  @media (min-width: 560px) {
    .studio-list__form { flex-direction: row; }
  }

  /* ── About page sections ── */
  .about-hero {
    padding-top: var(--s7);
    padding-bottom: var(--s5);
    border-bottom: 1px solid var(--bdr);
    margin-bottom: var(--s6);
  }
  .about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s6);
    align-items: start;
  }
  @media (min-width: 900px) {
    .about-grid { grid-template-columns: 5fr 7fr; gap: var(--s7); }
  }
  .about-portrait {
    aspect-ratio: 4 / 5;
    width: 100%;
    object-fit: cover;
    border-radius: 2px;
    background: var(--sur);
  }
  .about-jump {
    position: sticky;
    top: calc(var(--nav) + var(--s3));
    background: var(--bg);
    border-bottom: 1px solid var(--bdr);
    padding: var(--s3) 0;
    margin-bottom: var(--s5);
    z-index: 10;
  }
  .about-jump__list {
    display: flex;
    gap: var(--s4);
    flex-wrap: wrap;
    font-size: var(--t-xs);
    letter-spacing: .15em;
    text-transform: uppercase;
  }
  .about-jump__list a {
    color: var(--tx2);
    transition: color var(--dur) var(--ease);
  }
  .about-jump__list a:hover { color: var(--ac); }

  /* ── Exhibition timeline ── */
  .ex-year {
    margin-block: var(--s7);
  }
  .ex-year__h {
    font-family: DMSerif, serif;
    font-size: var(--t-2xl);
    color: var(--hi);
    margin-bottom: var(--s5);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--bdr);
  }
  .ex-item {
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--bdr);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
  @media (min-width: 760px) {
    .ex-item { grid-template-columns: 1fr 3fr; gap: var(--s5); }
  }
  .ex-item__when {
    font-size: var(--t-sm);
    color: var(--tx3);
    letter-spacing: .05em;
  }
  .ex-item__title {
    font-family: DMSerif, serif;
    font-size: var(--t-lg);
    color: var(--hi);
    line-height: 1.25;
    margin-bottom: var(--s2);
  }
  .ex-item__venue {
    font-size: var(--t-sm);
    color: var(--tx2);
    margin-bottom: var(--s2);
  }
  .ex-item__tags {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
    margin-top: var(--s2);
  }
  .ex-tag {
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 3px var(--s2);
    border: 1px solid var(--bdr);
    border-radius: 100px;
    color: var(--tx2);
  }

  /* ── Inquiry form blocks ── */
  .inquiry-intro {
    font-size: var(--t-sm);
    color: var(--tx2);
    line-height: 1.7;
    margin-bottom: var(--s5);
    padding: var(--s3) var(--s4);
    background: var(--sur);
    border-left: 2px solid var(--ac);
    border-radius: 0 var(--r) var(--r) 0;
    font-style: italic;
  }

  /* ── Form error color: framework's #e05c5c is 3.31:1 in light (FAIL).
     Override to a darker red that clears 4.5:1 on bg and sur in light,
     while remaining legible in dark via a slightly lighter alternative. */
  .ferr { color: #b73838; }
  [data-theme=dark] .ferr { color: #ff8e8e; }

  /* ── Hi-res request toast (right-click overlay) ── */
  .hires-toast {
    position: fixed;
    bottom: var(--s5);
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--hi);
    color: var(--bg);
    padding: var(--s3) var(--s5);
    border-radius: var(--r);
    font-size: var(--t-sm);
    line-height: 1.5;
    max-width: 92vw;
    width: max-content;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    z-index: 9999;
    transition: transform .35s var(--ease);
    pointer-events: auto;
  }
  .hires-toast.show {
    transform: translateX(-50%) translateY(0);
  }
  .hires-toast a {
    /* Toast bg is var(--hi) (very dark in light, very light in dark) so the
       link inherits the toast's near-bg foreground (~17:1) and is signified
       by the underline. var(--ac) on var(--hi) was 4.67 (light) / 2.46 (dark). */
    color: inherit;
    border-bottom: 1px solid currentColor;
    margin-left: var(--s2);
    font-weight: 600;
  }

  /* ── Page section heading style ── */
  .page-h {
    padding-top: calc(var(--nav) + var(--s5));
    padding-bottom: var(--s5);
    border-bottom: 1px solid var(--bdr);
    margin-bottom: var(--s6);
  }
  .page-h__eye {
    font-size: var(--t-xs);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ac);
    margin-bottom: var(--s3);
    display: block;
  }
  .page-h__h {
    font-family: DMSerif, serif;
    font-size: var(--t-2xl);
    color: var(--hi);
    line-height: 1.1;
    margin-bottom: var(--s3);
    max-width: 22ch;
  }
  .page-h__sub {
    font-family: DMSerif, serif;
    font-style: italic;
    color: var(--tx2);
    font-size: var(--t-md);
    max-width: 60ch;
  }

  /* ── Container queries: piece-meta is denser in narrow viewports ── */
  @container (max-width: 480px) {
    .piece-meta__title { font-size: var(--t-xl); }
  }
}