/* /search — "SEO & AI search" on the approved /websites template (hub-1.css does the geometry).
   Only what differs: the homepage "Found" room's colours (#10213b / #9fc3f0, app/_brd/data.ts ROOMS),
   the eyebrow at the head of the opener's column, and panel 2's four process lines.
   Nothing here paints a line. */

.hub--s { --room: #10213b; --acc: #9fc3f0; }
.hub--s .h1-name { color: var(--acc); }
.hub--s .h1-pan--2 { --room: #172c4f; --acc: #9fc3f0; }

/* the eyebrow heads the column; the column below it moves down by one line */
.hub--s .h1-col .s-eye { top: calc(134 * var(--c)); color: var(--foam); white-space: nowrap; }
.hub--s .h1-col .h1-no { top: calc(180 * var(--c)); }
.hub--s .h1-name { top: calc(206 * var(--c)); }
.hub--s .h1-col .h1-place { top: calc(290 * var(--c)); }

/* panel 2: four process lines in the display face, filling the measure (hub-1.js only ever shrinks them) */
.hub--s .s-how { list-style: none; margin: 0; padding: 0; left: calc(40 * var(--c)); top: calc(236 * var(--c)); width: calc(1360 * var(--c));
  font-size: calc(138 * var(--c)); }
.hub--s .s-how .h1-say__ln { margin-bottom: .2em; }
.hub--s .s-how .h1-say__ln:nth-child(even) .t { color: var(--acc); }

/* the one link inside an answer (Q8 -> /terms) reads as a link by colour; no underline (no thin lines) */
.hub--s .h1-qa__a a { color: var(--acc); transition: color .25s var(--e-ui); }
.hub--s .h1-qa__a a:hover { color: var(--foam); }

@media (max-aspect-ratio: 1/1) {
  /* the site fills the top of a phone, so the eyebrow joins the text under the title */
  .hub--s .h1-col .s-eye { top: calc(714 * var(--c)); }
  .hub--s .h1-col .h1-no { top: calc(74 * var(--c)); }
  .hub--s .h1-name { top: calc(730 * var(--c)); }
  .hub--s .h1-col .h1-place { top: calc(764 * var(--c)); }
  .hub--s .h1-line { top: calc(782 * var(--c)); }
  .hub--s .s-how { left: calc(16 * var(--c)); top: calc(300 * var(--c)); width: calc(358 * var(--c)); font-size: calc(66 * var(--c)); }
  .hub--s .s-how .h1-say__ln { margin-bottom: .35em; }
}