/* Repro It landing page.
   Two surfaces alternate: ink (#0B0B0C) and paper (#F2EFE8). Newsreader carries
   the display voice, IBM Plex Sans the body, IBM Plex Mono every label. */

:root {
  --ink: #0B0B0C;
  --paper: #EFEAE0;
  --cream: #F2EFE8;
  --carbon: #141416;
  --accent: #D2793F;
  --accent-deep: #C2553C;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* on ink */
  --i-line: rgba(239, 234, 224, 0.14);
  --i-rule: rgba(239, 234, 224, 0.60);
  --i-dim: rgba(239, 234, 224, 0.74);
  --i-mut: rgba(239, 234, 224, 0.66);
  --i-body: rgba(239, 234, 224, 0.78);

  /* on paper */
  --p-line: rgba(20, 20, 22, 0.12);
  --p-rule: rgba(20, 20, 22, 0.20);
  --p-dim: rgba(20, 20, 22, 0.66);
  --p-body: rgba(20, 20, 22, 0.72);

  --pad: 60px;
  --gutter: 56px;
  --nav: 89px;
}

* { box-sizing: border-box; }

/* Every section is one screen: it sizes to the viewport below the nav, and
   app.js scales its content down if the natural layout is taller than the
   space available. Snapping is proximity so scrolling never feels trapped. */
html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--nav);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

p { margin: 0; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }

.fit { transform-origin: 50% 50%; }

.mono { font-family: var(--mono); }

/* ---------------- nav ---------------- */

#nav {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 30px var(--pad);
  background: var(--ink);
  border-bottom: 1px solid var(--i-line);
}

/* Three columns, not space-between: the side groups are different widths, so
   only equal side tracks put the section links on the page's centre line. */
.nav-inner {
  max-width: calc(1440px - var(--pad) * 2);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.nav-actions { justify-self: end; }

/* The mark is set to the wordmark's cap height, not its em box, so the two
   sit on one optical line instead of the square floating above the text. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  justify-self: start;
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--paper);
}

/* The mark: two solids, the second offset by a quarter, the keyline between
   them carrying the surface colour so they never merge into one shape. */
.brand .mark { flex: none; display: block; width: 19px; height: 19px; }

.nav-links { display: flex; align-items: center; }

.nav-actions { display: flex; align-items: center; }
.nav-links { gap: 38px; }
.nav-actions { gap: 26px; }

.nav-links a, .nav-signin, .nav-cta {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--i-dim);
  transition: color 200ms ease;
}

.nav-links a:hover, .nav-signin:hover { color: var(--paper); }

/* The underline hangs outside the box so the CTA measures the same height as
   the plain link beside it and the whole bar sits on one line. */
.nav-cta {
  position: relative;
  color: var(--paper);
}

.nav-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--accent);
}

.nav-cta:hover { color: var(--accent); }

/* ---------------- hero ---------------- */

.hero {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100dvh - var(--nav));
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

/* the headline shares its band with the intro copy, so the wide top of the
   page carries type instead of empty ink */
.hero-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  padding: clamp(24px, 5vh, 64px) var(--pad) clamp(18px, 3.4vh, 40px);
}

.hero-head h1 {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(36px, min(6.4vw, 10.5vh), 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.hero-intro { padding-bottom: clamp(2px, 1vh, 10px); }

/* the second line of a two-line display headline, carried in accent */
.accent-line { color: var(--accent); }

.hero-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  border-top: 1px solid var(--i-line);
}

.hero-copy {
  border-right: 1px solid var(--i-line);
  padding: clamp(20px, 3.4vh, 36px) 36px clamp(20px, 3.4vh, 36px) var(--pad);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3.4vh, 34px);
}

.lede { font-size: clamp(15px, 1.9vh, 17px); line-height: 1.55; color: var(--i-body); }

.sub {
  margin-top: clamp(10px, 2vh, 18px);
  font-size: clamp(16px, 2vh, 17.5px);
  line-height: 1.6;
  color: var(--i-mut);
}

.hero-cta { display: flex; flex-direction: column; gap: 10px; }

/* keys the four properties the graph grows, and gives the column a floor */
.hero-legend { flex: 1 1 auto; }

.hero-legend .kicker { margin-bottom: clamp(10px, 1.8vh, 18px); color: var(--i-dim); }

.hero-legend ol { list-style: none; margin: 0; padding: 0; }

.hero-legend li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(7px, 1.4vh, 12px) 0;
  border-top: 1px solid var(--i-line);
  font-size: clamp(13px, 1.7vh, 15px);
  color: var(--i-body);
}

.hero-legend .ln {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.btn {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 18px;
  text-align: center;
  transition: opacity 180ms ease, border-color 180ms ease, color 180ms ease;
}

.btn-solid { background: var(--paper); color: var(--ink); }
.btn-solid:hover { opacity: 0.82; }

.btn-ghost { color: var(--paper); border: 1px solid rgba(239, 234, 224, 0.25); }
.btn-ghost:hover { border-color: var(--paper); }

.fineprint {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--i-dim);
  margin-top: 8px;
  line-height: 1.7;
}

