/* LIVERUN Partners — built from liverun-partners-website-content-sheet-2026-09-02.md Benchmark: off-menu.com/about. Mechanism reproduced: slab-over-slab stacking with seam-only radius, sticky hero, staggered reveals, display type sized PER HEADLINE. DESKTOP-FIRST. This is B2B; the consumer surfaces (LIVERUN app, SUPER CLUB) are mobile-first and this deliberately is not (Tomo, 2026-09-02). Composed at ~1440 and adapted down, which is the reverse of 07 §2's usual sweep order. TYPE. Body downloads NO font: system stack, zero bytes, paints immediately. Display type only loads assets/lr-display.woff2, a subset of Noto Sans JP Black regenerated from THIS FILE's selectors on every build by build_fonts.py. Any rule below whose font-family is var(--font-display) is collected automatically — there is no list to keep in sync. Noto tops out at 900; 950 does not exist. PALETTE. LIVERUN's own SUPER CLUB surface palette, approved 2026-08-26 — paper/ink, not the product design system (which exempts sponsorship campaigns by its own scope clause). --run is the LIVERUN brand orange and is MANDATED: do not substitute. ⚠️ Step 2 never formally produced a Partners palette. This is precedent-based and still owes Design a sign-off. */ :root{ --paper:#F5F1E8; /* SUPER CLUB approved */ --ink:#0E1511; /* SUPER CLUB approved */ --muted:#68655F; /* SUPER CLUB approved */ --white:#FFFDF8; /* SUPER CLUB approved */ --run:#FD7242; /* LIVERUN brand orange — MANDATED, do not substitute */ --purple:#423B97; /* permitted brand bridge */ --rule:rgba(14,21,17,.14); --rule-dark:rgba(255,253,248,.18); --font-display:'LR Display','Noto Sans JP',system-ui,sans-serif; --font-body:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Hiragino Sans', 'Noto Sans CJK JP','Yu Gothic',YuGothic,'Segoe UI',Roboto,sans-serif; --gut:clamp(20px,4.5vw,84px); --slab-y:clamp(72px,7vw,150px); } @font-face{ font-family:'LR Display'; src:url(lr-display.woff2) format('woff2'); font-weight:900; font-style:normal; font-display:swap; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--ink); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; /* NOT clip — clip on renders a blank page in Chrome (07 §3.3) */ } img{max-width:100%; height:auto; display:block} /* height:auto is required (07 §3.2) */ a{color:inherit} /* ---------- slabs ------------------------------------------------------------ Each slab rides over the one above by a negative margin, with a radius on its own top corners. The crop only READS where the two grounds differ in colour — that is the seam-only radius the benchmark uses. Applying it uniformly is therefore self-managing: matching grounds simply show nothing. Negative margins shrink their container (07 §3.7), so slabs are grid items, never absolutely positioned against each other. */ main{display:grid; grid-template-columns:100%} .slab{ position:relative; z-index:1; margin-top:-34px; border-radius:34px 34px 0 0; padding:var(--slab-y) var(--gut); background:var(--paper); } .slab:first-child{margin-top:0} .slab--ink{background:var(--ink); color:var(--white)} .slab--ink .lede,.slab--ink .muted{color:rgba(255,253,248,.66)} .wrap{max-width:1200px; margin-inline:auto} .wrap--narrow{max-width:860px} /* ---------- type ------------------------------------------------------------- Display sizes are set PER HEADLINE from that headline's own longest unbreakable word — never from one global scale (02 §4). Every clamp is also capped against available width; nothing is anchored in vh, because vw type beside a vh anchor is the recurring bug that produced six separate defects on NGB (07 §3.1). */ .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--run); margin:0 0 22px; } .slab--ink .eyebrow{color:var(--run)} h1,h2,h3{margin:0; font-family:var(--font-display); font-weight:900; letter-spacing:-.035em; line-height:.94; text-wrap:balance} h1{font-size:clamp(44px,7.4vw,124px); line-height:.9; letter-spacing:-.045em} h2{font-size:clamp(32px,4.6vw,76px)} h3{font-size:clamp(22px,2.2vw,34px); line-height:1.06; letter-spacing:-.02em} .statement{ font-family:var(--font-display); font-weight:900; font-size:clamp(30px,4.4vw,72px); line-height:.96; letter-spacing:-.04em; margin:0; text-wrap:balance; } .statement--xl{font-size:clamp(38px,6.6vw,112px); letter-spacing:-.05em; line-height:.9} .lede{font-size:clamp(18px,1.35vw,23px); line-height:1.5; color:var(--muted); max-width:62ch; margin:26px 0 0} p{margin:20px 0 0; max-width:66ch} .muted{color:var(--muted)} .rule{height:1px; background:var(--rule); border:0; margin:56px 0} .slab--ink .rule{background:var(--rule-dark)} /* ---------- nav --------------------------------------------------------------- */ .nav{ position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:28px; padding:16px var(--gut); background:rgba(14,21,17,.86); backdrop-filter:saturate(150%) blur(12px); color:var(--white); border-bottom:1px solid var(--rule-dark); } .nav__mark{display:flex; align-items:center; text-decoration:none} .nav__mark img{height:22px; width:auto} /* A phone screenshot shown at phone scale, not stretched to fill a column. */ .phone{margin:0} .phone img{width:100%; max-width:258px; border-radius:20px; border:1px solid var(--rule)} .slab--ink .phone img{border-color:var(--rule-dark)} .nav__links{display:flex; gap:22px; margin-left:auto; font-size:13.5px; flex-wrap:wrap} .nav__links a{text-decoration:none; color:rgba(255,253,248,.74)} .nav__links a:hover{color:var(--white)} .nav__cta{ font-size:13.5px; font-weight:700; text-decoration:none; background:var(--run); color:var(--ink); padding:10px 18px; border-radius:999px; white-space:nowrap; } /* ---------- hero — sticky, per the benchmark ---------------------------------- */ .hero{ position:sticky; top:0; z-index:0; background:var(--ink); color:var(--white); padding:clamp(56px,6vw,104px) var(--gut) clamp(72px,7vw,128px); border-radius:0; } .hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,72px); align-items:center; max-width:1280px; margin-inline:auto} .hero__arc{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin:34px 0 0; font-family:var(--font-display); font-weight:900; font-size:clamp(15px,1.5vw,23px); letter-spacing:-.01em; line-height:1.1; } .hero__arc span{white-space:nowrap} .hero__arc i{color:var(--run); font-style:normal} .hero__sig{margin-top:26px; font-size:15px; color:rgba(255,253,248,.62); letter-spacing:.01em} .cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px} .btn{ display:inline-block; text-decoration:none; font-weight:700; font-size:15px; padding:15px 26px; border-radius:999px; border:1px solid transparent; white-space:nowrap; } .btn--run{background:var(--run); color:var(--ink)} .btn--ghost{border-color:rgba(255,253,248,.36); color:var(--white)} .slab:not(.slab--ink) .btn--ghost{border-color:var(--rule); color:var(--ink)} .hero__media{border-radius:20px; overflow:hidden; background:#141d18} .hero__media img{width:100%} /* The live-session console, rendered rather than photographed. Zero bytes, sharp at every resolution, and unmistakably a UI representation rather than a claimed screenshot — which matters on a page arguing evidence over assertion. */ .console{border:1px solid rgba(255,253,248,.16); border-radius:20px; background:#141d18; padding:clamp(18px,1.8vw,26px); font-variant-numeric:tabular-nums} .console__bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid rgba(255,253,248,.12)} .console__live{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--run)} .console__live i{width:8px; height:8px; border-radius:50%; background:var(--run); display:block; animation:pulse 1.8s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} @media (prefers-reduced-motion:reduce){.console__live i{animation:none}} .console__meta{font-size:13px; color:rgba(255,253,248,.5)} .console__rows{display:grid; gap:2px; margin-top:6px} .console__row{display:grid; grid-template-columns:88px 1fr auto; gap:12px; align-items:baseline; padding:13px 0; border-bottom:1px solid rgba(255,253,248,.07)} .console__row span{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,253,248,.45)} .console__row b{font-family:var(--font-display); font-weight:900; font-size:clamp(17px,1.5vw,22px); letter-spacing:-.02em} .console__row em{font-style:normal; font-family:var(--font-display); font-weight:900; font-size:clamp(17px,1.5vw,22px); letter-spacing:-.03em; color:var(--run)} .console__say{margin:18px 0 0; font-size:clamp(15px,1.2vw,18px); line-height:1.45; color:rgba(255,253,248,.86)} .console__note{margin:14px 0 0; font-size:12px; color:rgba(255,253,248,.38)} /* ---------- reveals — staggered, word-scale, like the benchmark ---------------- */ /* The hidden state is scoped to .js, which an inline script in sets. Without JavaScript there is no hidden state at all, so the page renders in full. This matters more here than usual: a reveal that starts at opacity:0 and depends on JS to undo means a crawler that does not execute scripts sees an EMPTY PAGE - on a site whose entire argument is that it should be legible to AI systems. */ .js .rv{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)} .js .rv.in{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){.js .rv{opacity:1; transform:none; transition:none}} /* ---------- shared blocks ------------------------------------------------------ */ .grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.6vw,44px)} .grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.4vw,38px)} .grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2vw,32px)} .grid5{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(16px,1.8vw,28px)} .stack{display:grid; gap:clamp(14px,1.6vw,22px)} .metric{border-top:2px solid var(--run); padding-top:16px} .metric__n{ font-family:var(--font-display); font-weight:900; line-height:.86; letter-spacing:-.045em; /* sized from its own longest token — "8+ YEARS" is the constraint here, not "71%" */ font-size:clamp(38px,4.4vw,74px); } .metric__l{font-size:13.5px; color:var(--muted); margin-top:12px; line-height:1.35} .slab--ink .metric__l{color:rgba(255,253,248,.6)} .card{background:var(--white); border-radius:18px; padding:clamp(22px,2vw,34px)} .slab--ink .card{background:rgba(255,253,248,.05)} .card__n{font-family:var(--font-display); font-weight:900; font-size:14px; color:var(--run); letter-spacing:.08em} .card h3{margin-top:10px} .card p{font-size:16px; color:var(--muted); max-width:none} .slab--ink .card p{color:rgba(255,253,248,.66)} .flow{display:grid; gap:12px; counter-reset:s} /* The ::before counter is itself a grid item. With `auto 1fr` and two children, the wrapped into COLUMN 1 - which is `auto`, so it sized to the longest span in the list and shoved every heading progressively rightward. Placing the counter explicitly and putting every real child in column 2 fixes it: column 1 now sizes to the counter and nothing else. minmax(0,1fr) stops long tokens blowing the track out. */ .flow li{ list-style:none; display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 16px; align-items:baseline; padding:16px 0; border-top:1px solid var(--rule); } .flow li::before{grid-column:1; grid-row:1} .flow li > *{grid-column:2} .slab--ink .flow li{border-color:var(--rule-dark)} .flow li::before{ counter-increment:s; content:counter(s,decimal-leading-zero); font-family:var(--font-display); font-weight:900; font-size:14px; color:var(--run); } .flow b{font-weight:700} .flow span{color:var(--muted)} .slab--ink .flow span{color:rgba(255,253,248,.6)} .compare{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); border-radius:16px; overflow:hidden} .slab--ink .compare{border-color:var(--rule-dark)} .compare>div{padding:clamp(18px,1.8vw,28px)} .compare>div+div{border-left:1px solid var(--rule); background:rgba(253,114,66,.06)} .slab--ink .compare>div+div{border-color:var(--rule-dark)} .compare h4{margin:0 0 14px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--run)} .compare ul{margin:0; padding:0; list-style:none; display:grid; gap:9px; font-size:15.5px} .data{font-variant-numeric:tabular-nums; font-size:15.5px; display:grid; gap:8px} .data b{font-weight:700} .qa{border-top:1px solid var(--rule); padding:24px 0} .qa h3{font-size:clamp(18px,1.5vw,24px); letter-spacing:-.01em} .qa p{color:var(--muted); font-size:16px} .price{ font-family:var(--font-display); font-weight:900; letter-spacing:-.05em; line-height:.86; /* "US$36,000" is the longest unbreakable token on the page — this clamp is set from it */ font-size:clamp(46px,8.2vw,148px); margin:14px 0 0; } .price-label{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--run)} .pillars{ font-family:var(--font-display); font-weight:900; font-size:clamp(17px,1.9vw,30px); letter-spacing:-.02em; margin:30px 0 0; line-height:1.2; } .pillars i{color:var(--run); font-style:normal; padding:0 6px} .notlist{display:grid; gap:6px; margin:28px 0 0; padding:0; list-style:none} .notlist li{ font-family:var(--font-display); font-weight:900; font-size:clamp(19px,2.5vw,40px); letter-spacing:-.03em; line-height:1.14; /* This list is an ASSET, not fine print — Design was explicit. It is set at display weight on purpose: a vendor naming what it will not promise is the most credible thing on the page, and shrinking it would throw that away. */ } .notlist li::before{content:'—'; color:var(--run); padding-right:14px} .deliv{border-top:1px solid var(--rule); padding:26px 0} .slab--ink .deliv{border-color:var(--rule-dark)} .deliv__g{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--run); margin:0 0 10px} .deliv h3{margin-bottom:8px} .deliv p{font-size:16px; color:var(--muted)} .deliv .qual{font-size:14.5px; color:var(--muted); border-left:2px solid var(--rule); padding-left:14px; margin-top:16px} .guests{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.4vw,22px)} /* 4:3, not square. These are GROUP photographs — guest plus LIVERUN team — and a square centre-crop cuts the people at the edges straight out of the frame. */ .guest img{border-radius:14px; width:100%; aspect-ratio:4/3; object-fit:cover; background:#1a231e} .guest b{display:block; margin-top:12px; font-size:15.5px} .guest span{display:block; font-size:13.5px; color:rgba(255,253,248,.6); line-height:1.35; margin-top:4px} .logos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,32px); align-items:center} /* A product screenshot shown as evidence: full bleed inside the wrap, framed so it reads as a captured interface rather than as decoration. */ .shot{margin:clamp(34px,3.4vw,56px) 0 0} .shot img{width:100%; border-radius:16px; border:1px solid var(--rule)} .slab--ink .shot img{border-color:var(--rule-dark)} .shot figcaption{margin-top:14px; font-size:13.5px; color:var(--muted)} /* A SQUARE key visual must not run full width: at 1200px wide it is also 1200px tall and swallows the section it is evidence for. Capped and left-aligned with the copy. */ .shot--sq img{max-width:560px} /* A PORTRAIT PHONE capture is ~1:2.17 — the same failure as .shot--sq but worse: at the 560px column width of §5 and §8 it would stand 1215px tall and bury the argument it is evidence for. Capped hard, left-aligned with the copy, and given the device's own radius so it reads as a phone rather than as a cropped panel. */ .shot--phone img{max-width:320px; border-radius:26px} /* The unit beside the price. A class, not an inline style, because the Japanese page is GENERATED and its price is split by rule: everything up to and including the last digit is the figure, the rest is the unit. "US$2,200" + "/month", 「33」 + 「万円 / 月」. Japanese sets the big numeral alone, which is the usual treatment there and the one Tomo asked for. */ .price__u{font-size:.36em; letter-spacing:-.02em} html[lang="ja"] .price__u{font-size:.34em; letter-spacing:0; margin-left:.06em} /* ---- language switch ------------------------------------------------------ A quiet text link, not a flag and not a dropdown. Flags label countries, not languages, and this site is sold in Japan to Japanese companies in English. */ .nav__lang{font-size:13px; letter-spacing:.04em; color:rgba(255,253,248,.62); text-decoration:none; margin-right:18px; white-space:nowrap} .nav__lang:hover{color:var(--white)} /* ---- Japanese typography -------------------------------------------------- The display scale is tuned for Latin: tracking down to -.05em and line-height as tight as .9. Both are actively wrong for CJK — the glyphs are full-width with taller ink, so negative tracking makes them collide and .9 leading laps the line above. Reset tracking to zero and open the leading; nothing else about the type system changes. */ html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] h4, html[lang="ja"] .statement,html[lang="ja"] .statement--xl,html[lang="ja"] .price{ /* 詰め. Latin display here runs -.035em to -.05em; kerning that hard collides CJK glyphs, but ZERO tracking leaves them looking loose and unset at display size, because every glyph carries its own full-width sidebearing. A light negative value closes the gap without touching the glyphs. Body text keeps normal tracking - this is a display-size correction, not a global one. */ letter-spacing:-.04em; line-height:1.24; /* 🔴 Do NOT set text-wrap:auto here. The Latin rule above sets `balance`, and overriding it is what left 「…インテリジェンスへ。」 dropping 「へ。」 alone onto a second line — a 泣き別れ the English never showed, because English kept balance. `balance` evens the line lengths; `auto` just fills line 1 and lets the remainder fall. Japanese needs it MORE than Latin, not less: with no spaces, a break can land anywhere, so there is nothing to stop one character orphaning. */ text-wrap:balance; text-wrap:balance} /* 🔴 word-break:auto-phrase was REMOVED, 2026-09-08. It cost two defects and bought nothing visible. (1) It raises min-content width to the longest unbreakable phrase, which pushed a .card 4px past the viewport at 375. (2) Worse: it SUPPRESSES text-wrap:balance. 「ランナーインテリジェンス。」 is a single 文節 with no legal phrase break, so the browser could only break at the last character and left 「ス。」 alone on a line. Measured: with auto-phrase [1170, 213]; without it [638, 743]. */ /* An authored ⏎ becomes its own BLOCK, not a
. text-wrap:balance cannot reach across a forced break - it balances a block - so with
the long middle segment wrapped greedily and orphaned. One block per authored line gives each segment its own balancing. Japanese only: the generator emits these, index.html keeps
. */ html[lang="ja"] .ln{display:block; text-wrap:balance} /* TITLES MUST NOT BREAK INSIDE A WORD. Japanese has no spaces, so the default is to break between any two characters - コミュニ|ティ, ラン|ナー. Acceptable in a paragraph, wrong in a headline (Tomo, 2026-09-08). keep-all forbids those breaks; the generator has already inserted at BudouX 文節 boundaries, and those are the only places left to break. overflow-wrap:anywhere is the emergency valve for a chunk wider than its column, so this cannot cause overflow the way auto-phrase did. Body copy is deliberately NOT included - mid-word breaking is fine there. */ html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] h4, html[lang="ja"] .statement,html[lang="ja"] .statement--xl{ /* break-word, NOT anywhere. `anywhere` re-permits arbitrary breaks the moment the content does not fit on one line, so it broke ランナーインテリジェン|ス。 even though a after ランナー was available. `break-word` breaks inside a word only when that word alone cannot fit its line - the true last resort. */ word-break:keep-all; overflow-wrap:break-word} html[lang="ja"] .statement--xl,html[lang="ja"] h1{letter-spacing:-.05em} html[lang="ja"] h1{line-height:1.16; /* The English H1 is three short authored segments ("Live Sports / creates / influence."); the Japanese is two, and the longer one - 特別な影響力をうむ。 - is ten full-width characters. Measured in the hero column (719px at 1440), that segment needs 684px at 72px inside a 642px column, so it wrapped and orphaned 「うむ。」 onto a third line. MEASURED ceiling is 67px; 66 leaves a margin. A first pass guessed 74 from a column reading taken before the grid had settled - the column is 642px, not 719. The hero column stops growing once .wrap hits its 1200px cap, so the ceiling is a fixed px value, not a vw one. */ font-size:clamp(28px,4.4vw,66px)} html[lang="ja"] .statement--xl{line-height:1.18} /* Lower MINIMUMS for Japanese display type. The Latin minimums (38px / 30px) are set for words that break at spaces; a Japanese chunk like 「インテリジェンスが、」 is ten full-width characters and at 38px wants 361px inside a 335px column at 375. It then hits overflow-wrap and splits mid-word - the exact thing keep-all exists to stop. Only the floor moves; the desktop cap is unchanged. */ @media (max-width:760px){ html[lang="ja"] .statement--xl{font-size:clamp(28px,7.4vw,112px)} html[lang="ja"] .statement{font-size:clamp(24px,6vw,72px)} html[lang="ja"] h2{font-size:clamp(26px,6.6vw,76px)} } html[lang="ja"] p,html[lang="ja"] li,html[lang="ja"] .lede{line-height:1.8} /* Japanese has no spaces, so a break can land anywhere; keep it off punctuation. */ html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] .statement{line-break:strict} /* The eyebrow is uppercased for Latin. Uppercase does nothing to kana and the .16em tracking just pulls the characters apart. */ html[lang="ja"] .eyebrow{text-transform:none; letter-spacing:.06em} /* Inside a two-column block the figure starts at the top of its column, so .shot's standalone top margin would drop it out of line with the copy beside it. */ .grid2 .shot{margin-top:0} .slab--ink .shot figcaption{color:rgba(255,253,248,.55)} .logos>div{text-align:center} .logos img{max-height:74px; width:auto; margin-inline:auto} .logos b{display:block; margin-top:16px; font-size:16px} .todo{ border:1px dashed var(--run); border-radius:14px; padding:20px 22px; color:var(--run); font-size:14.5px; font-weight:700; letter-spacing:.02em; } .footer{background:var(--ink); color:var(--white); padding:var(--slab-y) var(--gut) 56px; margin-top:-34px; border-radius:34px 34px 0 0; position:relative; z-index:1} .footer a{color:rgba(255,253,248,.72); text-decoration:none; display:block; padding:5px 0} .footer a:hover{color:var(--white)} .footer h4{margin:0 0 14px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--run)} .footer__mark{font-family:var(--font-display); font-weight:900; font-size:clamp(30px,4vw,58px); letter-spacing:-.03em} /* ---------- adaptation. Desktop is the composition; these are the adaptations. --- */ @media (max-width:1080px){ .hero__grid{grid-template-columns:1fr; gap:34px} .grid4,.grid5,.guests{grid-template-columns:repeat(2,minmax(0,1fr))} .nav__links{display:none} } @media (max-width:760px){ body{font-size:16px} .grid2,.grid3,.logos,.compare{grid-template-columns:1fr} .grid5{grid-template-columns:repeat(2,minmax(0,1fr))} .compare>div+div{border-left:0; border-top:1px solid var(--rule)} .hero{position:static} /* a sticky hero on a short viewport traps the page */ /* Stacked, so the arc never wraps leaving a dangling arrow at the end of a line. */ .hero__arc{flex-direction:column; align-items:flex-start; gap:4px} .hero__arc i{display:inline-block; transform:rotate(90deg); line-height:1} .slab{margin-top:-24px; border-radius:24px 24px 0 0} } /* ---- legal pages (/terms, /ja/terms) -------------------------------------- Body type only. The display face is a per-build SUBSET generated from page source, so setting 21 legal headings - half of them Japanese - in var(--font-display) would pull hundreds of kanji into a webfont every visitor downloads, to render headings nobody reads for pleasure. System stack costs zero bytes and is the right voice for terms anyway. */ .legal-page{background:var(--paper); color:var(--ink)} .legal{max-width:74ch; margin:0 auto; padding:clamp(28px,6vw,72px) var(--gut) clamp(60px,8vw,120px)} .legal h1{font-family:var(--font-body); font-weight:800; letter-spacing:-.01em; font-size:clamp(26px,3.2vw,40px); line-height:1.25; margin:0 0 8px} .legal__c{font-family:var(--font-body); font-weight:700; letter-spacing:0; font-size:clamp(17px,1.5vw,21px); line-height:1.4; margin:38px 0 10px; padding-top:20px; border-top:1px solid var(--rule)} .legal p{margin:0 0 14px; line-height:1.75; color:var(--ink)} .legal ul{margin:0 0 16px; padding-left:1.25em} .legal li{margin:0 0 6px; line-height:1.7} .legal strong{font-weight:700} html[lang="ja"] .legal p,html[lang="ja"] .legal li{line-height:1.95} html[lang="ja"] .legal h1,html[lang="ja"] .legal__c{letter-spacing:0} /* The legal pages carry a stripped nav: mark, language switch, way back. */ .legal-page .nav{position:static; background:var(--ink)} .legal-page .footer{margin-top:0}