/* =========================================================================
   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:      #868e96;
  --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;

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

  --hand: "Virgil", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
  /* 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);
  --ease-out: cubic-bezier(.22, .9, .3, 1);
  /* 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(--hand);
  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 ------------------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* --- 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, .ul, .strike { display: inline-block; position: relative; }
.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);
}

/* 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(--hand);
  font-size: 1.06rem;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  transition: transform .16s 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; }

/* --- 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 .3s 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; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-sun { display: none; }
  :root:not([data-theme="light"]) .ico-moon { display: block; }
}

.nav-toggle { display: none; }

/* --- 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; }
.hero-art { width: 100%; height: auto; overflow: visible; }

/* --- 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);
}
.step {
  padding: 22px 24px 24px;
  --tilt: 0deg;
  transform: rotate(var(--tilt));
  transition: transform .22s 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-n {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: 14px;
  font-size: 1.05rem;
  transition: transform .25s var(--ease-out);
}
.step:hover .step-n { transform: rotate(-12deg) scale(1.12); }
.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);
  --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 .22s 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 .28s 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(4, minmax(0, 1fr)); }
.conviction .step-n { font-size: 1.02rem; letter-spacing: .04em; }
.conviction h3 { font-size: 1.18rem; line-height: 1.28; }

.cards.hunts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@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; }
}

/* --- 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 .22s var(--ease-out);
}
.vcard {
  display: block; width: 100%; height: auto;
  overflow: visible; margin-bottom: 14px;
  transition: transform .3s var(--ease-out);
}
.venture:hover .vcard { transform: rotate(-1.2deg) scale(1.025); }
.venture .v-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-inline: 6px; }
.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 .25s 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 .22s 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); }
.quote-wrap .ring { top: -30px; left: -34px; width: 80px; height: 80px; }

/* --- 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 .3s 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 .25s 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); }
.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; }

.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); }
.note-foot .more { max-width: 46%; }
@media (max-width: 640px) { .note-foot .more { max-width: none; } }

/* --- filter chips ----------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(26px, 4vw, 40px); }
.chip {
  padding: 8px 18px 9px;
  font-family: var(--hand); 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; }
.filter-count { align-self: center; margin-left: 6px; font-size: 1rem; color: var(--ink-3); }

/* --- terms table ------------------------------------------------------------------- */
.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(18px, 2.4vw, 26px); }
.term { padding: 22px 24px 24px; }
.term .k { font-size: .94rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.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; }

/* --- 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(--hand); 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; }

/* --- 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; }

/* --- 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 h4 { 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-social { display: inline-flex; gap: 18px; }
.foot-social a { color: var(--ink-3); }
.foot-social a:hover { color: var(--ink); }
.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 { max-width: 580px; 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; }
  .quote-wrap .ring { display: none; }
}

@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 .16s ease-in both; }
::view-transition-new(root) { animation: page-in .01s linear both; }

@keyframes page-out { to { opacity: 0; transform: translateY(-10px) rotate(-.4deg); } }
@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; }

/* --- reveals settle like paper, not like a slide ------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px) rotate(var(--settle, -.4deg));
  transition: opacity .42s var(--ease-out), transform .5s var(--ease-out);
}
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal]:nth-of-type(2n) { --settle: .6deg; }
.js [data-reveal]:nth-of-type(3n) { --settle: -.4deg; }


/* --- 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 .34s 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 .12s 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-indigo-bg: #2a3168;
  --d-hover: rgba(255,255,255,.075);
  --d-ring: rgba(210,170,120,.30);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --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);
  }
}

: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);
}