/* app/static/site/company.css — the company pages (/manifesto, /about,
   /contact, /resources/blog), the landing page's "Who builds it" band, and
   the click-to-play YouTube posters (site/_video.html) wherever they appear.
   Rebuilt 2026-10-22 from John's site review.

   Drawn in site-a.css's hand and with its tokens: hairline rules, 12px
   radii, --ink / --ink-2 copy (never --ink-3 for text), 44px tap targets.
   Loaded after site-a.css by site/_video.html's assets(). */

/* ── Hero with a photo beside the words ── */
.co-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.co-hero .ha-lede { margin-bottom: 30px; }
.co-hero h1 { max-width: 14ch; }
.co-photo img { aspect-ratio: 16 / 9; object-fit: cover; }
.co-photo--wide img { aspect-ratio: 21 / 9; }
@media (max-width: 860px) {
  .co-hero { grid-template-columns: 1fr; }
  .co-photo--wide img { aspect-ratio: 16 / 9; }
}

/* ── Two columns: a heading or copy beside copy, form or photo ── */
.co-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.co-split--media { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
.co-copy { color: var(--ink-2); font-size: 18px; line-height: 1.7; }
.co-copy h2 { color: var(--ink); margin-bottom: 20px; }
.co-copy p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .co-split, .co-split--media { grid-template-columns: 1fr; } }

.site-a .co-band { padding-top: 0; border-bottom: 0; }

/* ── Manifesto timeline ── */
.co-timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 960px; }
.co-chapter { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: clamp(16px, 4vw, 56px); padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--line); }
.co-when { margin: 4px 0 0 !important; font: 500 13px/1.5 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.co-chapter h3 { margin-bottom: 10px; }
.co-chapter p:last-child { margin: 0; color: var(--ink-2); line-height: 1.7; }
@media (max-width: 680px) { .co-chapter { grid-template-columns: 1fr; gap: 8px; } }

/* ── About: the crew banner keeps its heading weight ── */
.co-crew small { max-width: 52em; }
.co-who { max-width: 960px; }

/* ── Contact: four paths ── */
.co-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.co-path { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; padding: 26px 26px 24px; background: var(--bg); scroll-margin-top: 96px; }
.co-path:target { border-color: var(--accent); }
.co-path h3 { font-size: 21px; margin-bottom: 10px; }
.co-path > p:not(.pa-eyebrow) { color: var(--ink-2); font-size: 16px; margin: 0 0 20px; }
.co-path-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.co-path-actions .ha-link { font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 760px) { .co-paths { grid-template-columns: 1fr; } }
#message { scroll-margin-top: 72px; }
.co-small-h { font-size: 17px !important; margin: 32px 0 10px !important; }
.co-company { font-size: 15px; }
.co-label { font-size: 14px; font-weight: 600; color: var(--ink); margin: 6px 0 -6px; }
.co-opt { font-weight: 400; color: var(--ink-2); }
.co-form select.pa-field { appearance: auto; }

/* ── Blog: categories, featured post, plain empty state ── */
.co-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.co-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.co-cat { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; color: var(--ink-2); }
.co-cat:hover { color: var(--ink); border-color: var(--ink-2); }
.co-cat.is-on { color: var(--ink); border-color: var(--accent); }
.co-feature { padding: 0; overflow: hidden; margin-bottom: 16px; }
.co-feature-link { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); color: inherit; }
.co-feature-img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; background: var(--bg-2); border-right: 1px solid var(--line); }
.co-feature-body { padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; }
.co-feature-title { font-size: clamp(24px, 2.6vw, 32px) !important; margin: 0 0 12px !important; }
@media (max-width: 860px) {
  .co-feature-link { grid-template-columns: 1fr; }
  .co-feature-img { min-height: 0; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); }
}
.co-empty { max-width: 760px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: clamp(22px, 3vw, 32px); }
.co-empty h2 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 10px; }
.co-empty p { margin: 0; color: var(--ink-2); }

/* ── Landing page: "Who builds it" — deliberately small ── */
.site-a .co-built { padding: clamp(40px, 5vw, 64px) 0; }
.co-built-in { max-width: 900px; }
.co-built h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 12px; }
.co-built-copy { margin: 0 !important; color: var(--ink-2); font-size: 18px; max-width: 46em; }

/* ── YouTube: click-to-play posters ── */
.yt { margin: 0; }
.yt-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: #000; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; inset: 0; display: block; color: #fff; }
.yt-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease, opacity 0.25s ease; opacity: 0.92; }
.yt-play:hover img, .yt-play:focus-visible img { transform: scale(1.02); opacity: 1; }
.yt-play:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.yt-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45)); }
.yt-btn-bg { fill: #212121; fill-opacity: 0.85; transition: fill 0.2s ease; }
.yt-play:hover .yt-btn-bg, .yt-play:focus-visible .yt-btn-bg { fill: #f00; fill-opacity: 1; }
.yt-len { position: absolute; right: 10px; bottom: 10px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.78); font: 500 12px/1.5 "Geist Mono", ui-monospace, monospace; color: #fff; }
.yt-cap { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.yt-cap b { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.yt-meta { font-size: 14px; color: var(--ink-2); }
.yt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px 16px; }
@media (prefers-reduced-motion: reduce) { .yt-play img { transition: none; } .yt-play:hover img { transform: none; } }