/* NodeTheory Ventures
   Palette: the states of copper. Bronze is the metal (value, control, fire),
   verdigris its patina (information, the network, machine labor), cuprite its
   red oxide (the cut). Bone for type, obsidian for the night the chart sits in. */

/* Fonts are self-hosted Latin subsets (SIL Open Font License; see fonts/OFL-*.txt). */
@font-face { font-family: "Castoro Titling"; src: url("../fonts/castoro-titling-latin.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Castoro"; src: url("../fonts/castoro-latin.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Castoro"; src: url("../fonts/castoro-italic-latin.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Commissioner"; src: url("../fonts/commissioner-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --obsidian: #0d0c0a;
  --surface: #14120f;
  --bone: #e8e0cf;
  --bone-2: rgba(232, 224, 207, 0.7);
  --bone-3: rgba(232, 224, 207, 0.56);
  --bone-4: rgba(232, 224, 207, 0.34);
  --hair: rgba(232, 224, 207, 0.13);
  --hair-2: rgba(232, 224, 207, 0.07);
  --verd: #6fb3a0;
  --bronze: #cf9455;
  --bronze-hi: #f2c88e;
  --cuprite: #d66248;

  --f-inscr: "Castoro Titling", "Castoro", Georgia, serif;
  --f-serif: "Castoro", Georgia, serif;
  --f-sans: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gutter: clamp(20px, 4.6vw, 76px);
  --nav-h: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.87, 0, 0.13, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
/* Smooth anchor scrolling for mouse and trackpad only: on a phone, a smooth-scrolling
   root can animate Safari's own scroll corrections into visible jumps. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--bone);
  font-family: var(--f-sans);
  font-variation-settings: "FLAR" 0;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--bronze); color: var(--obsidian); }
a { color: inherit; }
p { margin: 0; }
b { font-weight: 600; }
.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bronze); color: var(--obsidian); padding: 10px 14px; font-family: var(--f-mono); font-size: 12px; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--bronze-hi); outline-offset: 3px; }

/* Sized to the large viewport, so a phone's URL bar sliding away never resizes the chart. */
#sky { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; display: block; }
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Sideways overflow is clipped here rather than on body, so the page's own scroller
   stays untouched (Safari's touch scrolling is sensitive to overflow on body). */
main, .foot { position: relative; z-index: 2; overflow-x: clip; }
/* Darkens the chart's edge behind the reading column on wide screens. */
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.9s var(--ease-out);
  background: linear-gradient(90deg, rgba(13, 12, 10, 0.95) 0%, rgba(13, 12, 10, 0.88) 31%, rgba(13, 12, 10, 0.42) 43%, rgba(13, 12, 10, 0) 53%); }
body[data-sky="hero"] .veil, body[data-sky="hands"] .veil, body[data-sky="automata"] .veil, body[data-sky="fates"] .veil,
body[data-sky="constellation"] .veil, body[data-sky="fire"] .veil, body[data-sky="contact"] .veil { opacity: 1; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--nav-h);
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 28px;
  padding: 0 var(--gutter);
  transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav::before { content: ""; position: absolute; inset: 0 0 -36px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(13, 12, 10, 0.92), rgba(13, 12, 10, 0.6) 55%, rgba(13, 12, 10, 0)); transition: opacity 0.5s var(--ease-out); }
.nav.is-scrolled::before { opacity: 0; }
.nav.is-scrolled { background: rgba(13, 12, 10, 0.78); border-bottom-color: var(--hair-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.mark { width: 26px; height: 26px; color: var(--bone); flex: none; }
.nav__name { font-family: var(--f-inscr); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 2px; }
.nav__here { justify-self: center; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-3); transition: opacity 0.4s var(--ease-out); }
.nav__links { display: flex; gap: 26px; }
.nav__links a { white-space: nowrap; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--bone-2); padding: 6px 0; background: linear-gradient(var(--bronze), var(--bronze)) left bottom / 0 1px no-repeat; transition: color 0.3s var(--ease-out), background-size 0.45s var(--ease-out); }
.nav__links a:hover { color: var(--bone); background-size: 100% 1px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; padding: 13px 20px; border: 1px solid transparent; border-radius: 1px;
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
  white-space: nowrap;
}
.btn--line { border-color: rgba(207, 148, 85, 0.55); color: var(--bone); }
.btn--line:hover { border-color: var(--bronze); background: rgba(207, 148, 85, 0.1); }
.btn--solid { background: var(--bronze); color: var(--obsidian); font-weight: 500; }
.btn--solid:hover { background: var(--bronze-hi); }
.nav__cta { padding: 10px 16px; }

/* ---------- shared type ---------- */
.eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-3); margin-bottom: 22px; }
.eyebrow span:first-child { color: var(--bronze); }
/* On a narrow screen a two-part eyebrow drops its second half to its own line instead of wrapping inside both. */
.eyebrow { flex-wrap: wrap; row-gap: 8px; }
.eyebrow span { white-space: nowrap; }
.eyebrow span + span::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--hair); vertical-align: middle; margin-right: 14px; }
.epigraph { font-family: var(--f-serif); font-style: italic; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--bone-2); max-width: 44ch; margin-top: 18px; }
.figcap.mono { color: var(--bone-3); font-size: 11px; letter-spacing: 0.02em; line-height: 1.6; text-transform: none; }
.figcap__no { color: var(--bronze); margin-right: 10px; letter-spacing: 0.16em; text-transform: uppercase; }

