/* ==========================================================================
   Self-hosted variable fonts (privacy-friendly, one file per family/style).
   Fraunces supplies the SOFT + opsz + weight axes used across the display.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces.woff2') format('woff2-variations'),
       url('../fonts/fraunces.woff2') format('woff2');
  font-variation-settings: "opsz" 14;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-italic.woff2') format('woff2-variations'),
       url('../fonts/fraunces-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono.woff2') format('woff2-variations'),
       url('../fonts/jetbrains-mono.woff2') format('woff2');
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  /* font stacks
     - display: editorial headlines + body prose (Fraunces, opsz/SOFT axes)
     - ui:      labels, sidebar, eyebrows, footer — pure system stack;
                each OS renders in its native sans rather than collapsing
                everything to one webfont default.
     - mono:    genuine code, package names, hex values, status terms */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino', serif;
  --font-ui:      system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* palette — light (default) */
  --paper:       #ECE4D0;
  --paper-ink:   #E2D9C2;
  --ink:         #0F1116;   /* body primary       ≥ AAA */
  --ink-soft:    #2A2B31;   /* body secondary     ≥ AAA */
  --ink-muted:   #605946;   /* informational      ≥ 5.3:1 AA */
  --ink-faint:   #8B8473;   /* decorative only    ≥ 3.0:1 */
  --rule:        #B9AF95;
  --rule-faint:  #CFC5A9;
  --blue:        #196EDE;   /* display / accent / strokes (large or decorative) */
  --blue-text:   #0E4FB0;   /* small-text blue    ≥ 5.9:1 AA */
  --blue-wash:        rgba(25, 110, 222, 0.08);
  --blue-wash-hover:  rgba(25, 110, 222, 0.14);
  --blue-shadow:      rgba(25, 110, 222, 0.18);
  --grid:        rgba(15, 17, 22, 0.055);
  --grain-op:    0.35;
  --grain-blend: multiply;
  --shadow-soft: 0 2px 8px -4px rgba(15, 17, 22, 0.18);

  /* spacing scale — 4px base */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;

  /* layout */
  --pad-x:  var(--s-10);
  --nav-h:  60px;
  --side-w: 248px;
  --foot-h: 32px;

  /* motion */
  --ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   160ms;
  --dur-base:   280ms;
  --dur-view:   360ms;
  --dur-reveal: 520ms;
  --tap-min:    44px;
}

/* dark mode — maintains the paper/ink metaphor at lower luminance */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #161511;
    --paper-ink:   #1C1B16;
    --ink:         #F1EADB;
    --ink-soft:    #D6CFBE;
    --ink-muted:   #9B937F;
    --ink-faint:   #6B6557;
    --rule:        #3A362D;
    --rule-faint:  #2A2721;
    --blue:        #4A8FEA;
    --blue-text:   #7FA9F0;
    --blue-wash:        rgba(74, 143, 234, 0.12);
    --blue-wash-hover:  rgba(74, 143, 234, 0.20);
    --blue-shadow:      rgba(74, 143, 234, 0.34);
    --grid:        rgba(241, 234, 219, 0.04);
    --grain-op:    0.18;
    --grain-blend: overlay;
    --shadow-soft: 0 2px 10px -4px rgba(0, 0, 0, 0.55);
  }
}

/* ==========================================================================
   Reset + page
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Viewport-lock only when there's enough room for the full composition.
   Above the threshold the page reads as a fixed framed document; below it
   (short windows OR users zooming text) we let the page scroll naturally
   so content can never be clipped. 720px is sized for ~200% text zoom on
   a 1440x900 desktop while still locking on most "normal" desktop sizes. */
@media (min-width: 901px) and (min-height: 720px) {
  html, body { overflow: hidden; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  /* Variation axes (opsz / SOFT) are set per Fraunces-using class so they
     don't inherit into sans/mono children where the axes don't exist. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;

  /* Two-axis grid: topbar spans full width; sidebar + main share the middle row. */
  display: grid;
  grid-template-areas:
    "topbar  topbar"
    "sidebar main"
    "footer  footer";
  grid-template-rows: var(--nav-h) 1fr var(--foot-h);
  grid-template-columns: var(--side-w) 1fr;
  min-height: 100%;
}

nav.topbar    { grid-area: topbar; }
nav.sidebar { grid-area: sidebar; }
main          { grid-area: main; }
footer.strip  { grid-area: footer; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0.01em;
  background: var(--blue-wash);
  color: var(--ink);
  padding: 1px 5px;
  border-radius: 2px;
}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--blue-text);
  outline-offset: 3px;
}

