/* Carried forward verbatim from the tuned <style> block of the 2026-09-15
   homepage. These values were measured against real Archivo web rendering;
   per data/tokens.json they win over the Figma-measured numbers. */

/* ============================================================
   SECTION SHELL
   ============================================================ */
.sec{padding-block:clamp(56px,8vw,120px)}
.sec-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  flex-wrap:wrap;border-top:1.5px solid var(--ink);padding-top:14px;
  margin-bottom:clamp(30px,4.4vw,58px);
}
.sec-head h2{
  font-size:var(--step-label);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .st-grid{grid-template-columns:1fr;gap:28px}
  .xp-row{grid-template-columns:1fr;gap:6px}
  .xp-where{padding-top:2px}
}
@media (max-width:720px){
  .work-grid{grid-template-columns:1fr;gap:clamp(30px,7vw,46px)}
  .proj--soon{grid-template-columns:1fr;gap:18px;align-items:start}
  .proj--soon .soon-frame{aspect-ratio:16/9}
  .nav-links{gap:12px}
  .nav-links a:not(.nav-hire):not([href="#work"]){display:none}
  .mh-right{text-align:left}
  .mh-foot{gap:14px}
  .c-row{flex-wrap:wrap;gap:4px 14px}
  .c-right{width:100%;justify-content:space-between}
  .masthead{min-height:min(88svh,720px)}
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .wordmark{clip-path:none !important}
  .mh-foot p{opacity:1 !important;transform:none !important}
  .proj-media{animation:none !important;clip-path:none !important}
}