/* responsive.css — all media queries, mobile layout overrides */
@media(max-width:900px){
  .wrap{padding:0 20px}
  .navlinks{display:none}
  .burger{display:block}
  .navlinks.open{display:flex;position:absolute;top:64px;right:0;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px;gap:6px;min-width:200px;box-shadow:0 20px 40px -20px rgba(80,50,20,.4)}
  .hero{padding:140px 0 70px}
  .herogrid{grid-template-columns:1fr;gap:54px}
  .portrait{max-width:380px;margin:0 auto}
  /* featured card: stack vertically */
  .pcard.feat{flex-direction:column}
  .pcard.feat .pstage{width:100%;padding:34px 34px 0}
  .pcard.feat .pbody{padding:32px}
  /* project grid: single column */
  .pgrid{grid-template-columns:1fr}
  .pcard[style*="grid-column"]{grid-column:auto!important}
  /* other sections */
  .tgrid,.skgrid{grid-template-columns:1fr}
  .mgrid2{grid-template-columns:1fr;gap:0}
  .mbody{padding:30px 24px}
  .mhero{padding:26px 24px 0}
  .cwrap,.ccwrap{grid-template-columns:1fr;gap:40px}
  .contactcard{padding:40px 26px}
  .frow{grid-template-columns:1fr}
  .brow{grid-template-columns:1fr;gap:6px}
  .bdate{order:-1}
}