/* subtle grid — architect's tracing paper */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 1;
}

/* warm grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.13  0 0 0 0 0.09  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
  mix-blend-mode: var(--grain-blend);
  opacity: var(--grain-op);
}

/* ==========================================================================
   Edge decor: corner crosshairs
   ========================================================================== */

.crosshair {
  position: fixed;
  width: 14px;
  height: 14px;
  z-index: 3;
  pointer-events: none;
}
.crosshair::before,
.crosshair::after {
  content: '';
  position: absolute;
  background: var(--ink-muted);
}
.crosshair::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.crosshair::after  { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.crosshair.tl { top: var(--s-4); left: var(--s-4); }
.crosshair.tr { top: var(--s-4); right: var(--s-4); }
.crosshair.bl { bottom: var(--s-4); left: var(--s-4); }
.crosshair.br { bottom: var(--s-4); right: var(--s-4); }

/* ==========================================================================
   Top nav (slim — brand + meta only)
   ========================================================================== */

nav.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--pad-x);
  height: var(--nav-h);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(to bottom, var(--paper-ink), var(--paper));
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 6px;
  font: inherit;
  color: inherit;
  min-height: var(--tap-min);
}

.brand-mark {
  width: 26px;
  height: 26px;
  color: var(--blue);
  display: grid;
  place-items: center;
}
/* The mark is loaded as <img src="img/logo.svg"> — the SVG file owns its
   own light/dark fill via an embedded <style> block, so no `fill` rule
   here. <svg> selector kept for any inline-mark fallback. */
.brand-mark img,
.brand-mark svg { width: 26px; height: 26px; display: block; }
.brand-mark svg { fill: currentColor; }

.brand-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.brand-text .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--blue);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--blue-wash);
  transform: translateY(-1px);
}

.brand-text .sep { color: var(--ink-faint); font-weight: 300; }
.brand-text .sub { color: var(--ink-muted); font-weight: 400; letter-spacing: 0.18em; }

/* Inline Titon brand mark — same character as the topbar (mono, weight 500,
   uppercase) but tuned for body / display use: smaller relative size so it
   sits cleanly inside surrounding serif copy, less letter-spacing because
   the topbar's 0.18em is too airy at large optical sizes. */
.titon-mark {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  font-variation-settings: "wght" 540;
}

/* topbar meta — version pill on the right */
.topbar-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}
.topbar-meta .meta-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  background: var(--paper-ink);
  box-shadow: inset 0 -1px 0 var(--rule-faint);
}
.topbar-meta .meta-sep { color: var(--ink-faint); }
.topbar-meta .meta-text { text-transform: lowercase; }

/* ==========================================================================
   Sidebar — protocol navigation, grouped by layer
   ========================================================================== */

nav.sidebar {
  position: relative;
  z-index: 15;
  border-right: 1px solid var(--rule);
  background: var(--paper-ink);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Sidebar is a flat list of tool buttons — no per-layer grouping (with
   only 4 tools and the "AI / AI" stutter, the headers earned nothing). */
.tools-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 var(--s-5);
}

.tools-list li { display: block; }

.tool-btn {
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  padding: 10px 12px;
  width: 100%;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
  border-radius: 3px;
  min-height: var(--tap-min);
  text-align: left;
}

.tool-btn .idx {
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.06em;
  min-width: 22px;
  flex-shrink: 0;
}

/* Active state — left bracket + soft wash */
.tool-btn[aria-current="page"] {
  color: var(--blue-text);
  background: var(--blue-wash);
}
.tool-btn[aria-current="page"] .idx { color: var(--blue-text); }
.tool-btn[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--blue);
  border-radius: 1px;
}
/* ==========================================================================
   Main stage + view transitions
   ========================================================================== */

