/* ============================================================
   etchlabs.ai — one-pager
   ============================================================
   Design notes:
   - Bone/graphite palette. No gradients. No crypto glow.
   - Typography: Inter Tight 300/400/500 — thin and quiet, in the
     same family as OpenAI's Söhne (which is proprietary). The
     display is deliberately held at 500 so it reads "considered",
     not "marketing".
   - Background: a single SVG of etched PCB-style right-angle
     traces with small solder pads. This is our mark — we literally
     etch paths. Hairline weight, never loud.
   - Menu: hidden by default, opens into an animated card anchored
     to the top-right, anchored from the Menu button.
   ============================================================ */

:root {
  --bg: #ece9e4;
  --bg-elevated: #f3f0ea;
  --ink: #2b2a28;
  --ink-soft: #54514b;
  --ink-muted: #8a867e;
  --hairline: #d4d0c8;
  --hairline-strong: #bfbab0;
  --accent: #8a4a3e;          /* dusty terracotta, used sparingly */
  --etch: #c7c2b7;            /* the circuit trace color */

  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --page-max: 1280px;
  --page-gutter: 48px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* -------- Etched circuit background ------------------------- */

.etch {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--etch);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

/* -------- Header / nav -------------------------------------- */

.site-header {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 32px var(--page-gutter) 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 3;
}

.wordmark {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -0.028em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  transition: color 0.2s ease;
}
.wordmark:hover { color: var(--ink); }
.wordmark-logo {
  position: relative;
  display: inline-flex;
  width: 90px;
  height: 90px;
  margin: -20px 0;                  /* keep header row height sane despite the big logo */
  top: -5px;                         /* optical nudge so the logo centerline sits on the wordmark's visual x-height, not its geometric center */
  color: var(--ink);
  transition: color 0.3s ease;
}
.wordmark-logo svg { width: 100%; height: 100%; display: block; }
.wordmark-text { line-height: 1; }

/* On wordmark hover, fade the inner maze + pads to the accent color.
   The outer silhouette stays graphite so the cube's shape doesn't
   waver — only the traces "light up" like a board under power. */
.wordmark:hover .wordmark-logo .etch-inner { color: var(--accent); }
.wordmark-logo .etch-inner {
  color: var(--ink);
  transition: color 0.7s var(--ease);
}

.header-spacer { flex: 1; }

.menu-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px 9px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 400;
  color: var(--bg);
  background: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.menu-pill:hover {
  border-color: var(--ink);
  background: var(--bg-elevated);
  color: var(--ink);
}
.menu-pill[aria-expanded="true"] {
  border-color: var(--hairline-strong);
  background: var(--bg-elevated);
  color: var(--ink);
}
.menu-pill[aria-expanded="true"] .menu-dot { background: var(--ink); }
.menu-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bg);
  transition: background 0.2s ease, transform 0.3s var(--ease);
}
.menu-pill:hover .menu-dot { background: var(--ink); }
.menu-pill[aria-expanded="true"] .menu-dot { transform: rotate(45deg) scale(1.2); }

/* -------- Menu panel (opens from Menu button) --------------- */

.menu-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: var(--page-gutter);
  width: min(560px, calc(100vw - 2 * var(--page-gutter)));
  background: var(--bg-elevated);
  border: 1px solid var(--hairline-strong);
  border-radius: 20px;
  box-shadow: 0 30px 80px -30px rgba(43, 42, 40, 0.25),
              0 10px 25px -15px rgba(43, 42, 40, 0.2);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.28s var(--ease),
              transform 0.28s var(--ease);
  z-index: 4;
}
.menu-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.menu-panel-inner {
  padding: 28px 30px 26px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 28px;
}

.menu-col-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.menu-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.menu-col a {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
}
.menu-col a:hover { color: var(--accent); }
.menu-col-mono a {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
}

/* Slight stagger so links feel alive when the panel opens */
.menu-panel .menu-col {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
.menu-panel.is-open .menu-col:nth-child(1) { transition-delay: 0.08s; }
.menu-panel.is-open .menu-col:nth-child(2) { transition-delay: 0.14s; }
.menu-panel.is-open .menu-col:nth-child(3) { transition-delay: 0.20s; }
.menu-panel.is-open .menu-col { opacity: 1; transform: translateY(0); }

/* -------- Hero ---------------------------------------------- */

.hero {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 110px var(--page-gutter) 140px;
  position: relative;
  z-index: 1;
}

.eyebrow {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--ink-muted);
}

