/* ==========================================================================
   Responsive — the grid scaled proportionally, not reflowed.
   No hamburger: two short links stay visible at every width.
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --page-margin: 44px;
    /* Not the desktop's 1920 reference: tablet-sized windows keep the 1440
       scale, or the chrome would shrink to unreadable. */
    --u: min(1px, calc(100vw / 1440));
    /* Scene treated as an 1180px design canvas so the TV keeps presence. */
    --us: min(1px, 0.084746vw);
  }
  .masthead { inset-inline: 44px; inset-block-start: 40px; }
  .readout__title { inset-inline-start: 44px; }
  .readout__role  { inset-inline-end: 44px; }
}

@media (max-width: 768px) {
  /* The author's phone frame (393 x 852), scaled with the width:
     - the TV is 403 wide (a hair past both edges), centred, its painted top
       299px above the bottom at 393 — screen fully in view;
     - the tapes are 588 x 80.4 scene px (1.3x the desktop proportion), stacked
       flush on the set, IRONHOLLOW 18px left of centre and SOLN 15px right.
     us = 403 / 711 of the width; the crown is the TV box top in scene px. */
  :root {
    --page-margin: 20px;
    --us: 0.144226vw;
    --tv-crown: 529.27;
    --tv-alpha-trim: 0.9;
    --tape-w: 588;
    --tape-h: 80.4;
    --tape-pitch: 77.6;
  }
  /* The phone set: the author's own 393x300 television (assets/TV-mobile.*),
     the top of the set to the bottom of the screen, full width and sat on the
     bottom edge. Its glass is x 50-341, y 50-259 of the image, so the screen
     overlays re-register to that; the crown is the image's height in scene
     px (300/393 of the width over --us), which leaves the tapes where they
     were. There is no switched-off photo of this set, so "off" is a dark
     glass painted on the same rect. The physical power knob is out of frame. */
  .tv {
    --screen-x: 12.723%;
    --screen-y: 16.667%;
    --screen-w: 74.046%;
    --screen-h: 69.667%;
    inset-inline-start: 0;
    inset-block-end: 0;
    inline-size: 100vw;
    block-size: calc(100vw * 300 / 393);
    transform: none;
  }
  .tv__lit {
    background-image: url('../assets/TV-mobile.png');
    background-image: image-set(url('../assets/TV-mobile.webp') type('image/webp'),
                                url('../assets/TV-mobile.png')  type('image/png'));
    background-size: 135.052% 143.541%;
    background-position: 49.020% 54.945%;
  }
  .tv__off { transform: none; }
  .tv__off picture { display: none; }
  .tv__off::after {
    content: '';
    position: absolute;
    inset-inline-start: var(--screen-x);
    inset-block-start: var(--screen-y);
    inline-size: var(--screen-w);
    block-size: var(--screen-h);
    border-radius: 5% / 7%;
    background: radial-gradient(120% 110% at 50% 38%, #1a1d24, #0b0c10 70%);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.7);
  }
  .tv__power--button { display: none; }

  .tape { --tape-offset: calc(-32.6 * var(--us)); }
  .tape:nth-child(even) { --tape-offset: calc(26.5 * var(--us)); }

  /* The phone nav: logo 40x21 at (23, 37), buttons 26x24 with their right
     edge 28 in, the row centred on the logo. Same as the case-study header. */
  .masthead {
    inset-block-start: 36px;
    inset-inline-start: 23px;
    inset-inline-end: 28px;
    align-items: center;
  }
  .masthead__logo { inline-size: 40px; block-size: 21px; }
  .nav { gap: 16px; }

  /* No project title or role on phones: the spines are the labels. */
  .readout { display: none; }

  /* Expand the tap target without changing the rendered spine. */
  .tape__link::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: 44px;
    transform: translateY(-50%);
  }

  .loader__skip { inset-block-end: 20px; inset-inline-end: 20px; }
}

/* ==========================================================================
   Reduced motion
   ==========================================================================
   Fewer and gentler, not zero. The VHS/CRT concept still reads: the screen
   still turns to static and the static still gives way to the work page. What
   goes is the large rapid scale movement, the flicker, and the stepping.
   Per-component overrides live with their components; this is the floor.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 160ms !important;
    transition-timing-function: linear !important;
    scroll-behavior: auto !important;
  }
}