/* Loom Dark — WorldSlate site design system.
   Tokens mirror addons/worldslate/skin.gd "Loom Dark" with ink3/ink4 lifted slightly
   for AA contrast on dark backgrounds. */

:root {
  /* Palette — Loom Dark canon */
  --bg0:        #1a1612;
  --bg1:        #221d18;
  --bg2:        #2a2420;
  --bg3:        #332c26;
  --bg-ink:     #0f0c0a;
  --line:       #3a322b;
  --line-strong:#4a4038;

  /* Ink — text. ink3 lifted from #a89b86 to #b8ad9a for AA on bg0. */
  --ink:        #f4ede0;
  --ink2:       #d9cfbd;
  --ink3:       #b8ad9a;
  --ink4:       #8a7f6e;

  /* Accent */
  --accent:     #e89148;
  --accent-hi:  #ffb070;
  --accent-lo:  #c46a2e;
  --accent-ink: #1a0f08;
  --accent2:    #6bb3a8;

  /* Status */
  --ok:         #8bba6f;
  --warn:       #e5b450;
  --danger:     #d46363;

  /* Biomes (used in ProcWorld) */
  --b-meadow:   #9fbf6a;
  --b-forest:   #4a7d4e;
  --b-deepwood: #2d5438;
  --b-swamp:    #6b7a3d;
  --b-beach:    #e8d79a;
  --b-ocean:    #3d6c87;
  --b-shallow:  #68a3b5;
  --b-rock:     #7a6e5e;
  --b-snow:     #e4dfd1;

  /* Type */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;

  /* Layout */
  --maxw: 1240px;
  --gutter: 32px;
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }
code, pre {
  font-family: var(--mono);
  font-size: 0.92em;
}
code {
  background: var(--bg2); color: var(--accent);
  padding: 1px 6px; border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
pre code { background: none; border: none; padding: 0; color: inherit; }

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink); padding: 10px 14px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.skip-link:focus { left: 16px; top: 16px; z-index: 9999; }

/* Layout */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ───────────────────── Nav ───────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(26, 22, 18, 0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; height: 100%;
  display: flex; align-items: center; gap: 32px;
  padding: 0 var(--gutter);
}
.nav-logo {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink); font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: 0.005em;
}
.nav-logo:hover { color: var(--ink); }
.nav-links { list-style: none; display: flex; gap: 4px; flex: 1; }
.nav-links a {
  color: var(--ink3); font-size: 14px; padding: 8px 12px; border-radius: var(--r-md);
  font-family: var(--mono); letter-spacing: 0.02em;
}
.nav-links a:hover { color: var(--ink); background: var(--bg1); }
.nav-links a.active {
  color: var(--ink); background: var(--bg2); border: 1px solid var(--line);
  padding: 7px 11px;
}
.nav-cta {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink);
  padding: 11px 18px; border-radius: var(--r-md);
}
.nav-cta:hover { background: var(--accent-hi); color: var(--accent-ink); }

/* Mobile nav */
.nav-toggle { display: none; }
.nav-hamburger { display: none; }
@media (max-width: 880px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger {
    display: flex; width: 44px; height: 44px; align-items: center; justify-content: center;
    margin-left: auto; cursor: pointer; color: var(--ink);
  }
  .nav-hamburger span { width: 22px; height: 2px; background: currentColor; position: relative; }
  .nav-hamburger span::before, .nav-hamburger span::after {
    content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
  }
  .nav-hamburger span::before { top: -7px; }
  .nav-hamburger span::after { top: 7px; }
  .nav-toggle:checked ~ .nav-links {
    display: flex; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--bg1); border-bottom: 1px solid var(--line); padding: 16px var(--gutter); gap: 4px;
  }
}