.readouts { display: grid; margin: 0; }
.readouts div { min-width: 0; }
.readouts dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-3); white-space: nowrap; }
.readouts dd { margin: 6px 0 0; font-family: var(--f-sans); font-weight: 560; font-variation-settings: "FLAR" 60; font-size: clamp(22px, 1.9vw, 30px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: var(--screen, 100svh); display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) var(--gutter) 72px; }
.hero__copy { position: relative; width: min(640px, 47vw); }
.hero__chart { color: var(--bone-3); margin-bottom: 26px; }
.hero__title { margin: 0; font-family: var(--f-inscr); font-weight: 400; font-size: clamp(44px, 5.6vw, 104px); line-height: 0.94; letter-spacing: 0.005em; text-transform: uppercase; }
.hero__title { width: max-content; max-width: calc(100vw - 2 * var(--gutter)); }
/* Masks the rising letters top and bottom only, so a long word never clips at the side. */
.hero__title .line { display: block; padding-bottom: 0.04em; clip-path: inset(-0.1em -50vw 0 -50vw); }
.hero__title .line > span { display: inline-block; }
.hero__title .line--2 { padding-left: 0.62em; color: var(--bone); }
.hero__thesis { margin-top: 30px; font-weight: 540; font-variation-settings: "FLAR" 60; font-size: clamp(21px, 2vw, 30px); line-height: 1.2; letter-spacing: -0.016em; }
.hero__thesis > span { display: block; text-wrap: balance; }
.hero__lede { margin-top: 18px; color: var(--bone-2); max-width: 50ch; font-size: 16.5px; }
.readouts--hero { grid-template-columns: repeat(5, auto); justify-content: start; column-gap: clamp(18px, 2.2vw, 34px); margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--hair); }
.hero__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-top: 30px; }
.hero__next { display: inline-flex; gap: 10px; color: var(--bone-2); text-decoration: none; white-space: nowrap; }
.hero__next:hover { color: var(--bronze-hi); }
.hero__fig { max-width: 40ch; text-align: right; }

/* ---------- laws ---------- */
.law { position: relative; min-height: 112vh; min-height: calc(var(--screen, 100svh) * 1.12); display: flex; align-items: center; padding: 120px var(--gutter); }
.law__copy { width: min(540px, 41vw); }
.law--wide .law__copy { width: min(600px, 44vw); }
.law__title { margin: 0; font-family: var(--f-inscr); font-weight: 400; font-size: clamp(38px, 4.3vw, 62px); line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; }
.law__statement { margin-top: 30px; font-weight: 560; font-variation-settings: "FLAR" 60; font-size: clamp(23px, 2.15vw, 33px); line-height: 1.16; letter-spacing: -0.018em; text-wrap: balance; }
.law__body { margin-top: 20px; display: grid; gap: 14px; color: var(--bone-2); max-width: 52ch; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 28px 0 0; }
.tags li { border: 1px solid var(--hair); padding: 7px 11px; color: var(--bone-2); font-size: 10px; }

.law__more { display: inline-flex; gap: 10px; margin-top: 22px; color: var(--bronze-hi); text-decoration: none; }
.law__more:hover { color: var(--bone); }

/* Law II ledger */
.ledger { margin: 32px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; }
.ledger__grid { display: grid; grid-template-columns: repeat(10, 12px); gap: 3px; }
.ledger__grid i { width: 12px; height: 12px; display: block; background: rgba(111, 179, 160, 0.72); opacity: 0.12; transform: scale(0.6); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); transition-delay: calc(var(--i) * 9ms); }
.ledger__grid i.op { background: var(--bronze-hi); }
.ledger.is-in .ledger__grid i { opacity: 1; transform: none; }
.ledger__key { display: grid; gap: 18px; }
.ledger__head { display: flex; align-items: center; gap: 9px; color: var(--bone); font-size: 10.5px; }
.ledger__items { margin-top: 6px; color: var(--bone-2); font-size: 14.5px; line-height: 1.55; }
.sw { width: 9px; height: 9px; display: inline-block; }
.sw--machine { background: var(--verd); }
.sw--operator { background: var(--bronze-hi); }

