/* ==========================================================================
   ebracci.top — Elia Bracci
   Concept: a lit instrument panel in a dark room (see DESIGN.md).
   Static, no build step. Self-hosted variable fonts.
   ========================================================================== */

/* ── Fonts ───────────────────────────────────────────────────────────────── */

/* Archivo: variable grotesque with a real width axis. Display type gets pushed
   wide like a signage panel; body copy stays at normal width. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Chivo Mono: used only where digits must align in columns. */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/chivomono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/chivomono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */

:root {
  /* Surface: pure near-black, chroma exactly 0. The dark room. */
  --bg:          oklch(0.10 0 0);
  --surface:     oklch(0.152 0.007 188);
  --surface-2:   oklch(0.205 0.009 188);
  --line:        oklch(0.30 0.010 188);
  --line-soft:   oklch(0.22 0.008 188);

  --ink:         oklch(0.97 0.004 188);
  --muted:       oklch(0.755 0.013 188);

  /* Teal carries the page. Amber is signal, rationed. */
  --primary:     oklch(0.82 0.135 188);
  --primary-dim: oklch(0.60 0.095 188);
  --accent:      oklch(0.84 0.150 78);

  --font:  'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mono:  'Chivo Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad:      clamp(1.25rem, 5vw, 5rem);
  --measure:  68ch;
  /* Gutter reserved for the section rail once it appears (>=1280px). */
  --rail-gutter: 10rem;

  --ease:      cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo-ish */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);  /* ease-out-cubic */

  /* Semantic z-scale. No arbitrary 999s. */
  --z-art:   0;
  --z-body:  1;
  --z-rail:  20;
  --z-top:   30;
  --z-skip:  60;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The sticky header must not cover an anchored heading. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  /* Light type on dark needs extra breathing room. */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

strong, b { font-weight: 700; color: var(--ink); }

/* Tabular data: years, metrics, phone. Mono earns its place on digits. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.02em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--primary); color: oklch(0.14 0.02 188); }

.skip {
  position: fixed;
  top: 0.5rem; left: 0.5rem;
  z-index: var(--z-skip);
  padding: 0.6rem 1rem;
  background: var(--primary);
  color: oklch(0.14 0.02 188);
  font-weight: 700;
  font-size: 0.875rem;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip:focus { transform: translateY(0); }

/* ── Sticky section rail (wide screens only) ─────────────────────────────── */

.rail { display: none; }

@media (min-width: 1280px) {
  .rail {
    display: block;
    position: fixed;
    top: 50%;
    left: 1.5rem;
    z-index: var(--z-rail);
    transform: translateY(-50%);
  }
  .rail ol { display: grid; gap: 0.85rem; }
  .rail a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.25s var(--ease-soft);
  }
  .rail__tick {
    display: block;
    /* Full width in the box, scaled down at rest: the tick grows without
       reflowing the label beside it. */
    width: 2.5rem;
    height: 2px;
    background: var(--line);
    transform: scaleX(0.55);
    transform-origin: left center;
    transition: transform 0.35s var(--ease), background-color 0.35s var(--ease-soft);
  }
  .rail__txt {
    opacity: 0;
    transform: translateX(-0.35rem);
    transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease);
  }
  .rail a:hover, .rail a:focus-visible { color: var(--ink); }
  .rail a:hover .rail__txt,
  .rail a:focus-visible .rail__txt,
  .rail a[aria-current='true'] .rail__txt { opacity: 1; transform: none; }
  .rail a[aria-current='true'] { color: var(--primary); }
  .rail a[aria-current='true'] .rail__tick { transform: scaleX(1); background: var(--primary); }
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.top {
  position: sticky;
  top: 0;
  z-index: var(--z-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--pad);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
@supports not (backdrop-filter: blur(12px)) {
  .top { background: var(--bg); }
}

.top__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.top__mark svg { color: var(--primary); flex: none; }
.top__mark b { font-weight: 700; }

.top__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.6rem);
  font-size: 0.875rem;
  font-weight: 500;
}
.top__nav a {
  color: var(--muted);
  padding-block: 0.25rem;
  transition: color 0.2s var(--ease-soft);
}
.top__nav a:hover { color: var(--ink); }
.top__cv { color: var(--primary) !important; font-weight: 600; }
.top__cv:hover { color: var(--accent) !important; }