/* ───────────────────── Buttons ───────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r-md); border: 1px solid transparent;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: background 120ms, color 120ms, border-color 120ms;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--accent-ink); }
.btn-outline {
  background: transparent; color: var(--ink); border-color: var(--line-strong);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink3); border: none; }
.btn-ghost:hover { color: var(--accent); }
.btn-lg { padding: 14px 24px; font-size: 13px; }

/* ───────────────────── Editorial scaffolding ───────────────────── */
.rule {
  display: flex; align-items: center; gap: 16px; margin-bottom: 32px;
  color: var(--ink4); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.rule-line { flex: 1; height: 1px; background: var(--line); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; line-height: 1.05; color: var(--ink); }
h1 { font-size: clamp(48px, 7vw, 96px); }
h2 { font-size: clamp(36px, 4.5vw, 64px); }
h3 { font-size: clamp(24px, 2.5vw, 36px); }
h4 { font-size: 18px; font-family: var(--sans); font-weight: 600; }
em { color: var(--accent); font-style: italic; }
.lead { font-size: 19px; line-height: 1.55; color: var(--ink2); font-family: var(--serif); font-style: italic; }
p + p { margin-top: 14px; }

/* ───────────────────── Page header band ───────────────────── */
.page-head {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: 80px 0 56px;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute; inset: 0; height: 220px; bottom: auto;
  background: linear-gradient(to bottom, transparent, var(--bg0));
  pointer-events: none; z-index: 1;
}
.page-head .container { position: relative; z-index: 2; }
.page-head .eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 24px;
}
.page-head h1 { font-size: clamp(40px, 10vw, 112px); margin-bottom: 16px; }
.page-head .lead { max-width: 640px; }

/* Decorative ProcWorld strip on page heads */
.head-band {
  position: absolute; top: 0; left: 0; right: 0; height: 240px;
  opacity: 0.22; mask-image: linear-gradient(to bottom, black, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
}

/* ───────────────────── Sections ───────────────────── */
section { padding: 120px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: none; }
section.tight { padding: 80px 0; }
section.alt { background: var(--bg1); }
@media (max-width: 720px) {
  section { padding: 64px 0; }
  section.tight { padding: 48px 0; }
  .page-head { padding: 56px 0 40px; }
  .hero { padding: 72px 0 56px; }
}
@media (max-width: 480px) {
  section { padding: 48px 0; }
  section.tight { padding: 40px 0; }
  .page-head { padding: 40px 0 32px; }
}

/* ───────────────────── Cards & grids ───────────────────── */
.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.feature-card {
  padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg0); transition: background 200ms;
}
.feature-card:hover { background: var(--bg1); }
.feature-card h3 {
  font-family: var(--sans); font-size: 17px; font-weight: 600;
  letter-spacing: -0.005em; margin-bottom: 10px; color: var(--ink);
}
.feature-card p { font-size: 14px; color: var(--ink2); line-height: 1.55; }
.feature-card .num {
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  letter-spacing: 0.18em; margin-bottom: 12px; display: block;
}
@media (max-width: 880px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; }
}

.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
.split.tight { gap: 48px; }
.split.right-narrow { grid-template-columns: 1.2fr 1fr; }
.split.left-narrow { grid-template-columns: 1fr 1.2fr; }
@media (max-width: 880px) { .split, .split.right-narrow, .split.left-narrow { grid-template-columns: 1fr; gap: 40px; } }

/* ───────────────────── Forms ───────────────────── */
.signup {
  display: flex; max-width: 480px;
  border: 1px solid var(--ink2); background: rgba(15, 12, 10, 0.6);
}
.signup input[type="email"] {
  flex: 1; background: transparent; border: none; outline: none; color: var(--ink);
  font-family: var(--mono); font-size: 14px; padding: 16px 18px;
}
.signup input[type="email"]::placeholder { color: var(--ink4); }
.signup button {
  background: var(--ink); color: var(--bg0); border: none; cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0 26px;
}
.signup button:hover { background: var(--accent-hi); color: var(--accent-ink); }
.signup-honey { display: none !important; }
.signup-status { font-family: var(--mono); font-size: 12px; color: var(--ink3); margin-top: 10px; }