/* Law III */
.fates { list-style: none; margin: 30px 0 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 20px; }
.fates::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 34px; width: 1px; background: linear-gradient(var(--bone-4), var(--bone-4)) top / 1px calc(100% - 46px) no-repeat; }
.fates__step { position: relative; color: var(--bone-2); font-size: 15.5px; line-height: 1.55; }
.fates__step::before { content: ""; position: absolute; left: -26px; top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--bone-3); background: var(--obsidian); }
.fates__step--cut::before { border-color: var(--cuprite); }
.fates__step--cut::after { content: ""; position: absolute; left: -29px; top: -16px; width: 15px; height: 1px; background: var(--cuprite); transform: rotate(-32deg); box-shadow: 0 5px 0 var(--cuprite); }
.fates__name { color: var(--bone); margin-bottom: 4px; }
.fates__name .or { color: var(--bone-3); }
.record { margin-top: 30px; border-top: 1px solid var(--hair); padding-top: 16px; }
.record__head { color: var(--bone-3); }
.record__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.record__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.5; color: var(--bone-2); }
.record__list b { color: var(--bone); font-weight: 600; margin-right: 6px; }
.rmark { width: 11px; height: 11px; display: inline-block; position: relative; top: 1px; border-radius: 50%; }
.rmark--cut { border: 1px solid var(--cuprite); }
.rmark--cut::after { content: ""; position: absolute; left: -3px; top: 4px; width: 15px; height: 1px; background: var(--cuprite); transform: rotate(-45deg); }
.rmark--gate { border: 1px dashed var(--bronze-hi); }
.rmark--paused { border: 1px dotted var(--bone-2); }
.rmark--measure { border: 1px solid var(--bone-3); }

/* Law IV */
.v { font-weight: 600; }
.v--info { color: var(--verd); }
.v--control { color: var(--bronze-hi); }
.lines__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 30px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); color: var(--bone-3); }
.lines__head > * { white-space: nowrap; }
.lines__count { color: var(--bone-2); }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { border-bottom: 1px solid var(--hair-2); }
.line-btn {
  width: 100%; text-align: left; background: none; border: 0; color: inherit; cursor: pointer;
  display: grid; grid-template-columns: 10px 1fr; gap: 14px; padding: 13px 10px 13px 4px; font: inherit;
  transition: background-color 0.3s var(--ease-out);
}
.line-btn:hover, .line-btn:focus-visible, .line-btn.is-on { background: rgba(232, 224, 207, 0.045); }
.line-btn .k { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; }
.line-btn .k--info { border: 1.5px solid var(--verd); }
.line-btn .k--control { background: var(--bronze-hi); }
.line-btn .t { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--bone); }
.line-btn .d { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--bone-2); }
.line-btn .m { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.line-btn .m span { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-2); border: 1px solid var(--hair); padding: 3px 7px; }

/* Law V */
.fire { margin-top: 30px; border: 1px solid var(--hair); padding: 20px 20px 18px; background: rgba(13, 12, 10, 0.55); }
.fire__head { display: flex; justify-content: space-between; align-items: baseline; color: var(--bone-3); }
.fire__now { font-family: var(--f-sans); font-weight: 600; font-variation-settings: "FLAR" 60; font-size: 16px; color: var(--bronze-hi); letter-spacing: -0.01em; }
.fire__range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 14px 0 4px; background: transparent; cursor: pointer; }
.fire__range::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--bronze) var(--fill, 0%), var(--hair) var(--fill, 0%)); }
.fire__range::-moz-range-track { height: 1px; background: var(--hair); }
.fire__range::-moz-range-progress { height: 1px; background: var(--bronze); }
.fire__range::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; margin-top: -8px; border-radius: 50%; background: var(--obsidian); border: 1.5px solid var(--bronze-hi); box-shadow: 0 0 0 5px rgba(207, 148, 85, 0.14); }
.fire__range::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--obsidian); border: 1.5px solid var(--bronze-hi); box-shadow: 0 0 0 5px rgba(207, 148, 85, 0.14); }
.fire__range:focus-visible { outline-offset: 6px; }
.fire__stops { display: flex; justify-content: space-between; }
.fire__stops button { background: none; border: 0; padding: 6px 0; cursor: pointer; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-3); transition: color 0.3s var(--ease-out); }
.fire__stops button:hover, .fire__stops button.is-on { color: var(--bone); }
.readouts--fire { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair-2); }
.readouts--fire div { display: flex; flex-direction: column; justify-content: flex-end; }
.readouts--fire dt { white-space: normal; line-height: 1.4; }
.readouts--fire dd { font-size: 24px; }
.fire__note { margin-top: 14px; color: var(--bone-3); font-size: 9.5px; letter-spacing: 0.12em; line-height: 1.7; text-transform: none; letter-spacing: 0.04em; font-size: 11px; }
.cite { margin-top: 18px; font-family: var(--f-serif); font-style: italic; font-size: 15.5px; line-height: 1.55; color: var(--bone-2); max-width: 50ch; }
.cite .mono { font-style: normal; color: var(--bone-3); font-size: 10px; margin-left: 8px; white-space: nowrap; }

