/* Responsive layer.
   The pages are authored with inline styles, so these rules use !important to
   win against them. Scoped to "body > div ..." so the print-oriented CV pages
   (whose root is <doc-page>) are never touched. */

img{max-width:100%}

/* ---------- Mobile nav / burger menu (index page) ----------
   Hidden on desktop; the <=768px block below turns it on. */
body > div > nav .nav-toggle{position:absolute;opacity:0;pointer-events:none}
body > div > nav .nav-burger{display:none}

/* ---------- 1024px and below: tighten gutters, let the nav wrap ---------- */
@media (max-width:1024px){
  body > div > nav,
  body > div > header,
  body > div > section,
  body > div > footer,
  body > div > div{
    padding-left:40px !important;
    padding-right:40px !important;
  }
  body > div > nav{flex-wrap:wrap !important;row-gap:14px !important}
  body > div > nav > div:last-child{flex-wrap:wrap !important;row-gap:12px !important;gap:20px !important}
  body > div > header h1{font-size:46px !important}
  body > div > section h2{font-size:32px !important}
  /* hero: portrait below the copy rather than squeezed beside it */
  body > div > header > div[style*="grid-template-columns:1.35fr"]{
    grid-template-columns:1fr !important;
    gap:36px !important;
  }
  body > div > header img{max-height:430px !important}
  /* four- and three-up rows halve before they collapse */
  body > div > section div[style*="repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  body > div > section div[style*="repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
}

/* ---------- 768px and below: single column throughout ---------- */
@media (max-width:768px){
  body > div > nav,
  body > div > header,
  body > div > section,
  body > div > footer,
  body > div > div{
    padding-left:24px !important;
    padding-right:24px !important;
  }
  body > div > section,
  body > div > header{padding-top:48px !important;padding-bottom:48px !important}
  body > div > header h1{font-size:34px !important;line-height:1.12 !important}
  body > div > section h2{font-size:27px !important}
  body > div > section h3{font-size:21px !important}
  body > div [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  /* these repeat the selector shape used at 1024px so they win on specificity */
  body > div > section div[style*="repeat(2,1fr)"],
  body > div > section div[style*="repeat(3,1fr)"],
  body > div > section div[style*="repeat(4,1fr)"]{grid-template-columns:1fr !important}
  body > div [style*="grid-column:span 2"]{grid-column:auto !important}
  body > div [style*="max-width:1140px"]{max-width:100% !important}
  /* stacked cards: drop the fixed side-by-side gaps to something breathable */
  body > div > section article,
  body > div > section > div > div{min-width:0 !important}
  body > div > footer > div > div{padding:32px !important}
  /* flow-step chains: let the fixed-width step chips shrink and wrap */
  body > div span[style*="flex:0 0 auto"]{flex:0 1 auto !important;max-width:100% !important}
  body > div [style*="white-space:nowrap"]{white-space:normal !important}
  body > div [style*="flex-wrap:wrap"]{row-gap:8px !important}
  /* the announcement bar and credential strip read better stacked */
  body > div > div:first-child{text-align:center !important}

  /* --- collapse the 7-link nav into a burger --- */
  body > div > nav{flex-wrap:wrap !important;align-items:center !important}
  body > div > nav .nav-burger{
    display:flex !important;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:42px;margin-left:auto;padding:0 11px;box-sizing:border-box;
    background:#ffffff;border:1px solid #d4dbe0;border-radius:8px;cursor:pointer;
  }
  body > div > nav .nav-burger span{
    display:block;height:2px;width:100%;background:#14212b;border-radius:2px;
    transition:transform 200ms ease,opacity 200ms ease;
  }
  /* menu collapsed by default; drops to a full-width column when open */
  body > div > nav .nav-links{
    display:none !important;flex-basis:100% !important;width:100% !important;
    flex-direction:column !important;align-items:stretch !important;
    gap:0 !important;padding-top:8px !important;
  }
  body > div > nav .nav-toggle:checked ~ .nav-links{display:flex !important}
  body > div > nav .nav-links a{
    padding:13px 4px !important;border-top:1px solid #eef1f3 !important;
  }
  body > div > nav .nav-links a.x1{
    border-top:none !important;justify-content:center !important;
    width:100% !important;margin-top:10px !important;box-sizing:border-box !important;
  }
  /* burger morphs into an X while open */
  body > div > nav .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body > div > nav .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  body > div > nav .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- 420px and below ---------- */
@media (max-width:420px){
  body > div > nav,
  body > div > header,
  body > div > section,
  body > div > footer,
  body > div > div{
    padding-left:18px !important;
    padding-right:18px !important;
  }
  body > div > header h1{font-size:29px !important}
  body > div > nav a[href="#contact"]{width:100% !important;justify-content:center !important}
}