/* Screen layout correction, 2026-10-05. Original branding, assets, copy,
   behavior, and print layout are retained. Page shells use the viewport. */
@media screen {
  :root {
    --wide-gutter: clamp(16px, 2vw, 72px);
    --wide-gap: clamp(24px, 2.2vw, 84px);
  }

  .wrap,
  .wrap.narrow {
    width: calc(100% - var(--wide-gutter) * 2);
    max-width: none;
    margin-inline: auto;
  }

  .wrap .wrap {
    width: 100%;
    max-width: none;
  }

  .film-tools {
    left: var(--wide-gutter);
    right: var(--wide-gutter);
  }

  .no-script-note { right: var(--wide-gutter); }

  .section-head > *, .skills-grid > *, .project-grid > *, .approach > *,
  .builder-grid > *, .two-columns > *, .split-feature > *, .note-grid > *,
  .contact-grid > *, .footer-main > *, .job > * {
    min-width: 0;
  }

  /* Long-form text retains a readable line length inside the wider shell. */
  .article p, .article ul, .article ol, .resume-sheet .wrap > p,
  .preserved-statement > p, .preserved-statement > ul {
    max-width: 86ch;
  }

  .learning-callout { max-width: none; }
  .learning-callout p { max-width: 86ch; }
}

@media screen and (min-width: 1101px) {
  html { scroll-padding-top: clamp(120px, 7vw, 190px); }
  body { font-size: clamp(16px, 1.05vw, 24px); }

  .nav-wrap { min-height: clamp(86px, 5.5vw, 144px); }
  .brand { font-size: clamp(12px, .76vw, 24px); }
  .brand img { width: clamp(44px, 2.8vw, 88px); height: auto; }
  .brand small { font-size: clamp(8px, .48vw, 16px); }
  .desktop-nav { gap: clamp(24px, 1.8vw, 68px); }
  .desktop-nav a, .contact-nav { font-size: clamp(13px, .82vw, 25px); }
  .header-tools { gap: clamp(20px, 1.4vw, 48px); }
  .header-tools button { width: clamp(40px, 2.5vw, 72px); height: clamp(40px, 2.5vw, 72px); }

  .mast-copy {
    padding-top: clamp(140px, 8.8vw, 338px);
    padding-bottom: clamp(124px, 7.3vw, 280px);
  }
  .home-mast .mast-copy > * { max-width: 52%; }
  .home-mast h1 { font-size: clamp(116px, 8.8vw, 350px); }
  .mast .eyebrow { font-size: clamp(11px, .68vw, 23px); }
  .mast .mast-description {
    max-width: min(52%, 58ch);
    font-size: clamp(18px, 1.05vw, 30px);
  }
  .mast-description strong { font-size: clamp(24px, 1.4vw, 45px); }
  .inner-mast .mast-copy {
    padding-top: clamp(163px, 10vw, 384px);
    padding-bottom: clamp(107px, 6.5vw, 250px);
  }
  .inner-mast .mast-copy > * { max-width: 65%; }
  .inner-mast h1 { font-size: clamp(64px, 4.8vw, 184px); }
  .inner-mast .mast-description { max-width: min(65%, 66ch); }
  .inner-mast .actions { max-width: 65%; }
  .film-label, .film-tools button { font-size: clamp(11px, .65vw, 20px); }
  .film-tools { bottom: clamp(26px, 1.6vw, 60px); }
  .film-tools button { min-height: clamp(36px, 2.4vw, 68px); }
  .button { font-size: clamp(13px, .8vw, 23px); padding: clamp(13px, .9vw, 28px) clamp(22px, 1.5vw, 48px); }
  .actions { gap: clamp(12px, .85vw, 30px); }

  h2 { font-size: clamp(42px, 3.4vw, 112px); }
  h3 { font-size: clamp(23px, 1.55vw, 48px); }
  .eyebrow { font-size: clamp(11px, .66vw, 21px); }
  .section { padding-block: clamp(85px, 5.5vw, 180px); }
  .section-head { grid-template-columns: 1.15fr 1fr; gap: var(--wide-gap); }
  .section-head > p { max-width: 64ch; font-size: clamp(16px, 1vw, 26px); }
  .skills-grid, .project-grid, .approach { gap: var(--wide-gap); }
  .skill p, .project-copy > p:not(.eyebrow), .approach p,
  .two-columns p, .split-feature p, .builder-grid p {
    font-size: clamp(15px, .94vw, 25px);
    max-width: 72ch;
  }
  .ordinal, .approach b { font-size: clamp(12px, .7vw, 23px); }
  .experience-strip .wrap { gap: var(--wide-gap); }
  .experience-strip p, .experience-strip a { font-size: clamp(12px, .75vw, 24px); }
  .experience-strip span { font-size: clamp(19px, 1.18vw, 40px); }
  .experience-strip .wrap > div { gap: var(--wide-gap); }

  .diagram { height: clamp(266px, 13vw, 500px); padding: clamp(28px, 1.7vw, 56px); }
  .diagram-label { font-size: clamp(10px, .6vw, 20px); }
  .doc-node { max-width: 60%; font-size: clamp(13px, .8vw, 25px); }
  .node-row span, .terminal-lines span { font-size: clamp(12px, .72vw, 23px); }
  .terminal-lines strong { font-size: clamp(14px, .85vw, 28px); }
  .project-copy { padding: clamp(28px, 1.8vw, 60px); }
  .project-copy h3 { font-size: clamp(30px, 1.8vw, 57px); }
  .project-copy .eyebrow { font-size: clamp(10px, .6vw, 20px); }
  .project-card-bottom > span { font-size: clamp(11px, .65vw, 21px); }
  .project-card-bottom > a, .text-link { font-size: clamp(13px, .78vw, 25px); }
  .builder-grid, .split-feature, .two-columns { gap: var(--wide-gap); }
  .builder-grid > img, .split-feature > img { height: clamp(390px, 30vw, 1050px); }
  .armor-grid { gap: var(--wide-gap); }
  .armor-grid img { height: clamp(580px, 36vw, 1380px); }
  .armor-grid figcaption { font-size: clamp(12px, .75vw, 24px); }

  .note-grid { grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: var(--wide-gap); }
  .note-aside { top: clamp(120px, 7vw, 190px); }
  .note-aside .diagram { height: clamp(245px, 17vw, 620px); }
  .article p, .article li { font-size: clamp(16px, 1vw, 26px); }
  .article h2 { font-size: clamp(32px, 2vw, 64px); }
  .aside-links > a { font-size: clamp(13px, .8vw, 25px); }
  .small { font-size: clamp(12px, .72vw, 23px); }
  .job, .resume-sheet .job { grid-template-columns: minmax(160px, 24%) minmax(0, 1fr); gap: clamp(28px, 2vw, 64px); }
  .job h3 { font-size: clamp(25px, 1.6vw, 48px); }
  .job-time, .company { font-size: clamp(14px, .85vw, 26px); }
  .job-time small { font-size: clamp(11px, .68vw, 22px); }
  .job ul, .resume-sheet .job ul, .resume-sheet p { font-size: clamp(15px, .95vw, 25px); }
  .resume-sheet h2 { font-size: clamp(28px, 1.8vw, 56px); }
  .resume-sheet .job h3 { font-size: clamp(23px, 1.45vw, 44px); }

  .contact-grid { gap: var(--wide-gap); }
  .contact-main, .contact-side { padding: clamp(40px, 2.8vw, 90px); }
  .email-link { font-size: clamp(36px, 2.6vw, 96px); }
  .closing-inner { gap: var(--wide-gap); }
  .closing h2 { font-size: clamp(44px, 3.2vw, 105px); }
  .closing p { font-size: clamp(16px, .95vw, 28px); }
  .footer-main { gap: var(--wide-gap); }
  .footer-name { font-size: clamp(27px, 1.8vw, 58px); }
  .footer-main p, .footer-main nav a { font-size: clamp(13px, .82vw, 25px); }
  .footer-bottom { font-size: clamp(11px, .65vw, 21px); }
}

@media screen and (min-width: 1600px) {
  .timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wide-gap); }
  .wrap.narrow:has(> .external-entry) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wide-gap); }
  .external-entry h2 { font-size: clamp(29px, 1.9vw, 60px); }
}

@media screen and (min-width: 2400px) {
  .project-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .project-card-bottom { align-items: flex-start; flex-direction: column; }
  .note-grid > .article { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wide-gap); }
  .note-grid > .article > section { margin-bottom: 0; }
  .note-grid > .article > section > h2:first-child { margin-top: 0; }
}

@media screen and (max-width: 700px) {
  .no-script-note { left: var(--wide-gutter); }
}

/* Canonical-domain ecosystem footer links */
.ecosystem-mini{padding:0 0 26px;color:var(--muted,#7e96a8);font-size:.78rem;letter-spacing:.02em}.ecosystem-mini a{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 38%,transparent);text-underline-offset:3px}.ecosystem-mini a:hover{color:var(--accent,#3cc9ff)}