.display {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(35px, 5.6vw, 83px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  max-width: 1100px;
}

.hero-sub {
  margin-top: 36px;
  max-width: 52ch;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
}

.hero-cta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  background: var(--ink);
  color: var(--bg) !important;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cta-pill:hover {
  background: var(--accent);
  color: var(--bg) !important;
  transform: translateY(-1px);
}
.cta-pill-arrow {
  font-size: 15px;
  transition: transform 0.2s ease;
}
.cta-pill:hover .cta-pill-arrow { transform: translateX(3px); }

.cta-ghost {
  display: inline-flex;
  align-items: center;
  padding: 15px 24px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.cta-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg-elevated);
}

/* -------- Card row ------------------------------------------ */

.card-row {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter) 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}

.card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 28px 28px 32px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-2px);
}

.card-num {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--bg);
}

.card-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 48px;
}

.card-title {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
}

.card-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34ch;
}

.card-actions { margin-top: auto; padding-top: 18px; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hairline-strong);
  transition: all 0.2s ease;
}
.card-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.card-link-arrow { font-size: 13px; transition: transform 0.2s ease; }
.card-link:hover .card-link-arrow { transform: translate(2px, -2px); }

/* Card 01 — endpoint list */
.endpoint-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
  margin-top: 8px;
}
.endpoint-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.endpoint-method {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 3px 7px;
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  min-width: 42px;
  text-align: center;
}
.endpoint-path {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.endpoint-price {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
}

/* Card 02 — receipts */
.receipt-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
  margin-top: 8px;
}
.receipt-list li { border-bottom: 1px solid var(--hairline); }
.receipt-list li a { display: block; padding: 14px 0; }
.receipt-list li a:hover { color: var(--accent); }
.receipt-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.receipt-endpoint {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.receipt-amount {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
}
.receipt-hash {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
}

/* Card 03 — code block */
.code-block {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.65;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  color: var(--ink);
  white-space: pre;
}
.c-muted { color: var(--ink-muted); }
.c-link { color: var(--ink); }
.c-accent { color: var(--accent); font-weight: 500; }

/* -------- Footer -------------------------------------------- */

.site-footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 60px var(--page-gutter) 40px;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  position: relative;
  z-index: 1;
}
.footer-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.footer-col p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 44ch;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.footer-col ul a {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
}
.footer-col ul a:hover { color: var(--accent); }

.footer-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  margin-top: 28px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--ink-muted);
}

/* -------- Responsive --------------------------------------- */

@media (max-width: 1000px) {
  .site-header { gap: 24px; padding: 24px 32px 0; }
  .hero { padding: 70px 32px 90px; }
  .display { font-size: clamp(32px, 7.2vw, 58px); }
  .card-row { grid-template-columns: 1fr; padding: 0 32px 60px; }
  .site-footer { grid-template-columns: 1fr; padding: 40px 32px; gap: 28px; }
  .footer-meta { flex-direction: column; gap: 8px; align-items: flex-start; }
  .menu-panel { right: 32px; }
  .menu-panel-inner { grid-template-columns: 1fr 1fr; }
  .menu-panel .menu-col:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  :root { --page-gutter: 20px; }
  .site-header { padding: 20px var(--page-gutter) 0; }
  .menu-label { display: none; }
  .menu-pill { padding: 10px; }
  .hero { padding: 48px 20px 60px; }
  .eyebrow { font-size: 13px; }
  .eyebrow::before { width: 18px; }
  .display { font-size: 32px; line-height: 1.04; letter-spacing: -0.03em; }
  .hero-sub { font-size: 15px; margin-top: 24px; }
  .hero-cta { margin-top: 22px; }
  .cta-pill { padding: 13px 22px; font-size: 13px; }
  .card { padding: 24px 22px 26px; min-height: 0; }
  .card-num { top: 16px; left: 16px; width: 36px; height: 36px; }
  .card-eyebrow { margin-top: 36px; }
  .card-title { font-size: 22px; }
  .menu-panel {
    right: var(--page-gutter);
    left: var(--page-gutter);
    width: auto;
  }
  .menu-panel-inner { grid-template-columns: 1fr; gap: 20px; padding: 22px 22px 20px; }
  .menu-panel .menu-col:nth-child(3) { grid-column: auto; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   /agents — agent catalog
   ============================================================
   Grid of agent cards, max 3 per row. Each card shows the
   agent name, description, tags, price, live status, and a
   link to try it. Shares the same bone/graphite palette.
   ============================================================ */

.catalog-hero {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 100px var(--page-gutter) 80px;
  position: relative;
  z-index: 1;
}

.catalog-grid {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter) 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
  /* align cards to the top so a partial last row doesn't stretch */
  align-items: start;
}

.agent-card {
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.agent-card:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-2px);
}
.agent-card--live {
  border-color: var(--hairline-strong);
}

