/* =========================================================================== BASE — reset, typography, layout primitives, texture engine ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* The hidden attribute must beat any component display rule (age gate, sprites, panels toggled from JS). Without this, `display:grid` silently wins. */ [hidden] { display: none !important; } /* Scroll lock for the full-screen menu and the command palette. Set on rather than so the fixed header does not shift when the bar goes. */ html.is-locked { overflow: hidden; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 1.5rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; font-variant-numeric: tabular-nums; /* The announcement strip is fixed above the header stack; leadgen.js keeps --announce-h in step with its real height and zeroes it on dismissal. */ padding-top: var(--head-h); } /* A page that opens on a full-bleed hero takes the header INTO the picture instead of sitting under it — the hero pads itself by the same amount. */ body.has-cinema-hero { padding-top: var(--announce-h, 2.35rem); } img, svg, video, canvas, picture { display: block; max-width: 100%; } img { height: auto; background: var(--chalk-deep); } img.is-fallback { object-fit: cover; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } /* --- Type ---------------------------------------------------------------- */ h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--track-display); text-wrap: balance; } h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-l); } h4 { font-size: var(--fs-m); } h5 { font-size: 1.15rem; } p, li { text-wrap: pretty; } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-soft); max-width: 62ch; } .small { font-size: var(--fs-sm); } .tiny { font-size: var(--fs-xs); } strong, b { font-weight: 700; } a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { color: var(--accent-deep); } /* The two failing contrast pairs, guarded. Orange text is always the deep tint. */ .text-ochre { color: var(--ochre-deep); } .text-corn { color: var(--corn-deep); } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent-deep); } .eyebrow .dse-icon { width: 1.05em; height: 1.05em; } .mono { font-family: var(--font-mono); font-size: .84em; letter-spacing: .02em; } /* --- Layout -------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: var(--container-wide); } .container--narrow{ max-width: var(--container-narrow); } .container--text { max-width: var(--container-text); } .container--flush { padding-inline: 0; } .dse-section { position: relative; padding-block: clamp(3.5rem, 7vw, 7rem); } .dse-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); } .ground--chalk { background: var(--surface); } .ground--chalk-deep { background: var(--surface-sunk); } .ground--paper { background: var(--paper); } .ground--ink { background: var(--ink); color: var(--chalk); } .ground--petrol { background: var(--petrol); color: var(--chalk); } .ground--claret { background: var(--claret); color: var(--chalk); } .ground--ochre { background: var(--ochre); color: var(--ink); } .ground--moss { background: var(--moss); color: var(--chalk); } .ground--none { background: transparent; } .ground--ink h1, .ground--ink h2, .ground--ink h3, .ground--ink h4, .ground--petrol h1, .ground--petrol h2, .ground--petrol h3, .ground--petrol h4, .ground--claret h1, .ground--claret h2, .ground--claret h3, .ground--claret h4, .ground--moss h1, .ground--moss h2, .ground--moss h3, .ground--moss h4 { color: var(--chalk); } .ground--ink .lead, .ground--petrol .lead, .ground--claret .lead, .ground--moss .lead { color: rgba(237,230,214,.82); } .ground--ink .eyebrow, .ground--petrol .eyebrow, .ground--claret .eyebrow, .ground--moss .eyebrow { color: var(--corn-lift); } /* :not(.btn) matters. Without it this rule outranks `.btn { color: var(--btn-fg) }` and every button on a reversed band renders corn-on-ochre at 1.5:1. */ .ground--ink a:not(.btn), .ground--petrol a:not(.btn), .ground--claret a:not(.btn), .ground--moss a:not(.btn) { color: var(--corn-lift); } .ground--ink .btn, .ground--petrol .btn, .ground--claret .btn, .ground--moss .btn, .ground--ochre .btn, .news-band .btn, .sticky-bar .btn, .card--dark .btn, .pop .btn { color: var(--btn-fg); } .ground--ochre .eyebrow, .ground--ochre a:not(.btn) { color: var(--ink); } /* A reversed band re-maps the text tokens themselves, so any component nested inside one inherits legible values instead of a chalk-tuned grey. */ .ground--ink, .ground--petrol, .ground--claret, .ground--moss { --text: var(--chalk); --text-soft: rgba(237,230,214,.84); --text-faint: rgba(237,230,214,.70); /* The lifted corn, not the plain one: plain corn on petrol is 4.0:1, which fails for the 12px consent line that inherits this token. */ --accent-deep: var(--corn-lift); --line: rgba(237,230,214,.20); --line-strong: rgba(237,230,214,.38); } /* Ochre and corn are bright grounds: everything on them goes to ink, including the corn that the reversed rules above would otherwise inherit. */ .ground--ochre { --text: var(--ink); --text-soft: rgba(35,33,30,.80); --text-faint: rgba(35,33,30,.66); --accent-deep: var(--ink); --corn: var(--ink); --line: rgba(35,33,30,.22); --line-strong: rgba(35,33,30,.42); } .ground--ochre h1, .ground--ochre h2, .ground--ochre h3, .ground--ochre h4, .ground--ochre .lead { color: var(--ink); } .grid { display: grid; gap: var(--s5); } .g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); } .g-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); } .stack > * + * { margin-top: var(--s4); } .stack-lg > * + * { margin-top: var(--s6); } .row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } .row--end { justify-content: flex-end; } .row--between { justify-content: space-between; } /* --- Section header ------------------------------------------------------ */ .sec-head { max-width: 54rem; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); } .sec-head--center { margin-inline: auto; text-align: center; } .sec-head--center .lead { margin-inline: auto; } .sec-head__title { margin-top: .6rem; max-width: var(--measure-h2); } .sec-head--center .sec-head__title { margin-inline: auto; } .sec-head .lead { margin-top: .85rem; } /* --- Prose --------------------------------------------------------------- */ .prose { max-width: var(--container-text); } .prose > * + * { margin-top: 1.1em; } .prose h2 { margin-top: 2.4em; font-size: var(--fs-l); } .prose h3 { margin-top: 1.9em; font-size: var(--fs-m); } .prose ul, .prose ol { padding-left: 1.35em; } .prose li + li { margin-top: .45em; } .prose blockquote { margin-block: 1.8em; padding: 1.25rem 0 1.25rem 1.6rem; border-left: 3px solid var(--accent); font-family: var(--font-display); font-size: var(--fs-m); line-height: 1.35; } .prose hr { margin-block: 2.4em; border: 0; border-top: 1px solid var(--line); } .prose code { font-family: var(--font-mono); font-size: .88em; background: var(--chalk-deep); padding: .12em .38em; border-radius: var(--r-xs); } /* Drop-cap ladder — the first paragraph of an editorial section. */ .prose > p:first-of-type { font-family: var(--font-display); font-size: 1.32rem; font-weight: 500; line-height: 1.5; } .prose--plain > p:first-of-type { font-family: var(--font-ui); font-size: inherit; font-weight: inherit; line-height: inherit; } /* The dark band curves over the light one. Four declarations, and the whole light/dark rhythm of the page stops being a stack of stripes. */ .dse-section.ground--ink, .dse-section.ground--petrol, .dse-section.ground--claret, .dse-section.ground--moss { border-radius: var(--r-hero) var(--r-hero) 0 0; margin-top: -1px; } .dse-section.ground--ink + .dse-section:not(.ground--ink):not(.ground--petrol):not(.ground--claret):not(.ground--moss), .dse-section.ground--petrol + .dse-section:not(.ground--ink):not(.ground--petrol):not(.ground--claret):not(.ground--moss), .dse-section.ground--claret + .dse-section:not(.ground--ink):not(.ground--petrol):not(.ground--claret):not(.ground--moss), .dse-section.ground--moss + .dse-section:not(.ground--ink):not(.ground--petrol):not(.ground--claret):not(.ground--moss) { border-radius: var(--r-hero) var(--r-hero) 0 0; margin-top: -1px; } /* Two dark bands in a row are one band; do not carve a notch between them. */ .dse-section.ground--ink + .dse-section.ground--ink, .dse-section.ground--petrol + .dse-section.ground--petrol { border-radius: 0; } .prose--ladder > p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-weight: 900; font-size: 3.5em; line-height: .78; padding: .06em .1em 0 0; color: var(--accent-deep); } /* --- Accessibility ------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; top: -100px; left: 1rem; z-index: 999; background: var(--ink); color: var(--chalk); padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) var(--r-sm); transition: top var(--t-quick); } .skip:focus { top: 0; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); } .ground--ink :focus-visible, .ground--petrol :focus-visible { outline-color: var(--corn); } /* --- Texture engine: grain, halftone, misregistration -------------------- One texture layer at a time. Two stacked reads as noise and costs a frame budget on mid-range Android. All of it disables on low-capability devices. */ .grain::after, .dse-figure__grain { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } .grain { position: relative; } /* Ink misregistration — the offset plate that never quite lined up. */ .misreg { position: relative; display: inline-block; } .misreg::before { content: attr(data-text); position: absolute; inset: 0; color: var(--claret); opacity: .2; z-index: -1; transform: translate(var(--misreg), calc(var(--misreg) * -.5)); pointer-events: none; } /* Torn wheat-paste edge on band transitions. */ .torn-top, .torn-bottom { position: relative; } .torn-top::before, .torn-bottom::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: inherit; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V6l40-3 38 5 44-6 36 4 48-5 40 6 42-4 46 3 38-6 44 5 40-3 42 6 46-5 38 4 44-6 40 5 42-3 46 6 38-4 44 3 40-5 44 6V14z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V6l40-3 38 5 44-6 36 4 48-5 40 6 42-4 46 3 38-6 44 5 40-3 42 6 46-5 38 4 44-6 40 5 42-3 46 6 38-4 44 3 40-5 44 6V14z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%; } .torn-top::before { top: -13px; } .torn-bottom::after { bottom: -13px; transform: scaleY(-1); } /* Halftone — hero only, one layer. */ .halftone { position: relative; } .halftone::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; background-image: radial-gradient(currentColor 1px, transparent 1.4px); background-size: 5px 5px; mix-blend-mode: multiply; } /* Low-capability devices: drop every print effect. */ @media (max-width: 480px), (prefers-reduced-motion: reduce) { .halftone::after { display: none; } } .no-texture .grain::after, .no-texture .dse-figure__grain, .no-texture .halftone::after, .no-texture .misreg::before { display: none; } /* --- Utility ------------------------------------------------------------- */ .center { text-align: center; } .nowrap { white-space: nowrap; } .hide { display: none !important; } @media (max-width: 900px) { .hide\@md { display: none !important; } } @media (max-width: 640px) { .hide\@sm { display: none !important; } } @media (min-width: 901px) { .show\@md { display: none !important; } } .rule { height: 1px; background: var(--line); border: 0; margin-block: var(--s6); } .rule--strong { height: 3px; background: var(--accent); width: 3.5rem; border-radius: var(--r-pill); } .dse-icon { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; } .dse-beast { width: 100%; height: auto; aspect-ratio: 4 / 3; fill: currentColor; } .dse-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Print-first fallback: content is never left hidden by a failed animation. */ .gsap-hide { opacity: 0; } .no-js .gsap-hide, .motion-done .gsap-hide { opacity: 1; }