/* The house pages: the home showcase and /about/. Tokens in tokens.css, shared pieces in site.css.
   Spec: docs/superpowers/specs/2026-10-12-strategitz-showcase-design.md §4. */
.open { background: var(--night); color: var(--night-text); border-bottom: 3px solid var(--gold); }
.open-in { display: grid; grid-template-columns: minmax(0, 1.25fr) 200px minmax(0, 1fr); grid-template-areas: "copy face sub"; gap: 32px; align-items: start; padding: 40px 0 44px; }
.open-copy { grid-area: copy; }
.open .label { color: var(--gold); }
.open h1 { font: 700 52px/54px var(--f-head); margin: 0 0 16px; text-wrap: balance; }
.gold-t { color: var(--gold); display: block; }
.open-dek { margin: 0; color: var(--night-soft); font-size: 19px; max-width: 46ch; }
.open-face { grid-area: face; margin: 0; }
.open-face img { width: 200px; height: 200px; object-fit: cover; border-bottom: 3px solid var(--gold); }
.open-face figcaption { margin-top: 8px; font: 400 13px/18px var(--f-mono); color: var(--night-soft); }
.open-sub { grid-area: sub; background: var(--paper-raised); color: var(--ink); border-top: 3px solid var(--gold); padding: 18px 20px; }
.open-sub h2 { font: 700 20px/24px var(--f-head); margin: 0 0 6px; }

/* On the wire now: the live editions in one framed board */
.wire { padding: 32px 0 28px; }
.board { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border: 1px solid var(--ink); background: var(--paper-raised); }
.board-main { padding: 22px 24px; border-right: 1px solid var(--ink); }
.board-head { font: 700 34px/38px var(--f-head); margin: 0 0 16px; text-wrap: balance; }
.board-also { display: inline-block; margin-left: 18px; font: 400 14px/20px var(--f-mono); color: var(--ink-soft); }
.board-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 20px 22px; align-items: start; }
.board-item.text-only { grid-template-columns: minmax(0, 1fr); }
.board-item + .board-item { border-top: 1px solid var(--rule); }
.board-thumb img { width: 96px; border: 1px solid var(--rule); }
.board-sub { font: 700 21px/25px var(--f-head); margin: 0 0 6px; text-wrap: balance; }
.board-sub a { text-decoration: none; }
.board-sub a:hover { text-decoration: underline; }
.board-meta { margin: 0; font: 400 13px/18px var(--f-mono); color: var(--ink-soft); }

/* One research engine. Infinite outputs: one ruled row per product, its free and its paid layer */
.index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.index li { display: grid; grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1.9fr); grid-template-areas: "name when free" "name when paid"; gap: 4px 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.ix-name { grid-area: name; font: 700 26px/30px var(--f-head); text-decoration: none; }
a.ix-name:hover { color: var(--signal); }
.ix-when { grid-area: when; font: 600 13px/18px var(--f-mono); text-transform: uppercase; letter-spacing: .03em; color: var(--gold-ink); }
.ix-tier { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.45; }
.ix-tier:first-of-type { grid-area: free; }
.ix-tier + .ix-tier { grid-area: paid; }
.ix-tier b { font: 600 12px/18px var(--f-mono); text-transform: uppercase; letter-spacing: .03em; margin-right: 6px; }
.ix-free { color: var(--rise); }
.ix-paid { color: var(--signal); }
.index .ix-soon { grid-template-areas: "name when free" "name when paid"; }
.ix-soon .ix-tier { grid-area: free; }
.ix-soon .more { grid-area: paid; justify-self: start; }

/* ResearchOS band: title, the engine drawing, three facts */
.ros { background: var(--night); color: var(--night-text); }
.ros-in { display: grid; gap: 22px; padding: 36px 0; }
.ros h2 { font: 700 30px/36px var(--f-head); margin: 0; max-width: 36ch; text-wrap: balance; }
.ros-facts { display: flex; margin: 0; }
.ros-facts div { flex: 1; border-left: 1px solid var(--night-soft); padding: 0 16px; }
.ros-facts dt { font: 700 26px/30px var(--f-head); color: var(--gold); }
.ros-facts dd { margin: 4px 0 0; font: 400 13px/18px var(--f-mono); color: var(--night-soft); }
.ros-cta { justify-self: start; font: 600 16px/1 var(--f-head); color: var(--night); background: var(--gold); padding: 12px 16px; text-decoration: none; }