/* Header row: status badge + price */
.agent-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agent-card-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hairline-strong);
  flex-shrink: 0;
}
.status-dot--live {
  background: #5a9e6f;
  box-shadow: 0 0 0 3px rgba(90, 158, 111, 0.18);
}
.status-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.agent-card--live .status-label {
  color: #5a9e6f;
}

.agent-card-price {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.price-value {
  font-weight: 500;
  color: var(--accent);
}

/* Body: name + description */
.agent-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agent-card-name {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
}
.agent-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Tags */
.agent-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agent-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 3px 9px;
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  background: var(--bg);
}

/* Footer: primary + secondary link */
.agent-card-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 4px;
  border-top: 1px solid var(--hairline);
  margin-top: 2px;
}
.agent-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--hairline-strong);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.agent-card-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.agent-card-link:hover .card-link-arrow { transform: translate(2px, -2px); }
.agent-card-api {
  font-size: 13px;
  color: var(--ink-muted);
  transition: color 0.2s ease;
}
.agent-card-api:hover { color: var(--ink); }

/* Catalog responsive */
@media (max-width: 1000px) {
  .catalog-hero { padding: 70px 32px 60px; }
  .catalog-grid { grid-template-columns: 1fr 1fr; padding: 0 32px 80px; }
}
@media (max-width: 640px) {
  .catalog-hero { padding: 48px 20px 40px; }
  .catalog-grid { grid-template-columns: 1fr; padding: 0 20px 60px; }
}

/* ============================================================
   /agents/blockchain-detective — live example page
   ============================================================ */

.ex-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 40px var(--page-gutter) 120px;
  position: relative;
  z-index: 1;
}

/* Breadcrumb */
.ex-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 40px;
}
.ex-breadcrumb a { color: var(--ink-soft); }
.ex-breadcrumb a:hover { color: var(--accent); }
.ex-breadcrumb-sep { opacity: 0.5; }
.ex-breadcrumb-current { color: var(--ink); }

/* Page header */
.ex-header {
  margin-bottom: 80px;
}
.ex-header-sub {
  margin-top: 24px;
  max-width: 62ch;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
}

/* Sections */
.ex-section {
  margin-bottom: 72px;
}
.ex-section-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.ex-section-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 24px;
  max-width: 60ch;
}

/* x402 flow */
.ex-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 720px;
}
.ex-flow-step {
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px 24px;
}
.ex-flow-step--402 { border-color: #c9956a; }
.ex-flow-step--200 { border-color: #7aad8b; }
.ex-flow-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.ex-flow-arrow {
  font-size: 18px;
  color: var(--hairline-strong);
  text-align: center;
  padding: 4px 0;
  align-self: flex-start;
  margin-left: 32px;
}
.ex-code {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  white-space: pre;
  overflow-x: auto;
  color: var(--ink);
}
.c-ok { color: #5a9e6f; font-weight: 600; }

/* User prompt */
.ex-prompt {
  display: flex;
  align-items: baseline;
  gap: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px 24px;
  max-width: 720px;
}
.ex-prompt-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.ex-prompt-text {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}

/* Thinking block */
.ex-think {
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--bg-elevated);
  overflow: hidden;
  max-width: 900px;
}
.ex-think-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  user-select: none;
  transition: background 0.15s ease;
}
.ex-think-summary::-webkit-details-marker { display: none; }
.ex-think-summary:hover { background: var(--bg); }
.ex-think[open] .ex-think-summary { border-bottom: 1px solid var(--hairline); }
.ex-think-icon {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1;
}
.ex-think-meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.ex-think-body {
  max-height: 480px;
  overflow-y: auto;
  padding: 20px 24px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  counter-reset: ex-line;
}
/* Scrollbar */
.ex-think-body::-webkit-scrollbar { width: 6px; }
.ex-think-body::-webkit-scrollbar-track { background: transparent; }
.ex-think-body::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 3px; }

