/* The front page, and only the front page. Loaded from index.html's own head
   block, so no other page pays for it and no shared stylesheet had to be
   touched to add it. It moves nothing out of site.css — .recut and everything
   else stay exactly where they are.

   Three rules, and they exist because the front page has two arrangements no
   other page has: one line of orientation above everything, and two search
   boxes side by side, one for a title and one for the object in somebody's
   hand. Everything else on the page reuses the existing vocabulary —
   .otd-lead, .shelf/.reel/.tile, .cards/.card, .today, .rule, .note, .join,
   .ask, .hunt/.big-hunt, .egs, .standfirst.

   `visual` owns how all of this looks and may absorb these rules into
   site.css, retune them, or throw them away. Structure only: no colour, no
   type scale, no face. Spacing comes from --band and --half rather than from
   --u multiples, so these blocks sit on the same rhythm as every other
   top-level section. */

/* ── the one line ───────────────────────────────────────────────────────────
   The h1 and its standfirst, above the day's opening night. Sits tight to the
   bar: it is the first thing under the nav and the lead block below carries
   its own space. */

.top{margin:var(--half) 0 var(--band)}
.top .ask{margin:0 0 calc(var(--u)*1.5)}
.top .standfirst{margin:0}

/* ── the two ways in ────────────────────────────────────────────────────────
   Two forms, not one form and a link. The owner's note was that "Identify a
   record" as a nav item explains itself to nobody; a box you can see, with a
   catalogue number shown in the placeholder, teaches what the site does by
   letting you do it.

   Siblings, never nested — _recut.html renders its own GET form on four other
   templates and a nested form silently breaks the inner one. */

.ways{display:grid; grid-template-columns:1fr 1fr; gap:var(--half);
  margin:var(--half) 0 var(--band)}
.way{min-width:0}

/* Both headings are .ask, so the two columns pair, and both have to cancel the
   base h2 — site.css:223 gives every h2 display:flex, a bottom hairline and
   its own margin, which drew a rule under "Or say what is printed on a record
   you are holding" and pushed it out of line with the heading beside it. Same
   cancel as h2.big and h2.rule.

   No font-size here on purpose. If the second heading should sit a step below
   the first, `visual` sets it — the hook is `.way.second .ask`. */
.way h2{display:block; border-bottom:0; padding-bottom:0; margin:0}

@media (max-width:760px){
  .ways{grid-template-columns:1fr; gap:var(--band)}
}