/* ===========================================================================
   READERP — void
   ---------------------------------------------------------------------------
   The previous stylesheet was built to sell on paper: warm ground, navy ink, a
   five-colour data palette, one long explanatory page. It worked and it read
   like a document.

   This one is the Dala language applied to our content. The rules, taken from
   the reference and not negotiated down:

     One ground, everywhere. Not dark grey, not a panel, not a card. The
     reference uses pure #000000; ours is a warm plum at fifteen percent,
     for the reason set out over the colour tokens.
     The void is the design, and anything with a background breaks it.

     Hierarchy comes from SCALE, never weight. Every headline is weight 400 at
     42–113px with tracking pulled to -0.04em. A bold headline on this page
     would look like a different site.

     Body copy is weight 200. Most sites set 400 and it is the single choice
     that makes this one feel airy rather than shouted.

     One violet pill, once per view. #8052ff is a button, never a surface.
     Amber #ffb829 is the eyebrow and the emphasis, never a fill.

     No borders, no shadows, no cards. Whitespace separates things.

   What is ours rather than borrowed: the particle field breaks into separate
   columns and then merges into one curve, because "kaç veritabanı varsa, tek
   çizgi" is our sentence and a brain is theirs. The count is not twelve and
   not twenty — the merge takes however many period databases exist, and a
   number in the copy reads as a ceiling.
   =========================================================================== */

:root {
  /* ---- colour -------------------------------------------------------
   *
   * The ground is the button, darkened and turned warm. The reference's rule
   * is #000000 and it is right for the reference; this is a finance product
   * read by tired people at seven in the evening, and an hour of pure black
   * is tiring in a way a dark colour is not.
   *
   * The first attempt kept the button's own hue and took it to a sixth of its
   * lightness. On a calibrated screen that is violet. On a desk it is black --
   * six percent lightness is below the point where the eye reads a hue at all,
   * so the "warm" the ground was supposed to carry never arrived.
   *
   * So two changes, not one. Lightness up to fifteen percent, which is where
   * a dark colour starts reading as a colour. And the hue rotated from 256
   * to 280: the button is a blue-violet, and blue-violet is the cold half of
   * purple. Past 270 the red channel overtakes the green and the ground turns
   * plum -- the same family as the button, on the warm side of it.
   *
   * Three steps, because the inner pages alternate bands and two blacks
   * cannot alternate. Each is the one above at five points more lightness. */
  --void:        #2c1636;      /* hsl(280 42% 15%) — the ground        */
  --void-2:      #3a1f47;      /* hsl(280 40% 20%) — the alternate band */
  --void-3:      #4a2a5a;      /* hsl(280 36% 26%) — a raised surface   */
  --bone:        #ffffff;
  --ash:         #9a9a9a;
  --silver:      #bdbdbd;
  --iris:        #8052ff;
  --iris-lift:   #9670ff;
  --saffron:     #ffb829;
  --verdant:     #15846e;

  /* The only greys that touch a surface. Used for hairlines where a table
     genuinely needs one — a comparison of two products cannot be read as
     floating text — and nowhere else. */
  --hair:        rgba(255, 255, 255, .10);
  --hair-2:      rgba(255, 255, 255, .18);

  /* ---- type --------------------------------------------------------- */
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
          Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --w-light:  200;
  --w-reg:    400;
  --w-semi:   600;

  /* ---- spacing, on a 6px unit --------------------------------------- */
  --s6: 6px;   --s12: 12px; --s18: 18px; --s24: 24px;
  --s30: 30px; --s36: 36px; --s60: 60px; --s96: 96px; --s120: 120px;

  --page: 1280px;
  --r:    24px;
  --pill: 9999px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: var(--w-light);
  line-height: 1.5;
  font-feature-settings: 'ss01' on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }

