/* Responsive layout rules for the ported pages. design-system/tokens/space.css
   defines a single desktop-oriented gutter (272px) and no breakpoints of its own
   (the source is a single-artboard identity study, not a responsive site) — this
   file adds what a real multi-viewport site needs, using only existing tokens.
   No new colors, no new radii, nothing outside the token set. */

/* Two-column content + fixed-width sidebar (about.php, work/_template.php).
   --sidebar-width is set inline per call site; this only owns the breakpoint. */
.split-layout{
  display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar-width,320px);
  gap:var(--space-9);align-items:start;
}
@media (max-width:900px){
  .split-layout{grid-template-columns:1fr}
  .split-layout > aside{position:static !important;top:auto !important}
}

@media (max-width:900px){
  .page-shell,.site-header-inner,.site-footer-inner{padding-left:var(--space-6);padding-right:var(--space-6)}
}
@media (max-width:480px){
  .page-shell,.site-header-inner,.site-footer-inner{padding-left:var(--space-5);padding-right:var(--space-5)}
}

/* Header: the "Get in touch" button duplicates the About nav link's destination
   (both go to about.php), so it's the first thing to drop under pressure. */
@media (max-width:640px){
  .site-header-inner{gap:var(--space-4);flex-wrap:wrap;height:auto;padding-top:var(--space-3);padding-bottom:var(--space-3)}
  .site-header-inner .btn{display:none}
  .site-nav{gap:var(--space-4)}
}

/* Footer: three items in a row (mark, blurb, links) stack on narrow screens. */
@media (max-width:720px){
  .site-footer-inner{flex-direction:column;gap:var(--space-5)}
  .site-footer-links{align-items:flex-start;margin-left:0}
  .site-footer-blurb{max-width:none}
}