/* Kern Society · style.css
   Palette: Paper #EFEBE3, Ink #0E0E0E, Signal #FF3B1A.
   Signal text only sits on Ink (5.4:1). On Paper, Signal is a surface or decoration only. */

:root {
  --paper: #EFEBE3;
  --ink: #0E0E0E;
  --signal: #FF3B1A;
  --fg: var(--ink);
  --bg: var(--paper);
  --pad: clamp(16px, 2.2vw, 40px);
  --gap: clamp(12px, 1.4vw, 24px);
  --nav-h: 64px;
  --f-elastik: "Roboto Flex", "Arial Narrow", Arial, sans-serif;
  --f-morrow: "Fraunces", Georgia, "Times New Roman", serif;
  --f-relay: "Recursive", ui-monospace, Consolas, "Courier New", monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}
@media (max-width: 767.98px) { :root { --nav-h: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-elastik);
  font-size: clamp(16px, .3vw + 14.6px, 19px);
  line-height: 1.45;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; border-radius: 0; }
p, h1, h2, h3, ul, figure, fieldset, legend { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
::selection { background: var(--signal); color: var(--ink); }

:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mono, .label {
  font-family: var(--f-relay);
  font-variation-settings: "MONO" 1, "CASL" 0, "CRSV" 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 460;
  letter-spacing: 0;
}
.f-elastik { font-family: var(--f-elastik); }
.f-morrow { font-family: var(--f-morrow); font-variation-settings: "SOFT" 100, "WONK" 1; }
.f-relay { font-family: var(--f-relay); font-variation-settings: "MONO" 1, "CASL" 1; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 46px; padding: 12px 20px;
  font-family: var(--f-relay); font-variation-settings: "MONO" 1, "CASL" 0;
  font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--fg); background: transparent; color: var(--fg);
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid:hover { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.btn--big { min-height: 58px; font-size: 16px; }
.btn:disabled, .btn:disabled:hover { cursor: not-allowed; background: transparent; color: var(--fg); border-style: dashed; }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(72px, 9vw, 168px) var(--pad); border-top: 1px solid var(--ink); scroll-margin-top: var(--nav-h); }
.section--ink { --fg: var(--paper); --bg: var(--ink); background: var(--ink); color: var(--paper); }

.head { row-gap: 22px; margin-bottom: clamp(48px, 6vw, 104px); }
.head__label { grid-column: 1 / 4; padding-top: .5em; }
.head__title {
  grid-column: 4 / 13;
  font-size: clamp(46px, 7.4vw, 136px); line-height: .86;
  font-weight: 800; font-stretch: 62%; letter-spacing: -.015em;
  text-wrap: balance;
}
.head__intro { grid-column: 4 / 10; font-size: clamp(18px, .7vw + 13px, 24px); line-height: 1.38; max-width: 36em; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h); display: flex; align-items: center; gap: var(--gap);
  padding: 0 var(--pad); background: var(--paper); border-bottom: 1px solid var(--ink);
}
.nav__logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; padding: 6px 0; color: var(--ink); text-decoration: none; }
/* Logo A, "negative kern": Roboto Flex outlines, the S kerned into the K with the overlap in Signal.
   Hover kerns the S out to a standard gap and snaps it back (main.js initLogo). */
.logo { display: block; width: auto; max-width: 100%; height: 26.5px; overflow: visible; }
.logo__ink { fill: currentColor; }
.logo__signal { fill: var(--signal); }
.logo.is-playing .logo__s { animation: logo-kern 1.05s var(--ease) both; }
@keyframes logo-kern {
  0% { transform: translateX(0); }
  34%, 56% { transform: translateX(24px); }
  80% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .logo.is-playing .logo__s { animation: none; } }
.nav__toggle { display: none; }
.nav__panel { margin-left: auto; display: flex; align-items: center; gap: clamp(20px, 3vw, 52px); }
.nav__links { display: flex; gap: clamp(18px, 2.4vw, 44px); }
.nav__links a {
  position: relative; padding: 8px 0; text-decoration: none;
  font-family: var(--f-relay); font-variation-settings: "MONO" 1, "CASL" 0; font-size: 14px; font-weight: 500;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; background: var(--signal);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { min-height: 40px; padding: 10px 16px; }

/* ---------- Hero ---------- */
/* The hero is as tall as its content: meta, a compact tagline row, the ruler and the wordmark.
   The wordmark is sized by JS to fill the column (cap height capped at 45% of the viewport),
   so the Signal ticker lands inside the first screen instead of an empty band. */
.hero {
  display: flex; flex-direction: column;
  padding: 0 var(--pad);
  overflow-x: clip;
  container-type: inline-size;
}
.hero__meta { order: 0; display: flex; justify-content: space-between; gap: var(--gap); padding: 14px 0; border-bottom: 1px solid var(--ink); }
.hero__meta p { white-space: nowrap; }
.hero__readout { min-width: 24ch; text-align: center; font-variant-numeric: tabular-nums; white-space: pre; }
.hero__body {
  order: 1;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  grid-template-rows: auto auto; row-gap: 12px;
  padding: clamp(24px, 4.4vh, 52px) 0 clamp(18px, 3vh, 36px);
}
.hero__tagline {
  grid-column: 1 / 9; grid-row: 1 / 3; align-self: end;
  font-size: clamp(30px, 3.9vw, 68px); line-height: .96;
  font-weight: 500; font-stretch: 84%; letter-spacing: -.02em;
  text-wrap: balance;
  height: 2lh; /* fixed line count, so a font swap can never change the hero's height */
}
.hero__cta { grid-column: 9 / 13; grid-row: 1; justify-self: end; align-self: start; }
.hero__scroll { grid-column: 9 / 13; grid-row: 2; justify-self: end; align-self: end; }
.hero__ruler {
  order: 2; position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  height: 14px; margin-bottom: clamp(14px, 1.6vw, 28px);
}
.hero__ruler::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--ink); }
.hero__ruler span { position: relative; border-left: 1px solid var(--ink); }
.hero__ruler span:nth-of-type(12) { border-right: 1px solid var(--ink); }
.hero__ruler span::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 6px; border-left: 1px solid var(--ink); }
.hero__marker {
  position: absolute; left: 0; bottom: 0; width: 4px; height: 26px; margin-left: -2px;
  background: var(--signal); opacity: 0; transition: opacity .3s;
}
.hero__marker.is-on { opacity: 1; }
/* The wordmark's box is reserved in CSS before fonts or JS arrive, with the same formula JS fits with:
   "KERN SOCIETY" is 3.0294em wide at wght 600 / wdth 25, and the cap height (0.719em) stays within 45% of
   the viewport. The wordmark sits inside, anchored to the bottom, so its final size never moves the page. */
