/* TAI One — independent foundation-model research
   Pure CSS, no external assets or font dependencies. */

:root {
  color-scheme: light;
  --paper: #f2efe7;
  --paper-raised: #faf8f2;
  --paper-deep: #e8e4da;
  --ink: #141514;
  --ink-soft: #4f504c;
  --ink-faint: #787971;
  --line: rgba(20, 21, 20, 0.16);
  --line-strong: rgba(20, 21, 20, 0.32);
  --grid-line: rgba(20, 21, 20, 0.055);
  --signal: #d94a34;
  --signal-deep: #a83224;
  --signal-soft: rgba(217, 74, 52, 0.1);
  --black: #0e0f0f;
  --white: #fffdf7;
  --shadow: 0 26px 70px rgba(27, 26, 22, 0.11);
  --header-bg: rgba(242, 239, 231, 0.86);
  --focus: #174fd7;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --shell: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.75rem);
  --section-space: clamp(6.25rem, 11vw, 11rem);
  --header-height: 76px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0b0c0d;
    --paper-raised: #111315;
    --paper-deep: #17191b;
    --ink: #f3f0e8;
    --ink-soft: #b0afa8;
    --ink-faint: #7e7f7b;
    --line: rgba(255, 255, 255, 0.13);
    --line-strong: rgba(255, 255, 255, 0.28);
    --grid-line: rgba(255, 255, 255, 0.045);
    --signal: #ff6048;
    --signal-deep: #ff735e;
    --signal-soft: rgba(255, 96, 72, 0.12);
    --black: #f3f0e8;
    --white: #0c0d0e;
    --shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
    --header-bg: rgba(11, 12, 13, 0.84);
    --focus: #77a2ff;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0c0d;
  --paper-raised: #111315;
  --paper-deep: #17191b;
  --ink: #f3f0e8;
  --ink-soft: #b0afa8;
  --ink-faint: #7e7f7b;
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.28);
  --grid-line: rgba(255, 255, 255, 0.045);
  --signal: #ff6048;
  --signal-deep: #ff735e;
  --signal-soft: rgba(255, 96, 72, 0.12);
  --black: #f3f0e8;
  --white: #0c0d0e;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  --header-bg: rgba(11, 12, 13, 0.84);
  --focus: #77a2ff;
}

:root[data-theme="light"] {
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
  background: var(--paper);
}

main section[id] {
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

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

p,
h1,
h2,
h3,
blockquote,
dl,
dd,
pre {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 1000;
  transform: translate(-50%, -140%);
  padding: 0.7rem 1rem;
  border: 1px solid var(--ink);
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

.shell {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-space);
}

.section-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: center top;
}

.section-rule {
  border-top: 1px solid var(--line-strong);
  padding-top: 1rem;
}

