/* =========================================================================
   Cr4fts — venture studio. Excalidraw-flavoured hand-drawn styling.
   Shared across all pages. Shapes come from assets/js/sketch.js.
   ========================================================================= */

:root {
  /* Excalidraw's stock palette */
  --ink:        #1e1e1e;
  --ink-2:      #495057;
  --ink-3:      #6d747b;
  --paper:      #fdfcf8;
  --panel:      #ffffff;

  --red:        #e03131;  --red-bg:    #ffc9c9;
  --green:      #2f9e44;  --green-bg:  #b2f2bb;
  --blue:       #1971c2;  --blue-bg:   #a5d8ff;
  --yellow:     #f08c00;  --yellow-bg: #ffec99;
  --violet:     #9c36b5;  --violet-bg: #eebefa;
  /* the rest of Excalidraw's palette, for cards and illustrations */
  --teal:       #0c8599;  --teal-bg:   #99e9f2;
  --pink:       #c2255c;  --pink-bg:   #fcc2d7;
  --lime:       #66a80f;  --lime-bg:   #d8f5a2;
  --orange:     #e8590c;  --orange-bg: #ffd8a8;
  --indigo:     #3b5bdb;  --indigo-bg: #bac8ff;

  /* Text-safe accents. Same hues, dark enough to clear AA at body size. */
  --red-ink:    #c02626;  --green-ink: #1e7a32;
  --blue-ink:   #1665b0;  --yellow-ink: #8a5800;
  --violet-ink: #8a2caa;  --teal-ink:  #0a6577;
  --pink-ink:   #ab1f50;  --lime-ink:  #4a7a0c;
  --orange-ink: #b04a06;  --indigo-ink: #3550c4;

  --hover:      rgba(30, 30, 30, .055);
  --ring:       rgba(150, 110, 70, .32);

  --hand: "Virgil", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
  /* --hand is the pen the drawings are made with and svg text still uses it.
     --ui is everything set as type: headings, body, buttons, labels. Keeping
     them apart means the interface font can change without touching a single
     illustration. */
  --ui: var(--hand);
  /* essays are long — set the body of a note in something built for reading */
  --read: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype",
          Palatino, Georgia, ui-serif, serif;

  --shell: 1180px;
  --gut: clamp(18px, 5vw, 48px);
  /* One timing scale. Anything that moves picks from these. */
  --t-quick: 170ms;   /* pointer feedback, hovers */
  --t-base:  420ms;   /* small state changes */
  --t-slow:  780ms;   /* reveals, things arriving */
  --stagger:  95ms;   /* between siblings in a group */
  --ease-out: cubic-bezier(.16, 1, .3, 1);          /* settles, never bounces */
  --ease-in:  cubic-bezier(.55, 0, .85, .3);
  /* a pen accelerates into a stroke and coasts out of it */
  --ease-pen: cubic-bezier(.45, .05, .25, 1);
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M0.8 4.1C14 2.3 27 4.9 40 3.4 53 1.9 66 4.6 79 3.2 87 2.4 93 3.6 99.2 2.9' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

/* 17px root: Virgil runs small for its em size, so every rem-based size
   comes up with it rather than tuning each component by hand. */
html { font-size: 17px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 1.12rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Virgil ships one weight only — never fake a bold, it smears the strokes */
strong, b, h1, h2, h3, h4 { font-weight: 400; }
body { font-synthesis-weight: none; }

img, svg { max-width: 100%; }
svg text { font-family: var(--hand); }

a { color: var(--blue); text-decoration: none; }

:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --- sketch plumbing ------------------------------------------------------
   The wobble overflows the element box, so the layer must never be clipped
   and must sit behind the element's own text.                              */
[data-sketch] { position: relative; isolation: isolate; }

.sk-layer {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
}

/* --- reveal on scroll ------------------------------------------------------ */

/* Present in the outline, absent from the page: some sections are headed by
   the design rather than by text. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- layout ---------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

section { padding-block: clamp(52px, 8vw, 100px); }

.eyebrow {
  font-size: .92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 16px;
}

h1, h2, h3 { margin: 0; line-height: 1.1; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.4rem); line-height: 1.06; }
h2 { font-size: clamp(1.9rem, 4.3vw, 2.95rem); line-height: 1.14; }
h3 { font-size: 1.38rem; line-height: 1.26; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.12rem, 1.9vw, 1.34rem); color: var(--ink-2); line-height: 1.62; }
.small { font-size: .98rem; }

.section-head { max-width: 680px; margin-bottom: clamp(34px, 5vw, 58px); }
.section-head p { margin-top: 14px; }

.rule { display: block; width: 100%; height: 18px; overflow: visible; }

/* --- inline marks -----------------------------------------------------------
   These wrap freely: sketch.js measures each rendered line and draws one mark
   per line, so nothing has to be held on a single unbreakable row.          */
/* .mark is a true inline so a long phrase wraps like ordinary text and never
   pushes the punctuation after it onto a line of its own. Its highlight is
   drawn onto .sk-host, the block that contains it, one band per line. */
.mark { display: inline; }
.ul, .strike { display: inline-block; position: relative; }
.sk-host { position: relative; isolation: isolate; }
.lasso {
  display: inline-block; position: relative;
  white-space: nowrap;                 /* a lasso only makes sense round one line */
  margin-inline: 10px; padding-inline: 3px;
}
.strike { color: var(--ink-3); }

/* --- doodles ---------------------------------------------------------------- */
.doodle { position: absolute; overflow: visible; pointer-events: none; z-index: 2; }
.scrawl {
  font-size: 1rem;
  line-height: 1.3;
  color: var(--red-ink);
}

/* a slow, tiny drift — like the drawing can't sit still */
@keyframes drift {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
  50%      { transform: rotate(calc(var(--tilt, 0deg) + 1.2deg)) translateY(-4px); }
}
.floats { animation: drift 7s ease-in-out infinite; }

@keyframes twinkle {
  0%, 100% { opacity: .35; transform: scale(.82) rotate(-8deg); }
  50%      { opacity: 1;   transform: scale(1.06) rotate(6deg); }
}
.twinkles { animation: twinkle 3.4s ease-in-out infinite; }

/* --- buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px 14px;
  font-family: var(--ui);
  font-size: 1.06rem;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  transition: transform var(--t-quick) var(--ease-out);
}
.btn:hover  { transform: translate(-1px, -3px) rotate(-.6deg); }
.btn:active { transform: translate(0, 1px) rotate(.2deg); }
.btn .arw { transition: transform .18s var(--ease-out); }
.btn:hover .arw { transform: translateX(5px); }
.btn-sm { padding: 8px 18px 9px; font-size: 1.02rem; }
/* the nav CTA must never break across two lines */
.nav-links .btn { white-space: nowrap; }

/* --- nav ---------------------------------------------------------------------- */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-block: 14px;
  background: linear-gradient(var(--paper) 60%, transparent);
}
.nav { display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 18px; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 1.24rem; color: var(--ink); }
.brand .logo { width: 30px; height: 30px; flex: none; overflow: visible; transition: transform var(--t-base) var(--ease-out); }
.brand:hover .logo { transform: rotate(-9deg) scale(1.1); }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a {
  padding: 7px 13px;
  color: var(--ink-2);
  font-size: 1rem;
  border-radius: 9px;
  transition: color .15s ease, background .15s ease, transform .15s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); background: var(--hover); transform: translateY(-1px); }