/* The engine: sources in, two stages, editions out. Still without the script or with reduced motion. */
.engine-fig { margin: 0; }
.engine { display: block; width: 100%; height: auto; overflow: visible; }
.engine-tall { display: none; max-width: 340px; margin: 0 auto; }
.engine .e-doc, .engine .e-box, .engine .e-stage, .engine .e-screen, .engine .e-line, .engine .e-flow, .engine .e-bar { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.engine .e-doc, .engine .e-line, .engine .e-bar { stroke: var(--night-soft); stroke-width: 1.5; }
.engine .e-box { stroke: var(--gold); stroke-width: 2; }
.engine .e-stage, .engine .e-screen { stroke: var(--night-text); stroke-width: 1.5; }
.engine .e-flow { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 6 8; }
.engine .e-gold, .engine .e-dot { fill: var(--gold); }
.engine .lamp { fill: var(--gold); }
.engine .e-lab { fill: var(--gold); font: 600 11px var(--f-mono); }
.engine .e-t1 { fill: var(--night-text); font: 700 19px var(--f-head); }
.engine .e-t2 { fill: var(--night-soft); font: 400 13px var(--f-mono); }
.engine-tall .e-t2 { font-size: 11.5px; }
.engine text.out { fill: var(--gold); font: 700 15px var(--f-head); }
.engine .src { transform-box: fill-box; transform-origin: center; }
.engine .out { opacity: 0; }
.engine .o1 { opacity: 1; }
.engine.on .src { animation: feed 12s ease-in infinite; }
.engine.on .s2 { animation-delay: 2s; }
.engine.on .s3 { animation-delay: 4s; }
.engine.on .s4 { animation-delay: 6s; }
.engine.on .s5 { animation-delay: 8s; }
.engine.on .s6 { animation-delay: 10s; }
.engine.on .e-flow { animation: flow 1.2s linear infinite; }
.engine.on .lamp { animation: lamp 3s ease-in-out infinite; }
.engine.on .l2 { animation-delay: 1.5s; }
.engine.on .out { animation: show 12s step-end infinite; }
.engine.on .o2 { animation-delay: -9s; }
.engine.on .o3 { animation-delay: -6s; }
.engine.on .o4 { animation-delay: -3s; }
@keyframes feed { 0%, 4% { transform: translate(0, 0); opacity: 1; } 14% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } 15% { transform: translate(0, 0); opacity: 0; } 24%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes flow { to { stroke-dashoffset: -28; } }
@keyframes lamp { 50% { opacity: .25; } }
@keyframes show { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .engine.on *, .engine * { animation: none !important; } }

/* Who runs it, and /about/ */
.who p { max-width: 64ch; }
.aboutp { padding: 32px 0 20px; }
.aboutp h1 { font: 700 44px/48px var(--f-head); margin: 0 0 12px; }
.lede { font-size: 21px; line-height: 1.5; max-width: 60ch; margin: 0 0 8px; }
.notice { margin: 24px 0; padding: 16px 20px; border-left: 4px solid var(--signal); background: var(--paper-raised); max-width: 70ch; }
.contact-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 600 16px/24px var(--f-head); }

@media (max-width: 860px) {
  .open-in { grid-template-columns: 1fr; grid-template-areas: "copy" "sub" "face"; gap: 22px; padding: 24px 0 28px; }
  .open h1 { font-size: 36px; line-height: 40px; }
  .open-dek { font-size: 17px; }
  .open-face { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
  .open-face img { width: 96px; height: 96px; }
  .board { grid-template-columns: 1fr; }
  .board-main { border-right: 0; border-bottom: 1px solid var(--ink); padding: 18px; }
  .board-head { font-size: 26px; line-height: 30px; }
  .board-also { display: block; margin: 12px 0 0; }
  .board-item { padding: 16px 18px; }
  .index li, .index .ix-soon { grid-template-columns: 1fr; grid-template-areas: "name" "when" "free" "paid"; gap: 2px; }
  .ix-name { font-size: 22px; line-height: 26px; }
  .ix-tier { font-size: 16px; }
  .ros h2 { font-size: 24px; line-height: 29px; }
  .engine-wide { display: none; }
  .engine-tall { display: block; }
  .ros-facts { flex-direction: column; row-gap: 14px; }
  .aboutp h1 { font-size: 32px; line-height: 36px; }
}