.hero__title {
  order: 3; position: relative;
  height: calc(min(100cqi * .998 / 3.0294, 45svh / .719) * .74);
  margin-bottom: clamp(16px, 2vw, 36px);
}

.wm {
  display: block; position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--f-elastik);
  font-weight: 600; font-variation-settings: "wght" 600, "wdth" 25, "opsz" 144;
  font-size: min(calc(100cqi * .998 / 3.0294), calc(45svh / .719));
  line-height: .74; height: .74em;
  white-space: nowrap; color: var(--ink);
  user-select: none; -webkit-user-select: none;
}
/* Static fits are shorter than the reserved box (it is sized for the condensed live cut): hang them from the
   ruler so the line stays in the first view instead of sinking to the bottom of an empty box. */
.wm.is-static { top: 0; bottom: auto; font-variation-settings: "wght" 600; }
.wm.uses-fallback { font-family: "Arial Narrow", Arial, sans-serif; }
html.menu-open { overflow: hidden; }
.wm__l { line-height: .74; }
/* With JS the wordmark waits for its fitted layout and is revealed with opacity only (no layout change).
   The CSS failsafe only matters if the script itself fails; once main.js runs it owns the reveal. */
.js .wm { opacity: 0; transition: opacity .4s var(--ease); animation: wm-failsafe 1ms 8s forwards; }
.hero-js .wm { animation: none; }
.js .wm.is-ready { opacity: 1; animation: none; }
@keyframes wm-failsafe { to { opacity: 1; } }

/* An engine that moves advances for the width axis without redrawing the outlines (detected by widthAxisRenders
   in main.js where canvas can measure it): use each font's default instance everywhere, so drawn glyphs and
   their advances agree and letters cannot overlap. */
html.no-axes body *:not([data-axis-probe]) { font-variation-settings: normal !important; font-stretch: normal !important; font-optical-sizing: none !important; }
html.no-axes .ctl--axes { display: none; }
.wm.is-live .wm__line { display: contents; }
.wm.is-live .wm__l { position: absolute; left: 0; top: 0; will-change: transform; }

/* ---------- Ticker ---------- */
.ticker { overflow: hidden; background: var(--signal); color: var(--ink); border-top: 1px solid var(--ink); }
.ticker__track { display: flex; width: max-content; font-variation-settings: "wght" 820, "wdth" 100; }
.ticker__item {
  flex: none; padding: .1em .32em 0 0;
  font-size: clamp(44px, 7.2vw, 136px); line-height: 1; font-weight: 820;
  white-space: pre; letter-spacing: -.01em;
}

/* ---------- Manifesto ---------- */
.manifesto { border-top: 0; }
.manifesto .grid { row-gap: 28px; }
.manifesto__label { grid-column: 1 / 4; padding-top: .8em; }
.manifesto__body {
  grid-column: 4 / 13;
  font-size: clamp(32px, 4.7vw, 90px); line-height: 1.02;
  font-weight: 500; letter-spacing: -.022em; text-wrap: pretty;
}
.manifesto__body .mw { display: inline !important; position: static !important; }
/* On tall screens the manifesto's first line is inside the first view. Until the web fonts settle it stays
   invisible, so their reflow (and the word split) is never a visible shift. The CSS failsafe (8s) is only for a
   script that never runs: on slow networks main.js waits for the CDN scripts, and must not be pre-empted. */
.js .manifesto__body { visibility: hidden; animation: vis-failsafe 1ms 8s forwards; }
.fonts-settled .manifesto__body { visibility: visible; animation: none; }
@keyframes vis-failsafe { to { visibility: visible; } }
.kw {
  font-family: var(--f-morrow); font-style: italic; font-weight: 420;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--signal); letter-spacing: -.01em;
}

