/* ══════════════════════════════════════════════════════════════════════
   FOUNDER EFFECT

   Paper is the outermost ground. Every dark passage is an inset slab with
   a radius and a margin, so the page reads as objects laid on a sheet
   rather than as bands of colour. Ink is used only where the room is
   actually dark: the opening and the evening. Everything else prints on
   paper, including Figure 1, which is drawn bright-field and therefore
   belongs there.

   Type    Display and headings  Caledonia CC (Commercial Classics),
           served from typographer.io under licence. Body and labels
           Söhne (Klim), self-hosted. Both licensed to the client.
   Ink     #1C1712 · Slab #1A1510 · Heat #B0361F · Paper #F2EDE3

   Two rules that are easy to undo by accident:

   1. Caledonia is reached through "Caledonia CC Variable" ONLY. All eight
      static cuts declare the same family, weight and stretch, so the
      browser cannot tell display from text and silently resolves every
      one of them to text-regular. font-optical-sizing:auto then lets opsz
      track the computed px size through clamp(), which is the whole point
      of buying an optical family.

   2. There is exactly one weight, 400. Hierarchy comes from size, optical
      size and case. Nothing on this page may ask Caledonia for bold.

   No italic anywhere. Italic was doing hierarchy's job in three places
   and read as decoration; size and rules do it instead. Söhne halbfett
   and dreiviertelfett were dropped with the sans headings that used them.
   ══════════════════════════════════════════════════════════════════════ */