main {
  flex: 1;
  position: relative;
  z-index: 5;
  overflow: hidden;
}

.view {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-view) var(--ease);
}
.view.active {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Home view
   ========================================================================== */

.view--home {
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(360px, 1fr);
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-7) var(--pad-x) var(--s-9);
  height: 100%;
}

.specimen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  max-height: calc(100vh - 160px);
}

.specimen-frame {
  position: relative;
  padding: 28px;
  max-width: 540px;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 100%;
}

.specimen-frame .frame-border {
  position: absolute;
  inset: 0;
  border: 1px dashed var(--rule);
  pointer-events: none;
}

.specimen-frame .corner {
  position: absolute;
  width: 16px;
  height: 16px;
  color: var(--ink);
}
.specimen-frame .corner::before,
.specimen-frame .corner::after {
  content: '';
  position: absolute;
  background: currentColor;
}
.specimen-frame .corner::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.specimen-frame .corner::after  { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.specimen-frame .corner.tl { top: -8px; left: -8px; }
.specimen-frame .corner.tr { top: -8px; right: -8px; }
.specimen-frame .corner.bl { bottom: -8px; left: -8px; }
.specimen-frame .corner.br { bottom: -8px; right: -8px; }

.specimen-frame .dim-label {
  position: absolute;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--paper);
  padding: 2px 8px;
}
.specimen-frame .dim-label.top    { top: -9px; left: 32px; }
.specimen-frame .dim-label.bottom { bottom: -9px; right: 32px; }
.specimen-frame .dim-label .accent {
  color: var(--blue-text);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.specimen-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--blue);
}

.specimen-inner svg.logo {
  width: 70%;
  height: auto;
  fill: currentColor;
  /* CSS blur-radius ≈ 2× SVG stdDeviation; 56px ≈ stdDev 28 (parity with mark-glow.svg) */
  filter: drop-shadow(0 8px 56px var(--blue-shadow));
  animation: markIn 900ms var(--ease) both;
  transform-origin: 50% 50%;
}

.home-text {
  max-width: 480px;
  padding-right: var(--s-6);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
  animation: slideIn 600ms ease 80ms both;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--blue);
}
.eyebrow .version {
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

h1.home-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 20;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.94;
  letter-spacing: -0.028em;
  color: var(--ink);
  animation: slideIn 720ms var(--ease) 160ms both;
}

h1.home-title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--blue-text);
  position: relative;
}

h1.home-title em::after {
  content: '';
  position: absolute;
  left: 0;
  right: -2px;
  bottom: 0.06em;
  height: 4px;
  background: var(--blue);
  opacity: 0.14;
  z-index: -1;
}

.home-tagline {
  margin-top: 26px;
  font-size: 18px;
  line-height: 1.55;
  font-variation-settings: "opsz" 18, "SOFT" 60;
  color: var(--ink-soft);
  max-width: 460px;
  animation: slideIn 720ms ease 280ms both;
}

.home-hint {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  animation: slideIn 720ms ease 360ms both;
}
.home-hint .kbd {
  font-family: var(--font-mono);
  display: inline-block;
  min-width: 22px;
  text-align: center;
  padding: 3px 6px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.05em;
  background: var(--paper-ink);
  line-height: 1;
  box-shadow: inset 0 -1px 0 var(--rule-faint);
}
.home-hint .arrow { color: var(--blue-text); font-size: 14px; line-height: 1; }

/* home-meta — single horizontal info strip (replaces the templated 5-cell legend) */
.home-meta {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  animation: slideIn 720ms var(--ease) 440ms both;
}
.home-meta .dot { color: var(--ink-faint); }

/* ==========================================================================
   Projects view — "Built with Titon" showcase page.
   Static (not rendered from TOOLS); single-column centered layout — no
   specs sidebar, no diagram. Placeholder until real projects ship.
   ========================================================================== */

.view--projects {
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--pad-x) var(--s-9);
  height: 100%;
  overflow: hidden;
}

.projects-header {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding-top: var(--s-5);
  text-align: center;
}