.nav-links a.on { color: var(--ink); }
.nav-links .btn:hover { background: none; }

/* the nib re-draws every shape on the page */
.nib {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  padding: 0; margin-left: 4px;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-2);
  transition: transform .18s var(--ease-out), color .18s ease;
}
.nib svg { width: 21px; height: 21px; overflow: visible; }
.nib:hover { color: var(--ink); transform: rotate(-14deg) scale(1.12); }
@keyframes nib-spin { from { transform: rotate(0) } to { transform: rotate(360deg) } }
.nib.spin { animation: nib-spin .55s var(--ease-out); }

/* the switch shows the mode you'd move to */
.ico-moon { display: none; }
:root[data-theme="dark"] .ico-sun { display: none; }
:root[data-theme="dark"] .ico-moon { display: block; }

.nav-toggle { display: none; }

/* Six links, a CTA and two icon buttons stop fitting well before the
   hamburger breakpoint: at 900px the nibs were pushed past the viewport on
   every page. Tighten the row through the middle range instead of dropping
   straight to a menu. */
@media (min-width: 781px) and (max-width: 1120px) {
  .nav { gap: 8px; padding-inline: 12px; }
  .nav-links a { padding: 7px 8px; font-size: .97rem; }
  .nav-links .btn { padding: 8px 13px 9px; font-size: .97rem; }
  .brand { font-size: 1.12rem; gap: 8px; }
  .brand .logo { width: 26px; height: 26px; }
  .nib { width: 34px; height: 34px; margin-left: 0; }
  .nib svg { width: 18px; height: 18px; }
}

/* --- hero ---------------------------------------------------------------------- */
.hero { padding-top: clamp(20px, 3.5vw, 40px); padding-bottom: clamp(34px, 5vw, 68px); position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(26px, 5vw, 58px);
  align-items: center;
}
.hero h1 { margin-bottom: 24px; position: relative; }
.hero .lede { max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; font-size: 1.02rem; color: var(--ink-3); }

.hero .star { top: -26px; right: 4%; width: 40px; height: 40px; }
.hero-art-wrap { position: relative; }
/* The diagram is portrait now, so width is what sets its height. Left to fill
   the grid column it would run past nine hundred pixels tall and swallow the
   hero, so it is capped and centred in whatever room it has. */
.hero-art { width: 100%; max-width: 330px; height: auto; overflow: visible; margin-inline: auto; display: block; }

/* --- companies strip -------------------------------------------------------------- */
.strip { padding-block: clamp(22px, 3.5vw, 34px); }
.strip-inner { display: flex; align-items: center; gap: clamp(16px, 3.2vw, 40px); flex-wrap: wrap; }
.strip-label { font-size: .94rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.strip-names { display: flex; align-items: center; gap: clamp(14px, 2.8vw, 32px); flex-wrap: wrap; }
.strip-names span {
  font-size: 1.2rem; color: var(--ink-2);
  transition: transform .2s var(--ease-out), color .2s ease;
}
.strip-names span:nth-child(2n) { transform: rotate(.8deg); }
.strip-names span:nth-child(3n) { transform: rotate(-1deg); }
.strip-names span:hover { color: var(--ink); transform: rotate(-2.5deg) scale(1.09); }

/* --- process flow (the whiteboard) ------------------------------------------------- */
.flow { position: relative; }
.flow-arrows {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  z-index: 0;
}
.flow-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(48px, 6vw, 76px) clamp(42px, 5.5vw, 66px);
}
.brief-art {
  display: block; width: 100%; height: auto;
  overflow: visible; margin-bottom: 14px;
  transition: transform var(--t-base) var(--ease-out);
}
.card:hover .brief-art { transform: rotate(-1deg) scale(1.02); }
/* the brief cards carry a picture now, so they match the venture card padding */
.cards.hunts .card { padding: 14px 16px 20px; }
.cards.hunts .card > :not(.brief-pic) { padding-inline: 6px; }
.brief-pic { display: block; position: relative; }