/* ── fonts ─────────────────────────────────────────────────────────── */
@font-face{font-family:Soehne;src:url(/assets/fonts/soehne-buch.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Soehne;src:url(/assets/fonts/soehne-kraftig.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ── tokens ────────────────────────────────────────────────────────── */
:root{
  --serif:"Caledonia CC Variable","Caledonia CC",Georgia,"Times New Roman",serif;
  --sans:Soehne,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  --paper:#F2EDE3;
  --paper-2:#EAE3D5;
  --paper-3:#E2DACA;

  --ink:#1C1712;
  /* .74 and .64 are the floors that still clear 4.5:1 on both grounds.
     Anything lighter is decoration and must not carry running text. */
  --ink-2:rgba(28,23,18,.74);
  --ink-3:rgba(28,23,18,.64);

  --slab:#1A1510;
  --on-slab:#F2EDE3;
  --on-slab-2:rgba(242,237,227,.74);
  --on-slab-3:rgba(242,237,227,.56);
  --slab-line:rgba(242,237,227,.18);

  --heat:#B0361F;
  --heat-deep:#8E2A17;
  --on-heat:#F7F3EC;
  /* --heat on --slab measures 3.4:1 and fails AA for body text. This is
     the raised value for anything set in heat on ink. */
  --heat-lift:#E2653C;

  --line:rgba(28,23,18,.17);
  --line-soft:rgba(28,23,18,.085);

  --measure:62ch;
  --in:min(90%,1140px);
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --pad:clamp(4.5rem,9vw,8rem);
  --inset:clamp(10px,1.5vw,20px);
  --rad:clamp(16px,2vw,28px);

  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}

/* ── reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}

body{
  font-family:var(--sans);font-weight:400;
  background:var(--paper);color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
  overflow-x:clip;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,textarea{font:inherit;color:inherit;background:none}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--heat);color:var(--on-heat)}
:focus-visible{outline:2px solid var(--heat);outline-offset:3px;border-radius:2px}

.skip{
  position:fixed;left:1rem;top:-4rem;z-index:200;
  background:var(--heat);color:var(--on-heat);padding:.7rem 1.1rem;
  font-size:.8125rem;font-weight:500;transition:top .2s var(--ease);
}
.skip:focus{top:1rem}

/* The shared engraved fill. Sized to nothing rather than display:none,
   because a hidden subtree stops resolving paint-server references in
   some engines and every icon on the page silently loses its fill. */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.hatch__line{stroke:var(--ink);stroke-width:.9;opacity:.5}
.hatch__line--heat{stroke:var(--heat);opacity:.8}

/* ══ layout ═════════════════════════════════════════════════════════ */
.in{width:var(--in);margin-inline:auto}
.section{padding-block:var(--pad);position:relative}
.section--alt{background:var(--paper-2);border-block:1px solid var(--line-soft)}
/* a rule only where two sections share a ground, so the page still has
   joints without carrying a border it does not need */
.section:not(.section--alt) + .section:not(.section--alt){border-top:1px solid var(--line-soft)}

.slab{
  position:relative;margin-inline:var(--inset);
  border-radius:var(--rad);background:var(--slab);color:var(--on-slab);
  overflow:hidden;
}
.slab .lockup__mark{fill:var(--heat-lift)}

/* ══ type ═══════════════════════════════════════════════════════════ */
/* Every serif element resolves through .sf so the optical-size behaviour
   is declared in exactly one place. */
.sf,.display,.pull,h3,.entry__head dfn,.entry__def,.card__thesis,
.run__t,.facts b,.tier__name,.foot__line{
  font-family:var(--serif);font-weight:400;
  font-optical-sizing:auto;font-synthesis:none;
}

.display{
  font-size:clamp(1.95rem,3.9vw,3.15rem);
  line-height:1.06;letter-spacing:-.016em;
  text-wrap:balance;max-width:20ch;
}
.lede{
  font-size:clamp(1.0625rem,1.45vw,1.1875rem);
  line-height:1.55;color:var(--ink-2);max-width:52ch;text-wrap:pretty;
}
.body{
  font-size:1.03125rem;line-height:1.68;
  color:var(--ink-2);max-width:var(--measure);text-wrap:pretty;
}
.body + .body{margin-top:1.15em}
.pull{
  font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.42;color:var(--ink);
  max-width:44ch;margin-top:2.4rem;padding-top:1.6rem;
  border-top:1px solid var(--line);
}
h3{font-size:1.1875rem;line-height:1.25;letter-spacing:-.004em}

/* Tracked caps read as engraved in a serif, which is why they are allowed
   here and were banned when the display face was Söhne. Do not set them
   in the sans. */
.caps{
  font-family:var(--serif);font-optical-sizing:auto;
  text-transform:uppercase;letter-spacing:.12em;word-spacing:.22em;
}

.head{padding-bottom:1.1rem;margin-bottom:clamp(2rem,4vw,3rem);border-bottom:2px solid var(--ink)}
.slab .head{border-bottom-color:var(--slab-line)}

.link{
  font-size:.9375rem;color:var(--heat);
  border-bottom:1px solid rgba(176,54,31,.35);
  padding-bottom:1px;transition:border-color .2s var(--ease);
}
.link:hover{border-bottom-color:var(--heat)}

/* ── buttons ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-optical-sizing:auto;font-weight:400;
  font-size:.9375rem;text-transform:uppercase;
  letter-spacing:.11em;word-spacing:.2em;
  min-height:2.875rem;padding:.95em 1.7em;
  border:1px solid var(--line);cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--heat{background:var(--heat);border-color:var(--heat);color:var(--on-heat)}
.btn--heat:hover{background:var(--heat-deep);border-color:var(--heat-deep);color:var(--on-heat)}
.btn--on{border-color:var(--slab-line);color:var(--on-slab)}
.btn--on:hover{background:var(--on-slab);border-color:var(--on-slab);color:var(--slab)}
.btn--full{width:100%}
.btn[disabled]{opacity:.55;cursor:default}

/* ══ chrome ═════════════════════════════════════════════════════════
   The nav lives inside the opening slab and does not follow the scroll.
   A header that hides and reappears is motion the page does not need,
   and the reference site does the same thing. app.js no longer touches
   it; if a sticky chrome is ever wanted back, it needs its own element
   rather than this one. */
.chrome{padding-block:clamp(1.1rem,2.2vw,1.7rem)}
.chrome__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.chrome__mark{display:flex;color:var(--on-slab)}
.lockup__word{fill:currentColor}
.lockup__mark{fill:var(--heat)}
.chrome__nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem)}
.chrome__nav a{font-size:.8125rem;color:var(--on-slab-2);transition:color .2s var(--ease)}
.chrome__nav a:hover{color:var(--on-slab)}
.chrome__cta{
  font-family:var(--serif);font-optical-sizing:auto;
  text-transform:uppercase;letter-spacing:.11em;word-spacing:.18em;
  color:var(--on-slab)!important;
  border:1px solid var(--slab-line);padding:.66em 1.25em;
}
.chrome__cta:hover{background:var(--on-slab);color:var(--slab)!important;border-color:var(--on-slab)}
@media(max-width:820px){.chrome__nav a:not(.chrome__cta){display:none}}

/* ══ 01 · hero ══════════════════════════════════════════════════════ */
.hero{
  margin-top:var(--inset);display:flex;flex-direction:column;
  min-height:clamp(520px,78svh,780px);
}
.hero__inner{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:clamp(2.5rem,7vh,4.5rem) clamp(2.5rem,6vh,4rem);
}
.hero__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.hero__title{font-size:clamp(2.6rem,7.2vw,6.25rem);line-height:.94;letter-spacing:-.028em;text-wrap:balance}
.hero__meta{
  text-align:right;font-size:.8125rem;line-height:1.9;
  color:var(--on-slab-2);padding-bottom:.4rem;
}
.hero__meta b{display:block;font-weight:400;color:var(--on-slab)}
.hero__tagline{
  font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.22;letter-spacing:-.008em;
  margin-top:clamp(1rem,2vw,1.5rem);max-width:24ch;
}
.hero__deck{margin-top:1.4rem;color:var(--on-slab-2);max-width:50ch}
.hero__actions{margin-top:clamp(2rem,4vw,2.75rem);display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.hero__note{font-size:.8125rem;color:var(--on-slab-3)}
@media(max-width:760px){.hero__meta{text-align:left;padding-bottom:0;margin-top:.5rem}}

/* ══ 02 · definition and figure ═════════════════════════════════════ */
.definition__grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.definition__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.entry{border-top:1px solid var(--ink);padding-top:1.1rem}
.entry__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem;font-size:1.5rem}
/* dfn, not em: the headword is a term being defined, not emphasis. Set
   roman, which is also what a dictionary does. */
.entry__head dfn{font-style:normal}
.entry__pos{
  font-family:var(--sans);font-size:.6875rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--heat);
}
.entry__def{margin-top:1rem;font-size:1.125rem;line-height:1.62;max-width:46ch}
.definition__note{padding-top:1.1rem;border-top:1px solid var(--line)}

