/* Story pages only. Chrome (logo, nav, footer, buttons, cards, channel colors) lives in site.css. */

.sheet.sec { padding-top: calc(128px + env(safe-area-inset-top)); }
.sheet h1 { font-size: clamp(36px, 6vw, 68px); line-height: 1.02; margin-top: 14px; }
.sheet h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; margin: 40px 0 14px; }
.sheet .sec-head { margin-bottom: 28px; }
.sheet .prose p, .sheet .tile li { color: var(--muted); }
.sheet ul.plain { margin: 8px 0 0; padding-left: 1.15em; }
.sheet ul.plain li { margin: 8px 0; }
.sheet .lead { font-size: 19px; max-width: 68ch; }
.sheet .lead p { margin: 0 0 14px; }
.sheet .when { color: var(--muted); margin: 16px 0 0; }
.sheet .banner { min-height: 0; margin: 8px 0 8px; }
.sheet .tile { margin-bottom: 14px; }
.sheet .tile h3 { margin-top: 0; }
.sheet .tile p { font-size: 16.5px; }
.sheet .tile a, .sheet .cite a, .sheet .prose a { color: var(--g); }
.sheet blockquote { margin: 14px 0 0; padding: 14px 16px; border-radius: 18px; background: rgba(0,0,0,0.35); border: 1px solid var(--line); color: var(--muted); }
.sheet blockquote p { margin: 0; color: rgba(255,255,255,0.88); }
.sheet blockquote footer { margin-top: 6px; font-size: 13px; color: var(--dim); }
.sheet .talk .bub { opacity: 1; transform: none; animation: none; white-space: normal; }
.sheet .cite { color: var(--muted); max-width: 68ch; }
.sheet .tags { margin: 8px 0 26px; }
.sheet .tags a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font: 700 13px var(--head); color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.04); text-decoration: none; }
.sheet .tags a.on, .nav .links a[aria-current="page"] { color: #fff; background: rgba(255,255,255,0.1); }
.sheet .tags a.on { border-color: transparent; background: linear-gradient(120deg, var(--c), var(--g)); }
.story-grid { grid-template-columns: repeat(2, 1fr); }
.story-grid .ch h3 { font-size: clamp(22px, 2.4vw, 30px); }
.sheet pre, .sheet .code {
  margin: 14px 0 0; padding: 16px 18px; border-radius: 18px; background: rgba(0,0,0,0.35); border: 1px solid var(--line);
  overflow: auto; font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #fff;
}
.sheet .endpoint { font: 800 18px/1.3 var(--head); letter-spacing: -0.02em; }
.sheet table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sheet th, .sheet td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sheet th { font: 900 12px var(--head); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.sheet td a { color: var(--g); }
.sheet .empty { color: var(--muted); }
.sheet .more { margin-top: 8px; }
@media (max-width: 760px) {
  .story-grid { grid-template-columns: 1fr; }
  .bento .tile.s2 { grid-column: span 6; }
}