::selection { background: var(--iris); color: #fff; }

:focus-visible {
  outline: 2px solid var(--iris-lift);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ type */

h1, h2, h3, h4 {
  font-weight: var(--w-reg);
  margin: 0;
  text-wrap: balance;
}

/* -0.04em everywhere at 42px and up. At 113px that is -4.52px, which is the
   number in the reference; expressing it as em keeps it true at every clamp
   step instead of only at the top. */
h1 {
  font-size: clamp(46px, 8.2vw, 113px);
  line-height: 1.06;
  letter-spacing: -.04em;
}
h2 {
  font-size: clamp(34px, 4.6vw, 78px);
  line-height: 1.1;
  letter-spacing: -.04em;
}
h3 {
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.15;
  letter-spacing: -.02em;
}
h4 {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: var(--w-reg);
}

p { margin: 0; }
p + p { margin-top: var(--s18); }

/* A heading that follows running text needs air above it, and the reset takes
   every margin off headings so nothing was providing it: on the longer inner
   pages an h3 sat directly on the last line of the paragraph before it and the
   two read as one block. Only inside a flow -- a .stack or a grid sets its own
   gap and adding a margin there would double it. */
p + h2, ul + h2, ol + h2, table + h2, .fig + h2,
p + h3, ul + h3, ol + h3, table + h3, .fig + h3 { margin-top: var(--s36); }
p + h4, ul + h4, ol + h4, table + h4          { margin-top: var(--s24); }
.stack > * + h2, .stack > * + h3, .stack > * + h4,
.stack-s > * + h3, .stack-l > * + h3 { margin-top: 0; }

/* And text that follows a heading should not be flush against it either. */
h2 + p, h3 + p, h4 + p, h2 + ul, h3 + ul, h4 + ul { margin-top: var(--s12); }
.stack > h2 + p, .stack > h3 + p, .stack > h4 + p { margin-top: 0; }

a { color: var(--bone); text-decoration: none; }
a:hover { color: var(--saffron); }

strong, b { font-weight: var(--w-reg); color: var(--bone); }

.lede {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--bone);
  max-width: 52ch;
}
.body-2 { color: var(--silver); max-width: 56ch; }
.sm  { font-size: 15px; color: var(--ash); }
.cap { font-size: 12px; line-height: 1.5; color: var(--ash); }

/* The amber label that sits above a body block. It is the only place amber
   appears as type, which is what keeps it meaning "look here". */
.eyebrow {
  font-size: 14px;
  font-weight: var(--w-semi);
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--saffron);
  margin: 0 0 var(--s18);
}
.eyebrow.ash { color: var(--ash); }

code, .mono {
  font-family: var(--mono);
  font-size: .88em;
  color: var(--silver);
}

/* ---------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 60px);
}

section { padding-block: clamp(var(--s60), 9vw, var(--s120)); }
section.tight { padding-block: clamp(var(--s36), 5vw, var(--s60)); }

/* The zigzag the reference asks for: text left / visual right, then the
   reverse. Asymmetric on purpose — a 50/50 split reads as a table. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s36), 5vw, var(--s96));
  align-items: center;
}
.split.wide-l { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split.wide-r { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.split > .flip { order: -1; }

@media (max-width: 900px) {
  .split, .split.wide-l, .split.wide-r { grid-template-columns: 1fr; }
  .split > .flip { order: 0; }
}

.stack   { display: grid; gap: var(--s18); align-content: start; }
.stack-s { display: grid; gap: var(--s12); align-content: start; }
.stack-l { display: grid; gap: var(--s30); align-content: start; }

/* -------------------------------------------------------------- controls */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s6);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: var(--w-semi);
  letter-spacing: .025em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: var(--pill);
  border: 0;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-p { background: var(--iris); color: #fff; }
.btn-p:hover { background: var(--iris-lift); color: #fff; }

/* The second action is never a second pill. Two filled buttons side by side
   is the thing the reference explicitly forbids, and it is also just unclear. */
.btn-g {
  background: transparent;
  color: var(--bone);
  box-shadow: inset 0 0 0 1px var(--hair-2);
}
.btn-g:hover { color: var(--saffron); box-shadow: inset 0 0 0 1px var(--hair-2); }

/* A bare text link that still reads as an action: the arrow does the work a
   border would have done. */
.go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--bone);
}
.go::after {
  content: "→";
  transition: transform .18s ease;
}
.go:hover { color: var(--saffron); }
.go:hover::after { transform: translateX(4px); }

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

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--void);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: var(--s30);
  height: 78px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--bone);
  margin-right: auto;
}
.brand:hover { color: var(--bone); }
.brand svg { flex: none; }

.top nav { display: flex; align-items: center; gap: var(--s24); }
.top nav a {
  font-size: 14px;
  font-weight: var(--w-semi);
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--ash);
}
.top nav a:hover, .top nav a[aria-current] { color: var(--bone); }
.top .right { display: flex; align-items: center; gap: var(--s18); }
.top .panel-in { font-size: 14px; color: var(--ash); }
.top .panel-in:hover { color: var(--bone); }

.burger {
  display: none;
  background: none;
  border: 0;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: var(--w-semi);
  letter-spacing: .025em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 0;
}

@media (max-width: 1020px) {
  .burger { display: block; margin-left: auto; }
  .top .wrap { flex-wrap: wrap; height: auto; padding-block: 16px; }
  .top nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s18);
    padding: var(--s24) 0 var(--s12);
  }
  .top.open nav { display: flex; }
  .top .right { display: none; }
  .top.open .right {
    display: flex;
    width: 100%;
    padding-bottom: var(--s18);
  }
}

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

.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  padding-block: clamp(var(--s36), 6vw, var(--s96));
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(var(--s24), 4vw, var(--s60));
  align-items: center;
  width: 100%;
}
.hero-copy { display: grid; gap: var(--s24); align-content: center; max-width: 640px; }
.hero-copy .lede { max-width: 46ch; }
.hero-copy .btn { justify-self: start; }

/* The field gets its own stacking context and sits behind nothing -- it is
   content, not wallpaper, and it responds to the pointer. */