.projects-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-5);
}

.projects-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--s-5);
}
.projects-title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.projects-title .dot { color: var(--blue); }

.projects-lede {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 32, "SOFT" 40;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto;
}
.projects-lede a {
  color: var(--blue-text);
  text-decoration: none;
  border-bottom: 1px solid var(--blue-text);
}
.projects-lede a:hover { border-bottom-color: var(--blue); color: var(--blue); }

.projects-body {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--s-7);
}

.projects-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 1080px;
}

/* Placeholder when no projects exist yet. */
.projects-placeholder {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: var(--s-9) var(--s-5);
  border: 1px dashed var(--rule-faint);
}

/* ==========================================================================
   Tool view
   ========================================================================== */

.view--tool {
  display: grid;
  grid-template-columns: 400px 1fr 260px;
  gap: var(--s-9);
  padding: var(--s-7) var(--pad-x) var(--s-9);
  align-items: start;
  height: 100%;
  overflow: hidden;
}

.tool-meta {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 14px;
}

.tool-meta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 1px;
  background: var(--blue);
}

.meta-top .layer {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.meta-top .layer .idx {
  color: var(--ink-muted);
  font-weight: 400;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  font-size: 12px;
}

.meta-top .role {
  margin-top: 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 72, "SOFT" 100;
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink-soft);
  max-width: 280px;
}

.specs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.specs li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-faint);
}
.specs li .k {
  font-family: var(--font-ui);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 600;
  padding-top: 3px;
}
.specs li .v {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  overflow-wrap: anywhere;
  line-height: 1.4;
}
/* Descriptive prose values render in sans — mono is reserved for actual code shapes
   (package names, paths, opcodes, identifiers). JS adds .prose at render time. */
.specs li .v.prose {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.45;
}

.specs .spec-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.status-dot {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  margin-right: 10px;
  transform: translateY(-1px);
  vertical-align: middle;
}
.status-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--blue);
  animation: pulse-ring 2.4s ease-in-out infinite;
}

/* Body column = title cap. Text content (lede/desc/examples) is bound
   to a NARROWER reading width via --text-width so a long title (e.g.
   "AutomaTON.") can stretch the title without dragging the body text
   wider — keeping every tool's reading column visually identical. */
.tool-body {
  --text-width: 720px;

  max-width: 960px;
  padding-top: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.tool-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: clamp(56px, 8vw, 116px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 28px;
}
.tool-name .dot { color: var(--blue); }

.tool-lede {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "SOFT" 40;
  font-size: 22px;
  line-height: 1.36;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 22px;
  max-width: var(--text-width);
}

.tool-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 16, "SOFT" 60;
  max-width: var(--text-width);
}
.tool-desc p + p { margin-top: 14px; }

/* "BUILD" / "RUN" examples list — short concrete phrases shown under
   the desc. Two-column on wide viewports; collapses to one column on
   narrow. Bound to the same reading width as desc/lede. */
.tool-examples {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-faint);
  max-width: var(--text-width);
}
.examples-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.examples-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  row-gap: 12px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18, "SOFT" 60;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.examples-list li {
  position: relative;
  padding-left: 14px;
}
.examples-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue-text);
  font-family: var(--font-ui);
  font-size: 12px;
}
@media (max-width: 760px) {
  .examples-list { grid-template-columns: 1fr; }
}

.tool-footer {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tool-footer .divider { flex: 1; height: 1px; background: var(--rule); }

.tool-diagram {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding-top: 48px;
}

.tool-diagram .schem-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
  align-self: flex-end;
}

