/* site.css — AI Geek Blog page styles. Consumes tokens.css variables only.
   No raw hex, no off-scale px (layout widths per DESIGN.md containers). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent-text); text-underline-offset: 3px; }
a:hover { color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* brand bar */
.brandbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.brandbar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12) var(--space-24);
  display: flex; align-items: center; gap: var(--space-24);
}
.brand {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-20);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.brand-sub { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.brandnav { display: flex; gap: var(--space-16); margin-left: var(--space-8); }
.brandnav a { color: var(--color-text-secondary); text-decoration: none; font-size: var(--font-size-14); }
.brandnav a:hover { color: var(--color-text); }
.langswitch {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--space-4);
  font-size: var(--font-size-14);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: var(--space-4) var(--space-8);
  background: var(--color-bg);
  white-space: nowrap;
}
.langswitch a { color: var(--color-text-secondary); text-decoration: none; padding: 0 var(--space-4); }
.langswitch a[aria-pressed="true"] { color: var(--color-text); font-weight: var(--font-weight-bold); }
.langsep { color: var(--color-border); }

/* layout */
.page { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-24) var(--space-64); }

/* hero */
.hero { padding: var(--space-48) 0 var(--space-32); max-width: var(--container-text-max); }
.hero-kicker {
  font-family: var(--font-mono);
  font-size: var(--font-size-12);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-accent-text);
  margin: 0 0 var(--space-12);
}
.hero-title {
  font-size: var(--font-size-40);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--space-16);
  letter-spacing: var(--letter-spacing-display);
}
.hero-lede { font-size: var(--font-size-20); color: var(--color-text-secondary); margin: 0; }

/* post list */
.section-title { font-size: var(--font-size-24); line-height: var(--line-height-heading); margin: var(--space-32) 0 var(--space-16); }
.postcard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-24);
  max-width: var(--container-text-max);
}
.postcard-cover img { border-radius: var(--radius-media); border: 1px solid var(--color-border); }
.post-meta {
  font-family: var(--font-mono);
  font-size: var(--font-size-12);
  color: var(--color-text-secondary);
  margin: var(--space-16) 0 var(--space-4);
}
.postcard-title { font-size: var(--font-size-24); line-height: var(--line-height-heading); margin: 0 0 var(--space-8); }
.postcard-title a { color: var(--color-text); text-decoration: none; }
.postcard-title a:hover { color: var(--color-accent-text); }
.rule { width: 48px; height: 4px; background: var(--color-accent); border-radius: var(--radius-full); margin: var(--space-8) 0; }
.postcard-excerpt { color: var(--color-text-secondary); margin: var(--space-8) 0; }
.postcard-more { font-weight: var(--font-weight-medium); text-decoration: none; }

/* post page */
.post { max-width: var(--container-text-max); margin: 0 auto; padding-top: var(--space-32); }
.post .post-meta { margin-top: 0; }
.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-8); padding: 0; margin: 0 0 var(--space-8); }
.post-tags li {
  font-family: var(--font-mono);
  font-size: var(--font-size-12);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2, 2px) var(--space-8);
  background: var(--color-surface);
}
.post-title { font-size: var(--font-size-40); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-display); margin: 0 0 var(--space-8); }
.post-cover { border-radius: var(--radius-media); border: 1px solid var(--color-border); margin: var(--space-16) 0; }
.agent-note {
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-12) var(--space-16);
  font-size: var(--font-size-14);
  margin: 0 0 var(--space-24);
}
.post-body h1 { font-size: var(--font-size-32); line-height: var(--line-height-heading); }
.post-body h2 { font-size: var(--font-size-24); line-height: var(--line-height-heading); margin-top: var(--space-32); }
.post-body h3 { font-size: var(--font-size-20); line-height: var(--line-height-heading); margin-top: var(--space-24); }
.post-body p { margin: var(--space-12) 0; }
.post-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-code-bg);
  border-radius: var(--radius-inline);
  padding: 1px 5px;
}
.post-body pre {
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-16);
  overflow-x: auto;
}
.post-body pre code { background: transparent; padding: 0; }
.post-body table { border-collapse: collapse; width: 100%; font-size: var(--table-font-size); line-height: var(--table-line-height); display: block; overflow-x: auto; }
.post-body th, .post-body td { border-bottom: var(--table-row-border); padding: var(--table-cell-padding-block) var(--table-cell-padding-inline); text-align: left; overflow-wrap: anywhere; }
.post-body th { background: var(--table-header-bg); font-size: var(--table-header-font-size); letter-spacing: var(--table-header-letter-spacing); color: var(--table-header-color); text-transform: uppercase; }
.post-body blockquote { border-left: 4px solid var(--color-accent); margin: var(--space-16) 0; padding: var(--space-4) var(--space-16); color: var(--color-text-secondary); }
.post-body img { border-radius: var(--radius-media); }

/* house ad */
.housead {
  max-width: var(--container-text-max);
  margin: var(--space-48) auto 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-24);
}
.post + .housead { margin-left: auto; margin-right: auto; }
.housead-kicker { font-family: var(--font-mono); font-size: var(--font-size-12); letter-spacing: var(--letter-spacing-label); color: var(--color-text-secondary); margin: 0 0 var(--space-8); }
.housead-title { font-size: var(--font-size-20); font-weight: var(--font-weight-bold); margin: 0 0 var(--space-4); }
.housead-body { color: var(--color-text-secondary); margin: 0 0 var(--space-12); }
.housead-link { font-weight: var(--font-weight-medium); text-decoration: none; }

/* family footer */
.familybar { border-top: 1px solid var(--color-border); background: var(--color-surface); margin-top: var(--space-64); }
.familybar-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-32) var(--space-24); }
.family-title { font-weight: var(--font-weight-bold); margin: 0 0 var(--space-12); }
.family-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); padding: 0; margin: 0 0 var(--space-16); }
.family-list a { color: var(--color-text-secondary); text-decoration: none; }
.family-list a:hover { color: var(--color-text); }
.family-note { color: var(--color-text-secondary); font-size: var(--font-size-14); margin: 0; }

@media (max-width: 640px) {
  .brandbar-inner { gap: var(--space-8); padding: var(--space-12) var(--space-16); }
  .brand { font-size: var(--font-size-body); }
  .brand-sub { display: none; }
  .brandnav { display: none; }
  .page { padding: 0 var(--space-16) var(--space-48); }
  .hero { padding: var(--space-32) 0 var(--space-24); }
  .hero-title { font-size: var(--font-size-32); }
  .post-title { font-size: var(--font-size-32); }
  .familybar-inner { padding: var(--space-24) var(--space-16); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}