/* ==========================================================================
   RESPONSIVE — intentional mobile composition, same visual language
   ========================================================================== */

/* ══ ≤1180px — tablet / small laptop ══════════════════════════════════════ */
@media (max-width:1180px){
  :root{ --head-h:78px; }

  .site-head{ grid-template-columns:1fr auto; }
  .site-head__role,.site-head__loc{ display:none; }
  .site-head__nav{ margin-right:0; gap:18px; }

  .intro__col{ grid-column:1 / 8; }
  .intro__media{ grid-column:8 / 13; margin-top:clamp(38px,6vw,64px); }



  .profile__side{ grid-column:1 / 5; }
  .profile__copy{ grid-column:5 / 13; }

  .cap__btn,.cap__panel-in{ grid-template-columns:44px minmax(0,5fr) minmax(0,4fr) 22px; }

  /* three columns get tight on a tablet-width viewport before the next
     breakpoint drops to one — settle at two in between */
  .work__grid{ grid-template-columns:repeat(2,1fr); }
  .work__grid .card:nth-child(3n+2){ margin-top:0; }
  .work__grid .card:nth-child(3n+3){ margin-top:0; }
  .work__grid .card:nth-child(even){ margin-top:clamp(30px,5vw,84px); }
}

/* ══ ≤860px — large phone / small tablet ══════════════════════════════════ */
@media (max-width:860px){
  :root{
    --t-meta:13px;
    --t-body:16px;
    --head-h:66px;
  }

  /* the inline nav becomes a hamburger-triggered overlay on a phone */
  .site-head__nav{ display:none; }
  .menu-btn{ display:flex; }

  /* HERO — the landscape photograph crops to the keyboard on a tall screen,
     and the scrim deepens so stacked type still reads */
  .hero{ height:100svh; }
  .hero__media img{ object-position:56% 46%; }
  /* same fix as layout.css: a bare color can't lead a multi-layer
     `background` list, so the flat wash is a flat-color gradient instead */
  .hero__scrim{
    background:
      linear-gradient(rgba(10,18,14,.32), rgba(10,18,14,.32)),
      linear-gradient(to top, rgba(14,26,20,.86) 0%, rgba(14,26,20,.52) 30%, rgba(14,26,20,.16) 62%),
      linear-gradient(to bottom, rgba(8,14,11,.94) 0%, rgba(10,18,14,.68) 8%, rgba(14,26,20,.30) 18%, rgba(14,26,20,0) 34%);
  }
  .hero__type{ justify-content:center; }
  /* no room for two words on one phone line — they stack, still reading
     CRAFTING / DIGITAL / EXPERIENCES top to bottom */
  .hero__row{ display:block; }
  .hero__word{ line-height:.88; }
  .hero__word--a,
  .hero__word--b{ font-size:clamp(2.5rem,13.2vw,4.6rem); }
  .hero__word--c{ font-size:clamp(2.4rem,12.4vw,4.4rem); white-space:normal; }
  .hero__statement{
    width:100%;
    font-size:clamp(1.15rem,5.2vw,1.7rem);
    line-height:1.14;
    margin-top:clamp(20px,3vh,32px);
  }
  .hero__index{ display:none; }

  /* MANIFESTO — swap to the word-grouping built for a narrow column */
  .manifesto{ min-height:86svh; }
  .manifesto__type--desktop{ display:none; }
  .manifesto__type--mobile{ display:block; }
  .mline{ font-size:clamp(2.6rem,15vw,5rem); }
  .manifesto__hint{ margin-top:26px; }

  /* INTRO */
  /* single column: the copy gets the full measure, portrait follows beneath */
  .intro{ padding-bottom:clamp(60px,10vh,110px); }
  .intro__col,.intro__media{ grid-column:1 / 13; }
  .intro__note{ margin-top:30px; }
  .intro__note p{ max-width:none; }
  .intro__media{ margin-top:44px; }
  .intro__media-inner{ aspect-ratio:4/5; max-height:none; }
  .stats{ margin-top:40px; }
  .stats__fig{ font-size:2.1rem; }

  /* WORK — one card per row; the stagger offset would only waste height */
  .work__grid{
    grid-template-columns:1fr;
    row-gap:clamp(38px,8vw,60px);
  }
  .work__grid .card:nth-child(even),
  .work__grid .card:nth-child(3n+2),
  .work__grid .card:nth-child(3n+3){ margin-top:0; }
  .card__mat{ padding:14px; }
  .card__meta{ margin-top:14px; }
  .card__disc{ display:none; }

  .res{ grid-template-columns:repeat(2,1fr); row-gap:24px; margin-top:32px; }

  /* INTERLUDE */
  .interlude{ min-height:480px; }
  .interlude__type{ font-size:clamp(1.95rem,8.6vw,3.2rem); max-width:none; line-height:.98; }

  /* CAPABILITIES */
  .cap__btn{ grid-template-columns:34px 1fr 18px; row-gap:3px; align-items:start; padding:15px 0; }
  .cap__i{ grid-row:1 / 3; }
  .cap__d{ grid-column:2; font-size:11px; color:var(--ink-45); }
  .cap__chev{ grid-column:3; grid-row:1; }
  .cap__row:hover .cap__i,
  .cap__row:hover .cap__n,
  .cap__row:hover .cap__d{ transform:none; }
  /* no padding on the grid item — it survives the collapsed 0fr track and
     leaks a sliver of the closed panel. The children carry it instead. */
  .cap__panel-in{ grid-template-columns:34px 1fr; row-gap:14px; padding:0; }
  .cap__panel-in > *{ padding:12px 0 24px; }
  .cap__panel-in p{ grid-column:2; }
  .tags{ grid-column:2; }

  /* PROFILE */
  .pn{ font-size:clamp(1.7rem,8.2vw,2.7rem); }
  .pn--b{ text-align:left; }
  .profile__side,.profile__copy{ grid-column:1 / 13; }
  .profile__copy{ margin-top:30px; }
  .profile__copy p{ max-width:none; }

  /* CONTACT — one field per row on a phone */
  .cf{ grid-template-columns:1fr; }
  .cf > .cf__field:nth-of-type(1),
  .cf > .cf__field:nth-of-type(2){ grid-column:1; }
  .cf__send{ width:100%; }

  .contact{ min-height:88svh; }
  .cline{ font-size:clamp(2.4rem,13.5vw,4.4rem); }
  .contact__row{ margin-top:40px; }
  .contact__mail{ font-size:1.02rem; word-break:break-all; }

  /* FOOTER stacks */
  .foot{
    grid-template-columns:1fr; row-gap:12px;
    text-align:left; padding-top:26px;
    border-top:1px solid var(--line);
    margin:0 var(--pad); padding-left:0; padding-right:0;
  }
  .foot__r{ text-align:left; }
}

/* ══ ≤480px ═══════════════════════════════════════════════════════════════ */
@media (max-width:480px){
  .res{ grid-template-columns:1fr; }
}

/* ══ touch / coarse pointer — no custom cursor, no hover-only affordances ══ */
@media (hover:none),(pointer:coarse){
  .cursor{ display:none !important; }
  .card,.cap__btn,.cw-next{ cursor:auto; }
}

/* ══ short landscape phones ═══════════════════════════════════════════════ */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:460px; }
  .hero__type{ justify-content:center; padding-top:0; }
  .hero__word{ font-size:clamp(2rem,9vw,3.4rem); }
  .manifesto{ min-height:auto; padding:110px var(--pad); }
  .contact{ min-height:auto; padding-top:110px; padding-bottom:60px; }
}

/* ══ print ════════════════════════════════════════════════════════════════ */
@media print{
  .cursor,.loader,.site-head,.manifesto__canvas,.grain{ display:none !important; }
  body{ background:#fff; color:#000; }
  .interlude{ background:#fff; color:#000; }
  .interlude__type .fw{ color:#000; }
}