/* ───────────────────── Code block ───────────────────── */
.code-window {
  background: #0a0807; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
.code-window-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--bg-ink);
  font-family: var(--mono); font-size: 11px; color: var(--ink4);
}
.code-window-head .pill {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--accent-lo); color: var(--accent);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
}
.code-window pre {
  margin: 0; padding: 20px 24px; font-size: 13px; line-height: 1.65;
  color: #dcdfe4; overflow: auto; white-space: pre;
}
.code-window-foot {
  border-top: 1px solid var(--line); padding: 10px 14px;
  display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--ink4);
}
.tok-com  { color: #6c7068; }
.tok-key  { color: var(--accent2); }
.tok-fn   { color: var(--accent-hi); }
.tok-str  { color: #a8c992; }
.tok-num  { color: #d4a96a; }

/* ───────────────────── Keyboard chips ───────────────────── */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--r-sm);
  background: var(--bg2); border: 1px solid var(--line-strong); color: var(--ink);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  box-shadow: 0 1px 0 var(--line-strong), inset 0 1px 0 rgba(255,255,255,0.04);
}
.kbd.accent { color: var(--accent); border-color: var(--accent-lo); }

/* ───────────────────── Tables ───────────────────── */
.docs-content table, .data-table {
  width: 100%; border-collapse: collapse; margin: 24px 0;
  font-size: 14px;
}
.docs-content th, .docs-content td, .data-table th, .data-table td {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.docs-content th, .data-table th {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink4); font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
}
.docs-content td { color: var(--ink2); }
.docs-content tr:hover td { background: var(--bg1); }

/* ───────────────────── Trailer / video ───────────────────── */
.video-frame {
  aspect-ratio: 16/9; border: 1px solid var(--line); background: #000;
  border-radius: var(--r-md); overflow: hidden;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; }

/* ───────────────────── Footer ───────────────────── */
footer {
  border-top: 1px solid var(--line); background: var(--bg-ink); padding: 40px 0;
}
footer .footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink4); flex-wrap: wrap;
}
footer .footer-links { list-style: none; display: flex; gap: 24px; flex-wrap: wrap; }
footer .footer-links a { color: var(--ink3); }
footer .footer-links a:hover { color: var(--accent); }

/* ───────────────────── Docs sidebar layout ───────────────────── */
.docs-shell {
  display: grid; grid-template-columns: 240px 1fr; gap: 64px;
  max-width: var(--maxw); margin: 0 auto; padding: 56px var(--gutter) 120px;
}
.docs-side {
  position: sticky; top: calc(var(--nav-h) + 24px); align-self: start;
  font-family: var(--mono); font-size: 12px;
}
.docs-side ul { list-style: none; }
.docs-side > ul > li { margin-bottom: 18px; }
.docs-side .group {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink4); margin-bottom: 8px;
}
.docs-side a {
  display: block; padding: 6px 10px; color: var(--ink3); border-left: 1px solid var(--line);
  margin-left: -1px;
}
.docs-side a:hover { color: var(--ink); border-left-color: var(--ink3); }
.docs-side a.active { color: var(--accent); border-left-color: var(--accent); }
.docs-content { max-width: 760px; }
.docs-content h2 {
  font-size: 40px; margin: 64px 0 16px; padding-top: 24px;
  border-top: 1px solid var(--line);
}
.docs-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.docs-content h3 { font-size: 22px; margin: 28px 0 10px; font-family: var(--sans); font-weight: 600; letter-spacing: -0.005em; }
.docs-content p { color: var(--ink2); margin-bottom: 12px; }
.docs-content ul, .docs-content ol { color: var(--ink2); padding-left: 22px; margin-bottom: 14px; }
.docs-content li { margin-bottom: 4px; }
.docs-content .anchor { color: var(--ink4); margin-left: 8px; opacity: 0; transition: opacity 120ms; }
.docs-content h2:hover .anchor, .docs-content h3:hover .anchor { opacity: 1; }
@media (max-width: 880px) { .docs-shell { grid-template-columns: 1fr; gap: 24px; } .docs-side { position: static; } }