.step-art {
  display: block; width: 100%; height: auto;
  overflow: visible; margin-bottom: 14px;
  transition: transform var(--t-base) var(--ease-out);
}
.step:hover .step-art { transform: rotate(-1deg) scale(1.02); }
.step h3, .step p, .step .when { margin-inline: 6px; }

.step {
  padding: 14px 16px 20px;
  --tilt: 0deg;
  transform: rotate(var(--tilt));
  transition: transform var(--t-base) var(--ease-out);
}
.step:nth-child(2n) { --tilt: -.5deg; }
.step:nth-child(3n) { --tilt: .55deg; }
.step:hover { transform: rotate(calc(var(--tilt) * -1)) translateY(-5px); }

.step h3 { margin-bottom: 8px; }
.step p { font-size: 1.04rem; color: var(--ink-2); line-height: 1.55; }
.step .when {
  display: inline-block; margin-top: 14px;
  padding: 3px 13px 4px;
  font-size: .98rem; letter-spacing: .06em; text-transform: uppercase;
}

/* the section head, with a scrawled aside off to one side of it */
.studio-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(34px, 5vw, 58px);
}
.studio-head .section-head { margin-bottom: 0; }
.head-note { display: flex; align-items: flex-start; gap: 4px; padding-top: 30px; }
.aside-note {
  max-width: 210px;
  margin: 0;
  padding: 12px 16px;
  font-size: 1rem; line-height: 1.4;
  color: var(--red-ink);
  --tilt: 2.5deg;
  transform: rotate(var(--tilt));
}
.doodle-inline { flex: none; width: 62px; height: 56px; overflow: visible; margin-top: 18px; }

/* --- what we put in ------------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.card {
  padding: 26px 26px 28px;
  --tilt: 0deg;
  transform: rotate(var(--tilt));
  transition: transform var(--t-base) var(--ease-out);
}
.card:nth-child(2n) { --tilt: -.45deg; }
.card:nth-child(3n) { --tilt: .5deg; }
.card:hover { transform: rotate(calc(var(--tilt) * -1.6)) translateY(-6px); }
.card .icon { width: 52px; height: 52px; margin-bottom: 16px; overflow: visible; transition: transform var(--t-base) var(--ease-out); }
.card:hover .icon { transform: rotate(-8deg) scale(1.1); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 1.04rem; color: var(--ink-2); line-height: 1.55; }
.card .kicker { display: block; margin-top: 14px; font-size: 1rem; }

/* --- convictions & open briefs ------------------------------------------------
   Both run longer than the four-up cards, so they get their own column counts. */
.cards.convictions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.2vw, 40px); }

/* Convictions are pinned to the page like notes on a board. Each card gets one
   strip of tape, and no two land in the same place — some over a corner, some
   along an edge, one or two nowhere near either. z-index lifts the strip over
   the card's own background layer, which sits at -1. */
.conviction { position: relative; }
.tape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transition: transform var(--t-base) var(--ease-out);
}
.conviction:hover .tape { transform: rotate(var(--tape-rot)) scale(1.04); }

/* Each strip straddles what it is holding: roughly half on the card, half on
   the board behind it. The side ones are steep rather than vertical — a strip
   seen exactly end-on reads as a stray mark, not as tape. */
.tape-1 { top: -14px; left: -20px;  width: 88px; height: 27px; --tape-rot: -40deg; }
.tape-2 { top: -14px; right: -18px; width: 78px; height: 24px; --tape-rot: 38deg; }
.tape-3 { top: -15px; left: 50%; margin-left: -47px; width: 94px; height: 26px; --tape-rot: -3deg; }
.tape-4 { bottom: -13px; right: -18px; width: 82px; height: 25px; --tape-rot: -34deg; }
.tape-5 { top: 31%; left: -38px; width: 76px; height: 25px; --tape-rot: -68deg; }
.tape-6 { top: 9px; left: 30px; width: 72px; height: 22px; --tape-rot: 7deg; }
.tape-7 { bottom: -13px; left: -18px; width: 80px; height: 26px; --tape-rot: 35deg; }
.tape-8 { top: 28%; right: -38px; width: 76px; height: 24px; --tape-rot: 66deg; }
.tape { transform: rotate(var(--tape-rot)); }

@media (max-width: 640px) {
  /* One column, so a strip hanging off the side can push the page wide. */
  .tape-5, .tape-8 { display: none; }
  .tape-1, .tape-7 { left: -8px; }
  .tape-2, .tape-4 { right: -8px; }
}
.conviction h3 { font-size: 1.18rem; line-height: 1.28; }
.conviction-art {
  display: block; width: 100%; height: auto;
  overflow: visible; margin-bottom: 14px;
  transition: transform var(--t-base) var(--ease-out);
}
.conviction:hover .conviction-art { transform: rotate(-1deg) scale(1.02); }
/* the picture goes edge to edge like the venture and brief cards do */
.cards.convictions .conviction { padding: 14px 16px 20px; }
.cards.convictions .conviction > :not(.conviction-art):not(.tape) { padding-inline: 6px; }

/* Seven briefs in a three-column grid strands the last one on its own row.
   Flex wraps the same way but centres whatever is left over. */
.cards.hunts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.cards.hunts > * { flex: 1 1 288px; max-width: 372px; }

