/* ============================================================ New Ability Energy · filmic one-shot Theme layer. Overrides scrollcraft tokens, then adds the page's own classes. Nothing here restyles a [data-sc-*] selector: those belong to the engine. Palette is lifted from the live site's own footer rather than invented: ground #0D2909, type #F4F1EC, accent #A1CF72. ============================================================ */ :root { /* --- the six roles ---------------------------------------- */ --sc-canvas: #0D2909; /* the live footer green. The page ground. */ --sc-surface: #123310; --sc-ink: #F4F1EC; /* the live footer cream */ --sc-ink-soft: #AEBFA6; --sc-accent: #A1CF72; /* the live footer accent */ --sc-accent-ink: #0B2107; --sc-font-display: "Archivo", "Helvetica Neue", system-ui, sans-serif; --sc-font-text: "Instrument Sans", "Helvetica Neue", system-ui, sans-serif; /* --- brand extras ---------------------------------------- */ --nae-muted: #8A9B82; --nae-hairline: rgba(244, 241, 236, .15); --nae-hairline-2: rgba(244, 241, 236, .30); --nae-green: #A1CF72; --nae-green-mid: #7DB23A; --nae-blue: #6DBEF1; /* the trade / data role, 8.7:1 on this ground */ --nae-deep: #0B2107; --sc-shadow-color: 0 0 0; --sc-measure: 60ch; --bar-h: 6.5rem; } /* Light inserts. `color` is restated because it is inherited as a computed value: redefining the token alone does not re-ink text whose colour already resolved on . */ .paper { --sc-canvas: #F6F8F5; --sc-surface: #ECEFEA; --sc-ink: #10262D; --sc-ink-soft: #52636A; --sc-accent: #3F7A22; /* the second stop: same hue, darker for paper */ --sc-accent-ink: #FFFFFF; --nae-hairline: rgba(16, 38, 45, .16); --nae-hairline-2: rgba(16, 38, 45, .32); --nae-muted: #68777C; --nae-blue: #2070A2; --sc-shadow-color: 16 38 45; background: var(--sc-canvas); color: var(--sc-ink); } /* ------------------------------------------------------------ Base ------------------------------------------------------------ */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--day-bg, var(--sc-canvas)); color: var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: var(--sc-leading-body); -webkit-font-smoothing: antialiased; overflow-x: clip; } ::selection { background: var(--nae-green); color: var(--nae-deep); } a { color: var(--sc-accent); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } :where(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; } h1, h2, h3, h4 { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: var(--sc-track-tight); line-height: 1.02; text-wrap: balance; margin: 0; } p { text-wrap: pretty; margin: 0; } .nums { font-variant-numeric: tabular-nums; } .sc-skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--sc-accent); color: var(--sc-accent-ink); padding: .6rem 1rem; border-radius: 0 0 var(--sc-r-sm) 0; font-size: .8125rem; font-weight: 600; text-decoration: none; } .sc-skip:focus-visible { left: 0; } .page { --inset: clamp(1.25rem, 5vw, 5rem); padding-left: var(--inset); padding-right: var(--inset); } .wrap { max-width: 78rem; margin-inline: auto; width: 100%; } .wrap--narrow { max-width: 46rem; } .pagehead h1 { text-wrap: balance; } .hr { height: 1px; background: var(--nae-hairline); border: 0; margin: 0; } /* ============================================================ THE BAR. Fixed, minimal, one CTA. Identical on every page. ============================================================ */ .bar { position: fixed; inset: 0 0 auto 0; z-index: 120; height: var(--bar-h); display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); padding-inline: clamp(1.25rem, 5vw, 5rem); color: #F4F1EC; background: none; } /* The bar's ground is a separate, masked layer. Two things follow from that: it is mixed from the CURRENT daylight rather than a fixed colour, so it can never sit as a different green against the sky behind it; and the blur and the tint both fade out through a mask, so there is no cutoff line where the bar ends. A flat panel with a hard bottom edge was the conflict. */ .bar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient( to bottom, color-mix(in oklab, var(--day-bg, #0B2107) 86%, transparent) 0%, color-mix(in oklab, var(--day-bg, #0B2107) 58%, transparent) 46%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 42%, rgba(0,0,0,.55) 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 42%, rgba(0,0,0,.55) 72%, transparent 100%); transition: opacity .35s var(--sc-ease-out); } .bar.is-stuck::before, .bar.is-open::before { background: linear-gradient( to bottom, color-mix(in oklab, var(--day-bg, #0B2107) 97%, transparent) 0%, color-mix(in oklab, var(--day-bg, #0B2107) 88%, transparent) 58%, color-mix(in oklab, var(--day-bg, #0B2107) 30%, transparent) 88%, transparent 100%); backdrop-filter: blur(13px) saturate(135%); } /* solid once the reader has left the hero, or whenever the menu is open */ /* No rule under the bar: a hairline across the full width reads as an underline on the navigation. The solid state lives on ::before above. */ .bar__mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; flex: none; } /* The mark scales with the wordmark: 26px type against a 4.5rem mark holds the same ratio the 17px/3rem lockup had, and --bar-h grew with both so the lockup keeps its breathing room rather than filling the bar. */ .bar__mark img { width: 4.5rem; height: auto; display: block; } .bar__mark b { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.625rem; letter-spacing: -.02em; white-space: nowrap; } .bar__nav { display: flex; align-items: center; gap: clamp(.75rem, 1.8vw, 1.6rem); margin-left: auto; } /* The wordmark went to 26px; the nav links did not follow it. A 26px nav read as a second headline competing with the lockup, and it was what pushed the full row from 956px to 1285px. */ .bar__nav > a, .bar__trigger { font: inherit; font-size: .9375rem; font-weight: 500; letter-spacing: .005em; color: rgba(244, 241, 236, .78); text-decoration: none; background: none; border: 0; padding: .45rem 0; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; transition: color .16s var(--sc-ease-out); } .bar__nav > a:hover, .bar__trigger:hover, .bar__nav > a[aria-current], .bar__trigger[aria-expanded="true"] { color: #F4F1EC; } .bar__nav > a[aria-current] { font-weight: 600; } .bar__trigger svg { width: .6rem; height: .6rem; transition: transform .22s var(--sc-ease-out); } .bar__trigger[aria-expanded="true"] svg { transform: rotate(180deg); } .bar .btn { flex: none; font-size: .9375rem; padding: .75rem 1.35rem; } /* --- the mega menu --- */ .mega { position: fixed; inset: var(--bar-h) 0 auto 0; z-index: 119; background: color-mix(in oklab, var(--day-bg, #0B2107) 97%, transparent); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--nae-hairline); padding: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.25rem, 5vw, 5rem) clamp(1.75rem, 4vw, 3rem); max-height: calc(100svh - var(--bar-h)); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-.5rem); transition: opacity .22s var(--sc-ease-out), transform .28s var(--sc-ease-out), visibility 0s linear .28s; } .mega[data-open] { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--sc-ease-out), transform .28s var(--sc-ease-out), visibility 0s; } @media (prefers-reduced-motion: reduce) { .mega, .mega[data-open] { transform: none; } } .mega__inner { max-width: 78rem; margin-inline: auto; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); } @media (min-width: 900px) { .mega__inner { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); } } .mega__label { font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--nae-green); font-weight: 700; margin-bottom: 1rem; } .mega__grid { display: grid; gap: .15rem 2rem; } @media (min-width: 620px) { .mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mega__item { display: grid; grid-template-columns: 1.75rem 1fr; gap: .1rem .5rem; padding: .55rem 0; text-decoration: none; color: inherit; border-bottom: 1px solid rgba(244, 241, 236, .08); } .mega__item:hover { border-bottom-color: var(--nae-hairline-2); } .mega__item span { grid-column: 1; font-size: .6875rem; color: var(--nae-muted); font-variant-numeric: tabular-nums; padding-top: .18rem; } .mega__item b { grid-column: 2; font-family: var(--sc-font-display); font-weight: 600; font-size: .9375rem; letter-spacing: -.014em; } .mega__item em { grid-column: 2; font-style: normal; font-size: .75rem; color: var(--nae-muted); line-height: 1.45; } .mega__item:hover b { color: var(--nae-green); } .mega__promo { border-left: 1px solid var(--nae-hairline); padding-left: clamp(1.25rem, 2.5vw, 2rem); align-self: start; } @media (max-width: 899px) { .mega__promo { border-left: 0; padding-left: 0; border-top: 1px solid var(--nae-hairline); padding-top: 1.5rem; } } .mega__promo img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--sc-r-sm); display: block; } .mega__promo h4 { margin-top: .9rem; font-size: 1.0625rem; letter-spacing: -.018em; } .mega__promo p { margin-top: .4rem; font-size: .8125rem; color: var(--nae-muted); line-height: 1.55; } .mega__promo .runlink { display: inline-block; margin-top: .75rem; font-size: .8125rem; } /* ============================================================ The bar on a narrow screen. Three steps rather than one. The bar holds a wordmark, five links and a CTA, which needs about 620px of room; a phone gives it 390. Hiding two links, which is all the old rule did, left the last one clipped at the right edge with nothing to tell the reader it was there. Every breakpoint below was re-measured after the type went to 26px. The old ladder was calibrated for a 17px wordmark and a 15px nav, and at 26px it failed at eight widths: the full row now wants about 1285px where it used to want 956px. Step 1, under 1400px: the two secondary links fold into the panel. Step 2, under 1100px: every link folds in, and the trigger stops saying "What we do" and starts being the menu. Same button, same panel, same script: only the label and the icon change. Step 3, under 700px: the CTA shortens and the lockup tightens. 26px of wordmark and 26px of nav cannot both fit a phone, so this step is a deliberate step down rather than a proportional scale. Step 4, under 370px: the wordmark drops to the mark alone. ============================================================ */ @media (max-width: 1120px) { .bar__nav > a.is-secondary { display: none; } } .bar__trigger__narrow, .i-burger { display: none; } .i-burger { width: 1.25rem; height: .875rem; } /* The lines fold into a cross when the panel is open, so the button says whether it is the way in or the way out. transform-origin is given in viewBox units: an SVG element's transform box is the view box by default, and a horizontal path has no height of its own to centre on. */ .i-burger path { transform-origin: 9px 6px; transition: transform .26s var(--sc-ease-out), opacity .16s var(--sc-ease-out); } .bar__trigger[aria-expanded="true"] .i-burger path:nth-child(1) { transform: translateY(4.75px) rotate(45deg); } .bar__trigger[aria-expanded="true"] .i-burger path:nth-child(2) { opacity: 0; } .bar__trigger[aria-expanded="true"] .i-burger path:nth-child(3) { transform: translateY(-4.75px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .i-burger path { transition: none; } } /* The panel's page list. It only exists on the screens where the bar has given those links up, so on a desktop it is not in the panel at all. */ .mega__nav { display: none; } .mega__nav a { display: block; padding: .7rem 0; border-bottom: 1px solid rgba(244, 241, 236, .08); text-decoration: none; color: rgba(244, 241, 236, .82); font-family: var(--sc-font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.014em; } .mega__nav a[aria-current] { color: #F4F1EC; } .mega__nav a[aria-current]::after { content: ""; display: inline-block; vertical-align: middle; width: .3rem; height: .3rem; margin-left: .5rem; border-radius: 50%; background: var(--sc-accent); } @media (max-width: 900px) { .bar__nav > a { display: none; } .bar__trigger__wide, .i-chev { display: none; } .bar__trigger__narrow { display: inline; } .i-burger { display: block; } /* The menu button belongs at the outside edge on a phone, past the CTA. */ .bar__nav { order: 3; margin-left: 0; } .bar__cta { order: 2; margin-left: auto; } /* A 18x12 glyph is not a tap target. The button keeps the icon's size and grows its hit area to a finger's width. */ .bar__trigger { padding: .45rem 0 .45rem .15rem; gap: .5rem; min-height: 2.75rem; min-width: 2.75rem; justify-content: flex-end; position: relative; } /* It is the only way into the navigation on this screen, so it is not a dimmed secondary link here the way it is beside four others. */ .bar__trigger { color: #F4F1EC; } .mega__nav { display: block; margin-bottom: clamp(1.5rem, 4vw, 2rem); } /* A phone panel is scrolled, not hovered: stop the page behind it moving when the list runs out. */ .mega { overscroll-behavior: contain; } } /* Under 700px the wordmark, the CTA and the button cannot all keep their full size. The wordmark is the one thing that cannot shorten, so the CTA does: "Quote" is still the same action and the same destination. The bar also comes back down to 5rem here, because a 6.5rem bar on a phone is eating a tenth of the viewport before anything is read. */ .bar__cta__narrow { display: none; } @media (max-width: 620px) { :root { --bar-h: 5rem; } .bar { padding-inline: 1rem; gap: .95rem; } /* Fluid rather than stepped. A fixed phone size fitted a 414px screen and overflowed a 375px one by two pixels, which is the kind of margin that turns into a bug on the next device. These track the viewport instead. */ .bar__mark img { width: clamp(2.1rem, 9vw, 2.75rem); } .bar__mark b { font-size: clamp(.875rem, 3.6vw, 1.125rem); } .bar__mark { gap: .5rem; } .bar__cta__wide { display: none; } .bar__cta__narrow { display: inline; } .bar .btn { padding: .6rem .95rem; } /* The icon carries the button on its own here, but the word is hidden rather than removed: an aria-label would rename the button on desktop too, where it genuinely says "What we do". */ .bar__trigger__narrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* Below 350px even the shortened set does not fit, so the wordmark falls back to the mark on its own. It is the last thing to go, and it goes only on the handful of screens narrower than an iPhone SE. */ @media (max-width: 370px) { /* Hidden, not removed. The image is decorative (alt=""), so display:none on the wordmark would leave the home link with no accessible name at all. */ .bar__mark b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap; padding: .6rem 1.1rem; border-radius: var(--sc-r-sm); background: var(--sc-accent); color: var(--sc-accent-ink); font-size: .8125rem; font-weight: 700; letter-spacing: .005em; text-decoration: none; border: 0; cursor: pointer; transition: transform .14s var(--sc-ease-out), background .16s var(--sc-ease-out); } .btn:hover { background: #B4DC8A; } .btn:active { transform: translateY(1px); } .btn--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--nae-hairline-2); } .btn--ghost:hover { background: rgba(244, 241, 236, .08); } .paper .btn--ghost:hover { background: rgba(16, 38, 45, .06); } .btn--lg { padding: .8rem 1.5rem; font-size: .9375rem; } /* ============================================================ THE DAYLIGHT. Signature move: scroll drives the light. One fixed layer behind everything holds the sun. As the reader travels, the page ground moves from a cool pre-dawn green through the brand's exact midday green to a warm dusk, the sun tracks across and down, and its warmth and size change with it. One input, and the whole page moves together. The accent does NOT move. taste.md locks one accent hue per page, and a CTA that changes colour as you scroll is a different rule being broken to serve this one. ============================================================ */ .daylight { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: /* the closing light: eases in only as the page arrives, anchored below the fold and reaching up, so it never cuts off against the top edge and it is not clipped by any stage's overflow. */ radial-gradient( 120vmax 78vmax at 50% 118%, color-mix(in oklab, #E8D9A8 calc(var(--close-a, 0) * 26%), transparent) 0%, transparent 68%), /* the sun, tracking across the day */ radial-gradient( var(--sun-r, 70vmax) var(--sun-r, 70vmax) at calc(var(--sun-x, .5) * 100%) calc(var(--sun-y, .18) * 100%), color-mix(in oklab, var(--sun-tint, #cfe6a8) calc(var(--sun-a, .10) * 100%), transparent) 0%, transparent 62%); } /* Content rides above the light. Sections are transparent so the ground and the sun show through; only media and the footer paint. The light sits at z-index -1 rather than pushing every other body child to z-index 1: a blanket `body > *` rule has the same specificity as `.bar` and, coming later, silently overrode its `position: fixed`, so the navigation scrolled away on the home page. */ /* Every photograph and clip is graded to the same hour. Kept off the footer mark and the wordmark, which are graphics rather than light. */ .clipframe video, .clipframe img, [data-sc-stage] video[data-sc-scrub], [data-sc-stage] img.sc-stage__poster, .split img, .bleed img, .card__img img, .obj__img img, .post-hero img, .mega__promo img { filter: var(--media-grade, none); } @media (prefers-reduced-motion: reduce) { /* the hour still lands, it just stops travelling with the wheel */ .daylight { transition: none; } } /* ============================================================ Acts ============================================================ */ .stage-pad { position: absolute; inset: 0; display: grid; align-items: center; padding: calc(var(--bar-h) + clamp(1rem, 4vh, 3rem)) clamp(1.25rem, 5vw, 5rem) clamp(2rem, 6vh, 4rem); } .stage-pad > * { max-width: 78rem; margin-inline: auto; width: 100%; } /* --- hero --- */ .hero__kicker { font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--nae-green); font-weight: 700; display: block; margin-bottom: 1.3rem; } .hero h1 { font-size: clamp(2.4rem, 6.4vw, 5.6rem); letter-spacing: -.038em; line-height: .95; max-width: 15ch; } .hero__lede { margin-top: 1.4rem; max-width: 46ch; font-size: var(--sc-t-lg); line-height: 1.5; color: rgba(244, 241, 236, .85); } .hero__cta { margin-top: 1.9rem; display: flex; gap: .75rem; flex-wrap: wrap; } /* On a phone the 13ch measure forced the headline into five lines. Dropping the measure alone gets it to three, but only at 390px and wider: the type was a clamp whose floor held it at 33.6px all the way down to 320px, where there is only ~280px of column to put it in. So the size scales with the viewport instead. The longest of the three lines measures 10.36x the font size, and the column is the viewport less two 20px gutters, which gives font <= (vw - 40) / 10.36. The expression below sits about 8 per cent under that the whole way from 320px to 700px. Verified as three lines at 320, 360, 375, 390, 414 and 430. */ /* On a phone the 13ch measure forced the headline into five lines. The measure has to go, and below about 390px the type has to come with it: the old size was a clamp whose floor held it at 33.6px all the way down to 320px, where there is only ~280px of column to put it in. The longest of the three lines measures 10.36x the font size, and the column is the viewport less two 20px gutters, so the constraint is font <= (vw - 40) / 10.36. 8.2vw sits under that from 320px up, and the 2.6rem ceiling keeps it under it through to 700px. At 390px this works out at 32px against the 33.6px it was, so nothing shrinks on the phones people actually hold. The 701 to 860 band needs no size change, only the cap removed: it had plenty of column and was being held to 15ch. */ @media (max-width: 700px) { .hero h1 { font-size: clamp(1.5rem, 8.2vw, 2.6rem); max-width: 100%; } } @media (min-width: 701px) and (max-width: 860px) { .hero h1 { max-width: 100%; } } /* The headline set in four lines, which is chunky at display size. Two things bind its width and only one of them is obvious: the h1's own ch measure, and the engine's `.sc-copy` cap of 46rem on the block around it. The block is the tighter of the two at 736px, so widening the headline alone changed nothing, which is the trap here. Measured rather than guessed: the longest of the three intended lines is 10.4x the font size. The font is 6.4vw until it clamps at 5.6rem, so the cap has to track it the same way, with a little headroom. Three lines from 861px up, and at 1440 the headline still leaves 400px of clear gutter to its right. Left below 861px, where the engine drops the cap entirely and the headline is meant to run the full column. */ @media (min-width: 861px) { .sc-copy.hero { max-width: min(58.5rem, 68vw); } .hero h1 { max-width: 19ch; } } /* --- pinned argument --- */ .argument { display: grid; align-content: center; } .argument p { grid-area: 1 / 1; align-self: center; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.55rem, 4.2vw, 3.3rem); letter-spacing: -.032em; line-height: 1.06; max-width: 20ch; } .argument p em { font-style: normal; color: var(--nae-green); } /* --- ledger (the peak) --- */ .ledger { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } @media (min-width: 980px) { .ledger { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); } } .ledger__h { font-size: clamp(1.5rem, 3.4vw, 2.5rem); letter-spacing: -.032em; line-height: 1.04; max-width: 16ch; } .ledger__rows { border-top: 1px solid var(--nae-hairline-2); margin-top: 1.3rem; } .ledger__row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: .78rem 0; border-bottom: 1px solid var(--nae-hairline); } .ledger__row dt { color: rgba(244, 241, 236, .72); font-size: var(--sc-t-sm); } .ledger__row dd { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.022em; font-size: clamp(1.05rem, 2.2vw, 1.5rem); } .ledger__row--total { border-bottom: 0; border-top: 2px solid var(--sc-accent); margin-top: .4rem; padding-top: 1rem; } .ledger__row--total dt { color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-base); } .ledger__row--total dd { font-size: clamp(1.8rem, 4.4vw, 3rem); color: var(--sc-accent); } .ledger__note { margin-top: 1rem; font-size: .75rem; color: var(--nae-muted); line-height: 1.55; max-width: 46ch; } .ledger__cap { margin-top: .7rem; font-size: .6875rem; line-height: 1.45; color: var(--nae-muted); display: flex; gap: .55rem; border-top: 1px solid var(--nae-hairline); padding-top: .5rem; } .ledger__cap b { color: var(--sc-ink); font-weight: 600; flex: none; font-variant-numeric: tabular-nums; } .clipframe { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--sc-r-sm); background: var(--nae-deep); box-shadow: 0 2px 4px rgb(0 0 0 / .4), 0 22px 52px -20px rgb(0 0 0 / .7); } @media (max-width: 979px) { .clipframe { aspect-ratio: 16 / 10; } .ledger__row { padding: .48rem 0; } .ledger__note, .ledger__cap { font-size: .6875rem; } } /* --- rail (the range) --- */ .rail { display: flex; gap: clamp(1rem, 2.2vw, 1.6rem); align-items: stretch; height: 100%; padding: calc(var(--bar-h) + 3vh) clamp(1.25rem, 5vw, 5rem) 4vh; will-change: transform; } .rail__lead, .rail__end { flex: none; width: clamp(17rem, 27vw, 23rem); align-self: center; } .rail__lead h2 { font-size: clamp(1.7rem, 3.6vw, 2.8rem); letter-spacing: -.032em; line-height: 1.03; } .rail__lead p, .rail__end p { margin-top: 1rem; color: rgba(244,241,236,.78); font-size: var(--sc-t-sm); line-height: 1.55; } .rail__end .btn { margin-top: 1.25rem; } .obj { flex: none; width: clamp(16.5rem, 26vw, 23rem); align-self: center; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .obj__img { overflow: hidden; border-radius: var(--sc-r-sm); background: var(--sc-surface); } .obj__img img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .5s var(--sc-ease-out); } .obj__ph { aspect-ratio: 4/3; display: grid; place-items: center; background: linear-gradient(140deg, #143714, #0B2107); border: 1px solid var(--nae-hairline); border-radius: var(--sc-r-sm); } .obj__ph span { font-family: var(--sc-font-display); font-weight: 700; font-size: 2rem; color: rgba(244,241,236,.14); } @media (hover: hover) and (pointer: fine) { .obj:hover .obj__img img { transform: scale(1.04); } } .obj__n { font-size: .625rem; letter-spacing: .18em; color: var(--nae-muted); font-variant-numeric: tabular-nums; margin-bottom: .7rem; } .obj h3 { margin-top: 1rem; font-size: 1.25rem; letter-spacing: -.018em; line-height: 1.16; } .obj p { margin-top: .55rem; font-size: .875rem; color: rgba(244,241,236,.7); line-height: 1.5; } .obj__more { margin-top: .7rem; font-size: .75rem; color: var(--sc-accent); font-weight: 700; } /* --- close --- */ .close { display: grid; place-items: center; text-align: center; } .close__h { font-size: clamp(2rem, 5.4vw, 4.2rem); letter-spacing: -.036em; line-height: 1.0; max-width: 17ch; margin-inline: auto; } .close__p { margin-top: 1.3rem; max-width: 48ch; margin-inline: auto; color: rgba(244,241,236,.8); font-size: var(--sc-t-lg); line-height: 1.55; } .close__cta { margin-top: 1.9rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; } .close__fine { margin-top: 1.9rem; font-size: .75rem; color: var(--nae-muted); } /* ============================================================ Flow sections (every page) ============================================================ */ .sect { padding-block: clamp(3rem, 8vh, 6rem); } /* A flow section directly after a pinned act inherits a full viewport of scroll while the stage clears, so full padding on top of that delays its first content by another screen. */ .sect--tight { padding-block: clamp(1.5rem, 4vh, 3rem); } .sect__k { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sc-accent); font-weight: 700; display: block; margin-bottom: 1rem; } .sect__h { font-size: clamp(1.6rem, 3.6vw, 2.6rem); letter-spacing: -.03em; line-height: 1.06; max-width: 22ch; } .sect__lede { margin-top: 1rem; max-width: var(--sc-measure); color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.55; } .pagehead { padding-block: calc(var(--bar-h) + clamp(3rem, 9vh, 6rem)) clamp(2rem, 5vh, 3rem); } .pagehead h1 { font-size: clamp(2.1rem, 5.6vw, 4.2rem); letter-spacing: -.036em; line-height: 1.05; max-width: 18ch; } .pagehead p { margin-top: 1.75rem; max-width: 52ch; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); } /* The kicker had no rule at all, so it rendered as body text hard against the headline -- the "clumped" look. Same treatment as .hero__kicker, which is what it was always meant to match. */ .pagehead__kicker { display: block; width: fit-content; max-width: 100%; font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sc-accent); font-weight: 700; margin-bottom: clamp(1.1rem, 2.4vh, 1.6rem); } @media (max-width: 700px) { .pagehead h1 { font-size: var(--sc-t-2xl); } } /* full-bleed media band */ .bleed { position: relative; width: 100%; overflow: hidden; margin: 0; } .bleed img, .bleed video { width: 100%; height: auto; display: block; } .bleed--tall img { aspect-ratio: 21/9; object-fit: cover; } @media (max-width: 700px) { .bleed--tall img { aspect-ratio: 4/3; } } .bleed figcaption { margin-top: .7rem; padding-inline: clamp(1.25rem, 5vw, 5rem); font-size: .75rem; color: var(--nae-muted); display: flex; gap: .6rem; } .bleed figcaption b { color: var(--sc-ink); font-weight: 600; flex: none; font-variant-numeric: tabular-nums; } .split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .split--flip .split__a { order: 2; } } .split__t > * + * { margin-top: 1.1rem; } .split__t p { color: var(--sc-ink-soft); max-width: var(--sc-measure); } .split__t p.lede { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); } .split img { width: 100%; height: auto; display: block; border-radius: var(--sc-r-sm); } .figures { border-top: 1px solid var(--nae-hairline-2); } .figures__label { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nae-muted); padding-top: .8rem; } .figures__grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-top: .5rem; } .figures__grid > div { padding: 1rem 1rem 1rem 0; border-top: 1px solid var(--nae-hairline); } .figures__v { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.35rem); letter-spacing: -.028em; line-height: 1; font-variant-numeric: tabular-nums; display: block; } .figures__v small { font-size: .5em; font-weight: 600; letter-spacing: 0; margin-left: .2em; } .figures__l { display: block; margin-top: .45rem; font-size: .75rem; color: var(--nae-muted); line-height: 1.35; } .stages { border-top: 1px solid var(--nae-hairline-2); } .stage { display: grid; gap: .6rem 2rem; padding: clamp(1.4rem, 3.2vh, 2.2rem) 0; border-bottom: 1px solid var(--nae-hairline); } @media (min-width: 860px) { .stage { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } .stage__n { font-family: var(--sc-font-display); font-weight: 700; font-size: .8125rem; letter-spacing: .1em; color: var(--sc-accent); font-variant-numeric: tabular-nums; padding-top: .25rem; } .stage__h { font-size: clamp(1.15rem, 2.2vw, 1.6rem); letter-spacing: -.02em; line-height: 1.14; } .stage__h small { display: block; font-family: var(--sc-font-text); font-weight: 500; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nae-muted); margin-bottom: .45rem; } .stage__b { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; } .stage__checks { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; } .stage__checks li { font-size: .6875rem; color: var(--nae-blue); letter-spacing: .02em; display: flex; align-items: center; gap: .35rem; } .stage__checks li::before { content: ""; width: .3rem; height: .3rem; border-radius: 50%; background: currentColor; flex: none; } .list { border-top: 1px solid var(--nae-hairline-2); } .list__row { display: grid; gap: .55rem 2rem; align-items: start; padding: clamp(1.3rem, 3.2vh, 2.1rem) 0; border-bottom: 1px solid var(--nae-hairline); text-decoration: none; color: inherit; } @media (min-width: 860px) { .list__row { grid-template-columns: 3.5rem minmax(0, 1.1fr) minmax(0, 1.4fr) auto; align-items: center; } } .list__n { font-size: .75rem; color: var(--nae-muted); font-variant-numeric: tabular-nums; letter-spacing: .1em; } .list__t { font-size: clamp(1.1rem, 2.1vw, 1.55rem); letter-spacing: -.022em; line-height: 1.14; } .list__d { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; } .list__go { font-size: .75rem; color: var(--sc-accent); font-weight: 700; white-space: nowrap; } @media (hover: hover) and (pointer: fine) { a.list__row:hover .list__t { color: var(--sc-accent); } } /* The 3.5rem lead column was sized for a two-digit index. A full date wraps to three lines in it, so a list that carries dates gets a wider one. */ @media (min-width: 860px) { .list--dated .list__row { grid-template-columns: 6.75rem minmax(0, 1.1fr) minmax(0, 1.4fr) auto; } } .list--dated .list__n { white-space: nowrap; } .group__label { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 6vh, 4rem); margin-bottom: .6rem; } .group__label b { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-accent); font-weight: 700; } .group__label span { font-size: .8125rem; color: var(--nae-muted); } .cardset { display: grid; gap: clamp(1.25rem, 3vw, 2rem); } @media (min-width: 760px) { .cardset { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .card { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .card__img { overflow: hidden; border-radius: var(--sc-r-sm); background: var(--sc-surface); } .card__img img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform .5s var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { .card:hover .card__img img { transform: scale(1.03); } } .card__meta { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nae-muted); margin-top: .9rem; } .card h3 { margin-top: .5rem; font-size: var(--sc-t-lg); letter-spacing: -.02em; line-height: 1.15; } .card p { margin-top: .5rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.55; } .card.card--wide { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; } @media (min-width: 860px) { .card.card--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } } .card.card--wide .card__img img { aspect-ratio: 16/9; } .card.card--wide h3 { font-size: clamp(1.5rem, 3.2vw, 2.35rem); letter-spacing: -.026em; } .card.card--wide .card__meta { margin-top: 0; } .card.card--wide p { font-size: var(--sc-t-base); } .feature__note { max-width: 44ch; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; margin-bottom: 1.5rem; } .feature2 { display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start; } @media (min-width: 860px) { .feature2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } } .feature2 .card--lead h3 { font-size: clamp(1.4rem, 2.8vw, 2.05rem); } .feature2 .card--lead .card__img img { aspect-ratio: 3/2; } .feature2 .card:not(.card--lead) { align-self: end; } .qa { border-bottom: 1px solid var(--nae-hairline); } .qa summary { list-style: none; cursor: pointer; padding: 1.1rem 0; display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1rem, 2vw, 1.25rem); letter-spacing: -.018em; line-height: 1.2; } .qa summary::-webkit-details-marker { display: none; } .qa summary::after { content: "+"; color: var(--sc-accent); font-weight: 700; flex: none; font-size: 1.1em; } .qa[open] summary::after { content: "\2013"; } /* FAQ categories. An outer

per category so the page opens as a short list of subjects rather than one long wall of questions; the question rows inside are the same .qa control, one level down. */ .faqcat { border-bottom: 1px solid var(--nae-hairline); } .faqcat > summary { list-style: none; cursor: pointer; padding: 1.4rem 0; display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.4rem); letter-spacing: -.022em; line-height: 1.2; } .faqcat > summary::-webkit-details-marker { display: none; } .faqcat > summary::after { content: "+"; color: var(--sc-accent); font-weight: 700; flex: none; font-size: 1.15em; } .faqcat[open] > summary::after { content: "\2013"; } .faqcat__t { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; min-width: 0; } .faqcat__t em { font-style: normal; font-family: var(--sc-font-text); font-weight: 600; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nae-muted); flex: none; } .faqcat__d { margin: -.4rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--nae-muted); max-width: 56ch; } .faqcat__body { padding: .9rem 0 1.5rem; } .faqcat__body .qa:last-child { border-bottom: 0; } .faqcat__body .qa summary { font-size: clamp(.95rem, 1.7vw, 1.0625rem); padding: .95rem 0; } .qa__a { padding-bottom: 1.25rem; max-width: var(--sc-measure); color: var(--sc-ink-soft); line-height: 1.65; } .prose { max-width: 40rem; } .prose p { margin-top: 1.3rem; font-size: 1.0625rem; line-height: 1.72; color: var(--sc-ink-soft); } .prose p:first-child { margin-top: 0; } .prose p.lede { font-size: 1.25rem; line-height: 1.55; color: var(--sc-ink); } .form { display: grid; gap: 1rem; } @media (min-width: 720px) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .field { display: flex; flex-direction: column; gap: .35rem; } .field--wide { grid-column: 1 / -1; } .field label { font-size: .75rem; letter-spacing: .06em; color: var(--nae-muted); font-weight: 500; } .field label .opt { text-transform: none; letter-spacing: 0; opacity: .8; } .field input, .field select, .field textarea { font: inherit; font-size: var(--sc-t-sm); color: var(--sc-ink); background: color-mix(in srgb, var(--sc-canvas) 82%, #000); border: 1px solid var(--nae-hairline-2); border-radius: var(--sc-r-sm); padding: .68rem .78rem; width: 100%; transition: border-color .16s var(--sc-ease-out); } .paper .field input, .paper .field select, .paper .field textarea { background: #fff; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--sc-ink-soft); } .field textarea { min-height: 7rem; resize: vertical; } .field small { font-size: .75rem; color: var(--nae-muted); line-height: 1.45; } .contactcard { border-top: 1px solid var(--nae-hairline-2); padding-top: 1.2rem; font-size: .8125rem; line-height: 1.8; } .contactcard h4 { font-family: var(--sc-font-text); font-weight: 600; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nae-muted); margin-bottom: .7rem; } .contactcard a { color: var(--sc-ink); text-decoration: none; } .contactcard a:hover { color: var(--sc-accent); text-decoration: underline; } .flag { display: inline-flex; align-items: center; gap: .4rem; font-size: .6875rem; letter-spacing: .06em; font-weight: 600; color: #DBF1FF; background: rgba(109, 190, 241, .16); border-radius: var(--sc-r-pill); padding: .2rem .6rem; } .paper .flag { color: #225682; background: #DBF1FF; } .runlink { color: var(--sc-accent); font-weight: 700; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1.5px; } .runlink:hover { text-decoration-thickness: 3px; } /* ============================================================ THE FOOTER. Replicated from the live site: forest ground, cream tagline with a green terminal period, and the mark set large as a translucent overlay bleeding off the right edge. ============================================================ */ .foot { position: relative; overflow: hidden; /* The deep ground arrives THROUGH the current daylight rather than butting against it. Without this the footer printed a hard horizontal line across the page wherever the hour was lighter than #0B2107. */ background: linear-gradient(to bottom, var(--day-bg, #0B2107) 0%, color-mix(in oklab, var(--day-bg, #0B2107) 55%, var(--nae-deep)) 5rem, var(--nae-deep) 13rem); color: #F4F1EC; --sc-ink: #F4F1EC; --sc-ink-soft: rgba(244,241,236,.72); --sc-accent: #A1CF72; --nae-hairline: rgba(244,241,236,.15); --nae-hairline-2: rgba(244,241,236,.30); --nae-muted: rgba(244,241,236,.55); padding-block: clamp(3rem, 8vh, 5.5rem) clamp(1.5rem, 4vh, 2.5rem); } .foot__mark { position: absolute; right: -5%; bottom: -5%; width: min(66%, 51rem); pointer-events: none; user-select: none; opacity: .10; transform: rotate(-5deg); } /* The mark is a blue-and-green lockup. Flattened to pure white it reads as one shape at plate scale, which is how it sits in the live footer. */ .foot__mark img { filter: brightness(0) invert(1); } .foot__mark img { width: 100%; height: auto; display: block; } .foot__inner { position: relative; z-index: 1; } .foot__top { display: grid; gap: 2rem clamp(1.5rem, 4vw, 3rem); } @media (min-width: 860px) { .foot__top { grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, .8fr)); } } .foot__lead { font-size: var(--sc-t-lg); line-height: 1.45; max-width: 24ch; color: #F4F1EC; } .foot .btn--ghost { margin-top: 1.4rem; color: #F4F1EC; box-shadow: inset 0 0 0 1px rgba(244,241,236,.35); } .foot .btn--ghost:hover { background: rgba(244,241,236,.09); } .foot__col h4 { font-family: var(--sc-font-text); font-weight: 600; font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,241,236,.5); margin-bottom: 1rem; } .foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; font-size: .875rem; } .foot__col a { color: #F4F1EC; text-decoration: none; } .foot__col a:hover { color: var(--sc-accent); text-decoration: underline; } .foot__col li { color: rgba(244,241,236,.82); } .foot__note { display: block; margin-top: .2rem; font-size: .8125rem; color: rgba(244,241,236,.62); } /* The address is a link to the Maps listing; it should read as address first. */ .maplink { color: inherit; text-decoration: none; } .maplink:hover, .maplink:focus-visible { color: var(--sc-accent); text-decoration: underline; text-underline-offset: .2em; } /* the tagline: cream, terminal period in green, at plate scale */ .foot__tagline { margin-top: clamp(2.5rem, 8vh, 5rem); font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.1rem, 8.4vw, 6.4rem); letter-spacing: -.04em; line-height: .96; color: #F4F1EC; } .foot__tagline i { font-style: normal; color: var(--sc-accent); } .foot__imprint { margin-top: clamp(2rem, 5vh, 3rem); padding-top: 1.1rem; border-top: 1px solid rgba(244,241,236,.15); display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; font-size: .75rem; color: rgba(244,241,236,.55); } /* ------------------------------------------------------------ Reduced motion ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .obj__img img, .card__img img { transition: none; } } /* A keyboard user can reach a reveal before its observer fires. */ [data-sc-in]:focus-within, [data-sc-stagger] > *:focus-within { opacity: 1; transform: none; } /* Hero scrim: a column of density under the copy column plus a light bottom band, rather than a corner gradient. The kicker sits high in the frame where the sky is brightest, and a corner gradient measured 1.6:1 there. Kept as a sibling of the copy, never a child: the verification pass hides the copy element and everything inside it to photograph the frame underneath, so a scrim nested in the copy is never measured. */ .hero-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; /* Straight 90deg, so density depends only on x. An angled gradient made the density at the kicker's height lower than at mid-frame, and the clip has a bright glare patch (raw luminance 0.68) exactly there. */ /* Shaped to the copy, not to the frame. The headline's right edge sits at about 70% of the viewport once it sets in three lines, so the scrim holds its density through 71% and then falls away quickly, reaching nothing by 93%. That keeps the worker and the bright right edge of the photograph unflattened while the type still clears its threshold. Every stop below came off a glyph-level measurement on the composited page at 1280, 1440 and 1920, at four scrub positions. The previous stops fell to nothing at 74%, which left the headline almost unscrimmed: it was measuring 1.4:1 against the frame, and it was already under the 3:1 that text this size needs before the headline was widened. */ background: linear-gradient(90deg, rgba(11,33,7,.86) 0%, rgba(11,33,7,.82) 44%, rgba(11,33,7,.74) 62%, rgba(11,33,7,.60) 71%, rgba(11,33,7,.16) 84%, rgba(11,33,7,0) 93%), linear-gradient(to top, rgba(11,33,7,.58) 0%, rgba(11,33,7,0) 52%); } @media (max-width: 860px) { /* the copy spans the full width here, so the column becomes a band */ /* The copy spans the full width here, so the column becomes a band. It has to stay dense as high as the kicker sits (~59% up at 390x844): measured on the composite, the previous stops gave that line only 3.37:1. */ .hero-scrim { background: linear-gradient(to top, rgba(11,33,7,.95) 0%, rgba(11,33,7,.90) 56%, rgba(11,33,7,.52) 78%, rgba(11,33,7,0) 100%); } } /* A short label set as a block stretches its box the full width of the copy column. The text is legible; the empty right end of the box sits over bright sky, and contrast is measured on the box, not on the glyphs. Shrink-wrap it. */ .hero__kicker, .sect__k { width: fit-content; max-width: 100%; } /* The accent green is only used on grounds we control. Over a photographic frame its luminance is too close to a lit sky to clear 4.5:1 for small uppercase text without a scrim dense enough to flatten the photograph, so the label over video takes the brand's cream instead. Green stays on the button beneath it, where the ground is solid. */ .hero .hero__kicker { color: #F4F1EC; } /* ============================================================ Blog: full-bleed hero, and a second layout for long technical pages that need a contents rail beside the prose. ============================================================ */ .post-hero { position: relative; margin: 0; } .post-hero img { width: 100%; height: auto; display: block; aspect-ratio: 21/9; object-fit: cover; } @media (max-width: 760px) { .post-hero img { aspect-ratio: 3/2; } } .post-hero figcaption { padding: .7rem clamp(1.25rem, 5vw, 5rem) 0; font-size: .75rem; color: var(--nae-muted); } .post-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nae-muted); margin-bottom: 1.1rem; } .post-meta span:not(:last-child)::after { content: " ·"; margin-left: .4rem; } /* technical layout: prose plus a sticky contents rail */ .post-tech { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; } @media (min-width: 1000px) { .post-tech { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } .post-tech__toc { position: sticky; top: calc(var(--bar-h) + 2rem); } } .post-tech__toc h2 { font-family: var(--sc-font-text); font-weight: 600; font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--nae-muted); margin-bottom: .9rem; } .post-tech__toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nae-hairline); } .post-tech__toc li { border-bottom: 1px solid var(--nae-hairline); } .post-tech__toc a { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; padding: .5rem 0; font-size: .8125rem; line-height: 1.35; color: var(--sc-ink-soft); text-decoration: none; } .post-tech__toc a span { color: var(--nae-muted); font-variant-numeric: tabular-nums; font-size: .6875rem; padding-top: .15rem; } .post-tech__toc a:hover { color: var(--sc-ink); } .post-tech__toc a[aria-current] { color: var(--sc-accent); font-weight: 600; } .post-tech__body h2 { font-size: clamp(1.3rem, 2.6vw, 1.85rem); letter-spacing: -.024em; line-height: 1.12; margin-top: clamp(2.25rem, 6vh, 3.5rem); scroll-margin-top: calc(var(--bar-h) + 2rem); } .post-tech__body h2:first-child { margin-top: 0; } .post-tech__body .prose { max-width: 42rem; } /* a pulled specification block inside a technical article */ .spec { margin-top: 1.6rem; border-top: 1px solid var(--nae-hairline-2); border-bottom: 1px solid var(--nae-hairline-2); padding: 1rem 0; display: grid; gap: .55rem; } .spec div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; } .spec dt { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); } .spec dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--sc-t-sm); } /* A comparison rather than a measurement. The base .spec is built for a short number on the right of a label; these values are sentences, so the pair stacks and the value stops being tabular. */ .spec--wide { gap: 1.15rem; } .spec--wide div { grid-template-columns: 1fr; gap: .3rem; } .spec--wide dt { color: var(--sc-ink); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; } .spec--wide dd { font-weight: 400; font-variant-numeric: normal; line-height: 1.6; color: var(--sc-ink-soft); max-width: 46rem; } /* ============================================================ Citations. The reference is deliberately quiet in the prose and the entry is legible in the section: a reader following the argument should not be interrupted, and a reader checking where a figure came from should find it in one place. ============================================================ */ sup.cite { font-size: .625em; line-height: 0; margin-left: .1em; } sup.cite a { color: var(--nae-blue); text-decoration: none; font-weight: 700; padding: .1em .25em; border-radius: .25rem; background: rgba(109, 190, 241, .14); } sup.cite a:hover, sup.cite a:focus-visible { background: rgba(109, 190, 241, .3); color: #DBF1FF; } .cites { margin-top: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--nae-hairline-2); padding-top: clamp(1.5rem, 3.5vh, 2.25rem); max-width: 44rem; } .cites h2 { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--nae-muted); font-weight: 700; margin: 0 0 1.25rem; } .cites__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; } .cites__list li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .75rem; align-items: baseline; } .cites__n { font-variant-numeric: tabular-nums; font-size: .6875rem; font-weight: 700; color: var(--nae-blue); text-decoration: none; letter-spacing: .04em; } .cites__n:hover { color: #DBF1FF; } .cites__list--plain .cites__n { color: var(--nae-muted); } .cites__list b { display: block; font-family: var(--sc-font-text); font-weight: 600; font-size: .9375rem; line-height: 1.4; color: var(--sc-ink); } .cites__list em { display: block; margin-top: .15rem; font-style: normal; font-size: .75rem; color: var(--nae-muted); } .cites__list span { display: block; margin-top: .35rem; font-size: .8125rem; line-height: 1.55; color: var(--sc-ink-soft); } .cites__url { display: inline-block; margin-top: .4rem; font-size: .75rem; color: var(--sc-accent); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; overflow-wrap: anywhere; } .cites__url:hover { text-decoration-thickness: 2px; } .cites__nolink { color: var(--nae-muted) !important; font-size: .75rem !important; } .cites__k { margin: 1.9rem 0 1rem; font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--nae-muted); font-weight: 700; } /* the jump targets must not land under the fixed bar */ .cites__list li, sup.cite a { scroll-margin-top: calc(var(--bar-h) + 1.5rem); } /* A sectioned note. Same measured column as a plain note, with its headings kept in it: 400 words does not need a contents rail beside it. */ .post-body { max-width: 42rem; } .post-body h2 { margin-top: clamp(2rem, 4.5vh, 2.9rem); font-size: clamp(1.25rem, 2.4vw, 1.5rem); letter-spacing: -.022em; line-height: 1.18; max-width: 34ch; text-wrap: balance; } .post-body .prose { max-width: none; } .post-body .prose + h2 { margin-top: clamp(2.2rem, 5vh, 3.1rem); } /* Where this page sits in a series, and the one written to be read next. */ .serial { border-top: 1px solid var(--nae-hairline-2); padding-top: 1.4rem; display: grid; gap: 1rem; } .serial__k { font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--nae-muted); font-weight: 700; font-variant-numeric: tabular-nums; } .serial__next { display: grid; gap: .3rem; text-decoration: none; color: inherit; border: 1px solid var(--nae-hairline-2); border-radius: var(--sc-r-sm); padding: 1.1rem 1.25rem; transition: border-color .18s var(--sc-ease-out), background .18s var(--sc-ease-out); } .serial__next span { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nae-muted); } .serial__next b { font-family: var(--sc-font-display); font-size: clamp(1.0625rem, 2vw, 1.25rem); letter-spacing: -.02em; line-height: 1.25; } @media (hover: hover) and (pointer: fine) { .serial__next:hover { border-color: var(--sc-accent); background: rgba(161, 207, 114, .06); } .serial__next:hover b { color: var(--sc-accent); } } /* ============================================================ THE HANDOFF. One act, one image. The media frame starts high and small under the turn copy, then travels down and grows into the ledger position before it plays. The travel is derived from the act's own --sc-p, which the engine publishes on the act element and which inherits down here. No cue, magnet or parallax touches this element, so nothing races it for the transform. ============================================================ */ .handoff { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; width: 100%; } @media (min-width: 980px) { .handoff { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); } } /* both copy states occupy one cell and cross over inside it */ .handoff__copy { grid-area: 1 / 2; } @media (max-width: 979px) { .handoff__copy { grid-area: 2 / 1; } } .handoff__media { grid-area: 1 / 1; margin: 0; /* 0 while the turn copy holds, 1 once the frame has arrived */ --m: clamp(0, calc((var(--sc-p, 0) - 0.06) / 0.30), 1); transform: translateY(calc((1 - var(--m)) * -11vh)) scale(calc(0.84 + var(--m) * 0.16)); transform-origin: 50% 100%; will-change: transform; } @media (max-width: 979px) { .handoff__media { grid-area: 1 / 1; --m: clamp(0, calc((var(--sc-p, 0) - 0.06) / 0.30), 1); } .handoff__media { transform: translateY(calc((1 - var(--m)) * -5vh)) scale(calc(0.92 + var(--m) * 0.08)); } } /* The travel is a position change, not meaning. Reduced motion keeps the frame where it lands and lets the copy carry the handoff. */ @media (prefers-reduced-motion: reduce) { .handoff__media { transform: none; } } /* ============================================================ File upload ============================================================ */ .drop { position: relative; border: 1px dashed var(--nae-hairline-2); border-radius: var(--sc-r-sm); padding: 1.15rem 1.1rem; background: color-mix(in srgb, var(--sc-canvas) 84%, #000); transition: border-color .18s var(--sc-ease-out), background .18s var(--sc-ease-out); } .paper .drop { background: #fff; } .drop:hover, .drop.is-over { border-color: var(--sc-accent); } .drop.is-over { background: color-mix(in srgb, var(--sc-accent) 10%, transparent); } /* The input stays a real, focusable file input covering the whole area: the native control is the accessible one, and a hidden input behind a fake button loses keyboard activation and the file picker on some platforms. */ .drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .drop:focus-within { outline: 2px solid var(--sc-accent); outline-offset: 3px; } .drop__prompt { font-size: var(--sc-t-sm); color: var(--sc-ink); } .drop__prompt strong { color: var(--sc-accent); font-weight: 700; } .drop__help { margin-top: .35rem; font-size: .75rem; color: var(--nae-muted); line-height: 1.5; } .drop__list { list-style: none; margin: .85rem 0 0; padding: 0; display: grid; gap: .4rem; position: relative; z-index: 1; } .drop__list:empty { margin: 0; } .drop__list li { display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; align-items: center; font-size: .8125rem; padding: .45rem .55rem; background: color-mix(in srgb, var(--sc-ink) 8%, transparent); border-radius: var(--sc-r-sm); } .drop__list .sz { color: var(--nae-muted); font-variant-numeric: tabular-nums; font-size: .75rem; } .drop__list button { font: inherit; font-size: .75rem; background: none; border: 0; cursor: pointer; color: var(--nae-muted); padding: .15rem .3rem; border-radius: 3px; } .drop__list button:hover { color: var(--sc-ink); } .drop__error { margin-top: .6rem; font-size: .75rem; color: #FFC9BD; position: relative; z-index: 1; } .paper .drop__error { color: #A8341F; } /* ============================================================ THE PRELOADER. Atmospheric and minimal. No curtain and no panels. The overlay is the same daylight the page runs on, held at its pre-dawn hour, so the preloader is not a different screen in front of the site: it is the site's own first minute of light with the mark standing in it. The mark is the real vector master, placed twice and never redrawn: a white copy, and the brand-colour copy over it under a mask that rises. Blue and green fill the shapes from the bottom as the page loads, and the overlay then simply dissolves. ============================================================ */ .pre { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; pointer-events: none; /* the day held at dawn, matching --day-bg at t=0 */ background: radial-gradient(58vmax 58vmax at 22% 34%, color-mix(in oklab, #B0D6DE 9%, transparent) 0%, transparent 62%), #081E1A; opacity: 1; transition: opacity 700ms var(--sc-ease-out); } .pre[data-state="out"] { opacity: 0; } .pre__mark { position: relative; width: clamp(11rem, 30vw, 24rem); aspect-ratio: 1000 / 460.86; transform: scale(.97); transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); } .pre[data-state="fill"] .pre__mark, .pre[data-state="out"] .pre__mark { transform: scale(1); } .pre__mark img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* the white state the mark starts in */ .pre__mark .w { opacity: .92; } /* the brand colour, revealed from the bottom as the fill rises */ .pre__mark .c { --fill: 0%; -webkit-mask-image: linear-gradient(to top, #000 0%, #000 var(--fill), transparent calc(var(--fill) + 14%), transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 var(--fill), transparent calc(var(--fill) + 14%), transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: --fill 1500ms cubic-bezier(0.65, 0, 0.35, 1); } .pre[data-state="fill"] .pre__mark .c, .pre[data-state="out"] .pre__mark .c { --fill: 116%; } /* --fill is registered in site.js so it interpolates. Without that registration a custom property jumps rather than animating, and the colour would appear all at once instead of rising. */ /* Reduced motion: no overlay at all. A full-screen panel that has to be waited out is exactly what a motion sensitivity does not want, and the page underneath is already complete. */ @media (prefers-reduced-motion: reduce) { .pre { display: none; } } /* Indicative figures read differently from measured ones on purpose: a lighter value colour and a standing flag, so a scoping range can never be mistaken for a measurement from a real job. */ .figures--est .figures__v { color: var(--sc-ink-soft); } .figures__note { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--nae-hairline); font-size: .75rem; line-height: 1.6; color: var(--nae-muted); display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; max-width: 62ch; } .figures__note .flag { flex: none; } /* ============================================================ Projects. The record list and the project pages lost their styles when the theme was rewritten for the filmic build, so the meta lines ran together and the figcaptions had no gap. ============================================================ */ .record { border-top: 1px solid var(--nae-hairline-2); } .record__item { padding-block: clamp(2rem, 5vh, 3.25rem); border-bottom: 1px solid var(--nae-hairline); } .record__meta { display: flex; flex-wrap: wrap; gap: .35rem .55rem; align-items: baseline; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nae-muted); margin-bottom: 1rem; } .record__meta span:not(:last-child)::after { content: "·"; margin-left: .55rem; opacity: .7; } .record__item h3 { font-size: clamp(1.35rem, 3vw, 2.15rem); letter-spacing: -.028em; line-height: 1.08; max-width: 24ch; } .record__item > p { margin-top: 1rem; color: var(--sc-ink-soft); max-width: var(--sc-measure); } .record__grid { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); margin-top: 1.75rem; align-items: start; } @media (min-width: 900px) { .record__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } } .record__item .figures { margin-top: 0; } /* figures and their captions */ .fig { margin: 0; } .fig__frame { overflow: hidden; border-radius: var(--sc-r-sm); background: var(--sc-surface); } .fig img, .fig video { width: 100%; height: auto; display: block; } .fig figcaption, .post-hero figcaption { margin-top: .75rem; padding-top: .55rem; border-top: 1px solid var(--nae-hairline); font-size: .75rem; line-height: 1.5; color: var(--nae-muted); display: flex; gap: .7rem; } .fig figcaption b, .post-hero figcaption b { color: var(--sc-ink); font-weight: 600; flex: none; font-variant-numeric: tabular-nums; } /* a project that is listed but not yet publishable */ .soon { display: inline-flex; align-items: center; gap: .4rem; font-size: .6875rem; letter-spacing: .06em; font-weight: 600; color: var(--nae-muted); border: 1px solid var(--nae-hairline-2); border-radius: var(--sc-r-pill); padding: .18rem .6rem; white-space: nowrap; } .list__row--soon { opacity: .72; } .list__row--soon:hover { opacity: 1; } .record__note { margin-top: .8rem; font-size: .75rem; line-height: 1.55; color: var(--nae-muted); max-width: 60ch; } /* ============================================================ Project detail. The old markup leaned on .spread, which the filmic rewrite removed, so the body and the figures stacked full-width with no gap and the rules collided. ============================================================ */ .proj { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (min-width: 1000px) { .proj { grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); } } .proj__body .lede { font-size: var(--sc-t-lg); line-height: 1.6; color: var(--sc-ink); max-width: var(--sc-measure); } .proj__note { margin-top: 1.25rem; font-size: .8125rem; line-height: 1.6; color: var(--nae-muted); max-width: 58ch; } /* the figures block already draws its own top rule, so it needs air above it rather than another border landing on the paragraph below */ .proj__figures { padding-top: .25rem; } .proj__figures .figures__grid > div { padding-block: 1.1rem 1.25rem; } .proj__next { margin-top: clamp(1.5rem, 4vh, 2.5rem); display: flex; gap: 1.25rem 2.5rem; flex-wrap: wrap; align-items: center; justify-content: space-between; } .proj__next > p:first-child { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.7rem); letter-spacing: -.022em; line-height: 1.15; max-width: 22ch; } /* the caption sits under the plate, not welded to it */ .fig figcaption { margin-top: .9rem; padding-top: .7rem; } /* In the narrower project column, auto-fit lands four figures as 3 + 1 and leaves two orphan cells. A grid with an empty trailing cell was planned wrong, so this one is told to be 2 x 2. */ .proj__figures .figures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 560px) { .proj__figures .figures__grid { grid-template-columns: 1fr; } } /* ============================================================ Accreditation marks ============================================================ */ /* Four across, so seven marks make two rows and each one is large enough to read rather than to recognise. auto-fit put all seven on one line and made each of them a stamp. */ .accred__grid { list-style: none; margin: clamp(1.9rem, 4.5vh, 3rem) 0 0; padding: 0; display: grid; gap: clamp(1.4rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 940px) { .accred__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px) { .accred__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Only at two columns do two of the seven bodies wrap. Holding two lines of space there keeps the credential line on one baseline across the row. At three and four columns nothing wraps, and reserving the line would leave a gap under every name instead. */ .accred__body { min-height: 2.2rem; } } /* No padding. The white margin around each mark is cut into the file itself, where it can be measured per mark, rather than added here where it would be the same for a circle and for a wordmark strip. */ .accred__tile { display: block; background: #FFFFFF; border-radius: var(--sc-r-sm); aspect-ratio: 3 / 2; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / .28), 0 10px 26px -14px rgb(0 0 0 / .5); } .accred__tile img { width: 100%; height: 100%; object-fit: contain; display: block; /* these are third-party marks: never regraded by the daylight */ filter: none; } .accred__body { display: block; margin-top: .95rem; font-size: .8125rem; line-height: 1.35; font-weight: 600; letter-spacing: -.005em; color: var(--sc-ink); } .accred__cred { display: block; margin-top: .18rem; font-size: .75rem; line-height: 1.35; color: var(--nae-muted); } .accred__note { margin-top: clamp(1.6rem, 3.5vh, 2.4rem); font-size: .75rem; line-height: 1.55; color: var(--nae-muted); max-width: 62ch; } /* The band's heading is a plain sentence, so it gets a wider measure than the 22ch the section default sets for a stacked display line. */ .accred .sect__h { max-width: 30ch; text-wrap: balance; } /* the story photograph sits in the text column, so it takes a modest cap */ .stage .fig img { max-height: 22rem; object-fit: cover; } /* ------------------------------------------------------------ The form's error banner. The endpoint answers a rejected submission with a 303 back to contact.html carrying ?error=

; site.js renders the code
   here. Styled off .drop__error so a file error and a submission
   error read as the same voice.
   ------------------------------------------------------------ */
.formnote {
  grid-column: 1 / -1;
  /* The bar is fixed, so scrolling this to the top of the viewport puts it
     UNDERNEATH the bar and the visitor never reads the one sentence telling
     them why their enquiry bounced. Found by screenshotting the real page:
     the assertion said "visible", the picture said otherwise. */
  scroll-margin-top: calc(var(--bar-h) + 1.5rem);
  margin: 0 0 .25rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(255, 201, 189, .4);
  border-left: 3px solid #FFC9BD;
  border-radius: .35rem;
  background: rgba(255, 201, 189, .08);
  color: #FFC9BD;
  font-size: .85rem;
  line-height: 1.5;
}
.formnote a { color: inherit; text-decoration: underline; }
.paper .formnote {
  border-color: rgba(168, 52, 31, .35);
  border-left-color: #A8341F;
  background: rgba(168, 52, 31, .06);
  color: #A8341F;
}
/* The submit button while the POST is in flight. A native form submit gives
   no progress of its own, and an upload of several megabytes over a phone
   connection takes long enough that a visitor will otherwise press it twice. */
button[data-submit][aria-disabled="true"] { opacity: .6; cursor: progress; }

/* Same reason: #quote in the URL, and the smooth scroll on a rejected
   submission, must clear the fixed bar. */
.form { scroll-margin-top: calc(var(--bar-h) + 1.5rem); }