.section-index {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(3rem, 7vw, 6.5rem);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-index span {
  color: var(--signal);
}

.kicker {
  margin-bottom: 1.15rem;
  color: var(--signal-deep);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.section-heading h2 {
  max-width: 900px;
  font-size: clamp(2.55rem, 5.6vw, 5.4rem);
  font-weight: 560;
  letter-spacing: -0.064em;
  line-height: 0.98;
}

.section-heading > p:last-child:not(.kicker) {
  max-width: 36rem;
  margin-top: 1.75rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.site-header.is-scrolled,
.site-header.is-menu-open {
  border-color: var(--line);
  background: var(--header-bg);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}

.header-inner {
  height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.brand {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
}

.brand-mark {
  width: 34px;
  height: 34px;
}

.brand-mark svg rect {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
}

.brand-mark svg path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.brand-mark svg circle {
  fill: var(--signal);
}

.brand-type {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0.32rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.11em;
}

.brand-type strong {
  font-weight: 800;
}

.brand-type span {
  color: var(--ink-faint);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
}

.desktop-nav a {
  position: relative;
  padding-block: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 -0.1rem;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.desktop-nav a:hover,
.desktop-nav a[aria-current="true"] {
  color: var(--ink);
}

.desktop-nav a:hover::after,
.desktop-nav a[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.header-state {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: 0.35rem;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.header-state i,
.plate-led i,
.status-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-soft);
}

/* Language switch. Hidden until app.js sets .js on <html>, because without
   JavaScript the buttons cannot swap anything — the page stays English. */
.lang-switch {
  display: none;
  height: 38px;
  align-items: center;
  gap: 0.1rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-raised);
}

.js .lang-switch {
  display: inline-flex;
}

.lang-switch button {
  appearance: none;
  height: 100%;
  padding: 0 0.55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  transition: background-color 160ms ease, color 160ms ease;
}

.lang-switch button:hover {
  color: var(--ink);
}

.lang-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.icon-button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-raised);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.icon-button:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.theme-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-icon-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-icon-moon { display: block; }
}

:root[data-theme="light"] .theme-icon-sun {
  display: block;
}

:root[data-theme="light"] .theme-icon-moon {
  display: none;
}

.menu-toggle {
  display: none;
  position: relative;
}

.menu-toggle span {
  position: absolute;
  width: 15px;
  height: 1px;
  background: currentColor;
  transition: transform 180ms ease, top 180ms ease;
}

.menu-toggle span:first-child { top: 15px; }
.menu-toggle span:last-child { top: 21px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 18px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 18px; transform: rotate(-45deg); }

.mobile-nav {
  height: calc(100dvh - var(--header-height));
  border-top: 1px solid var(--line);
  background: var(--paper);
  overflow-y: auto;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav-inner {
  display: grid;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

.mobile-nav a {
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  align-items: baseline;
  padding-block: 1.2rem;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.8rem, 8vw, 3rem);
  font-weight: 580;
  letter-spacing: -0.05em;
}

.mobile-nav a span {
  color: var(--signal);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.mobile-nav p {
  margin-top: 2.5rem;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Hero */
.hero {
  min-height: 100svh;
  /* Just enough air under the fixed header to read as deliberate. The old
     clamp added up to 7rem on top of the header height, which put 111px of
     empty grid between the header and the eyebrow on a desktop viewport. */
  padding-top: calc(var(--header-height) + clamp(1.5rem, 3.4vw, 3.25rem));
  display: flex;
  flex-direction: column;
}

.hero-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.78fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.4rem;
  margin-bottom: clamp(2rem, 5vw, 4.4rem);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.eyebrow span {
  position: relative;
}

.eyebrow span:not(:last-child)::after {
  content: "/";
  position: absolute;
  left: calc(100% + 0.7rem);
  color: var(--line-strong);
}

/* Three deliberate beats, one per line. The <br>s carry the rhythm, so the type
   is sized to let the longest line ("Yönlendirme değil.") hold its own line
   instead of reflowing. Wrapping stays enabled as a safety net for very narrow
   screens; balance is off because it would fight the explicit breaks. */
.hero h1 {
  /* The widest line, "Yönlendirme değil.", measures 7.355em in this face at
     this tracking, so 7.5em is wide enough to hold it and nothing
     more. Sizes below are capped so 7.355em never exceeds the hero column —
     which is narrowest (609px) above 1600px, where --shell stops growing but
     the grid gap keeps widening. */
  max-width: 7.5em;
  font-size: clamp(2.4rem, 6.1vw, 4.7rem);
  font-weight: 590;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.hero h1 span {
  color: var(--signal);
}

.hero-lede {
  max-width: 690px;
  margin-top: clamp(2rem, 4vw, 3.4rem);
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.65vw, 1.35rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2.2rem;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.76rem 1.15rem;
  border: 1px solid var(--line-strong);
  font-size: 0.78rem;
  font-weight: 720;
  letter-spacing: 0.02em;
  transition: color 170ms ease, background 170ms ease, border-color 170ms ease, transform 170ms ease;
}

.button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: transform 170ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button:hover svg {
  transform: translateX(2px);
}

.button-primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.button-primary:hover {
  border-color: var(--signal);
  background: var(--signal);
  color: #fff;
}

.button-quiet {
  background: var(--paper-raised);
}

.button-quiet:hover {
  border-color: var(--ink);
}

.hero-note {
  max-width: 560px;
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.4rem;
  margin-top: 2.1rem;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.65;
}

.hero-note > span {
  color: var(--signal);
}

.hero-note strong {
  color: var(--ink-soft);
}

.system-plate {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
}

.system-plate::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border: 1px solid var(--line);
  z-index: 2;
}

.plate-head,
.plate-foot {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.35rem;
  border-bottom: 1px solid var(--line);
}

.plate-head > div:first-child {
  display: grid;
  gap: 0.15rem;
}

.plate-head span,
.plate-foot span,
.plate-led {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plate-head strong {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.plate-led {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink-soft);
}

.map-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.system-map {
  width: 100%;
  height: 100%;
}

.map-base {
  fill: var(--paper-raised);
}

.map-grid-line {
  fill: none;
  stroke: var(--grid-line);
  stroke-width: 1;
}

.connectors path,
.trace-lines path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
}

.map-arrow {
  fill: var(--ink-faint);
}

.trace-lines path {
  stroke: var(--signal);
  stroke-width: 1.6;
  stroke-dasharray: 5 12;
  animation: traceRoute 2.8s linear infinite;
}

.trace-lines path:nth-child(2) { animation-delay: -0.9s; }
.trace-lines path:nth-child(3) { animation-delay: -1.8s; }

.map-node rect {
  fill: var(--paper-raised);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.map-node .node-index {
  fill: var(--signal);
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.7px;
}

.map-node .node-label {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.55px;
}

.core-outer {
  fill: var(--ink);
  stroke: var(--ink);
}

.core-inner {
  fill: var(--paper);
  stroke: var(--paper);
}

.core-kicker,
.core-meta {
  fill: var(--ink-faint);
  font-family: var(--mono);
  font-size: 6.2px;
  font-weight: 700;
  letter-spacing: 0.7px;
}

.core-title {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.core-led {
  fill: var(--signal);
  animation: signalPulse 1.9s ease-in-out infinite;
}

.plate-foot {
  padding-block: 0.95rem;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.plate-foot span:last-child {
  text-align: right;
}

.hero-ledger {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper-raised);
}

.ledger-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: 0;
}

.ledger-grid > div {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 0.35rem;
  padding: 1rem 1.4rem;
  border-left: 1px solid var(--line);
}

.ledger-grid > div:last-child {
  border-right: 1px solid var(--line);
}

.ledger-grid span {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ledger-grid strong {
  font-size: 0.9rem;
  font-weight: 650;
}

/* Thesis */
.thesis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.7fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.thesis-copy {
  max-width: 590px;
  padding-top: 0.35rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.thesis-copy p + p {
  margin-top: 1.4rem;
}

.thesis-copy .lead {
  color: var(--ink);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 560;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.boundary-list {
  margin-top: clamp(5rem, 10vw, 9rem);
  border-top: 1px solid var(--line-strong);
}

.boundary-list article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 110px;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: 1.8rem;
  border-bottom: 1px solid var(--line);
}

.boundary-number {
  color: var(--signal);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.boundary-list h3 {
  margin-bottom: 0.45rem;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.boundary-list p {
  max-width: 700px;
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.boundary-list article > strong {
  justify-self: end;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Stack */
.stack-section {
  background-color: var(--paper-raised);
}

.stack-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: end;
}

.stack-intro {
  max-width: 520px;
  padding-bottom: 0.4rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.stack-explorer {
  display: grid;
  grid-template-columns: minmax(250px, 0.74fr) minmax(0, 1.45fr);
  margin-top: clamp(4rem, 8vw, 7rem);
  border: 1px solid var(--line-strong);
  background: var(--paper);
}

.stack-tabs {
  border-right: 1px solid var(--line-strong);
}

.stack-tabs button {
  width: 100%;
  min-height: 94px;
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.9rem;
  padding: 1.2rem 1.4rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.stack-tabs button:last-child {
  border-bottom: 0;
}

.stack-tabs button > span {
  grid-row: 1 / 3;
  align-self: start;
  padding-top: 0.18rem;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.stack-tabs strong {
  font-size: 0.95rem;
  font-weight: 650;
}

.stack-tabs small {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stack-tabs button:hover {
  background: var(--signal-soft);
}

.stack-tabs button[aria-selected="true"] {
  position: relative;
  background: var(--ink);
  color: var(--paper);
}

.stack-tabs button[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--signal);
}

.stack-tabs button[aria-selected="true"] > span,
.stack-tabs button[aria-selected="true"] small {
  color: color-mix(in srgb, var(--paper) 65%, transparent);
}

.stack-panels {
  min-width: 0;
  display: grid;
}

.stack-panel {
  min-height: 560px;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.2rem, 6vw, 5.5rem);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 26px 26px;
}

.js .stack-panel[hidden] {
  display: none;
}

.panel-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-meta span:first-child {
  color: var(--signal);
}

.stack-panel h3 {
  max-width: 740px;
  font-size: clamp(2.1rem, 4.3vw, 4.4rem);
  font-weight: 560;
  letter-spacing: -0.055em;
  line-height: 1.03;
}

.stack-panel > p {
  max-width: 650px;
  margin-top: 1.8rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 2.2rem;
}

.tag-list li {
  padding: 0.48rem 0.65rem;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ownership-ledger {
  margin-top: clamp(3rem, 6vw, 5rem);
  border: 1px solid var(--line-strong);
  background: var(--paper);
}

.ledger-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ledger-head span {
  color: var(--ink-faint);
}

.ownership-ledger dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.ownership-ledger dl > div {
  min-height: 70px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
}

.ownership-ledger dl > div:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.ownership-ledger dt {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.ownership-ledger dd {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.status-mark {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
}

.ownership-ledger .ledger-negative {
  color: var(--signal-deep);
}

.ownership-ledger .ledger-muted {
  color: var(--ink-faint);
}

/* Principles */
.principles-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(440px, 1fr);
  gap: clamp(4rem, 9vw, 9rem);
  align-items: start;
}

.sticky-heading {
  position: sticky;
  top: calc(var(--header-height) + 3rem);
}

.principle-list {
  border-top: 1px solid var(--line-strong);
}

.principle-list article {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.4rem;
  padding-block: 2.2rem;
  border-bottom: 1px solid var(--line);
}

.principle-list article > span {
  color: var(--signal);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

.principle-list h3 {
  margin-bottom: 0.55rem;
  font-size: clamp(1.45rem, 2.3vw, 2.15rem);
  font-weight: 590;
  letter-spacing: -0.04em;
}

.principle-list p {
  max-width: 560px;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.research-quote {
  margin-top: clamp(5rem, 10vw, 9rem);
  padding: clamp(2.2rem, 6vw, 5.5rem);
  border: 1px solid var(--line-strong);
  background: var(--ink);
  color: var(--paper);
}

.research-quote p {
  max-width: 1050px;
  font-size: clamp(2.4rem, 6.3vw, 6.3rem);
  font-weight: 550;
  letter-spacing: -0.065em;
  line-height: 0.98;
}

.research-quote em {
  color: var(--signal);
  font-style: normal;
}

.research-quote footer {
  margin-top: 2.4rem;
  color: color-mix(in srgb, var(--paper) 58%, transparent);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Status */
.status-section {
  background-color: var(--paper-raised);
}

.status-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 0.75fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.status-pill {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
  padding: 0.55rem 0.72rem;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.focus-board {
  border: 1px solid var(--line-strong);
  background: var(--paper);
}

.focus-head,
.focus-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.focus-head span,
.focus-foot span {
  color: var(--ink-faint);
}

.focus-board article {
  display: grid;
  grid-template-columns: 34px 1fr 12px;
  gap: 1rem;
  align-items: start;
  padding: 1.35rem 1.2rem;
  border-bottom: 1px solid var(--line);
}

.focus-board article > span {
  color: var(--signal);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.focus-board h3 {
  margin-bottom: 0.35rem;
  font-size: 1rem;
  font-weight: 650;
}

.focus-board article p {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.focus-board article > i {
  width: 6px;
  height: 6px;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-soft);
}

.focus-foot {
  border-bottom: 0;
}

.focus-foot strong {
  color: var(--signal-deep);
}

.contract-block {
  margin-top: clamp(4rem, 9vw, 8rem);
  border: 1px solid var(--line-strong);
  background: #0d0f10;
  color: #f4f1e8;
  box-shadow: var(--shadow);
}

.contract-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.contract-head > div {
  display: grid;
  gap: 0.15rem;
}

.contract-head span,
.contract-block > p {
  color: rgba(244, 241, 232, 0.52);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.contract-head strong {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.contract-head button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #f4f1e8;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.61rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 160ms ease, background 160ms ease;
}

.contract-head button:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
}

.contract-head button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.contract-block pre {
  padding: clamp(2rem, 6vw, 5rem);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: clamp(0.78rem, 1.5vw, 1.02rem);
  line-height: 1.95;
  tab-size: 2;
}

.contract-block code {
  font: inherit;
}

.code-muted { color: #9b9b94; }
.code-string { color: #f1bd78; }
.code-null { color: #ff7862; }
.code-bool { color: #93b7ff; }

.contract-block > p {
  padding: 0 1.2rem 1.2rem;
  text-align: right;
}

/* Closing and footer */
.closing {
  padding-block: clamp(6rem, 12vw, 11rem);
  background: var(--signal);
  color: #fff;
}

.closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.6fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
}

.closing .kicker {
  color: rgba(255, 255, 255, 0.72);
}

.closing h2 {
  max-width: 900px;
  font-size: clamp(3.15rem, 7.4vw, 7.2rem);
  font-weight: 570;
  letter-spacing: -0.075em;
  line-height: 0.92;
}

.closing-aside > p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.02rem;
}

.closing-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2rem;
}

.button-inverse {
  border-color: #fff;
  background: #fff;
  color: #141514;
}

.button-inverse:hover {
  border-color: #141514;
  background: #141514;
  color: #fff;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.text-link span {
  transition: transform 170ms ease;
}

.text-link:hover span {
  transform: translateY(-3px);
}

.site-footer {
  padding-block: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #0c0d0e;
  color: #f3f0e8;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.6fr 0.8fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.brand-footer .brand-mark svg rect,
.brand-footer .brand-mark svg path {
  stroke: #f3f0e8;
}

.brand-footer .brand-type span {
  color: rgba(243, 240, 232, 0.5);
}

.footer-grid > div:first-child > p {
  margin-top: 1rem;
  color: rgba(243, 240, 232, 0.5);
  font-size: 0.74rem;
}

.footer-grid nav {
  display: grid;
  gap: 0.7rem;
}

.footer-grid nav a {
  width: max-content;
  color: rgba(243, 240, 232, 0.62);
  font-size: 0.76rem;
  transition: color 160ms ease;
}

.footer-grid nav a:hover {
  color: #fff;
}

.footer-meta {
  justify-self: end;
  text-align: right;
}

.footer-meta p {
  color: rgba(243, 240, 232, 0.44);
  font-family: var(--mono);
  font-size: 0.58rem;
  line-height: 1.65;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-meta p + p {
  margin-top: 1.4rem;
}

.noscript-note {
  position: fixed;
  inset: auto 1rem 1rem;
  z-index: 200;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  color: var(--ink-soft);
  box-shadow: var(--shadow);
  font-size: 0.78rem;
}

/* Motion */
@keyframes traceRoute {
  to { stroke-dashoffset: -34; }
}

@keyframes signalPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js [data-reveal="scale"] {
  transform: translateY(12px) scale(0.985);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.js [data-reveal-delay="1"] { transition-delay: 80ms; }
.js [data-reveal-delay="2"] { transition-delay: 160ms; }
.js [data-reveal-delay="3"] { transition-delay: 240ms; }
.js [data-reveal-delay="4"] { transition-delay: 320ms; }

/* Responsive */
@media (max-width: 1120px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.78fr);
    gap: 3rem;
  }

  .hero h1 {
    /* Column bottoms out at 502px around 1024px wide. */
    font-size: clamp(2.2rem, 6.1vw, 4.2rem);
  }

  .desktop-nav {
    gap: 1.3rem;
  }

  .header-state {
    display: none;
  }
}

@media (max-width: 920px) {
  :root {
    --header-height: 68px;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-grid;
  }

  .hero {
    min-height: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    padding-top: clamp(2.5rem, 8vw, 5rem);
  }

  .hero-copy {
    max-width: 820px;
  }

  .system-plate {
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .ledger-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ledger-grid > div:nth-child(2) {
    border-right: 1px solid var(--line);
  }

  .ledger-grid > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .thesis-grid,
  .stack-heading,
  .principles-grid,
  .status-grid,
  .closing-grid {
    grid-template-columns: 1fr;
  }

  .thesis-copy,
  .stack-intro {
    max-width: 720px;
  }

  .stack-explorer {
    grid-template-columns: 1fr;
  }

  .stack-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .stack-tabs button {
    min-height: 104px;
    border-right: 1px solid var(--line);
  }

  .stack-tabs button:nth-child(3n) {
    border-right: 0;
  }

  .stack-tabs button:nth-last-child(-n + 3) {
    border-bottom: 0;
  }

  .stack-tabs button[aria-selected="true"]::before {
    inset: auto 0 0;
    width: auto;
    height: 4px;
  }

  .stack-panel {
    min-height: 480px;
  }

  .sticky-heading {
    position: static;
  }

  .principle-list {
    margin-top: 1rem;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-meta {
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 1.15rem;
    --section-space: 5.4rem;
  }

  .header-inner {
    gap: 0.8rem;
  }

  .brand-type {
    font-size: 0.69rem;
  }

  .hero {
    padding-top: calc(var(--header-height) + 1rem);
  }

  .hero-grid {
    gap: 3.2rem;
    padding-bottom: 3.5rem;
  }

  .eyebrow {
    margin-bottom: 2.4rem;
  }

  .hero h1 {
    /* Column bottoms out at 443px around 480px wide. */
    font-size: clamp(2.1rem, 9vw, 3.7rem);
    line-height: 0.94;
  }

  .hero-lede {
    font-size: 1rem;
  }

  .hero-actions {
    align-items: stretch;
  }

  .hero-actions .button {
    flex: 1 1 100%;
  }

  .plate-head,
  .plate-foot {
    padding-inline: 1rem;
  }

  .plate-led {
    display: none;
  }

  .plate-foot span:nth-child(2) {
    display: none;
  }

  .ledger-grid > div {
    min-height: 78px;
    padding: 0.9rem 1rem;
  }

  .ledger-grid strong {
    font-size: 0.78rem;
  }

  .section-index {
    margin-bottom: 3.2rem;
  }

  .section-heading h2 {
    font-size: clamp(2.6rem, 13vw, 4.2rem);
  }

  .boundary-list article {
    grid-template-columns: 32px 1fr;
  }

  .boundary-list article > strong {
    grid-column: 2;
    justify-self: start;
  }

  .stack-explorer,
  .stack-tabs,
  .stack-panels {
    min-width: 0;
  }

  .stack-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stack-tabs button {
    min-width: 0;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 0.65rem;
    padding-inline: 0.9rem;
  }

  .stack-tabs strong,
  .stack-tabs small {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .stack-tabs button:nth-child(3n) {
    border-right: 1px solid var(--line);
  }

  .stack-tabs button:nth-child(2n) {
    border-right: 0;
  }

  .stack-tabs button:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--line);
  }

  .stack-tabs button:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .stack-panel {
    min-height: 470px;
    padding: 2rem 1.3rem;
  }

  .panel-meta {
    margin-bottom: 3rem;
  }

  .panel-meta span:last-child {
    text-align: right;
  }

  .ownership-ledger dl {
    grid-template-columns: 1fr;
  }

  .ownership-ledger dl > div:nth-child(odd) {
    border-right: 0;
  }

  .ledger-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .principles-grid {
    gap: 3rem;
  }

  .research-quote {
    padding: 2.2rem 1.3rem;
  }

  .research-quote p {
    font-size: clamp(2.4rem, 13vw, 4rem);
  }

  .status-grid {
    gap: 3rem;
  }

  .contract-head {
    padding-inline: 1rem;
  }

  .contract-block pre {
    padding: 1.7rem 1rem;
    font-size: 0.72rem;
    line-height: 1.8;
  }

  .contract-block > p {
    text-align: left;
  }

  .closing h2 {
    font-size: clamp(3rem, 15vw, 5rem);
  }

  .closing-links {
    align-items: stretch;
  }

  .closing-links .button {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .theme-toggle {
    width: 36px;
    height: 36px;
  }

  .menu-toggle {
    width: 36px;
    height: 36px;
  }

  .lang-switch {
    height: 36px;
    padding: 0.15rem;
  }

  .lang-switch button {
    padding: 0 0.42rem;
    font-size: 0.6rem;
  }

  .hero h1 {
    /* Scales with the viewport rather than sitting at a fixed size, because
       the column keeps narrowing down to the 320px body min-width, where only
       ~283px is available and a fixed 2.7rem pushed Turkish onto a 4th line. */
    font-size: clamp(2.2rem, 11vw, 2.7rem);
  }

  .stack-tabs button {
    padding-inline: 0.65rem;
  }

  .stack-panel {
    padding-inline: 1.05rem;
  }

  .plate-foot span:last-child {
    display: none;
  }

  .plate-foot {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media print {
  :root {
    --paper: #fff;
    --paper-raised: #fff;
    --ink: #111;
    --ink-soft: #333;
    --ink-faint: #555;
    --line: rgba(0, 0, 0, 0.2);
    --line-strong: rgba(0, 0, 0, 0.4);
  }

  .site-header,
  .hero-actions,
  .theme-toggle,
  .menu-toggle,
  .contract-head button,
  .closing,
  .site-footer,
  .noscript-note {
    display: none !important;
  }

  .hero {
    min-height: auto;
    padding-top: 2rem;
  }

  .section,
  .hero-grid {
    padding-block: 2rem;
  }

  .system-plate,
  .contract-block,
  .research-quote {
    box-shadow: none;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}