Split styles.scss into a standard 7-1-style Sass structure

Breaks the single 2,167-line styles.scss into abstracts/base/components/
layout/pages partials, forwarded from styles.scss (now a manifest only)
via @use. Organized by what each rule is/does rather than by page, since
a lot of it is intentionally shared — the item/announcement/user admin
list grids share one CSS Grid system across three admin pages, and
.knot/.rule-row/.hero-ctas/the announcement banner are used on both
index.php and menu.php. Splitting by page would have fought that.

  abstracts/tokens        — :root custom properties
  base/reset, utilities   — bare-element defaults, small reusable utility classes
  components/*            — buttons, cards/panels, forms, status-badge,
                             admin data-grid, admin modal, announcement
                             banner, dividers, social-row
  layout/*                — header/nav, footer, admin nav+dashboard shell
  pages/*                 — home, public menu, admin login/menu/hours

One real content move: .category-panel .panel-head's mobile override
now sits next to its desktop rule in pages/admin-menu instead of inside
the shared admin-data-grid mobile block — keeping it there would have
broken a same-specificity cascade order dependency once split across
files.

Verified behavior-preserving: fresh build's declaration count, class-
token set, and declaration multiset all match the pre-split styles.css
exactly; homepage, menu page, and admin login spot-checked visually and
via computed styles.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/scss/components/_cards.scss

@@ -0,0 +1,88 @@
+/* shared surface-panel look: also used by .card, .login-card, .panel below */
+.stat-card,
+.card,
+.login-card,
+.panel,
+.menu-category {
+  background: var(--surface);
+  border: 1px solid var(--rule);
+}
+
+.stat-card {
+  padding: 2rem;
+  border-radius: 0.2rem;
+}
+
+.stat-card .eyebrow {
+  display: block;
+  margin-bottom: 1.1rem;
+}
+
+.stat-big {
+  font-family: var(--font-serif);
+  font-weight: 600;
+  font-style: italic;
+  font-size: 3rem;
+  color: var(--gold-bright);
+  line-height: 1;
+}
+
+.stat-card .stat-label {
+  margin-top: 0.4rem;
+  font-size: 0.92rem;
+  color: var(--ink-muted);
+}
+
+.stat-source {
+  margin-top: 1.5rem;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: var(--gold-dim);
+  letter-spacing: 0.05em;
+}
+
+.card {
+  border-radius: 0.2rem;
+  padding: 2.25rem;
+}
+
+.card h3 {
+  font-size: 1.3rem;
+  color: var(--gold-bright);
+  margin-bottom: 1.4rem;
+}
+
+.card .note {
+  margin-top: 1.25rem;
+  font-size: 0.88rem;
+  color: var(--ink-muted);
+}
+
+.card .note strong {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.panel {
+  border-radius: 0.25rem;
+  padding: 2rem;
+  margin-bottom: 2rem;
+}
+
+.panel h2 {
+  font-size: 1.35rem;
+  color: var(--gold-bright);
+  margin-bottom: 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.panel-head {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}