/* ========================================================================== DELVANO — Base: reset, document, typography primitives, layout, a11y ========================================================================== */ @layer base { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* `clip` rather than `hidden`, and on rather than : hidden on body makes the viewport a scroll container, which widens the containing block of fixed elements by the scrollbar and pushes the header 15px off screen. `clip` guards against stray horizontal overflow without that. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background-color: var(--obsidian); color: var(--ivory); font-family: var(--font-ui); font-size: var(--text-body); font-weight: 400; line-height: var(--leading-body); font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { background: none; border: 0; padding: 0; cursor: pointer; } :target { scroll-margin-top: var(--header-clearance); } /* -------------------------------------------------------------------------- Focus — spec §20: focus must always be visible, never suppressed. -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 1px; } /* Only remove the ring for pointer users who already have a visible state. */ :focus:not(:focus-visible) { outline: none; } .skip-link { position: absolute; top: 0; left: var(--margin-x); z-index: calc(var(--z-menu) + 10); transform: translateY(-120%); padding: var(--space-2) var(--space-3); background: var(--ivory); color: var(--obsidian); font-size: var(--text-ui); letter-spacing: var(--tracking-wide); text-transform: uppercase; transition: transform var(--dur-micro) var(--ease-out); } .skip-link:focus { transform: translateY(0); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Layout primitives — spec §6 -------------------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--margin-x); } .section { position: relative; padding-block: var(--section-y); background-color: var(--surface); color: var(--ink); } .section--tight { padding-block: var(--section-y-tight); } .section--hairline-top { border-top: 1px solid var(--hairline); } /* 12-column grid, recomposed at 8 and 4 rather than proportionally shrunk. */ .grid { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-5); } @media (max-width: 1023px) { :root { --columns: 8; --gutter: 1.25rem; } } @media (max-width: 767px) { :root { --columns: 4; --gutter: 1rem; } } /* -------------------------------------------------------------------------- Typography primitives -------------------------------------------------------------------------- */ .display, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; } .display { font-size: var(--text-display-xl); line-height: var(--leading-display); letter-spacing: var(--tracking-display); } .h1 { font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); } .h2 { font-size: var(--text-h2); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } .h3 { font-size: var(--text-h3); line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); } .h4 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-h4); line-height: var(--leading-heading); } /* The single accent device of the site: one word per headline in bronze. */ .accent { color: var(--bronze); } .lede { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); color: var(--ink-muted); max-width: var(--measure); text-wrap: pretty; } .body { color: var(--ink-muted); line-height: var(--leading-relaxed); max-width: var(--measure); text-wrap: pretty; } .small { font-size: var(--text-small); line-height: 1.55; color: var(--ink-muted); } /* Eyebrow / section label — spec §19 "Section Label" */ .eyebrow { display: block; font-family: var(--font-ui); font-size: var(--text-eyebrow); font-weight: 500; line-height: 1; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-muted); } .eyebrow--accent { color: var(--bronze); } .section-label { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-5); } .section-label__index { font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--bronze); } .section-label__name { font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-muted); } .numeral { font-family: var(--font-display); font-variant-numeric: lining-nums; color: var(--bronze); } /* ========================================================================== Editorial fit -------------------------------------------------------------------------- Every authored is a typographic decision taken from the approved references — "We shape how / you're perceived." is two lines, not whatever the viewport happens to produce. A fluid scale driven by `vw` breaks that promise the moment a headline sits in a half-width column: at 1440 the column is 700px but the type is sized for a 1440px stage, so the line re-wraps and the composition collapses into four ragged lines. Fix: columns that host a headline become size containers, and display type is capped against the column it actually occupies. Full-width headlines are unaffected — `min()` keeps the approved desktop scale wherever there is room for it, and only steps down where the column genuinely cannot hold the line. Coefficients are derived from the measured em-width of the longest authored line in each class, in Instrument Serif at its tracking: display "you're perceived." 5.411em → 100/5.411 = 18.4cqi h1 "Independent by nature." 7.641em → 100/7.641 = 13.1cqi h2 "Let's change how it's perceived." 9.969em → 100/9.969 = 10.0cqi Each is set slightly under its limit to leave room for tracking and for copy edits that run a little longer. ========================================================================== */ .hero__content, .section-head, .headline-col, .split-hero__inner > div, .closing__inner > div, .studio-preview__inner > div, .statement > div, .cs-hero__inner > div { container-type: inline-size; } .hero__content .display, .headline-col .display { font-size: min(var(--text-display-xl), 17cqi); } .section-head .h1, .headline-col .h1, .split-hero__inner > div .h1, .cs-hero__inner > div .h1 { font-size: min(var(--text-h1), 12cqi); } .section-head .h2, .headline-col .h2, .closing__inner > div .h2, .studio-preview__inner > div .h2, .statement > div .h2 { font-size: min(var(--text-h2), 9.7cqi); } }