/* ============================================================================
   SINAN — MOBILE
   ----------------------------------------------------------------------------
   EVERY rule in this file lives inside @media (max-width: 768px). Nothing here
   can reach desktop: above the breakpoint the whole file stops matching and the
   approved desktop composition in base/hero/site.css is what renders.

   Loaded LAST, so at equal specificity these win over site.css's own
   @media (max-width: 1100px) and (max-width: 720px) blocks.

   This is not a scaled-down desktop. The hero is a poster, the record is capped
   by the width of the glass rather than by the height, the opening is the
   section rather than an object inside it, and ABOUT is one editorial column.

   PREREQUISITE, and the reason any of this renders at all: index.html now has
   <meta name="viewport" content="width=device-width, initial-scale=1">. Without
   it a phone lays the page out at ~980px and scales the result down, so the
   site rendered as the desktop composition at ~0.4x and NO query below 980px
   ever matched — this file included.
   ========================================================================= */

/* Mobile-only elements. They are in the DOM at every width, so they are held
   off here and switched on inside the block. */
.chrome__burger, .menu { display: none; }

@media (max-width: 768px) {

  /* ── 721–768 PARITY ──────────────────────────────────────────────────
     site.css's mobile block stops at 720px, so without this the band
     721–768 would ship mobile type on desktop grids. These four templates
     are restated, not edited, so site.css is untouched. */
  .trk { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "n title" ".  meta"; }
  .spec__row { grid-template-columns: minmax(0, 1fr); }
  .date {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "when status" "city status" "venue status";
    align-items: start;
  }
  .date__when { grid-area: when; } .date__city { grid-area: city; }
  .date__venue { grid-area: venue; } .date__status { grid-area: status; align-self: center; }
  .foot__mark { flex-direction: column; align-items: flex-start; gap: 14px; }
  .foot__list--contact li { grid-template-columns: minmax(0, 1fr); }
  /* NB: the 720 block also hides .transport .wave. That is deliberately NOT
     mirrored here — the music section below restores the wave on mobile and
     gives it its own row, so copying the hide would be dead, contradictory. */

  /* ═══════════════════════════════════════════════════════════════════════
     MOBILE — vertical rhythm + the shared type ramp
     Connective tissue only: section padding, section length, seam depth and
     the type ramp every section shares. No component is restyled here.
     Rules are ordered so that shared selectors come BEFORE the section
     selectors that re-specify them at equal specificity.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── 1 · RHYTHM TOKENS ─────────────────────────────────────────────────
     --gut is deliberately NOT touched: clamp(20px, 3.1vw, 52px) already
     floors at 20px below 645px, which is the right gutter at 390.

     --seam is. 26vh = 219px at 844, and the band is laid over the BOTTOM
     219px of the preceding section. With section padding now ~60px that
     reaches ~160px into live content and dims it instead of covering a
     join. 13vh ≈ 110px still dissolves the edge over two thumb-widths.

     --sec-t / --sec-b replace three vh-driven clamps (14vh / 13vh / 16vh)
     that were all ABOVE their px floor at 844 — i.e. mobile was getting
     MORE section padding than a 900px-tall desktop. */
  :root {
    --seam:  clamp(88px, 13vh, 116px);   /* 110px @844   was 219px          */
    --sec-t: clamp(58px, 16vw, 88px);    /*  62px @390 · 69 @430 · 88 @768  */
    --sec-b: clamp(48px, 13vw, 72px);    /*  51px @390 · 56 @430 · 72 @768  */
  }

  /* ── 2 · THE SHARED TYPE RAMP ──────────────────────────────────────────
     Every ramp below sat on the MINIMUM of its desktop clamp at 390, which
     is how the page ended up reading as a shrunken desktop. */

  /* the label voice — 10px/.2em → 11.5px/.15em. Tracking comes down as the
     size goes up so the mark does not get wider; .56 alpha on #020666 is
     5.5:1, so tag--faint stays legible at this size. */
  .tag {
    font-size: 11.5px;
    letter-spacing: .15em;
  }
  .mark { gap: 11px; }
  .mark .rule { width: 26px; }

  /* headings — 44px floor → 51.5px @390, 57 @430, 62 @768. Widest line is
     "SELECTED" (8 caps ≈ 0.66em each): 272px inside a 350px column. */
  .h-section {
    font-size: clamp(46px, 13.2vw, 62px);
    line-height: .86;
    letter-spacing: -.03em;
  }

  /* the reading voice — 14px → 15.5px. Both users (.music__note,
     .live__note) are max-width capped in ch, so the measure holds. */
  .body {
    font-size: 15.5px;
    line-height: 1.62;
  }

  /* section-mark rhythm, shared by 03 / 05 / 06 */
  .sechead { margin-bottom: 26px; }        /* was clamp(30px,5vh,56px) = 42 */
  .sechead__idx { margin-bottom: 16px; }   /* was clamp(18px,2.6vh,30px) = 22 */

  /* ── 3 · 03 MUSIC ──────────────────────────────────────────────────────
     Overrides .music padding (118/101) and .music__grid gap (42). The
     field, transport and .trk rows are untouched — they belong to the
     music agent. */
  .music { padding: var(--sec-t) 0 var(--sec-b); }
  .music__grid { gap: 26px; }
  .music__note { margin-top: 22px; }   /* width is the music agent's, below */

  /* ── 4 · 04 VISUAL ─────────────────────────────────────────────────────
     The one section besides the hero that stays a viewport experience:
     .film__pin keeps 100svh. Only the SCROLL LENGTH comes down, 190vh →
     168vh (1604 → 1418px). js/site.js computes --fp from
     offsetHeight - innerHeight, so it still runs 0→1 over ~574px of
     travel, and the ::before seam fade (fp > .55) still completes ~250px
     before the pin releases. */
  /* height is the visual agent's, below — the brief asks for 105-115svh and
     168vh is the desktop-length pin. Left to that section so there is exactly
     one declaration of it. */

  /* ── 5 · 05 ABOUT ──────────────────────────────────────────────────────
     Overrides .about padding (110/110) and .about__inner gap (34). The
     plate, its mask and the lead-in sizing are the about agent's. */
  .about { padding: var(--sec-t) var(--gut) var(--sec-b); }
  .about__inner { gap: 28px; }
  /* .about .sechead is already margin:0; its idx still carried 16px, which
     doubled up with the grid gap */
  .about .sechead__idx { margin-bottom: 0; }

  .spec__row { padding: 12px 0; gap: 5px; }             /* was 13.5px pad   */
  .spec dd { font-size: 15px; line-height: 1.5; }       /* was 12.5px       */
  /* longest value, "Club and festival sets, 90–120 minutes", is ~285px at
     15px — still one line inside the 350px column, so this costs ~3px a
     row and no re-wrap. */

  /* ── 6 · 06 LIVE ───────────────────────────────────────────────────────
     Overrides .live padding (135/110), .live__head gap (22) and its
     margin-bottom (59), and the four floored date ramps.
     .live__head MUST come after the .sechead rule above — both are
     (0,1,0) and source order is the only thing deciding. */
  .live { padding: var(--sec-t) var(--gut) var(--sec-b); }
  .live__head { gap: 14px; margin-bottom: 30px; }
  .live__note { max-width: 36ch; }

  .date { padding: 17px 0; gap: 3px 14px; }             /* was 23.6px pad   */
  .date__when   { font-size: 11.5px; letter-spacing: .14em; }
  .date__city   { font-size: clamp(21px, 5.8vw, 28px); line-height: 1.08; }
  .date__venue  { font-size: 14.5px; }
  .date__status { font-size: 11px; letter-spacing: .12em; }
  /* line-height 1.08 on the city is load-bearing: at 1 the dot on the
     Turkish İ in "İSTANBUL" sits on the row rule above it.
     5.8vw = 22.6px @390 — the longest city line, the empty row's "TO BE
     CONFIRMED", measures ~207px against the 232px left by the status
     column, so nothing wraps. */

  .live__book { margin-top: 34px; }                     /* was 59px         */
  .live__book-value { font-size: 19px; }                /* was 17px         */

  /* ── 7 · 07 CONTACT ────────────────────────────────────────────────────
     Overrides .foot padding-top (101), .foot__top padding-bottom (59),
     .foot__cols padding-bottom (84) and gap (42). */
  .foot { padding: var(--sec-t) var(--gut) 24px; }

  /* two tracked mono lines cannot share a 350px row — at 11.5px they total
     ~424px and the place line wraps mid-em-dash */
  .foot__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 40px;
  }

  .foot__cols { padding-bottom: 48px; gap: 30px; }
  .foot__col > p { margin-bottom: 14px; }

  .foot__list { gap: 14px; }
  .foot__list a, .foot__list span { font-size: 16px; }  /* was 14px         */
  .foot__list a { display: inline-block; padding: 3px 0; }  /* 44px pitch   */
  .foot__list--contact li { gap: 3px; }

  /* "Elsewhere" is four one-word links: as a stack it costs 162px of a
     832px footer, as a wrapping row it costs 30px and reads better. */
  .foot__col:not(.foot__col--wide) .foot__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
  }

  .foot__sub { padding: 28px 0 44px; gap: 16px; }
  .foot__sub-copy .tag { margin-bottom: 8px; }
  .foot__sub-note { font-size: 16px; }
  .foot__form { grid-template-columns: minmax(0, 1fr); gap: 14px 0; max-width: none; }
  .foot__input { height: 48px; font-size: 16px; }   /* 16px: no iOS zoom */
  .foot__btn { height: 48px; justify-content: center; }
  .link--icon { gap: 8px; }

  .foot__mark { padding-bottom: 22px; gap: 10px; }
  .foot__name { font-size: clamp(62px, 18vw, 92px); }   /* was 44px         */
  .foot__role { padding-bottom: 0; }
  /* 18vw = 70px @390: "SINAN" sets ~231px inside 350. @768 the 92px cap
     sets ~304px inside 720. */

  .foot__base { flex-wrap: wrap; gap: 10px 16px; padding-top: 18px; }
  .foot__legal { gap: 16px; }

  /* ── 8 · THE ONE LEVER I DID NOT PULL ──────────────────────────────────
     .travel is 120vh = 1013px — the single largest block of scroll on the
     page and 13% of its total height. It is the vinyl beat's timing and
     belongs to the hero/vinyl agent, so I have not written it live; two
     agents writing the same declaration is a coin-flip. js/hero.js reads
     travelEl.offsetHeight, so the whole record sequence re-times itself
     and nothing else needs to change. Enable this ONLY if no other mobile
     block already sets it:

     .travel { height: 88vh; }          saves 270px (1013 → 743)
     ------------------------------------------------------------------- */

  /* ── 9 · very narrow ───────────────────────────────────────────────── */
  @media (max-width: 360px) {
    /* the footer sign-off is the only thing with no wrap escape */
    .foot__name { font-size: 58px; }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     MOBILE CHROME — the wordmark, and a way in. Nothing else.
     On a phone this is the ONLY navigation the page has (the hero's own .nav
     is switched off below), so it is on from the first frame instead of
     waiting for the pinned sequence to finish. site.js still toggles .on;
     .chrome.on declares the same three values this rule does, so the two can
     never disagree and nothing flickers when it is removed again.
     ═══════════════════════════════════════════════════════════════════════ */

  .chrome {
    opacity: 1;
    visibility: visible;
    transform: none;
    gap: 12px;
    padding:
      calc(8px + env(safe-area-inset-top, 0px))
      var(--gut)
      10px;
    /* A WASH, NOT A PANEL: it ends on nothing, so there is no bar and no edge.
       It exists because Soft White at 10px over the brightest red in the
       artwork measures ~4.2:1; over the blue it is 8.5:1 and this is invisible.
       Delete this one declaration for a completely transparent header. */
    background: linear-gradient(180deg,
      rgba(9,1,34,.58) 0%, rgba(9,1,34,.26) 52%, rgba(9,1,34,0) 100%);
    /* arrives WITH the hero's interface rather than ahead of it. `fade` is
       hero.css's own keyframe and touches opacity only — no transform, so a
       position:fixed descendant could never be re-parented by it. */
    animation: fade 700ms var(--ease) 420ms backwards;
  }

  /* the wordmark comes back — it is the left half of the composition */
  .chrome__mark {
    display: block;
    font-size: 10px;
    letter-spacing: .22em;
    color: var(--paper);
  }

  /* the four 9px links move into the sheet */
  .chrome__links { display: none; }

  /* ── the button ───────────────────────────────────────────────────────
     Two hairlines, not three: at this scale a third line reads as noise.
     44x44 tap target, pulled half a gutter right so the GLYPH — not the
     button's padding box — lines up with var(--gut) on the other side.
     ------------------------------------------------------------------- */
  .chrome__burger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: calc(var(--gut) * -.5);
    padding: 0;
    border: 0;
    background: none;
    color: var(--paper);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .chrome__burger-box {
    position: relative;
    display: block;
    width: 24px;
    height: 11px;
  }
  .chrome__burger-box span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform .34s var(--ease);
  }
  .chrome__burger-box span:first-child { top: 0; }
  .chrome__burger-box span:last-child  { bottom: 0; }

  .chrome__burger[aria-expanded="true"] .chrome__burger-box span:first-child {
    transform: translateY(4.75px) rotate(45deg);
  }
  .chrome__burger[aria-expanded="true"] .chrome__burger-box span:last-child {
    transform: translateY(-4.75px) rotate(-45deg);
  }

  /* Open: the header stays exactly where it is, over the sheet, and drops its
     wash — the sheet is already a ground, and two grounds is a panel. */
  .menu-open .chrome { background: none; z-index: 50; }

  /* the hero carries no interface on a phone: the chrome above is permanent,
     so the centred 10px row inside the picture is only clutter */
  .hero .nav { display: none; }

  /* ═══════════════════════════════════════════════════════════════════════
     THE SHEET
     One surface, the page's own ground, with the room's light entering at the
     top edge where the header sits. Fully opaque: the disc and the video are
     still live behind it and showing them through costs frames and legibility.
     ═══════════════════════════════════════════════════════════════════════ */

  .menu {
    display: grid;
    grid-template-rows: 1fr auto;
    position: fixed;
    inset: 0;
    z-index: 45;
    padding:
      calc(78px + env(safe-area-inset-top, 0px))
      var(--gut)
      calc(26px + env(safe-area-inset-bottom, 0px));
    background:
      radial-gradient(84% 52% at 50% 0%, rgba(6,28,219,.34), transparent 68%),
      linear-gradient(180deg, #020666 0%, #090122 78%, #090122 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .34s var(--ease), visibility 0s linear .34s;
  }
  .menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .3s var(--ease), visibility 0s linear 0s;
  }

  /* the page cannot move under an open sheet */
  .menu-open,
  .menu-open body { overflow: hidden; }

  /* ── the links ────────────────────────────────────────────────────────
     Display voice, uppercase, hairline-ruled — the same ledger the tracks
     and the dates are set as, one size up. ~32px at 390.
     ------------------------------------------------------------------- */
  .menu__nav {
    align-self: center;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .menu__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(14px, 2.1vh, 22px) 0;
    border-top: 1px solid var(--hair);
    font-family: var(--display);
    font-weight: 800;
    font-variation-settings: "opsz" 32;
    font-size: clamp(28px, 8.2vw, 40px);
    line-height: 1.02;
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: rgba(243,243,248,.72);
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity   .46s var(--ease) calc(var(--i, 0) * 48ms + 80ms),
      transform .58s var(--ease) calc(var(--i, 0) * 48ms + 80ms),
      color     .40s var(--ease);
  }
  .menu__nav a:last-child { border-bottom: 1px solid var(--hair); }
  .menu.is-open .menu__nav a { opacity: 1; transform: none; }
  /* closing is not a performance — it leaves at once */
  .menu:not(.is-open) .menu__nav a { transition-duration: .16s; transition-delay: 0s; }

  /* where you are. The LABEL goes to full Soft White; the ember is a rule,
     never the text — the same contract as .tag--ember in base.css. */
  .menu__nav a::after {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 1px;
    background: var(--ember);
    opacity: 0;
    transition: opacity .4s var(--ease);
  }
  .menu__nav a[aria-current="true"] { color: var(--paper); }
  .menu__nav a[aria-current="true"]::after { opacity: 1; }

  /* ── the bottom of the sheet ─────────────────────────────────────────── */
  .menu__foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: clamp(16px, 2.4vh, 22px);
    border-top: 1px solid var(--hair);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s var(--ease) 280ms, transform .5s var(--ease) 280ms;
  }
  .menu.is-open .menu__foot { opacity: 1; transform: none; }
  .menu:not(.is-open) .menu__foot { transition-duration: .16s; transition-delay: 0s; }
  .menu__foot p { margin: 0; }
  .menu__foot a {
    color: var(--paper);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--hair);
  }

  /* anchors land clear of the transparent header */
  :root {
    /* one source for "how tall is the fixed bar" — the burger's 44px tap
       target plus its padding, plus the notch */
    --chrome-h: calc(62px + env(safe-area-inset-top, 0px));
    /* ONE page rail. The seven authors had shipped 16px, 20px and 22px edges
       in the same column. */
    --rail: 20px;
    scroll-padding-top: calc(var(--chrome-h) + 10px);
  }

  /* ── short screens (landscape-ish phones, small devices) ─────────────── */
  @media (max-height: 560px) {
    .menu { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
    .menu__nav a { font-size: 22px; padding: 10px 0; }
    .menu__foot { gap: 6px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .chrome { animation: none; }
    .menu__nav a,
    .menu__foot { transform: none; transition-delay: 0s; transition-duration: .2s; }
    .chrome__burger-box span { transition-duration: .01ms; }
  }


  /* ════════════════════════════════════════════════════════════════════════
     01 · THE ROOM — MOBILE POSTER
     ------------------------------------------------------------------------
     At 390x844 `object-fit: cover` on a true 16:9 plate scales by HEIGHT: the
     image renders 1500px wide and the viewport shows 390 of them — 26% of the
     frame. So on a phone the hero is not "the room shrunk", it is a 26%-wide
     vertical slice of it, and the only decision that matters is WHICH slice.
     Everything below follows from that one number.
     ════════════════════════════════════════════════════════════════════════ */

  .hero {
    height: 100vh;          /* fallback for anything without svh            */
    height: 100svh;
    min-height: 100svh;     /* the poster is never allowed to be shorter    */
  }

  /* ── THE CROP ──────────────────────────────────────────────────────────
     54.5% horizontally, measured not guessed. On the 3840-wide plate the
     features that decide the edges are: the small red floor-slot with the
     crouched figure, which ENDS at ~40% of the frame, and the upper-right
     niche with the second figure, which BEGINS at ~67%. A 26% window must
     sit between them or a phone gets a sliver of a cropped body at an edge,
     which is the one thing a poster cannot survive.

       object-position: 54.5%  →  window 40.3% .. 66.3%

     That lands the main Sinan figure's chamber at 53% of the screen width
     (dead centre, a hair right, so it is composed rather than symmetrical),
     puts the deck table across the full width beneath him, and loses both
     outer chambers cleanly. 54% (the old max-aspect-ratio value) is within a
     few px of this; 53% or 56% both start clipping a body at an edge.

     The SECOND value never engages in portrait — there is no vertical
     overflow when the viewport is narrower than 16:9 — so 46% is purely for
     landscape phones, where it holds the niche and the decks and lets the
     ceiling go. ------------------------------------------------------- */
  .hero .hero__art img { object-position: 54.5% 46%; }

  /* ── THE GROUND UNDER THE NAME ─────────────────────────────────────────
     Desktop puts the name on the darkest quarter of the artwork — the left
     wall and the unlit floor. A 26% centre slice does not contain that
     quarter: the lower third of the mobile crop is the LIT floor, its grid
     hairlines and the red reflections, and Soft White measures ~3:1 on it.
     So the phone gets what the file's own lighting logic already does around
     every opening: the blue is pulled DOWN so the type has something to be
     bright against. Nothing is added to the artwork — it is the same plate,
     valued down below the halfway line and untouched above it.

     Stops chosen against the composition, not by eye: 0 until 50% (the
     chamber and the standing figure are never touched), barely present
     across the decks, and only real from ~66% down, which is exactly where
     the eyebrow and the name sit. The top veil is for the nav under a
     translucent status bar. ------------------------------------------- */
  .hero .hero__art::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(9,1,34,.34), rgba(9,1,34,0) 20%),
      linear-gradient(180deg,
        rgba(9,1,34,0)    50%,
        rgba(2,6,102,.20) 66%,
        rgba(9,1,34,.52)  80%,
        rgba(9,1,34,.72) 100%);
  }

  /* ── NAVIGATION ───────────────────────────────────────────────────────
     Four words, centred, one line, and clear of the notch. viewport-fit is
     `cover`, so without the env() the links sit under the status bar on any
     notched phone. -------------------------------------------------- */
  .hero .nav {
    grid-template-columns: minmax(0, 1fr);
    padding:
      calc(env(safe-area-inset-top, 0px) + 15px)
      calc(var(--gut) + env(safe-area-inset-right, 0px))
      15px
      calc(var(--gut) + env(safe-area-inset-left, 0px));
  }
  .hero .nav__mark  { display: none; }
  .hero .nav__links { justify-self: center; gap: clamp(15px, 5.2vw, 28px); }
  .hero .nav__links a {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .2em;
    color: var(--paper-dim);
  }

  /* ── THE NAME ─────────────────────────────────────────────────────────
     "SINAN" in Inter 800 at -.042em tracking measures 2.93em wide — that is
     not a guess, it is the measured 240px / 81.9px ratio and it matches the
     sum of the five advance widths. So width is a pure multiple of the type
     size and the size can be solved for:

       30vw × 2.93 = 87.9vw of name, every screen width.

     390 → 117px / 343px wide, 20px left gutter, 27px right margin
     430 → 129px / 378px wide
     360 → 108px / 316px wide

     The 92px floor only engages below 307px; the 200px cap only above 667px,
     so a tablet in portrait does not get a 230px name. The fallback stack is
     NARROWER than Inter at this tracking (Arial 2.90em, Helvetica the same),
     so a failed webfont underflows rather than overflowing.

     `left` only — deliberately no `right`. The letters are flex items with
     overflow:hidden, so a constrained box would let them shrink and clip the
     glyphs; an unconstrained box can only overflow, and body already carries
     overflow-x:hidden. ------------------------------------------------ */
  .hero .title {
    left: calc(var(--gut) + env(safe-area-inset-left, 0px));
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(58px, 8.4vh, 96px));
  }
  .hero .title__name {
    font-size: clamp(92px, 30vw, 200px);
  }

  /* small, tracked, and no longer 10px. Sits on the dark underside of the
     deck table in the crop, which is why it can hold --paper-dim. */
  .hero .title__eyebrow {
    margin: 0 0 clamp(12px, 1.8vh, 20px) .22em;
    font-size: 12px;
    letter-spacing: .4em;
    color: var(--paper-dim);
  }

  /* a poster does not ask. The affordance is the page moving. */
  .hero .hero__cue { display: none; }

  /* ── LANDSCAPE PHONE ──────────────────────────────────────────────────
     Not a poster and not worth one: the frame is nearly uncropped, the name
     sits back on the dark left wall where desktop puts it, and the heavy
     bottom scrim would be painting over nothing. 30vw of a 740px landscape
     viewport is a 650px name in a 360px-tall frame, so it has to come down.
     (The existing max-aspect-ratio:1/1 block does not reach this case.) */
  @media (max-height: 520px) and (orientation: landscape) {
    .hero .title {
      bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(26px, 7vh, 44px));
    }
    .hero .title__name  { font-size: clamp(54px, 15vw, 104px); }
    .hero .title__eyebrow { margin-bottom: 8px; font-size: 11px; letter-spacing: .32em; }
    .hero .hero__art::after {
      background: linear-gradient(180deg,
        rgba(9,1,34,0)    34%,
        rgba(2,6,102,.20) 62%,
        rgba(9,1,34,.58) 100%);
    }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     01 → 03 · THE VINYL TRANSITION, on a phone
     ---------------------------------------------------------------------
     Four measured problems, in the order the reader meets them:

       · the beat is 120vh of scroll on a 844px screen — 1013px to move one
         record;
       · js/hero.js holds the disc at k * 1.7, which on a 390px phone is a
         491px record: 126vw, both rims off the glass;
       · the label is px type inside that transform, so the strapline paints
         at 9.5 * 0.545 = 5.2px — a smudge, not a sentence;
       · MUSIC cannot arrive until the pin ends, because .stick's bottom edge
         and the viewport's bottom edge coincide exactly at p = 1. The last
         fifth of the pin is therefore a flat #5D001D field with a record
         sitting still in the middle of it.

     Everything below is the mobile half of the fix. The other half is the
     width cap in js/hero.js, described separately; the label sizes here
     assume it, and degrade upward (larger, still correct) without it.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── 1 · the beat ──────────────────────────────────────────────────────
     120vh → 80vh. A third off the scroll, and js/hero.js re-times itself:
     it measures this element, it does not assume it. Everything downstream
     of .travel (the chrome's arrival in js/site.js reads the same
     offsetHeight) follows automatically.                                  */
  .travel { height: 80vh; }

  /* ── 2 · the flood lands early ─────────────────────────────────────────
     --np is a smoothstep across p .62 → .94, so the chamber colour is not
     solid until the pin is 94% spent. Multiplying it brings the flood to
     full at p ≈ 0.79 instead, which is what lets MUSIC slide in over a
     surface that is already its own opening colour. The stop is still a
     flat #5D001D on both sides of the join, so the edge is invisible by
     construction — the same argument the rest of the file makes.          */
  .record__next { opacity: clamp(0, calc(var(--np) * 1.8), 1); }

  /* ── 3 · MUSIC arrives while the record is still in frame ──────────────
     The pin is untouched: .stick's CONTENT box still measures 100svh + the
     travel, so the hero sticks for exactly .travel and --p is unchanged. A
     negative margin only moves the section BELOW it, which slides MUSIC up
     over the tail of the pin — and .music is position:relative z-index:5
     against a sticky .hero at z-index auto, so it paints over the disc
     without a single structural change.

     --hero-gap is the honest part. .hero is 100svh but the viewport is up
     to 100vh once a phone's toolbar collapses, so the hero's bottom edge is
     not the screen's bottom edge on a real device. Subtracting the
     difference makes the hand-off land at the same p (≈ .81) on a phone
     with a collapsing toolbar and in a fixed-height test viewport, where
     100vh and 100svh are equal and the term is simply 0.

     IF .hero's height is ever changed to 100vh or 100dvh, set --hero-gap
     to 0 — it is one edit, and it is the only assumption in this block.   */
  .stick {
    --hero-gap: calc(100vh - 100svh);
    --vinyl-overlap: 15vh;
    margin-bottom: min(0px, calc(var(--hero-gap) - var(--vinyl-overlap)));
  }

  /* ── 4 · the record leaves upward as the chamber rises ─────────────────
     With MUSIC coming up from below, the disc wants to clear the frame
     rather than be swallowed by it. A little more lift, the same easing,
     and no fade: the brief's rule that the viewport never holds a flat
     colour on its own still holds, because the disc is in frame until the
     section covers it.                                                    */
  .disc-stage {
    transform: translateY(calc(var(--dx) * -10vh)) scale(calc(1 - var(--dx) * .08));
  }

  /* ── 5 · rotation, at half the diameter ───────────────────────────────
     17s on a 1101px desktop record is 203px/s at the rim. The same 17s on a
     452px phone record is a fidget. 30s puts the rim back down to 47px/s —
     present, not busy. Longhand on purpose: the reduced-motion rule in
     site.css sets `animation: none`, and a duration cannot revive a
     nameless animation.                                                   */
  .disc__body { animation-duration: 30s; }

  /* ── 6 · the pressing, at half the diameter ───────────────────────────
     The groove pitch and the ring pattern are px stops inside a transform
     of ~0.50, so on a phone they paint at half the pitch they were drawn
     for and the face goes to a fine haze. Doubled, they land back on the
     rhythm the desktop record has. Same colours, same alphas, no new
     ingredients — and coarser, never finer, which is the side of the
     shimmer the original comment warns about.                             */
  .disc__body {
    background:
      repeating-radial-gradient(circle at 50% 50%,
        rgba(36,79,246,.13) 0 3px, rgba(9,1,34,.22) 3px 12px, transparent 12px 26px),
      radial-gradient(circle at 50% 50%,
        #090122 0 27%, #020666 27.2% 30%, #090122 30.2% 78%, #020666 78.2% 96%, #090122 96.2% 100%),
      #090122;
    box-shadow: 0 0 0 2px rgba(234,3,29,.34), 0 60px 120px -30px rgba(9,1,34,.92);
  }
  .disc__body::after {
    background: repeating-radial-gradient(circle at 50% 50%,
      transparent 0 104px, rgba(36,79,246,.20) 104px 108px, transparent 108px 212px);
  }

  /* ── 7 · the label ────────────────────────────────────────────────────
     The only part of the disc where PROPORTION is the wrong criterion. The
     rim, the grooves, the hole and the inset shadow are all percentages of
     900px and stay true through the transform; type has to be legible at a
     size, not at a ratio.

     The disc is capped by WIDTH on mobile (js/hero.js, below), so the
     transform is proportional to the viewport: painted size = declared
     size * 1.16 * innerWidth / 900. To hold the painted size still, the
     DECLARED size has to fall as the screen grows — which is what the
     negative vw coefficient is. It lands the strapline between 8.4px and
     10.3px painted across 320px → 768px, and SINAN between 25px and 30px.

     max-width in em rather than % is the same argument: sixteen monospace
     characters at .2em tracking is 13em, one character more than the block
     allows, so `text-wrap: balance` can only land on
     FATE IS IN LOVE / WITH EFFORT — two lines, at every size, by
     arithmetic rather than by luck. The .2em padding-left that corrects the
     trailing tracking is already in site.css and is counted in the 12.8.  */
  .disc__label {
    --lbl: clamp(8px, calc(30px - 2.8vw), 22px);
    gap: calc(var(--lbl) * .85);
  }
  .disc__label-name { font-size: calc(var(--lbl) * 2.9); }
  .disc__label-meta {
    font-size: var(--lbl);
    max-width: 12.8em;
  }

  /* The reduced path holds the disc at k * 1.25 — about 93vw, smaller than
     the cap — so the label has to come up to meet a smaller record. Same
     curve, scaled by the ratio between the two multipliers.               */
  @media (prefers-reduced-motion: reduce) {
    .disc__label { --lbl: clamp(9px, calc(35px - 3.1vw), 24px); }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     03 · MUSIC — phone
     The desktop composition is a two-column spread measured for 1500px. At 390
     the 1100px break already stacks it correctly (field over catalogue, which is
     the right order — the field is DRIVEN by the rows, so it must stay above
     them and not be pushed to the bottom of the section). What is left to fix is
     scale: everything in here was sized for a column half the page wide and is
     now sitting on the whole of it.
     ═══════════════════════════════════════════════════════════════════════ */

  /* Desktop opens the section with 118px of empty hand-off red before the first
     thing worth looking at. The record's flood (.record__next, #5D001D) is flat,
     and .music's own first stop is the same flat #5D001D held to 9%, so the join
     survives the section getting shorter — there is no pattern to slide. */
  .music {
    padding: clamp(56px, 8vh, 76px) 0 clamp(60px, 9vh, 84px);
  }

  /* 16px rails. The field becomes calc(100% - 32px) and the plate, the
     transport, the heading and every row hang off the same two lines — which is
     the whole of "cleanly centred" on a phone. */
  .music__grid {
    padding: 0 var(--rail);
    gap: clamp(28px, 4vh, 36px);
  }

  /* ── the visual field ─────────────────────────────────────────────────
     4 / 4.2 at 350px wide was a postcard with the photography cropped to its
     middle band. Portrait-leaning 4/5 across the full measure is +25% of area
     and gives the stills back their vertical — they are pictures of a person in
     a room, and the room is above and below him.

     The cap is what stops that being reckless: on a short phone, and on a
     portrait tablet at the top of this block, 4/5 of the full measure would hand
     the plate the entire first screen and push the catalogue out of sight. Where
     it binds, aspect-ratio yields and the frame simply crops wider — the stills
     are position:absolute/object-fit:cover inside it, so nothing reflows.
     ------------------------------------------------------------------- */
  .field {
    aspect-ratio: 4 / 5;
    max-height: min(62svh, 520px);
    /* the same emission at #EA031D/.55, re-scaled to a plate a third the width;
       a 120px blur under a 358px box is a soft red fog, not a glow */
    box-shadow: 0 26px 74px -34px rgba(234,3,29,.55);
  }

  /* ── transport ────────────────────────────────────────────────────────
     The wave comes back. The 720 block hid it, and on a real phone that leaves
     the transport as a button, a name and a clock — no shape, no scrub, and the
     only remaining progress indicator is the 1px .trk__line under the active
     row. Given the full measure it has somewhere to live: its own row, spanning
     all three columns. 64 bars at ~4.6px pitch reads as a fine comb rather than
     a waveform, which is the correct trade for keeping the seek gesture; the
     click handler in js/site.js is untouched and works on touch as-is.
     ------------------------------------------------------------------- */
  .transport {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "play now  time"
      "wave wave wave";
    gap: 12px 14px;
    margin-top: 14px;
    padding-top: 14px;
  }
  .transport__play {
    grid-area: play;
    width: 48px;              /* 40px was under the 44px touch floor */
  }
  .transport__now  { grid-area: now; }
  .transport__time { grid-area: time; }

  /* equal specificity to the 720 block's `.transport .wave { display:none }`,
     and later in the cascade, so it wins without !important */
  .transport .wave {
    grid-area: wave;
    display: flex;
    height: 30px;
    gap: 1px;                 /* 2px gaps ate 126px of a 358px measure */
  }

  .transport__title {
    font-size: 15px;
    margin-bottom: 4px;
  }

  /* ── the section head ─────────────────────────────────────────────────
     44px is the floor of the desktop clamp, i.e. the heading was never sized
     for this page — it just stopped shrinking. "SELECTED" sets to ~296px of the
     358px measure at 15vw, which is the same relationship the 132px cut has to
     the desktop column. The 68px ceiling holds it at the top of this block.
     ------------------------------------------------------------------- */
  .music__list .h-section {
    font-size: clamp(46px, 15vw, 68px);
  }
  .sechead {
    margin-bottom: clamp(22px, 3.2vh, 28px);
  }
  .sechead__idx {
    margin-bottom: clamp(14px, 2vh, 18px);
  }

  /* ── the catalogue ────────────────────────────────────────────────────
     Keeping the 720 block's two-row shape ("n title" / ". meta") — the row is
     one button and the whole 53px of it is the target, so two lines cost nothing
     in reach. The 87px rows were tall because the meta line was pushed down by
     both an 8px row gap and an 8px margin; the height was padding, not content.
     Title up 19 → 22px, meta pulled tight under it, rows land at ~53px.
     ------------------------------------------------------------------- */
  .trk {
    padding: 7px 0 8px;
    gap: 4px 12px;
  }
  .trk__title {
    font-size: clamp(21px, 5.7vw, 26px);
    line-height: 1.06;
  }
  .trk__n {
    font-size: 10px;
  }
  /* year and len shrink-wrap and pack left, so they sit under the title as one
     short label instead of two right-aligned columns in a 98px phantom box */
  .trk__meta {
    margin-top: 0;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 0 12px;
  }
  .trk__stream {
    margin: 2px 0 10px 42px;
    font-size: 10px;
  }
  .trk__meta span {
    font-size: 10px;
    line-height: 1;
    letter-spacing: .14em;
  }

  /* the active row's red must still reach both viewport edges — site.css sets
     this to -16px, which matched the music agent's 16px rail before the three
     competing rails were unified onto --rail. */
  .trk::before { left: calc(var(--rail) * -1); right: calc(var(--rail) * -1); }

  .music__note {
    margin-top: 22px;
    max-width: none;          /* 40ch is a 280px column inside a 358px measure */
  }

  /* ── touch ────────────────────────────────────────────────────────────
     iOS keeps :hover on the last-tapped element until something else is tapped,
     which leaves a row lit and its title shifted 6px as if it were playing. The
     .on state already says that, truthfully, so hover states are withdrawn where
     there is no pointer.
     ------------------------------------------------------------------- */
  @media (hover: none) {
    .trk:hover::before { opacity: 0; }
    .trk.on::before    { opacity: 1; }
    .trk:hover .trk__title { transform: none; color: rgba(243,243,248,.86); }
    .trk.on .trk__title    { color: var(--paper); }
    .trk:hover .trk__n { color: var(--paper-faint); }
    .trk.on .trk__n    { color: var(--paper); }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     04 · VISUAL — mobile
     The opening was 30vw of a 1440px wall. At 390 it had collapsed to a
     240px slot standing in a room that was nine-tenths empty, held for 1.9
     viewports. Here the plate becomes the section: ~74vw x ~60svh, the
     phrase crosses behind its middle at five times the size, and the pin is
     cut from 190vh to ~112svh. Everything below is proportioned to the
     PLATE, not to the viewport — that is the desktop relationship, which is
     what was actually lost, not the pixel sizes.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── the pin's length ────────────────────────────────────────────────
     112svh is one screen plus a beat: enough that the frame is held, not
     enough that it is a corridor. (1604px → 945px at 390x844.)

     min-height is load-bearing, not padding. js/site.js divides by
     (offsetHeight - innerHeight); innerHeight on a phone swings between the
     small and the large viewport but is NEVER larger than 100vh, because vh
     IS the large viewport. 104vh therefore cannot be caught by it in either
     toolbar state, and the divisor stays positive. See risks.

     The background is the second half of that same problem: .film__pin is
     100svh, so when the toolbars retract the viewport is taller than the pin
     and a strip opens at the bottom of the section. Unpainted it is page ink
     (#090122); painted it is the colour the ground already ends on. */
  .film {
    height: 112vh;             /* fallback where svh is not understood */
    height: 112svh;
    /* NO min-height in vh: 112svh is ~99vh on iOS, so a 104vh floor would
       become the binding height and collapse the --fp divisor to ~34px.
       Ends on ABOUT's own first stop so the strip below the pin has no edge. */
    background: #030A94;
  }

  /* ── the seam into 05, taken off the scrub ───────────────────────────
     Desktop fades this in over --fp's last 45%. With the section at 112svh
     that window is ~100px of scroll, which does not read as a dissolve — it
     reads as a switch. So at mobile the hand-off is simply always true: the
     bottom edge of the pin IS the top edge of ABOUT, at every scroll
     position, and the pin's bottom edge is the only edge of this section
     that is ever visible (the pin always covers the viewport from the
     section's visible top). The radial mirrors the one ABOUT opens with
     — 74% 52% at 8% 0% — so the left corner steps as little as the middle.
     Nothing here reads --fp, so a collapsed divisor cannot break the join. */
  .film__ground::before {
    /* scrubs rather than held at 1 — pinned it washed the lower frame for the
       entire pin and put .film__cap on that wash. Window widened because the
       mobile pin travels ~12svh, not 90vh. */
    opacity: clamp(0, calc((var(--fp) - .2) / .8), 1);
    background:
      radial-gradient(86% 30% at 8% 100%, rgba(36,79,246,.34), transparent 68%),
      linear-gradient(180deg,
        transparent 56%,
        rgba(6,28,219,.14) 78%,
        rgba(3,10,148,.70) 92%,
        #030A94 100%);
  }

  /* ── the opening ─────────────────────────────────────────────────────
     Width is capped by BOTH axes, so the 9/16 plate can never grow taller
     than the room it stands in: 34svh of width is 60.4svh of height, and
     76vw is the width it is allowed to reach first on a tall phone.
     At 390x844 that resolves to 287 x 510 — 73.6vw wide, 60.4svh tall,
     +43% of the area it had. max-height only ever binds on a short, wide
     viewport (a small landscape phone), where it trades the aspect ratio
     for the composition and object-fit:cover takes the crop.
     The top/bottom-only mask is untouched: the plate still has no top and
     no bottom edge, only two cut sides. */
  .film__frame {
    width: min(76vw, 34svh);
    max-height: 62svh;
  }

  /* the light the opening throws back onto the blue. Re-sized to the new
     plate — ~2.2x its width, ~1.3x its height, which is the ratio it holds
     at desktop. In vw terms it is now much wider than the desktop spill,
     and it should be: the opening it belongs to is two and a half times
     bigger relative to the wall, so it emits that much more. */
  .film__spill {
    width: 140vw;
    height: 78svh;
  }

  /* ── the phrase ──────────────────────────────────────────────────────
     FATE IS IN LOVE WITH EFFORT, at 20vw instead of a 52px floor, passing
     behind the centre of the plate (.marquee is z-index 1, the frame is 2 —
     the order is already right, so nothing here touches it) and running off
     both sides of the screen instead of dissolving before it gets there.

     The edge mask goes: at this size a fade at 10%/90% would eat a whole
     word at each end and turn a line that continues past the viewport into
     a line that stops inside it. The viewport is the crop now.

     Opacity stays exactly .25 — it is declared once, on .marquee, and is
     not restated here. */
  .marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* Speed only — NOT the `animation` shorthand. site.css switches this row
     off with `animation: none` under prefers-reduced-motion; a shorthand
     here would set animation-name back to `slide` and hand a reduced-motion
     reader a loop they cannot stop. Touching the duration longhand alone
     leaves that name at `none`.
     300s over one span's width (~5500px at 78px type) is ~18px/s: one
     viewport width every ~21 seconds. Linear, and the loop is seamless
     because -50% of the row is exactly one of its two identical spans. */
  .marquee__row {
    animation-duration: 300s;
  }

  .marquee__row span {
    font-size: clamp(70px, 20vw, 132px);
    letter-spacing: -.032em;   /* the display cut tightens as it grows */
  }

  /* ── the two labels ──────────────────────────────────────────────────
     Measured off the pin's own height (svh) rather than vh, so they do not
     drift by ~50px as the browser toolbars come and go while the frame they
     sit on stays still. 9svh clears the 44px chrome bar; both clear the
     plate, which leaves ~167px of room above and below it at 390x844. */
  .film__idx { top: calc(var(--chrome-h) + 14px); }
  .film__cap { bottom: max(24px, 3.4svh); }

  @media (prefers-reduced-motion: reduce) {
    /* belt and braces: correct even if this block is ever loaded BEFORE
       site.css's own reduced-motion rules rather than after them */
    .marquee__row { animation-name: none; }
    .film {
      height: 112vh;
      height: 112svh;
    }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     05 · ABOUT — mobile
     One editorial column, read top to bottom:
       05 / ABOUT  ▸  the lead  ▸  the sub-lead  ▸  the plate  ▸  the ledger
     The 1100px block already stacks the areas in that order and puts the
     picture back IN FLOW; everything here is scale, air and bleed on top of
     it. Nothing touches .about's background, so the seam into it from
     .film__ground::before (which lands on #030A94) is untouched.
     ═══════════════════════════════════════════════════════════════════════ */

  .about {
    /* 22px unless the page's own gutter is already wider — so the section
       stays aligned with the rest of the page if --gut is retuned later */
    --about-pad: var(--rail);
    padding: clamp(64px, 8.5vh, 92px) var(--about-pad) clamp(72px, 10vh, 104px);
  }

  .about__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "body" "plate" "spec";
    gap: 28px 0;
    max-width: none;
  }

  /* the index sits tight on the sentence it opens; the 28px row gap is the
     whole distance, rather than a gap plus an inherited margin */
  .about .sechead,
  .about .sechead__idx { margin: 0; }

  /* ── the two paragraphs ──────────────────────────────────────────────
     The lead is the largest reading size on the page at this width and runs
     nearly edge to edge; the sub-lead steps down and dims, so the pair reads
     as one statement and its aside rather than as two blocks of copy.
     ------------------------------------------------------------------- */
  .about__body {
    /* inert below ~660px wide — it only stops the lead running to 720px of
       measure on a large phone in landscape or a small tablet */
    max-width: 620px;
  }
  .about__body .lead-in {
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.24;
    letter-spacing: -.022em;
    color: rgba(243,243,248, .92);
  }
  .about__body .lead-in + .lead-in { margin-top: 20px; }
  .about__body .lead-in--dim {
    font-size: clamp(18.5px, 5.4vw, 22px);
    line-height: 1.46;
    letter-spacing: -.01em;
    color: rgba(243,243,248, .66);
  }

  /* ── the plate ───────────────────────────────────────────────────────
     Edge to edge. At 390 the column is 346px wide and a picture inside it is
     a thumbnail; run it out to both screen edges and it is the only wide
     thing in the section, which is the whole reason it is there.
     ------------------------------------------------------------------- */
  .about__plate {
    margin: 12px calc(var(--about-pad) * -1) 0;

    /* The desktop fade is a composition device — it dissolves the picture
       toward the type column beside it. There is no column beside it here,
       so it is re-declared as a short, SIDE-ONLY soften: ~8% ramps that take
       the two vertical edges off the rectangle and nothing more. No top or
       bottom fade. Both the img and ::after wear it, because both already
       mask on this one property. To kill the fade outright instead, set
       --plate-fade: linear-gradient(90deg, #000, #000). */
    --plate-fade: linear-gradient(90deg,
      transparent 0%, rgba(0,0,0,.60) 3%, #000 8%,
      #000 92%, rgba(0,0,0,.60) 97%, transparent 100%);
  }
  .about__plate img {
    /* restated, not inherited on faith: if the picture ever went back out of
       flow the bled figure would collapse to nothing */
    position: static;
    width: 100%; height: auto;
    aspect-ratio: 3 / 2;          /* the source is 1800x1200 — no extra crop */
  }
  /* the room's tone settling back over it, cut to the picture's own box so it
     cannot veil the caption sitting under it in flow */
  .about__plate::after {
    inset: 0 0 auto 0;
    aspect-ratio: 3 / 2;
    background: linear-gradient(90deg,
      rgba(2,6,102,.38), rgba(2,6,102,.10) 26%, transparent 46%,
      transparent 62%, rgba(2,6,102,.34));
  }
  /* the light it throws back, pulled in so it stays behind the picture and
     reads only through the two fading edges */
  .about__plate::before {
    inset: 6% 10% 28% 10%;
    filter: blur(34px);
  }
  /* the caption comes back off the bleed and lands on the text margin */
  .about__plate figcaption {
    padding: 12px var(--about-pad) 0;
  }

  /* ── the ledger ──────────────────────────────────────────────────────
     The 720px block already made each row a single column. This makes the
     two halves read as label and value: the tag drops to the faint level and
     the fact becomes the largest thing in the row.
     ------------------------------------------------------------------- */
  .about .spec {
    margin-top: 16px;
    max-width: none;
  }
  .about .spec__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 17px 0 19px;
  }
  .about .spec dt {
    font-size: 10.5px;
    letter-spacing: .22em;
    color: var(--paper-faint);
  }
  .about .spec dd {
    font-size: clamp(16px, 4.4vw, 18px);
    line-height: 1.38;
    letter-spacing: -.008em;
    color: rgba(243,243,248, .90);
  }

}