/* The homepage hero (5 October 2026): the copy, and beside it (under it on narrower screens) a video
   that explains what Test Time Cognition adds over standard inference. 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 first chapter, for when the
   video won't play by itself (reduced motion, data saver, or a browser that won't autoplay). */
.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.20261005.wide-light.start.jpg");
  --hv-still: url("/assets/video/hero-ttc.20261005.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.20261005.wide-dark.start.jpg");
  --hv-still: url("/assets/video/hero-ttc.20261005.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.20261005.tall-light.start.jpg");
    --hv-still: url("/assets/video/hero-ttc.20261005.tall-light.jpg");
  }
  html[data-theme="dark"] .hv-figure {
    --hv-start: url("/assets/video/hero-ttc.20261005.tall-dark.start.jpg");
    --hv-still: url("/assets/video/hero-ttc.20261005.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; }
}