.field-box {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 340px;
}
.field-box canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

/* What the field is saying, in words, for anyone who arrives after it has
   settled -- and for anyone who cannot see it at all. */
.field-say {
  position: absolute;
  left: 0;
  bottom: -6px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ash);
  display: flex;
  gap: 10px;
  align-items: center;
}
.field-say b { color: var(--bone); font-weight: var(--w-reg); }
.field-say i { font-style: normal; color: var(--iris); }

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-copy { order: 1; }
  .field-box { order: 0; aspect-ratio: 4 / 3; min-height: 280px; }
  .field-say { position: static; margin-top: var(--s12); }
}

/* --------------------------------------------------------------- listing
 *
 * Where the old site used cards, this uses rows separated by a hairline and
 * nothing else. A card would need a background and the void does not allow
 * one; a row needs only a line, and the line can be almost invisible.
 */
.rows { display: grid; }
.row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s24);
  align-items: baseline;
  padding-block: var(--s30);
  border-top: 1px solid var(--hair);
}
.rows .row:last-child { border-bottom: 1px solid var(--hair); }
.row-n {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--iris);
}
.row h3 { letter-spacing: -.02em; }
.row p { color: var(--silver); font-size: 16px; }

@media (max-width: 760px) {
  .row { grid-template-columns: 32px minmax(0, 1fr); }
  .row p { grid-column: 2; }
}

/* Three-across, no boxes. */
.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(var(--s30), 4vw, var(--s60));
}
.trio > div { display: grid; gap: var(--s12); align-content: start; }
.trio h3 { font-size: 24px; letter-spacing: -.02em; }
.trio p { color: var(--silver); font-size: 16px; }

/* Numbered steps: the numbering is real here, it is an order of operations. */
.steps { counter-reset: st; display: grid; gap: var(--s36); }
.step { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: var(--s24); }
.step::before {
  counter-increment: st;
  content: counter(st, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--iris);
  padding-top: 6px;
}
.step h3 { margin-bottom: var(--s6); }
.step p { color: var(--silver); font-size: 16px; }

/* ---------------------------------------------------------------- figures
 *
 * A figure is the one place a faint surface is allowed, and only because a
 * chart drawn on the bare ground with no boundary reads as a bug. The tint is
 * white and not a fixed colour, so a figure lifts off whichever band it lands
 * on -- the ground and the alternate band are five points apart and a fixed
 * fill would vanish on one of them. Raised from 2.8% to 4.5% because the
 * ground is no longer black: a lift has to clear more to be seen.
 */
.fig {
  border-radius: var(--r);
  background: rgba(255, 255, 255, .045);
  padding: clamp(var(--s18), 2.4vw, var(--s36));
}
/* The label above a figure. It was four copies of the same inline style; it
   is a class now because on board it stops being a machine label and becomes
   something written, and an inline style cannot be overridden by a section. */
.fig-lbl {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 18px;
}

.fig-cap {
  font-size: 13px;
  color: var(--ash);
  margin-top: var(--s18);
  max-width: 62ch;
}
.fig-cap b { color: var(--silver); font-weight: var(--w-reg); }

/* -------------------------------------------------------------- big number */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(var(--s24), 3vw, var(--s60));
}
.figure b {
  display: block;
  font-size: clamp(42px, 5vw, 78px);
  font-weight: var(--w-reg);
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.figure span { display: block; font-size: 15px; color: var(--ash); margin-top: var(--s12); }

/* ----------------------------------------------------------------- table */
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; }
.tbl th {
  text-align: left;
  font-size: 12px;
  font-weight: var(--w-semi);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ash);
  padding: 0 var(--s18) var(--s18) 0;
  border-bottom: 1px solid var(--hair-2);
}
.tbl td {
  padding: var(--s18) var(--s18) var(--s18) 0;
  border-bottom: 1px solid var(--hair);
  color: var(--silver);
  vertical-align: top;
}
.tbl td:first-child { color: var(--bone); }
.tblwrap { overflow-x: auto; }

.yes { color: var(--verdant); }
.no  { color: var(--ash); }

/* ------------------------------------------------------------------- quote */
.quote {
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.2;
  letter-spacing: -.03em;
  font-weight: var(--w-reg);
  max-width: 20ch;
}
.quote-src { font-size: 14px; color: var(--ash); margin-top: var(--s24); }

/* -------------------------------------------------------------------- cta */
.cta { text-align: center; }
.cta h2 { margin-inline: auto; max-width: 16ch; }
.cta .lede { margin-inline: auto; text-align: center; }
.cta .btn { margin-top: var(--s30); }

/* ------------------------------------------------------------------ foot */
.foot { padding-block: var(--s60) var(--s36); border-top: 1px solid var(--hair); }
.foot .wrap { display: grid; gap: var(--s36); }
.foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s36);
}
.foot h4 {
  font-size: 12px;
  font-weight: var(--w-semi);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: var(--s18);
}
.foot nav { display: grid; gap: var(--s12); }
.foot nav a { font-size: 15px; color: var(--silver); }
.foot nav a:hover { color: var(--bone); }
.foot-legal {
  border-top: 1px solid var(--hair);
  padding-top: var(--s24);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ash);
}
.foot-legal a { color: var(--silver); }

