@media screen and (max-width: 1024px) {

  body {
    overflow-x: hidden; /* clip decorative corner handles etc. that poke past the edge (no dragging at this size) */
  }
  
  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 96px; /* clears the fixed actions bar over the credits */
  }

  #gate { min-height: 0; }  /* id beats .work-frame's min-height:0 above */

  /* Wrapping these elements into one band collapses .container's flex `gap`
     from applying between them (they're no longer direct flex children of
     .container). Reproduce the same 24px rhythm inside each band so nothing
     visibly moves. */
  .work-band,
  .about-band {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  /* One flat 24px gap put a title exactly as far from its own list as the
     previous list was from the next title, so the band read as five loose
     items instead of two sections. The gap now carries the TIGHT relationship
     (a heading to the thing it heads) and the section break is a margin on
     whatever starts a new group.
     :not(.work-title) matters: the Work heading's element carries BOTH classes,
     and it is the band's first child — a margin there would push the whole band
     down rather than separate anything. */
  .work-band { gap: 12px; }
  .work-band > .projects-title:not(.work-title) { margin-top: 28px; }

  /* The bar stays, because the contact links live in it now and hiding it here
     would take CV / E-mail / LinkedIn off mobile entirely. The reset button is
     still hidden: it was hidden before this bar existed and the stacked flow
     layout has nothing to reset. Page gets bottom padding so the fixed bar
     never covers the credits. */
  .toolbar-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(100vw - 32px);
    bottom: 16px;
    gap: 8px;
  }

  .toolbar-container .reset-button {
    display: none;
  }


  .hero {
    width: calc(100% - 48px);
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* left-align every child (title, description, buttons) to the same edge */
    padding: 210px 24px 32px 24px; /* clears the top-left avatar (bottom ~188px) */
    gap: 36px; /* was 16px — noticeably more air between title / description / buttons */
  }

  .hero-hello {
    font-size: clamp(39px, 8.1vw, 48px); /* fluid greeting: ~44px@390 up to ~54px, no cliff */
    line-height: 1.05;
    padding: 0px;
    letter-spacing: -0.02em;
    text-align: left;
    margin-left: 0;  /* override the desktop auto-centering margins */
    margin-right: 0;
  }

  .hero-description {
    font-size: 14px;
    line-height: 21px;
    width: calc(100% - 24px);
    padding: 0px;
    text-align: left;
    margin-left: 0;  /* drop the desktop auto-centering margins so it left-aligns with the title/buttons */
    margin-right: 0;
  }

  /* gap + flex-wrap come from paper.css's ≤1024 block, which loads after this
     file and wins; only the centring and the width reset belong here. */
  .social-button-group {
    justify-content: center;
    width: auto;
  }
  
  .social-button {
    border-radius: 20px;
    font-size: 14px;
    padding: 6px 12px 6px 10px;
  }

  .hero-note {
    display: none;
  }


  /* Mobile hero: avatar pinned top-left, beard aligned on its face. Every hat
     is hidden for a clean corner. avatar/beard opt out of touch-drag
     (touch-action:auto beats the coarse-pointer .dressup rule), so a tap on the
     avatar just toggles the beard (script.js) instead of starting a drag. */
  .avatar {
    position: absolute;
    /* Restored for the border-free file: 168x168 held ~125x148 of visible
       avatar; this box shows the new artwork at that height, with top/left
       moved so its top-left corner lands where it did. The beard below was
       pinned against the old rendering and may want a nudge. */
    max-width: 114px;
    max-height: 148px;
    top: 32px;
    left: 43px;
    margin: 0; /* clear the desktop centering margin */
    touch-action: auto;
    cursor: pointer;
  }

  .beard {
    position: absolute;
    /* DERIVED FROM THE DESKTOP RENDERING, not eyeballed — the beard has to sit
       on the face identically at every width. Measured desktop fractions of
       the avatar BOX (271x148 -> 353): width .77122, height .3796, centre 4px
       (.01476) left of the avatar's centre, top .40510 down from its top.
       Applied to this band's avatar box (114x148 at 43,32):
         w  = 114 * .77122 = 87.9  -> 88
         h  = 148 * .3796  = 56.2  -> 56
         left = 43 + 57 - 44 - 1.7 = 54.3 -> 54
         top  = 32 + 148 * .40510  = 92.0 -> 92
       Re-derive these if either box changes; do not nudge one without the
       other or the beard drifts off the mouth again. */
    max-width: 88px;
    max-height: 56px;
    top: 92px;
    left: 54px;
    margin: 0;
    touch-action: auto;
  }
  .beard.beard-off { opacity: 0; pointer-events: none; }

  .wizard-hat { display: none; }
  .baseball-cap { display: none; }
  .beanie { display: none; }
  .pin { display: none; }

  /* Both canvas flourishes show on every breakpoint. In the stacked flow they
     land in DOM order inside .about-band rather than by an explicit order
     value: walk figure under the About paragraph, stack at the end of the
     About section after the post-it. Kept scoped to the band so these stay at
     the same specificity as the desktop rules they mirror. The paper.css
     ≤1024 `.draggable` neutraliser this used to have to beat is hero-scoped
     now, and neither element carries .draggable any more. */
  .about-band > .walk-figure {
    margin-left: 24px;
    width: 260px;
  }
  .about-band > .about-stack {
    position: relative;   /* positioning context for the absolutely-stacked images */
    margin-left: 24px;
    width: 220px;
    height: 220px;
  }


  .about-me {
    padding: 20px;
    max-width: calc(100% - 88px);
    min-width: calc(100% - 88px);
    margin: 0 auto; /* centered in the stacked flow */
    border: none;
    /* belt-and-braces: neutralize the desktop top:1930px/left:40px offset so this
       note can never re-inherit it and leave a blank gap after the hero. */
    top: 0;
    left: 0;
  }

  .about-me-title {
    font-size: 16px;
    line-height: 21px;
  }

  /* Checkbox list, "New" button and strike-through-on-check behave exactly
     like desktop at every breakpoint. The static .about-me-text paragraph and
     the .about-me-tagline stay hidden (base rules already set display:none), so
     nothing to override here. */

  /* About-me section heading + lead — flow in the stacked column */
  .about-title {
    font-size: 28px;
    padding: 0 0 0 24px;
    border: none;
  }
  .about-lead {
    margin: 0 24px;
    padding: 0;
    /* auto, so it stretches to the column minus those margins. This used to
       come free from `.draggable { width: auto }`; with the class gone the
       base `width: 760px` leaked in and cut the bio 92px narrow. Declared here
       the same way .work-frame and .credits already declare theirs. */
    width: auto;
    gap: 12px;
    font-size: 14px;
    line-height: 1.55;
    border: none;
  }

  /* Career timeline → native horizontal swipe strip. Cards snap; the page still
     scrolls vertically. Uses max-width (not width): base styles.css declares
     `.timeline { width: var(--content) }` OUTSIDE its desktop media block, so
     1328px would otherwise leak straight to mobile. This max-width is the only
     thing clamping it here. */
  .timeline {
    position: static;
    margin: 0 0 0 24px;
    max-width: calc(100% - 24px);
    padding: 0;
    border: none;
    gap: 10px;
  }
  .timeline-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 24px 12px 0; /* trailing room so the last card can rest un-faded */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* fade the right edge so it reads as "there's more →" */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
  }
  .timeline-track::-webkit-scrollbar { display: none; }
  .timeline-track::before { display: none; } /* no baseline on the strip */
  .timeline-item {
    flex: 0 0 200px;
    scroll-snap-align: start;
    gap: 6px;
    padding: 16px;
    background: var(--pp-card);
    border: 1px solid var(--pp-hairline);
    border-radius: 14px;
    box-shadow: var(--pp-shadow-sm);
  }
  .timeline-item::before { display: none; } /* no dot on cards */
  .timeline-year { font-size: 10px; }
  .timeline-role { font-size: 14px; }
  .timeline-company { font-size: 12px; }
  .timeline-hint { display: none; } /* the peeking next card is hint enough */

  /* No divider on tablet/mobile — the hand-drawn squiggle is desktop-only. */
  .divider { display: none; }


  .projects-title {
    font-size: 28px;
    padding: 0px 0px 0px 24px;
    border: none;
  }

  .projects-frame,
  .client-frame {
    left: 0;
  }

  /* Surfaceless wrapper: no padding/inset of its own so the cards line up with
     the rest of the page content (24px margins). */
  .work-frame {
    position: relative;
    font-size: 12px;
    margin: 0px 24px;
    padding: 0px;
    width: calc(100% - 48px);
    height: auto;
    min-height: 0; /* base floors the desktop gate; not on mobile */
    text-align: center;
    top: 0px;
  }
  .work-frame::before { display: none; } /* no ring on small screens */

  /* .work-frame centres its text on small screens, which fought the gate's
     top-left alignment: the two paragraphs sat centred while the input row and
     the button sat left, in the same box. The gate is left-aligned at every
     width now; #protected keeps the frame's centring. */
  #gate { text-align: left; }

  /* Collaboration flows under Work on small screens */
  .collab {
    position: static;
    left: auto;
    right: auto;
    margin: 48px 24px 0;
  }
  .collab-title { font-size: 28px; margin-bottom: 28px; }
  .collab-top { flex-direction: column; gap: 40px; margin-bottom: 56px; }
  /* Desktop DOM order is quotes-then-paragraph (matches the reference layout,
     quotes left / paragraph right); on the stacked mobile column the paragraph
     reads better first, so pull it ahead with flex order instead of DOM order. */
  /* No order: -1 any more. The statement is FIRST in the DOM now, so the
     stacked column already leads with it. */
  .collab-intro { flex: none; }
  .collab-statement { font-size: 21px; }
  /* quotes wrap exactly like the contribution blocks below them */
  .collab-quotes { display: flex; flex-wrap: wrap; }
  .quote { flex: 1 1 380px; }

  /* Rows keep the desktop two-column shape: the arrow on the right marks the
     whole row as a link, not just the copy. The rule between rows still does
     the grouping. */
  .work-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 20px 0;
    text-align: left;
  }
  .row-title { font-size: 16px; }
  .row-desc {
    font-size: 12px;
    -webkit-line-clamp: 2; /* the copy wraps at this width; two lines, then clip */
  }
  .row-arrow { font-size: 16px; }

  /* width matches .timeline's own pattern (margin-left 24, width calc(100% -
     24px), flush to the right edge) rather than the symmetric-both-sides
     calc(100% - 48px) an earlier pass left here: that extra 24px was dead for
     as long as paper.css's .draggable{width:auto} overrode it, and measuring
     it after the class came off shows it isn't just cosmetically narrower —
     it moves a line break. At container widths ~438-460px this narrower
     measure wraps the credits to two lines where the baseline width (and
     .timeline's identical pattern) still fits one, so restoring it. */
  .credits {
    margin: 0px 0px 0px 24px;
    padding: 0px;
    width: calc(100% - 24px);
    border: none;
  }

  /* Below 1025 there is no dragging and no real hover, so kill the hero's
     drag/hover chrome: script.js keeps the .draggable class (only the
     interactable is disabled) and a sticky tap-hover would otherwise paint
     selection borders and corner handles. Nothing below the hero has this
     chrome any more, so this is hero-scoped now. */
  .hero .editablesquare1,
  .hero .editablesquare2 { display: none; }
  .hero .draggable:hover,
  .hero .draggable:focus,
  .hero .draggable:focus-visible { outline: none; }

}
@media (max-width: 1024px) {
  /* TL;IAA control. The hero is a flex column here and its children go static,
     so the canvas placement collapses into the flow, left-aligned with the rest
     of the hero. The drag handles stop meaning anything at this width, matching
     how every other canvas piece behaves. */
  .tliaa {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    top: auto;
    left: auto;
    right: auto;
    /* Kill the base auto margins: on a flex item they beat the hero's
       align-items and would centre this alone while the title, description and
       everything else in the stacked hero stay left-aligned. */
    margin-left: 0;
    margin-right: 0;
    width: auto;
    text-align: left;
  }
  /* The expansion is the joke's punchline and there is room for it inline. */
  .tliaa-expand { font-size: 10px; }
  .tliaa-copy { font-size: 12px; padding: 6px 12px; }
  .tliaa-status { position: static; max-width: none; margin: 0; text-align: left; }
  .tliaa-gate { width: min(280px, calc(100vw - 32px)); }
}