/* ───────────────────── FAQ editorial ───────────────────── */
.faq-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq-item {
  padding: 32px 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 80px 1fr; gap: 32px;
}
.faq-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--accent); padding-top: 4px; }
.faq-q {
  font-family: var(--serif); font-size: 26px; line-height: 1.2; color: var(--ink);
  margin-bottom: 14px; letter-spacing: -0.01em;
}
.faq-a { color: var(--ink2); font-size: 16px; max-width: 720px; }
@media (max-width: 720px) {
  .faq-item { grid-template-columns: 1fr; gap: 8px; }
}

/* ───────────────────── Legal prose (licensing, privacy) ───────────────────── */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}
.legal-content > p,
.legal-content > ul {
  color: var(--ink2);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 20px;
}
.legal-content > ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.legal-content > ul > li {
  position: relative;
  padding-left: 22px;
}
.legal-content > ul > li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--mono);
}
.legal-content strong { color: var(--ink); font-weight: 600; }
.legal-content code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--bg1);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  color: var(--ink);
}
.legal-content h2 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 64px 0 24px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.legal-content h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin: 32px 0 12px;
  color: var(--ink);
}
.legal-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
.legal-content a:hover { text-decoration-color: var(--accent); }
.legal-meta {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink4) !important;
  margin-bottom: 48px !important;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.legal-signoff {
  font-family: var(--serif) !important;
  font-style: italic;
  color: var(--accent) !important;
  font-size: 20px !important;
  margin-top: 40px !important;
}

/* ───────────────────── About ───────────────────── */
.bio { max-width: 720px; }
.bio p { color: var(--ink2); font-size: 17px; line-height: 1.7; margin-bottom: 16px; }
.bio strong { color: var(--ink); }
.project-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px;
}
.project-card {
  border: 1px solid var(--line); padding: 24px; background: var(--bg1); border-radius: var(--r-md);
}
.project-card h3 { font-family: var(--sans); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.project-card p { color: var(--ink3); font-size: 14px; margin-bottom: 16px; }
.project-card img { border-radius: var(--r-sm); margin-bottom: 14px; }
@media (max-width: 720px) { .project-cards { grid-template-columns: 1fr; } }

/* Helpers */
.muted { color: var(--ink4); }
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; vertical-align: middle; margin-right: 8px; }
hr.div { border: none; border-top: 1px solid var(--line); margin: 48px 0; }

/* Hero */
.hero {
  position: relative; padding: 120px 0 100px; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-bg { position: absolute; inset: 0; opacity: 0.55; }
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(26,22,18,0.4) 0%, rgba(26,22,18,0.85) 60%, var(--bg0) 100%);
}
.hero .container { position: relative; z-index: 2; text-align: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 36px;
}
.hero h1 { max-width: 1100px; margin: 0 auto; }
.hero .lead { max-width: 720px; margin: 36px auto 0; }
.hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }

/* Two infinities */
.infinities { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 56px; align-items: start; }
.infinities > div { display: flex; flex-direction: column; }
.infinities > div > p:nth-of-type(2) { min-height: 3em; }
.infinity-canvas { border: 1px solid var(--line); height: 280px; overflow: hidden; }
.infinity-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.infinity-grid > figure { margin: 0; border: 1px solid var(--line); overflow: hidden; aspect-ratio: 1; position: relative; background: var(--bg-ink); }
/* Single looping GIF variant — used in place of the 3-stills grid when an
   animated loop conveys "many" better than three frozen frames.
   The GIFs cycle through different palettes (especially the recipes loop
   that walks through every template), so the panel itself does the work
   of unifying them: matte ink-dark background + stronger border + a
   strip of internal padding so the cycling content always sits inside
   a consistent frame, never edge-to-edge. */