.tool-diagram svg {
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* Schematic utility classes */
.s-stroke { stroke: var(--ink);       fill: none; stroke-width: 1; }
.s-guide  { stroke: var(--ink-muted); fill: none; stroke-width: 1; }
.s-dashed { stroke: var(--ink-muted); fill: none; stroke-width: 1; stroke-dasharray: 3 3; }
.s-blue   { stroke: var(--blue);      fill: none; stroke-width: 1.25; }
.s-blue-dashed { stroke: var(--blue); fill: none; stroke-width: 1.25; stroke-dasharray: 2 3; }
.s-blue-fill   { fill: var(--blue); stroke: none; }
.s-dot         { fill: var(--blue); }
.s-dot--paper  { fill: var(--paper); }

.s-text        { font-family: var(--font-mono); fill: var(--ink-muted); letter-spacing: 1.5px; }
.s-text--blue  { fill: var(--blue-text); }
.s-text--paper { fill: var(--paper); }

/* ==========================================================================
   Close button
   ========================================================================== */

.close-btn {
  position: absolute;
  top: var(--s-4);
  right: var(--pad-x);
  z-index: 30;
  background: transparent;
  border: 1px solid var(--rule);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
  font-family: var(--font-ui);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}
.close-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
}

/* Hover affordances — pointer: fine devices only (not touch) */
@media (hover: hover) and (pointer: fine) {
  .tool-btn:hover {
    color: var(--ink);
    background: var(--blue-wash-hover);
  }
  /* Active + hover keeps the stronger wash so feedback never disappears */
  .tool-btn[aria-current="page"]:hover { background: var(--blue-wash-hover); }

  .close-btn:hover {
    border-color: var(--blue-text);
    color: var(--blue-text);
    background: var(--blue-wash);
  }

  .brand { transition: opacity var(--dur-fast) ease; }
  .brand:hover           { opacity: 0.78; }
  .brand .brand-mark,
  .brand .brand-text .dot { transition: transform var(--dur-base) var(--ease); }
  .brand:hover .dot      { transform: translateY(-1px) scale(1.15); }

  .specs .spec-link:hover {
    color: var(--blue-text);
    border-bottom-color: var(--blue-text);
  }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes slideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes markIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse-ring {
  0%, 100% { transform: scale(1);   opacity: 0.35; }
  50%      { transform: scale(2.2); opacity: 0;    }
}
@keyframes schemPop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

.view.active .tool-name,
.view.active .tool-lede,
.view.active .tool-desc,
.view.active .tool-meta,
.view.active .tool-diagram,
.view.active .tool-footer,
.view.active .projects-eyebrow,
.view.active .projects-title,
.view.active .projects-lede,
.view.active .projects-body {
  animation: slideIn 520ms var(--ease) both;
}
.view.active .tool-meta         { animation-delay: 40ms;  }
.view.active .tool-name         { animation-delay: 80ms;  }
.view.active .tool-lede         { animation-delay: 180ms; }
.view.active .tool-desc         { animation-delay: 260ms; }
.view.active .tool-diagram      { animation-delay: 340ms; }
.view.active .tool-footer       { animation-delay: 420ms; }
.view.active .projects-eyebrow  { animation-delay: 40ms;  }
.view.active .projects-title    { animation-delay: 120ms; }
.view.active .projects-lede     { animation-delay: 220ms; }
.view.active .projects-body     { animation-delay: 320ms; }

.view.active .tool-diagram svg {
  animation: schemPop 600ms var(--ease) 460ms both;
  transform-origin: center right;
}

/* ==========================================================================
   Footer strip
   ========================================================================== */

footer.strip {
  position: relative;
  z-index: 10;
  height: var(--foot-h);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--paper-ink);
}
footer.strip .group { display: flex; gap: 22px; align-items: center; }
footer.strip .sep   { color: var(--ink-faint); }

footer.strip .live {
  position: relative;
  padding-left: 14px;
}
footer.strip .live::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  transform: translateY(-50%);
}
footer.strip .live::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  transform: translateY(-50%) scale(1);
  transform-origin: center;
  animation: pulse-ring 2.4s ease-in-out infinite;
}

/* ==========================================================================
   prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .view { transition: opacity 80ms ease; }
}

/* ==========================================================================
   prefers-contrast: more
   ========================================================================== */

