/* hero.css. The hero, the link that opens the wall, the drifting preview
   panel beside that link, and the highlights, each of which is its own
   section. */

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(48px, 6vw, 96px); }
.hero h1 { max-width: 16ch; font-size: clamp(2.25rem, 4.6vw, 4.25rem); }
.hero .lede { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }

.hero-grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 4vw, 64px);
}

/* ── the link that opens the wall ───────────────────────────────────────── */

/* The column is a size container, so the link below can measure itself
   against it. */
.hero-box { width: 100%; max-width: 500px; justify-self: end; align-self: center; container-type: inline-size; }
.wall-link {
  display: inline-block;
  border: none;
  border-radius: 0;
  background: none;
  padding: 0.2em 0;
  cursor: pointer;
  color: var(--white);
  font-family: var(--font); font-weight: 800;
  letter-spacing: -0.02em;
  text-align: left;
  /* One line at every width (Conner, 2026-09-24). It keeps its old size
     wherever that fits, and is otherwise the column's width divided by the
     text's: "See What's Possible..." is 10.58em wide in Archivo 800, and 10.8
     leaves 2% to spare. The first font-size is for browsers without container
     units, and is small enough to fit the narrowest column. */
  white-space: nowrap;
  font-size: clamp(1.25rem, 2.7vw, 2rem);
  font-size: min(clamp(1.75rem, 3.2vw, 3rem), 100cqi / 10.8);
  transition: transform .2s ease, text-shadow .2s ease;
}
.wall-link:hover, .wall-link:focus-visible {
  transform: translateY(-3px);
  text-shadow: 0 8px 18px rgba(0,0,0,.55);
}
.wall-link-text {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 2px no-repeat;
  transition: background-size .35s ease;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.wall-link:hover .wall-link-text, .wall-link:focus-visible .wall-link-text { background-size: 100% 2px; }
/* Touch screens have no hover: show the underline at rest so it reads as a link. */
@media (hover: none) { .wall-link-text { background-size: 100% 2px; } }
.wall-link:focus-visible {
  outline: 2px solid var(--white); outline-offset: 6px;
}
.wall-link-note {
  margin-top: 12px;
  font-size: 0.8125rem; line-height: 1.5;
  color: rgba(243, 242, 242, 0.78);
}
@media (prefers-reduced-motion: reduce) {
  .wall-link { transition: none; }
  .wall-link:hover, .wall-link:focus-visible { transform: none; }
  .wall-link-text { transition: none; }
}
:root[data-motion="reduce"] .wall-link { transition: none; }
:root[data-motion="reduce"] .wall-link:hover, :root[data-motion="reduce"] .wall-link:focus-visible { transform: none; }
:root[data-motion="reduce"] .wall-link-text { transition: none; }

@media (max-width: 800px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-box { max-width: none; justify-self: stretch; }
}

/* ── the preview panel (#5, P3.1, restored 2026-09-24) ─────────────────────
   Three columns of small pictures, each a site's home page, drifting
   vertically at different speeds. Decorative only (aria-hidden in the
   markup): a click anywhere on the panel opens the wall growing out of the
   panel's own rectangle. Each track holds its six pictures twice, back to
   back, so the drift loops with no seam. */

.hero-peek {
  margin-top: 20px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  height: clamp(220px, 24vw, 320px); overflow: hidden;
  border: 2px solid rgba(243, 242, 242, 0.3); cursor: pointer;
}
.hero-peek:hover { border-color: var(--white); }
.hero-peek-col { overflow: hidden; }
.hero-peek-track { display: flex; flex-direction: column; gap: 8px; }
.hero-peek img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--ink-lift); }
@keyframes hero-peek-drift { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 4px)); } }
:root[data-motion="full"] .hero-peek-track { animation: hero-peek-drift 38s linear infinite; }
:root[data-motion="full"] .hero-peek-col:nth-child(2) .hero-peek-track { animation-duration: 46s; animation-direction: reverse; }
:root[data-motion="full"] .hero-peek-col:nth-child(3) .hero-peek-track { animation-duration: 42s; }
:root[data-motion="full"] .hero-peek.is-paused .hero-peek-track { animation-play-state: paused; }
@media (max-width: 800px) {
  .hero-peek { height: 200px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-peek-col:nth-child(3) { display: none; }
}

/* ── highlights: each one its own section, edge to edge ───────────────────
   The still, or its loop, runs the full width of the page and as tall as the
   screen allows, 16:10 at most. It is anchored to the top so the site's own
   header stays in view when the screen is shorter. The name, industry, line
   and button sit under it in the page's column. A click on the media presses
   the button (hero.js). */

.hl { padding-top: 0; }
.hl-media {
  position: relative; display: block; overflow: hidden;
  height: min(62.5vw, calc(100vh - var(--bar-h)));
  height: min(62.5vw, calc(100svh - var(--bar-h)));
  background: var(--ink-lift);
}
.hl-media.is-link { cursor: pointer; }
.hl-still, .hl-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hl-video { opacity: 0; }
.hl-video.is-playing { opacity: 1; }
:root[data-motion="full"] .hl-video { transition: opacity 300ms ease; }

.hl-body {
  display: grid; align-items: end;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(24px, 4vw, 64px);
  padding-top: clamp(36px, 5vw, 72px);
}
.hl-name { font-size: clamp(2.5rem, 6.2vw, 5.5rem); line-height: 0.98; letter-spacing: -0.035em; color: var(--ground); }
.hl-ind { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--red-300); }
.hl-line { max-width: 42ch; color: rgba(243, 242, 242, 0.86); }
/* A concept's label, under the industry (Conner, 2026-09-28), in the colour
   the gallery caption gives it. */
.hl-tag { font-size: 0.875rem; color: rgba(243, 242, 242, 0.78); }
.hl-ind + .hl-tag, .hl-tag + .hl-line { margin-top: 10px; }
.hl-ind + .hl-line { margin-top: 10px; }
.hl-ind + .hl-cta, .hl-tag + .hl-cta, .hl-line + .hl-cta { margin-top: clamp(20px, 2.5vw, 28px); }
.hl-btn { background: transparent; color: var(--ground); border-color: rgba(243, 242, 242, 0.6); }
.hl-btn:hover, .hl-btn:focus-visible { background: var(--ground); color: var(--ink); border-color: var(--ground); }
@media (max-width: 800px) { .hl-body { grid-template-columns: minmax(0, 1fr); } }

/* Preview only: the numbered empty section and what it still needs. */
.hl-empty .hl-media { display: flex; align-items: center; justify-content: center; }
.hl-num { font-weight: 800; font-size: clamp(5rem, 16vw, 13rem); line-height: 1; letter-spacing: -0.04em; color: var(--ground); }
.hl-hint { font-size: 0.875rem; color: rgba(243, 242, 242, 0.78); overflow-wrap: anywhere; }