.figure{margin-top:clamp(2.5rem,5vw,3.75rem)}
.figure__frame{border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
#plate{width:100%;aspect-ratio:16/7;opacity:0;transition:opacity 1s var(--ease)}
#plate.is-live{opacity:1}
@media(max-width:820px){#plate{aspect-ratio:4/3}}
@media(max-width:560px){#plate{aspect-ratio:5/4}}
.figure__readout{
  display:flex;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;
  padding-block:.75rem;border-bottom:1px solid var(--line);
  font-size:.6875rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);opacity:0;transition:opacity .8s var(--ease) .3s;
}
.figure:has(#plate.is-live) .figure__readout{opacity:1}
.figure__n{color:var(--heat)}
.figure__v{font-variant-numeric:tabular-nums}

/* ══ 03 · why San Diego, why now ════════════════════════════════════ */
.why__grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.why__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.marks{
  margin-top:clamp(2.5rem,5vw,3.75rem);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(1.75rem,3.5vw,3rem);
}
.mark__art{width:96px;height:auto;margin-bottom:1.1rem;overflow:visible}
/* Hatch alone does not read at icon scale: it dissolves into ticks and
   the shape is lost. Every form carries a solid outline and the hatch is
   texture inside it, which is how an engraving actually works. */
.mark__solid{stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.mark__solid--heat{stroke:var(--heat)}
.mark__rule{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.mark__rule--faint{stroke:var(--ink-3);stroke-width:1.4;stroke-dasharray:3 4}
.mark h3{margin-bottom:.4rem}
.mark p{font-size:.9375rem;line-height:1.55;color:var(--ink-2);max-width:26ch}

/* ══ 04 · business, science, capital ════════════════════════════════ */
.principles{
  margin-top:clamp(2.5rem,5vw,3.75rem);display:grid;
  gap:clamp(1.75rem,3vw,2.75rem);grid-template-columns:minmax(0,1fr);
}
@media(min-width:820px){.principles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.principle{border-top:1px solid var(--line);padding-top:1.15rem}
.principle__num{
  display:block;font-family:var(--serif);font-optical-sizing:auto;
  font-size:1.375rem;line-height:1;color:var(--heat);
  font-variant-numeric:lining-nums tabular-nums;margin-bottom:.85rem;
}
.principle h3{margin-bottom:.5rem}
.principle p{font-size:.96875rem;line-height:1.62;color:var(--ink-2)}

/* ══ 05 · theses ════════════════════════════════════════════════════ */
.rail{
  margin-top:clamp(2.5rem,4.5vw,3.5rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:max(var(--gutter),calc((100% - var(--in)) / 2));
  /* Without this the snap port starts at the border edge, so the browser
     scrolls the first card back over the padding and it sits flush to the
     viewport while every other element on the page is indented. */
  scroll-padding-inline:max(var(--gutter),calc((100% - var(--in)) / 2));
  padding-bottom:.5rem;cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.rail__track{display:flex;gap:1rem;width:max-content}

.card{
  scroll-snap-align:start;
  width:min(78vw,22rem);min-height:17rem;
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);
  padding:1.375rem 1.375rem 1.125rem;
  transition:border-color .25s var(--ease);
}
.card--flipped{border-color:var(--heat)}
.card__meta{
  display:flex;justify-content:space-between;gap:1rem;
  font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:.875rem;border-bottom:1px solid var(--line-soft);
}
.card__n{color:var(--heat);font-variant-numeric:tabular-nums}
.card__thesis{margin-top:1.125rem;flex:1;font-size:1.125rem;line-height:1.4}
.card__foot{margin-top:1.25rem}
.card__ask{font-size:.8125rem;color:var(--ink-3);margin-bottom:.625rem}
.card__votes{display:flex;gap:.5rem;flex-wrap:wrap}
.vote{
  flex:1 1 auto;min-height:2.25rem;padding:.4375rem .75rem;
  font-size:.8125rem;font-weight:500;
  border:1px solid var(--line);color:var(--ink-2);
  cursor:pointer;transition:all .2s var(--ease);
}
.vote:hover{border-color:var(--ink);color:var(--ink)}
.vote.is-on{background:var(--heat);border-color:var(--heat);color:var(--on-heat)}

.rail__controls{
  display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);
  margin-top:clamp(1.5rem,2.6vw,2rem);flex-wrap:wrap;
}
.rail__progress{flex:1 1 8rem;height:1px;background:var(--line);position:relative;min-width:6rem}
.rail__progress i{font-style:normal;position:absolute;inset:0 auto 0 0;width:12%;background:var(--heat);transition:width .2s var(--ease)}
.rail__buttons{display:flex;gap:.5rem}
.iconbtn{
  width:2.375rem;height:2.375rem;display:grid;place-items:center;
  border:1px solid var(--line);cursor:pointer;
  transition:border-color .2s var(--ease),opacity .2s var(--ease);
}
.iconbtn svg{width:1.125rem;height:1.125rem;fill:none;stroke:var(--ink);stroke-width:1.6}
.iconbtn:hover{border-color:var(--ink)}
.iconbtn[disabled]{opacity:.3;cursor:default}

/* ══ 06 · the evening ═══════════════════════════════════════════════
   On ink, at last. The photograph is a very dark candlelit interior, and
   the whole reason it used to carry lifted blacks and a paper veil was
   that it sat on paper and read as a lit screen embedded in a printed
   page. Against the slab it needs neither, so both are gone. */
.evening{margin-block:var(--inset);padding-block:clamp(3.5rem,7vw,6rem)}
.evening__media{
  position:relative;margin-bottom:clamp(2.5rem,5vw,3.75rem);
  aspect-ratio:21/9;overflow:hidden;border-radius:calc(var(--rad) - 12px);
  background:#100C09;
}
.evening__media img{width:100%;height:100%;object-fit:cover}
.run{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--slab-line);max-width:none}
.run li{
  display:grid;grid-template-columns:8.5rem minmax(0,1fr);
  gap:1.5rem;padding-block:1.15rem;border-bottom:1px solid var(--slab-line);
}
.run__t{font-size:1.0625rem;color:var(--heat-lift);font-variant-numeric:tabular-nums}
.run__d{font-size:.96875rem;line-height:1.6;color:var(--on-slab-2);max-width:56ch}
.evening__aside{margin-top:clamp(2rem,3.4vw,2.75rem);color:var(--on-slab-2);max-width:52ch}
@media(max-width:620px){.run li{grid-template-columns:minmax(0,1fr);gap:.35rem}}

/* ══ 07 · request an invite ═════════════════════════════════════════ */
.invite__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:900px){.invite__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.facts{margin-top:clamp(2rem,3.4vw,2.75rem);border-top:1px solid var(--line)}
.facts li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--line-soft);font-size:.9375rem;
}
.facts span{color:var(--ink-3)}
.facts b{font-weight:400;font-size:1.0625rem}

.form{background:var(--paper);border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.25rem)}
.form__row{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:560px){.form__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{margin-bottom:1.125rem}
.field label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.4375rem}
.field__hint{font-weight:400;color:var(--ink-3)}
.field input,.field textarea{
  width:100%;padding:.6875rem .8125rem;
  background:var(--paper);border:1px solid var(--line);
  font-size:.9375rem;line-height:1.5;transition:border-color .2s var(--ease);
}
.field textarea{resize:vertical;min-height:5.5rem}
.field input::placeholder,.field textarea::placeholder{color:rgba(28,23,18,.5)}
.field input:hover,.field textarea:hover{border-color:rgba(28,23,18,.32)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field.is-bad input,.field.is-bad textarea{border-color:var(--heat)}
.field__err{font-size:.8125rem;color:var(--heat);margin-top:.375rem;min-height:0}
.field.is-bad .field__err{min-height:1.2rem}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.form__note{font-size:.8125rem;color:var(--ink-3);margin-top:.875rem;line-height:1.5}
.form__note.is-bad{color:var(--heat)}
.form__note a{border-bottom:1px solid currentColor}
.form__done .label{
  font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--heat);margin-bottom:.625rem;
}
.form__done h3{font-size:1.375rem;margin-bottom:.75rem}

/* ══ 08 · partners ══════════════════════════════════════════════════ */
.tiers{margin-top:clamp(2.5rem,4.5vw,3.5rem);display:grid;gap:clamp(2rem,3.4vw,2.75rem)}
.tier__name{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.625rem;
  font-size:1.25rem;padding-bottom:.875rem;margin-bottom:1.125rem;
  border-bottom:1px solid var(--line);
}
.tier__tba{
  font-family:var(--sans);font-size:.6875rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.slots{display:flex;flex-wrap:wrap;gap:.875rem}
/* Fixed width, not a fractional track. On a grid, the single capability
   slot stretched to a third of the page and read as a layout fault; every
   tier should show the same size of reserved slot whatever its count. */
.slot{
  flex:0 0 clamp(9rem,20vw,13.5rem);
  aspect-ratio:16/7;display:grid;place-items:center;
  border:1px dashed var(--line);background:var(--paper);
}
.section--alt .slot{background:var(--paper-2)}
.slot img{width:clamp(1.5rem,2.6vw,2.125rem);height:auto;opacity:.16}
.partners__note{margin-top:clamp(2.25rem,4vw,3rem);font-size:.9375rem;color:var(--ink-3)}
.partners__note a{color:var(--heat);border-bottom:1px solid rgba(176,54,31,.35)}
@media(max-width:480px){.slot{flex:1 1 8.5rem}}

/* ══ footer ═════════════════════════════════════════════════════════ */
.foot{background:var(--paper-2);border-top:1px solid var(--line-soft);padding-block:clamp(3rem,6vw,4.5rem)}
.foot__inner{display:flex;flex-direction:column;gap:1.125rem;align-items:flex-start}
.foot .lockup{color:var(--ink)}
.foot__line{font-size:1.25rem;line-height:1.4;color:var(--ink);max-width:34ch;text-wrap:pretty}
.foot__fine{font-size:.875rem;color:var(--ink-3)}
.foot__fine a{border-bottom:1px solid var(--line)}
.foot__fine a:hover{border-bottom-color:var(--ink-3)}

/* ══ reveals ════════════════════════════════════════════════════════
   Short and masked. A long fade-up on every block is the single most
   recognisable tell of a template, and it makes a conservative page
   feel restless. */
[data-reveal]{opacity:0;transform:translateY(9px)}
.is-ready [data-reveal]{transition:opacity .45s var(--ease),transform .45s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  #plate{transition:none}
  .figure__readout{transition:none}
}

/* ══ print ══════════════════════════════════════════════════════════ */
@media print{
  .chrome,.rail__controls,.form,.skip{display:none}
  .section{padding-block:1.5rem}
  .slab{background:none;color:var(--ink);margin-inline:0}
  .hero{min-height:0}
  [data-reveal]{opacity:1;transform:none}
}