/* ---------- Typefaces ---------- */
.cards__hint { margin-bottom: 14px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.card {
  --fg: var(--ink); --bg: var(--paper);
  position: relative; display: flex; flex-direction: column;
  min-height: clamp(440px, 44vw, 700px); padding: clamp(16px, 1.6vw, 28px);
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  background: var(--paper); color: var(--ink);
  container-type: inline-size; cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.card.is-selected { --fg: var(--paper); --bg: var(--ink); background: var(--ink); color: var(--paper); }
.card:has(.card__btn:focus-visible) { outline: 2px solid var(--fg); outline-offset: -10px; }
.card__top { display: flex; justify-content: flex-end; }
.card__specimen {
  flex: 1; display: flex; align-items: center;
  font-size: calc(100cqi / var(--spec-k, 5)); line-height: 1;
  white-space: nowrap; padding: .15em 0;
}
.card.is-selected .card__specimen { color: var(--signal); }
.card[data-font="elastik"] .card__specimen { --spec-k: 4.8; font-family: var(--f-elastik); font-variation-settings: "wght" 800, "wdth" 100, "opsz" 144, "slnt" 0, "GRAD" 0; }
.card[data-font="morrow"] .card__specimen { --spec-k: 3.7; font-family: var(--f-morrow); font-variation-settings: "wght" 600, "opsz" 144, "SOFT" 100, "WONK" 1; }
.card[data-font="relay"] .card__specimen { --spec-k: 5.25; font-family: var(--f-relay); font-variation-settings: "wght" 800, "slnt" 0, "CASL" 1, "CRSV" .5, "MONO" 0; }
.card__foot { display: grid; gap: 14px; }
.card__name { font-size: clamp(24px, 2.1vw, 36px); line-height: 1.05; }
.card__btn { text-align: left; line-height: inherit; font: inherit; }
.card__btn::after { content: ""; position: absolute; inset: 0; }
.card[data-font="elastik"] .card__name { font-family: var(--f-elastik); font-weight: 750; font-stretch: 125%; }
.card[data-font="morrow"] .card__name { font-family: var(--f-morrow); font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 1; }
.card[data-font="relay"] .card__name { font-family: var(--f-relay); font-weight: 700; font-variation-settings: "MONO" 1, "CASL" 1; }
.card__desc { font-size: 17px; line-height: 1.38; max-width: 30ch; }
.card__axes { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; border-top: 1px solid var(--fg); }
.card__axes li { padding: 3px 7px; border: 1px solid var(--fg); transition: background-color .2s, color .2s, border-color .2s; }
.card__axes li.is-active { background: var(--signal); border-color: var(--signal); color: var(--ink); }

.inspector {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px;
  margin-top: clamp(64px, 8vw, 136px);
}
.inspector__head {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}
.inspector__title { font-size: clamp(30px, 3.4vw, 60px); line-height: .95; font-weight: 750; font-stretch: 70%; letter-spacing: -.01em; }
.hint--touch { display: none; }
@media (hover: none) { .hint--pointer { display: none; } .hint--touch { display: block; } }
.inspector__preview { grid-column: 1 / 6; position: relative; min-height: 340px; border: 1px solid var(--ink); }
.inspector__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.metrics { position: absolute; inset: 0; pointer-events: none; }
.metrics li { position: absolute; left: 10px; top: 0; padding-bottom: 3px; font-size: 11px; transform: translateY(-100%); visibility: hidden; }
.metrics.is-ready li { visibility: visible; }
.metrics li.is-right { left: auto; right: 10px; }
.metrics li.is-below { padding: 4px 0 0; transform: none; }
.glyphs {
  grid-column: 6 / 13; align-self: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  border-top: 1px solid var(--ink); border-left: 1px solid var(--ink);
}
.glyph {
  --fg: var(--ink);
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: clamp(22px, 1.8vw, 30px); line-height: 1;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  font-variation-settings: normal; font-weight: 400;
}
.glyph:hover, .glyph.is-active { --fg: var(--paper); background: var(--ink); color: var(--paper); }
.glyph:focus-visible { outline-offset: -5px; }
.inspector[data-font="elastik"] .glyph { font-family: var(--f-elastik); }
.inspector[data-font="morrow"] .glyph { font-family: var(--f-morrow); }
.inspector[data-font="relay"] .glyph { font-family: var(--f-relay); }

/* ---------- Tester ---------- */
.tester .head { margin-bottom: clamp(32px, 4vw, 64px); }
/* Secondary heading: same scale as "Glyphs under the loupe", so the editable sample is the star. */
.tester .head__title { font-size: clamp(30px, 3.4vw, 60px); line-height: .95; font-weight: 750; font-stretch: 70%; letter-spacing: -.01em; }
.tester__stage { padding: clamp(20px, 3vw, 48px) 0; border-top: 1px solid var(--paper); border-bottom: 1px solid var(--paper); }
.tester__input {
  display: block; width: 100%; margin: 0; padding: 0;
  resize: none; overflow: hidden; border: 0; background: transparent;
  color: var(--paper); caret-color: var(--signal);
  font-family: var(--f-elastik); font-size: clamp(48px, 8.4vw, 120px); line-height: 1.04; letter-spacing: -.01em;
  font-variation-settings: "wght" 700, "wdth" 100, "opsz" 144;
}
.tester__input:focus-visible { outline-offset: 10px; }
.tester__stage[data-font="morrow"] .tester__input { font-family: var(--f-morrow); font-variation-settings: "wght" 400, "opsz" 144, "SOFT" 0, "WONK" 0; }
.tester__stage[data-font="relay"] .tester__input { font-family: var(--f-relay); font-variation-settings: "wght" 400, "slnt" 0, "CASL" 0, "CRSV" .5, "MONO" 0; }
.tester__toggle { display: none; margin-top: 20px; }
.tester__controls {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px;
  padding-top: 32px;
}
.ctl--fonts { grid-column: 1 / 6; }
.ctl--size { grid-column: 6 / 9; }
.ctl--presets { grid-column: 9 / 13; }
.ctl--axes {
  grid-column: 1 / -1; order: 4;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 22px;
  padding-top: 26px; border-top: 1px solid var(--paper);
}
.ctl--axes:empty { display: none; }
.seg { display: flex; flex-wrap: wrap; margin-top: 12px; }
.seg__btn {
  position: relative; min-height: 46px; padding: 10px 16px; margin: 0 -1px -1px 0;
  border: 1px solid var(--fg); font-size: 17px; line-height: 1;
  transition: background-color .18s, color .18s;
}
.ctl--presets .seg__btn { font-family: var(--f-relay); font-variation-settings: "MONO" 1, "CASL" 0; font-size: 14px; font-weight: 600; }
.seg__btn:hover { background: var(--signal); color: var(--ink); }
.seg__btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.seg__btn:focus-visible { z-index: 1; }
.tester__reset { margin-top: 12px; }
.ctl--presets { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 20px; }
.ctl--presets .label { flex-basis: 100%; }
.slider { display: grid; gap: 8px; }
.slider__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.slider__val { font-variant-numeric: tabular-nums; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 30px; margin: 0; background: transparent; color: inherit; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: currentColor; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 30px; margin-top: -14.5px; background: var(--signal); border: 0; border-radius: 0; }
input[type="range"]::-moz-range-track { height: 1px; background: currentColor; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 30px; background: var(--signal); border: 0; border-radius: 0; }
input[type="range"]:active::-webkit-slider-thumb { background: var(--paper); }

/* ---------- In use ---------- */
.inuse { --mock-h: clamp(360px, 60vh, 620px); padding-bottom: clamp(56px, 7vw, 120px); overflow-x: clip; }
.head--inline { align-items: end; margin-bottom: clamp(28px, 4vw, 56px); }
.head--inline .head__label { align-self: start; } /* labels sit at the top of every section head */
.head--inline .head__title { grid-column: 4 / 10; font-size: clamp(42px, 5.4vw, 100px); }
.head--inline .head__intro { grid-column: 10 / 13; font-size: 17px; }
.inuse__viewport {
  margin: 0 calc(-1 * var(--pad)); padding: 4px var(--pad) 18px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-color: var(--ink) transparent; scrollbar-width: thin;
}
.inuse__viewport:focus-visible { outline-offset: -3px; }
.inuse__track { display: flex; gap: var(--gap); width: max-content; }
.inuse.is-pinned { height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; padding-block: clamp(24px, 4vh, 56px); }
.inuse.is-pinned .inuse__viewport { flex: 1 1 auto; min-height: 0; overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
.inuse.is-pinned .inuse__track { will-change: transform; }
.mock { flex: none; scroll-snap-align: start; }
.mock__fig { display: grid; gap: 12px; }
/* The container is .mock__art; its inner .art carries padding so cqi units resolve against the mock. */
.mock__art {
  position: relative; overflow: hidden;
  height: var(--mock-h); aspect-ratio: var(--ar, .75);
  container-type: size;
}
.art { position: absolute; inset: 0; }
.mock--poster { --ar: .72; }
.mock--mag { --ar: .76; }
.mock--bottle { --ar: .9; }
.mock--weather { --ar: .62; }
.mock--sign { --ar: 1.22; }
.mock__cap { max-width: 36ch; font-size: 12px; }

.art-poster { display: flex; flex-direction: column; padding: 6cqi; background: var(--signal); color: var(--ink); font-family: var(--f-elastik); }
.poster__title { font-size: 16.6cqi; line-height: .8; letter-spacing: -.035em; font-variation-settings: "wght" 1000, "wdth" 151, "opsz" 144; }
.poster__title span { display: block; }
.poster__year { text-align: right; font-variation-settings: "wght" 1000, "wdth" 25, "opsz" 144; font-size: 1.9em; line-height: .78; letter-spacing: -.02em; margin-top: .06em; }
.poster__lineup { margin-top: auto; border-top: 2px solid var(--ink); }
.poster__lineup li { padding: 1.1cqi 0 .8cqi; border-bottom: 1px solid var(--ink); font-size: 5.3cqi; line-height: 1; text-transform: uppercase; font-variation-settings: "wght" 760, "wdth" 151, "opsz" 36; }
.poster__details { margin-top: 3cqi; font-family: var(--f-relay); font-variation-settings: "MONO" 1, "wght" 600; font-size: max(10px, 3.3cqi); line-height: 1.2; }

.art-mag { display: flex; flex-direction: column; padding: 5cqi; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); font-family: var(--f-morrow); }
.mag__title { font-size: 13.6cqi; line-height: .84; letter-spacing: -.05em; white-space: nowrap; font-variation-settings: "wght" 900, "opsz" 144, "SOFT" 100, "WONK" 1; }
.mag__bar { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2.6cqi; padding: 1.4cqi 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: max(10px, 3.8cqi); font-variation-settings: "wght" 600, "opsz" 24, "SOFT" 100, "WONK" 1; }
.mag__issue span { font-style: italic; }
.mag__lines { flex: 1; min-height: 0; margin-top: 4cqi; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 4cqi; }
.mag__lines li { padding-top: 2.2cqi; border-top: 1px solid var(--ink); font-size: 5.6cqi; line-height: 1.04; font-variation-settings: "wght" 640, "opsz" 48, "SOFT" 100, "WONK" 1; }
.mag__lines li:first-child {
  grid-column: 1 / -1; display: flex; align-items: flex-end; padding: 5cqi; border-top: 0;
  background: var(--signal); font-size: 12.6cqi; line-height: .88; font-style: italic; letter-spacing: -.025em;
  font-variation-settings: "wght" 330, "opsz" 144, "SOFT" 100, "WONK" 1;
}

.art-bottle { background: var(--paper); border: 1px solid var(--ink); }
.crop { position: absolute; width: 6cqi; height: 6cqi; border: 0 solid var(--ink); }
.crop--tl { top: 3cqi; left: 3cqi; border-top-width: 1px; border-left-width: 1px; }
.crop--tr { top: 3cqi; right: 3cqi; border-top-width: 1px; border-right-width: 1px; }
.crop--bl { bottom: 3cqi; left: 3cqi; border-bottom-width: 1px; border-left-width: 1px; }
.crop--br { bottom: 3cqi; right: 3cqi; border-bottom-width: 1px; border-right-width: 1px; }
.label-sauce { position: absolute; inset: 11cqi; display: flex; flex-direction: column; padding: 6cqi; background: var(--ink); color: var(--paper); }
.sauce__brand { font-family: var(--f-morrow); font-size: 17cqi; line-height: .84; letter-spacing: -.03em; font-variation-settings: "wght" 800, "opsz" 144, "SOFT" 100, "WONK" 1; }
.sauce__brand span { display: block; }
.sauce__no { color: var(--signal); font-style: italic; font-variation-settings: "wght" 500, "opsz" 144, "SOFT" 100, "WONK" 1; }
.sauce__desc { margin-top: auto; padding-top: 3cqi; border-top: 1px solid var(--paper); font-family: var(--f-morrow); font-style: italic; font-size: 5.6cqi; line-height: 1.08; font-variation-settings: "wght" 400, "opsz" 36, "SOFT" 100, "WONK" 1; }
.sauce__details { margin-top: 2.6cqi; font-family: var(--f-relay); font-variation-settings: "MONO" 1, "wght" 500; font-size: max(10px, 3.2cqi); line-height: 1.2; }

.art-weather { display: grid; padding: 9cqi 10cqi; background: var(--signal); }
.phone { display: flex; flex-direction: column; min-height: 0; padding: 9cqi 8cqi 7cqi; background: var(--ink); color: var(--paper); font-family: var(--f-relay); }
.wx__city { font-size: 7.4cqi; line-height: 1; font-variation-settings: "wght" 700, "CASL" 1, "MONO" 0, "CRSV" .5; }
.wx__temp { margin-top: 3cqi; font-size: 38cqi; line-height: .84; letter-spacing: -.05em; font-variation-settings: "wght" 300, "CASL" 0, "MONO" 0; }
.wx__cond { margin-top: 3cqi; font-size: 6cqi; line-height: 1.1; font-variation-settings: "wght" 480, "CASL" 1, "CRSV" 1, "slnt" -15, "MONO" 0; }
.wx__days { margin-top: auto; border-top: 1px solid var(--paper); }
.wx__days li { position: relative; display: flex; justify-content: space-between; padding: 2.8cqi 0; border-bottom: 1px solid var(--paper); font-size: max(11px, 5cqi); line-height: 1; font-variation-settings: "MONO" 1, "wght" 520; }
.wx__days li::before { content: ""; position: absolute; left: 30%; top: 50%; height: 3px; margin-top: -1px; width: calc((var(--t) - 10) * 5.4%); background: var(--signal); }

.art-sign { display: grid; align-content: center; padding: 8cqi 7cqi; background: var(--paper); border: 1px solid var(--ink); }
.sign { padding: 4cqi 5cqi 5cqi; background: var(--ink); color: var(--paper); border-top: 3.2cqi solid var(--signal); font-family: var(--f-elastik); }
.sign__l1 { display: flex; align-items: center; gap: 2.6cqi; font-size: 19cqi; line-height: 1; letter-spacing: -.01em; font-variation-settings: "wght" 720, "wdth" 25, "opsz" 144; }
.sign__num { display: inline-grid; place-items: center; min-width: .92em; height: .92em; padding: 0 .1em; background: var(--signal); color: var(--ink); font-variation-settings: "wght" 900, "wdth" 40, "opsz" 144; }
.sign__l2 { margin-top: 2.4cqi; padding-top: 2.4cqi; border-top: 1px solid var(--paper); font-size: 7.2cqi; line-height: 1; font-variation-settings: "wght" 640, "wdth" 30, "opsz" 72; }
.sign__l3 { margin-top: 1.8cqi; font-size: max(11px, 4.6cqi); line-height: 1.1; font-variation-settings: "wght" 480, "wdth" 50, "opsz" 24; }

/* ---------- Licensing ---------- */
.lic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; align-items: start; }
.lic__steps { grid-column: 1 / 8; display: grid; gap: clamp(40px, 4.4vw, 72px); }
.step__legend { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.05; font-weight: 750; font-stretch: 78%; }
.step__n { flex: none; transform: translateY(-.2em); padding: 3px 8px; border: 1px solid var(--ink); font-size: 13px; }
.opts { display: grid; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.opts--fonts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opts--size { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opt {
  --fg: var(--ink); --bg: var(--paper);
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 14px;
  min-height: 72px; padding: 16px; cursor: pointer;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  transition: background-color .2s, color .2s;
}
.opt:hover { background: var(--paper); }
.opt:has(input:checked) { --fg: var(--paper); --bg: var(--ink); background: var(--ink); color: var(--paper); }
.opt input {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 22px; height: 22px; margin: 0; cursor: pointer;
  border: 1px solid var(--fg); background: transparent no-repeat center / 100% 100%;
}
.opt input[type="checkbox"]:checked {
  border-color: var(--signal); background-color: var(--signal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5 11.5l4 4 8-9' fill='none' stroke='%230E0E0E' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E");
}
.opt input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='5' y='5' width='12' height='12' fill='%23FF3B1A'/%3E%3C/svg%3E");
}
.opt__name { font-size: 20px; line-height: 1.1; }
.opts--fonts .opt__name { font-size: clamp(20px, 1.7vw, 28px); grid-column: 2 / 4; }
.opts--fonts .opt__name.f-elastik { font-weight: 750; font-stretch: 125%; }
.opts--fonts .opt__name.f-morrow { font-weight: 600; }
.opts--fonts .opt__name.f-relay { font-weight: 700; }
.opt--type { grid-template-columns: auto 1fr auto; grid-template-areas: "box name price" "box desc price"; row-gap: 4px; }
.opt--type input { grid-area: box; }
.opt--type .opt__name { grid-area: name; font-size: clamp(22px, 1.9vw, 30px); font-weight: 700; font-stretch: 80%; }
.opt--type .opt__desc { grid-area: desc; font-size: 16px; line-height: 1.35; }
.opt--type .opt__price { grid-area: price; font-size: 16px; font-weight: 600; }
.opt--size .opt__name { font-size: 18px; font-weight: 600; }
.opt__factor { justify-self: end; font-size: 12px; }

.lic__summary {
  --fg: var(--paper); --bg: var(--ink);
  grid-column: 8 / 13; margin-left: var(--gap);
  position: sticky; top: calc(var(--nav-h) + 24px);
  display: grid; gap: 16px; padding: clamp(20px, 2vw, 32px);
  background: var(--ink); color: var(--paper);
  container-type: inline-size;
}
.bundle { display: none; padding: 16px 18px; background: var(--signal); color: var(--ink); }
.bundle.is-on { display: block; animation: bundle-in .45s var(--ease); }
@keyframes bundle-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.bundle__name { font-family: var(--f-morrow); font-style: italic; font-size: 34px; line-height: 1; font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 1; }
.bundle__note { margin-top: 6px; font-size: 14px; }
.lic__total-label { margin-top: 8px; }
.lic__total {
  font-family: var(--f-relay); font-variation-settings: "MONO" 1, "CASL" 0;
  font-size: min(150px, 28cqi); line-height: .86; font-weight: 800; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; color: var(--signal); white-space: nowrap;
}
.lic__static { display: none; }
.lic__hint { font-size: 14px; }
.lic__hint[hidden] { display: none; }
.lic__actions { display: grid; gap: 10px; margin-top: 8px; }

/* ---------- Footer ---------- */
.footer { --fg: var(--paper); --bg: var(--ink); padding: clamp(72px, 8vw, 150px) var(--pad) 0; background: var(--ink); color: var(--paper); overflow: clip; container-type: inline-size; }
.footer__top { row-gap: 32px; align-items: end; }
.footer__news { grid-column: 1 / 7; }
.footer__heading { font-size: clamp(40px, 5.2vw, 96px); line-height: .88; font-weight: 800; font-stretch: 62%; letter-spacing: -.01em; }
.footer__body { margin-top: 18px; max-width: 38ch; }
.nl { grid-column: 8 / 13; }
.nl__row { display: flex; }
.nl__input {
  flex: 1; min-width: 0; min-height: 58px; padding: 0 16px;
  border: 1px solid var(--paper); border-right: 0; border-radius: 0; background: transparent; color: var(--paper);
  font-size: 18px;
}
.nl__input::placeholder { color: var(--paper); opacity: .62; }
.nl__input[aria-invalid="true"] { border-color: var(--signal); }
.nl__btn { min-height: 58px; }
.nl__msg { min-height: 1.4em; margin-top: 12px; font-size: 14px; }
/* Full content width at rest (wdth 120); scroll velocity stretches it to 151 and the S runs off the
   right edge, while the bottom of both letters bleeds off the page for a cropped-poster finish. */
.footer__ks {
  --ks-w: 120;
  display: flex; justify-content: flex-start;
  /* Optical alignment: the K's side bearing grows with wdth (~.037em at 110, ~.076em at 151), so the offset follows the axis. */
  margin: clamp(36px, 4.4vw, 72px) 0 -.17em calc(0.0676em - var(--ks-w) * 0.000951em);
  font-size: calc(100cqi / 1.425); line-height: .74; height: .74em;
  font-weight: 900; font-variation-settings: "wght" 900, "wdth" var(--ks-w), "opsz" 144;
  color: var(--signal); letter-spacing: 0; user-select: none; -webkit-user-select: none;
}
.footer__ks span { line-height: .74; }
.footer__ks.is-static { margin-left: 0; font-variation-settings: "wght" 900; }
.footer__credits { row-gap: 10px; margin-top: clamp(56px, 7vw, 120px); padding-top: 18px; border-top: 1px solid var(--paper); font-size: 12px; }
.credits__by { grid-column: 10 / 13; justify-self: end; }
.credits__by a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.credits__by a:hover { text-decoration-color: var(--signal); text-decoration-thickness: 3px; }

/* ---------- Modals ---------- */
.modal {
  --fg: var(--ink); --bg: var(--paper);
  width: min(580px, calc(100vw - 32px)); max-height: calc(100svh - 32px);
  padding: 0 clamp(20px, 3vw, 36px) clamp(22px, 3vw, 36px);
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
}
.modal::backdrop { background: rgba(14, 14, 14, .8); }
.modal[open] { animation: modal-in .3s var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px); } }
.modal__bar { height: 14px; margin: 0 calc(-1 * clamp(20px, 3vw, 36px)) clamp(22px, 3vw, 34px); background: var(--signal); }
.modal__title { font-size: clamp(34px, 4.4vw, 56px); line-height: .92; font-weight: 800; font-stretch: 70%; letter-spacing: -.01em; }
.modal__body { margin-top: 16px; font-size: 18px; line-height: 1.4; }
.trial { margin-top: 22px; border-top: 1px solid var(--ink); }
.trial li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink); }
.trial__ks { font-size: 22px; line-height: 1.1; }
.trial__ks.f-elastik { font-weight: 750; font-stretch: 125%; }
.trial__link { padding: 8px 0; font-size: 14px; font-weight: 600; text-underline-offset: 4px; }
.trial__link:hover { text-decoration-color: var(--signal); text-decoration-thickness: 3px; }
.modal__close { margin-top: 26px; }