/* Report */
.ex-report {
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 40px 44px 44px;
  max-width: 900px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.ex-report h2 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 2em 0 0.7em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.ex-report h2:first-child { margin-top: 0; }
.ex-report h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 1.6em 0 0.5em;
  letter-spacing: -0.01em;
}
.ex-report h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 1.2em 0 0.4em;
}
.ex-report p { margin-bottom: 0.9em; }
.ex-report p:last-child { margin-bottom: 0; }
.ex-report strong { color: var(--ink); font-weight: 600; }
.ex-report ul, .ex-report ol {
  margin: 0.5em 0 0.9em 1.4em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ex-report li { line-height: 1.55; }
.ex-report hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 2em 0;
}
.ex-report code {
  font-family: var(--mono);
  font-size: 0.84em;
  padding: 2px 6px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  color: var(--ink);
  letter-spacing: 0;
}
.ex-report pre {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 1em 0;
}
.ex-report pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.ex-report table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 13px;
}
.ex-report th, .ex-report td {
  border: 1px solid var(--hairline);
  padding: 9px 12px;
  text-align: left;
}
.ex-report th {
  background: var(--bg);
  font-weight: 600;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.ex-report tr:nth-child(even) td { background: var(--bg); }
.ex-report a {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline-strong);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ex-report a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Stats bar */
.ex-stats-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px 28px;
  max-width: 900px;
  flex-wrap: wrap;
  gap: 0;
}
.ex-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 28px 0 0;
}
.ex-stat--price .ex-stat-value { color: var(--accent); }
.ex-stat-value {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.ex-stat-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ex-stat-sep {
  width: 1px;
  height: 32px;
  background: var(--hairline-strong);
  margin: 0 28px 0 0;
  flex-shrink: 0;
  align-self: center;
}
.ex-stats-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--hairline-strong);
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.ex-stats-cta:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Example page responsive */
@media (max-width: 1000px) {
  .ex-page { padding: 32px 32px 80px; }
}
@media (max-width: 640px) {
  .ex-page { padding: 24px 20px 60px; }
  .ex-report { padding: 24px 20px 28px; }
  .ex-stats-bar { gap: 16px; }
  .ex-stat { padding-right: 0; }
  .ex-stat-sep { display: none; }
  .ex-stats-cta { width: 100%; }
}

/* ============================================================
   /about — founder's letter
   ============================================================
   Article-first layout: narrow measure, generous leading, a
   restrained typographic hierarchy. Sidebar on the right holds
   continuation links. The whole thing sits on the same bone
   background as the home page, with the etched circuit field
   still visible but unchanged.
   ============================================================ */

.article {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 80px var(--page-gutter) 100px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 64px;
  position: relative;
  z-index: 1;
}

.article-head {
  grid-column: 1 / -1;
  max-width: 900px;
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--hairline);
}

.article-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.article-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--ink-muted);
}

.article-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.032em;
  color: var(--ink);
  margin-bottom: 28px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}
.article-byline { color: var(--ink-soft); font-weight: 500; }
.article-sep { opacity: 0.6; }

.article-body {
  max-width: 68ch;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
}

.article-body p {
  margin-bottom: 1.15em;
}
.article-body p:last-child { margin-bottom: 0; }

.article-lede {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.4em !important;
}

.article-body h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 2.2em 0 0.8em;
}
.article-body h2:first-child { margin-top: 0; }

.article-body strong {
  color: var(--ink);
  font-weight: 600;
}
.article-body em {
  font-style: italic;
  color: var(--ink);
}
.article-body a {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline-strong);
  transition: all 0.2s ease;
}
.article-body a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.article-body code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 2px 7px;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  color: var(--ink);
  letter-spacing: 0;
}

.article-signoff {
  margin-top: 2.8em !important;
  padding-top: 1.4em;
  border-top: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.article-signoff-sub {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Sidebar */

.article-aside {
  position: relative;
}
.article-aside-inner {
  position: sticky;
  top: 40px;
  padding: 22px 22px 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 18px;
}
.article-aside-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.article-aside ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.article-aside li {
  border-top: 1px solid var(--hairline);
}
.article-aside li:first-child { border-top: 0; }
.article-aside a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.15s ease, padding-left 0.2s ease;
}
.article-aside a:hover {
  color: var(--accent);
  padding-left: 4px;
}

/* Article responsive */

@media (max-width: 1000px) {
  .article {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 32px 80px;
  }
  .article-head { margin-bottom: 36px; padding-bottom: 28px; }
  .article-body { font-size: 17px; }
  .article-lede { font-size: 20px; }
  .article-aside-inner { position: static; }
}

@media (max-width: 560px) {
  .article { padding: 40px 20px 60px; gap: 28px; }
  .article-title { font-size: 32px; letter-spacing: -0.028em; }
  .article-body { font-size: 16px; line-height: 1.6; }
  .article-lede { font-size: 18px; }
  .article-body h2 { font-size: 22px; margin: 1.8em 0 0.6em; }
  .article-aside-inner { padding: 18px; border-radius: 14px; }
}