/* ==========================================================================
   responsive.css — responsive lane (owns ONLY this file)
   Loaded LAST per CONTRACT, so equal-or-higher-specificity rules here win
   by source order. All rules live inside media queries; base design belongs
   to other lanes.

   Judged widths:
     390 x 844  — must echo p5aholic mobile: left-aligned, quiet, generous air,
                  ZERO horizontal overflow (document.scrollWidth === innerWidth)
     1920 x1080 — capped line lengths, expanded whitespace (FROZEN — the wide
                  block below is byte-identical to round 1)

   Round-2 fixes (every desktop leak reset by name):
     .site-top        layout.css pins it position:absolute over the hero at the
                      top of the viewport — the round-1 kill. Now static, in
                      flow, so the nav always sits ABOVE the name.
     .hero            justify-content:center undone (top-anchored stack).
     .work-list       margin-left: var(--hang) undone (token + property).
     .work-item::before  the −5.5rem hanging number becomes a static block
                      inside the column.
     .work-row        styled BY CLASS — the Blockscom row is a <span>, not an
                      <a>, and round 1 missed it, leaving a desktop
                      space-between row with a flex-shrink:0 meta (overflow).
     .about-text      margin-left: min(14vw,16rem) step-off undone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   NARROW — up to 720px
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {

  :root {
    /* lane-private var (not a contract token): one gutter for the whole page.
       390px -> ~31px side gutter, close to the reference's left margin. */
    --rsp-gutter: clamp(1.5rem, 8vw, 2.75rem);
    /* Win at the token level too: layout.css hangs everything off these. */
    --gutter: var(--rsp-gutter);
    --hang: 0rem;
  }

  /* Belt-and-braces. `clip` (not `hidden`) so no new scroll container is
     created and position:sticky elsewhere keeps working. Real causes are
     fixed below — this only catches sub-pixel strays from parallax drift. */
  html,
  body { overflow-x: clip !important; }

  /* Cause-level guards: no replaced element may size past the viewport.
     height:auto + the mandatory width/height attrs on #hero3d = aspect kept. */
  img,
  svg,
  video { max-width: 100%; height: auto; }
  [data-parallax],
  .hero-3d,
  .hero-hint { max-width: 100%; }

  /* ---- header: IN FLOW (layout.css makes it position:absolute over the
     hero — the round-1 kill). Static = the nav occupies its own band at the
     top and the hero starts below it; overlap becomes impossible. Brand
     left, inline text links right; wraps to a second line rather than ever
     pushing past 390px. ---- */
  .site-top {
    position: static;
    inset: auto;
    z-index: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.55rem 1.5rem;
    padding: 1.3rem var(--rsp-gutter) 0.95rem;
  }
  .site-top .brand { white-space: nowrap; }
  .site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.15rem;
  }
  .site-nav a {
    white-space: nowrap;
    font-size: var(--step--1);
    letter-spacing: 0.14em; /* vs desktop 0.18em: three links fit one row */
  }

  /* ---- hero: stacked in DOM order — name, role, figure (~78vw), hint
     pinned to the bottom of the first screen. Every desktop absolute /
     centering / stagger value is reset by name so nothing collides. ---- */
  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; /* undo desktop vertical centering */
    min-height: calc(100vh - 5.5rem);
    min-height: calc(100svh - 5.5rem); /* header is in flow now */
    padding-top: 0;
    padding-inline: var(--rsp-gutter);
    padding-bottom: clamp(2.25rem, 9vw, 3.5rem);
  }
  .hero .hero-name,
  .hero .hero-role {
    position: static;
    margin: 0;
    max-width: 100%;
  }
  .hero .hero-name {
    margin-top: clamp(1.4rem, 7vw, 2.6rem);
    /* contract scale, cut to fit: ~49px at 390, hard vw ceiling */
    font-size: min(calc(var(--step-4) * 0.66), 12.5vw);
    line-height: 1.04;
    letter-spacing: -0.015em;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .hero .hero-name .ln-2 { margin-left: 0.55em; } /* keep the stagger, tighter */
  .hero .hero-role {
    margin-top: 0.85em;
    font-size: var(--step-0);
    line-height: 1.5;
  }
  .hero .hero-3d {
    position: relative;
    inset: auto;
    align-self: center;
    width: min(78vw, 360px); /* ~304px at 390 — never wider than 78vw */
    max-width: 78vw;
    margin: clamp(2.25rem, 10vw, 4rem) 0 0;
  }
  .hero .hero-3d img {
    display: block;
    width: 100%;
    height: auto;
  }
  .hero .hero-hint {
    position: static;
    inset: auto;
    writing-mode: horizontal-tb; /* undo any vertical side-label treatment */
    transform: none;
    margin: auto 0 0;            /* bottom of the first screen */
    padding-top: clamp(2.5rem, 10vw, 4rem);
    font-size: var(--step--1);
  }

  /* ---- sections: tighter rhythm than desktop, still airy ---- */
  .work,
  .about,
  .contact {
    margin-block: 0;
    padding-block: clamp(4rem, 16vw, 6.5rem);
    padding-inline: var(--rsp-gutter);
  }
  .sec-title { margin-bottom: clamp(1.9rem, 9vw, 3rem); }

  /* ---- work list: one clean column flush with the spine. The desktop
     hanging-number composition (list shoved right by --hang, numbers
     absolute at −5.5rem) is fully undone: margin cleared, numbers become
     static accent labels above each name, inside the gutter. ---- */
  .work-list {
    display: flex;
    flex-direction: column;
    gap: clamp(2.4rem, 11vw, 3.5rem);
    margin: 0;               /* kills layout's margin-left: var(--hang) */
    padding: 0;
    max-width: 100%;
    list-style: none;
  }
  .work-item {
    width: 100%;
    min-width: 0;
    padding: 0;              /* rhythm comes from the list gap */
  }
  .work-item::before {
    position: static;        /* was absolute at left: −5.5rem */
    left: auto;
    top: auto;
    display: block;
    margin-bottom: 0.65em;
  }
  /* By CLASS, not tag: the Blockscom row is a <span class="work-row">. Both
     variants stack name-over-meta so nothing fights a right-aligned span. */
  .work-item .work-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45em;
    width: 100%;
    min-width: 0;
  }
  .work-item .work-name {
    max-width: 100%;
    font-size: var(--step-2);
    line-height: 1.12;
    white-space: normal;     /* undo any desktop nowrap row treatment */
    overflow-wrap: anywhere; /* long project names can never overflow 390 */
  }
  .work-item .work-meta {
    flex-shrink: 1;          /* desktop sets 0 for the two-ended row */
    max-width: 100%;
    text-align: left;        /* desktop right-aligns it */
    font-size: var(--step--1);
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* ---- about: narrow ragged column flush left, like the reference bio ---- */
  .about .about-text {
    margin-left: 0;          /* undo desktop min(14vw, 16rem) step-off */
    max-width: 34ch;
    font-size: var(--step-0);
    line-height: 1.75;
  }

  /* ---- contact + footer ---- */
  .contact .contact-link {
    display: inline-flex; /* must stay flex — the platform mark sits beside the label */
    max-width: 100%;
    font-size: var(--step-1);
    line-height: 1.3;
    white-space: normal;
  }
  .contact .contact-label {
    min-width: 0;
    overflow-wrap: anywhere; /* URL-shaped link text breaks, never scrolls */
  }
  .contact .contact-ico {
    align-self: flex-start;
    transform: translateY(0.18em); /* stays on the first line when a long handle wraps */
  }
  .site-end {
    padding: 2.25rem var(--rsp-gutter) 2.75rem;
  }
}

/* --------------------------------------------------------------------------
   WIDE — 1440px and up
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {

  /* same belt-and-braces at the judged 1920 width */
  html,
  body { overflow-x: clip !important; }

  /* measure caps — unbounded line length is the enemy at 1920 */
  .about .about-text { max-width: 34ch; }
  .hero .hero-role { max-width: 40ch; }
  .work-item .work-meta { max-width: 72ch; }

  /* figure may grow slightly; width only — desktop anchoring (top/left/right)
     stays whatever the layout lane chose, so composition is preserved */
  .hero .hero-3d {
    width: min(36vw, 660px);
    max-width: 44vw; /* hard ceiling: can never crowd the viewport */
  }
  .hero .hero-3d img {
    width: 100%;
    height: auto;
  }

  /* let whitespace expand between page sections */
  .work,
  .about,
  .contact { padding-block: clamp(8rem, 13vh, 12rem); }
}