/* ------------------------------------------------------------ entrance
 *
 * One reveal, used sparingly. The hero has the field; everything below just
 * needs to not appear all at once on a long scroll.
 */
[data-anim] { opacity: 0; transform: translateY(14px); }
[data-anim].in {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-anim].in { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ misc */
.hr { height: 1px; background: var(--hair); border: 0; margin: 0; }
.center { text-align: center; }
.narrow { max-width: 720px; margin-inline: auto; }


/* ============================================================================
   THE STAGE

   Five screens of scroll, one pinned frame, full bleed. The canvas is the
   viewport; the copy floats over it and slides with the wheel.

   The earlier version put the cloud in a square on the right and the type in a
   column on the left, which is a diagram beside a paragraph. Nothing about
   that composition could have had impact — the picture was never allowed to be
   the screen.

   Below 900px the pin comes off. A sticky hero fighting a phone's own scroll
   momentum is worse than no animation, so the small screen gets the field, the
   first sentence and the button.
   ========================================================================= */
.stage { height: 500vh; padding: 0; position: relative; }

.stage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.stage-pin > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

/* Between the cloud and the type. Not a panel — a gradient that only exists
   where the words are, so white stays legible over a field of coloured
   triangles without anything acquiring an edge. */
.stage-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.78) 28%,
      rgba(0,0,0,.30) 52%,
      rgba(0,0,0,0)   72%),
    linear-gradient(to top,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,0)   38%);
}

.stage-copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.stage-copy .wrap { width: 100%; position: relative; }

/* The four sentences share one cell and are moved by the script, so their
   travel is the scroll's travel rather than a transition running on its own
   clock. No CSS transition here on purpose. */
.beat {
  position: absolute;
  left: clamp(20px, 4vw, 60px);
  right: clamp(20px, 4vw, 60px);
  top: 50%;
  margin-top: -22vh;
  display: grid;
  gap: var(--s24);
  max-width: 940px;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
.beat .lede { max-width: 40ch; pointer-events: auto; }
.beat h1 {
  font-size: clamp(44px, 8vw, 118px);
  line-height: 1.02;
}
.dim { color: var(--ash); }

.stage-foot {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(24px, 4vh, 46px);
}
.stage-foot .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s24); flex-wrap: wrap;
}
.stage-foot .btn { pointer-events: auto; }

.beats {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--s24); flex-wrap: wrap;
}
.beats li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ash);
  transition: color .3s ease;
}
.beats li span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  transition: background-color .3s ease, transform .3s ease;
}
.beats li.on { color: var(--bone); }
.beats li.on span { background: var(--iris); transform: scale(1.6); }

@media (max-width: 900px) {
  .stage { height: auto; }
  .stage-pin { position: static; height: 78vh; min-height: 520px; }
  .stage-copy { align-items: flex-end; padding-bottom: 22vh; }
  .beat {
    position: static;
    margin-top: 0;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  /* Without a scroll to move between them, only the first exists. */
  .beat[data-beat]:not([data-beat="0"]) { display: none; }
  .stage-veil {
    background: linear-gradient(to top,
      rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,0) 68%);
  }
  .beats { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stage { height: auto; }
  .stage-pin { position: static; height: 80vh; min-height: 520px; }
}


/* Two closing actions, paired. The second used to be a bare text link beside a
   pill — baseline-misaligned, and reading as a caption rather than a choice. */
.cta-actions {
  display: flex; gap: var(--s18); justify-content: center;
  flex-wrap: wrap; align-items: stretch; margin-top: var(--s36);
}
.cta-actions .btn { padding-inline: 26px; }

/* The attribution belongs at the bottom right, not in the first footer column
   where a reader is looking for what the product is. */
.foot-by {
  margin-top: var(--s18);
  text-align: right;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash);
}
.foot-by b { color: var(--silver); font-weight: 400; letter-spacing: .04em; }
@media (max-width: 620px) { .foot-by { text-align: left; } }


/* ============================================================================
   THE CONTACT WIZARD

   A form on a black page with no cards. The steps are separated by a hairline
   and a number, the same way the report rows are, so nothing acquires a
   surface. A field is a label above a control and the control's only edge is
   its own bottom rule — the void allows a line, not a box.
   ========================================================================= */
.wz { display: grid; gap: 0; max-width: 940px; }

.wz-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wz-step {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 0;
  padding: var(--s36) 0 var(--s60);
}
.wz-step:first-of-type { border-top: 0; padding-top: var(--s12); }

