:root {
  --paper: #ffffff;
  --ink: #121b2a;
  --soft: #4c5869;
  --line: #dde2e8;
  --blue: #b9d9eb; /* Pantone 290 C on screen */

  --c: rgb(0, 158, 226);
  --m: #e22680;
  --y: #fad400;
  --k: #121b2a;

  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* The words around the cursor get a flat band of ink behind them (main.js wraps each
   word in .w). A plain background would fill the font's whole line box and look tall,
   so the band is a gradient sized to roughly the letters' height: square corners,
   flush with the word. --hl is registered as a color so the band can fade out. */
@property --hl { syntax: "<color>"; inherits: false; initial-value: transparent; }
.w {
  --hl: transparent;
  background-image: linear-gradient(var(--hl), var(--hl));
  background-repeat: no-repeat;
  background-size: 100% 0.82em;
  background-position: 0 58%;
  transition: --hl 0.4s ease-out;
}
.w.ink-c, .w.ink-m, .w.ink-y { transition: none; }
.w.ink-c { --hl: rgba(0, 158, 226, 0.24); }
.w.ink-m { --hl: rgba(226, 38, 128, 0.20); }
.w.ink-y { --hl: rgba(250, 212, 0, 0.42); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 76rem; margin: 0 auto; padding: 0 1.25rem; }

/* Solid cover and the transition into the introduction. */
/* The cover is Pantone 290 C itself; text on it is navy ink. */
.opening { height: 100vh; height: 100svh; position: relative; display: grid; place-items: center; background: var(--blue); }
.opening-mark { display: block; width: clamp(98px, 9vw, 132px); }
.cover-link { position: absolute; right: clamp(24px, 4vw, 60px); top: 25px; color: var(--ink); font: 500 .94rem var(--sans); text-decoration: none; padding: 10px 0; border-bottom: 1px solid rgba(18, 27, 42, 0.3); transition: border-color .2s ease; }
.cover-link:hover { border-bottom-color: var(--ink); }
.cover-link span, .join span { display: inline-block; transition: transform .2s ease; }
.cover-link:hover span, .join:hover span { transform: translate(2px,-2px); }
.transition { position: fixed; inset: 0; z-index: 8; pointer-events: none; width: 100%; height: 100%; }
.skip { position: fixed; top: -6rem; left: 1rem; z-index: 12; padding: .5rem 1rem; background: white; }
.skip:focus { top: 1rem; }
#about:focus { outline: none; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; font-family: var(--sans); font-size: 0.95rem; }
.brand { font-family: var(--sans); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; text-decoration: none; }
.nav { display: flex; gap: 1.5rem; }
.nav a { color: var(--soft); text-decoration: none; }
.nav a:hover { color: var(--ink); }

.hero-body { padding: clamp(3rem, 7.5vw, 7rem) 0; }
h1 {
  margin: 0 0 1.75rem;
  max-width: 17em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(2.1rem, 1rem + 3.7vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.lede { margin: 0; max-width: 34rem; color: var(--soft); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.55; }

/* ---------- Sections: heading on the left, content on the right ---------- */
.block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4.5rem, 9vw, 7.5rem);
}
h2 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.body p { margin: 0 0 1.1rem; max-width: 36rem; }
.body p:last-child { margin-bottom: 0; }
.big { font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem); line-height: 1.3; letter-spacing: -0.01em; }
.big a { overflow-wrap: anywhere; }

/* Ink rule: four 1px lines, one per ink, multiplied. main.js pulls them into line. */
.rule { position: relative; height: 12px; }
.rule i { position: absolute; left: 0; right: 0; top: 5px; height: 1px; mix-blend-mode: multiply; }
.rule i:nth-child(1) { background: var(--c); }
.rule i:nth-child(2) { background: var(--m); }
.rule i:nth-child(3) { background: var(--y); }
.rule i:nth-child(4) { background: var(--k); }

/* ---------- Footer ---------- */
.foot { font-family: var(--sans); font-size: 0.95rem; color: var(--soft); }
.foot-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 2rem; padding: 1.75rem 0 2.5rem; }
.foot-links { display: flex; gap: 1.5rem; }
.foot a { color: var(--ink); text-decoration: none; }

/* ---------- Ink strip on the right edge ---------- */
/* Three tints that multiply to exactly 290 C; main.js sets each one's opacity from scroll. */
.inkstrip { position: fixed; top: 0; right: 0; bottom: 0; width: 6px; z-index: 10; pointer-events: none; }
.inkstrip i { position: absolute; inset: 0; mix-blend-mode: multiply; }
#strip-c { background: rgb(185, 255, 255); }
#strip-m { background: rgb(255, 217, 255); opacity: 0; }
#strip-y { background: rgb(255, 255, 235); opacity: 0; }

/* ---------- Selection: a different ink each time (main.js rotates --select) ---------- */
:root { --select: rgba(0, 158, 226, 0.28); }
::selection { background: var(--select); }

/* Sign-up band: a full field of 290 C, with a flat navy button. */
#join { background: var(--blue); }
#join .body p:not(.big) { color: #2d3d52; }
.join { display: inline-flex; gap: 1.4rem; align-items: center; margin-top: .5rem; padding: .85rem 1.3rem; font: 500 1rem var(--sans); color: #fff; background: var(--ink); text-decoration: none; transition: background .2s ease; }
.join:hover { background: #24344b; }
.invitation .block { padding-inline: 1.25rem; }
body:not(.reading) .inkstrip { opacity: 0; }
.inkstrip { transition: opacity .25s ease; }
/* ---------- Small screens ---------- */
@media (max-width: 52rem) {
  .block { grid-template-columns: minmax(0, 1fr); } /* minmax(0) so the wide table scrolls instead of widening the page */
}
@media (max-width: 40rem) {
  .nav { gap: 1rem; font-size: .85rem; }
  .inkstrip { width: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .w { transition: none; }
  .cover-link span, .join span, .inkstrip { transition: none; }
}

/* Keep fling momentum from carrying the newly formed headline offscreen. */
html { scrollbar-gutter: stable; }
html.intro-playing { overflow: hidden; }
/* While the intro plays, only the mark and its dots are on screen; the nav and the
   sections below fade in with the headline (intro.js drives --intro-rest from 0 to 1). */
.intro-playing #about .top,
.intro-playing #about .rule,
.intro-playing #about .block,
.intro-playing #about .invitation { opacity: var(--intro-rest, 0); }
.hero-body { padding-top: clamp(24px, 4vh, 40px); }