/* Homepage header directions for /design/hero/ (Oct 18). Layout only: the
   illustration is a swappable slot and the copy matches the live header.
   Phone rules come first; tablet and desktop layer on with min-width.
   The headline sizes from its own column (cqi) so it stays three lines. */

/* Review bar: five options must fit a 320px phone. */
.hero-review .nav-review-options { gap: 0; }
.hero-review .nav-review-options a { min-width: 0; padding: 0 7px; font-size: 12.5px; }
@media (min-width: 480px) { .hero-review .nav-review-options a { min-width: 76px; padding: 0 12px; font-size: 14px; } }

/* Stage: everything centred, the illustration below as the showpiece. */
.vpage .vhero.hero-stage { container-type: inline-size; justify-items: center; text-align: center; gap: 40px; }
.vpage .vhero.hero-stage > div:first-child { display: grid; justify-items: center; width: 100%; }
.vpage .vhero.hero-stage h1:has(.l) { font-size: min(4.5rem, 100cqi / 9.6); }
.vpage .vhero.hero-stage .vlead { margin-inline: auto; max-width: 40ch; }
.vpage .vhero.hero-stage .hero-actions { align-items: center; }
.vpage .vhero.hero-stage .works { justify-items: center; }
.vpage .vhero.hero-stage .vhero-art { width: min(100%, 340px); }
@media (min-width: 600px) {
  .vpage .vhero.hero-stage .hero-actions { justify-content: center; }
}
@media (min-width: 768px) {
  .vpage .vhero.hero-stage .vlead { max-width: 52ch; }
  .vpage .vhero.hero-stage .vhero-art { width: min(100%, 540px); }
}
@media (min-width: 960px) {
  .vpage .vhero.hero-stage { grid-template-columns: minmax(0, 1fr); gap: 48px; min-height: 0; }
  .vpage .vhero.hero-stage .vlead { font-size: 1.1rem; }
  .vpage .vhero.hero-stage .vhero-art { width: min(100%, 640px); }
}

/* Billboard: the headline runs the full width at poster size; copy, action
   and illustration share the row beneath it. Phones keep the type only: the
   illustration drops and the action rises. */
.vpage .vhero.hero-billboard { container-type: inline-size; row-gap: 0; }
.vpage .vhero.hero-billboard > div:first-child { display: contents; }
.vpage .vhero.hero-billboard h1:has(.l) { font-size: min(6rem, 100cqi / 9.6); line-height: 1; }
.vpage .vhero.hero-billboard .vhero-art { display: none; }
@media (min-width: 768px) {
  .vpage .vhero.hero-billboard {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "h1 h1" "lead art" "follow art" "actions art" ". art";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: clamp(32px, 4vw, 56px);
    align-items: start;
    min-height: 0;
  }
  .vpage .vhero.hero-billboard h1 { grid-area: h1; }
  .vpage .vhero.hero-billboard .vlead { grid-area: lead; margin-top: 40px; max-width: 40ch; }
  .vpage .vhero.hero-billboard .vlead.vfollow { grid-area: follow; margin-top: 12px; }
  .vpage .vhero.hero-billboard .hero-actions { grid-area: actions; margin-top: 32px; }
  .vpage .vhero.hero-billboard .vhero-art { display: block; grid-area: art; width: 100%; margin-top: 32px; }
}
@media (min-width: 960px) {
  .vpage .vhero.hero-billboard .vlead { font-size: 1.1rem; }
}

/* Framed: the header sits in the same rounded panel as the agent mock below,
   with the illustration first. Phones drop the panel and keep the order. */
.vpage .vhero.hero-framed > div:first-child { container-type: inline-size; }
.vpage .vhero.hero-framed h1:has(.l) { font-size: min(4rem, 100cqi / 9.6); }
.vpage .vhero.hero-framed .vhero-art { order: -1; width: min(100%, 220px); }
@media (min-width: 768px) {
  .vpage .vhero.hero-framed { padding: 48px !important; border-radius: 32px; background: var(--theme-surface-raised); gap: 40px; }
  :root[data-theme="light"] .vpage .vhero.hero-framed { background: color-mix(in srgb, var(--theme-surface-raised-strong) 65%, var(--theme-surface)); }
  .vpage .vhero.hero-framed .vhero-art { width: min(100%, 320px); }
}
@media (min-width: 960px) {
  .vpage .vhero.hero-framed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding: 56px !important; min-height: 0; }
  .vpage .vhero.hero-framed .vhero-art { width: 100%; }
}

/* Band (after save.design and craft.wild.as): headline left with the copy
   and action in a narrow column beside it; the illustration sits on a wide
   band below. On phones the band runs to the screen edges. */
.vpage .vhero.hero-band { container-type: inline-size; row-gap: 0; }
.vpage .vhero.hero-band > div:first-child { display: contents; }
.vpage .vhero.hero-band h1:has(.l) { font-size: min(4.5rem, 100cqi / 9.6); }
.vpage .vhero.hero-band .vhero-art {
  width: calc(100% + 2 * clamp(20px, 5vw, 64px));
  max-width: none;
  margin: 40px calc(-1 * clamp(20px, 5vw, 64px)) 0;
  padding: 32px 12%;
  background: var(--theme-surface-raised);
}
:root[data-theme="light"] .vpage .vhero.hero-band .vhero-art { background: color-mix(in srgb, var(--theme-surface-raised-strong) 65%, var(--theme-surface)); }
@media (min-width: 768px) {
  .vpage .vhero.hero-band .vhero-art { width: 100%; margin-inline: 0; padding: 48px 22%; border-radius: 32px; }
}
@media (min-width: 960px) {
  .vpage .vhero.hero-band {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "h1 lead" "h1 follow" "h1 actions" "art art";
    grid-template-rows: 1fr auto auto auto;
    column-gap: 48px;
    align-items: end;
    min-height: 0;
  }
  .vpage .vhero.hero-band h1 { grid-area: h1; }
  .vpage .vhero.hero-band h1:has(.l) { font-size: min(4.5rem, (100cqi - 48px) * 7 / 12 / 9.6); }
  .vpage .vhero.hero-band .vlead { grid-area: lead; margin-top: 0; max-width: 40ch; }
  .vpage .vhero.hero-band .vlead.vfollow { grid-area: follow; margin-top: 12px; }
  .vpage .vhero.hero-band .hero-actions { grid-area: actions; margin-top: 24px; }
  .vpage .vhero.hero-band .vhero-art { grid-area: art; margin-top: 48px; padding: 56px 27%; }
}

/* ------------------------------------------------------------------
   Hero content alternatives for /design/hero-art/ (Oct 18). Each route
   pairs one slot with the layout above that suits it. */

.hero-review .nav-review-options { overflow-x: auto; scrollbar-width: none; }

/* Window (Stage): the agent mock itself is the hero, peeking at the fold. */
.vpage .vhero.has-slot-window .vhero-art { width: 100%; text-align: left; }
.vpage .vhero.has-slot-window .cd-a .rv:last-child { display: none; }
@media (min-width: 768px) {
  .vpage .vhero.has-slot-window .vhero-art { width: min(100%, 980px); }
  .vpage .vhero.has-slot-window .cd-a .rv:last-child { display: block; }
}

/* Cards (Current split): three teammate sessions dealt beside the copy. */
.vpage .vhero.has-slot-cards .vhero-art { display: grid; width: min(100%, 420px); max-width: none; margin: 8px auto 0; }
.hero-slot-cards .feeder { grid-area: 1 / 1; width: 88%; align-self: start; text-align: left; }
.hero-slot-cards .feeder:nth-child(1) { justify-self: start; --tilt: -3deg; }
.hero-slot-cards .feeder:nth-child(2) { justify-self: end; margin-top: 84px; --tilt: 2deg; }
.hero-slot-cards .feeder:nth-child(3) { justify-self: start; margin: 168px 0 0 4%; --tilt: -1deg; }
.hero-slot-cards .hero-card-lit {
  z-index: 1;
  border-color: var(--palette-holly-400);
  box-shadow: 0 0 0 1px var(--palette-holly-400), 0 0 32px color-mix(in srgb, var(--palette-holly-400) 28%, transparent), 0 14px 34px color-mix(in srgb, var(--palette-greyscale-950) 22%, transparent);
}
.hero-slot-cards .feeder:nth-child(3) { z-index: 2; }
@media (min-width: 960px) {
  .vpage .vhero.has-slot-cards .vhero-art { width: 100%; max-width: 500px; }
  .hero-slot-cards .feeder:nth-child(2) { margin-top: 104px; }
  .hero-slot-cards .feeder:nth-child(3) { margin-top: 208px; }
}

/* Scene (Band): a wide picture on the band, with one answer floating on it. */
.vpage .vhero.has-slot-scene .vhero-art { position: relative; padding: 0; overflow: hidden; background: var(--theme-surface); }
.hero-scene-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
.hero-scene-chat { display: none; }
@media (min-width: 768px) {
  .vpage .vhero.has-slot-scene .vhero-art { padding: 0; }
  .hero-scene-img { aspect-ratio: 16 / 7; }
  .hero-scene-chat {
    display: grid; gap: 6px; position: absolute; right: 24px; bottom: 24px; max-width: 300px; padding: 14px 16px;
    border-radius: 16px; background: var(--theme-surface-raised); color: var(--theme-ink-soft); font-size: 14px; line-height: 1.4;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--palette-greyscale-950) 20%, transparent);
  }
  .hero-scene-chat p { margin: 0; }
  .hero-scene-chat .cd-tool { font-size: 12.5px; }
}
@media (min-width: 960px) { .vpage .vhero.has-slot-scene .vhero-art { padding: 0; } }

/* Photo (Billboard): the headline sits on a full-bleed photo. Flat charcoal
   stands in for the picture, in both themes. */
.vpage .vhero.has-slot-photo {
  position: relative; isolation: isolate;
  margin-inline: calc(-1 * clamp(20px, 5vw, 64px));
  padding: 72px clamp(20px, 5vw, 64px) 40px !important;
  background: var(--palette-greyscale-900);
}
.vpage .vhero.has-slot-photo h1, .vpage .vhero.has-slot-photo h1 span { color: var(--palette-spanish-100); }
.vpage .vhero.has-slot-photo .vlead { color: var(--palette-spanish-300); }
.vpage .vhero.has-slot-photo .vlead b, .vpage .vhero.has-slot-photo .works-i { color: var(--palette-spanish-100); }
.vpage .vhero.has-slot-photo .works-l { color: var(--palette-greyscale-400); }
.vpage .vhero.has-slot-photo .works-i img { filter: brightness(0) invert(0.92); }
.vpage .vhero.has-slot-photo .vhero-art { display: block; position: absolute; inset: 0; z-index: -1; width: auto; max-width: none; margin: 0; }
.hero-photo-note { position: absolute; top: 20px; left: clamp(20px, 5vw, 64px); right: 20px; margin: 0; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--palette-greyscale-400); }
@media (min-width: 768px) {
  .vpage .vhero.has-slot-photo { margin-inline: 0; padding: 72px 48px 56px !important; border-radius: 32px; min-height: 560px; align-content: end; }
  .vpage .vhero.has-slot-photo .vhero-art { grid-area: auto; border-radius: inherit; }
  .hero-photo-note { top: auto; left: auto; right: 28px; bottom: 24px; max-width: 220px; }
  .vpage .vhero.has-slot-photo { grid-template-areas: "h1 h1" "lead ." "follow ." "actions ."; grid-template-rows: auto auto auto auto; }
}

/* Grid (Band): a field of team sessions drawn in code, no image file. */
.vpage .vhero.has-slot-grid .vhero-art { padding: 24px 20px 16px; }
.hero-grid-svg { display: block; width: 100%; height: auto; }
.hero-grid-svg rect { transition: fill 0.5s ease; }
.hero-grid-svg .g-empty { fill: var(--theme-line); opacity: 0.6; }
.hero-grid-svg .g-claude { fill: var(--palette-golden-400); }
.hero-grid-svg .g-codex { fill: var(--palette-golden-600); }
.hero-grid-svg .g-cursor { fill: var(--theme-ink-soft); }
.hero-grid-svg .g-faint { opacity: 0.45; }
.hero-grid-svg .g-lit { fill: var(--palette-holly-400); opacity: 1; }
.hero-grid-key { margin: 14px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--theme-ink-muted); }
.hero-grid-key .k { width: 10px; height: 10px; border-radius: 2px; margin-left: 6px; }
.hero-grid-key .k-claude { background: var(--palette-golden-400); }
.hero-grid-key .k-codex { background: var(--palette-golden-600); }
.hero-grid-key .k-cursor { background: var(--theme-ink-soft); }
.hero-grid-key .k-lit { background: var(--palette-holly-400); }
@media (min-width: 768px) { .vpage .vhero.has-slot-grid .vhero-art { padding: 40px 48px 24px; } }
@media (min-width: 960px) { .vpage .vhero.has-slot-grid .vhero-art { padding: 48px 56px 28px; } }

/* Type (Billboard, no picture): the words carry the header at every width. */
@media (min-width: 768px) {
  .vpage .vhero.has-slot-none { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "h1 h1" "lead actions" "follow actions"; grid-template-rows: auto auto 1fr; }
  .vpage .vhero.has-slot-none h1:has(.l) { font-size: min(7rem, 100cqi / 9.6); }
  .vpage .vhero.has-slot-none .hero-actions { align-self: end; justify-self: end; margin-top: 0; }
}

/* Hero art options (/design/hero/art/, Oct 18): Jaycee's illustrations in the current header. */
.hero-review .nav-review-options a { flex: none; white-space: nowrap; }
/* Black-ink drawings flip to light ink on the dark theme, keeping their accent hues. */
:root[data-theme="dark"] .vhero-art[src$="console-sketch.webp"], :root[data-theme="dark"] .vhero-art[src$="machines-line.webp"] { filter: invert(1) hue-rotate(180deg); }
/* Second review row (art switcher) sits above the layout row. */
body:has(.art-review) { padding-bottom: 160px; }
.nav-review.art-review { bottom: 76px; }
.art-review .nav-review-options { overflow-x: auto; scrollbar-width: none; gap: 0; }
/* The exploded turbine reads best smaller than the other illustrations (Jaycee, Oct 18). */
.vhero-art[src$="turbine-exploded.webp"] { width: min(70%, 420px) !important; justify-self: center; margin-inline: auto; }
/* Single review bar for Allen's variant review (Oct 18): scrolls sideways on phones. */
.variant-review .nav-review-options { overflow-x: auto; scrollbar-width: none; gap: 0; }
.variant-review .nav-review-options a { flex: none; min-width: 0; padding: 0 10px; font-size: 13px; white-space: nowrap; }
@media (min-width: 480px) { .variant-review .nav-review-options a { padding: 0 12px; font-size: 14px; } }