/* Proportional is the public default. ?debug exposes proportional/capped/off comparisons; scale overrides without ?debug are ignored. UI-70: public 1x = 1920x1080 usable CSS pixels. The approved 1800x1169 typography is retained; the shared 3:2 frame is refitted to the shorter canvas. Browser chrome is already outside the viewport. This first block is ONLY the historical two-section capped comparison: 1800x1169, 68px header, 35.07px stage padding, 1546.29px frame, 1.5x ceiling. Public proportional rules are independent below. No whole-page transform. Browser zoom/reflow remains a separate accessibility follow-up; promoting the approved layout does not change that existing scaling behavior. */ @media (min-width: 1800px) and (min-height: 1169px) { :root[data-scale-pilot="capped"] { --pilot-unit: min(1.5px, calc(100vw / 1800), calc((100svh - 68px) / 1101)); } :root[data-scale-pilot="capped"] :is(.problem:not(.is-still), .cases) { /* Freeze the approved 1x values instead of stacking the old desktop clamps on top of the new multiplier. The rest of the site keeps using its existing typography tokens. */ --text-body: calc(19.2854 * var(--pilot-unit)); --text-lede: calc(23.929 * var(--pilot-unit)); --pilot-frame-width: calc(1546.29 * var(--pilot-unit)); font-size: var(--text-body); padding-inline: calc(64 * var(--pilot-unit)); } :root[data-scale-pilot="capped"] .problem:not(.is-still) { --stage-pad: calc(35.07 * var(--pilot-unit)); } :root[data-scale-pilot="capped"] .problem:not(.is-still) .problem__frame { width: min(100%, var(--pilot-frame-width)); } /* Leave the accessible static Problem layout independent too. */ :root[data-scale-pilot="capped"] .problem:not(.is-still) .problem__copy .display { font-size: calc(38.4 * var(--pilot-unit)); } :root[data-scale-pilot="capped"] .problem:not(.is-still) .problem__copy--problem .display { font-size: calc(26.4 * var(--pilot-unit)); } :root[data-scale-pilot="capped"] .problem:not(.is-still) .problem__copy p { font-size: var(--text-body); } :root[data-scale-pilot="capped"] .problem:not(.is-still) .problem__copy .strong { font-size: var(--text-lede); } :root[data-scale-pilot="capped"] .problem:not(.is-still) .problem__copy .lede { font-size: var(--text-body); } :root[data-scale-pilot="capped"] .cases { /* The ring's JS uses this reference label size to scale its own clearance too; absent outside the pilot, including all mobile. */ --case-ring-scale-base: 25.6; padding-block: calc(136 * var(--pilot-unit)); } :root[data-scale-pilot="capped"] .cases > .wrap { max-width: var(--pilot-frame-width); } :root[data-scale-pilot="capped"] .cases h2 { font-size: calc(68 * var(--pilot-unit)); margin-bottom: calc(80 * var(--pilot-unit)); } :root[data-scale-pilot="capped"] .cases .cols { gap: calc(80 * var(--pilot-unit)); } :root[data-scale-pilot="capped"] .cases__item { font-size: calc(25.6 * var(--pilot-unit)); padding-block: calc(14.4 * var(--pilot-unit)); } :root[data-scale-pilot="capped"] .cases__panel { max-width: calc(576 * var(--pilot-unit)); border-top-width: var(--pilot-unit); padding-top: calc(20 * var(--pilot-unit)); } :root[data-scale-pilot="capped"] .cases__detail p { font-size: var(--text-lede); } :root[data-scale-pilot="capped"] .cases__detail p:not(:last-child) { margin-bottom: calc(24 * var(--pilot-unit)); } } /* One reference composition in both directions: the complement of phone.css's compact query includes landscape tablets. Root rem carries scale once. Surplus height is shared above/below the stage, never inside the artwork. */ @media (min-width: 1101px), (min-width: 601px) and (aspect-ratio > 999/1000) { :root[data-scale-pilot="proportional"] { --pilot-unit: min(calc(100vw / 1920), calc(100svh / 1080)); --proportional-layout: 1; font-size: calc(16 * var(--pilot-unit)); --nav-h: 4.25rem; --stage-pad: 2.025rem; --stage-extra: max(0px, calc((100svh - 67.5rem) / 2)); --gut: 4rem; /* (1080 - 68 - 2 * 32.4) * 1.5 = 1420.8. The uniform fit guarantees this 3:2 frame and its gutters fit both dimensions. */ --frame-3-2-width: 88.8rem; --content-cap: var(--frame-3-2-width); --text-body: calc(19.2854 * var(--pilot-unit)); --text-small: calc(16.6436 * var(--pilot-unit)); --text-control: calc(15.321 * var(--pilot-unit)); --text-lede: calc(23.929 * var(--pilot-unit)); --text-heading: 4.25rem; --text-hero: 5.625rem; } :root[data-scale-pilot="proportional"] :is(.nav__inner, .wrap, .footer__inner) { max-width: var(--content-cap); } :root[data-scale-pilot="proportional"] .nav__inner { position: relative; } :root[data-scale-pilot="proportional"] .nav__links { position: absolute; left: 50%; translate: -50%; margin: 0; } :root[data-scale-pilot="proportional"] .nav__cta { margin-left: auto; } :root[data-scale-pilot="proportional"] .nav__links a { font-size: var(--text-control); } :root[data-scale-pilot="proportional"] .btn { font-size: var(--text-control); } :root[data-scale-pilot="proportional"] .footer__meta { font-size: var(--text-small); } :root[data-scale-pilot="proportional"] :is(.step p, .card__back p, .pilot__gets h3) { font-size: var(--text-small); } :root[data-scale-pilot="proportional"] :is(.step h3, .card h3) { font-size: var(--text-lede); } :root[data-scale-pilot="proportional"] :is(.problem:not(.is-still), .approach:not(.is-reading-flow), .services, .pilot.is-staged-story:not(.is-phone-story), .about.is-wide-story, .final.is-wide-ending, .why:not(.is-static) .why__stage) { padding-block: calc(var(--nav-h) + var(--stage-pad) + var(--stage-extra)) calc(var(--stage-pad) + var(--stage-extra)); } /* Legacy fallback declarations, independent of the capped height gate. typography.css supplies the approved public heading sizes afterward. */ :root[data-scale-pilot="proportional"] .problem:not(.is-still) .problem__copy .display { font-size: 2.4rem; } :root[data-scale-pilot="proportional"] .problem:not(.is-still) .problem__copy--problem .display { font-size: 2.1rem; } :root[data-scale-pilot="proportional"] .problem:not(.is-still) .problem__copy :is(p, .lede) { font-size: var(--text-body); } :root[data-scale-pilot="proportional"] .problem:not(.is-still) .problem__copy .strong { font-size: var(--text-lede); } :root[data-scale-pilot="proportional"] .cases { --case-ring-scale-base: 25.6; } /* Avoid mixed-font inline baselines rounding each successive row in a different direction. Reserve the 1x row rhythm; wrapped text can grow. */ :root[data-scale-pilot="proportional"] .cases__item { display: flex; align-items: flex-start; min-height: 4.425rem; padding-block: 1.025rem .9rem; } :root[data-scale-pilot="proportional"] .cases__panel { border-top-width: .0625rem; } :root[data-scale-pilot="proportional"] .nav__logo { --mark-h: 2rem; font-size: 1.25rem; } :root[data-scale-pilot="proportional"] .footer__links a { font-size: .9375rem; } /* Browsers round sub-pixel borders up to 1px. Keep the reference border space in scalable padding and paint the ghost outline inside it. */ :root[data-scale-pilot="proportional"] .btn { border: 0; padding: .9125rem 1.6625rem; } :root[data-scale-pilot="proportional"] .btn--ghost { box-shadow: inset 0 0 0 .0625rem var(--ink); } :root[data-scale-pilot="proportional"] .slot { border-width: .0625rem; border-radius: .125rem; } :root[data-scale-pilot="proportional"] .hero__art { width: min(57.5rem, 100%); } :root[data-scale-pilot="proportional"] .hero__art .slot { max-height: 37.8rem; } :root[data-scale-pilot="proportional"] .hero__illustration { max-width: 41.85rem; } :root[data-scale-pilot="proportional"] .hero__card { container-type: inline-size; } :root[data-scale-pilot="proportional"] .hero__card h1 { max-width: 16ch; text-wrap: wrap; /* typography.css owns the approved 80px reference. Root scaling preserves its four lines together with this reference column. */ } :root[data-scale-pilot="proportional"] :is(.pilot, .cases, .about, .final) { padding-block: 8.5rem; } :root[data-scale-pilot="proportional"] .approach { --step-width: min(17rem, 26%); } :root[data-scale-pilot="proportional"] .approach__art { width: min(45rem, 60%); } :root[data-scale-pilot="proportional"] .approach__art { max-width: calc(100% - var(--step-width) * 2 - 2rem); } :root[data-scale-pilot="proportional"] .approach__art .slot { max-height: 31.05rem; } :root[data-scale-pilot="proportional"] .services { --card-w: 20rem; } /* Fill the assigned grid column, retaining the existing 48rem maximum and SVG aspect ratio. Scaling the intrinsic 300px fallback leaves the drawing undersized at every resolution, including 1x. */ :root[data-scale-pilot="proportional"] .about .slot { width: 100%; } :root[data-scale-pilot="proportional"] .card__media { border-radius: .125rem; } :root[data-scale-pilot="proportional"] .card__more { border-bottom-width: .0625rem; padding-bottom: .125rem; } :root[data-scale-pilot="proportional"] .card__more::after { min-width: 2.75rem; height: 2.75rem; } :root[data-scale-pilot="proportional"] .team__grid { grid-template-columns: repeat(auto-fit, minmax(14.375rem, 1fr)); } :root[data-scale-pilot="proportional"] :is(.person .role, .person .bio) { font-size: .875rem; } :root[data-scale-pilot="proportional"] .why__art { width: min(47.5rem, 100%); } :root[data-scale-pilot="proportional"] .why__reasons { width: min(var(--why-reason-width, 42.5rem), 100%); } :root[data-scale-pilot="proportional"] .reason__num { font-size: .6875rem; } :root[data-scale-pilot="proportional"] .why__stage { padding-inline: max(0px, calc((100% - var(--content-cap)) / 2)); } :root[data-scale-pilot="proportional"] .why:not(.is-static) .why__reasons { display: grid; } :root[data-scale-pilot="proportional"] .why:not(.is-static) .reason { position: relative; inset: auto; grid-area: 1 / 1; } :root[data-scale-pilot="proportional"] .final.is-wide-ending .footer__links a { min-width: 2.75rem; min-height: 2.75rem; } :root[data-scale-pilot="proportional"] .final.is-wide-ending .footer .nav__logo { min-height: 2.75rem; } /* Keep the pinned box at viewport height. Its title, reasons and drawing share the root scale; normal-flow reading is exempt from this height. */ :root[data-scale-pilot="proportional"] .why:not(.is-static) .why__stage { height: 100svh; gap: 1rem; } :root[data-scale-pilot="proportional"] .why:not(.is-static) .why__art .slot { max-height: min(35.1rem, 100%); } } /* UI-77: only narrow/short wide layouts release the reference's empty side margins. MacBook-sized viewports keep the original 3:2 fit even below 1x; compact phones/portrait tablets remain independent. */ @media (min-width: 1101px), (min-width: 601px) and (aspect-ratio > 999/1000) { @media (width < 1500px), (height < 950px) { :root[data-scale-pilot="proportional"] { /* 1420.8 content + 2*64 gutters; 900 permits 20% more scale on height-limited screens. No floor: tiny windows still fit. */ --pilot-unit: min(1px, calc(100vw / 1548.8), calc(100svh / 900)); --stage-pad: 1rem; --stage-extra: 0px; --content-cap: calc(100vw - 8rem); } :root[data-scale-pilot="proportional"] .problem:not(.is-still) .problem__frame { width: 100%; height: calc(100svh - var(--nav-h) - 2 * var(--stage-pad)); aspect-ratio: auto; } /* UI-43: the finished route is centered; the hand briefly reaches into the right gutter. The uncapped layout needs ~2% ink reduction to keep that first pose on-screen. Slot, copy and timing stay put. */ :root[data-scale-pilot="proportional"] .pilot__scan.is-filled > svg { width: 96%; } } } /* Retain the mouse layout's wider reason column at every wide scale. */ @media (min-width: 1101px) and (hover: hover) and (pointer: fine), (min-width: 601px) and (aspect-ratio > 999/1000) and (hover: hover) and (pointer: fine) { :root[data-scale-pilot="proportional"] .why { --why-reason-width: 60rem; } :root[data-scale-pilot="proportional"] .why .reason p { max-width: 56ch; } }