/* Home page on tablets and phones: one column, photo on top with room above his head, a product name on the first phone screen, cards stacked with the picture on top. */
@media (max-width: 1080px) { /* tablets and small laptops */
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* two cards across */
  .panel { grid-template-columns: 1fr 1fr; } /* even split */
  .stage .phone { --phone-width: 270px; } /* smaller phone */
  .hero-copy > * { max-width: min(600px, 50vw); } /* a little wider beside the photo */
  .hero-line { font-size: 16.5px; } /* the line wraps less */
  .contact-layout { grid-template-columns: 1fr; } /* address and buttons under the title */
}
@media (max-width: 900px) { /* portrait tablets */
  .career-layout, .credentials, .about-layout { grid-template-columns: 1fr; } /* one column */
  .career-aside { position: static; } /* heading sits above the list */
}
@media (max-width: 760px) { /* phones */
  body { font-size: 16px; } /* a touch smaller body text */
  .site-bar { padding: 16px var(--gutter); } /* tighter top bar */
  .site-bar nav a:not(:last-child) { display: none; } /* only Contact stays */
  .hero { display: block; min-height: 0; } /* stacked */
  .hero-portrait { width: 100%; height: min(41svh, 346px); } /* photo on top, about 40% of the screen */
  .hero-portrait img { top: 40px; height: calc(100% - 40px); object-position: 50% 0; } /* starts below the top bar, so his hair has headroom */
  .hero-portrait::after { background: linear-gradient(0deg, var(--ink) 4%, rgb(15 13 11 / 0.6) 24%, rgb(15 13 11 / 0) 50%), linear-gradient(180deg, var(--ink) 40px, rgb(15 13 11 / 0) 74px); } /* fades into the page at the bottom; the top edge melts under the bar */
  .hero-copy { margin-top: -40px; padding: 0 0 18px; } /* name overlaps the faded edge */
  .hero-copy > * { max-width: none; } /* full width */
  .hero-eyebrow { margin-bottom: 12px; font-size: 12px; } /* smaller title line */
  .hero-copy > .hero-name { font-size: 15.6vw; } /* two lines across the phone */
  .hero-line { margin-top: 16px; font-size: 17px; } /* the one line */
  .hero-actions { margin-top: 20px; gap: 8px; } /* buttons */
  .hero-actions .button { min-height: 46px; padding: 0 16px; font-size: 14.5px; } /* compact buttons */
  .hero-note { margin-top: 14px; font-size: 12px; line-height: 1.6; } /* small availability line */
  .film-strip { padding: 26px 0 24px; } /* thinner band */
  .strip-frame { width: 212px; margin-right: 10px; } /* smaller frames, still wide enough for every name and chip */
  .strip-frame-label { font-size: 12.5px; } /* smaller label */
  .section-head { flex-direction: column; gap: 10px; } /* title above the line */
  .panels { padding: 0 8px; gap: 8px; } /* narrow gutters */
  .panel { grid-template-columns: 1fr; gap: 0; min-height: 0; padding: 38px 20px 40px; } /* one column, the device clear of the bottom film holes */
  .panel-title { font-size: 15vw; } /* the name fits */
  .panel-line { margin: 14px 0 18px; font-size: 18px; } /* the line */
  .panel-facts { grid-template-columns: 84px 1fr; gap: 12px; font-size: 15px; } /* tighter facts */
  .panel-number b { font-size: 26px; } /* smaller figure */
  .stack-chips li { gap: 5px; padding: 3px 9px 3px 4px; font-size: 12px; } /* smaller stack tags in panels and jobs, fewer wrapped rows */
  .tech-logo { width: 16px; height: 16px; border-radius: 4px; } /* smaller badge to match */
  .stage { height: 350px; margin-top: 14px; } /* smaller scene */
  .stage .phone { --phone-width: 164px; } /* smaller phone, it fits the scene */
  .stage .laptop { --laptop-width: min(280px, 72vw); } /* smaller laptop; its base stays inside the panel */
  .stage .prop { display: none; } /* props only on larger screens */
  .stage .signal-rings { display: block; --prop-width: 520px; } /* rings stay behind the eSIM phone */
  .card-grid { grid-template-columns: 1fr; gap: 12px; } /* one column; each card keeps its picture on top */
  .work-card-visual { aspect-ratio: 2 / 1; } /* a slightly flatter picture on a phone */
  .work-card-visual img { object-position: top; } /* trims empty space at the bottom, never a title */
  .work-card-body { gap: 8px; padding: 14px 16px 16px; } /* compact text */
  .work-card h3 { font-size: 18px; } /* smaller name */
  .work-card p { font-size: 14.5px; line-height: 1.45; } /* smaller line */
  .work-card-foot { flex-wrap: wrap; gap: 8px; } /* status and link may wrap */
  .career-layout { gap: 24px; } /* heading closer to the list */
  .job { grid-template-columns: 1fr; gap: 4px; padding: 13px 0; } /* dates above the details */
  .job-products > li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; padding: 8px 0; } /* name, line and links stack tightly */
  .job-products > li > p:not(.job-product-links) { order: 3; flex-basis: 100%; } /* the plain line drops under the name */
  .job-product-links { margin-top: 2px; order: 4; flex-basis: 100%; } /* links sit on their own row under the line, so all three products read name, line, links */
  .degree { padding: 13px 0; } /* tighter degrees */
  .job-summary { margin: 6px 0 8px; } /* tighter role summary */
  .career-aside p { margin: 14px 0 0; } /* heading line sits closer to the list */
  .certificate { padding: 12px 0; } /* tighter certificates */
  .certificate a { padding: 6px 12px; } /* smaller verify link */
  .about-text { font-size: 17.5px; } /* his voice, smaller */
  .more-work, .career, .about { padding-top: 52px; } /* tighter section spacing */
  .credentials { padding-top: 44px; } /* tighter spacing */
  .credentials h2 { margin-bottom: 14px; } /* column title closer to its list */
  .contact { padding-top: 52px; } /* tighter spacing */
  .showreel-window { transform: none; } /* straight on a phone */
  .contact h2 { font-size: 17vw; } /* closing title, on one line with the face */
  .email-copy { font-size: 22px; } /* the address fits */
  .site-footer { margin-top: 44px; } /* footer stays on one row, closer to the buttons */
}
@media (max-width: 1080px), (pointer: coarse) { /* tablets, small laptops and touch screens */
  .panel-actions a, .work-card-foot a, .job-product-links a, .site-bar nav a, .site-bar-name, a.link-out, a.link-up, .email-copy { display: inline-flex; align-items: center; min-height: 44px; } /* every link is at least 44 px high on a phone, a tablet and any touch screen */
}