/* ---------- the portfolio (every venture) ---------- */
.atlas { padding: 150px var(--gutter) 120px; }
.atlas__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 88px); align-items: end; }
.atlas__title, .thesis__title, .contact__title { margin: 0; font-family: var(--f-inscr); font-weight: 400; font-size: clamp(38px, 5vw, 84px); line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; }
.atlas__lede { margin-top: 22px; color: var(--bone-2); max-width: 56ch; }
.glyph { width: 9px; height: 9px; border-radius: 50%; display: inline-block; position: relative; flex: none; }
.glyph--live { background: var(--bone); box-shadow: 0 0 0 3px rgba(232, 224, 207, 0.12); }
.glyph--live::before, .glyph--live::after { content: ""; position: absolute; background: var(--bone-2); }
.glyph--live::before { left: -5px; right: -5px; top: 4px; height: 1px; }
.glyph--live::after { top: -5px; bottom: -5px; left: 4px; width: 1px; }
.glyph--building { background: var(--bone); }
.glyph--idea { border: 1px solid var(--bone-2); }
.glyph--paused { border: 1px dotted var(--bone-2); }
.glyph--cut { border: 1px solid var(--cuprite); }

/* The section's readout: total work, work per day, where every venture stands. */
.pulse { justify-self: end; width: min(100%, 420px); padding: 24px 24px 18px; background: rgba(13, 12, 10, 0.78); border: 1px solid var(--hair); }
.pulse__value { font-weight: 560; font-variation-settings: "FLAR" 60; font-size: clamp(46px, 4.6vw, 66px); line-height: 0.95; letter-spacing: -0.035em; color: var(--bone); }
.pulse__label { margin-top: 10px; color: var(--bone-3); font-size: 13.5px; line-height: 1.45; max-width: 34ch; }
.cols { display: block; width: 100%; height: auto; margin-top: 20px; overflow: visible; }
.cols__bar { fill: var(--verd); transform-box: fill-box; transform-origin: 50% 100%; transition: fill 0.2s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: 0s, calc(var(--i, 0) * 40ms + 200ms); }
.cols__bar.is-hot { fill: #a6e0ce; }
.js .atlas__head:not(.is-in) .cols__bar { transform: scaleY(0.02); }
.cols__idle { fill: rgba(232, 224, 207, 0.22); }
.cols__base { stroke: var(--hair); stroke-width: 1; }
.cols__peak { fill: var(--bone-2); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; }
.cols__date { fill: var(--bone-3); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.cols__hit { fill: transparent; }
.stages { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair-2); }
.stages__head { color: var(--bone-3); font-size: 10.5px; }
.stages__bar { display: flex; gap: 2px; height: 8px; margin-top: 10px; }
.stages__seg { min-width: 5px; border-radius: 1px; }
.stages__seg--live, .sw--live { background: #e8e0cf; }
.stages__seg--building, .sw--building { background: #a39c8e; }
.stages__seg--idea, .sw--idea { background: #5c574f; }
.stages__seg--paused, .sw--paused { background: repeating-linear-gradient(45deg, rgba(232, 224, 207, 0.5) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px rgba(232, 224, 207, 0.3); }
.stages__seg--cut, .sw--cut { background: var(--cuprite); }
.stages__key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; color: var(--bone-2); font-size: 10.5px; }
.stages__key li { display: inline-flex; align-items: center; gap: 7px; }
.stages__key b { color: var(--bone); font-weight: 600; }
.heat-key { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hair-2); color: var(--bone-3); font-size: 10.5px; }
.heat-key__scale { display: inline-flex; align-items: center; gap: 3px; }
.heat-key__scale i:first-of-type { margin-left: 6px; }
.heat-key__scale i:last-of-type { margin-right: 6px; }

/* The heat strip: one square per day, four steps of verdigris (validated on the tile surface). */
.heat { display: grid; grid-auto-flow: column; grid-auto-columns: 9px; gap: 2px; }
.heat i, .heat-key__scale i { display: block; width: 9px; height: 9px; border-radius: 1.5px; background: rgba(232, 224, 207, 0.07); }
.heat .h1, .heat-key__scale .h1 { background: #3d5f55; }
.heat .h2, .heat-key__scale .h2 { background: #548475; }
.heat .h3, .heat-key__scale .h3 { background: #6fb3a0; }
.heat .h4, .heat-key__scale .h4 { background: #a6e0ce; box-shadow: 0 0 6px rgba(166, 224, 206, 0.35); }
.heat i.is-hot { outline: 1px solid var(--bone); outline-offset: 1px; }

/* The grid: tiles sized by their sector, the rack across the top. */
.atlas__grid { margin-top: clamp(48px, 6vw, 76px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 14px; }
.plate { grid-column: span 4; position: relative; display: flex; flex-direction: column; padding: 26px 26px 20px; border: 1px solid var(--hair); background: linear-gradient(180deg, rgba(232, 224, 207, 0.035), rgba(232, 224, 207, 0) 140px), rgba(13, 12, 10, 0.86); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: border-color 0.4s var(--ease-out); }
.plate:hover { border-color: rgba(232, 224, 207, 0.22); }
.plate[data-sector="games"] { grid-column: span 7; }
.plate[data-sector="software"] { grid-column: span 5; }
.plate[data-sector="services"] { grid-column: span 6; grid-row: span 2; }
.plate[data-sector="launch"], .plate[data-sector="ios"] { grid-column: span 6; }
.plate--hub { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 20px 56px; align-items: center; border-color: rgba(207, 148, 85, 0.45); background: radial-gradient(120% 140% at 0% 0%, rgba(207, 148, 85, 0.08), rgba(207, 148, 85, 0) 55%), rgba(20, 17, 13, 0.92); }
.plate--hub:hover { border-color: rgba(207, 148, 85, 0.7); }
.plate--hub .plate__body { margin-top: 0; }

.plate__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.plate__dial { position: relative; width: 92px; height: 92px; }
.dial { display: block; width: 100%; height: 100%; overflow: visible; }
.dial__ring { fill: none; stroke: var(--hair); stroke-width: 1; }
.dial__bar { stroke: var(--verd); stroke-width: 2.6; stroke-linecap: round; }
.dial__idle { fill: rgba(232, 224, 207, 0.2); }
.plate--hub .dial__bar { stroke: var(--bronze-hi); }
.plate--hub .dial__ring { stroke: rgba(207, 148, 85, 0.5); }
.plate__count { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 560; font-variation-settings: "FLAR" 60; font-size: 27px; letter-spacing: -0.02em; color: var(--bone); }
.plate__name { margin: 0; font-family: var(--f-inscr); font-weight: 400; font-size: 22px; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; }
.plate__meta { margin-top: 7px; color: var(--bone-3); font-size: 10.5px; }
.plate--hub .plate__meta { color: var(--bronze-hi); }
.plate__blurb { margin-top: 8px; color: var(--bone-2); font-size: 14px; line-height: 1.5; }
.plate__body { margin-top: 20px; }
.plate__axis { display: flex; justify-content: space-between; width: 152px; margin-left: auto; padding: 0 0 6px; color: var(--bone-3); font-size: 10px; }
.plate__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair-2); }
.plate__foot { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; color: var(--bone-3); font-size: 10px; }
.plate--hub .plate__foot { grid-column: 2; padding-top: 0; }
.vrow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--hair-2); transition: background-color 0.25s var(--ease-out); }
.vrow:hover { background: rgba(232, 224, 207, 0.035); }
.vrow__rank { font-family: var(--f-mono); font-size: 11px; line-height: 1.9; color: var(--bone-3); text-align: right; }
.vrow .nm { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.35; color: var(--bone); }
.vrow .ln { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--bone-3); }
.vrow__data { display: grid; justify-items: end; gap: 7px; padding-top: 4px; }
.vrow .stg { display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px; letter-spacing: 0.12em; color: var(--bone-3); white-space: nowrap; }
.vrow:hover .heat i.w { filter: brightness(1.2); }
.spark { width: 46px; height: 12px; display: block; overflow: visible; }

/* The readout for any day's square or column. */
.dtip { position: fixed; left: 0; top: 0; z-index: 61; pointer-events: none; padding: 9px 12px 8px; background: rgb(17, 15, 12); border: 1px solid var(--hair); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); white-space: nowrap; }
.dtip[hidden] { display: none; }
.dtip b { display: block; font-weight: 600; font-variation-settings: "FLAR" 60; font-size: 15px; color: var(--bone); }
.dtip span { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-3); }

/* ---------- thesis ---------- */
.thesis { padding: 150px var(--gutter) 130px; display: flex; justify-content: center; }
.thesis__inner { width: min(980px, 100%); }
.compare { width: 100%; margin-top: 46px; border-collapse: collapse; }
.compare th, .compare td { text-align: left; padding: 17px 16px 17px 0; border-bottom: 1px solid var(--hair); vertical-align: baseline; }
.compare thead th { font-family: var(--f-mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-3); padding-bottom: 12px; }
.compare thead th:last-child { color: var(--bronze); }
.compare tbody th { font-family: var(--f-mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-3); width: 26%; }
.compare tbody td { font-size: clamp(16px, 1.45vw, 20px); color: var(--bone-3); width: 32%; }
.compare tbody td:last-child { color: var(--bone); font-weight: 560; font-variation-settings: "FLAR" 60; width: 42%; }
.thesis__close { margin-top: 56px; font-weight: 520; font-variation-settings: "FLAR" 60; font-size: clamp(25px, 3vw, 44px); line-height: 1.18; letter-spacing: -0.02em; max-width: 24ch; text-wrap: balance; }
.thesis__close em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--bronze-hi); letter-spacing: -0.01em; }