.infinity-loop {
  margin: 0; padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-ink);
  overflow: hidden;
}
.infinity-loop img,
.infinity-loop video { width: 100%; height: auto; display: block; }
/* Desktop: cap at ~67% of the column so the framed pair reads as content
   rather than dominating the section. Mobile (≤880px) the .infinities
   grid stacks to 1-col and we keep full-width for legibility. */
@media (min-width: 881px) {
  .infinity-loop { max-width: 67%; }
}
.infinity-grid > figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.infinity-grid > figure figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 6px 10px; background: linear-gradient(to top, rgba(20,16,12,0.9), transparent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.infinity-grid > div { border: 1px solid var(--line); overflow: hidden; aspect-ratio: 1; }
@media (max-width: 880px) { .infinities { grid-template-columns: 1fr; } }

/* Partition modes strip (features.html) */
.partition-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 64px; }
.partition-grid > figure { margin: 0; border: 1px solid var(--line); overflow: hidden; aspect-ratio: 1; position: relative; background: var(--bg-ink); }
.partition-grid > figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partition-grid > figure figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 6px 10px; background: linear-gradient(to top, rgba(20,16,12,0.9), transparent); font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 880px) { .partition-grid { grid-template-columns: repeat(2, 1fr); } }

/* Workflow steps */
.workflow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.workflow-step {
  padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.workflow-step .num {
  font-family: var(--serif); font-size: 56px; color: var(--accent);
  font-style: italic; line-height: 1; margin-bottom: 16px;
}
.workflow-step h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.workflow-step p { color: var(--ink2); font-size: 14px; }
@media (max-width: 880px) { .workflow { grid-template-columns: 1fr 1fr; } }

/* Tool grid (8 keys) */
.tool-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.tool-cell {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-md);
}
.tool-cell .label { font-size: 13px; color: var(--ink); font-family: var(--sans); }

/* Engine cards */
.engine-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px;
}
.engine-card {
  padding: 28px; background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-md);
}
.engine-card h3 { font-family: var(--sans); font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.engine-card p { color: var(--ink2); font-size: 14px; margin-bottom: 14px; }
.engine-card .badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(232, 145, 72, 0.12); color: var(--accent); border: 1px solid var(--accent-lo);
}
@media (max-width: 880px) { .engine-grid { grid-template-columns: 1fr; } }

/* Trust list */
.trust-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; }
.trust-list li {
  font-family: var(--mono); font-size: 12px; color: var(--ink2);
  display: flex; align-items: center; gap: 8px;
}
.trust-list .check { color: var(--accent); font-weight: 700; }


/* ───────────────────── Signup form add-ons ───────────────────── */
/* loom .signup is display:flex single row. signup-status only enters the
   layout when it has an actual error/success message; empty status collapses. */
.signup { flex-wrap: wrap; position: relative; }
.signup > .signup-status {
  flex-basis: 100%; padding: 0 18px 12px; margin: 0;
  font-family: var(--mono); font-size: 12px; color: var(--ink3);
}
.signup-status:empty { display: none; padding: 0; }
.signup-status.is-error { color: var(--danger); }
.signup-status.is-success { color: var(--ok); }

/* Success replacement (signup.js swaps form.outerHTML for this block) */
.signup-success {
  max-width: 480px; margin: 0 auto;
  padding: 36px 28px; background: var(--bg1);
  border: 1px solid var(--accent-lo); border-radius: var(--r-md);
  text-align: center;
}
.signup-success-icon { font-size: 32px; margin-bottom: 14px; line-height: 1; }
.signup-success h3 {
  font-family: var(--serif); font-size: 28px; font-weight: 500;
  margin-bottom: 12px; color: var(--accent); letter-spacing: -0.01em;
}
.signup-success p { color: var(--ink2); font-size: 15px; line-height: 1.6; }