/* On phones the first three links duplicate the contact section; keep the CV. */
@media (max-width: 33rem) {
  .top__nav a:not(.top__cv) { display: none; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  z-index: var(--z-body);
  padding: clamp(3.5rem, 9vw, 7.5rem) var(--pad) clamp(3rem, 6vw, 5rem);
}

.hero__art {
  position: absolute;
  inset: auto 0 auto 0;
  top: clamp(6rem, 16vw, 11rem);
  z-index: var(--z-art);
  height: clamp(13rem, 30vw, 19rem);
  color: var(--primary);
  pointer-events: none;
  /* Faint texture on narrow screens, where the copy fills the full width. */
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32%, #000 88%, transparent);
}
/* Once the headline and copy occupy only the left half, the traces move
   clear of them and can come up to full strength. */
@media (min-width: 62rem) {
  .hero__art {
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 48%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent 22%, #000 48%, #000 88%, transparent);
  }
}
.hero__art svg { display: block; width: 100%; height: 100%; }
.art__grid { color: var(--primary); }
.art__sectors { color: var(--primary); }
.art__trace { stroke: var(--primary); stroke-linecap: round; }
.art__trace--a { opacity: 0.95; }
.art__trace--b { opacity: 0.45; stroke: var(--primary-dim); }
.art__trace--c { opacity: 0.6; stroke: var(--accent); }

.hero__status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
}
.dot {
  width: 0.5rem; height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0.25rem color-mix(in oklab, var(--primary) 18%, transparent);
}

.hero__name {
  position: relative;
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  font-size: clamp(3.25rem, 12.5vw, 5.5rem);
  font-weight: 800;
  font-stretch: 118%;          /* livery-wide, via the variable width axis */
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-transform: uppercase;
}

.hero__pitch {
  position: relative;
  max-width: 46ch;
  margin-bottom: clamp(2rem, 5vw, 2.75rem);
  font-size: clamp(1.0625rem, 0.95rem + 0.85vw, 1.5rem);
  line-height: 1.5;
  color: var(--muted);
}
.hero__pitch strong { color: var(--primary); font-weight: 700; }

.hero__cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: clamp(2.75rem, 7vw, 4.5rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: transparent;
  transition: border-color 0.22s var(--ease-soft), color 0.22s var(--ease-soft),
              background-color 0.22s var(--ease-soft), transform 0.22s var(--ease);
}
.btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: oklch(0.14 0.02 188);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: oklch(0.18 0.03 78);
}

.hero__meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.75rem, 5vw, 4rem);
  margin: 0;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line-soft);
}
.hero__meta div { padding-block: 0.5rem; }
.hero__meta dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--primary-dim);
}
.hero__meta dd { margin: 0.3rem 0 0; font-size: 0.9375rem; color: var(--muted); }

/* ── Bands ───────────────────────────────────────────────────────────────── */

.band {
  padding: clamp(4rem, 9vw, 7.5rem) var(--pad);
  border-top: 1px solid var(--line-soft);
}

.band__head { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.band__head h2 {
  font-size: clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
  font-stretch: 108%;
  letter-spacing: -0.03em;
}
.band__head p {
  max-width: 44ch;
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: 1rem;
}

/* Head beside the content, not stacked above it — asymmetric, and it keeps the
   page from turning into a column of identical section kickers. */
@media (min-width: 62rem) {
  .band {
    display: grid;
    /* Content column is capped so line lengths stay sane on wide displays;
       the leftover space falls to the right, keeping the page left-weighted. */
    grid-template-columns: 15rem minmax(0, 64rem);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .band__head { position: sticky; top: 5.5rem; margin-bottom: 0; }
}

/* Reserve a gutter for the section rail so it never sits on top of the copy. */
@media (min-width: 1280px) {
  .top, .hero, .band, .contact, .foot {
    padding-left: max(var(--pad), var(--rail-gutter));
  }
}

/* Very wide displays: grow the outer padding rather than the text measure. */
@media (min-width: 1600px) { :root { --pad: 7rem; } }
@media (min-width: 1920px) { :root { --pad: 9rem; } }

/* ── Now ─────────────────────────────────────────────────────────────────── */

.now { display: grid; gap: 1px; background: var(--line-soft); }

.now__lead, .now__side {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--bg);
}
.now__lead { background: var(--surface); }
.now__lead h3 {
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  margin-bottom: 0.85rem;
}
.now__lead p { max-width: 58ch; color: var(--muted); }
.now__lead .num { color: var(--ink); font-weight: 500; }

.now__side h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
  color: var(--primary);
}
.now__side p { color: var(--muted); font-size: 0.9375rem; max-width: 42ch; }