/* ---------- contact ---------- */
.contact { min-height: 100vh; min-height: var(--screen, 100svh); display: flex; align-items: center; padding: 120px var(--gutter); }
.contact__copy { width: min(560px, 44vw); }
.contact__lede { margin-top: 24px; color: var(--bone-2); max-width: 46ch; font-size: 18px; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 26px var(--gutter) 30px; border-top: 1px solid var(--hair); background: rgba(13, 12, 10, 0.86); color: var(--bone-3); }
.foot__brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-inscr); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
.foot__brand .mark { width: 22px; height: 22px; }
.foot .mono { font-size: 10px; }

/* ---------- tooltip ---------- */
.tip { position: fixed; left: 0; top: 0; z-index: 60; width: max-content; max-width: 300px; pointer-events: none; padding: 14px 16px 13px; background: rgba(17, 15, 12, 0.95); border: 1px solid var(--hair); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); transition: opacity 0.18s var(--ease-out); }
.tip[hidden] { display: block; opacity: 0; visibility: hidden; }
/* Phones: a sheet along the bottom edge, set by main.js */
.tip--sheet { left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; background: rgb(17, 15, 12); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55); }
.tip__id { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.tip__name { margin-top: 6px; font-weight: 600; font-variation-settings: "FLAR" 60; font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; }
.tip__line { margin-top: 5px; font-size: 13.5px; line-height: 1.45; color: var(--bone-2); }
.tip__meta { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--hair-2); font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-3); }
.tip__meta .stage { margin-left: auto; color: var(--bone-2); }
.tip__lines { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--hair-2); display: grid; gap: 7px; }
.tip__lines li { display: grid; grid-template-columns: 8px 1fr; gap: 9px; align-items: baseline; font-size: 12.5px; line-height: 1.4; color: var(--bone-2); }
.tip__lines b { display: block; color: var(--bone); font-weight: 600; }
.tip__lines .k { width: 7px; height: 7px; border-radius: 50%; display: block; transform: translateY(-1px); }
.tip__lines .k--info { border: 1.5px solid var(--verd); }
.tip__lines .k--control { background: var(--bronze-hi); }
.tip__lines .is-latent { opacity: 0.8; }
.tip__lines em { color: var(--bone-3); font-style: normal; }
.tip__go { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--hair-2); font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze-hi); }
.tip__none { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--hair-2); font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-3); }