/* ───────────────────── Code window tabs (home premise) ───────────────────── */
.code-tabs { display: flex; gap: 2px; }
.code-tabs button {
  background: transparent; border: 1px solid transparent;
  color: var(--ink4); font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: var(--r-sm);
  cursor: pointer; transition: color 120ms, background 120ms, border-color 120ms;
}
.code-tabs button:hover { color: var(--ink2); }
.code-tabs button.active {
  color: var(--accent); background: var(--bg2);
  border-color: var(--line);
}


/* ───────────────────── Code window: bounded height + line wrap ───────────────────── */
/* When paired with text in a .split (home premise), the code window stretches
   to match the left column's height, scrolls vertically inside, and wraps long
   lines so there is never a horizontal scrollbar. */
.code-window--bounded {
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: stretch;
}
.code-window--bounded pre {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Right-aligned tab strip variant */
.code-tabs--right { margin-left: auto; }


/* ───────────────────── Signup button alignment + anchor scroll offset ───────────────────── */
.signup { align-items: stretch; }
.signup button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px;
}
.signup input[type="email"] { min-height: 56px; box-sizing: border-box; }

/* Narrow viewports: stack input + button vertically, both full-width.
   The default flex-wrap behavior leaves the button at auto-width on its own
   line, which looks awkward beside an empty gutter. */
@media (max-width: 480px) {
  .signup { flex-direction: column; }
  .signup input[type="email"] { width: 100%; padding: 14px 16px; }
  .signup button { width: 100%; padding: 14px 16px; }
}

/* Sticky-nav offset for in-page anchor jumps (e.g. nav 'Get started' -> #notify) */
:target { scroll-margin-top: calc(var(--nav-h) + 32px); }


/* ───────────────────── Studio screen tour grid (home section 03) ───────────────────── */
.studio-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 56px;
}
.studio-grid > figure {
  margin: 0; border: 1px solid var(--line); overflow: hidden;
  background: var(--bg-ink); position: relative;
}
.studio-grid > figure img {
  width: 100%; height: auto; display: block;
}
.studio-grid > figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(20,16,12,0.95), transparent);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
}
@media (max-width: 720px) { .studio-grid { grid-template-columns: 1fr; } }

/* Single editor screenshot frame for inline use (features section III) */
.editor-shot {
  margin: 48px 0 0; border: 1px solid var(--line); overflow: hidden;
  background: var(--bg-ink);
}
.editor-shot img { width: 100%; height: auto; display: block; }


/* ───────────────────── About page bio portrait ───────────────────── */
.bio-portrait { margin: 0 auto; max-width: 460px; width: 100%; }
.bio-portrait img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.bio-portrait figcaption {
  margin-top: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink4);
}
@media (max-width: 880px) { .bio-portrait { max-width: 240px; } }


/* ───────────────────── Tool deck — compact 4-col grid (features section III) ───────────────────── */
.tool-deck {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  margin-top: 32px;
}
.tool-deck > div {
  padding: 18px 20px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg0); transition: background 200ms;
}
.tool-deck > div:hover { background: var(--bg1); }
.tool-deck > div .num {
  display: block; margin-bottom: 8px;
}
.tool-deck > div h3 {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em; margin-bottom: 6px; color: var(--ink);
}
.tool-deck > div p { font-size: 12px; color: var(--ink2); line-height: 1.45; }
@media (max-width: 880px) { .tool-deck { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tool-deck { grid-template-columns: 1fr; } }


/* ───────────────────── About: Discord strip ───────────────────── */
.about-discord-strip {
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  padding: 32px; background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-md);
}
@media (max-width: 600px) {
  .about-discord-strip { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .about-discord-strip > a { justify-self: start; }
}

/* ───────────────────── Feature grid: 4-card variant ───────────────────── */
.feature-grid.is-four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .feature-grid.is-four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid.is-four { grid-template-columns: 1fr; } }