@media (prefers-contrast: more) {
  :root {
    --ink-muted: var(--ink-soft);
    --ink-faint: var(--ink-muted);
    --blue-text: var(--ink);
  }
  .specs li .k { opacity: 1; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Narrower desktop — slim sidebar, drop the schematic column earlier */
@media (max-width: 1280px) {
  :root { --side-w: 220px; --pad-x: var(--s-8); }
  .view--tool { grid-template-columns: 240px 1fr; }
  .tool-diagram { display: none; }
}

@media (max-width: 1080px) {
  :root { --side-w: 200px; }
  .view--tool { grid-template-columns: 220px 1fr; gap: var(--s-7); }
  .tool-btn { font-size: 13.5px; padding: 8px 10px; }
}

/* ==========================================================================
   Mobile + short viewport — flow naturally; sidebar collapses to a horizontal
   strip below the topbar so it stays accessible without a hamburger.
   ========================================================================== */

@media (max-width: 900px), (max-height: 500px) {
  body {
    grid-template-areas:
      "topbar"
      "sidebar"
      "main"
      "footer";
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100%;
  }

  main { overflow: visible; height: auto; position: relative; }
  .view {
    position: static;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
  .view:not(.active) { display: none; }
  .close-btn { display: none; }

  /* Sidebar -> horizontal scrolling strip
     Layer grouping is preserved for screen readers (aria-labelledby) but the
     visual labels are hidden — the small mobile width can't carry both.
     Group boundaries hint via a thin rule between the first item of each
     group; right-edge mask hints the strip is scrollable. */
  nav.sidebar {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    position: sticky;
    top: 0;
    z-index: 14;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    align-items: stretch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }
  nav.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }

  /* Mobile: horizontal scroll-strip of tool buttons. */
  .tools-list {
    flex-direction: row;
    gap: 0;
    padding: 0;
  }

  .tool-btn {
    padding: 0 14px;
    font-size: 14px;
    font-weight: 500;
    min-height: var(--tap-min);
    flex-shrink: 0;
    border-radius: 0;
    color: var(--ink-soft);
    gap: 0;
  }
  .tool-btn .idx { display: none; }     /* names alone — keyboard hint covers index */
  .tool-btn[aria-current="page"]::before { display: none; }
  .tool-btn[aria-current="page"] {
    background: transparent;
    color: var(--blue-text);
    box-shadow: inset 0 -2px 0 var(--blue);
  }
}

/* Mobile (≤760px) */
@media (max-width: 760px) {
  :root { --pad-x: 20px; }

  .crosshair,
  .home-hint,
  .specimen-frame .dim-label
  { display: none; }

  nav.topbar {
    height: 52px;
    padding: 0 16px;
  }
  .brand { padding: 0; min-height: 36px; gap: 10px; }
  .brand-mark, .brand-mark svg, .brand-mark img { width: 22px; height: 22px; }
  .brand-text { font-size: 11px; letter-spacing: 0.16em; }
  .brand-text .sub,
  .brand-text > .sep:last-of-type { display: none; }
  /* Keep the version pill on mobile — it grounds the topbar's right side */
  .topbar-meta { display: flex; gap: 6px; }
  .topbar-meta .meta-sep,
  .topbar-meta .meta-text { display: none; }
  .topbar-meta .meta-pill { font-size: 10px; padding: 2px 6px; letter-spacing: 0.04em; }

  /* Home view — stacked, natural flow */
  .view--home {
    grid-template-columns: 1fr;
    padding: var(--s-6);
    gap: var(--s-5);
    height: auto;
    align-items: start;
  }
  .specimen { max-height: 50vh; height: auto; }

  /* Tool view — stacked */
  .view--tool {
    grid-template-columns: 1fr;
    padding: var(--s-6);
    overflow: visible;
    height: auto;
    gap: var(--s-6);
  }
  .tool-meta { padding-top: 0; height: auto; }
  .tool-meta::before { display: none; }
  .tool-body { height: auto; min-height: 0; }
  .tool-name { font-size: clamp(40px, 13vw, 76px); margin-bottom: var(--s-5); }

  footer.strip {
    height: auto;
    min-height: var(--foot-h);
    flex-wrap: wrap;
    padding: 6px 20px;
    row-gap: 4px;
    column-gap: 14px;
  }
  footer.strip .group { gap: 14px; }
}

/* ==========================================================================
   Short viewport — landscape phones, very short windows. Already collapsed
   to stacked grid above; just compact spacing.
   ========================================================================== */

@media (max-height: 500px) {
  :root { --nav-h: 48px; --foot-h: 24px; }

  .view--home {
    padding: 14px var(--pad-x);
    gap: var(--s-5);
    grid-template-columns: 220px 1fr;
    align-items: center;
  }
  .specimen { max-height: calc(100vh - 110px); }
  .home-title { font-size: clamp(24px, 3.8vw, 42px); line-height: 1; }
  .home-tagline { font-size: 14px; margin-top: 12px; line-height: 1.45; }
  .eyebrow { margin-bottom: 12px; }
  .home-meta { margin-top: 14px; padding-top: 10px; font-size: 11px; }
  .home-hint { display: none; }

  .view--tool {
    padding: 14px var(--pad-x);
    gap: var(--s-6);
    grid-template-columns: 200px 1fr;
  }
  .tool-diagram { display: none; }
  .tool-meta { padding-top: 6px; }
  .tool-meta::before { width: 24px; }
  .meta-top .role { font-size: 15px; margin-top: 10px; max-width: 200px; }
  .specs li { padding: 8px 0; grid-template-columns: 80px 1fr; }
  .specs li .k { font-size: 10px; }
  .specs li .v { font-size: 12px; }
  .tool-name { font-size: clamp(34px, 4.5vw, 54px); margin-bottom: 10px; }
  .tool-lede { font-size: 15px; margin-bottom: 10px; }
  .tool-desc { font-size: 13px; line-height: 1.5; }

  footer.strip { padding: 0 var(--pad-x); height: var(--foot-h); min-height: auto; flex-wrap: nowrap; }
  footer.strip .group:last-child { display: none; }
}

/* ==========================================================================
   Ultra-wide — cap content rail
   ========================================================================== */

@media (min-width: 1600px) {
  :root { --side-w: 280px; }
  nav.topbar,
  footer.strip {
    padding-inline: max(var(--pad-x), calc(50vw - 736px));
  }
  .view--home,
  .view--tool {
    padding-inline: max(var(--pad-x), calc(50vw - 736px - var(--side-w) / 2));
  }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  :root {
    --paper:       #fff;
    --paper-ink:   #fff;
    --ink:         #000;
    --ink-soft:    #111;
    --ink-muted:   #444;
    --ink-faint:   #777;
    --rule:        #aaa;
    --rule-faint:  #ccc;
    --blue:        #000;
    --blue-text:   #000;
    --blue-wash:   transparent;
    --blue-shadow: transparent;
    --shadow-soft: none;
    --grid:        transparent;
    --grain-op:    0;
  }

  html, body {
    overflow: visible;
    height: auto;
    background: #fff;
    color: #000;
    display: block;
  }
  body::before, body::after { display: none; }

  .crosshair, .home-hint,
  .close-btn, nav.topbar, nav.sidebar, footer.strip,
  .status-dot::after, .status-dot { display: none; }

  main { overflow: visible; position: static; max-width: none; }

  .view {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: none !important;
    padding: 32px 24px !important;
    break-after: page;
  }
  .view:last-of-type { break-after: auto; }

  .view--home { display: block; }
  .specimen {
    max-width: 260px;
    max-height: none;
    margin: 0 auto 28px;
  }
  .home-title   { font-size: 32pt !important; }
  .home-tagline { font-size: 12pt; max-width: none; }
  .home-legend  { break-inside: avoid; }

  .view--tool {
    display: block !important;
    overflow: visible !important;
    height: auto;
  }
  .tool-meta, .tool-body, .tool-diagram {
    margin-bottom: 20px;
    break-inside: avoid;
    max-width: none;
  }
  .tool-meta::before { display: none; }
  .tool-name  { font-size: 40pt !important; margin-bottom: 12px; }
  .tool-lede  { font-size: 14pt; }
  .tool-desc  { font-size: 12pt; line-height: 1.5; }
  .tool-diagram {
    max-width: 280px;
    padding-top: 0;
    align-items: flex-start;
  }
  .tool-diagram .schem-label { align-self: flex-start; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    filter: none !important;
    box-shadow: none !important;
  }
}