/* The Fantastic Planet — site styles Layout ported from the Claude Design canvas "Fantastic Planet Site.dc.html"; colour and type from the TFP Brand Pack V1 (/brand/tokens.css, loaded first). The canvas computed its grid columns in JS from window.innerWidth; those breakpoints are reproduced here as CSS media queries, so layout is correct before JS runs and correct without JS at all. Themes: light is the brand default. Dark follows the system setting unless the visitor has picked one with the header toggle, which sets (see theme.v1.js). The dark block is written twice — once for the system preference, once for the explicit choice — because a media query and an attribute selector cannot share one rule. */ :root { color-scheme: light; --bg: var(--tfp-sand); --bg-alt: #e3ddd3; --card: #f1ede6; --cell: #f1ede6; --cell-hover: #f6f3ee; --head: rgba(233, 228, 220, .9); --tx-hi: var(--tfp-ink); --tx: #2b2927; --tx-mut: var(--tfp-muted-dark); --tx-dim: #625d56; --ac: var(--tfp-terracotta); /* fills: buttons, dots */ --ac-on: var(--tfp-paper); /* text on a fill */ --ac-tx: #a04429; /* small accent text: terracotta, a step darker for AA on the alt band */ --ac-rule: rgba(168, 71, 42, .38); --aether: var(--tfp-aether); --hair: rgba(27, 26, 26, .11); --hair-strong: rgba(27, 26, 26, .2); --sans: var(--tfp-font); --gut: clamp(18px, 4vw, 48px); --maxw: 1200px; --headh: 72px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--tfp-ink); --bg-alt: #221f1e; --card: #272422; --cell: #242120; --cell-hover: #2c2927; --head: rgba(27, 26, 26, .9); --tx-hi: var(--tfp-paper); --tx: #d9d3c9; --tx-mut: var(--tfp-muted); --tx-dim: #938d83; --ac-tx: #d4805c; --ac-rule: rgba(192, 100, 63, .45); --aether: #8ea3bb; --hair: rgba(236, 230, 219, .09); --hair-strong: rgba(236, 230, 219, .18); } } :root[data-theme="dark"] { color-scheme: dark; --bg: var(--tfp-ink); --bg-alt: #221f1e; --card: #272422; --cell: #242120; --cell-hover: #2c2927; --head: rgba(27, 26, 26, .9); --tx-hi: var(--tfp-paper); --tx: #d9d3c9; --tx-mut: var(--tfp-muted); --tx-dim: #938d83; --ac-tx: #d4805c; --ac-rule: rgba(192, 100, 63, .45); --aether: #8ea3bb; --hair: rgba(236, 230, 219, .09); --hair-strong: rgba(236, 230, 219, .18); } /* The planet mark: colour on light grounds, mono on dark (brand rule). */ .mark-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark-light { display: none; } :root:not([data-theme="light"]) .mark-dark { display: block; } } :root[data-theme="dark"] .mark-light { display: none; } :root[data-theme="dark"] .mark-dark { display: block; } /* ---------- base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--bg); -webkit-font-smoothing: antialiased; } body { color: var(--tx); font-family: var(--sans); min-height: 100vh; overflow-x: hidden; transition: background-color .2s, color .2s; } a { color: inherit; text-decoration: none; } ::selection { background: rgba(74, 95, 119, .28); } :focus-visible { outline: 2px solid var(--ac-tx); outline-offset: 3px; border-radius: 4px; } @keyframes tfpPulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ac); color: var(--ac-on); font: 500 13px/1 var(--sans); padding: 12px 18px; border-radius: 0 0 8px 0; } .skip:focus { left: 0; } /* Headlines are Montserrat 300; emphasis steps up one weight rather than changing face or colour. */ h1 em, h2 em { font-style: normal; font-weight: 400; color: inherit; } /* ---------- layout primitives ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); } .band { border-top: 1px solid var(--hair); } .band.alt { background: var(--bg-alt); } .band > .wrap { padding-block: clamp(52px, 7vw, 100px); } .band > .wrap-tight { padding-block: clamp(48px, 6vw, 84px); } .band > .wrap-close { padding-block: clamp(60px, 8vw, 116px); } section[id] { scroll-margin-top: var(--headh); } /* Brand kicker: Montserrat 500, uppercase, 0.22em. */ .eyebrow { font: 500 11px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ac-tx); margin: 0; } .section-h { font: 300 clamp(28px, 4.3vw, 48px)/1.1 var(--sans); letter-spacing: -.02em; color: var(--tx-hi); margin: 16px 0 0; max-width: 20ch; text-wrap: balance; } .section-p { font: 400 clamp(15px, 1.4vw, 17px)/1.65 var(--sans); color: var(--tx-mut); margin: 16px 0 0; max-width: 58ch; text-wrap: pretty; } .section-p-narrow { max-width: 48ch; } .num { font: 500 11px/1 var(--sans); letter-spacing: .14em; color: var(--ac-tx); font-variant-numeric: tabular-nums; } .num-dim { color: var(--tx-dim); } /* ---------- buttons ---------- */ .btn { font: 500 13.5px/1 var(--sans); border-radius: 999px; padding: 14px 24px; white-space: nowrap; transition: filter .16s, border-color .16s, color .16s; } .btn-sm { font-size: 13px; padding: 12px 20px; } .btn-accent { color: var(--ac-on); background: var(--ac); } .btn-accent:hover { filter: brightness(1.1); } .btn-ghost { color: var(--tx); border: 1px solid var(--hair-strong); } .btn-ghost:hover { border-color: var(--ac-rule); color: var(--tx-hi); } .btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 34px); } .btn-row-tight { margin-top: 26px; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--head); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--hair); } .bar { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); height: var(--headh); display: flex; align-items: center; gap: 14px; } /* Horizontal lockup. Brand rules: wordmark Montserrat 300, one line, -0.01em; mark ~2.2x the wordmark size; gap ~0.6x. */ .brand { display: flex; align-items: center; gap: 11px; margin-right: auto; flex: none; } .brand img { height: 39px; width: auto; } .brand-name { font: 300 18px/1 var(--sans); letter-spacing: -.01em; color: var(--tx-hi); white-space: nowrap; } .nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 26px); } .nav .btn-sm { font-size: 12.5px; padding: 10px 17px; } .nav-link { font: 500 13px/1 var(--sans); color: var(--tx-mut); padding: 8px 0; transition: color .16s; white-space: nowrap; } .nav-link:hover { color: var(--tx-hi); } .nav-link[aria-current="page"] { color: var(--tx-hi); } .icon-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: none; color: var(--tx); border: 1px solid var(--hair-strong); border-radius: 9px; cursor: pointer; flex: none; transition: border-color .16s, color .16s; } .icon-btn:hover { border-color: var(--ac-rule); color: var(--tx-hi); } .icon-btn svg { width: 17px; height: 17px; display: block; } /* The toggle shows the theme you would switch TO. */ .theme-toggle .i-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; } } :root[data-theme="dark"] .theme-toggle .i-sun { display: block; } :root[data-theme="dark"] .theme-toggle .i-moon { display: none; } .menu-toggle { flex-direction: column; gap: 4px; padding: 0 9px; align-items: stretch; } .menu-toggle i { height: 1.5px; background: var(--tx); display: block; border-radius: 2px; } .mobile-menu { border-top: 1px solid var(--hair); padding: 6px var(--gut) 16px; display: flex; flex-direction: column; } .mobile-menu[hidden] { display: none; } .mobile-menu a, .mobile-menu .menu-theme { font: 500 15px/1 var(--sans); color: var(--tx); padding: 15px 0; border-bottom: 1px solid var(--hair); } .menu-theme { display: none; background: none; border: 0; text-align: left; cursor: pointer; } .mobile-menu-cta { margin-top: 14px; align-self: flex-start; color: var(--ac-on) !important; background: var(--ac); border-radius: 999px; padding: 13px 22px !important; border-bottom: 0 !important; } /* Wide = innerWidth >= 1024 (app.v2.js uses the same threshold). The canvas used 880; Montserrat and the larger lockup need the room. */ .menu-toggle { display: none; } @media (max-width: 1023.98px) { .nav-link { display: none; } .menu-toggle { display: flex; } } @media (min-width: 1024px) { .mobile-menu { display: none; } } /* Narrow bars: the lockup is nowrap by brand rule, so the pill goes first (it is repeated in the menu and the hero), then the theme toggle moves into the menu. */ @media (max-width: 519.98px) { .nav > .btn-accent { display: none; } .bar { gap: 10px; } } @media (max-width: 399.98px) { .nav > .theme-toggle { display: none; } .mobile-menu .menu-theme { display: block; } .brand img { height: 35px; } .brand-name { font-size: 16px; } .brand { gap: 10px; } } /* ---------- hero ---------- */ .hero { padding-top: clamp(52px, 9vw, 116px); padding-bottom: clamp(44px, 6vw, 84px); display: grid; grid-template-columns: 1fr; align-items: center; gap: clamp(32px, 5vw, 80px); } @media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr) auto; } } .hero-mark { display: none; } @media (min-width: 900px) { .hero-mark { display: block; padding: 0 clamp(8px, 2vw, 40px); } .hero-mark img { height: clamp(300px, 34vw, 470px); width: auto; } } .ping { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font: 500 11px/1.7 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--tx-dim); margin: 0; } .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ac); display: block; animation: tfpPulse 2.8s ease-in-out infinite; flex: none; } .hero h1 { font: 300 clamp(36px, 6.6vw, 76px)/1.06 var(--sans); letter-spacing: -.025em; color: var(--tx-hi); margin: clamp(20px, 3vw, 32px) 0 0; max-width: 15ch; text-wrap: balance; } .lede { font: 400 clamp(16px, 1.6vw, 19px)/1.6 var(--sans); color: var(--tx-mut); margin: clamp(18px, 2.4vw, 28px) 0 0; max-width: 54ch; text-wrap: pretty; } /* ---------- products ---------- */ .products { margin-top: clamp(28px, 3.5vw, 44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(16px, 2vw, 24px); } /* Product cards keep each product's own ground in both themes. */ .product { display: flex; flex-direction: column; gap: 26px; min-height: 340px; padding: clamp(28px, 3.6vw, 48px); border-radius: 14px; border: 1px solid var(--hair); color: var(--tfp-paper); transition: transform .2s; } .product:hover { transform: translateY(-3px); } .product-vera { background: var(--vera-bg); } .product-riviera { background: var(--riviera-bg); color: var(--riviera-paper); } .product-logo { min-height: 44px; display: flex; align-items: center; } .product-logo-vera { font: 300 42px/1 var(--tfp-font); letter-spacing: -.01em; } .product-logo-vera span { color: var(--tfp-terracotta-light); } .product-logo-riviera { gap: 14px; font: 500 34px/1 var(--riviera-font); letter-spacing: -.02em; } .product-logo-riviera img { height: 36px; width: auto; } .product-logo-riviera .ai { color: var(--riviera-gold); } .product-body { flex: 1; display: flex; flex-direction: column; gap: 12px; } .product h3 { margin: 0; font: 400 22px/1.25 var(--tfp-font); } .product p { margin: 0; font: 400 16px/1.6 var(--tfp-font); color: var(--tfp-muted); max-width: 44ch; text-wrap: pretty; } .product-link { font: 500 12.5px/1 var(--tfp-font); letter-spacing: .18em; text-transform: uppercase; } .products-help { margin: 22px 0 0; font: 400 14.5px/1.6 var(--sans); color: var(--tx-mut); } .products-help a, .inline-link { color: var(--ac-tx); text-decoration: underline; text-decoration-color: var(--ac-rule); text-underline-offset: 3px; } .products-help a:hover, .inline-link:hover { text-decoration-color: currentColor; } /* ---------- flagship (vera·you) ---------- */ .flagship { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(24px, 4vw, 64px); align-items: start; } .flagship h2 { font: 300 clamp(29px, 4.3vw, 48px)/1.1 var(--sans); letter-spacing: -.02em; color: var(--tx-hi); margin: 0; text-wrap: balance; } .flagship-copy { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; } .body { font: 400 clamp(15px, 1.4vw, 17px)/1.65 var(--sans); color: var(--tx); margin: 0; max-width: 52ch; text-wrap: pretty; } .body-dim { color: var(--tx-mut); } .rule-note { border-left: 2px solid var(--ac-rule); padding-left: 16px; display: flex; flex-direction: column; gap: 6px; } .rule-note-k { font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ac-tx); } .rule-note-v { font: 400 14.5px/1.6 var(--sans); color: var(--tx-mut); max-width: 48ch; text-wrap: pretty; } /* ---------- flow (how it works) ---------- */ #systems .section-h { max-width: 20ch; } .flow { margin: clamp(30px, 4vw, 50px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); align-items: stretch; } @media (min-width: 620px) { .flow { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .flow { grid-template-columns: repeat(4, 1fr); } } .flow-card { background: var(--card); border: 1px solid var(--hair); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 10px; } .flow-title { font: 400 18px/1.25 var(--sans); letter-spacing: -.01em; color: var(--tx-hi); } .flow-body { font: 400 14px/1.6 var(--sans); color: var(--tx-mut); text-wrap: pretty; } .flow-tag { margin-top: auto; padding-top: 12px; font: 500 11.5px/1.4 var(--sans); letter-spacing: .04em; color: var(--aether); } /* ---------- vera notes ---------- */ .vera { margin-top: clamp(30px, 4vw, 52px); display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 60px); align-items: start; } @media (min-width: 900px) { .vera { grid-template-columns: 1.35fr 1fr; } } .vera-notes { display: flex; flex-direction: column; gap: 26px; } .note { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--hair-strong); padding-top: 16px; } .note-t { font: 500 15px/1.3 var(--sans); color: var(--tx-hi); } .note-b { font: 400 14.5px/1.65 var(--sans); color: var(--tx-mut); max-width: 52ch; text-wrap: pretty; } .underneath { border-left: 2px solid var(--ac-rule); padding: 2px 0 2px 18px; display: flex; flex-direction: column; gap: 10px; } .underneath-k { font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-dim); } .underneath-v { font: 400 14.5px/1.65 var(--sans); color: var(--tx-mut); text-wrap: pretty; } .underneath-cta { font: 500 12px/1 var(--sans); letter-spacing: .06em; color: var(--ac-tx); margin-top: 4px; transition: filter .16s; } .underneath-cta:hover { filter: brightness(1.15); } /* ---------- about ---------- */ #about .section-h { max-width: 18ch; } .about { margin-top: clamp(26px, 3.4vw, 44px); display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 64px); align-items: start; } @media (min-width: 900px) { .about { grid-template-columns: 1.25fr 1fr; } } .about-copy { display: flex; flex-direction: column; gap: 20px; } .about-p { font: 400 clamp(16px, 1.5vw, 18px)/1.7 var(--sans); color: var(--tx); margin: 0; max-width: 56ch; text-wrap: pretty; } .about-p-dim { font-size: clamp(15px, 1.4vw, 17px); color: var(--tx-mut); } .facts { display: flex; flex-direction: column; margin: 0; } .fact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--hair-strong); } .fact dt { font: 500 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-dim); flex: none; min-width: 124px; margin: 0; } .fact dd { font: 400 14.5px/1.55 var(--sans); color: var(--tx); flex: 1; min-width: 150px; margin: 0; text-wrap: pretty; } /* ---------- figures ---------- */ .figures { margin-top: clamp(24px, 3vw, 38px); display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 40px); } @media (min-width: 560px) { .figures { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .figures { grid-template-columns: repeat(4, 1fr); } } .figure { border-top: 1px solid var(--hair-strong); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; } .figure-v { font: 300 clamp(30px, 3.6vw, 44px)/1 var(--sans); letter-spacing: -.03em; color: var(--tx-hi); font-variant-numeric: tabular-nums; } .figure-l { font: 400 13.5px/1.55 var(--sans); color: var(--tx-mut); text-wrap: pretty; } /* ---------- work / clients ---------- The Work section is off the page for now (2026-09-30); these styles are kept so it can come back as it was. */ #work .section-h { max-width: 22ch; } .sub-label { margin: clamp(30px, 4vw, 48px) 0 0; font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-dim); } .clients { margin-top: 16px; display: flex; flex-direction: column; } .client { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2.1fr); gap: 6px 28px; padding: 18px 0; border-top: 1px solid var(--hair-strong); } /* Deviation from the canvas: the two-column client row is fixed at every width in the design, which leaves ~146px for the description on a phone. Stack it below 560px. Delete this block to restore the canvas exactly. */ @media (max-width: 559.98px) { .client { grid-template-columns: 1fr; } } .client-name { font: 400 clamp(17px, 1.7vw, 20px)/1.25 var(--sans); letter-spacing: -.01em; color: var(--tx-hi); } .client-line { font: 400 14.5px/1.6 var(--sans); color: var(--tx-mut); text-wrap: pretty; } /* ---------- trust ---------- */ .trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(26px, 4vw, 60px); align-items: start; } #trust .section-h { max-width: 17ch; } .trust-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--hair-strong); border: 1px solid var(--hair-strong); border-radius: 14px; overflow: hidden; margin: 0; } @media (min-width: 560px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } } .trust-cell { background: var(--cell); padding: 20px; display: flex; flex-direction: column; gap: 8px; } .trust-cell dt { font: 500 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ac-tx); margin: 0; } .trust-cell dd { font: 400 14px/1.6 var(--sans); color: var(--tx-mut); margin: 0; text-wrap: pretty; } /* ---------- close ---------- */ .close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; } .close-p { font: 300 clamp(19px, 2vw, 24px)/1.45 var(--sans); letter-spacing: -.01em; color: var(--tx-hi); margin: 0; max-width: 44ch; text-wrap: pretty; } /* ---------- support page ---------- */ .page-head { padding-top: clamp(48px, 8vw, 104px); padding-bottom: clamp(28px, 4vw, 48px); } .page-head h1 { font: 300 clamp(36px, 6vw, 68px)/1.06 var(--sans); letter-spacing: -.025em; color: var(--tx-hi); margin: 18px 0 0; max-width: 16ch; text-wrap: balance; } .help { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); } @media (min-width: 760px) { .help { grid-template-columns: repeat(3, 1fr); } } .help-card { background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 12px; } .help-title { font: 400 21px/1.2 var(--sans); letter-spacing: -.015em; color: var(--tx-hi); margin: 0; } .help-p { font: 400 14.5px/1.6 var(--sans); color: var(--tx-mut); margin: 0; text-wrap: pretty; } .help-card .btn-row { margin-top: auto; padding-top: 10px; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--hair); background: var(--bg-alt); } .foot { padding-top: 36px; padding-bottom: 44px; display: flex; flex-wrap: wrap; gap: 22px 32px; align-items: center; } .foot-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; } .foot-brand img { height: 36px; width: auto; } .foot-lockup { display: flex; flex-direction: column; gap: 8px; } .foot-name { font: 300 16px/1 var(--sans); letter-spacing: -.01em; color: var(--tx-hi); white-space: nowrap; } /* Brand tagline: Montserrat 400, uppercase, 0.22em, one line. */ .foot-tag { font: 400 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--tx-dim); white-space: nowrap; } /* Phones: the tagline stays on one line (brand rule), so the mark stacks above the lockup and the tagline steps down a size to fit 320px. */ @media (max-width: 479.98px) { .foot-brand { flex-direction: column; align-items: flex-start; } .foot-tag { font-size: 9px; } } .foot-links { display: flex; gap: 10px 22px; flex-wrap: wrap; font: 400 13px/1.4 var(--sans); color: var(--tx-mut); } .foot-links a { transition: color .16s; } .foot-links a:hover { color: var(--tx-hi); } .foot-legal { flex-basis: 100%; margin: 0; font: 400 12px/1.5 var(--sans); color: var(--tx-dim); } /* ---------- grid overflow guard ---------- Grid and flex children default to min-width:auto, which is min-content — a single long token then pushes the track wider than its container and the page overflows sideways. Measured as ~29px of hidden overflow at 320px, invisible only because body clips it. */ .flow-card, .trust-cell, .figure, .note, .client, .product, .help-card, .fact dd, .flagship > *, .about > *, .vera > *, .trust > *, .hero > * { min-width: 0; } .flow-body, .note-b, .underneath-v, .client-line, .help-p, .figure-l, .trust-cell dd, .fact dd, .body, .about-p, .lede, .product p { overflow-wrap: break-word; } /* ---------- large displays ---------- The canvas capped every clamp() and held the container at 1200px, so above roughly 1240px the layout stopped changing: on a 1920 or 2560 monitor the page sat in a fixed column with a third of the screen empty. Everything at or below 1599px is exactly as designed; these tiers only extend it upward. Delete this block to return to the canvas's fixed 1200px behaviour. */ @media (min-width: 1600px) { :root { --maxw: 1380px; --gut: 60px; } .hero h1 { font-size: clamp(76px, 5vw, 88px); } .lede { font-size: 21px; } .flagship h2 { font-size: clamp(48px, 3.3vw, 56px); } .section-h { font-size: clamp(48px, 3.2vw, 55px); } .figure-v { font-size: clamp(44px, 2.9vw, 52px); } .band > .wrap { padding-block: clamp(100px, 6.4vw, 124px); } } @media (min-width: 2000px) { :root { --maxw: 1520px; --gut: 72px; } .hero h1 { font-size: 96px; } .flagship h2 { font-size: 60px; } .section-h { font-size: 58px; } } /* ---------- motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .dot { animation: none; opacity: 1; } * { transition-duration: .01ms !important; } }