@media (max-width: 1000px) {
  .cards.convictions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.hunts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cards.convictions, .cards.hunts { grid-template-columns: 1fr; }

  /* One brief per row, the full width of the shell: picture down the left at
     the card's full height, words to the right of it. The picture stretches
     to the card rather than keeping its own ratio, which is why it carries
     preserveAspectRatio="slice" — it fills the column and crops instead of
     sitting in a letterbox.
     Scoped to .brief — the people page reuses .cards.hunts for partner
     cards, which are a different shape. */
  .cards.hunts > .brief { max-width: none; flex-basis: 100%; }
  .brief { display: flex; align-items: stretch; gap: 13px; }
  .brief .brief-pic {
    flex: none; width: 38%; align-self: stretch;
    display: flex; align-items: center;        /* motif centred on its tile */
  }
  .brief .brief-art { width: 100%; margin: 0; }
  .brief .brief-body { flex: 1 1 auto; min-width: 0; }
}

/* --- ventures --------------------------------------------------------------------------- */
.ventures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(284px, 1fr));
  gap: clamp(20px, 2.8vw, 30px);
}
.venture {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 14px 16px 20px;
  color: inherit;
  --tilt: 0deg;
  transform: rotate(var(--tilt));
  transition: transform var(--t-base) var(--ease-out);
}
.vcard {
  display: block; width: 100%; height: auto;
  overflow: visible; margin-bottom: 14px;
  transition: transform var(--t-base) var(--ease-out);
}
.venture:hover .vcard { transform: rotate(-1.2deg) scale(1.025); }
/* The pill is nowrap and flex:none, so a long sector next to a long name
   (Stablemeans + INFRASTRUCTURE) pushed past the card at three columns.
   Let the row wrap and the title shrink instead. */
.venture .v-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 12px; padding-inline: 6px;
}
.venture .v-top h3 { min-width: 0; overflow-wrap: anywhere; }
.venture p { margin-top: 10px; padding-inline: 6px; font-size: 1.03rem; color: var(--ink-2); line-height: 1.5; }
.venture:nth-child(3n) { --tilt: .5deg; }
.venture:nth-child(4n) { --tilt: -.45deg; }
.venture:hover { transform: rotate(calc(var(--tilt) * -1.4)) translate(-2px, -6px); }
.venture h3 { font-size: 1.28rem; }
.pill {
  flex: none;
  padding: 4px 17px 5px;
  font-size: .88rem; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(1.4deg);
  transition: transform var(--t-base) var(--ease-out);
}
.venture:hover .pill { transform: rotate(-3.5deg) scale(1.06); }

/* --- thesis ------------------------------------------------------------------------------ */
.thesis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(296px, 1fr));
  gap: clamp(26px, 5vw, 56px);
}
.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0;
  font-size: 1.05rem; line-height: 1.45;
  transition: transform .18s var(--ease-out);
}
.list li:hover { transform: translateX(5px); }
.list .box { flex: none; width: 26px; height: 26px; margin-top: 2px; overflow: visible; transition: transform var(--t-base) var(--ease-out); }
.list li:hover .box { transform: rotate(-10deg) scale(1.12); }
.list.no li { color: var(--ink-3); }
.list-title { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font-size: 1.26rem; }

/* --- quote ---------------------------------------------------------------------------------- */
.quote-wrap {
  position: relative;
  max-width: 830px; margin-inline: auto;
  text-align: center;
  padding: clamp(34px, 5vw, 56px) clamp(26px, 5vw, 62px);
}
.quote { font-size: clamp(1.32rem, 2.9vw, 1.95rem); line-height: 1.4; margin: 0; }
.quote-by { margin-top: 24px; font-size: 1rem; color: var(--ink-3); }

/* --- closing call ------------------------------------------------------------------------------ */
.cta { position: relative; text-align: center; padding: clamp(42px, 6vw, 70px) clamp(22px, 5vw, 58px); }
.cta h2 { margin-bottom: 16px; }
.cta .lede { max-width: 40em; margin-inline: auto; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }
.cta-fine { margin-top: 22px; font-size: 1rem; color: var(--ink-3); }
.cta .arrow-down { right: 8%; top: -84px; width: 46px; height: 88px; }

/* =========================================================================
   Sub-pages
   ========================================================================= */

/* --- page header ------------------------------------------------------------ */
.page-head { padding-block: clamp(30px, 5vw, 56px) clamp(30px, 4vw, 48px); }
.page-head h1 { font-size: clamp(2.2rem, 5.4vw, 3.7rem); margin-bottom: 20px; }
.page-head .lede { max-width: 36em; }

/* a section head with a "see all" link parked on the right */
.head-row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 18px 32px;
  margin-bottom: clamp(30px, 4.5vw, 54px);
}
.head-row .section-head { margin-bottom: 0; }
.more {
  display: inline-flex; align-items: center; gap: 9px;
  flex: none;
  font-size: 1.05rem; color: var(--ink);
  padding-bottom: 4px;
  transition: transform .18s var(--ease-out);
}
.more:hover { transform: translateX(4px) rotate(-.7deg); }
.more .arw { transition: transform .18s var(--ease-out); }
.more:hover .arw { transform: translateX(5px); }

/* --- people ------------------------------------------------------------------ */
/* Explicit column counts, not auto-fit: six people auto-fitting lands on an
   ugly 4 + 2 at desktop widths. */
.people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.people.row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.people.row .face { width: clamp(88px, 9vw, 116px); height: clamp(88px, 9vw, 116px); }
.people.row h3 { font-size: 1.05rem; }
.people.row .role { font-size: .96rem; }