.hero-graph { min-height: 0; padding: 26px var(--pad) 26px 44px; }

/* ---------------- the reproduction graph ---------------- */

.graph { display: flex; flex-direction: column; height: 100%; min-height: min(360px, 40vh); }

.graph-view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }

.graph-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
}

/* The backdrop is a 1px repeating gradient under a radial mask, sitting below
   elements that animate for most of the loop. On its own compositing layer it
   is rasterised once, instead of being re-snapped to different device pixels
   every time a node above it repaints. */
.graph-grid {
  position: absolute;
  inset: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.graph-layer { position: absolute; inset: 0; }

.graph-card {
  position: absolute;
  z-index: 5;
  background: var(--ink);
  text-align: center;
  box-shadow: 0 0 0 1px var(--i-rule);
}

.gc-kicker {
  font-size: 12.5px;
  font-family: var(--mono);
  letter-spacing: 0.2em;
  color: var(--i-dim);
  margin-bottom: 10px;
}

.gc-main { font-weight: 300; color: var(--paper); }

.gc-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  overflow: hidden;
}

.gc-chip {
  font-family: var(--mono);
  letter-spacing: 0.16em;
  padding: 4px 9px;
  color: var(--ink);
  white-space: nowrap;
}

.gc-note {
  font-family: var(--mono);
  letter-spacing: 0.04em;
  color: var(--i-dim);
  text-align: center;
}

.graph-caption, .graph-scope {
  position: absolute;
  top: 0;
  font-size: 12.5px;
  font-family: var(--mono);
  letter-spacing: 0.12em;
  color: var(--i-dim);
  text-transform: uppercase;
  z-index: 6;
}

.graph-caption { left: 0; display: flex; align-items: center; gap: 9px; }
.graph-scope { right: 0; }

.gdot { background: var(--accent); display: block; flex-shrink: 0; }

.graph-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--i-rule);
}

.graph-controls button {
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--i-dim);
  border-bottom: 1px solid transparent;
  transition: color 300ms ease;
}

.graph-controls button.on { color: var(--paper); border-bottom-color: var(--accent); }

.graph-divider { width: 1px; height: 12px; background: var(--i-rule); display: block; }

/* ---------------- section shells ---------------- */

.paper, .ink {
  min-height: calc(100dvh - var(--nav));
  display: flex;
  align-items: center;
  padding: clamp(26px, 3.6vh, 58px) 0;
  scroll-snap-align: start;
}

.paper { background: var(--cream); color: var(--carbon); }
.ink { background: var(--ink); color: var(--paper); }

.eyebrow {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--p-dim);
  margin-bottom: clamp(16px, 3.4vh, 34px);
}

.ink .eyebrow { color: var(--i-mut); }

.eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.eyebrow-row .eyebrow { margin-bottom: 16px; }

.eyebrow.plain { letter-spacing: 0.1em; text-transform: none; }

.display {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 960px;
}

.display.xl {
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 1080px;
  margin: clamp(16px, 3.4vh, 38px) 0 0;
}

.display.xxl {
  font-size: clamp(40px, min(8.4vw, 13vh), 120px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  max-width: 1100px;
}

.display.md {
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  max-width: 1000px;
}

.display.sm { font-size: clamp(26px, 3.1vw, 44px); line-height: 1.08; }

.faded { color: rgba(20, 20, 22, 0.42); }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: clamp(22px, 4.6vh, 56px);
}

.sec-aside {
  max-width: 360px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(239, 234, 224, 0.70);
}

.paper .sec-aside { color: rgba(20, 20, 22, 0.72); }

.sec-aside-sub { margin-top: 18px; color: var(--p-dim); }

.sec-lede {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--p-body);
  max-width: 620px;
}

.ink .sec-lede { color: rgba(239, 234, 224, 0.65); }

.kicker {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-dim);
  margin-bottom: clamp(14px, 2.6vh, 26px);
}

.kicker.strong { color: var(--carbon); }

.ink .kicker { color: var(--i-dim); }

/* Short viewports: the hero is one screen by contract, so compress its
   rhythm rather than its type. Nothing here changes a font size. */
@media (max-height: 900px) {
  .hero-cta { gap: 8px; }
  .btn { padding-top: 11px; padding-bottom: 11px; }
  .hero-legend .kicker { margin-bottom: 8px; }
  .hero-legend li { padding: 6px 0; }
  .fineprint { margin-top: 4px; }
  .hero-body { padding-bottom: 10px; }
}

@media (max-height: 800px) {
  .hero h1, .hero .display.xxl { font-size: clamp(34px, min(5.6vw, 9.1vh), 96px); }
  .hero-legend li { padding: 4px 0; }
  .hero-cta { gap: 6px; }
  .btn { padding-top: 9px; padding-bottom: 9px; }
  .graph { min-height: min(300px, 34vh); }
}