/* ---------- Loader: first view of a session ----------
   Shown only while the inline head script's html.is-loading is set, so it can never cover the page without
   JavaScript. Two copies of the KS mark: the Paper one sits inside the Ink curtain and is clipped with it, the Ink
   one sits underneath. As the curtain withdraws, the mark changes colour exactly at its edge. */
.loader { display: none; }
.is-loading .loader { display: block; position: fixed; inset: 0; z-index: 1000; touch-action: none; --mark-w: clamp(220px, 34vw, 640px); --travel: 158.8px; }
/* Scrolling is held by main.js blocking wheel and scroll keys (touch: touch-action above), never by overflow, so the
   scrollbar and the layout stay exactly as they are when the page is released. Lenis's stopped state clips overflow. */
html.lenis.is-loading.lenis-stopped { overflow: visible; }
.loader__under, .loader__curtain { position: absolute; inset: 0; }
.loader__curtain { background: var(--ink); }
.loader__mark {
  position: absolute; left: 50%; top: 50%; display: block;
  width: var(--mark-w); height: auto; overflow: visible;
  margin: calc(var(--mark-w) * -.29794) 0 0 calc(var(--mark-w) * -.5); /* centred without a transform */
  transform-origin: 0 0;
}
.loader__mark--paper .loader__glyph { fill: var(--paper); }
.loader__mark--ink .loader__glyph { fill: var(--ink); }
.loader__overlap { fill: var(--signal); }
/* --u: 1 = K and S a letter apart, 0 = kerned into the logo. The pair stays centred while S travels. */
.loader__pair { transform: translateX(calc(var(--u, 1) * var(--travel) * -.5)); }
.loader__s { transform: translateX(calc(var(--u, 1) * var(--travel))); }
/* Anchored at its left edge, so the digits changing (or the mono face arriving) never moves the text's start. */
.loader__count {
  position: absolute; left: var(--pad); bottom: clamp(16px, 2.2vw, 32px); margin: 0;
  color: var(--paper); font-size: clamp(13px, .4vw + 11px, 16px); font-variant-numeric: tabular-nums;
}
/* Only the logo's KS part waits for the flying mark (it ends at 15.1% of the width, the wordmark starts at 19.4%). */
.is-loading:not(.logo-landed) .nav__logo .logo { clip-path: inset(-25% -2% -25% 17.2%); }
@media (max-width: 767.98px) {
  .is-loading .loader { --mark-w: clamp(180px, 62vw, 360px); --travel: 104px; } /* K…S still fits a 375px screen */
}