.person { text-align: center; --tilt: 0deg; transform: rotate(var(--tilt)); }
.person > * { max-width: 30ch; margin-inline: auto; }
.person:nth-child(2n) { --tilt: -.8deg; }
.person:nth-child(3n) { --tilt: .7deg; }
.person .face {
  width: clamp(112px, 14vw, 136px); height: clamp(112px, 14vw, 136px);
  overflow: visible;
  transition: transform var(--t-base) var(--ease-out);
}
.person:hover .face { transform: rotate(-6deg) scale(1.08) translateY(-4px); }
.person h3 { margin-top: 12px; font-size: 1.2rem; }
.person .role { margin-top: 4px; font-size: 1.02rem; color: var(--ink-3); }
.person .bio { margin-top: 10px; font-size: 1rem; color: var(--ink-2); line-height: 1.45; }

/* founders in residence read as a row of cards */
.residents { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(18px, 2.4vw, 26px); }
.resident { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.resident .face { width: 72px; height: 72px; flex: none; overflow: visible; }
.resident h3 { font-size: 1.12rem; }
.resident .role { font-size: .98rem; color: var(--ink-3); margin-top: 3px; }

/* --- notes ---------------------------------------------------------------------- */
.notes-list { display: grid; gap: clamp(16px, 2.2vw, 22px); }
/* cr4fts.com publishes no dates on notes, so the row is title + standfirst */
.note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px 24px;
  padding: 22px 24px;
  color: inherit;
  --tilt: 0deg;
  transform: rotate(var(--tilt));
  transition: transform .2s var(--ease-out);
}
.note:nth-child(2n) { --tilt: -.3deg; }
.note:hover { transform: rotate(calc(var(--tilt) * -1)) translateX(5px); }
.note h3 { font-size: 1.28rem; }
.note p { margin-top: 6px; font-size: 1.03rem; color: var(--ink-2); line-height: 1.5; }
.note .arw { font-size: 1.3rem; color: var(--ink-3); transition: transform .18s var(--ease-out); }
.note:hover .arw { transform: translateX(5px); color: var(--ink); }

/* --- note illustrations -------------------------------------------------------- */
.note-art {
  display: block; flex: none;
  width: 104px; height: auto;
  overflow: visible;
  transition: transform var(--t-base) var(--ease-out);
}
.note:hover .note-art { transform: rotate(-2deg) scale(1.06); }
.note-hero { display: block; width: 100%; max-width: 330px; height: auto; overflow: visible; margin-bottom: clamp(26px, 4vw, 38px); }

/* --- a note, read in full ----------------------------------------------------------- */
.prose { max-width: 34em; font-family: var(--read); }
/* essays contain the odd long token; it must break, not widen the page */
.prose, .prose p, .prose h2, .prose li, .note-head h1 { overflow-wrap: break-word; }
.prose p { margin: 0 0 1.25em; font-size: 1.09rem; line-height: 1.65; color: var(--ink-2); }
.prose h2 {
  font-family: var(--read);
  font-weight: 600;
  margin: 1.9em 0 .55em;
  font-size: clamp(1.35rem, 2.5vw, 1.72rem);
  line-height: 1.24;
  color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.prose li { margin-bottom: .5em; font-size: 1.09rem; line-height: 1.6; color: var(--ink-2); }
.prose blockquote {
  margin: 1.5em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--yellow);
  font-size: 1.1rem;
  color: var(--ink);
}
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* A figure breaks the measure deliberately: the prose column is 34em and a
   chart needs more room than that to be readable. */
.prose figure {
  margin: 2.2em 0;
  width: min(100%, 46em);
  max-width: none;
}
.prose figure .fig { display: block; width: 100%; height: auto; overflow: visible; }
.prose figcaption {
  margin-top: 12px;
  font-size: .99rem;
  line-height: 1.5;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .prose figure { margin-block: 1.8em; }
}
/* The global rule pins strong to 400 because Virgil has one weight and faking a
   bold smears it. Prose is set in Charter, which has a real bold, so emphasis
   inside an essay can be actual emphasis. */
.prose strong, .prose b { font-weight: 700; }

.note-head { max-width: 34em; }
.note-head h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 16px; }
.note-head .standfirst { font-family: var(--read); font-size: clamp(1.02rem, 1.8vw, 1.2rem); color: var(--ink-3); line-height: 1.55; }
.note-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; font-size: 1rem; color: var(--ink-3); }

.note-foot { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-top: clamp(40px, 5vw, 64px); }
/* .more is flex:none so it never shrinks; inside the prev/next row a long
   note title would push past the viewport, so let these two shrink and wrap. */
.note-foot .more {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46%;
  text-align: left;
}
.note-foot .more:last-child { text-align: right; }
@media (max-width: 640px) {
  .note-foot { flex-direction: column; align-items: flex-start; }
  .note-foot .more { max-width: 100%; text-align: left; }
  .note-foot .more:last-child { text-align: left; }
}

/* --- founder anatomy plate ------------------------------------------------
   The labelled drawing carries this on desktop. Below 780px the labels would
   be about seven pixels tall, so the list takes over instead. */
.anatomy {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  margin: clamp(8px, 2vw, 24px) auto 0;
  overflow: visible;
}
.anatomy-list { display: none; max-width: 640px; margin-inline: auto; }

@media (max-width: 780px) {
  .anatomy { display: none; }
  .anatomy-list { display: block; }
}