/* ---------- reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .hero__title .line > [data-reveal] { transform: translate3d(0, 102%, 0); opacity: 1; transition: transform 1.25s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .is-ready [data-reveal], .js .is-ready .hero__title .line > [data-reveal] { opacity: 1; transform: none; }
.js .law__copy > *, .js .atlas__head > *, .js .thesis__inner > *, .js .contact__copy > * { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--n, 0) * 70ms); }
.js .is-in > .law__copy > *, .js .is-in.atlas__head > *, .js .is-in > .thesis__inner > *, .js .is-in > .contact__copy > * { opacity: 1; transform: none; }
.js .plate > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--n, 0) * 60ms); }
.js .plate.is-in > * { opacity: 1; transform: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .readouts--hero { grid-template-columns: repeat(3, auto); row-gap: 18px; }
  .nav__here { display: none; }
  .nav { grid-template-columns: auto 1fr auto; }
  .nav__links { justify-self: end; gap: 20px; }
  /* two tiles a row, the rack still across the top */
  .plate[data-sector] { grid-column: span 6; grid-row: auto; }
  .plate[data-sector].plate--hub { grid-column: 1 / -1; }
}

@media (max-width: 959px) {
  :root { --nav-h: 56px; }
  .veil { display: none; }
  body { font-size: 16.5px; }
  .nav { grid-template-columns: 1fr auto; gap: 12px; }
  .nav__links { display: none; }
  .nav__name { font-size: 13px; letter-spacing: 0.06em; }
  .nav__cta { padding: 9px 12px; font-size: 10.5px; }
  .hero { align-items: flex-end; padding-top: 56vh; padding-top: calc(var(--screen, 100svh) * 0.56); padding-bottom: 56px; }
  .hero__copy { width: 100%; }
  .hero__title { font-size: clamp(34px, 10.6vw, 76px); }
  .hero__fig { position: static; display: none; }
  .readouts--hero { grid-template-columns: repeat(3, auto); column-gap: 22px; }
  .law { min-height: 0; display: block; padding: 58vh var(--gutter) 40px; padding-top: calc(var(--screen, 100svh) * 0.58); }
  .law__copy, .law--wide .law__copy, .contact__copy { width: 100%; }
  .law__copy, .contact__copy { position: relative; }
  .law__copy::before, .contact__copy::before { content: ""; position: absolute; inset: -150px calc(var(--gutter) * -1) -40px; z-index: -1; background: linear-gradient(to bottom, rgba(13, 12, 10, 0) 0, rgba(13, 12, 10, 0.93) 140px, rgba(13, 12, 10, 0.95) 100%); }
  .ledger { grid-template-columns: 1fr; }
  .readouts--fire { grid-template-columns: repeat(2, 1fr); }
  .atlas, .thesis { padding-top: 110px; padding-bottom: 90px; }
  .atlas__head { grid-template-columns: 1fr; align-items: start; }
  .pulse { justify-self: stretch; width: 100%; }
  .atlas__grid { grid-template-columns: 1fr; gap: 12px; }
  .plate, .plate[data-sector] { grid-column: auto; grid-row: auto; padding: 22px 20px 16px; }
  .plate--hub { display: flex; }
  .plate--hub .plate__body { margin-top: 20px; }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto !important; }
  .compare tr { padding: 16px 0; border-bottom: 1px solid var(--hair); }
  .compare th, .compare td { border: 0; padding: 0; }
  .compare tbody td:nth-of-type(1) { margin-top: 8px; text-decoration: line-through; text-decoration-color: rgba(214, 98, 72, 0.6); }
  .compare tbody td:nth-of-type(2) { margin-top: 2px; }
  .contact { min-height: 0; display: block; padding: 52vh var(--gutter) 80px; padding-top: calc(var(--screen, 100svh) * 0.52); }
  /* The hero copy gets the laws' dark backing, so it never reads over the stars as it rises. */
  .hero__copy::before { content: ""; position: absolute; inset: -40px calc(var(--gutter) * -1) -56px; z-index: -1; background: linear-gradient(to bottom, rgba(13, 12, 10, 0) 0, rgba(13, 12, 10, 0.93) 56px, rgba(13, 12, 10, 0.95) 100%); }
  /* No live blur over a moving canvas on phones: a near-opaque fill reads the same and costs nothing. */
  .nav.is-scrolled { background: rgba(13, 12, 10, 0.97); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .plate { background: rgba(13, 12, 10, 0.9); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .plate--hub { background: rgba(20, 17, 13, 0.94); }
}

@media (max-width: 520px) {
  .nav__name { display: none; }
  .readouts--hero { grid-template-columns: repeat(2, auto); }
  .readouts--hero div:last-child { grid-column: span 2; }
  /* the longest single words (CONSTELLATIONS) fit a 320 px screen */
  .law__title, .atlas__title, .thesis__title, .contact__title { font-size: min(38px, 9.2vw); }
  /* a phone row: the name gets the full width, the day squares sit under it */
  .plate__head { gap: 16px; }
  .plate__dial { width: 76px; height: 76px; }
  .plate__count { font-size: 23px; }
  .plate__name { font-size: 19px; }
  .vrow { grid-template-columns: 16px minmax(0, 1fr); gap: 0 10px; }
  .vrow__data { grid-column: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 9px; }
  .plate__axis { width: 152px; margin-left: 26px; }
}

/* Nothing smaller than 10.5 px on a phone or a tablet, in either orientation. */
@media (max-width: 959px) {
  .readouts dt, .tags li, .cite .mono, .foot .mono, .line-btn .m span, .vrow .stg, .plate__foot, .plate__axis,
  .tip__id, .tip__meta, .tip__go, .tip__none { font-size: 10.5px; }
}

/* Fingertips: every control gets a target of at least 44 px, without moving anything. */
@media (pointer: coarse) {
  .nav__brand, .nav__cta, .hero__next, .law__more, .fire__stops button { position: relative; }
  .nav__brand::after, .nav__cta::after, .hero__next::after, .law__more::after, .fire__stops button::after { content: ""; position: absolute; inset: -12px -8px; }
  .nav__cta::after { inset: -4px; }
  .fire__range { height: 44px; margin: 6px 0 -4px; }
  /* Under a thumb, copy that slides upward as it arrives reads as the page jumping:
     on touch screens it fades in where it stands. */
  .js .law__copy > *, .js .atlas__head > *, .js .thesis__inner > *, .js .contact__copy > *, .js .plate > * { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js .hero__title .line > [data-reveal], .js .law__copy > *, .js .atlas__head > *, .js .thesis__inner > *, .js .contact__copy > *, .js .plate > *, .ledger__grid i { transition: none !important; opacity: 1 !important; transform: none !important; }
  .veil { transition: none; }
}

/* ---------- into the rack: the chart dives into the hub, the page fades ---------- */
body.is-diving main, body.is-diving .nav, body.is-diving .foot, body.is-diving .veil { opacity: 0; transition: opacity 0.45s var(--ease-out); }
body.is-diving::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; background: var(--obsidian); opacity: 0; animation: dive-fade 0.5s 0.25s var(--ease-out) forwards; }
@keyframes dive-fade { to { opacity: 1; } }

/* ---------- the scroll layer (js/scroll-v2.js) ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Reveals on entry, to scrollcraft's timing: 620ms ease-out, 60ms stagger.
     Timing only: the start and end states stay v1's. */
  html[data-scroll="v2"].js .law__copy > *,
  html[data-scroll="v2"].js .atlas__head > *,
  html[data-scroll="v2"].js .thesis__inner > *,
  html[data-scroll="v2"].js .contact__copy > *,
  html[data-scroll="v2"].js .plate > * {
    transition: opacity 620ms cubic-bezier(0.23, 1, 0.32, 1), transform 620ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: calc(var(--n, 0) * 60ms);
  }

  /* Kinetic headlines: the words carry the motion, so the heading itself is not faded. */
  html[data-scroll="v2"].js [data-kinetic] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html[data-scroll="v2"] .kw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  html[data-scroll="v2"] .kw__i { display: inline-block; will-change: transform, opacity; opacity: 0; transform: translate3d(0, 108%, 0); }

  /* Law II: the ledger fills under the hand instead of on a timer. */
  html[data-scroll="v2"] .ledger .ledger__grid i { opacity: 0.12; transform: scale(0.6); transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1); transition-delay: 0s; }
  html[data-scroll="v2"] .ledger .ledger__grid i.on { opacity: 1; transform: none; }

  /* Thesis rows wipe in: clip-path only, so nothing reflows. */
  html[data-scroll="v2"] .compare tbody td:last-child { will-change: clip-path; }

  /* The portfolio: each tile’s squares light up, row by row, as it arrives. */
  html[data-scroll="v2"].v2-ready .plate .heat i.w { opacity: 0.18; transform: scale(0.45); transition: opacity 240ms cubic-bezier(0.23, 1, 0.32, 1), transform 240ms cubic-bezier(0.23, 1, 0.32, 1); }
  html[data-scroll="v2"].v2-ready .plate .heat i.w.on { opacity: 1; transform: none; }
}

/* Law V, the peak: on wide screens the model panel holds while scroll raises the
   generation. The extra length is the hold itself; the copy above scrolls away. */
@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
  html[data-scroll="v2"] .fire-hold { position: sticky; top: calc(var(--nav-h) + 9vh); z-index: 1; }
  html[data-scroll="v2"] .fire-hold__room { height: 120vh; pointer-events: none; }
}