/* ───────────────────── Feature grid: 5-card centered variant ───────────────────── */
/* Uses a 6-col base; each card spans 2. Cards 4 and 5 sit at cols 2 and 4 so the
   bottom row of two is visually centered under the row of three. */
.feature-grid.is-five {
  grid-template-columns: repeat(6, 1fr);
  /* Row 2 has empty col 1 (cards 4+5 are centered at col 2 / col 4). The
     parent's inherited border-left would dangle through that empty cell —
     drop it here and put explicit left borders on the row-leftmost cards. */
  border-left: 0;
}
.feature-grid.is-five > .feature-card { grid-column: span 2; }
.feature-grid.is-five > .feature-card:nth-child(4) { grid-column: 2 / span 2; }
.feature-grid.is-five > .feature-card:nth-child(5) { grid-column: 4 / span 2; }
.feature-grid.is-five > .feature-card:nth-child(1),
.feature-grid.is-five > .feature-card:nth-child(4) {
  border-left: 1px solid var(--line);
}
@media (max-width: 880px) {
  .feature-grid.is-five {
    grid-template-columns: 1fr 1fr;
    border-left: 1px solid var(--line);
  }
  .feature-grid.is-five > .feature-card,
  .feature-grid.is-five > .feature-card:nth-child(4),
  .feature-grid.is-five > .feature-card:nth-child(5) { grid-column: auto; }
  .feature-grid.is-five > .feature-card:nth-child(1),
  .feature-grid.is-five > .feature-card:nth-child(4) { border-left: 0; }
}
@media (max-width: 560px) {
  .feature-grid.is-five { grid-template-columns: 1fr; }
}


/* ───────────────────── Language picker (i18n) ───────────────────── */
/* Rendered inside .nav-links as the rightmost <li>. On mobile it is */
/* shown together with the rest of nav-links via the hamburger toggle. */
.nav-lang-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-family: var(--mono);
}
.nav-links .nav-lang-item a {
  padding: 6px 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-lang-item a[aria-current="true"] {
  color: var(--accent);
  background: var(--bg-ink);
}
.nav-lang-item a[aria-current="true"]:hover {
  color: var(--accent);
  background: var(--bg-ink);
}
.nav-lang-item .sep {
  color: var(--ink4);
  opacity: 0.45;
  user-select: none;
  font-size: 11px;
}
@media (max-width: 880px) {
  .nav-lang-item {
    width: 100%;
    justify-content: center;
    margin: 8px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
}


/* ───────────────────── Docs roadmap timeline ───────────────────── */
/* Mobile-first: tight padding, smaller dot. Desktop layers on top. */
.docs-content .docs-timeline {
  position: relative;
  margin: 24px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--line);
}
.docs-content .docs-timeline > h3 {
  position: relative;
  margin-top: 28px;
  padding-top: 0;
}
.docs-content .docs-timeline > h3:first-child { margin-top: 0; }
.docs-content .docs-timeline > h3::before {
  content: "";
  position: absolute;
  /* Sit on the vertical line: own width (10) + half-line (1) + own padding (20) → -28 from h3 */
  left: -27px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  /* Punch the dot through the timeline line — bg-color halo masks the line behind. */
  box-shadow: 0 0 0 3px var(--bg0);
}
.docs-content .docs-timeline > p,
.docs-content .docs-timeline > ul {
  margin-bottom: 16px;
}
.docs-content .docs-timeline > p:last-child,
.docs-content .docs-timeline > ul:last-child { margin-bottom: 0; }

@media (min-width: 720px) {
  .docs-content .docs-timeline {
    padding-left: 28px;
  }
  .docs-content .docs-timeline > h3::before {
    left: -36px;
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 4px var(--bg0);
  }
  .docs-content .docs-timeline > h3 { margin-top: 36px; }
}