/* --- filter chips ----------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(26px, 4vw, 40px); }
.chip {
  padding: 8px 18px 9px;
  font-family: var(--ui); font-size: 1.04rem;
  color: var(--ink-2);
  background: none; border: 0; cursor: pointer;
  transition: transform .16s var(--ease-out), color .16s ease;
}
.chip:hover { transform: translateY(-2px) rotate(-1deg); color: var(--ink); }
.chip[aria-pressed="true"] { color: var(--ink); }
.venture.is-out { display: none; }

/* --- terms table ------------------------------------------------------------------- */
.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(18px, 2.4vw, 26px); }
/* five cards auto-fit to 4 + 1; three up gives 3 + 2 instead */
.terms.why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .terms.why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .terms.why { grid-template-columns: 1fr; } }
.term { padding: 22px 24px 24px; }
.term .k { font-size: .94rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.term-art {
  display: block; width: 100%; height: auto;
  overflow: visible; margin-bottom: 14px;
  transition: transform var(--t-base) var(--ease-out);
}
.term:hover .term-art { transform: rotate(-1deg) scale(1.02); }
.terms.why .term { padding: 14px 16px 20px; }
.terms.why .term .v { padding-inline: 6px; }
.terms.why .term p:not(.v) { padding-inline: 6px; }
.term .v { margin-top: 8px; font-size: 1.5rem; line-height: 1.2; }
.term p { margin-top: 10px; font-size: 1.02rem; color: var(--ink-2); line-height: 1.5; }
/* the six thesis cards are links to the essay behind each one */
a.term { display: block; color: inherit; }
.term-more {
  display: block; margin-top: 14px; padding-inline: 6px;
  font-size: .98rem; color: var(--ink-3);
  transition: color var(--t-quick) var(--ease-out);
}
a.term:hover .term-more { color: var(--ink); }
a.term .arw { display: inline-block; transition: transform var(--t-quick) var(--ease-out); }
a.term:hover .arw { transform: translateX(4px); }

/* --- sketchy form fields --------------------------------------------------------------- */
.form { display: grid; gap: 20px; max-width: 660px; margin-inline: auto; text-align: left; }
.field label { display: block; margin-bottom: 8px; font-size: 1.04rem; }
.field .hint { color: var(--ink-3); font-size: .96rem; }
/* the control itself can't hold a child SVG, so the border lives on the wrap */
.input-wrap { display: block; }
.input {
  display: block; width: 100%;
  padding: 13px 16px;
  font-family: var(--ui); font-size: 1.02rem; color: var(--ink);
  background: none; border: 0; outline: 0;
  border-radius: 10px;
}
.input::placeholder { color: var(--ink-3); }
textarea.input { min-height: 132px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-note { font-size: 1rem; color: var(--ink-3); text-align: center; }
.form-done {
  display: none;
  padding: 22px 26px;
  text-align: center; font-size: 1.15rem;
}
.form.sent .form-done { display: block; }
.form.sent .field, .form.sent .form-actions, .form.sent .form-row { display: none; }

.form-failed { display: none; padding: 22px 26px; text-align: center; font-size: 1.06rem; }
.form.failed .form-failed { display: block; }
.form.sending { opacity: .62; }
.form.sending button[type=submit] { cursor: progress; }

/* --- workspace plan ---------------------------------------------------------------------- */
.plan { width: 100%; height: auto; overflow: visible; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(26px, 5vw, 54px); align-items: center; }

/* --- a note's tools --------------------------------------------------------- */
/* Sits under the standfirst, so it is the first thing a reader can act on
   rather than a reward for reaching the end. */
.note-tools {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 26px;
  margin-top: 22px;
  max-width: 34em;
}
.note-short { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; }
.note-short-label { font-size: .96rem; color: var(--ink-3); }
.note-short-code {
  font-family: var(--ui);
  font-size: 1.04rem;
  color: var(--ink);
  border-bottom: 2px dotted var(--ink-3);
  padding-bottom: 1px;
}
.note-copy {
  font-family: var(--ui); font-size: .96rem;
  color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer;
}
.note-copy:hover { color: var(--ink); }
.note-tools .more { background: none; border: 0; cursor: pointer; font-size: 1.04rem; }

/* --- print, which is also how the PDF is made --------------------------------
   The reader asked for a document, so this is not the screen with the colours
   removed. Everything that only makes sense on a website comes out: the nav,
   the footer, the theme toggle, the prev/next, the tools themselves. What is
   left is the title, the standfirst, the writing and its figures. */
@media print {
  /* .read-progress is position:fixed, so without this it reprints on every
     single sheet as a stray red mark at the top and bottom of the page. */
  .nav-wrap, .foot, .note-foot, .note-tools, .no-print, .read-progress,
  .nib, .nav-toggle, .doodle, .rule, .note-hero { display: none !important; }

  html { font-size: 12pt; }
  body {
    background: #fff; color: #000;
    /* the hand-drawn ink is a joy on screen and mud on paper */
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  section { padding: 0 !important; }
  .shell { max-width: none; padding: 0; }

  .note-head h1 { font-size: 22pt; margin-bottom: 8pt; }
  .note-head .standfirst { font-size: 12pt; color: #444; }
  .page-head { margin-bottom: 16pt; }

  .prose { max-width: none; }
  .prose p, .prose li { font-size: 11pt; line-height: 1.5; color: #111; }
  .prose h2 {
    font-size: 14pt; margin-top: 18pt; margin-bottom: 6pt;
    /* a heading alone at the foot of a page is the classic print failure */
    break-after: avoid; page-break-after: avoid;
  }
  .prose figure, .prose figcaption {
    break-inside: avoid; page-break-inside: avoid;
  }
  .prose figure { width: 100%; max-width: none; margin: 14pt 0; }
  .prose a { color: #000; }
  /* on paper a link is only useful if you can see where it goes */
  .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }

  @page { margin: 18mm 16mm 20mm; }
}

/* --- paging the notes ------------------------------------------------------- */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  margin-top: clamp(30px, 4vw, 46px);
}
.pager-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px 11px;
  color: var(--ink);
}
.pager-step .arw { transition: transform var(--t-quick) var(--ease-out); }
.pager-step[rel=prev]:hover .arw { transform: translateX(-4px); }
.pager-step[rel=next]:hover .arw { transform: translateX(4px); }
/* the ends of the run stay in place rather than disappearing, so the row
   does not jump around as you page through it */
.pager-step.is-off { color: var(--ink-3); opacity: .45; }

.pager-nums { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 16px); }
.pager-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 4px 2px;
  color: var(--ink-3);
  transition: color var(--t-quick) var(--ease-out);
}
.pager-num:hover { color: var(--ink); }
.pager-num.on { position: relative; color: var(--ink); }

@media (max-width: 560px) {
  .pager-step { padding: 9px 14px 10px; }
}

/* --- searching the notes ---------------------------------------------------- */
.note-search {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  max-width: 560px; margin-bottom: clamp(20px, 3vw, 30px);
}
.note-search .input-wrap { flex: 1 1 240px; }
.note-search .input { font-size: 1.04rem; }
/* the button is how this works without JS; with JS the field submits itself */
.js .note-search .js-hide { display: none; }
.note-search-count { flex: 1 0 100%; margin: 0; font-size: .98rem; color: var(--ink-3); }
.note-empty { margin-top: 8px; font-size: 1.06rem; color: var(--ink-3); }

/* --- footer ------------------------------------------------------------------------------------- */
.foot { padding-block: clamp(36px, 5vw, 62px) 44px; }
.foot .rule { margin-bottom: clamp(32px, 5vw, 50px); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(22px, 4vw, 40px); }
.foot h3 { margin: 0 0 12px; font-size: .94rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: 5px 0; }
.foot li a { color: var(--ink-2); display: inline-block; transition: transform .16s var(--ease-out), color .16s ease; }
.foot li a:hover { color: var(--ink); transform: translateX(4px) rotate(-1deg); }
.foot-brand p { margin-top: 14px; max-width: 30ch; font-size: 1.02rem; color: var(--ink-3); line-height: 1.5; }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  justify-content: space-between; align-items: center;
  margin-top: clamp(32px, 5vw, 50px);
  font-size: .96rem; color: var(--ink-3);
}

