/* =========================================================================== HOME-REVIEW.CSS — page-scoped corrections for `/` only Loaded from src/pages/index.astro, after memorial.css. Nothing else links it. =========================================================================== WHY A SEPARATE FILE. Every rule here belongs to one route and to one review (2026-09-08, homepage UX). site-20260716b.css, course-typography.css and memorial.css are shared with the rest of the site, and the same rules put there would silently move `/courses`, `/digital-twin` and every page that renders `.merit-flash` or `.mini-steps`. Each block below is scoped with `.page-home`, which `index.astro` sets in `bodyClass`, so the blast radius is the file that links it. ⚠️ ORDER MATTERS AND IT IS DECIDED IN index.astro. This file is linked AFTER memorial.css in the same , so equal-specificity rules here would win. Nothing in it overrides memorial.css any more (§1), but the order is what makes such an override possible, which is why §1 says not to write one. Where a shared sheet uses `!important` on a font size — `.merit-flash` copy inherits the same `body.page-course main :is(p,li,dd)` arms race described in memorial.css's header — a size here has to carry `!important` too. That is the existing arms race, not a new one. WHAT THIS FILE IS NOT FOR. No new colours, no new type ramp, no motion, and — since the owner's review below — no memorial layout. =========================================================================== */ /* ── 1 · THE MEMORIAL IS NOT STYLED HERE, AND THAT IS THE CORRECTION ───────── This file opened with a compact memorial: the lamp set beside the copy in a two-column grid, the copy left-aligned, `margin-inline:0` pulling the block off the hero's centre line, and every internal step tightened. It was written to win back the 620px the memorial stood at 390x844. The owner reviewed it rendered on 2026-09-08 and rejected it. The block read as a detached compact panel on an axis of its own, and the tightened steps read as inconsistent spacing beside a hero that had not been tightened with it. The three wrappers it placed are gone from DiyoMemorial.astro too, and memorial.css — lamp above a centred 660px column — is the whole memorial again, which is the composition that shipped on 2026-08-28. ⚠️ THE HEIGHT PROBLEM IS REAL AND THIS IS NOT THE PLACE TO SOLVE IT. If the memorial's first-screen cost comes up again, it is a composition question for the owner with a rendered phone screenshot in hand, not a page-scoped override that quietly re-lays out a component the whole site shares. */ /* ── 2 · THE MERIT FLASH'S SECOND-LIST RANKS ──────────────────────────────── The `
` of closing ranks used to be the whole right-hand column and it carried its own meaning in an `aria-label` that a sighted reader never saw. It now sits under a visible caption naming the list it belongs to, with the line about the third list under it, so nobody reads a second-list cutoff as this week's. `.merit-flash__inner` is `minmax(0,1fr) auto`, and this wrapper is the `auto` column. */ .page-home .merit-flash__aside { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .page-home .merit-flash__ranks-cap { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 0.78rem !important; line-height: 1.3; letter-spacing: 0.02em; } .page-home .merit-flash__ranks-cap strong { color: #fff; font-weight: 700; } .page-home .merit-flash__ranks-note { margin: 0; max-width: 42ch; color: rgba(255, 255, 255, 0.64); font-size: 0.78rem !important; line-height: 1.45; } .page-home .merit-flash__ranks-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .page-home .merit-flash__ranks-note a:focus-visible, .page-home .merit-flash__body a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .page-home .merit-flash__body a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* The flash's lead paragraph and the ranks column stack below 820px in site-20260716b.css. At that point the caption and note should not be wider than the ranks strip they explain. */ @media (max-width: 820px) { .page-home .merit-flash__aside { gap: 8px; } .page-home .merit-flash__ranks-note { max-width: none; } } /* ── 3 · 320px ────────────────────────────────────────────────────────────── The narrowest viewport the header audit renders. The rank strip is three columns of tabular numerals inside a bordered box, and at 320px the 2.1rem-max numerals plus 10px of side padding are what push it past the viewport. Nothing else on this page needs a rule here. */ @media (max-width: 359px) { .page-home .merit-flash__rank { padding-inline: 7px; } .page-home .merit-flash__rank-n { font-size: 1.3rem; } .page-home .merit-flash__rank dt { font-size: 0.66rem; } .page-home .merit-flash__rank-lbl { font-size: 0.62rem; } } /* ── 4 · WHEN THE ADMISSION HOUR HAS PASSED ───────────────────────────────── public/js/home-notice-clock.js adds `is-closed` to the two blocks that quote the current admission window once that window's deadline is past, and swaps the sentence for the notice's own `afterDeadline` text. The dot is the only thing left that would still read as live. It is a filled terracotta pip with a glow ring, which is the site's "happening now" mark, so it is emptied rather than hidden: a hidden dot reflows the sentence, and this line is being read at the exact moment a student is deciding whether to get on a bus. Nothing else changes, because the replacement sentence is the notice's own and it already tells them to call. */ .page-home .merit-flash__window.is-closed .merit-flash__dot { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }