/* ==========================================================================
   Magnolia Electronics
   Palette and type are drawn from the company's own instruments: the
   slate-periwinkle field of an oscilloscope persistence display, the hot
   red of an eye-diagram centre, and the condensed grotesque already used
   on the technical decks.
   ========================================================================== */

:root {
  --ink:      #141821;   /* blue-black, body text */
  --paper:    #F2F3F5;   /* cool pale grey, page */
  --field:    #5B639B;   /* instrument slate-periwinkle, hero */
  --field-dk: #464D7D;
  --signal:   #C8452F;   /* eye-diagram centre, used sparingly */
  --blue:     #2F5BA8;
  --olive:    #7A8250;
  --rule:     #D8DAE0;
  --dim:      #5A6070;
  --paper-2:  #E9EAEE;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --measure: 34rem;      /* prose column */
  --wide:    72rem;      /* page frame */
  --gap:     clamp(3rem, 7vw, 6rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--signal); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; font-family: var(--mono); font-size: .8rem; z-index: 20;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------- frame --- */

.frame {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.prose { max-width: var(--measure); }

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

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.masthead__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-block: 1.1rem;
}

/* The wordmark is the logo lockup (mark + type) as a single SVG. Height is set
   here rather than baked into the file so the lockup and the nav can be tuned
   together; the SVG's own aspect ratio supplies the width. */
.wordmark {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.wordmark img { height: 1.75rem; width: auto; }

.nav { display: flex; gap: clamp(.9rem, 3vw, 2rem); flex-wrap: wrap; }

.nav__link {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--signal); }

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

.hero {
  background: var(--field);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.hero__in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

@media (min-width: 62rem) {
  .hero__in { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3.5rem; }
  /* The hero currently has its figure, so the split above applies. If the
     figure is ever pulled again, collapse to one column rather than leaving
     the text at half width with a gap beside it. Stated as an override so
     engines without :has() keep the two-column default rather than losing
     it — the figure being present is the normal case. */
  .hero__in:not(:has(.hero__fig)) { grid-template-columns: 1fr; }
}

.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 1.1rem;
}
.hero .eyebrow { color: rgba(255,255,255,.72); }

.hero__title {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 82%;
  font-size: clamp(2.35rem, 6.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.hero__lede {
  font-size: 1.15rem;
  line-height: 1.55;
  margin: 0 0 1.75rem;
  max-width: 30rem;
  color: rgba(255,255,255,.93);
}

.hero__fig { margin: 0; }

.hero__eye {
  background: var(--field-dk);
  border: 1px solid rgba(255,255,255,.22);
  padding: .5rem;
  width: 100%;
}

.hero__cap {
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.55;
  letter-spacing: .04em;
  color: rgba(255,255,255,.75);
  margin-top: .7rem;
}
.hero__cap b { color: #fff; font-weight: 500; }

/* --------------------------------------------------------------- button --- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .72rem 1.35rem;
  border: 1.5px solid currentColor;
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: #fff; color: var(--field); }

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

/* ------------------------------------------------------------ measures --- */
/* Structural device: figures are annotated like plot readouts, not badges. */

.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

.readout__cell {
  background: var(--paper);
  padding: 1.6rem clamp(1rem, 3vw, 1.75rem) 1.5rem;
}

.readout__val {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  margin: 0 0 .55rem;
}
.readout__val sup { font-size: .58em; }

.readout__key {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--dim);
  margin: 0;
  line-height: 1.5;
}

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

.band { padding-block: var(--gap); }
.band--rule { border-top: 1px solid var(--rule); }
.band--tint { background: var(--paper-2); }

/* the axis mark: a signal trace, marking the start of each section */
.axis-mark {
  display: block;
  width: 44px; height: 16px;
  margin-bottom: 1.4rem;
}
.axis-mark path {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.h2 {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 85%;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}

.h3 {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 92%;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: .005em;
  margin: 0 0 .5rem;
}

.prose p { margin: 0 0 1.05rem; }
.prose p:last-child { margin-bottom: 0; }

.lede { font-size: 1.15rem; line-height: 1.55; }

.note {
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.65;
  color: var(--dim);
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
  margin: 1.75rem 0 0;
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- stages --- */

.stages {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 2.25rem;
}
@media (min-width: 48rem) { .stages { grid-template-columns: 1fr 1fr; } }

.stage { background: var(--paper); padding: clamp(1.4rem, 3vw, 2rem); }
.stage__n {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 .7rem;
}
.stage p { margin: 0; }

/* ----------------------------------------------------------------- list --- */

.ticklist { list-style: none; margin: 1.25rem 0 0; padding: 0; max-width: var(--measure); }
.ticklist li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .7rem;
}
.ticklist li::before {
  content: "";
  position: absolute; left: 0; top: .72em;
  width: 9px; height: 1.5px; background: var(--signal);
}

/* ---------------------------------------------------------------- chart --- */

.chart {
  margin: 2.5rem 0 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: clamp(.75rem, 2vw, 1.5rem);
}
.chart figcaption {
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.6;
  color: var(--dim);
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
}

/* Provenance line under a caption. Same mono readout, set on its own line so
   the source is scannable and not read as part of the description. Links keep
   the inherited colour and underline from the base rule. */
.chart__src { display: block; margin-top: .55rem; }
.chart__src cite { font-style: normal; }

/* Prose interleaved between figures — .chart carries a top margin only, and
   .prose p:last-child zeroes its own, so text after a figure would otherwise
   sit flush against it. Matches the figure's own rhythm. */
.chart + .prose { margin-top: 2.5rem; }

/* A .chart's box is block-width by default, which leaves the (much narrower)
   image floating in whitespace and stretches the figcaption out with it.
   Each figure sets its own max-width inline, matching its image's native
   pixel width, so the box — and the caption wrapping inside it — hugs the
   image instead. max-width rather than width so it still shrinks on narrow
   viewports. */

/* Text-plus-figure split, e.g. the generation one photo beside its intro
   copy. Single column on narrow viewports; on wide ones the figure sits at
   its own content width to the right of the text. Same idiom as .hero__in. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr auto; gap: 2.5rem; }
}
.split .chart { margin-top: 0; }

/* ---------------------------------------------------------------- result --- */

.result { border-top: 1px solid var(--rule); padding-top: 1.6rem; margin-top: 2.25rem; }
.result__meta {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 .55rem;
}

/* ----------------------------------------------------------------- team --- */

.people { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
@media (min-width: 44rem) { .people { grid-template-columns: 1fr 1fr; gap: 3rem; } }

.person__photo {
  display: block;
  width: 75%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Portraits: bias the crop upward so heads stay in frame. */
  object-position: 50% 20%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  margin: 0 auto 1.1rem;
}
.person__role {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 .6rem;
}
.person__link {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .05em;
  display: inline-block; margin-top: .6rem;
}

/* ----------------------------------------------------------------- defs --- */

.defs { margin: 2rem 0 0; max-width: var(--measure); }
.defs dt {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim);
  padding-top: .9rem; border-top: 1px solid var(--rule);
}
.defs dd { margin: .35rem 0 1.1rem; }

/* --------------------------------------------------------------- footer --- */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: 2.75rem 3.25rem;
  margin-top: var(--gap);
}
.foot__in { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; }
.foot p { margin: 0 0 .35rem; font-family: var(--mono); font-size: .78rem; color: var(--dim); line-height: 1.7; }
.foot a { color: var(--ink); }

/* -------------------------------------------------------------- utility --- */

.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}