/* Wide screens keep the same scenery and fixed controls, with their own reading scale. */
.desktop-nav { display: none; }
@media (min-width: 960px) {
  :root { --header-height: 88px; --dial-height: 168px; --dial-drop: 32px; }
  .site-header { max-width: 1440px; padding-inline: 48px; gap: 28px; }
  .site-header .brand { gap: 16px; }
  .site-header .brand > span { font-size: 11px; letter-spacing: 1.8px; }
  .site-header .brand small { font-size: 10px; }
  .site-header .header-note { font-size: 10px; }
  .dial-footer { width: 420px; }
  .dial-footer .dial-links { --text-scale: .7; }
  .view { --text-scale: 1; }
  .view-content { max-width: 1320px; padding: 24px 48px 96px; }
  .view .section-rail { gap: 14px; margin-bottom: 22px; }
  .view .section-rail > b { font-size: 16px; }
  .view .section-rail > span { font-size: 12px; letter-spacing: 2.5px; }
  .view h1 { font-size: clamp(42px, 3.9vw, 60px); line-height: 1.08; letter-spacing: -1.3px; }
  .view h2 { font-size: clamp(42px, 4vw, 58px); line-height: 1.12; }
  .view .person-name { font-size: 28px; }
  .view .hero, .view .work-hero, .view .experiments-hero { margin-inline: 0; }
  .view .hero-description, .view .work-hero > p:last-child, .view .experiments-hero > p { font-size: 18px; line-height: 1.6; max-width: 64ch; }
  .view .micro { font-size: 11px; line-height: 1.65; }
  .view .short-rule { margin: 22px 0; }
  .view .clock-strip, .view .clock-strip.compact { grid-template-columns: 30px minmax(0,1fr) minmax(120px,.7fr) minmax(170px,1fr) 26px; padding: 16px 24px; min-height: 76px; gap: 20px; }
  .view .clock-strip strong, .view .clock-strip small, .view .clock-strip .local-date { font-size: 11px; }
  .view .clock-strip .local-time { font-size: 32px; }
  .view .clock-strip > svg:last-child { width: 26px; height: 26px; }

  /* Intro and credentials share the width instead of becoming a tall phone layout. */
  .view.home .view-content { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 24px 48px; align-items: start; }
  .view.home .section-rail { grid-column: 1 / -1; margin: 0; }
  .view.home .hero { grid-column: 1; grid-row: 2; }
  .view.home .hero-description { font-size: 18px; max-width: 45ch; }
  .view.home .metrics { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; gap: 14px; margin: 0; }
  .view.home .metric { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 6px 18px; min-height: 122px; padding: 22px 26px; align-items: center; }
  .view.home .metric > svg { grid-column: 1; grid-row: 1 / span 2; width: 32px; height: 32px; }
  .view.home .metric h3 { grid-column: 2; grid-row: 1; min-height: 0; font-size: 13px; line-height: 1.45; letter-spacing: .8px; }
  .view.home .metric > strong { grid-column: 3; grid-row: 1 / span 3; font-size: clamp(38px,3.7vw,52px); line-height: 1; }
  .view.home .metric .segments { grid-column: 2; grid-row: 2; max-width: 132px; }
  .view.home .metric > .micro { grid-column: 2; grid-row: 3; margin: 0; font-size: 10px; letter-spacing: .5px; }
  .view.home .metric > .micro br { display: none; }
  .view.home .clock-strip { grid-column: 1 / -1; margin: 4px 0 0; }

  .view.profile .profile-intro { grid-template-columns: minmax(0,1fr) 320px; gap: 60px; align-items: center; }
  .view.profile .profile-lead { font-size: 26px; max-width: 28ch; margin: 16px 0; }
  .view.profile .profile-text > p:not(.micro) { font-size: 17px; line-height: 1.75; max-width: 62ch; }
  .view .portrait { max-width: 320px; justify-self: end; }
  .view .timeline { margin-top: 32px; padding: 24px 30px; }
  .view .timeline-arc { height: 48px; margin-top: 16px; }
  .view .panel-heading h3 { font-size: 16px; letter-spacing: 2px; }
  .view .panel-heading .micro, .view .timeline-sub, .view .milestones .micro { font-size: 11px; }
  .view .milestones b { font-size: 17px; }
  .view .cap-grid { gap: 16px; }
  .view .capability, .view .capability:nth-child(n+4) { padding: 24px; }
  .view .capability h3 { font-size: 14px; }
  .view .tags span { font-size: 13px; padding: 7px 10px; }
  .view .shortcut { grid-template-columns: 64px minmax(0,1fr) 160px; }
  .view .shortcut > svg { width: 56px; height: 56px; }
  .view .shortcut h3 { font-size: 16px; }
  .view .shortcut p:not(.micro) { font-size: 16px; line-height: 1.7; }

  .view .work-hero .person-name { font-size: 24px; }
  .view .work-hero h2 { margin-top: 6px; }
  .view .work-caption { margin-top: 24px; }
  .view .work-caption, .view .work-caption small, .view .work-caption button { font-size: 11px; }
  .view .project-row { grid-template-columns: 28px 58px minmax(0,1.65fr) minmax(0,1fr) 44px 105px 74px 18px; min-height: 76px; padding: 14px 18px; gap: 14px; background-color: #0b1a22a6; }
  .view .project-row .row-name > b { font-size: 15px; }
  .view .project-row .row-name > small { font-size: 13px; }
  .view .project-row > .sector, .view .project-row > .state, .view .project-row > .code { font-size: 10px; letter-spacing: .5px; }
  .view .project-row > .year { font-size: 12px; }
  .view .project-detail { padding: 30px; margin-top: 28px; }
  .view .project-detail > header h3 { font-size: 28px; }
  .view .project-detail > header p { font-size: 15px; }
  .view .dossier-intro { grid-template-columns: minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,.8fr); gap: 24px; }
  .view .project-facts dl > div { grid-template-columns: 84px minmax(0,1fr); font-size: 14px; line-height: 1.5; }
  .view .dossier-intro blockquote { font-size: 16px; padding: 22px; }
  .view .dossier-intro blockquote br { display: none; }
  .view .small-heading { font-size: 11px; margin-top: 28px; }
  .view .process p { font-size: 13px; }
  .view .deliverable { min-height: 130px; padding: 22px; gap: 12px; }
  .view .deliverable h4 { font-size: 14px; }
  .view .deliverable > .micro { font-size: 10px; padding-right: 22px; }
  .view .story h4 { font-size: 14px; }
  .view .story p { font-size: 15px; line-height: 1.65; }
  .view .project-detail > footer { font-size: 10px; }

  .view .scenario, .view .telemetry, .view .story-data { padding: 28px; }
  .view .scenario h2 { font-size: clamp(30px,2.5vw,38px); }
  .view .scenario-lead, .view .data-explanation p, .view .scenario-image > div { font-size: 16px; line-height: 1.65; }
  #measure-title { color: var(--ink); -webkit-text-fill-color: currentColor; background: none; animation: none; }
  #measure-title .measure-action { color: transparent; -webkit-text-fill-color: transparent; background: var(--title-gradient); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; animation: color-flow 9s ease-in-out infinite; }
  .view .scenario-grid { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 24px; }
  .view .answers > button { font-size: 16px; padding: 16px 20px; gap: 16px; }
  .view .answers > button > b { width: 34px; height: 36px; }
  .view .scenario-progress { font-size: 11px; }
  .view .data-card { padding: 24px; }
  .view .data-card h3 { font-size: 13px; }
  .view .registered > strong { font-size: 54px; }
  .view .registered .micro, .view .distribution > p { font-size: 11px; }
  .view .time-card > p { font-size: 15px; }
  .view .chart-layout { grid-template-columns: minmax(0,3fr) minmax(210px,1fr); }
  .view .story-data h3 { font-size: 32px; }
  .view .signals .micro { font-size: 10px; }

  .view .experiments-hero { margin: 0; }
  .view .experiment-grid { gap: 22px; margin-top: 26px; }
  .view .experiment-card { min-height: 290px; padding: 30px; }
  .view .experiment-card h3 { font-size: 28px; max-width: 75%; }
  .view .experiment-card > p:not(.micro) { font-size: 16px; line-height: 1.55; max-width: 30ch; }
  .view .experiment-card > .micro { font-size: 10px; padding-right: 44px; }
  .view .secret-card h3 { font-size: 25px; }
  .view .secret-card p:not(.micro) { font-size: 16px; }

  .view.contact .view-content { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 24px 48px; align-items: start; }
  .view.contact .section-rail { grid-column: 1 / -1; margin: 0; }
  .view.contact .hero { grid-column: 1; grid-row: 2; }
  .view.contact .person-name { font-size: 26px; }
  .view.contact .contact-lead { font-size: 23px; max-width: 30ch; line-height: 1.5; }
  .view.contact .hero-description { font-size: 17px; }
  .view .contact-grid { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; gap: 14px; margin: 0; }
  .view .contact-card, .view .contact-card:last-child { display: grid; grid-template-columns: 36px minmax(0,1fr) 24px; gap: 6px 18px; align-items: center; padding: 25px 28px; min-height: 116px; }
  .view .contact-card > svg { grid-column: 1; grid-row: 1 / span 2; width: 34px; height: 36px; }
  .view .contact-card h3 { grid-column: 2; font-size: 13px; }
  .view .contact-card > p:not(.micro), .view .contact-card:first-child > p:not(.micro) { grid-column: 2; font-size: 16px; margin: 0; overflow-wrap: anywhere; }
  .view .contact-card .short-rule, .view .contact-card .micro { display: none; }
  .view .contact-card .link-arrow { position: static; grid-column: 3; grid-row: 1 / span 2; font-size: 24px; line-height: 1.5; min-height: 36px; margin: 0; }
  .view .contact-status { grid-column: 1 / -1; margin-top: 0; padding: 20px 26px; gap: 16px; }
  .view .contact-status strong, .view .contact-status small { font-size: 11px; }
  .view .contact-quote { grid-column: 1 / -1; margin: 0; }
  .view .contact-quote .micro { font-size: 10px; }
  .view .contact-quote > b { line-height: 1.3; }
  dialog { --text-scale: 1; width: min(620px,calc(100vw - 64px)); padding: 40px; }
  dialog h2 { font-size: 42px; }
  dialog nav a { font-size: 20px; }
}
@media (min-width: 1200px) {
  .site-header .header-note { display: none; }
  .desktop-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
  .desktop-nav a { display: grid; place-items: center; min-height: 44px; padding: 8px 12px; font: 500 12px/1.3 var(--font); color: #b7cbd9; border-bottom: 1px solid transparent; transition: color .25s,border-color .25s; }
  .desktop-nav a:hover { color: #e3fff7; }
  .desktop-nav a[aria-current="page"] { color: #7af6c5; border-color: #7af6c5; }
  .header-controls { margin-left: 12px; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .view-content { padding-inline: 36px; }
  .view.home .view-content, .view.contact .view-content { column-gap: 28px; }
  .view.home .metric { padding-inline: 20px; column-gap: 12px; }
  .view .project-row { grid-template-columns: 24px minmax(0,1.6fr) minmax(0,1fr) 42px 95px 18px; gap: 12px; }
  .view .project-row > .code, .view .project-row > .bars { display: none; }
  .view .dossier-intro { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
  .view .dossier-intro blockquote { grid-column: 1 / -1; }
}