/* ---------- No JS / font failure ---------- */
.no-js .hero__readout, .no-js .hero__marker, .no-js .ctl--axes { display: none; }
.no-js .tester__input { field-sizing: content; min-height: 2.1em; }
.no-js .inspector__canvas { display: none; }
.no-js .metrics { position: static; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 14px; }
.no-js .metrics li { position: static; transform: none; visibility: visible; }
.no-js .bundle { display: block; }
.no-js .lic__static { display: block; font-size: 15px; }
.no-js .lic__total, .no-js .lic__total-label, .no-js .lic__actions, .no-js .lic__hint { display: none; }
.fonts-failed .ctl--axes, .fonts-failed .metrics { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1099.98px) {
  .head__label { grid-column: 1 / -1; padding-top: 0; }
  .head__title, .head--inline .head__title { grid-column: 1 / -1; }
  .head__intro, .head--inline .head__intro { grid-column: 1 / 10; }
  .manifesto__label { grid-column: 1 / -1; padding-top: 0; }
  .manifesto__body { grid-column: 1 / -1; }
  .inspector__preview, .glyphs { grid-column: 1 / -1; }
  .inspector__preview { height: clamp(300px, 46vw, 440px); }
  .ctl--fonts { grid-column: 1 / 8; }
  .ctl--size { grid-column: 8 / 13; }
  .ctl--presets { grid-column: 1 / -1; }
  .ctl--axes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lic__steps, .lic__summary { grid-column: 1 / -1; }
  .lic__summary { position: relative; top: 0; margin-left: 0; }
  .lic__total { font-size: min(150px, 22cqi); }
  .footer__news, .nl { grid-column: 1 / -1; }
  .credits__by { grid-column: 7 / 13; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  .logo { height: 20px; }
  .js .nav__toggle {
    display: inline-flex; align-items: center; margin-left: auto;
    min-height: 40px; padding: 8px 14px; border: 1px solid var(--ink); font-size: 14px; font-weight: 600;
  }
  .js .nav__panel {
    --fg: var(--paper); --bg: var(--ink);
    position: fixed; top: var(--nav-h); left: 0; right: 0; height: calc(100dvh - var(--nav-h));
    display: none; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 32px;
    margin: 0; padding: 20px var(--pad) 32px; overflow-y: auto;
    background: var(--ink); color: var(--paper);
  }
  .js .nav__panel.is-open { display: flex; }
  .js .nav__links { flex-direction: column; gap: 0; }
  .js .nav__links a {
    padding: 12px 0 10px; border-bottom: 1px solid var(--paper);
    font-family: var(--f-elastik); font-variation-settings: normal;
    font-size: clamp(52px, 17vw, 88px); line-height: .9; font-weight: 800; font-stretch: 62%;
  }
  .js .nav__links a::after { display: none; }
  .js .nav__cta { min-height: 56px; font-size: 16px; }
  .no-js .nav { height: auto; flex-wrap: wrap; padding-block: 10px; }
  .no-js .nav__panel { width: 100%; margin: 0; flex-wrap: wrap; justify-content: space-between; }

  .hero__readout { display: none; }
  .hero__body { grid-template-rows: auto auto; row-gap: 18px; padding: 22px 0 18px; }
  .hero__tagline { grid-column: 1 / -1; grid-row: 1; font-size: clamp(32px, 10vw, 48px); height: 3lh; }
  .hero__cta { grid-column: 1 / 8; grid-row: 2; justify-self: start; align-self: center; }
  .hero__scroll { grid-column: 8 / 13; grid-row: 2; justify-self: end; align-self: center; }
  /* Two lines, each fitted at wdth 25: KERN is 1.1111em, SOCIETY 1.7742em; second line adds a .1em gap. */
  .hero__title { height: calc(100cqi * .998 * (.74 / 1.1111 + .84 / 1.7742)); }
  .wm { height: auto; font-size: 16px; }
  .wm__line { display: block; height: .74em; position: relative; }
  .wm .wm__line:first-child { font-size: calc(100cqi * .998 / 1.1111); }
  .wm .wm__line:last-child { font-size: calc(100cqi * .998 / 1.7742); margin-top: .1em; }
  .wm__sp { display: none; }
  .wm.is-live .wm__line { display: block; }

  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0; aspect-ratio: auto; }
  .card__specimen { min-height: 42cqi; }
  .glyphs { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
  .glyph { font-size: 22px; }
  .inspector__preview { height: 300px; min-height: 0; }

  .js .tester__toggle { display: inline-flex; }
  .js .tester__controls:not(.is-open) { display: none; }
  .tester__controls { row-gap: 26px; }
  .ctl--fonts, .ctl--size, .ctl--presets { grid-column: 1 / -1; }
  .ctl--axes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg__btn { font-size: 15px; padding: 10px 12px; }

  .inuse { --mock-h: auto; }
  .head--inline .head__intro { grid-column: 1 / -1; }
  .mock__art { height: auto; width: min(80vw, 420px); }
  .mock--sign .mock__art { width: min(86vw, 460px); }

  .opts--fonts, .opts--types { grid-template-columns: 1fr; }
  .opts--size { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt--type .opt__desc { font-size: 15px; }
  .lic__total { font-size: min(120px, 27cqi); }

  .nl__row { flex-direction: column; }
  .nl__input { border-right: 1px solid var(--paper); border-bottom: 0; }
  .credits__by { grid-column: 1 / -1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* transition: none (not a tiny duration): a near-zero transition on `all` would make JS read stale sizes. */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}