/* Flagship spans the top, the two supporting blocks share the row below.
   Not an identical card grid: different sizes, different jobs. */
@media (min-width: 48rem) {
  .now { grid-template-columns: 1fr 1fr; }
  .now__lead { grid-column: 1 / -1; }
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.25rem;
}
.tags li {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
}

/* ── Stints (the timing sheet) ───────────────────────────────────────────── */

.stints { display: grid; }

.stint {
  display: grid;
  gap: 0.5rem 0;
  padding: clamp(1.75rem, 4vw, 2.5rem) 0;
  border-top: 1px solid var(--line-soft);
}
.stint:first-child { border-top: 0; padding-top: 0; }
.stint:last-child { padding-bottom: 0; }

.stint__when {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.stint__years {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.stint--current .stint__years { color: var(--primary); }

.stint__flag {
  padding: 0.1rem 0.45rem;
  background: var(--accent);
  color: oklch(0.18 0.03 78);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stint__what h3 {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.stint__org {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--primary);
}

.stint__what ul:not(.tags) {
  display: grid;
  gap: 0.7rem;
  max-width: var(--measure);
}
.stint__what ul:not(.tags) li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.9375rem;
}
/* Hairline tick as the marker: instrument bezel, not a bullet glyph. */
.stint__what ul:not(.tags) li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 1px;
  background: var(--primary-dim);
}
.stint__what .num { color: var(--ink); font-weight: 500; }

@media (min-width: 48rem) {
  .stint { grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .stint__when { display: grid; justify-items: start; gap: 0.5rem; align-content: start; padding-top: 0.28rem; }
}

/* ── Stack ───────────────────────────────────────────────────────────────── */

.stack { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 56rem) {
  .stack { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2.5rem, 5vw, 4rem); }
}

.bars { display: grid; gap: 1.1rem; align-content: start; }
.bars li { display: grid; gap: 0.45rem; }
.bars__label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.bars__track {
  display: block;
  height: 0.5rem;
  background: var(--surface-2);
  overflow: hidden;
}
.bars__fill {
  display: block;
  height: 100%;
  width: var(--w);
  background: var(--primary);
  transform-origin: left center;
}

/* Weightings, in the order the list is authored. These are here rather than in
   inline style attributes because the page's CSP forbids inline styles. They
   mirror the proportions on the PDF CV; deliberately unlabelled, since they are
   a self-assessment and not a measurement. */
.bars li:nth-child(1) { --w: 86%; }   /* AI / LLM engineering */
.bars li:nth-child(2) { --w: 84%; }   /* Kubernetes           */
.bars li:nth-child(3) { --w: 92%; }   /* Terraform / IaC      */
.bars li:nth-child(4) { --w: 89%; }   /* CI/CD (Jenkins)      */
.bars li:nth-child(5) { --w: 81%; }   /* Python / Go / Java   */
.bars li:nth-child(6) { --w: 74%; }   /* AWS                  */
.bars li:nth-child(7) { --w: 78%; }   /* Observability        */

/* The two heaviest take the accent, the way a timing tower marks the leaders. */
.bars li:nth-child(3) .bars__fill,
.bars li:nth-child(4) .bars__fill { background: var(--accent); }

.stack__aside { display: grid; gap: 1.75rem; align-content: start; }
.fact { padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.fact:first-child { padding-top: 0; border-top: 0; }
.fact h3 {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--primary-dim);
  margin-bottom: 0.75rem;
}
.fact p { color: var(--muted); font-size: 0.9375rem; }
.fact p + p { margin-top: 0.75rem; }
.fact b { font-weight: 600; }
.fact .num { color: var(--muted); }

/* ── Contact ─────────────────────────────────────────────────────────────── */

.contact {
  padding: clamp(4rem, 10vw, 8rem) var(--pad);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.contact h2 {
  font-size: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
  font-stretch: 114%;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.contact__lede {
  max-width: 46ch;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem);
}

.contact__list {
  display: grid;
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 62rem;
  border-top: 1px solid var(--line);
}
.contact__list li { border-bottom: 1px solid var(--line); }
.contact__list a {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.95rem 0;
  transition: color 0.2s var(--ease-soft), transform 0.3s var(--ease);
}
.contact__list a:hover { color: var(--accent); transform: translateX(0.5rem); }

.contact__k {
  display: block;
  padding-top: 0.95rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--primary-dim);
}
.contact__v { font-size: clamp(1rem, 0.95rem + 0.5vw, 1.25rem); font-weight: 600; }

@media (min-width: 40rem) {
  .contact__list li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1.5rem; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1.75rem var(--pad);
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.8125rem;
}

/* ==========================================================================
   Motion — additive only, and pure CSS (no JS gate, so there is no inline
   script and the CSP can stay strict). Everything above is the resting,
   fully visible state. These keyframes animate *from* a hidden state to that
   resting state, so if animations are suppressed for any reason the page
   simply renders at rest, never blank.
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(1.25rem); }
}
@keyframes fade {
  from { opacity: 0; }
}
@keyframes draw {
  from { stroke-dashoffset: 1; }
}
@keyframes grow {
  from { transform: scaleX(0); }
}
@keyframes wipe {
  from { clip-path: inset(0 100% 0 0); }
}

.hero__status { animation: rise 0.7s var(--ease) 0.05s backwards; }
.hero__name   { animation: rise 0.9s var(--ease) 0.12s backwards; }
.hero__pitch  { animation: rise 0.9s var(--ease) 0.24s backwards; }
.hero__cta    { animation: rise 0.9s var(--ease) 0.34s backwards; }
.hero__meta   { animation: rise 0.9s var(--ease) 0.42s backwards; }
.top          { animation: fade 0.8s var(--ease-soft) 0.1s backwards; }

/* The trace sweeps in once, left to right, like a lap being laid down. */
.hero__art { animation: fade 1.2s var(--ease-soft) 0.2s backwards; }
.art__trace {
  stroke-dasharray: 1;
  animation: draw 2.1s var(--ease-soft) 0.3s backwards;
}
.art__trace--b { animation-delay: 0.42s; }
.art__trace--c { animation-delay: 0.54s; }
.art__grid,
.art__sectors { animation: wipe 1.6s var(--ease-soft) 0.2s backwards; }

/* Bars grow when the readout is first scrolled to. If the observer never runs,
   they simply sit at their resting width. */
.bars.in .bars__fill { animation: grow 1s var(--ease) backwards; }
.bars.in li:nth-child(1) .bars__fill { animation-delay: 0.00s; }
.bars.in li:nth-child(2) .bars__fill { animation-delay: 0.06s; }
.bars.in li:nth-child(3) .bars__fill { animation-delay: 0.12s; }
.bars.in li:nth-child(4) .bars__fill { animation-delay: 0.18s; }
.bars.in li:nth-child(5) .bars__fill { animation-delay: 0.24s; }
.bars.in li:nth-child(6) .bars__fill { animation-delay: 0.30s; }
.bars.in li:nth-child(7) .bars__fill { animation-delay: 0.36s; }

/* Reduced motion: the intro collapses to the resting state instantly. Nothing
   is hidden by it, because every resting state above is the visible one. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
  :root { --bg: #fff; --ink: #000; --muted: #333; --surface: #fff; --line: #bbb; --line-soft: #ddd; --primary: #036; --primary-dim: #036; }
  .rail, .top, .hero__art, .hero__cta { display: none; }
  body { font-size: 11pt; }
  .band, .contact, .foot { border-color: #ccc; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; word-break: break-all; }
  .top__mark a::after, .contact__list a::after { content: ''; }
}