/* The homepage hero (5 October 2026; video of 9 October): the copy, and beside it (under it on narrower
   screens) a video in three parts: standard inference, then Test Time Cognition, then the two compared.
   hero-video.20261005.js plays the video; this stylesheet lays out the hero, frames the video and shows
   its poster until it plays. The videos and posters are rendered by scripts/build_hero_video.mjs: wide
   (16:9) and tall (4:5, on upright screens under 700 pixels), each in the light and the dark theme. Each
   poster comes in two frames: the opening frame (.start.jpg), which the first play starts on, and a
   still of the two runs compared, for when the video won't play by itself (reduced motion, data saver,
   or a browser that won't autoplay). Only the posters' file names differ from hero-video.20261005.css,
   which framed the video of 5 October (archive/homepage/20261005-hero-video/). */
.hv-hero {
  --hv-header: 118px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--hv-header));
  padding: 8px 0 72px;
}
@supports (height: 100svh) {
  .hv-hero { min-height: calc(100svh - var(--hv-header)); }
}
.hv-inner {
  box-sizing: border-box;
  width: min(1440px, 100% - 112px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(40px, 4.4vw, 80px);
}

/* The copy, as the previous hero set it, a size down so the title keeps "System 2 AI" on its first
   line beside the video. */
.hv-copy h1 { margin: 0 0 30px; font-size: clamp(40px, 3.7vw, 62px); font-weight: 400; letter-spacing: -.06em; line-height: 1.08; }
.hv-copy h1 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.078em; }
.hv-copy .hero-dek { max-width: 520px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; letter-spacing: -.35px; }

/* The video, with its poster behind it until it plays. It has no frame: its edges fade into the
   page, whose paper the video is drawn on, so it reads as part of the page (a decoded video's paper
   is a shade off the page's, which a hard edge would show). */
.hv-figure {
  position: relative;
  --hv-start: url("/assets/video/hero-ttc.20261009.wide-light.start.jpg");
  --hv-still: url("/assets/video/hero-ttc.20261009.wide-light.jpg");
  --hv-aspect: 16 / 9;
  min-width: 0;
  /* Never taller than the window, so phones held sideways and short windows see all of it. */
  max-width: calc((100vh - 76px) * var(--hv-aspect));
  margin: 0;
}
@supports (height: 100svh) {
  .hv-figure { max-width: calc((100svh - 76px) * var(--hv-aspect)); }
}
html[data-theme="dark"] .hv-figure {
  --hv-start: url("/assets/video/hero-ttc.20261009.wide-dark.start.jpg");
  --hv-still: url("/assets/video/hero-ttc.20261009.wide-dark.jpg");
}
.hv-frame {
  position: relative;
  aspect-ratio: var(--hv-aspect);
  overflow: hidden;
  background: var(--paper) var(--hv-start) center / cover no-repeat;
  --hv-fade-x: 2.5%;
  --hv-fade-y: 3%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--hv-fade-x), #000 calc(100% - var(--hv-fade-x)), transparent), linear-gradient(to bottom, transparent, #000 var(--hv-fade-y), #000 calc(100% - var(--hv-fade-y)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 var(--hv-fade-x), #000 calc(100% - var(--hv-fade-x)), transparent), linear-gradient(to bottom, transparent, #000 var(--hv-fade-y), #000 calc(100% - var(--hv-fade-y)), transparent);
  mask-composite: intersect;
}
.hv-figure.is-still .hv-frame { background-image: var(--hv-still); }
@media (prefers-reduced-motion: reduce) {
  .hv-frame { background-image: var(--hv-still); }
}
.hv-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}
/* Before its first play the poster shows, not the video's own first frame. */
.hv-figure.is-still .hv-video { opacity: 0; }
.hv-video:fullscreen { background: var(--paper); cursor: auto; }
.hv-video:-webkit-full-screen { background: var(--paper); cursor: auto; }
/* Its two controls, Pause (or Play) and Full screen: round icon buttons in the video's lower right
   corner that show while the pointer is over the video, while one has keyboard focus, while it is
   paused, and on touch screens for a few seconds after a tap on the video. Their names are for
   screen readers and tooltips. */
.hv-bar {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
@media (hover: hover) {
  .hv-figure.is-live:hover .hv-bar { opacity: 1; pointer-events: auto; }
}
.hv-figure.is-live:has(:focus-visible) .hv-bar,
.hv-figure.is-live.is-awake .hv-bar,
.hv-figure.is-live.is-paused .hv-bar { opacity: 1; pointer-events: auto; }
.hv-figure:not(.is-live) .hv-bar { visibility: hidden; }
.hv-bar button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--muted-text, var(--muted));
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.hv-bar button:hover { color: var(--ink); border-color: var(--muted); }
.hv-bar button:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.hv-bar svg { width: 12px; height: 12px; fill: currentColor; }
.hv-bar button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.hv-toggle .hv-play, .hv-figure.is-paused .hv-toggle .hv-pause { display: none; }
.hv-figure.is-paused .hv-toggle .hv-play { display: block; }
@media (prefers-reduced-motion: reduce) {
  .hv-bar { transition: none; }
}

.hv-description {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The page's side margins and the header's height follow the site's breakpoints. Below 1180
   pixels the video is too small beside the copy to read its labels, so it goes under the copy. */
@media (max-width: 1179.98px) {
  .hv-hero { display: block; min-height: 0; padding: 20px 0 64px; }
  .hv-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hv-copy h1 { font-size: clamp(36px, 5.2vw, 56px); }
  .hv-copy .hero-dek { max-width: 620px; }
}
@media (max-width: 1100px) {
  .hv-hero { --hv-header: 94px; }
  .hv-inner { width: calc(100% - 64px); }
}
@media (max-width: 760px) {
  .hv-inner { width: calc(100% - 40px); gap: 30px; }
  .hv-hero { padding: 14px 0 44px; }
}
/* Phones held upright: the tall video. */
@media (max-width: 699.98px) and (orientation: portrait) {
  .hv-figure {
    --hv-start: url("/assets/video/hero-ttc.20261009.tall-light.start.jpg");
    --hv-still: url("/assets/video/hero-ttc.20261009.tall-light.jpg");
  }
  html[data-theme="dark"] .hv-figure {
    --hv-start: url("/assets/video/hero-ttc.20261009.tall-dark.start.jpg");
    --hv-still: url("/assets/video/hero-ttc.20261009.tall-dark.jpg");
  }
  .hv-figure { --hv-aspect: 4 / 5; }
  .hv-copy h1 { font-size: clamp(32px, 8.7vw, 56px); margin-bottom: 22px; }
  .hv-copy .hero-dek { font-size: 17px; }
  .hv-bar { right: 10px; bottom: 10px; }
  .hv-bar button { width: 40px; height: 40px; }
}

/* Print: the copy alone. */
@media print {
  .hv-hero { display: block; min-height: 0; padding: 24px 0 36px; }
  .hv-inner { display: block; }
  .hv-figure { display: none; }
}