/* ============================================================ Roman Prigodskii Three palettes share one set of slots, so the whole page changes colour with a single attribute on : data-palette. Every text and ground pair is contrast-checked by tools/palettes.py. Type: Archivo variable. The width axis does the work that a second family usually does. ============================================================ */ /* ---------- the typeface: Archivo, latin, self-hosted (assets/fonts/OFL.txt) ---------- */ @font-face { font-family: Archivo; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("../fonts/archivo-latin.woff2") format("woff2"); } /* ---------- palettes (generated by tools/palettes.py --css) ---------- */ :root[data-palette="graphite"] { --p-d950: oklch(0.115 0.004 262); --p-d900: oklch(0.145 0.004 262); --p-d800: oklch(0.175 0.005 262); --p-d700: oklch(0.222 0.005 262); --p-d600: oklch(0.300 0.006 262); --p-d500: oklch(0.400 0.006 262); --p-l050: oklch(0.978 0.003 95); --p-l100: oklch(0.952 0.004 95); --p-l200: oklch(0.908 0.005 95); --p-l300: oklch(0.852 0.006 95); --p-ink: oklch(0.958 0.004 95); --p-ink2: oklch(0.790 0.005 262); --p-ink3: oklch(0.660 0.006 262); --p-lt-ink: oklch(0.180 0.005 262); --p-lt-ink2: oklch(0.400 0.006 262); --p-lt-ink3: oklch(0.500 0.006 262); --p-lt-rule: oklch(0.850 0.005 262); --p-lt-rule-soft: oklch(0.895 0.004 262); --p-acc: oklch(0.880 0.170 96); --p-acc-lo: oklch(0.500 0.105 78); --p-acc-hi: oklch(0.905 0.150 100); --p-sig: oklch(0.880 0.170 96); --p-sig-lo: oklch(0.800 0.160 92); --p-sig-hi: oklch(0.920 0.140 100); --p-sig-ink: oklch(0.150 0.006 262); --p-sig-ink2: oklch(0.300 0.030 85); --p-sig-ink3: oklch(0.360 0.040 85); --p-sig-rule: oklch(0.640 0.120 88); --p-sig-rule-soft: oklch(0.740 0.140 92); --p-c2: oklch(0.740 0.030 250); --p-lt-c2: oklch(0.500 0.060 250); --p-theme: #101113; --p-theme-paper: #f1f0ec; } :root[data-palette="moss"], :root { --p-d950: oklch(0.135 0.022 132); --p-d900: oklch(0.165 0.026 132); --p-d800: oklch(0.198 0.030 132); --p-d700: oklch(0.242 0.032 132); --p-d600: oklch(0.312 0.034 132); --p-d500: oklch(0.402 0.036 132); --p-l050: oklch(0.972 0.012 88); --p-l100: oklch(0.946 0.020 86); --p-l200: oklch(0.902 0.026 84); --p-l300: oklch(0.842 0.030 82); --p-ink: oklch(0.948 0.020 95); --p-ink2: oklch(0.800 0.030 118); --p-ink3: oklch(0.660 0.032 124); --p-lt-ink: oklch(0.215 0.030 132); --p-lt-ink2: oklch(0.410 0.030 128); --p-lt-ink3: oklch(0.482 0.028 126); --p-lt-rule: oklch(0.840 0.026 90); --p-lt-rule-soft: oklch(0.888 0.022 88); --p-acc: oklch(0.860 0.190 142); --p-acc-lo: oklch(0.470 0.130 145); --p-acc-hi: oklch(0.900 0.170 140); --p-sig: oklch(0.840 0.190 142); --p-sig-lo: oklch(0.760 0.180 143); --p-sig-hi: oklch(0.890 0.170 140); --p-sig-ink: oklch(0.160 0.040 140); --p-sig-ink2: oklch(0.280 0.060 140); --p-sig-ink3: oklch(0.340 0.070 140); --p-sig-rule: oklch(0.600 0.150 143); --p-sig-rule-soft: oklch(0.700 0.170 143); --p-c2: oklch(0.690 0.070 62); --p-lt-c2: oklch(0.470 0.070 58); --p-theme: #161e14; --p-theme-paper: #f2eee2; } :root[data-palette="cobalt"] { --p-d950: oklch(0.135 0.040 262); --p-d900: oklch(0.165 0.050 262); --p-d800: oklch(0.200 0.058 262); --p-d700: oklch(0.248 0.064 262); --p-d600: oklch(0.320 0.068 262); --p-d500: oklch(0.420 0.070 262); --p-l050: oklch(0.978 0.005 250); --p-l100: oklch(0.952 0.010 250); --p-l200: oklch(0.908 0.014 250); --p-l300: oklch(0.852 0.018 250); --p-ink: oklch(0.958 0.008 250); --p-ink2: oklch(0.810 0.030 255); --p-ink3: oklch(0.680 0.040 258); --p-lt-ink: oklch(0.215 0.058 262); --p-lt-ink2: oklch(0.410 0.050 262); --p-lt-ink3: oklch(0.500 0.045 262); --p-lt-rule: oklch(0.850 0.016 250); --p-lt-rule-soft: oklch(0.895 0.012 250); --p-acc: oklch(0.700 0.190 28); --p-acc-lo: oklch(0.512 0.200 27); --p-acc-hi: oklch(0.860 0.150 88); --p-sig: oklch(0.680 0.200 29); --p-sig-lo: oklch(0.620 0.205 28); --p-sig-hi: oklch(0.740 0.170 32); --p-sig-ink: oklch(0.110 0.040 262); --p-sig-ink2: oklch(0.165 0.050 262); --p-sig-ink3: oklch(0.205 0.060 262); --p-sig-rule: oklch(0.470 0.150 28); --p-sig-rule-soft: oklch(0.560 0.180 28); --p-c2: oklch(0.860 0.150 88); --p-lt-c2: oklch(0.560 0.120 80); --p-theme: #0f1628; --p-theme-paper: #eff1f5; } /* ---------- scale, motion, rhythm ---------- */ :root { --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-soft: cubic-bezier(0.32, 0.72, 0, 1); --shell: min(1280px, 100%); --gut: clamp(1.25rem, 5vw, 5rem); --gut-safe: max(var(--gut), env(safe-area-inset-left), env(safe-area-inset-right)); --sp-sec: clamp(5.5rem, 12vw, 11rem); --t-display: clamp(2.8rem, 10.4vw, 8.4rem); --t-h2: clamp(2.1rem, 5.6vw, 4.4rem); --t-h3: clamp(1.4rem, 2.7vw, 2.15rem); --t-h4: clamp(1.02rem, 1.5vw, 1.2rem); --t-big: clamp(1.5rem, 3.4vw, 2.8rem); --t-lede: clamp(1.12rem, 1.9vw, 1.6rem); --t-body: clamp(1rem, 0.96rem + 0.22vw, 1.135rem); --t-sm: clamp(0.86rem, 0.84rem + 0.1vw, 0.93rem); --t-xs: 0.78rem; } /* ---------- surfaces ---------- */ /* the dark ground */ :root, [data-surface="slate"] { --bg: var(--p-d800); --bg-sunk: var(--p-d900); --bg-lift: var(--p-d700); --ink: var(--p-ink); --ink-2: var(--p-ink2); --ink-3: var(--p-ink3); --rule: var(--p-d600); --rule-soft: var(--p-d700); --accent: var(--p-acc); --accent-ink: var(--p-d950); --lh-bump: 0.06; --chart-a: var(--p-l200); --chart-b: var(--p-c2); } /* the light ground: the research section, and the whole page in the light theme */ [data-theme="paper"], [data-surface="paper"] { --bg: var(--p-l100); --bg-sunk: var(--p-l200); --bg-lift: var(--p-l050); --ink: var(--p-lt-ink); --ink-2: var(--p-lt-ink2); --ink-3: var(--p-lt-ink3); --rule: var(--p-lt-rule); --rule-soft: var(--p-lt-rule-soft); --accent: var(--p-acc-lo); --accent-ink: var(--p-l050); --lh-bump: 0; --chart-a: var(--p-lt-ink2); --chart-b: var(--p-lt-c2); } /* in the light theme the research section flips dark, so the inversion still means something */ [data-theme="paper"] [data-surface="paper"] { --bg: var(--p-d800); --bg-sunk: var(--p-d900); --bg-lift: var(--p-d700); --ink: var(--p-ink); --ink-2: var(--p-ink2); --ink-3: var(--p-ink3); --rule: var(--p-d600); --rule-soft: var(--p-d700); --accent: var(--p-acc); --accent-ink: var(--p-d950); --lh-bump: 0.06; --chart-a: var(--p-l200); --chart-b: var(--p-c2); } /* the drench: contact, and the page wipe */ [data-surface="signal"] { --bg: var(--p-sig); --bg-sunk: var(--p-sig-lo); --bg-lift: var(--p-sig-hi); --ink: var(--p-sig-ink); --ink-2: var(--p-sig-ink2); --ink-3: var(--p-sig-ink3); --rule: var(--p-sig-rule); --rule-soft: var(--p-sig-rule-soft); --accent: var(--p-sig-ink); --accent-ink: var(--p-sig); --lh-bump: 0; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: Archivo, ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif; font-size: var(--t-body); font-weight: 400; font-stretch: 100%; line-height: calc(1.6 + var(--lh-bump)); font-variant-numeric: tabular-nums lining-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } section[data-surface] { line-height: calc(1.6 + var(--lh-bump)); } /* a change of surface arrives as a sheet, not a cut: the section comes up inset with rounded corners and is full width by the time its edge reaches the middle of the screen, which is where the section indicator changes colour with it. It closes the same way on the way out. Without scroll timelines, or with reduced motion, the edges stay straight */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .sec[data-surface] { animation: sheet linear both; animation-timeline: view(); } } } @keyframes sheet { entry 0% { clip-path: inset(0 clamp(12px, 4vw, 64px) round clamp(20px, 3vw, 44px)); } entry 50%, exit 50% { clip-path: inset(0 0 round 0); } exit 100% { clip-path: inset(0 clamp(12px, 4vw, 64px) round clamp(20px, 3vw, 44px)); } } h1, h2, h3, h4 { margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; } code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; background: color-mix(in oklab, var(--ink) 9%, transparent); padding: 0.12em 0.4em; border-radius: 3px; overflow-wrap: anywhere; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .u-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip { position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%); z-index: 200; background: var(--accent); color: var(--accent-ink); padding: 0.7rem 1.2rem; font-weight: 650; text-decoration: none; transition: transform 200ms var(--ease-quart); } .skip:focus { transform: translate(-50%, 0); } /* ---------- prose link ---------- */ .work__prose a, .paper__abs a, .also__d a, .facts a, .foot a, .findings a { text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 1px; background-position: 0 92%; background-repeat: no-repeat; padding-bottom: 0.08em; transition: background-size 280ms var(--ease-quart), color 200ms; } .work__prose a:hover, .paper__abs a:hover, .also__d a:hover, .facts a:hover, .foot a:hover, .findings a:hover { background-size: 100% 1.15em; background-position: 0 100%; color: var(--accent-ink); } /* ============================================================ TOP BAR ============================================================ */ .bar { position: fixed; inset: 0 0 auto 0; z-index: 80; display: flex; align-items: center; gap: 1.5rem; padding: 0.85rem var(--gut-safe); background: transparent; border-bottom: 1px solid transparent; transition: border-color 400ms var(--ease-soft), background-color 400ms var(--ease-soft), backdrop-filter 400ms; } .bar.is-shown { background: color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: var(--rule); } .bar[data-surface] { color: var(--ink); } .bar__mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-stretch: 74%; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; margin-right: auto; } .bar__mark svg { width: 24px; height: 24px; overflow: visible; } .bar__mark .mk-bars rect { fill: var(--ink); } .bar__mark .mk-line { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 5; } .bar__mark:hover .mk-bars rect { fill: var(--accent); } .bar__nav { display: flex; gap: 0.35rem; } .bar__nav a { text-decoration: none; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); padding: 0.35rem 0.7rem; border-radius: 999px; transition: color 200ms, background-color 200ms; } .bar__nav a:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 8%, transparent); } .bar__nav a.is-here { color: var(--ink); background: color-mix(in oklab, var(--ink) 11%, transparent); } .bar__end { display: flex; align-items: center; gap: 0.75rem; } .bar__cta { text-decoration: none; font-size: var(--t-sm); font-weight: 650; padding: 0.42rem 0.95rem; border: 1px solid var(--rule); border-radius: 999px; transition: background-color 220ms var(--ease-quart), color 220ms, border-color 220ms; } .bar__cta:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .themeswap { appearance: none; border: 0; background: none; padding: 0.3rem; cursor: pointer; display: grid; place-items: center; } .themeswap__track { width: 38px; height: 21px; border-radius: 999px; border: 1px solid var(--rule); background: color-mix(in oklab, var(--ink) 7%, transparent); display: block; position: relative; transition: background-color 260ms, border-color 260ms; } .themeswap__dot { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); transition: transform 420ms var(--ease-expo), background-color 260ms; } .themeswap[aria-pressed="true"] .themeswap__dot { transform: translateX(17px); background: var(--accent); } .themeswap:hover .themeswap__track { border-color: var(--accent); } @media (max-width: 860px) { .bar__cta { display: none; } .bar__nav a { padding: 0.3rem 0.5rem; font-size: 0.8rem; } } @media (max-width: 560px) { .bar { gap: 0.5rem; padding-inline: max(0.9rem, calc(var(--gut) - 0.5rem)); } .bar__mark span { display: none; } .bar__nav a { padding: 0.3rem 0.38rem; font-size: 0.78rem; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; } .hero__pin { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: clamp(5.5rem, 12vh, 8rem) var(--gut-safe) clamp(1.4rem, 3.5vh, 2.4rem); overflow: hidden; isolation: isolate; } .hero.is-pinned { height: 250svh; } .hero.is-pinned .hero__pin { position: sticky; top: 0; height: 100svh; min-height: 0; } .hero__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1400ms var(--ease-soft); } .hero__field.is-in { opacity: 1; } @media (max-width: 899px), (orientation: portrait) { .hero__field { top: auto; bottom: 0; height: 34svh; } .hero__pin { padding-bottom: calc(34svh + 1.25rem); } } .hero__inner { width: var(--shell); margin-inline: auto; max-width: 100%; align-self: center; padding-block: clamp(1rem, 4vh, 3rem); } .hero__place { font-stretch: 70%; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; font-size: var(--t-xs); color: var(--ink-2); margin-bottom: clamp(1.2rem, 3vw, 2.4rem); } .hero__place .sep { color: var(--accent); padding-inline: 0.35em; } .hero__name { font-size: var(--t-display); font-stretch: 116%; font-weight: 780; line-height: 0.85; letter-spacing: -0.035em; margin-bottom: clamp(1.5rem, 3.5vw, 2.6rem); } .hero__name > span { display: block; } .hero__name > span:last-child { padding-left: clamp(0rem, 4.5vw, 5rem); } .hero__lede { font-size: var(--t-lede); line-height: 1.4; max-width: 40ch; font-weight: 420; color: var(--ink); text-wrap: pretty; } .hero__acts { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: clamp(1.8rem, 4vw, 2.8rem); } .btn { --_bg: transparent; display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; font-size: var(--t-sm); letter-spacing: 0.005em; padding: 0.72rem 1.35rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--_bg); transition: background-color 260ms var(--ease-quart), color 260ms, border-color 260ms, transform 260ms var(--ease-expo); } .btn:hover { transform: translateY(-2px); border-color: var(--accent); } .btn--solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 680; } .btn--solid:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn:not(.btn--solid):hover { background: color-mix(in oklab, var(--ink) 9%, transparent); } .hero__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: clamp(1.6rem, 3.5vw, 2.4rem); font-size: var(--t-sm); color: var(--ink-2); } .hero__links a { text-decoration: none; position: relative; transition: color 200ms; } .hero__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px; background: var(--accent); transition: right 320ms var(--ease-expo); } .hero__links a:hover { color: var(--ink); } .hero__links a:hover::after { right: 0; } /* ============================================================ GENERIC SECTION ============================================================ */ .sec { padding: var(--sp-sec) var(--gut-safe); background: var(--bg); color: var(--ink); } .sec__head { width: var(--shell); margin-inline: auto; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); } .sec__title { font-size: var(--t-h2); font-stretch: 110%; font-weight: 740; line-height: 0.95; letter-spacing: -0.03em; } .sec__sub { margin-top: 1.1rem; max-width: 56ch; color: var(--ink-2); font-size: var(--t-body); } /* ============================================================ RESEARCH (paper surface) ============================================================ */ .sec--paper { border-block: 1px solid var(--rule); } .paper { width: var(--shell); margin-inline: auto; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); } .paper:first-of-type { border-top-width: 2px; } .paper__meta { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.4rem; } .paper__tag { font-stretch: 68%; text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--t-xs); font-weight: 700; } .paper__status { font-size: var(--t-xs); font-weight: 600; padding: 0.24rem 0.65rem; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; display: inline-flex; align-items: center; gap: 0.45rem; } .paper__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2.6s var(--ease-soft) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .paper__title { font-size: var(--t-h3); font-stretch: 110%; font-weight: 740; line-height: 1.04; letter-spacing: -0.025em; max-width: 24ch; } .paper__sub { margin-top: 0.5rem; font-size: var(--t-lede); font-weight: 400; color: var(--ink-2); max-width: 44ch; line-height: 1.3; } .paper__abs { margin-top: 1.6rem; max-width: 56ch; color: var(--ink-2); } .paper__abs em { font-style: italic; color: var(--ink); } .paper__abs sup { font-size: 0.7em; } .findings { counter-reset: f; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: clamp(2rem, 4vw, 3rem); } .findings li { counter-increment: f; } .findings li::before { content: "(" counter(f, lower-roman) ")"; display: block; font-stretch: 68%; font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.6rem; } .findings h4 { font-size: var(--t-h4); font-weight: 680; line-height: 1.25; letter-spacing: -0.012em; margin-bottom: 0.5rem; max-width: 26ch; } .findings p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.58; max-width: 46ch; } .paper__files { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: clamp(2rem, 4vw, 2.8rem); } .file { display: grid; gap: 0.22rem; text-decoration: none; padding: 0.9rem 1.2rem; border: 1px solid var(--rule); min-width: min(100%, 17rem); position: relative; transition: border-color 260ms, background-color 260ms, transform 320ms var(--ease-expo); } .file::after { content: "↓"; position: absolute; right: 1.1rem; top: 0.9rem; color: var(--ink-3); transition: transform 340ms var(--ease-expo), color 260ms; } .file:hover { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); transform: translateY(-2px); } .file:hover::after { transform: translateY(3px); color: var(--accent); } .file__v { font-weight: 640; font-size: var(--t-sm); padding-right: 1.6rem; } .file__k { font-size: var(--t-xs); color: var(--ink-3); } .file__k span { padding-inline: 0.25em; } .paper__note { margin-top: 1.1rem; font-size: var(--t-xs); color: var(--ink-3); max-width: 60ch; } /* ============================================================ CHARTS ============================================================ */ .chart { margin: clamp(2rem, 4vw, 3rem) 0 0; } .chart figcaption { font-stretch: 68%; text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--t-xs); font-weight: 650; color: var(--ink-3); padding-bottom: 0.85rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--rule); } .chart__note { margin-top: 1rem; font-size: var(--t-xs); line-height: 1.55; color: var(--ink-3); max-width: 68ch; } .chart svg { width: 100%; max-width: 58rem; height: auto; overflow: visible; } .chart svg text { font-family: inherit; fill: var(--ink-3); font-size: 11px; font-stretch: 78%; font-weight: 550; } .chart svg .ax { stroke: var(--rule); stroke-width: 1; } .chart svg .gridline { stroke: var(--rule-soft); stroke-width: 1; } .chart svg .thr { stroke: var(--accent); stroke-width: 1.25; stroke-dasharray: 4 4; } .chart svg .lbl-hi { fill: var(--ink-2); font-weight: 650; } .chart--scatter { width: var(--shell); margin-inline: auto; padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); } /* bar comparison */ .bars { display: grid; gap: 1.25rem; max-width: 46rem; } .barrow { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.35rem 1rem; align-items: center; } .barrow__m { font-size: var(--t-sm); font-weight: 600; } .barrow__t { display: grid; gap: 0.3rem; } .barline { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; align-items: center; gap: 0.6rem; } .barline__track { height: 9px; background: color-mix(in oklab, var(--ink) 10%, transparent); position: relative; overflow: hidden; } .barline__fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width 900ms var(--ease-expo); } .barline--a .barline__fill { background: var(--chart-a); } .barline--b .barline__fill { background: var(--accent); } .barline__v { font-size: var(--t-xs); font-weight: 650; min-width: 0; } .barline--a .barline__v::before, .barline--b .barline__v::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 0.45em; vertical-align: 0.06em; } .barline--a .barline__v::before { background: var(--chart-a); } .barline--b .barline__v::before { background: var(--accent); } @media (max-width: 560px) { .barrow { grid-template-columns: 1fr; } } /* ============================================================ RECORD ============================================================ */ .ledger { width: var(--shell); margin-inline: auto; } .ledger__h { font-stretch: 70%; text-transform: uppercase; letter-spacing: 0.13em; font-size: var(--t-xs); font-weight: 700; color: var(--accent); padding-bottom: 0.8rem; border-bottom: 2px solid var(--ink); margin-top: clamp(2.2rem, 5vw, 3.5rem); } .ledger__h:first-child { margin-top: 0; } .ledger__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 6rem; gap: 0.4rem clamp(1rem, 3vw, 2.5rem); align-items: baseline; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); } .ledger__rank { font-size: clamp(1.4rem, 2.6vw, 2rem); font-stretch: 96%; font-weight: 760; line-height: 0.9; letter-spacing: -0.03em; color: var(--ink-3); } .is-top .ledger__rank { color: var(--accent); } .ledger__what { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; max-width: 56ch; } .ledger__what b { color: var(--ink); font-weight: 650; } .ledger__ev { text-align: right; font-stretch: 68%; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--t-xs); font-weight: 620; color: var(--ink-3); } @media (max-width: 700px) { .ledger__row { grid-template-columns: 1fr auto; } .ledger__what { grid-column: 1 / -1; } .ledger__ev { text-align: right; } } /* ============================================================ METHOD ============================================================ */ .sec--method { background: var(--bg-sunk); border-block: 1px solid var(--rule); } .rules { width: var(--shell); margin-inline: auto; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .rule { background: var(--bg-sunk); display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.5rem clamp(1rem, 3vw, 2.5rem); padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2.2rem); transition: background-color 320ms var(--ease-quart); } .rule:hover { background: var(--bg-lift); } .rule__n { font-stretch: 66%; font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--accent); padding-top: 0.45em; } .rule h3 { font-size: clamp(1.15rem, 2.2vw, 1.7rem); font-stretch: 104%; font-weight: 660; line-height: 1.15; letter-spacing: -0.022em; max-width: 34ch; } .rule p { grid-column: 2; margin-top: 0.6rem; color: var(--ink-2); font-size: var(--t-sm); max-width: 56ch; } @media (max-width: 620px) { .rule { grid-template-columns: 1fr; } .rule p { grid-column: 1; } } /* ============================================================ TOOLKIT ============================================================ */ .kit { width: var(--shell); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); } .kit__g { border-top: 2px solid var(--ink); padding-top: 0.9rem; } .kit__g h3 { font-stretch: 70%; text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--t-xs); font-weight: 700; margin-bottom: 0.55rem; } .kit__g p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; } /* ============================================================ CONTACT ============================================================ */ .sec--contact { padding-block: clamp(6rem, 14vw, 12rem); } .contact { width: var(--shell); margin-inline: auto; } .contact__kick { font-size: var(--t-lede); font-weight: 500; max-width: 24ch; line-height: 1.28; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .contact__mail { display: block; font-size: clamp(2.1rem, 11vw, 8.2rem); font-stretch: 110%; font-weight: 760; line-height: 0.88; letter-spacing: -0.04em; text-decoration: none; transition: opacity 260ms; } .contact__mail b { display: block; font-weight: inherit; white-space: nowrap; } .contact__mail b + b { color: color-mix(in oklab, var(--ink) 64%, transparent); } .contact__mail:hover { opacity: 0.66; } .contact__links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: clamp(2.2rem, 5vw, 3.5rem); font-size: var(--t-sm); font-weight: 550; border-top: 1px solid var(--rule); padding-top: 1.4rem; } .contact__links a { text-decoration: none; border-bottom: 1px solid var(--rule-soft); padding-bottom: 2px; transition: border-color 220ms; } .contact__links a:hover { border-color: var(--ink); } /* ============================================================ FOOT ============================================================ */ .foot { background: var(--bg-sunk); color: var(--ink-3); padding: 2.2rem var(--gut-safe); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; font-size: var(--t-xs); border-top: 1px solid var(--rule); } /* ============================================================ MOTION ============================================================ */ .stagger { opacity: 0; transform: translateY(18px); } .js .stagger { animation: rise 900ms var(--ease-expo) forwards; animation-delay: calc(var(--d, 0) * 1ms); } @keyframes rise { to { opacity: 1; transform: none; } } .reveal { opacity: 0; transform: translateY(26px); } .js .reveal { transition: opacity 760ms var(--ease-expo), transform 760ms var(--ease-expo); } .js .reveal.is-in { opacity: 1; transform: none; } html:not(.js) .stagger, html:not(.js) .reveal { opacity: 1; transform: none; } html:not(.js) .work__body { grid-template-rows: 1fr; opacity: 1; } html:not(.js) .work__inner { visibility: visible; } html:not(.js) .work__chev { display: none; } html:not(.js) .hero__field { display: none; } html:not(.js) .chart { display: none; } html:not(.js) .bar { background: var(--bg); border-bottom-color: var(--rule); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .stagger, .reveal { opacity: 1 !important; transform: none !important; } .hero__field { opacity: 1; } } @media print { :root, [data-surface], [data-theme="paper"], [data-theme="paper"] [data-surface="paper"] { --bg: #fff; --bg-sunk: #fff; --bg-lift: #fff; --ink: #000; --ink-2: #333; --ink-3: #555; --rule: #bbb; --rule-soft: #ddd; --accent: #000; --accent-ink: #fff; --chart-a: #444; --chart-b: #777; --lh-bump: 0; } header.bar, .hero__field, .work__chev, body::after { display: none !important; } body { background: #fff; color: #000; font-size: 10.5pt; } .hero { min-height: 0; padding: 0 0 1.5rem; } .sec, .position { padding-block: 1.2rem; } .work__body { grid-template-rows: 1fr !important; opacity: 1 !important; } .work__inner { visibility: visible !important; } .reveal, .stagger { opacity: 1 !important; transform: none !important; } .sec__title, .paper__title, .work__name, .ledger__h, .kit__g h3 { break-after: avoid; } @page { margin: 16mm; } } /* ============================================================ CHART INTERNALS ============================================================ */ .chart svg .bar--fair { fill: var(--chart-a); } .chart svg .bar--real { fill: var(--accent); } .chart svg .bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); } .chart.is-drawn svg .bar { animation: grow 820ms var(--ease-expo) forwards; } .chart.is-drawn svg .bar--real { animation-delay: 120ms; } @keyframes grow { to { transform: scaleY(1); } } .chart svg .dot { fill: none; stroke: var(--chart-a); stroke-width: 1.1; opacity: 0; } .chart svg .dot--near { stroke: var(--accent); stroke-width: 1.7; } .chart svg .dot--won { fill: var(--accent); stroke: var(--accent); } .chart.is-drawn svg .dot { animation: pop 520ms var(--ease-expo) forwards; animation-delay: calc(var(--i, 0) * 9ms + 120ms); } @keyframes pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 0.55; transform: none; } } .chart.is-drawn svg .dot--near { animation-name: pop-hi; } .chart.is-drawn svg .dot--won { animation-name: pop-hi; } @keyframes pop-hi { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } } .chart svg circle { transform-box: fill-box; transform-origin: center; } .chart svg .dot:hover { opacity: 1; stroke-width: 2.2; } /* the floor chart is HTML so the labels stay readable on a phone */ .floor { position: relative; max-width: 54rem; } .floor__band { position: absolute; top: 0; height: var(--band-h, 100%); left: 0; width: 0; background: color-mix(in oklab, var(--accent) 12%, transparent); border-right: 1.5px dashed var(--accent); pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease-soft) 300ms; } .chart.is-drawn .floor__band, html:not(.js) .floor__band { opacity: 1; } .floor__bandlbl { position: absolute; right: 0.4rem; top: -1.5rem; transform: none; text-align: right; font-size: var(--t-xs); font-weight: 650; color: var(--accent); white-space: nowrap; } .floor__rows { display: grid; gap: 0.5rem; position: relative; } .floor__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.22rem; } .floor__name { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.3; } .is-shipped .floor__name { color: var(--ink); font-weight: 620; } .floor__pin { font-stretch: 68%; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.62rem; font-weight: 700; color: var(--accent-ink); background: var(--accent); padding: 0.1em 0.45em; margin-left: 0.4em; vertical-align: 0.1em; } .floor__track { display: block; height: 7px; position: relative; background: color-mix(in oklab, var(--ink) 9%, transparent); } .floor__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--chart-a); transition: width 760ms var(--ease-expo); } .is-shipped .floor__fill { background: var(--accent); } .floor__v { font-size: 0.7rem; color: var(--ink-3); } .floor__scale { display: flex; justify-content: space-between; margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); font-size: 0.7rem; color: var(--ink-3); } @media (max-width: 719px) { .floor__bandlbl { display: none; } } @media (min-width: 720px) { .floor__row { grid-template-columns: 14.5rem minmax(0, 1fr) 4.2rem; align-items: center; gap: 0.9rem; } .floor__name { text-align: right; } .floor__v { text-align: right; } } /* the comparison bars sit on a truncated, per-metric axis; say so on the row */ .barline--scale { margin-top: 0.15rem; } .barscale { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.66rem; color: var(--ink-3); border-top: 1px solid var(--rule-soft); padding-top: 0.22rem; } .barscale span:nth-child(2) { font-stretch: 68%; text-transform: uppercase; letter-spacing: 0.1em; } /* ============================================================ WORD REVEAL Text nodes are split into words and masked. With JavaScript off nothing is wrapped and nothing is hidden. ============================================================ */ .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.16em; margin-bottom: -0.16em; } .wi { display: inline-block; } .js [data-split] .wi { transform: translateY(115%); } .js [data-split].is-in .wi { transform: none; transition: transform 980ms var(--ease-expo); transition-delay: calc(var(--wi, 0) * 34ms + var(--d, 0) * 1ms); } .rise { opacity: 0; transform: translateY(20px); } .js .rise { transition: opacity 820ms var(--ease-expo), transform 820ms var(--ease-expo); transition-delay: calc(var(--d, 0) * 1ms); } .js .rise.is-in { opacity: 1; transform: none; } html:not(.js) .rise { opacity: 1; transform: none; } /* ============================================================ RETICLE A measuring cursor. Over the hero field it reads out the two e-values under the crosshair. ============================================================ */ .reticle { position: fixed; top: 0; left: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 250; pointer-events: none; opacity: 0; transition: opacity 260ms var(--ease-quart); } .reticle.is-on { opacity: 1; } .reticle::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--accent); border-radius: 50%; transition: transform 380ms var(--ease-expo), opacity 260ms; } .reticle.is-lg::before { transform: scale(2.3); opacity: 0.45; } .reticle.is-down::before { transform: scale(0.65); } .reticle i { position: absolute; background: var(--accent); } .reticle i:nth-of-type(1) { left: 50%; top: -6px; width: 1px; height: calc(100% + 12px); transform: translateX(-0.5px); } .reticle i:nth-of-type(2) { top: 50%; left: -6px; height: 1px; width: calc(100% + 12px); transform: translateY(-0.5px); } .reticle b { position: absolute; left: 24px; top: 12px; white-space: nowrap; font-size: 0.66rem; font-weight: 650; font-stretch: 78%; letter-spacing: 0.06em; color: var(--accent-ink); background: var(--accent); padding: 0.18em 0.5em; opacity: 0; transition: opacity 200ms; } .reticle.is-read b { opacity: 1; } html.has-reticle, html.has-reticle * { cursor: none !important; } /* ============================================================ PAGE WIPE The animation is `both`, so it completes to open even if no script ever runs again. ============================================================ */ .wipe { position: fixed; inset: 0; z-index: 400; background: var(--p-sig); pointer-events: none; transform: scaleY(0); transform-origin: top; } html.wipe-in .wipe { animation: wipeOpen 760ms var(--ease-expo) both; } @keyframes wipeOpen { from { transform: scaleY(1); } to { transform: scaleY(0); } } html.wipe-out .wipe { animation: none; transform: scaleY(1); transform-origin: bottom; transition: transform 400ms var(--ease-quart); } /* ============================================================ BAR PROGRESS ============================================================ */ .bar__prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; opacity: 0; transition: opacity 300ms; } .bar.is-shown .bar__prog { opacity: 1; } /* ============================================================ HERO BASE ROW ============================================================ */ .hero__base { width: var(--shell); margin-inline: auto; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0.8rem clamp(1.5rem, 4vw, 3.5rem); padding-top: clamp(1.5rem, 4vh, 2.6rem); border-top: 1px solid var(--rule); } .hero__cue { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-stretch: 68%; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--t-xs); font-weight: 650; color: var(--ink-2); transition: color 220ms; } .hero__cue:hover { color: var(--accent); } .hero__cue i { width: 1px; height: 22px; background: currentColor; position: relative; overflow: hidden; } .hero__cue i::after { content: ""; position: absolute; inset: 0; background: var(--accent); animation: cue 1.9s var(--ease-soft) infinite; } @keyframes cue { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } } .hero__caption { grid-column: 2; justify-self: end; text-align: right; max-width: 40ch; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); } .hero__caption a { color: var(--ink-2); } @media (max-width: 899px), (orientation: portrait) { .hero__caption { grid-column: 1 / -1; justify-self: start; text-align: left; max-width: 52ch; } } /* ============================================================ STATEMENT ============================================================ */ .stmt { padding: var(--sp-sec) var(--gut-safe); background: var(--bg); } .stmt__lead { width: var(--shell); margin-inline: auto; max-width: 24ch; font-size: clamp(1.55rem, 4.2vw, 3.3rem); font-stretch: 104%; font-weight: 520; line-height: 1.16; letter-spacing: -0.028em; } [data-lit] .w { color: var(--ink-3); transition: color 520ms var(--ease-quart); } [data-lit] .w.is-lit { color: var(--ink); } html:not(.js) [data-lit] { color: var(--ink); } .stmt__foot { width: var(--shell); margin-inline: auto; margin-top: clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); gap: clamp(1.4rem, 3vw, 3rem); color: var(--ink-2); font-size: var(--t-sm); } .stmt__foot p { max-width: 48ch; } /* ============================================================ FILMSTRIP ============================================================ */ .film { position: relative; background: var(--bg-sunk); border-block: 1px solid var(--rule); } .film__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; overflow: clip; display: flex; flex-direction: column; } .film__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: clamp(4.5rem, 10vh, 6.5rem) var(--gut-safe) 0; flex: none; } .film__title { font-size: clamp(1.6rem, 3.6vw, 2.9rem); font-stretch: 110%; font-weight: 740; letter-spacing: -0.03em; line-height: 1; } .film__meta { font-stretch: 68%; letter-spacing: 0.1em; font-size: var(--t-xs); font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; } .film__meta span { color: var(--accent); } .film__track { display: flex; align-items: stretch; flex: 1; min-height: 0; gap: clamp(1.5rem, 3.5vw, 4rem); padding: clamp(1.4rem, 3vh, 2.4rem) var(--gut-safe); will-change: transform; } .panel { flex: 0 0 auto; width: min(72vw, 940px); display: grid; grid-template-columns: minmax(13rem, 0.85fr) minmax(0, 1.15fr); grid-template-rows: auto auto auto auto; column-gap: clamp(1.4rem, 3vw, 2.8rem); align-content: center; border-top: 1px solid var(--rule); padding-top: 1.1rem; min-height: 0; } .panel:first-child { width: min(84vw, 1180px); } .panel__idx { grid-column: 1; grid-row: 1; font-stretch: 66%; font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.12em; color: var(--accent); } .panel__name { grid-column: 1; grid-row: 2; text-wrap: balance; font-size: clamp(1.9rem, 3.6vw, 3.4rem); font-stretch: 112%; font-weight: 760; line-height: 0.88; letter-spacing: -0.038em; margin-top: 0.7rem; } .panel__line { grid-column: 1; grid-row: 3; align-self: start; margin-top: 1.1rem; font-size: var(--t-sm); color: var(--ink-2); max-width: 26ch; } .panel__body { grid-column: 2; display: grid; align-content: center; gap: 0.95rem; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; min-height: 0; } .panel__body p { max-width: 52ch; } .panel__body b { color: var(--ink); font-weight: 650; } .panel__facts { display: grid; gap: 0.45rem; margin-top: 0.3rem; } .panel__facts li { position: relative; padding-left: 1.35rem; font-size: var(--t-xs); line-height: 1.5; } .panel__facts li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 7px; height: 7px; background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); } .panel__body { grid-row: 1 / -1; } .panel__chart { grid-column: 1; grid-row: 4; align-self: end; margin: 1.4rem 0 0; max-width: 34rem; } .panel__chart figcaption { margin-bottom: 0.9rem; padding-bottom: 0.6rem; } .panel__chart .bars { gap: 0.8rem; } @media (max-width: 899px), (orientation: portrait) { .film { height: auto !important; } .film__pin { position: static; height: auto; overflow: visible; } .film__head { padding-top: var(--sp-sec); } .film__meta { display: none; } .film__track { transform: none !important; display: grid; gap: 0; padding-block: 1.5rem 0; } .panel, .panel:first-child { width: auto; grid-template-columns: 1fr; grid-template-rows: auto; padding-bottom: clamp(2.5rem, 7vw, 4rem); } .panel__idx, .panel__name, .panel__line, .panel__body, .panel__chart { grid-column: 1; grid-row: auto; } .panel__name { margin-top: 0.5rem; } .panel__body { margin-top: 1.4rem; } } @media (prefers-reduced-motion: reduce) { .film { height: auto !important; } .film__pin { position: static; height: auto; overflow: visible; } .film__track { transform: none !important; overflow-x: auto; } } /* ============================================================ RESEARCH TEASER ============================================================ */ .sec--tease { border-block: 1px solid var(--rule); } .tease { width: var(--shell); margin-inline: auto; } .tease__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(1.4rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 6vw, 4rem); } .tease__lead { color: var(--ink-2); max-width: 46ch; } .tease__list { display: grid; } .tease__list li { display: grid; grid-template-columns: 3.2rem minmax(0, 1.05fr) minmax(0, 1fr); gap: 0.4rem clamp(1rem, 3vw, 3rem); padding: clamp(1.4rem, 3vw, 2.2rem) 0; border-top: 1px solid var(--rule); align-items: start; } .tease__list li:last-child { border-bottom: 1px solid var(--rule); } .tease__n { grid-column: 1; grid-row: 1 / span 3; font-stretch: 66%; font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.12em; color: var(--accent); padding-top: 0.5em; } .tease__list h3 { grid-column: 2; grid-row: 1 / span 2; } .tease__list p { grid-column: 3; } @media (max-width: 860px) { .tease__list li { grid-template-columns: 3.2rem minmax(0, 1fr); } .tease__list h3 { grid-row: 1; } .tease__list p { grid-column: 2; } } .tease__list h3 { font-size: clamp(1.3rem, 2.8vw, 2.1rem); font-stretch: 108%; font-weight: 700; line-height: 1.08; letter-spacing: -0.028em; max-width: 24ch; } .tease__list p { color: var(--ink-2); font-size: var(--t-sm); max-width: 52ch; } .tease__list p em { font-style: italic; color: var(--ink); } .tease__venue { font-stretch: 68%; text-transform: uppercase; letter-spacing: 0.11em; font-size: var(--t-xs); font-weight: 650; color: var(--ink-3) !important; margin-top: 1rem !important; } .tease__venue span { color: var(--accent); padding-inline: 0.35em; } .bigcta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: clamp(2.5rem, 6vw, 4rem); padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(1.5rem, 3vw, 2.4rem); border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; font-size: clamp(1.15rem, 2.6vw, 1.9rem); font-stretch: 106%; font-weight: 700; letter-spacing: -0.02em; transition: background-color 320ms var(--ease-quart), color 320ms, border-color 320ms; } .bigcta i { width: 1.5em; height: 1.5em; border-radius: 50%; border: 1px solid currentColor; position: relative; flex: none; transition: transform 420ms var(--ease-expo); } .bigcta i::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0.42em; height: 0.42em; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: translateX(-0.1em) rotate(45deg); } .bigcta:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .bigcta:hover i { transform: translateX(5px); } /* ============================================================ METHOD STACK ============================================================ */ .stack { width: var(--shell); margin-inline: auto; } .card { position: sticky; top: calc(15vh + var(--i) * 1.05rem); background: var(--bg-lift); border: 1px solid var(--rule); padding: clamp(1.5rem, 3vw, 2.6rem) clamp(1.3rem, 3vw, 2.4rem); margin-bottom: 1.1rem; display: grid; grid-template-columns: 3.6rem minmax(0, 1.05fr) minmax(0, 1fr); gap: 0.5rem clamp(1rem, 3vw, 3rem); align-items: start; box-shadow: 0 -14px 34px -22px oklch(0 0 0 / 0.55); } .card:last-child { margin-bottom: 0; } .card__n { font-stretch: 66%; font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--accent); padding-top: 0.5em; } .card h3 { font-size: clamp(1.15rem, 2.3vw, 1.75rem); font-stretch: 104%; font-weight: 660; line-height: 1.14; letter-spacing: -0.024em; max-width: 32ch; } .card h3 { grid-column: 2; } .card p { grid-column: 3; color: var(--ink-2); font-size: var(--t-sm); max-width: 54ch; } @media (max-width: 860px) { .card { grid-template-columns: 3.6rem minmax(0, 1fr); } .card p { grid-column: 2; margin-top: 0.7rem; } } @media (max-width: 620px) { .card { grid-template-columns: 1fr; } .card h3, .card p { grid-column: 1; } } @media (prefers-reduced-motion: reduce) { .card { position: static; } } /* ============================================================ RESEARCH PAGE ============================================================ */ body.is-sub { padding-top: 0; } .rhero { padding: clamp(8rem, 18vh, 13rem) var(--gut-safe) clamp(3rem, 7vw, 5rem); background: var(--bg); } .rhero__back { width: var(--shell); margin-inline: auto; font-stretch: 68%; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--t-xs); font-weight: 650; color: var(--ink-3); margin-bottom: clamp(1.2rem, 3vw, 2.2rem); } .rhero__back a { text-decoration: none; } .rhero__back a:hover { color: var(--accent); } .rhero__back span { color: var(--accent); padding-inline: 0.4em; } .rhero__title { width: var(--shell); margin-inline: auto; font-size: clamp(2.8rem, 10vw, 8.5rem); font-stretch: 114%; font-weight: 780; line-height: 0.86; letter-spacing: -0.04em; } .rhero__title > span { display: block; } .rhero__title > span:last-child { padding-left: clamp(0rem, 5vw, 5.5rem); } .rhero__lede { width: var(--shell); margin-inline: auto; margin-top: clamp(1.8rem, 4vw, 2.8rem); max-width: 44ch; font-size: var(--t-lede); line-height: 1.38; color: var(--ink-2); } .rhero__facts { width: var(--shell); margin-inline: auto; margin: clamp(2.5rem, 6vw, 4rem) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .rhero__facts > div { background: var(--bg); padding: 1rem 1.1rem; } .rhero__facts dt { font-stretch: 68%; text-transform: uppercase; letter-spacing: 0.11em; font-size: var(--t-xs); font-weight: 650; color: var(--ink-3); margin-bottom: 0.45rem; } .rhero__facts dd { margin: 0; font-size: var(--t-sm); } .sec--paper2 { background: var(--bg-sunk); border-block: 1px solid var(--rule); } .sec--scatter { border-bottom: 1px solid var(--rule); } .sec--out { padding-block: clamp(5rem, 12vw, 9rem); } /* ============================================================ SHORT LAPTOPS The hero carries its own base row, so on a 768 or 800 tall screen the whole thing has to fit or that row is lost. ============================================================ */ @media (min-width: 900px) and (max-height: 960px) { .hero__pin { padding-top: clamp(4.6rem, 9.5vh, 6rem); } .hero__inner { padding-block: clamp(0.4rem, 1.5vh, 1.4rem); } .hero__name { font-size: clamp(2.6rem, 7.8vw, 7rem); margin-bottom: clamp(0.9rem, 2.2vw, 1.6rem); } .hero__place { margin-bottom: clamp(0.9rem, 2.2vw, 1.6rem); } .hero__lede { font-size: clamp(1rem, 1.4vw, 1.25rem); max-width: 46ch; } .hero__acts { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); } .hero__links { margin-top: clamp(1.1rem, 2.2vw, 1.6rem); } .hero__base { padding-top: clamp(1rem, 2.2vh, 1.7rem); } } @media (min-width: 900px) and (max-height: 820px) { .hero__pin { padding-top: clamp(4.2rem, 8.5vh, 5rem); } .hero__name { font-size: clamp(2.4rem, 6.8vw, 5.6rem); } .hero__lede { font-size: 1.05rem; } .hero__caption { display: none; } } /* ============================================================ V3: effects layer ============================================================ */ html.is-locked, html.is-locked body { overflow: hidden; } /* ---------- rolling labels ---------- */ .roll { display: inline-flex; overflow: hidden; vertical-align: bottom; line-height: 1.2; } .roll__box { display: grid; transition: transform 520ms var(--ease-expo); } .roll__a, .roll__b { grid-area: 1 / 1; white-space: nowrap; } .roll__b { transform: translateY(100%); } .roll__a { transition: opacity 300ms; } a:hover > .roll .roll__box, button:hover > .roll .roll__box, a:hover .roll__box, button:hover .roll__box, .panel:hover .panel__cta .roll__box, a:focus-visible .roll__box, button:focus-visible .roll__box { transform: translateY(-100%); } /* ---------- menu button ---------- */ .menubtn { appearance: none; border: 1px solid var(--rule); background: none; color: inherit; display: inline-flex; align-items: center; gap: 0.6rem; font: inherit; font-size: var(--t-sm); font-weight: 650; padding: 0.42rem 0.8rem 0.42rem 1rem; border-radius: 999px; cursor: pointer; transition: background-color 260ms var(--ease-quart), color 260ms, border-color 260ms; } .menubtn i { width: 14px; height: 8px; position: relative; display: block; } .menubtn i::before, .menubtn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 460ms var(--ease-expo), top 460ms var(--ease-expo); } .menubtn i::before { top: 0; } .menubtn i::after { top: 6.5px; } .menubtn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } html.menu-open .menubtn i::before { top: 3.25px; transform: rotate(45deg); } html.menu-open .menubtn i::after { top: 3.25px; transform: rotate(-45deg); } /* ---------- menu ---------- */ .menu { position: fixed; inset: 0; z-index: 90; background: var(--p-d950); color: var(--p-ink); --ink: var(--p-ink); --ink-2: var(--p-ink2); --ink-3: var(--p-ink3); --rule: var(--p-d600); --accent: var(--p-acc); --accent-ink: var(--p-d950); clip-path: inset(0 0 100% 0); transition: clip-path 620ms var(--ease-expo); display: grid; padding: clamp(5.5rem, 12vh, 8rem) var(--gut-safe) clamp(2rem, 5vh, 3.5rem); overflow-y: auto; } .menu[hidden] { display: none; } html.menu-open .menu { clip-path: inset(0 0 0 0); } .menu__inner { width: var(--shell); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-content: center; } .menu__nav { display: grid; align-content: start; } .menu__link { display: flex; align-items: baseline; gap: 1.2rem; text-decoration: none; font-size: clamp(2.6rem, 7vw, 6.2rem); font-stretch: 112%; font-weight: 760; letter-spacing: -0.04em; line-height: 1; padding: 0.12em 0; border-bottom: 1px solid var(--rule); opacity: 0; transform: translateY(40px); transition: opacity 520ms var(--ease-expo), transform 720ms var(--ease-expo), color 240ms; } .menu__link .roll { line-height: 1.02; } .menu__link:hover { color: var(--accent); } html.menu-open .menu__link { opacity: 1; transform: none; } html.menu-open .menu__link:nth-child(1) { transition-delay: 120ms; } html.menu-open .menu__link:nth-child(2) { transition-delay: 170ms; } html.menu-open .menu__link:nth-child(3) { transition-delay: 220ms; } html.menu-open .menu__link:nth-child(4) { transition-delay: 270ms; } html.menu-open .menu__link:nth-child(5) { transition-delay: 320ms; } .menu__n { font-size: var(--t-xs); font-stretch: 66%; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); transform: translateY(-1.6em); } .menu__side { display: grid; align-content: end; gap: 2rem; opacity: 0; transition: opacity 500ms var(--ease-soft) 300ms; } html.menu-open .menu__side { opacity: 1; } .menu__links { display: grid; gap: 0.5rem; font-size: var(--t-sm); } .menu__links a { color: var(--ink-2); text-decoration: none; } .menu__links a:hover { color: var(--accent); } .menu__close { position: absolute; top: 0.85rem; right: var(--gut-safe); appearance: none; background: none; border: 1px solid var(--rule); color: inherit; font: inherit; font-size: var(--t-sm); font-weight: 650; padding: 0.42rem 1rem; border-radius: 999px; cursor: pointer; } .menu__close:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 760px) { .menu__inner { grid-template-columns: 1fr; } .menu__side { align-content: start; } } /* ---------- hero, pinned and folding ---------- */ .hero__labels { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; } .fl { position: absolute; left: 0; top: 0; font-size: 0.72rem; font-stretch: 80%; font-weight: 600; color: var(--ink-3); white-space: nowrap; translate: -50% -50%; } .fl--y { translate: -100% -50%; padding-right: 0.5rem; } .fl--thr { color: var(--accent); font-weight: 700; translate: 0.5rem -50%; } .fl--left { translate: 0 -120%; } .fl--axis { color: var(--ink-2); font-weight: 650; } .fl--right { translate: -100% 0; } .fl--rot { translate: none; transform-origin: center; } .hero__flat { position: absolute; left: var(--gut-safe); top: 50%; margin-top: -4rem; max-width: min(27vw, 24rem); opacity: 0; pointer-events: none; } .hero__flat-k { font-stretch: 66%; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--t-xs); font-weight: 700; color: var(--accent); margin-bottom: 0.6rem; } .hero__flat-t { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.42; color: var(--ink); } .hero:not(.is-pinned) .hero__flat, .hero:not(.is-pinned) .hero__labels { display: none; } .ch { display: inline-block; font-variation-settings: "wdth" 116, "wght" 780; } /* ---------- filmstrip, image-led ---------- */ .film__meta em { font-style: normal; margin-left: 1.4rem; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; } .panel { flex: 0 0 auto; width: calc(min(52svh, 60vw * 0.625) * 1.6); display: flex !important; flex-direction: column; gap: 1.1rem; border-top: 0; padding-top: 0; align-content: start; position: relative; cursor: pointer; } .panel:first-child { width: calc(min(52svh, 60vw * 0.625) * 1.6); } .panel__shot { margin: 0; height: min(52svh, 60vw * 0.625); aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: var(--bg-lift); border: 1px solid var(--rule); position: relative; } .panel__shot img, .panel__shot svg { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transform: none; transition: transform 900ms var(--ease-expo), filter 500ms; } .panel:hover .panel__shot img { filter: brightness(1.06); } .panel__shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.04); pointer-events: none; } .panel__shot--draw { background: var(--bg-lift); } .panel__shot--draw svg { transform: none !important; } .panel__meta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "idx name cta" ". line line" ". nums nums"; gap: 0.35rem 1.1rem; align-items: baseline; } .panel__idx { grid-area: idx; margin: 0; } .panel__name { grid-area: name; margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.4rem) !important; line-height: 1 !important; } .panel__name a, .panel__open { color: inherit; text-decoration: none; } .panel__open::after { content: ""; position: absolute; inset: 0; z-index: 1; } .panel__open:focus-visible { outline: none; } .panel:has(.panel__open:focus-visible) .panel__shot { outline: 2px solid var(--accent); outline-offset: 4px; } .panel__line { grid-area: line; margin: 0 !important; max-width: 46ch !important; font-size: var(--t-sm); color: var(--ink-2); } .panel__nums { grid-area: nums; display: flex; gap: clamp(1.2rem, 3vw, 2.4rem); margin: 0.5rem 0 0; } .panel__nums dt { font-size: var(--t-xs); color: var(--ink-3); order: 2; } .panel__nums dd { margin: 0; order: 1; font-size: clamp(1.15rem, 1.8vw, 1.55rem); font-weight: 720; font-stretch: 104%; letter-spacing: -0.02em; } .panel__nums > div { display: flex; flex-direction: column; } .panel__cta { grid-area: cta; font-size: var(--t-xs); font-weight: 700; font-stretch: 78%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.4rem; } .panel__cta::after { content: "\2197"; font-size: 1.2em; transition: transform 420ms var(--ease-expo); } .panel:hover .panel__cta::after { transform: translate(3px, -3px); } .panel__meta .btn { position: relative; z-index: 2; } /* chart-like drawings inside panels */ .gfx-grid path { stroke: var(--rule); stroke-width: 1; fill: none; } .gfx-lbl text, .gfx-lbl2, .gfx-v2 { fill: var(--ink-3); font-size: 15px; font-family: inherit; font-stretch: 80%; font-weight: 600; } .gfx-lbl2 { font-size: 17px; } .gfx-v2 { fill: var(--ink-2); } .gfx-k { fill: var(--ink-2); font-size: 18px; font-weight: 700; font-stretch: 78%; letter-spacing: 0.1em; text-transform: uppercase; } .gfx-a { fill: var(--chart-a); opacity: 0.55; } .gfx-b { fill: var(--accent); } .gfx-c { fill: var(--ink-3); opacity: 0.55; } .gfx-v { fill: var(--ink-2); font-size: 26px; font-weight: 720; font-family: inherit; } .gfx-v--hi { fill: var(--accent); } @media (max-width: 899px), (orientation: portrait) { .film__meta { display: block !important; } .film__meta span, .film__meta i { display: none; } .film__meta em { margin: 0; } .panel, .panel:first-child { width: auto; padding-bottom: clamp(2.2rem, 7vw, 3.5rem); } .panel__shot { height: auto; width: 100%; } .film__track .panel { transform: none; } .panel__meta { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "idx name" ". line" ". nums" ". cta"; } .panel__cta { justify-self: start; margin-top: 0.5rem; } } /* ---------- cases: inline without JS, a layer with it ---------- */ .cases { width: var(--shell); margin-inline: auto; padding: 0 var(--gut-safe); } html.has-cases .cases { display: none; } .case { padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--rule); } .case__head { max-width: 62rem; } .case__idx { font-stretch: 66%; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--t-xs); font-weight: 700; color: var(--accent); margin-bottom: 1rem; } .case__idx span { color: var(--ink-3); padding-inline: 0.35em; } .case__title { font-size: clamp(2.6rem, 8vw, 6.8rem); font-stretch: 114%; font-weight: 780; line-height: 0.9; letter-spacing: -0.04em; } .case__line { margin-top: 1.2rem; font-size: var(--t-lede); line-height: 1.38; color: var(--ink-2); max-width: 40ch; } .case__links { margin-top: 1.2rem; font-size: var(--t-sm); font-weight: 600; } .case__links a { color: var(--accent); text-underline-offset: 3px; } .case__links span { color: var(--ink-3); padding-inline: 0.4em; } .case__shot { margin: clamp(2rem, 5vw, 3.5rem) 0 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); background: var(--bg-lift); } .case__shot img { width: 100%; height: auto; display: block; } .case__shot figcaption { padding: 0.8rem 1rem; font-size: var(--t-xs); color: var(--ink-3); border-top: 1px solid var(--rule); } .case__nums { margin: clamp(2rem, 5vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .case__nums > div { background: var(--bg); padding: 1.1rem 1.2rem; display: flex; flex-direction: column-reverse; gap: 0.35rem; } .case__nums dt { font-size: var(--t-xs); color: var(--ink-3); } .case__nums dd { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 740; font-stretch: 106%; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .case__body { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: clamp(2.2rem, 5vw, 3.4rem); } .case__body > section { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 0.6rem clamp(1.5rem, 4vw, 3.5rem); border-top: 1px solid var(--rule); padding-top: 1.2rem; } .case__body h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 680; font-stretch: 104%; letter-spacing: -0.02em; line-height: 1.2; } .case__body section > p, .case__body section > .case__list, .case__body section > .case__table, .case__body section > .chart { grid-column: 2; } .case__body p { color: var(--ink-2); max-width: 60ch; } .case__body p + p { margin-top: 0.9rem; } .case__list { display: grid; gap: 0.8rem; } .case__list li { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; padding-left: 1.3rem; position: relative; max-width: 62ch; } .case__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); } .case__list b { color: var(--ink); font-weight: 650; } .case__table { overflow-x: auto; margin-top: 1.2rem; } .case__table table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; } .case__table th, .case__table td { padding: 0.65rem 0.8rem; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; } .case__table thead th { font-weight: 650; color: var(--ink-3); font-size: var(--t-xs); } .case__table tbody th { text-align: left; font-weight: 600; color: var(--ink); } .case__table tbody tr:nth-child(2) th, .case__table tbody tr:nth-child(2) td { color: var(--accent); } .case__body .chart { margin-top: 1.6rem; } .case__shot--2 { margin-top: 0; } @media (max-width: 760px) { .case__body > section { grid-template-columns: 1fr; } .case__body section > * { grid-column: 1 !important; } } .caselayer { position: fixed; inset: -28px 0 0 0; z-index: 95; padding-top: 28px; border-radius: 28px 28px 0 0; background: var(--bg); box-shadow: 0 -30px 60px -34px oklch(0 0 0 / 0.55); transform: translate3d(0, 104%, 0); transition: transform 720ms var(--ease-expo); will-change: transform; display: flex; flex-direction: column; } .caselayer[hidden] { display: none; } html.case-open .caselayer { transform: translate3d(0, 0, 0); } .caselayer__bar { position: absolute; top: 28px; right: 0; left: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 0.85rem var(--gut-safe); pointer-events: none; } .caselayer__close { pointer-events: auto; appearance: none; border: 1px solid var(--rule); background: color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: inherit; font: inherit; font-size: var(--t-sm); font-weight: 650; padding: 0.5rem 0.9rem 0.5rem 1.1rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.6rem; } .caselayer__close i { width: 12px; height: 12px; position: relative; } .caselayer__close i::before, .caselayer__close i::after { content: ""; position: absolute; top: 5.25px; left: 0; right: 0; height: 1.5px; background: currentColor; } .caselayer__close i::before { transform: rotate(45deg); } .caselayer__close i::after { transform: rotate(-45deg); } .caselayer__close:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .caselayer__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: clamp(4.5rem, 10vh, 6.5rem) var(--gut-safe) clamp(3rem, 8vh, 5rem); } .caselayer__slot { width: var(--shell); margin-inline: auto; transition: opacity 280ms var(--ease-soft), transform 280ms var(--ease-soft); } .caselayer.is-swapping .caselayer__slot { opacity: 0; transform: translateY(18px); } .caselayer__slot .case { border-top: 0; padding-top: 0; } .caselayer__slot .case__head > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-expo), transform 900ms var(--ease-expo); } html.case-open .caselayer__slot .case__head > * { opacity: 1; transform: none; } html.case-open .caselayer__slot .case__head > *:nth-child(2) { transition-delay: 90ms; } html.case-open .caselayer__slot .case__head > *:nth-child(3) { transition-delay: 160ms; } html.case-open .caselayer__slot .case__head > *:nth-child(4) { transition-delay: 220ms; } .caselayer__next { width: var(--shell); margin: clamp(3rem, 8vw, 5rem) auto 0; } .caselayer__next .bigcta { width: 100%; background: none; color: inherit; font: inherit; font-size: clamp(1.15rem, 2.6vw, 1.9rem); font-weight: 700; cursor: pointer; } /* ---------- toolkit rows ---------- */ .kit2 { width: var(--shell); margin-inline: auto; border-top: 1px solid var(--rule); } .kit2__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.5rem clamp(1.5rem, 4vw, 3.5rem); align-items: baseline; padding: clamp(1rem, 2.4vw, 1.6rem) 0; border-bottom: 1px solid var(--rule); transition: padding 520ms var(--ease-expo), background-color 320ms; } .kit2__row h3 { font-size: clamp(1.6rem, 4.4vw, 3.4rem); font-stretch: 110%; font-weight: 740; letter-spacing: -0.035em; line-height: 1; color: var(--ink-3); transition: color 320ms, font-stretch 520ms var(--ease-expo); } .kit2__row p { color: var(--ink-2); font-size: var(--t-sm); max-width: 50ch; } @media (hover: hover) and (pointer: fine) { .kit2__row p { opacity: 0.72; transition: opacity 320ms, transform 520ms var(--ease-expo); transform: translateX(-8px); } .kit2__row:hover { padding-left: 0.8rem; } .kit2__row:hover h3 { color: var(--ink); font-stretch: 118%; } .kit2__row:hover p { opacity: 1; transform: none; } } @media (max-width: 700px) { .kit2__row { grid-template-columns: 1fr; } .kit2__row h3 { color: var(--ink); } } /* ---------- contact ---------- */ .contact__mail { cursor: copy; } .contact__grid { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); } .contact__grid .contact__links { margin: 0; border: 0; padding: 0; gap: 0.6rem 2.4rem; font-size: var(--t-body); } .contact__grid .contact__links a { border: 0; font-weight: 650; } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: 1.6rem; z-index: 120; translate: -50% 0; background: var(--p-d950); color: var(--p-ink); border: 1px solid var(--p-d600); padding: 0.6rem 1.1rem; border-radius: 999px; font-size: var(--t-sm); font-weight: 650; opacity: 0; transform: translateY(16px); transition: opacity 260ms, transform 420ms var(--ease-expo); pointer-events: none; } .toast.is-on { opacity: 1; transform: none; } .toast:empty { padding: 0; border: 0; } /* ---------- section indicator ---------- */ .scrollnav { position: fixed; left: max(0.9rem, calc(var(--gut-safe) * 0.3)); top: 50%; z-index: 70; writing-mode: vertical-rl; display: flex; align-items: center; gap: 0.8rem; font-size: var(--t-xs); font-weight: 650; color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity 400ms, transform 500ms var(--ease-expo); pointer-events: none; } .scrollnav { translate: 0 -50%; rotate: 180deg; } .scrollnav.is-on { opacity: 1; transform: none; } .scrollnav__n { font-stretch: 66%; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; } .scrollnav__name { font-stretch: 80%; letter-spacing: 0.06em; text-transform: uppercase; min-height: 6.5rem; transition: opacity 180ms, transform 280ms var(--ease-expo); } .scrollnav.is-swap .scrollnav__name, .scrollnav.is-swap .scrollnav__n { opacity: 0; transform: translateY(-6px); } .scrollnav__n { transition: opacity 180ms, transform 280ms var(--ease-expo); } .scrollnav__bar { width: 1px; height: 64px; background: color-mix(in oklab, currentColor 30%, transparent); position: relative; overflow: hidden; } .scrollnav__bar i { position: absolute; inset: 0; background: currentColor; transform: scaleY(0); transform-origin: bottom; } @media (max-width: 899px), (orientation: portrait) { .scrollnav { display: none; } } /* ---------- reduced motion and no-JS for the new pieces ---------- */ @media (prefers-reduced-motion: reduce) { .menu, .caselayer { transition: none !important; } .menu__link { opacity: 1 !important; transform: none !important; } .hero__inner, .hero__base { opacity: 1 !important; transform: none !important; } } html:not(.js) .menubtn, html:not(.js) .scrollnav { display: none; } @media print { .menu, .caselayer, .scrollnav, .toast, .reticle, .wipe { display: none !important; } html.has-cases .cases { display: block !important; } .hero.is-pinned { height: auto !important; } .hero.is-pinned .hero__pin { position: static !important; height: auto !important; } } /* ---------- phone fixes for the V3 layer ---------- */ .only-pin { display: none; } .hero.is-pinned .only-pin { display: inline; } @media (max-width: 760px) { html.js .bar__nav { display: none; } html.js .bar__mark span { display: none; } .bar__end { margin-left: auto; } .case__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case__nums dd { font-size: clamp(1.25rem, 6vw, 1.7rem); } } /* ============================================================ FIX BATCH, from two rounds of browser testing ============================================================ */ /* the pinned sections change height after load; do not let the browser anchor to them */ html { overflow-anchor: none; } /* the reticle is white with a dark hairline, so it is visible on every surface, including the signal drench where an accent-coloured ring used to vanish. It used to invert what was under it, which blended the whole screen every frame */ .reticle { z-index: 500; } .reticle::before { border-color: #fff; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.32), inset 0 0 0 1px oklch(0 0 0 / 0.32); } .reticle i { background: #fff; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.28); } .reticle b { display: none; } .reticle__read { position: fixed; top: 0; left: 0; z-index: 501; margin: 12px 0 0 24px; pointer-events: none; white-space: nowrap; font-size: 0.68rem; font-weight: 650; font-stretch: 80%; letter-spacing: 0.04em; color: var(--p-d950); background: var(--p-acc); padding: 0.22em 0.55em; border-radius: 3px; opacity: 0; transition: opacity 180ms; } .reticle__read.is-on { opacity: 1; } .reticle__read:empty { display: none; } /* tabbing into the folded hero brings its controls back, even before the page scrolls */ .hero.is-pinned:focus-within .hero__inner, .hero.is-pinned:focus-within .hero__base { opacity: 1 !important; transform: none !important; } /* until the motion layer has split a heading it stays hidden, so late scripts do not make painted text vanish and replay; if the layer never arrives, everything shows */ .js [data-split]:not([data-is-split]) { opacity: 0; } html.no-motion [data-split], html.no-motion .rise, html.no-motion .reveal, html.no-motion [data-split] .wi { opacity: 1 !important; transform: none !important; } html.no-motion .wipe { display: none; } /* the word mask must not shave the side of a round glyph */ .w { padding-inline: 0.06em; margin-inline: -0.06em; } /* the strip counter only means something while the strip is pinned */ .film:not(.is-pinned) .film__meta span:not(.u-sr), .film:not(.is-pinned) .film__meta i { display: none; } /* the comparison axis label does not fit a small phone */ .barscale { gap: 0.6rem; } @media (max-width: 420px) { .barscale span:nth-child(2) { display: none; } } /* Lenis: its own recommended rules. Native smooth scrolling fights it, and a stopped Lenis (menu or case open) should not let the page scroll underneath */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ============================================================ FIX BATCH 2, from the six-angle QA of the rebuild ============================================================ */ /* drawings inside the filmstrip stay legible on a phone */ @media (max-width: 560px) { .gfx-lbl text, .gfx-lbl2, .gfx-v2 { font-size: 30px; } .gfx-k { font-size: 30px; } .gfx-v { font-size: 40px; } .case__table th, .case__table td { padding: 0.55rem 0.35rem; } .case__table tbody th { white-space: normal; min-width: 6.5rem; } } @media (max-width: 380px) { .case__table table { font-size: var(--t-xs); } } /* short laptops: a shorter frame keeps the panel meta clear of the bottom edge */ @media (min-width: 900px) and (max-height: 800px) { .panel__shot { height: min(44svh, 60vw * 0.625); } .panel, .panel:first-child { width: calc(min(44svh, 60vw * 0.625) * 1.6); } } /* on phones, screenshots are not cropped */ @media (max-width: 899px), (orientation: portrait) { .panel__shot img { transform: none !important; } } .panel__shot img { transform-origin: 100% 0; } /* without JavaScript there is no drawn field to caption */ html:not(.js) .hero__caption { display: none; } /* ============================================================ WILD LAYER: the coverflow and the rolling header line ============================================================ */ /* coverflow in the pinned strip: panels turn away as they leave the centre */ /* perspective per panel, around its own centre: a perspective on the whole track would put the vanishing point in the middle of a 4800px strip, off screen */ .film.is-pinned .film__track .panel { transform-origin: 50% 50%; will-change: transform; } /* a sideways drag on a touch screen moves the strip; vertical pans stay the browser's */ .film.is-pinned .film__pin { touch-action: pan-y pinch-zoom; } /* the front page scrolls one way only, so a sideways swipe is never "back" */ html.front, html.front body { overscroll-behavior-x: none; } /* the header's rolling line */ .bar__roll { position: relative; height: 1.3em; overflow: hidden; flex: 0 1 26rem; min-width: 0; margin-right: auto; font-size: var(--t-sm); color: var(--ink-2); } .bar__roll span { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateY(110%); opacity: 0; transition: transform 700ms var(--ease-expo), opacity 400ms; } .bar__roll span.is-cur { transform: none; opacity: 1; } .bar__roll span.is-out { transform: translateY(-110%); opacity: 0; } .bar__mark { margin-right: 1.6rem; } @media (max-width: 1180px) { .bar__roll { display: none; } .bar__mark { margin-right: auto; } } /* a case's role line, under its title */ .case__role { margin-top: 1rem; font-stretch: 78%; text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--t-sm); font-weight: 700; color: var(--accent); } /* ============================================================ FIX BATCH 3: speed, the theme switch, the workshops' clocks and Alfa-Romeo ============================================================ */ /* the statement's lead lines up with the columns under it */ .stmt__lead { margin-left: calc((100% - var(--shell)) / 2); max-width: 26ch; } /* a theme switch is one cut, not a dozen transitions landing at different times */ html.theme-cut, html.theme-cut *, html.theme-cut *::before, html.theme-cut *::after { transition: none !important; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: var(--ease-soft); } /* the method cards dim as they are covered, by an overlay rather than a filter, which would repaint the whole card on every frame */ .card::after { content: ""; position: absolute; inset: -1px; background: oklch(0 0 0); opacity: calc(var(--cover, 0) * 0.3); pointer-events: none; } /* decision countdowns, beside the workshops they wait on */ .cd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.8rem; } .tease__list .cd { margin-top: 0.85rem; font-size: var(--t-sm); color: var(--ink-2); } .cd__k { display: inline-flex; align-items: center; gap: 0.55rem; font-stretch: 68%; text-transform: uppercase; letter-spacing: 0.11em; font-size: var(--t-xs); font-weight: 650; color: var(--ink-3); } .cd__k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.2s var(--ease-soft) infinite; } .cd.is-over .cd__k::before { animation: none; opacity: 0.45; } .cd__t { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); white-space: nowrap; } .cd.is-live .cd__t { font-size: clamp(1.2rem, 2.1vw, 1.6rem); font-weight: 720; font-stretch: 104%; letter-spacing: -0.015em; line-height: 1; } .cd__t b { font-weight: inherit; } .cd__t i { font-style: normal; font-size: 0.56em; font-weight: 650; font-stretch: 80%; color: var(--ink-3); margin: 0 0.3em 0 0.06em; letter-spacing: 0.02em; } .cd__t i:last-child { margin-right: 0; } .paper__meta { flex-wrap: wrap; row-gap: 0.6rem; } .paper__meta .cd { margin-left: 0.4rem; } .paper__meta .cd__k::before { display: none; } /* Alfa-Romeo: three phones in the strip's frame, and a tour in its case */ .panel__shot--phones { display: flex; align-items: center; justify-content: center; gap: 5%; padding: 4% 7%; } .panel__shot--phones img { flex: none; width: auto; height: 84%; aspect-ratio: 400 / 870; object-fit: cover; border-radius: 9% / 4.2%; box-shadow: 0 22px 40px -22px oklch(0 0 0 / 0.6), 0 0 0 1px oklch(0.5 0 0 / 0.18); } .panel__shot--phones img:nth-child(2) { height: 94%; } .panel:hover .panel__shot--phones img { filter: none; } .case__phones { margin: clamp(2rem, 5vw, 3.5rem) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem) clamp(0.9rem, 2vw, 1.8rem); } .phone { margin: 0; } .phone img { display: block; width: 100%; height: auto; border-radius: 9% / 4.2%; border: 1px solid var(--rule); background: var(--bg-lift); } .phone figcaption { margin-top: 0.75rem; font-size: var(--t-xs); line-height: 1.45; color: var(--ink-2); max-width: 26ch; } .case__phones-note { margin-top: 1.2rem; font-size: var(--t-xs); color: var(--ink-3); } @media (max-width: 760px) { .case__phones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }