/* HOME: THE PAGE WEARS THE LOOK (2026-09-26).
   One headline, re-set in each Aesthetic's own type, colour and composition.
   Every value in a .hq--<slug> block comes from that Aesthetic's page. */
@font-face { font-family: "HmArchivoBlack"; src: url("fonts/archivo-black.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "HmJost"; src: url("fonts/jost.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "HmPoiretOne"; src: url("fonts/poiret-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "HmVollkorn"; src: url("fonts/vollkorn.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "HmCaveat"; src: url("fonts/caveat.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "HmVollkornCC"; src: url("fonts/vollkorn-italic.woff2") format("woff2-variations"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "HmSpaceGrotesk"; src: url("fonts/space-grotesk.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "HmAnybody"; src: url("fonts/anybody.woff2") format("woff2"); font-display: swap; }

.ia:has(> .hq) { padding-top: 0; }
.hq__stage { position: relative; height: clamp(22rem, 58vh, 34rem); overflow: hidden; border: 1px solid var(--rule-firm); }
.hq__look { position: absolute; inset: 0; display: flex; padding: clamp(1.5rem, 4vw, 3.5rem); visibility: hidden; }
.hq__look.is-on { visibility: visible; }
.hq__look p { margin: 0; position: relative; z-index: 1; }
.hq__look span { display: block; }
.hq__look i { position: absolute; pointer-events: none; }


/* Acid Graphics: the front of the page's flyer, with the sentence set where
   the page sets ACID / GRAPHICS and owning the whole frame (founder,
   2026-09-26: no kicker, strap or ticker). From exhibits/acid-graphics.css:
   the #050505 ground inside the 3px toxic-green frame (.ac-flyer), the 0.13
   grain (.ac-noise), line 1 in the GRAPHICS chrome build and line 2 in the
   ACID green build with its magenta offset (.ac-warp b, .ac-warp--2 b, the
   same stacked shadow steps), and the hero warp on the lead line. The grain
   sits under the type: nothing crosses the sentence. */
.hq--acid-graphics {
  container: hq-ag / size; padding: 0; display: grid; place-items: center;
  background: #050505; color: #E8E8E8; box-shadow: inset 0 0 0 3px #39FF14;
}
.hq--acid-graphics > i { display: none; }
.hq-ag__noise { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.13; pointer-events: none; }
.hq--acid-graphics p {
  max-width: 100%; padding: 0 clamp(1rem, 4cqi, 3rem) 4cqh; text-align: center;
  font: 400 1rem/0.8 "HmArchivoBlack", "Arial Black", sans-serif; text-transform: uppercase;
}
.hq--acid-graphics span { text-wrap: balance; }
.hq--acid-graphics span:first-child {
  font-size: clamp(1.375rem, 4.6cqi, 9cqh); line-height: 1; letter-spacing: -0.06em; color: #C8D2DC;
  text-shadow:
    1px 1px 0 #6B7680, 2px 2px 0 #59636C, 3px 3px 0 #495159, 4px 4px 0 #3A4147,
    5px 5px 0 #39FF14, 6px 6px 0 #39FF14, 7px 7px 0 #20a808, 8px 8px 0 #178006,
    9px 9px 0 #0f5a04, 12px 14px 26px rgba(57, 255, 20, 0.4);
}
.hq--acid-graphics span + span {
  font-size: min(12cqi, 24cqh); letter-spacing: -0.07em; color: #39FF14; filter: url(#hq-ag-warp); margin-top: 0.34em;
  transform: skewY(-3.2deg) scaleY(1.11);
  text-shadow:
    1px 1px 0 #2bd40c, 2px 2px 0 #2bd40c, 3px 3px 0 #20a808, 4px 4px 0 #20a808,
    5px 5px 0 #178006, 6px 6px 0 #178006, 7px 7px 0 #0f5a04, 8px 8px 0 #0f5a04,
    9px 9px 0 #FF1AC6, 10px 10px 0 #FF1AC6, 11px 11px 0 #FF1AC6, 12px 12px 0 #b0128a,
    13px 13px 0 #7a0c60, 14px 14px 0 #45063a, 18px 20px 34px rgba(255, 26, 198, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .hq--acid-graphics span + span { filter: none; }
}
/* Narrow stage: the chrome line keeps one row where it can (two rows of
   chrome at tight leading stack their extrusions), and the green line wraps
   in balance rather than shrinking past reading size. */
@container hq-ag (max-width: 36rem) {
  .hq--acid-graphics span:first-child { font-size: min(6.6cqi, 8cqh); }
  .hq--acid-graphics span + span { font-size: min(13.5cqi, 17cqh, (100cqi - 2rem) / (var(--hq-wmax, 10) * 0.78)); margin-top: 0.42em; }
}

/* Art Deco: the page's own hero, with the sentence set where the page sets
   its title. From exhibits/art-deco.css: the striped deep-green ground, the
   hairline sun and ringed disc centred on the gold rule, the banded pillars,
   the stepped tower (art-deco.ts TOWER), Poiret One cream caps at 0.12em and
   the cream Jost caps line (.ad-hero-line) at 0.32em. The look is its own size container, so
   everything is set in cqh/cqi and holds at any stage size. The tower and
   the text block split the height 54/40; the sun sits on the line between. */
.hq--art-deco {
  container: hq-ad / size; padding: 0; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(200, 162, 75, 0.10) 22px 23px), #0B2622;
}
.hq--art-deco > b { position: absolute; display: block; pointer-events: none; }
.hq--art-deco > .hq-ad__pillar { z-index: 2; }
.hq-ad__sun {
  left: 50%; bottom: 40cqh; width: 346cqh; height: 346cqh; transform: translate(-50%, 50%); border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(200, 162, 75, 0.55) 0deg 0.35deg, transparent 0.35deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 9%, #000 9.2%, #000 40%, transparent 60%);
  mask: radial-gradient(circle, transparent 9%, #000 9.2%, #000 40%, transparent 60%);
}
.hq-ad__disc {
  left: 50%; bottom: 40cqh; width: 44cqh; aspect-ratio: 1; transform: translate(-50%, 50%); border-radius: 50%;
  background: repeating-radial-gradient(circle, #C8A24B 0 2px, #0B2622 2px 12px); box-shadow: 0 0 0 3px #C8A24B;
}
.hq-ad__pillar { top: 0; bottom: 0; width: clamp(26px, 5cqi, 70px); background: repeating-linear-gradient(90deg, #0B2622 0 6px, #C8A24B 6px 7px, #0B2622 7px 12px); border-inline: 2px solid #C8A24B; }
.hq-ad__pillar--l { left: clamp(10px, 4cqi, 60px); }
.hq-ad__pillar--r { right: clamp(10px, 4cqi, 60px); }
.hq-ad__tower { position: relative; display: block; flex: none; height: 54cqh; width: auto; max-width: 100%; }
.hq--art-deco p {
  /* A solid plinth under the tower: the sun and the disc rise from its top
     rule and never run behind the sentence (readability, Annie 2026-09-26). */
  flex: none; height: 40cqh; width: 100%; margin-top: -1px; border-top: 1px solid #C8A24B; background: #0B2622;
  display: flex; flex-direction: column; justify-content: center; gap: 0.5em;
  padding: 0 calc(clamp(10px, 4cqi, 60px) + clamp(26px, 5cqi, 70px) + 8px);
}
.hq--art-deco span:first-child { font: 500 max(13px, min(2.6cqi, 5cqh))/1.4 "HmJost", "Century Gothic", sans-serif; letter-spacing: 0.32em; padding-left: 0.32em; text-transform: uppercase; color: #F2E9D8; }
.hq--art-deco span + span { font: 400 min(7cqi, 13cqh)/1 "HmPoiretOne", "HmJost", sans-serif; letter-spacing: 0.12em; padding-left: 0.12em; text-transform: uppercase; color: #F2E9D8; }
/* Narrow stage: the pillars would run through the sentence, so they go and
   the text takes the page hero's own 16px side padding instead. */
@container hq-ad (max-width: 30rem) {
  .hq--art-deco > .hq-ad__pillar { display: none; }
  .hq--art-deco p { padding: 0 16px; }
  .hq--art-deco span + span { font-size: min(8.4cqi, 13cqh); }
}

/* Cottagecore: the page's own hero, with the sentence set on its cloth.
   From exhibits/cottagecore.css: the cream ground under rose2 gingham and the
   sparse wildflower tile (.cc-page main, same 240px tile, same 32px check),
   the top-left daylight wash (.cc-hero::before, here the <i>), the two
   sprigs (.cc-sprig, markup in home.ts LOOK_ART), and the tilted linen cloth
   (.cc-cloth: 30px radius, rose2 dashed stitch inset 12px, -1.2deg, the
   overcast shadow). Line 2 takes the title's register (.cc-h1: Caveat 700,
   berry, 0.9 leading); line 1 takes the lead's (.cc-lead: Vollkorn italic,
   ink). The cloth is solid linen, so no check or flower ever sits behind
   either line; the sprigs sit under the cloth. Sizes in cqh/cqi. */
.hq--cottagecore {
  container: hq-cc / size; padding: clamp(16px, 4vw, 3.5rem); align-items: center; justify-content: center; text-align: center; color: #443B31;
  background-color: #FBF7EF;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%22240%22%3E%3Cellipse%20cx=%22128%22%20cy=%22161%22%20rx=%222.75%22%20ry=%225%22%20fill=%22%238A555C%22%20transform=%22rotate(0%20128%20166)%22/%3E%3Cellipse%20cx=%22128%22%20cy=%22161%22%20rx=%222.75%22%20ry=%225%22%20fill=%22%238A555C%22%20transform=%22rotate(72%20128%20166)%22/%3E%3Cellipse%20cx=%22128%22%20cy=%22161%22%20rx=%222.75%22%20ry=%225%22%20fill=%22%238A555C%22%20transform=%22rotate(144%20128%20166)%22/%3E%3Cellipse%20cx=%22128%22%20cy=%22161%22%20rx=%222.75%22%20ry=%225%22%20fill=%22%238A555C%22%20transform=%22rotate(216%20128%20166)%22/%3E%3Cellipse%20cx=%22128%22%20cy=%22161%22%20rx=%222.75%22%20ry=%225%22%20fill=%22%238A555C%22%20transform=%22rotate(288%20128%20166)%22/%3E%3Ccircle%20cx=%22128%22%20cy=%22166%22%20r=%222.25%22%20fill=%22%23F7F0E3%22/%3E%3Cpath%20d=%22M57%20183%20q4%20-8%2010%20-10%22%20stroke=%22%2354664D%22%20stroke-width=%221.3%22%20fill=%22none%22/%3E%3Cpath%20d=%22M53%20190%20q4%20-8%2010%20-10%22%20stroke=%22%2354664D%22%20stroke-width=%221.3%22%20fill=%22none%22/%3E%3Cellipse%20cx=%2238%22%20cy=%2237%22%20rx=%223.3%22%20ry=%226%22%20fill=%22%23E1C7C6%22%20transform=%22rotate(0%2038%2043)%22/%3E%3Cellipse%20cx=%2238%22%20cy=%2237%22%20rx=%223.3%22%20ry=%226%22%20fill=%22%23E1C7C6%22%20transform=%22rotate(72%2038%2043)%22/%3E%3Cellipse%20cx=%2238%22%20cy=%2237%22%20rx=%223.3%22%20ry=%226%22%20fill=%22%23E1C7C6%22%20transform=%22rotate(144%2038%2043)%22/%3E%3Cellipse%20cx=%2238%22%20cy=%2237%22%20rx=%223.3%22%20ry=%226%22%20fill=%22%23E1C7C6%22%20transform=%22rotate(216%2038%2043)%22/%3E%3Cellipse%20cx=%2238%22%20cy=%2237%22%20rx=%223.3%22%20ry=%226%22%20fill=%22%23E1C7C6%22%20transform=%22rotate(288%2038%2043)%22/%3E%3Ccircle%20cx=%2238%22%20cy=%2243%22%20r=%222.7%22%20fill=%22%23F7F0E3%22/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(218, 185, 187, 0.45) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(90deg, rgba(218, 185, 187, 0.45) 0 16px, transparent 16px 32px);
  background-size: 240px 240px, auto, auto;
}
.hq--cottagecore i { inset: 0; z-index: 0; background: radial-gradient(ellipse 70% 80% at 6% 0%, rgba(255, 246, 220, 0.85), rgba(255, 246, 220, 0) 70%); }
.hq-cc__sprig { position: absolute; z-index: 1; display: block; width: clamp(64px, 13cqi, 140px); line-height: 0; pointer-events: none; }
.hq-cc__sprig svg { display: block; width: 100%; height: auto; }
.hq-cc__sprig--l { left: 5cqi; top: calc(50% - 22cqi); transform: rotate(-14deg); }
.hq-cc__sprig--r { right: 5cqi; top: calc(50% + 8cqi); transform: rotate(12deg); }
.hq--cottagecore p {
  z-index: 2; max-width: 100%; background: #F7F0E3; border-radius: clamp(18px, 3.1cqi, 30px);
  padding: 5.5cqh clamp(20px, 6.2cqi, 60px) 6cqh;
  box-shadow: 0 20px 50px rgba(94, 83, 72, 0.18); outline: 2px dashed #DAB9BB; outline-offset: calc(-1 * clamp(8px, 1.25cqi, 12px));
  transform: rotate(-1.2deg);
}
.hq--cottagecore span:first-child { font: italic 400 max(15px, min(3.4cqi, 6cqh))/1.3 "HmVollkornCC", Georgia, "Times New Roman", serif; color: #443B31; margin-bottom: 0.35em; }
.hq--cottagecore span + span { font: 700 min(12.5cqi, 24cqh)/0.9 "HmCaveat", "Bradley Hand", "Segoe Script", cursive; color: #8A555C; text-wrap: balance; }
/* Narrow stage: the page drops its sprigs below 760px; so does the slide, and
   the cloth and title widen to the stage's own 16px gutters. */
@container hq-cc (max-width: 34rem) {
  .hq-cc__sprig { display: none; }
  .hq--cottagecore p { padding-inline: 16px; }
  .hq--cottagecore span + span { font-size: min(14cqi, 22cqh); }
}

/* Cyberpunk: near-black, cyan caps, magenta second line, scanlines. */
.hq--cyberpunk { container: hq-cy / size; background: #07090F; color: #46F3FF; align-items: flex-end; }
/* Sized as Swiss Style's is: one row per line where it fits, wrapping rather than shrinking below 2.6rem. */
.hq--cyberpunk p { text-wrap: balance; font: 700 min(max(2.6rem, min(clamp(2.6rem, 7vw, 6.4rem), 100cqi / (var(--hq-lmax, 20) * 0.62))), 22cqh, 100cqi / (var(--hq-wmax, 10) * 0.66))/0.92 "HmSpaceGrotesk", "Helvetica Neue", sans-serif; text-transform: uppercase; letter-spacing: -0.02em; text-shadow: 3px 0 #FF3FA4; }
.hq--cyberpunk span + span { color: #FF3FA4; text-shadow: -3px 0 #46F3FF; }
.hq--cyberpunk i { inset: 0; background: repeating-linear-gradient(0deg, rgba(70,243,255,.06) 0 1px, transparent 1px 4px); }

/* Neo-Brutalism: the page's opening stack (exhibits/neo-brutalism.css
   .nb-hero), with the sentence where the page sets its h1. Every value is
   the page's: cream ground #FFF4E0, the 3px black outline at 8px radius, the
   hard shadow whose offset is the rank (masthead 16, press card 12, trap card
   8, buttons 6), pink #FF90E8 masthead, yellow #FFC900 chip and trap card,
   mint/blue/orange buttons, Archivo Black display and Space Grotesk 700 caps
   for the chip. Nothing is rotated: the page never rotates. All text is ink
   on a solid fill (pink 10.4, yellow 13.6, mint 15.0, blue 9.0, orange 8.1),
   and nothing crosses a line of the sentence. Sizes are in cqi/cqh of the
   look, so the composition holds at any stage size. */
@font-face { font-family: "HmNbGrotesk"; src: url("fonts/space-grotesk.woff2") format("woff2-variations"); font-weight: 300 700; font-display: swap; }
.hq--neo-brutalism {
  container: hq-nb / size; display: grid; grid-template: auto minmax(0, 1fr) / minmax(0, 1fr) auto;
  padding: clamp(14px, 2.6vw, 30px) clamp(22px, 4vw, 48px) clamp(34px, 5vw, 60px) clamp(16px, 3vw, 40px);
  background: #FFF4E0; color: #000;
}
.hq--neo-brutalism::before, .hq-nb__chip, .hq-nb__press, .hq-nb__pb, .hq--neo-brutalism span + span { border: 3px solid #000; border-radius: 8px; }
/* the masthead: pink, the page's biggest offset */
.hq--neo-brutalism::before { content: ""; grid-area: 1 / 1 / 3 / 3; margin-top: min(6cqh, 40px); background: #FF90E8; box-shadow: 16px 16px 0 #000; }
.hq-nb__chip {
  grid-area: 1 / 1; align-self: end; justify-self: start; z-index: 1; margin: 0 0 0 clamp(16px, 4cqi, 50px);
  padding: 4px 12px; background: #FFC900; box-shadow: 3px 3px 0 #000;
  font: 700 clamp(10px, 1.35cqi, 13px)/1.4 "HmNbGrotesk", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
/* the sentence, set as the page's h1; the second line on the trap card, which hangs off the masthead's foot */
.hq--neo-brutalism p {
  grid-area: 2 / 1 / 3 / 3; align-self: end; margin: 0 clamp(16px, 4cqi, 50px) calc(-1 * min(5cqh, 30px));
  font: 400 min(11.4cqi, 17cqh)/0.92 "HmArchivoBlack", "Arial Black", sans-serif; letter-spacing: -0.02em;
}
.hq--neo-brutalism span:first-child { max-width: 11em; text-wrap: balance; }
.hq--neo-brutalism span + span {
  width: fit-content; margin-top: 0.28em; padding: 0.14em 0.36em 0.18em; background: #FFC900; box-shadow: 8px 8px 0 #000;
  font-size: 0.7em; letter-spacing: -0.01em;
}
/* the "Press one" card, stacked over the masthead's top-right corner */
.hq-nb__press {
  grid-area: 1 / 1 / 2 / 3; justify-self: end; align-self: start; z-index: 1; margin-right: calc(-1 * min(2.4cqi, 26px));
  display: flex; align-items: center; gap: min(22px, 2.2cqi);
  padding: min(18px, 3cqh) min(22px, 2.2cqi); background: #fff; box-shadow: 12px 12px 0 #000;
}
.hq-nb__pb {
  display: flex; align-items: center; min-height: min(60px, 10cqh); padding: 0 clamp(12px, 2.4cqi, 28px); box-shadow: 6px 6px 0 #000;
  font: 400 clamp(13px, 1.9cqi, 20px)/1 "HmArchivoBlack", "Arial Black", sans-serif; white-space: nowrap;
}
.hq-nb__pb--mint { background: #7BF1A8; }
.hq-nb__pb--blue { background: #90A8ED; }
.hq-nb__pb--or { background: #FF7A45; min-height: min(80px, 13.5cqh); padding: 0 clamp(16px, 3.6cqi, 44px); font-size: clamp(17px, 2.6cqi, 28px); }
/* Narrow stage: the chip and the press card would share one row and the
   card would cover it, so the chip goes; the buttons stay. */
@container hq-nb (max-width: 34rem) {
  .hq-nb__chip { display: none; }
  /* Phone: the headline breaks onto three lines and grows to fill the
     masthead, so no empty pink band opens under the buttons. Line 2 keeps
     its own size so it still fits on one row. */
  .hq--neo-brutalism p { font-size: min(14cqi, 13cqh); }
  .hq--neo-brutalism span:first-child { max-width: none; }
  .hq--neo-brutalism span + span { font-size: min(0.47em, 7cqi); }
}

/* ARRIVALS (2026-09-26). Each look arrives the way its Aesthetic moves, with
   the keyframes, easings and durations of its own page or preview card:
   nothing here is invented motion, except Swiss Style's, which is labelled as
   ours below. Every entrance is scoped under .is-on, so taking the class off
   and putting it back replays it. The sentence is fully readable by 500ms;
   decoration settles by ~1.6s (the Neo-Brutalism press holds, then releases
   by ~3.4s); nothing that moves ever passes behind or across the sentence.
   Swiss Style was motionless by the 2026-09-24 ruling; the founder superseded
   that on 2026-09-26 ("I want all three to have animations"). Under reduced
   motion none of this exists and every look is its composed final state. */
@media (prefers-reduced-motion: no-preference) {
   }

  /* Acid Graphics: the page's GLITCH (acid-graphics.css ac-gl-base, 3.4s
     steps(1, end)) run once through the sentence, line by line at the hero
     throb's 0.12s stagger (ac-throb delay). Started 0.3s in, so the first
     burst is over by ~0.3s and the second lands at ~1.8s. Line 2 carries its
     own skew and stretch inside the keyframes. */
  .hq__look.is-on.hq--acid-graphics span:first-child { animation: hq-ag-gl1 3.4s steps(1, end) -0.3s 1 both; }
  .hq__look.is-on.hq--acid-graphics span + span { animation: hq-ag-gl2 3.4s steps(1, end) -0.18s 1 both; }
  @keyframes hq-ag-gl1 {
    0%, 100% { transform: none; }
    12% { transform: skewX(-8deg) translateX(2px); }
    14% { transform: none; }
    61% { transform: skewX(6deg) translateX(-3px); }
    63% { transform: none; }
  }
  @keyframes hq-ag-gl2 {
    0%, 100% { transform: skewY(-3.2deg) scaleY(1.11); }
    12% { transform: skewX(-8deg) translateX(2px) skewY(-3.2deg) scaleY(1.11); }
    14% { transform: skewY(-3.2deg) scaleY(1.11); }
    61% { transform: skewX(6deg) translateX(-3px) skewY(-3.2deg) scaleY(1.11); }
    63% { transform: skewY(-3.2deg) scaleY(1.11); }
  }

  /* Art Deco: the sun rises (art-deco.css ad-rise: cubic-bezier(0.2, 0.7,
     0.2, 1), here 1.6s, not the page's 2.4s, to fit the slide) behind the
     tower and the solid plinth, and the tower's gold linework draws up from
     the rule on the same curve. */
  .hq__look.is-on .hq-ad__sun, .hq__look.is-on .hq-ad__disc { animation: hq-ad-rise 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hq__look.is-on .hq-ad__tower path { animation: hq-ad-draw 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
  .hq__look.is-on .hq-ad__tower g + g path { animation-delay: 0.35s; }
  @keyframes hq-ad-rise { from { opacity: 0; transform: translate(-50%, 60%) scale(0.6); } to { opacity: 1; } }
  @keyframes hq-ad-draw { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1 1; stroke-dashoffset: 0; } }

  /* Cottagecore: the linen card settles onto the cloth (the preview's card
     lift, pv-ging-flip: translateY(-4cqi), ease-in-out, 0.64s a half; opaque
     by 0.32s), then one breeze crosses: the sprigs bow on their stems and
     spring back (pv-ging-bow: 15deg, -5deg, ease-in-out, 1.36s, the right
     one 0.16s behind), hinged at the stem's foot. */
  .hq__look.is-on.hq--cottagecore p { animation: hq-cc-settle 0.64s ease-in-out both; }
  .hq__look.is-on .hq-cc__sprig svg { transform-origin: 50% 93%; animation: hq-cc-bow 1.36s ease-in-out 0.2s both; }
  .hq__look.is-on .hq-cc__sprig--r svg { animation-delay: 0.36s; }
  @keyframes hq-cc-settle {
    0% { opacity: 0; transform: translateY(-4cqh) rotate(-3deg); }
    50% { opacity: 1; }
    100% { opacity: 1; transform: rotate(-1.2deg); }
  }
  @keyframes hq-cc-bow {
    0% { transform: rotate(0deg); }
    35% { transform: rotate(15deg); }
    71% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
  }

  /* Cyberpunk: the sign comes on. The page's flicker (cyberpunk.css cy-fl,
     6s steps(1)) and glitch (cy-gl, 5s steps(1)), each run once and started
     at its burst, so the flicker is over by 0.4s and the slice by 0.3s.
     The glitch keeps the slide's own text-shadow: only its offset and
     clip move. */
  .hq__look.is-on.hq--cyberpunk p { animation: hq-cy-fl 6s steps(1) -5.6s 1 both, hq-cy-gl 5s steps(1) -4.35s 1 both; }
  @keyframes hq-cy-fl { 0%, 93%, 100% { opacity: 1; } 94% { opacity: 0.4; } 95% { opacity: 1; } 97% { opacity: 0.6; } }
  @keyframes hq-cy-gl {
    0%, 90%, 100% { transform: none; clip-path: none; }
    91% { transform: translateX(-4px); clip-path: inset(20% 0 40% 0); }
    92% { transform: translateX(3px); clip-path: inset(60% 0 5% 0); }
    93% { transform: none; clip-path: none; }
  }

  /* Neo-Brutalism: the three buttons press into their hard shadows one after
     another, as the preview's dominoes do (pv-hardshadow: a 90ms press, 0.42s
     apart), hold, then come back up through the page's own hover lift
     (neo-brutalism.css .nb-press:hover, -2px with the shadow 2px longer) to
     rest. Only the press card moves; the sentence never does. */
  .hq__look.is-on .hq-nb__pb { animation: hq-nb-press 3s linear 0s both; }
  .hq__look.is-on .hq-nb__pb--blue { animation-delay: 0.42s; }
  .hq__look.is-on .hq-nb__pb--or { animation-delay: 0.84s; }
  @keyframes hq-nb-press {
    0%, 10% { transform: none; box-shadow: 6px 6px 0 #000; }
    13%, 80% { transform: translate(6px, 6px); box-shadow: 0 0 0 #000; }
    83% { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #000; }
    86%, 100% { transform: none; box-shadow: 6px 6px 0 #000; }
  }
}

/* The bar under the stage: which look, and the door to it. */
.hq__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-top: var(--s3); }
.hq__names { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.hq__names button { font: var(--t-sm)/1.3 var(--ui); color: var(--ink-2); background: none; border: 0; padding: 0.25rem 0; cursor: pointer; border-bottom: 1px solid transparent; }
.hq__names button:hover { color: var(--ink); }
.hq__names button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
/* The subline: said once, in the site's own type, not the look's. */
.hq__sub { margin: var(--s3) 0 0; max-width: 62ch; font: var(--t-md)/1.45 var(--ui); color: var(--ink); text-wrap: pretty; }
.hq__go { flex: none; padding: 0.5rem 0; font: var(--t-sm)/1 var(--ui); color: var(--ink); text-decoration: none; white-space: nowrap; }
.hq__go:hover b { text-decoration: underline; }


/* Just added. */
/* Six across; more than six scroll sideways (new arrivals keep joining). */
.hq-new { --hq-new-n: 6; }
.hq-new ul { list-style: none; margin: 0; padding: 0 0 var(--s2); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--hq-new-n) - 1) * var(--s3)) / var(--hq-new-n)); gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.hq-new li { scroll-snap-align: start; min-width: 0; }
.hq-new a { color: var(--ink); text-decoration: none; }
.hq-new__g { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--rule-firm); margin-bottom: var(--s2); }
.hq-new__g > * { width: 100%; height: 100%; }
/* The card title only: a bare `.hq-new b` also reached the <b>s inside the
   previews and re-set their type. */
.hq-new li > a > b { font: 500 var(--t-sm)/1.3 var(--ui); }
.hq-new li > a:hover > b { text-decoration: underline; }

@media (max-width: 60rem) { .hq-new { --hq-new-n: 3; } }
@media (max-width: 40rem) {
  .ia:has(> .hq) { margin-top: var(--s4); }
  .hq__stage { height: 22rem; }
  .hq__bar { flex-direction: column; align-items: flex-start; }
  .hq-new { --hq-new-n: 2.3; }
}

/* Sections: each one explains a rail item, under that item's own icon and label. */
.hq-sec__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s1) var(--s4); margin-bottom: var(--hq-head); }
.hq-sec__head h2 { grid-column: 1; margin: 0; font: 700 var(--t-lg, 1.5rem)/1.15 var(--display); letter-spacing: -0.01em; }
.hq-sec__head h2 a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.hq-sec__head h2 a:hover { text-decoration: underline; }
.hq-sec__head h2 .rail__ic { width: 18px; height: 18px; flex: none; }
.hq-sec__head p { grid-column: 1; margin: 0; color: var(--ink-2); font: var(--t-sm)/1.45 var(--ui); max-width: 60ch; }
.hq-sec__more { grid-column: 2; grid-row: 1; padding: 0.5rem 0; font: var(--t-sm)/1 var(--ui); color: var(--ink); white-space: nowrap; }

/* Mix and Learn: the head on the left, the visual on the right. */
.hq-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--hq-head) var(--s6); align-items: start; }
.hq-split .hq-sec__head { grid-template-columns: 1fr; margin: 0; }
.hq-split .hq-sec__more { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s2); }
.hq-mix { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s4); border: 1px solid var(--rule-firm); background: var(--paper-deep); color: var(--ink); text-decoration: none; }
.hq-mix__g { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--rule-firm); margin-bottom: var(--s2); }
.hq-mix__g > * { width: 100%; height: 100%; }
.hq-mix__one > b { font: 500 var(--t-sm)/1.3 var(--ui); }
.hq-mix__plus { font: 700 2rem/1 var(--display); color: var(--ink-2); padding-bottom: 1.5rem; }

.hq-sec__head h2 > .rail__ic { width: 18px; height: 18px; margin-right: 0.5rem; vertical-align: -2px; }

@media (max-width: 60rem) { .hq-split { grid-template-columns: 1fr; } }
@media (max-width: 40rem) {
  .hq-sec__head { grid-template-columns: 1fr; }
  .hq-sec__more { grid-column: 1; grid-row: auto; }
}

/* WORKFLOW: the three things you handle, left to right. */
.hq-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); counter-reset: none; }
.hq-steps li { position: relative; }
.hq-steps li + li::before { content: "→"; position: absolute; left: calc(-1 * var(--s5)); top: 6.5rem; width: var(--s5); text-align: center; color: var(--ink-2); font: 400 1.25rem/1 var(--ui); }
.hq-steps h3 { display: flex; align-items: baseline; gap: 0.5rem; margin: var(--s4) 0 var(--s1); font: 600 var(--t-md)/1.2 var(--ui); }
.hq-steps h3 i { font: 500 var(--t-sm)/1 var(--mono, monospace); font-style: normal; color: var(--ink-2); }
.hq-steps p { margin: 0; color: var(--ink-2); font: var(--t-sm)/1.45 var(--ui); max-width: 34ch; }
.hq-art { display: block; height: 14rem; border: 1px solid var(--rule-firm); background: var(--paper-deep); overflow: hidden; position: relative; }
.hq-art--card { display: flex; flex-direction: column; }
.hq-art__g { flex: 1; display: block; overflow: hidden; border-bottom: 1px solid var(--rule-firm); }
.hq-art__g > *, .hq-mix__g > *, .hq-new__g > *, .hq-sk__g > * { width: 100%; max-width: none; height: 100%; aspect-ratio: auto; }
.hq-art__row { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.75rem; font: 600 var(--t-sm)/1 var(--ui); }
.hq-art__btn { background: var(--ink); color: var(--paper); padding: 0.4rem 0.6rem; font: 600 0.75rem/1 var(--ui); }
.hq-art--file { background: #0B0D12; color: #C9CED9; }
.hq-art__tab { display: inline-block; padding: 0.45rem 0.75rem; background: #161A22; border-right: 1px solid #262C38; border-bottom: 1px solid #262C38; font: 0.75rem/1 var(--mono, monospace); color: #F2F3F7; }
.hq-art--file pre { margin: 0; padding: 0.75rem; font: 0.75rem/1.55 var(--mono, monospace); white-space: pre-wrap; overflow: hidden; }
.hq-art--file pre::first-line { color: #fff; font-weight: 700; }
.hq-art--file::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3rem; background: linear-gradient(transparent, #0B0D12); }
.hq-art--prompt { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem; padding: 0.9rem; background: var(--paper-deep); }
.hq-art--prompt::before { content: ""; position: absolute; inset: 0.9rem 0.9rem auto; height: 5.5rem; background: repeating-linear-gradient(var(--rule-firm) 0 1px, transparent 1px 1.1rem); opacity: 0.35; }
.hq-art__chip { align-self: flex-start; padding: 0.35rem 0.55rem; border: 1px solid var(--rule-firm); background: var(--paper); font: 0.75rem/1 var(--mono, monospace); color: var(--ink); }
.hq-art__ask { display: block; padding: 0.75rem 3rem 0.75rem 0.75rem; border: 1px solid var(--ink-2); background: var(--paper); font: var(--t-sm)/1.4 var(--ui); color: var(--ink); }
.hq-art__send { position: absolute; right: 1.5rem; bottom: 1.5rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 700 0.9rem/1 var(--ui); }

/* LEARN: an annotated Swiss poster. The poster obeys the four rules it carries. */
.hq-see { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.hq-poster { position: relative; aspect-ratio: 3 / 4; background: #F2F2EF; overflow: hidden; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.hq-poster__grid { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(14,15,16,.12) 0 1px, transparent 1px 25%), repeating-linear-gradient(0deg, rgba(14,15,16,.12) 0 1px, transparent 1px 16.66%); }
.hq-poster__red { position: absolute; left: 0; top: 0; width: 75%; height: 33.33%; background: #D52B1E; }
.hq-poster__disc { position: absolute; right: -12%; top: 18%; width: 45%; aspect-ratio: 1; border-radius: 50%; background: #0E0F10; }
.hq-poster__h { position: absolute; left: 6%; top: 40%; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.9rem); line-height: 0.92; letter-spacing: -0.04em; color: #0E0F10; }
.hq-poster__txt { position: absolute; left: 6%; right: 30%; top: 68%; height: 14%; background: repeating-linear-gradient(#0E0F10 0 2px, transparent 2px 9px); opacity: 0.55; }
.hq-poster__btn { position: absolute; left: 6%; bottom: 5%; padding: 0.35rem 0.8rem; background: #0E0F10; color: #fff; font-weight: 700; font-size: 0.9rem; }
.hq-pin { position: absolute; z-index: 2; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; background: #0E0F10; color: #fff; border: 2px solid #fff; font: 700 0.75rem/1 var(--ui); border-radius: 50%; }
.hq-pin--layout { left: 72%; top: 44%; }
.hq-pin--typography { left: 50%; top: 40%; }
.hq-pin--color { left: 6%; top: 8%; }
.hq-pin--interface { left: 30%; bottom: 4.5%; }
.hq-see__rules { list-style: none; margin: 0; padding: 0; counter-reset: pin; }
.hq-see__rules li { counter-increment: pin; position: relative; padding: 0 0 var(--s3) 2.4rem; margin-bottom: var(--s3); border-bottom: 1px solid var(--rule-firm); font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.hq-see__rules li:last-child { border-bottom: 0; }
.hq-see__rules li::before { content: counter(pin); position: absolute; left: 0; top: 0; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 700 0.75rem/1 var(--ui); border-radius: 50%; }
.hq-see__rules b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.15rem; }

/* FAVORITES: five tall previews with working Save buttons, and a live tally.
   Portrait crops set it apart from Just added's landscape shelf. */
.hq-favs__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); align-items: stretch; }
.hq-favs__row > li { display: grid; grid-template-rows: 1fr auto; gap: var(--s2); min-width: 0; }
.hq-favs__row a { color: var(--ink); text-decoration: none; display: grid; gap: var(--s2); align-content: start; }
.hq-favs__g { display: block; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--rule-firm); }
.hq-favs__g > * { width: 100%; max-width: none; height: 100%; aspect-ratio: auto; }
.hq-favs__row li:not(.hq-favs__tally) > a > b { font: 500 var(--t-sm)/1.3 var(--ui); }
.hq-favs__row li:not(.hq-favs__tally) > a:hover > b { text-decoration: underline; }
.hq-favs__save { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 2.5rem; padding: 0 var(--s3); background: var(--paper); color: var(--ink); border: 1px solid var(--ink); font: 500 var(--t-sm)/1 var(--ui); cursor: pointer; }
.hq-favs__save:hover { background: var(--brand-wash); }
.hq-favs__save .rail__ic { width: 14px; height: 14px; }
.hq-favs__save[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.hq-favs__save[aria-pressed="true"] .rail__ic { fill: currentColor; }
.hq-favs__save:focus-visible, .hq-favs__row a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hq-favs__tally a { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s3); border: 1px dashed var(--ink-2); }
.hq-favs__tally a:hover { border-style: solid; }
.hq-favs__tally b { font: 700 clamp(3rem, 6vw, 5rem)/0.9 var(--display); letter-spacing: -0.04em; }
.hq-favs__tally span { font: var(--t-sm)/1.3 var(--ui); color: var(--ink-2); }
.hq-favs__tally em { margin-top: var(--s3); font: 500 var(--t-sm)/1.2 var(--ui); font-style: normal; }
.hq-favs__tally a:hover em { text-decoration: underline; }
.hq-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 60rem) { .hq-favs__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .hq-favs__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* COMING SOON: a sketch of each screen, dashed like the rail's hand. */
.hq-soon ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.hq-sk__next { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0.5rem; }
.hq-sk__next > span { display: flex; align-items: flex-end; padding: 0.4rem; border: 1px dashed var(--ink-2); min-width: 0; }
.hq-sk__next i { font: var(--t-xs)/1.2 var(--ui); font-style: normal; color: var(--ink-2); overflow-wrap: anywhere; }
.hq-soon a { display: block; color: var(--ink); text-decoration: none; }
.hq-soon b { display: block; margin: var(--s3) 0 var(--s1); font: 600 var(--t-md)/1.2 var(--ui); }
.hq-soon__d { display: block; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.hq-sk { display: flex; flex-direction: column; gap: 0.6rem; height: 12.5rem; padding: 1rem; border: 1px dashed var(--ink-2); opacity: 0.8; overflow: hidden; }
.hq-soon a:hover .hq-sk { border-style: solid; opacity: 1; }
.hq-sk s, .hq-sk u { display: block; text-decoration: none; }
.hq-sk s { height: 0.45rem; background: var(--rule-firm); width: 100%; }
.hq-sk s.short { width: 60%; }
.hq-sk u { width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; border: 1px dashed var(--ink-2); }
.hq-sk__people { display: flex; gap: 0.4rem; overflow: hidden; padding-bottom: 0.6rem; border-bottom: 1px dashed var(--rule-firm); }
.hq-sk__people u { width: 1.75rem; height: 1.75rem; }
.hq-sk__who { display: flex; gap: 0.6rem; align-items: flex-start; }
.hq-sk__who > span { flex: 1; min-width: 0; display: grid; gap: 0.4rem; }
.hq-sk__work { display: flex; gap: 0.3rem; overflow: hidden; }
.hq-sk__work em { width: 2rem; height: 1.5rem; border: 1px dashed var(--ink-2); }
.hq-sk__msg--reply { margin-left: 2.2rem; }
.hq-sk__msg { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.6rem; align-items: start; }
.hq-sk__msg s { grid-column: 2; }
.hq-sk__msg u { grid-row: span 2; }
.hq-sk__seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.2rem; }
.hq-sk__seat { display: block; aspect-ratio: 1; border: 1px dashed var(--ink-2); }
.hq-sk__seat--me { border-style: solid; border-color: var(--rule-firm); overflow: hidden; }
.hq-sk__seat--me img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hq-sk__sect { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.45rem; border-bottom: 1px dashed var(--rule-firm); }
.hq-sk__sect s.short { width: 40%; }
.hq-sk .hq-sk__open { width: 14%; flex: none; }
.hq-sk__me { display: flex; align-items: center; gap: 0.75rem; }
.hq-sk__me u { width: 2.75rem; height: 2.75rem; }
.hq-sk__me > span { flex: 1; display: grid; gap: 0.4rem; }
.hq-sk__field { display: block; height: 1.6rem; border: 1px dashed var(--ink-2); }
.hq-sk__toggle { display: flex; align-items: center; justify-content: space-between; }
.hq-sk__toggle em { width: 2rem; height: 1rem; border: 1px dashed var(--ink-2); border-radius: 1rem; }
.hq-sk__favs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.hq-sk__favs > span { position: relative; }
.hq-sk__g { display: block; height: 100%; overflow: hidden; border: 1px solid var(--rule-firm); }
.hq-sk__g > * { width: 100%; height: 100%; }
.hq-sk__favs .rail__ic { position: absolute; top: 0.3rem; right: 0.3rem; width: 16px; height: 16px; color: var(--ink); fill: var(--paper); }

@media (max-width: 60rem) {
  .hq-steps ol, .hq-soon ul { grid-template-columns: 1fr; gap: var(--s6); }
  .hq-steps li + li::before { content: "↓"; left: 0; top: calc(-1 * var(--s5)); width: auto; }
}
@media (max-width: 40rem) { .hq-see { grid-template-columns: 1fr; } .hq-poster { width: 100%; max-width: 20rem; } }
.hq-sk__mixed { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; }
.hq-sk__mixed .rail__ic:not(:last-child) { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; color: var(--ink); background: var(--paper); padding: 2px; }

/* BANDS (2026-09-26): every other section sits on a slightly lighter ground so
   the sections read as separate. Each band runs to the edges of the main
   column (never under the rail) by undoing main's inline padding. */
.ia:has(> .hq) { --hq-bleed: var(--s6); --hq-pad: var(--s8); --hq-head: var(--s5); }
/* SPACING SYSTEM: one section rhythm. Every section, the hero included, is
   --hq-pad from its neighbour's content; every heading is --hq-head above its
   visual. No section sets its own gap. */
.ia > .hq-sec { margin: 0 calc(-1 * var(--hq-bleed)); padding: var(--hq-pad) var(--hq-bleed); }
.ia > .hq-sec:nth-child(even) { background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
.ia > .hq { margin: 0 0 var(--hq-pad); }

/* CTA: the page ends on the brand violet, full to the bottom of the column. */
.ia > .hq-sec.hq-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; color: #fff; margin-bottom: calc(-1 * var(--s9));
  /* A shallow violet gradient, the brand violet dominant. White text holds
     6.4:1 on its lightest stop, and 5.0:1 under the shine at its brightest. */
  position: relative; isolation: isolate; overflow: hidden;
  /* More intense (founder, 2026-09-27): a wider run from near-black violet to
     electric violet; white text stays >= 4.8:1 at the brightest stop. */
  background: linear-gradient(100deg, #1E0766 0%, #4A14D6 40%, #7A36FF 78%, #8A45FF 100%);
}
/* The shine: one soft, narrow diagonal band of light that crosses the
   section once every 5.5s and then rests off-stage. Transform only, behind
   the words and the button, never over them. */
.ia > .hq-sec.hq-cta::before {
  content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 22%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2) 50%, transparent);
  transform: translateX(-160%) skewX(-18deg);
}
@media (prefers-reduced-motion: no-preference) {
  .ia > .hq-sec.hq-cta::before { animation: hq-cta-shine 5.5s cubic-bezier(0.45, 0, 0.25, 1) 1s infinite; }
  @keyframes hq-cta-shine {
    0% { transform: translateX(-160%) skewX(-18deg); }
    40%, 100% { transform: translateX(560%) skewX(-18deg); }
  }
}
.ia > .hq-sec.hq-cta > * { position: relative; z-index: 1; }
.hq-cta h2 { margin: 0; font: 700 clamp(2rem, 4.4vw, 3.75rem)/1 var(--display); letter-spacing: -0.03em; max-width: 24ch; }
.hq-cta h2 span { display: block; text-wrap: balance; }
.ia > .hq-cta .hq-cta__go { display: inline-flex; align-items: center; gap: 0.5rem; height: 3.25rem; padding: 0 var(--s5); background: #fff; color: #2A0E6E; font: 700 var(--t-md)/1 var(--ui); text-decoration: none; white-space: nowrap; }
.ia > .hq-cta .hq-cta__go:hover { background: #0B0D12; color: #fff; }
.hq-cta__go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 60rem) { .ia:has(> .hq) { --hq-bleed: var(--s4); --hq-pad: var(--s7); } }

/* Coming soon closes with the signup (2026-09-29): the updates are about these. */
.hq-soon__updates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--s4); align-items: start; margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.hq-soon__ask { margin: 0; font: 600 var(--t-md)/1.2 var(--ui); color: var(--ink); }
@media (max-width: 40rem) { .hq-soon__updates { grid-template-columns: 1fr; } }