/* --- responsive ------------------------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art-wrap { width: 100%; max-width: 420px; margin-inline: auto; }
  .hero .star { right: 2%; top: -18px; }
  .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people, .people.row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio-head { grid-template-columns: 1fr; }
  .head-note { padding-top: 4px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  body { font-size: 1.08rem; }

  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 10px); right: 0; left: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 14px;
    background: var(--panel);
    border: 2.2px solid var(--ink);
    border-radius: 14px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 14px; font-size: 1.05rem; }
  .nav-links .btn { margin-top: 6px; justify-content: flex-start; }
  .nav { position: relative; }
  .nav-toggle { display: inline-flex; margin-left: auto; }

  .flow-grid { grid-template-columns: 1fr; gap: 58px; }
  .step, .card, .venture, .person, .note { --tilt: 0deg !important; }
  .doodle-inline { display: none; }
  .cta .arrow-down { display: none; }
  .plan-grid { grid-template-columns: 1fr; }
  .people, .people.row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note { grid-template-columns: minmax(0, 1fr) auto; }
  .note-art { display: none; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .foot-grid { grid-template-columns: 1fr; }
  .hero-cta .btn, .cta-row .btn { width: 100%; }
  .strip-inner { gap: 12px; }
  .hero .star { display: none; }
}

/* =========================================================================
   Motion. Everything here is opt-out under prefers-reduced-motion, which is
   handled once at the bottom of the file.
   ========================================================================= */

/* --- cross-page transitions -----------------------------------------------
   Native MPA view transitions: moving between pages reads as one continuous
   sheet of paper rather than a hard document swap. The nav and footer are
   named so they stay put while the body crossfades under them. */
@view-transition { navigation: auto; }

.nav-wrap { view-transition-name: site-nav; }
.foot     { view-transition-name: site-foot; }

/* The old page lifts away quickly and the new one does NOT fade in: the
   snapshot would hide the very thing that makes this site what it is. Keep the
   transition short and the sketch engine draws the new page in front of you. */
::view-transition-old(root) { animation: page-out .28s var(--ease-in) both; }
::view-transition-new(root) { animation: page-in .01s linear both; }

@keyframes page-out { to { opacity: 0; transform: translateY(-14px) rotate(-.5deg); } }
@keyframes page-in  { from { opacity: 1; } }

/* the chrome shouldn't animate at all — it's the fixed part of the drawing */
::view-transition-group(site-nav),
::view-transition-group(site-foot) { animation-duration: 0s; }

/* --- things arrive, they do not snap ---------------------------------------
   Duration is deliberately long: the page is meant to feel drawn, and a 400ms
   fade reads as a UI transition rather than something being placed. The delay
   comes from JS, ordered by position in the group. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px) rotate(var(--settle, -.4deg));
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal]:nth-of-type(2n) { --settle: .5deg; }
.js [data-reveal]:nth-of-type(3n) { --settle: -.3deg; }


/* --- links underline themselves, by hand ---------------------------------- */
.prose a, .foot li a, .note-head a, .eyebrow a {
  position: relative;
  text-decoration: none;
}
.prose a::after, .foot li a::after, .note-head a::after, .eyebrow a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 6px;
  background: currentColor;
  -webkit-mask: var(--squiggle) no-repeat left center / 100% 100%;
          mask: var(--squiggle) no-repeat left center / 100% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-out);
}
.prose a:hover::after, .foot li a:hover::after,
.note-head a:hover::after, .eyebrow a:hover::after { transform: scaleX(1); }