.wz-step legend {
  display: flex; align-items: baseline; gap: var(--s18);
  font-size: clamp(20px, 2.2vw, 27px);
  letter-spacing: -.02em;
  color: var(--bone);
  padding: 0;
  margin-bottom: var(--s6);
}
.wz-n {
  font-family: var(--mono); font-size: 13px; color: var(--iris);
  transition: color .3s ease;
}
/* A step goes quiet once it has what it needs, so the form reads as progress.
   Nothing is hidden — hiding a field somebody filled is how an answer is lost. */
.wz-step.done .wz-n { color: var(--verdant); }
.wz-step.done legend::after {
  content: "✓"; font-size: 15px; color: var(--verdant); margin-left: 2px;
}

.wz-hint { font-size: 14px; color: var(--ash); margin: 0 0 var(--s30); max-width: 60ch; }

.wz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s30) var(--s36);
}

.wz-f { display: grid; gap: var(--s6); }
.wz-l {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ash);
}
.wz-l em { font-style: normal; text-transform: none; letter-spacing: 0; }

.wz input[type="text"], .wz input[type="email"], .wz input[type="tel"],
.wz select, .wz textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: var(--w-light);
  color: var(--bone);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair-2);
  border-radius: 0;
  padding: 10px 0;
  transition: border-color .2s ease;
}
.wz textarea { resize: vertical; line-height: 1.5; }
.wz input:focus, .wz select:focus, .wz textarea:focus {
  outline: none;
  border-bottom-color: var(--iris);
}
.wz input::placeholder, .wz textarea::placeholder { color: #5a5a5a; }

/* The native arrow is a light-theme grey wedge and disappears on black. */
.wz select {
  appearance: none;
  padding-right: 26px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ash) 50%),
    linear-gradient(135deg, var(--ash) 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.wz select option { background: #0b0b0b; color: #fff; }

.wz-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.wz-chip { cursor: pointer; }
.wz-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.wz-chip span {
  display: inline-block;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: var(--pill);
  color: var(--silver);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  transition: color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.wz-chip:hover span { color: var(--bone); box-shadow: inset 0 0 0 1px var(--ash); }
.wz-chip input:checked + span {
  color: #fff;
  background: var(--iris);
  box-shadow: inset 0 0 0 1px var(--iris);
}
.wz-chip input:focus-visible + span { outline: 2px solid var(--iris-lift); outline-offset: 2px; }

.wz-check {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: var(--s36); font-size: 14px; color: var(--silver);
  max-width: 62ch; cursor: pointer;
}
.wz-check input { margin-top: 4px; accent-color: var(--iris); }
.wz-check a { color: var(--saffron); }

.wz-send {
  display: flex; align-items: center; gap: var(--s24);
  flex-wrap: wrap; margin-top: var(--s36);
}
.wz-note { font-size: 13px; color: var(--ash); max-width: 44ch; margin: 0; }

.wz-flash {
  padding: 16px 20px;
  border-radius: var(--r);
  font-size: 15px;
  margin-bottom: var(--s36);
  box-shadow: inset 0 0 0 1px var(--hair-2);
}
.wz-flash.good { color: var(--bone); box-shadow: inset 0 0 0 1px rgba(21,132,110,.55); }
.wz-flash.warn { color: var(--bone); box-shadow: inset 0 0 0 1px rgba(255,184,41,.45); }
.wz-flash a { color: var(--saffron); }
.wz-flash[hidden] { display: none; }


/* The attribution carries the real mark, linked. A wordmark set as text next
   to a real logo everywhere else reads as unfinished. */
.foot-by { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.foot-by a { display: inline-flex; opacity: .75; transition: opacity .18s ease; }
.foot-by a:hover { opacity: 1; }
.foot-by img { height: 17px; width: auto; }
@media (max-width: 620px) { .foot-by { justify-content: flex-start; } }


/* ============================================================================
   PAPER

   Relief from the dark. Not a lighter grey — that reads as a bug — but a
   different material: heavy board, ink pen, and an engineer's marginalia.

   The grain is feTurbulence baked into data URIs. No image request, and it
   stays crisp at any zoom -- an SVG background rasterises at the device's own
   resolution, so it is sharper on a retina screen than a scan would be. A
   photographic scan would also be heavier, would tile visibly, and would be
   somebody else's photograph.

   It took two goes. The first was two noise layers multiplied over a gradient,
   and it read as a printed pattern rather than a material -- because noise has
   no light in it. The layer that fixed it is feDiffuseLighting: the same
   turbulence, but lit from one side, so every fibre gets a highlight and a
   shadow and the surface acquires a thickness. Four layers now, at four tile
   sizes chosen not to share a factor, so the combined pattern has no repeat
   the eye can find:

     specks   700px   flecks of whatever the board was before
     tooth    600px   the lit relief -- the one that matters
     fibres   900px   pressed pulp lies down, so it streaks
     pulp    1100px   cloudiness at the scale of a hand
   ========================================================================= */

.paper {
  /* Kraft, not oatmeal. The first mix was chosen against a black ground,
     where anything warm reads warm; on its own it was grey. */
  --card:      #ded2b8;
  --ink:       rgba(19, 27, 39, .96);
  --ink-2:     rgba(38, 49, 66, .94);
  --ink-3:     rgba(86, 96, 112, .90);
  --ink-red:   rgba(150, 40, 30, .94);
  --ink-blue:  rgba(27, 54, 102, .94);
  /* The printout pasted onto the board, and the pencil rule on it. */
  --sheet:     #f4efe3;
  --rule:      rgba(24, 33, 46, .17);

  position: relative;
  color: var(--ink);
  background-color: var(--card);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E %3Cfilter id='s' x='0%25' y='0%25' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' seed='41' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0.29 0 0 0 0 0.23 0 0 0 0 0.15 1.9 1.9 1.9 0 -2.74'/%3E %3C/filter%3E %3Crect width='700' height='700' filter='url(%23s)'/%3E %3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E %3Cfilter id='r' x='0%25' y='0%25' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='5' seed='7' stitchTiles='stitch' result='n'/%3E %3CfeDiffuseLighting in='n' surfaceScale='1.9' diffuseConstant='0.60' lighting-color='%23ffffff'%3E %3CfeDistantLight azimuth='235' elevation='56'/%3E %3C/feDiffuseLighting%3E %3C/filter%3E %3Cg opacity='0.60'%3E%3Crect width='600' height='600' filter='url(%23r)'/%3E%3C/g%3E %3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E %3Cfilter id='f' x='0%25' y='0%25' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.34' numOctaves='4' seed='19' stitchTiles='stitch'/%3E %3CfeColorMatrix type='saturate' values='0'/%3E %3C/filter%3E %3Crect width='900' height='900' filter='url(%23f)' opacity='0.22'/%3E %3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100'%3E %3Cfilter id='p' x='0%25' y='0%25' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.0055' numOctaves='4' seed='3' stitchTiles='stitch'/%3E %3CfeColorMatrix type='saturate' values='0'/%3E %3C/filter%3E %3Crect width='1100' height='1100' filter='url(%23p)' opacity='0.44'/%3E %3C/svg%3E"),
    linear-gradient(171deg, #eae0c8 0%, #e2d7bd 36%, #d8cbae 72%, #e0d5ba 100%);
  background-blend-mode: multiply, overlay, multiply, multiply, normal;
  background-size: 700px 700px, 600px 600px, 900px 900px, 1100px 1100px, auto;

  /* Board has thickness. Two stacked shadows read as an edge you could pick
     up; one reads as a drop shadow on a rectangle. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 1px 0 rgba(0,0,0,.35),
    0 14px 40px rgba(0,0,0,.45);
}

/* The cut edge, top and bottom: a hair of exposed pulp. */
.paper::before,
.paper::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    #cfc6b1 0%, #ded6c5 18%, #c9c0aa 41%, #e0d8c8 63%, #cbc2ad 84%, #d8d0be 100%);
  opacity: .9;
}
.paper::before { top: 0; }
.paper::after  { bottom: 0; }

/* ---- the ink ------------------------------------------------------------
 *
 * On board, the writing is written. Setting Inter on a sheet of cardboard is
 * the thing that gave the section away: the material said notebook and the
 * type said website, and the eye believes the type.
 *
 * TWO HANDS, WHICH IS WHAT A REAL NOTEBOOK HAS. Caveat is the pen -- fast,
 * joined, the hand you write a margin note in, and it is already the hand the
 * marginalia uses, so the headline and the note beside it now agree. Architects
 * Daughter is the drafting hand: slower, unjoined, the lettering an engineer
 * uses on a drawing precisely because it stays legible. Prose gets the drafting
 * hand because four paragraphs of joined script is a decorative object rather
 * than something anybody reads.
 *
 * WHAT STAYS MACHINE-SET. The figures. Nobody hand-letters a column of numbers
 * -- and a hand has no tabular figures, so the decimal points would not line
 * up and the table would read as broken rather than as handmade. In a real
 * engineering notebook the printout is pasted onto the page and annotated in
 * pen, and that is exactly the arrangement here: mono inside the figure, pen
 * on its label and its caption.
 *
 * A hand carries no tracking and needs more leading. Every letter-spacing set
 * for Inter is unset here, and the line heights go up: joined script needs the
 * room or the descenders of one line touch the ascenders of the next.
 */

.paper {
  /* The pen and the drafting hand. Both fall back through the system script
     faces before cursive, because a missing webfont on this section should
     land on something written rather than on Times. */
  --pen:   'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  --draft: 'Architects Daughter', 'Segoe Print', 'Bradley Hand', cursive;

  font-family: var(--draft);
  font-weight: 400;          /* the drafting hand has one weight; say so */
  font-size: 19px;           /* it sets small — 19 here reads as 17 in Inter */
  line-height: 1.66;
}

.paper h2, .paper h3, .paper h4 {
  font-family: var(--pen);
  font-weight: 700;
  color: var(--ink);
  /* A pen has no tracking. -0.04em is a typesetter's correction for optical
     spacing in a printed face and it makes joined script collide. */
  letter-spacing: normal;
  /* The heavier stroke a nib leaves where it presses. Sub-pixel, so it reads
     as ink weight rather than as a shadow. */
  text-shadow: .4px .35px .2px rgba(22,31,44,.28);
  /* And the edge wandering into the fibre. The filter is defined once, inline
     in the document, because a filter referenced across an @font-face-styled
     run has to live in the same document to resolve. */
  filter: url(#ink);
}

/* The margin notes get it too -- they are the most obviously handwritten thing
   on the page and a clean vector edge on them is the tell. */
.mrg { filter: url(#ink); }
.paper .eyebrow, .paper .fig-lbl { filter: url(#ink); }

/* A filter forces the text to raster, and on a machine that cannot spare it
   the cost lands on scroll. Reduced motion is the closest signal available
   for "this machine is not enjoying itself". */
@media (prefers-reduced-motion: reduce) {
  .paper h2, .paper h3, .paper h4, .mrg,
  .paper .eyebrow, .paper .fig-lbl { filter: none; }
}

/* Caveat's x-height is roughly three-quarters of Inter's, so matching the px
   would set the headline a quarter smaller than the page's rhythm expects.
   Every step is scaled up and the leading pulled in, because script wants to
   be large and tight rather than small and airy. */
.paper h2 {
  font-size: clamp(44px, 6vw, 100px);
  line-height: 1.02;
}
.paper h3 { font-size: clamp(28px, 2.6vw, 35px); line-height: 1.12; }
.paper h4 { font-size: 23px; line-height: 1.25; }

.paper .lede    { font-size: 21px; line-height: 1.6; }
.paper .body-2  { font-size: 19px; }
.paper .sm,
.paper .cap     { font-size: 16px; }
.paper .eyebrow {
  font-family: var(--pen);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: normal;
  text-transform: none;      /* uppercase script is not a thing anybody writes */
}

/* Emphasis in a notebook is a heavier stroke or a second pass over the word,
   never a different family. */
.paper strong, .paper b {
  font-weight: 700;
  text-shadow: .35px 0 0 currentColor;
}

/* The label on a pasted-in printout, written on the board beside it. */
.paper .fig-lbl {
  font-family: var(--pen);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.paper p, .paper li { color: var(--ink-2); }
.paper .lede { color: var(--ink); }
.paper .body-2 { color: var(--ink-2); }
.paper .sm, .paper .cap { color: var(--ink-3); }
.paper strong, .paper b { color: var(--ink); }
.paper .eyebrow { color: var(--ink-red); }
.paper .eyebrow.ash { color: var(--ink-3); }
.paper a { color: var(--ink-blue); }
.paper a:hover { color: var(--ink-red); }
/* Inside a figure the type is the machine's. Named explicitly rather than
   left to inherit, because .paper now sets a hand on everything.

   13.5px, not 15. At 15 the mono ran wider than the column and the currency
   table broke "€ 120.000" over two lines -- a wrapped figure reads as a bug
   whatever the material underneath. The numeric cells also stop wrapping
   outright: a column of numbers has one job. */
.paper .fig,
.paper .tbl,
.paper code,
.paper .mono {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: normal;
}
.paper .tbl th,
.paper .tbl td { white-space: nowrap; }
.paper .fig .fig-lbl { font-family: var(--pen); font-size: 20px; }

/* The dark palette leaks into the printout through inline styles written for
   a black ground -- --ash and --saffron are unreadable on paper. Redefined
   inside the sheet rather than chased through the markup. */
.paper .fig {
  --ash:     rgba(96, 104, 118, .85);
  --silver:  rgba(70, 79, 94, .90);
  --saffron: #9a6a05;
  --verdant: #14664f;
  --iris:    #4b2ea8;
  --bone:    var(--ink);
}

/* Rules on the printout are printed, and the header rule is heavier than the
   body rules, the way a printed table is set. */
.paper .fig .tbl th { border-bottom: 1px solid rgba(24,33,46,.34); }
.paper .fig .tbl td { border-bottom: 1px solid rgba(24,33,46,.13); }

/* The annotation under the pasted printout is written on the board, so it is
   in the hand and it sits below the sheet's shadow rather than on the sheet. */
.paper .fig-cap {
  font-family: var(--draft);
  font-size: 15.5px;
  line-height: 1.5;
  margin-top: 16px;
}
.paper code, .paper .mono { color: var(--ink-2); background: rgba(23,33,46,.06); }

/* Rules on board are pencil, not hairlines of light. */
.paper .row,
.paper .rows .row:last-child,
.paper .tbl td, .paper .tbl th,
.paper .hr { border-color: rgba(23,33,46,.16); }
.paper .hr { background: rgba(23,33,46,.16); }
.paper .row-n { color: var(--ink-red); }
.paper .tbl th { color: var(--ink-3); }
.paper .tbl td { color: var(--ink-2); }
.paper .tbl td:first-child { color: var(--ink); }
.paper .yes { color: #1d6b41; }
.paper .no  { color: var(--ink-3); }

.paper .go { color: var(--ink-blue); }
.paper .go:hover { color: var(--ink-red); }
.paper .btn-g {
  color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23,33,46,.30);
}
.paper .btn-g:hover { color: var(--ink-red); box-shadow: inset 0 0 0 1px rgba(23,33,46,.55); }

/* A figure on board is a pasted-in slip, not a tinted panel. */
.paper .fig {
  /* Not a tint of light -- a sheet of printer paper pasted onto the card.
     Cut edge rather than a 24px radius, its own finer grain, a shadow that
     says it sits on top, and a third of a degree of rotation because nobody
     pastes anything straight. */
  background-color: var(--sheet);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E %3Cfilter id='q' x='0%25' y='0%25' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' seed='23' stitchTiles='stitch'/%3E %3CfeColorMatrix type='saturate' values='0'/%3E %3C/filter%3E %3Crect width='320' height='320' filter='url(%23q)' opacity='0.13'/%3E %3C/svg%3E");
  background-blend-mode: multiply;
  border-radius: 2px;
  padding: 24px 26px 22px;
  transform: rotate(-.35deg);
  box-shadow:
    0 1px 1px rgba(38,28,14,.20),
    0 10px 24px -10px rgba(38,28,14,.42);
}
.paper .fig-cap { color: var(--ink-2); }
.paper .fig-cap b { color: var(--ink-2); }

/* ---- marginalia ---------------------------------------------------------
 *
 * Real notes, not decoration: each says something the paragraph does not, in
 * the voice of somebody who has done the work. Rotated a degree or two,
 * because a perfectly level annotation is not a pen.
 */
.mrg {
  position: absolute;
  font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink-red);
  opacity: .88;
  pointer-events: none;
  max-width: 220px;
}
.mrg.blue { color: var(--ink-blue); }
.mrg svg { overflow: visible; color: currentColor; }

/* Struck through, and the correction beside it: the note somebody actually
   made when the first answer turned out to be wrong. */
.mrg .strike { text-decoration: line-through; opacity: .55; }

@media (max-width: 1180px) { .mrg { display: none; } }

/* On a phone the board still works; the shadow does not. */
@media (max-width: 620px) {
  .paper { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(0,0,0,.3); }
}


/* ---- the wizard, one step at a time ------------------------------------- */
.wz-dots { display: flex; gap: 6px; margin-bottom: var(--s36); }
.wz-dots i {
  width: 26px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.14);
  transition: background-color .3s ease;
}
.wz-dots i.past { background: rgba(255,255,255,.34); }
.wz-dots i.on   { background: var(--iris); }

/* What the last answer told us. Amber, because it is the page speaking rather
   than the page asking. */
.wz-say {
  font-size: 15px; line-height: 1.55; color: var(--saffron);
  max-width: 62ch; margin: 0 0 var(--s30);
  padding-left: var(--s18);
  border-left: 2px solid rgba(255,184,41,.45);
}
.wz-say[hidden] { display: none; }

.wz-s { display: grid; gap: var(--s18); }
.wz-s[hidden] { display: none; }
.wz-k {
  font-size: 12px; font-weight: var(--w-semi); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ash); margin: 0;
}
.wz-s h2 { font-size: clamp(26px, 3.4vw, 44px); margin: 0; }
.wz-s .wz-hint { margin: 0 0 var(--s12); }

/* Without JavaScript every step is visible and the form still posts. */
.wz:not(.wz-live) .wz-dots,
.wz:not(.wz-live) .wz-bar #wznext { display: none; }
.wz:not(.wz-live) .wz-bar #wzsend { display: inline-flex !important; }
.wz:not(.wz-live) .wz-s { margin-bottom: var(--s60); }

/* A choice is a card you press, not a radio you aim at. */
.wz-pick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; max-width: 720px;
}
.wz-pick label { cursor: pointer; }
.wz-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.wz-pick span {
  display: grid; gap: 3px; padding: 16px 18px;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  font-size: 13px; color: var(--ash);
  transition: box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.wz-pick b { font-size: 20px; font-weight: var(--w-reg); color: var(--bone);
             letter-spacing: -.02em; }
.wz-pick label:hover span { box-shadow: inset 0 0 0 1px var(--ash); }
.wz-pick input:checked + span {
  background: rgba(128,82,255,.14);
  box-shadow: inset 0 0 0 2px var(--iris);
  color: var(--bone);
}
.wz-pick input:focus-visible + span { outline: 2px solid var(--iris-lift); outline-offset: 2px; }

.wz-bar {
  display: flex; align-items: center; gap: var(--s18); flex-wrap: wrap;
  margin-top: var(--s60); padding-top: var(--s30);
  border-top: 1px solid var(--hair);
}
.wz-err { font-size: 13px; color: #ff9d94; margin: 6px 0 0; }