/* --- doodles drift at their own pace as you scroll ------------------------ */
.doodle { will-change: transform; }

/* --- venture art tilts into the pointer ----------------------------------- */
.venture { transform-style: preserve-3d; }

/* --- reading progress on a note ------------------------------------------ */
.read-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 10px;
  z-index: 70;
  pointer-events: none;
  overflow: visible;
}
.read-progress path { transition: stroke-dashoffset .12s linear; }

/* --- buttons lean toward the pointer -------------------------------------- */
.btn, .more { will-change: transform; }
.btn.magnetic { transition: transform var(--t-quick) var(--ease-out); }

/* --- links that underline themselves on hover ----------------------------- */
.prose a, .foot li a, .note-foot .more { position: relative; }

/* --- the nib press ---------------------------------------------------------
   Re-inking the page is the payoff, so the button gets a visible wind-up. */
@keyframes nib-throw {
  0%   { transform: rotate(0) scale(1); }
  35%  { transform: rotate(-24deg) scale(1.18); }
  100% { transform: rotate(360deg) scale(1); }
}
.nib.spin { animation: nib-throw .62s var(--ease-out); }

/* --- section rules draw themselves as they scroll past -------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rule path {
      animation: ink-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 32%;
    }
    @keyframes ink-in { from { stroke-dashoffset: var(--len, 0); } to { stroke-dashoffset: 0; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  @view-transition { navigation: none; }
  .read-progress { display: none; }
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================================
   Dark mode. Every drawn shape already paints with var(--ink) / var(--*-bg),
   so swapping the tokens re-inks the whole site — no redraw needed.
   Three states: system light, system dark, and an explicit choice that wins
   over both via data-theme on <html>.
   ========================================================================= */
:root {
  --d-ink: #e8e6e3;
  --d-ink-2: #b6bcc2;
  --d-ink-3: #868d94;
  --d-paper: #131316;
  --d-panel: #1f1f23;
  --d-red: #ff8787;
  --d-red-bg: #5c2b2b;
  --d-green: #69db7c;
  --d-green-bg: #255c31;
  --d-blue: #74c0fc;
  --d-blue-bg: #1d3f63;
  --d-yellow: #ffd43b;
  --d-yellow-bg: #5c4718;
  --d-violet: #da77f2;
  --d-violet-bg: #4a2359;
  --d-teal: #3bc9db;
  --d-teal-bg: #12454f;
  --d-pink: #f783ac;
  --d-pink-bg: #5c2740;
  --d-lime: #a9e34b;
  --d-lime-bg: #3c5219;
  --d-orange: #ffa94d;
  --d-orange-bg: #5c3616;
  --d-indigo: #91a7ff;
  --d-red-ink: #ff8787;    --d-green-ink: #69db7c;
  --d-blue-ink: #74c0fc;   --d-yellow-ink: #ffd43b;
  --d-violet-ink: #da77f2; --d-teal-ink: #3bc9db;
  --d-pink-ink: #f783ac;   --d-lime-ink: #a9e34b;
  --d-orange-ink: #ffa94d; --d-indigo-ink: #91a7ff;
  --d-indigo-bg: #2a3168;
  --d-hover: rgba(255,255,255,.075);
  --d-ring: rgba(210,170,120,.30);
}


:root[data-theme="dark"] {
    --ink: var(--d-ink);
    --ink-2: var(--d-ink-2);
    --ink-3: var(--d-ink-3);
    --paper: var(--d-paper);
    --panel: var(--d-panel);
    --red: var(--d-red);
    --red-bg: var(--d-red-bg);
    --green: var(--d-green);
    --green-bg: var(--d-green-bg);
    --blue: var(--d-blue);
    --blue-bg: var(--d-blue-bg);
    --yellow: var(--d-yellow);
    --yellow-bg: var(--d-yellow-bg);
    --violet: var(--d-violet);
    --violet-bg: var(--d-violet-bg);
    --teal: var(--d-teal);
    --teal-bg: var(--d-teal-bg);
    --pink: var(--d-pink);
    --pink-bg: var(--d-pink-bg);
    --lime: var(--d-lime);
    --lime-bg: var(--d-lime-bg);
    --orange: var(--d-orange);
    --orange-bg: var(--d-orange-bg);
    --indigo: var(--d-indigo);
    --indigo-bg: var(--d-indigo-bg);
    --hover: var(--d-hover);
    --ring: var(--d-ring);
  --indigo-ink: var(--d-indigo-ink);
  --orange-ink: var(--d-orange-ink);
  --lime-ink: var(--d-lime-ink);
  --pink-ink: var(--d-pink-ink);
  --teal-ink: var(--d-teal-ink);
  --violet-ink: var(--d-violet-ink);
  --yellow-ink: var(--d-yellow-ink);
  --blue-ink: var(--d-blue-ink);
  --green-ink: var(--d-green-ink);
  --red-ink: var(--d-red-ink);
}

/* --- type -------------------------------------------------------------------
   Patrick Hand sets the site: headings, body, buttons, labels. Two things keep
   Virgil. The drawings, because svg text reads from --hand and this does not
   touch it. And the hero, which is the one piece of display type on the site
   large enough for Virgil's unevenness to read as handwriting rather than as a
   font that cannot hold a line. And the scrawls, which are meant to read as
   something written in the margin after the page was printed: in Patrick Hand
   they look like another label, which is exactly what they are not. */
:root {
  --ui: "Patrick Hand", "Virgil", "Bradley Hand", cursive;
}
.hero h1,
.scrawl { font-family: var(--hand); }