/* ==========================================================================
   EUROSPAR Donegall Road — "Live Status" redesign (2026)
   Photo-led, dark-UI chrome (header / hero / department tiles / footer)
   wrapped around light, readable content sections. Brand red + green on a
   deep charcoal ground, glowing live-status panel in the hero.

   PLACEHOLDER PHOTOGRAPHY — flag for the client:
   This store has no dedicated photography yet. bakery.jpg, coffee.jpg,
   store-exterior.jpg, store-interior.jpg, fresh-produce.jpg and
   belfast-community.jpg are the same generic stock images already reused
   across the sibling SPAR/EUROSPAR sites — NOT photos of this specific
   Donegall Road store. They are used only where they are topically honest
   (bakery.jpg for the Bakery tile, coffee.jpg for the Barista Bar tile and
   hero). The Post Office and Fuel Forecourt tiles have no matching photo at
   all, so they deliberately get an icon-forward treatment instead of a
   mismatched photo. Replace every img/*.jpg reference with real Donegall
   Road photography as soon as it exists.
   ========================================================================== */

:root {
  /* Brand — do not invent new colours, these are the shared SPAR tokens */
  --spar-red:         #E11D2A;
  --spar-red-dark:    #A4121D;
  --spar-red-light:   #FF5A63;
  --spar-green:       #137743;
  --spar-green-dark:  #0C5730;
  --spar-green-light: #34D399;

  /* Dark grounds — header, hero, tiles, footer, cookie, to-top */
  --ink-950:      #0A0C0B;
  --ink-900:      #14171A;
  --ink-850:      #1B1F22;
  --ink-800:      #23282C;
  --ink-line:     rgba(255,255,255,0.14);
  --ink-line-soft:rgba(255,255,255,0.08);
  --on-dark:      #F6F5F2;
  --on-dark-dim:  rgba(246,245,242,0.72);
  --on-dark-faint:rgba(246,245,242,0.5);

  /* Light grounds — body content */
  --paper:      #FAF9F5;
  --paper-tint: #F0EDE4;
  --card:       #FFFFFF;
  --rule-100:   #E3DFD3;
  --rule-300:   #C6C1AF;
  --text-900:   #17191B;
  --text-700:   #494D50;
  --text-500:   #6B6F71;

  --wrap:   1180px;
  --gutter: 20px;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --grot:  'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
}

@media (min-width: 600px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 56px; } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-900);
  font-family: var(--grot);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  margin: 0;
  color: var(--text-900);
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--text-900); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--spar-red-dark); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--ink-950);
  outline-offset: 2px;
}

/* Dark / coloured grounds need the inverted ring — a dark ring on a dark or
   saturated background is a 1:1 invisible focus state. This list covers
   every dark or brand-coloured surface introduced in the redesign. */
.util :focus-visible,
.site-head :focus-visible,
.board :focus-visible,
.tiles :focus-visible,
.page-head :focus-visible,
.site-foot :focus-visible,
.cookie :focus-visible,
.hours tr.is-today :focus-visible,
.skip:focus-visible,
.to-top:focus-visible,
.btn-solid:focus-visible,
.btn-red:focus-visible,
.nav-a.nav-call:focus-visible {
  outline-color: var(--on-dark);
}

img { max-width: 100%; height: auto; display: block; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.tnum { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-950); color: var(--on-dark);
  padding: 0.75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* ===== Utility bar ======================================================= */

.util {
  background: var(--ink-950);
  color: var(--on-dark-dim);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--ink-line-soft);
}
.util .wrap {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
  align-items: center; justify-content: space-between;
  padding-block: 0.6rem;
}
.util a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid rgba(246,245,242,0.3); }
.util a:hover { color: #fff; border-bottom-color: var(--spar-red-light); }
.util-group { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: center; }

.status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--grot); font-weight: 600;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--on-dark);
}
.status-sq { width: 8px; height: 8px; border-radius: 50%; background: var(--spar-green-light); display: inline-block; }
.status.is-shut .status-sq { background: var(--spar-red-light); }

/* ===== Masthead / header ================================================= */

.site-head {
  background: var(--ink-950);
  border-bottom: 1px solid var(--ink-line-soft);
  position: sticky; top: 0; z-index: 50;
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 0.85rem;
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand-mark {
  background: var(--spar-red);
  color: #fff;
  font-family: var(--grot);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.6rem;
  line-height: 1;
  border-radius: 3px;
}
.brand-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--spar-green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-icon svg { width: 18px; height: 20px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--grot); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: 0.02em; color: var(--on-dark);
}
.brand-sub {
  font-family: var(--grot); font-weight: 500;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--on-dark-faint);
}

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav-a {
  font-family: var(--grot); font-weight: 600;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--on-dark-dim); text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.nav-a:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.nav-a.is-here { color: #fff; border-bottom-color: var(--spar-red); }
.nav-a.nav-call {
  background: var(--spar-green); color: #fff;
  padding: 0.65rem 1.2rem; border-bottom: 0;
  border-radius: 999px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.nav-a.nav-call:hover { background: var(--spar-green-dark); color: #fff; }
.nav-a.nav-call.is-here { background: var(--spar-green-dark); }

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--ink-line);
  padding: 0.55rem 0.9rem; cursor: pointer;
  min-height: 44px; min-width: 44px;
  align-items: center; justify-content: center;
  font-family: var(--grot); font-weight: 600; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--on-dark);
  border-radius: var(--radius-sm);
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-900);
    padding: 0.5rem var(--gutter) 1.5rem;
    border-bottom: 3px solid var(--spar-red);
  }
  .nav.is-open { display: flex; }
  .nav-a {
    color: var(--on-dark-dim); border-bottom: 1px solid var(--ink-line-soft);
    padding-block: 0.95rem; font-size: 0.8125rem;
  }
  .nav-a:hover, .nav-a.is-here { color: #fff; border-bottom-color: var(--spar-red-light); }
  .nav-a.nav-call { margin-top: 1rem; justify-content: center; }
}

/* ===== Hero — photo-led with a glowing live-status glass panel =========== */

.board {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
  color: var(--on-dark);
  border-bottom: 3px solid var(--spar-red);
}
.board-photos { position: absolute; inset: 0; display: flex; }
.board-photo { flex: 1 1 50%; background-size: cover; background-position: center; }
.board-photo-left  { background-image: url('../img/bakery.jpg'); }
.board-photo-right { background-image: url('../img/coffee.jpg'); }
.board-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,10,9,0.80) 0%, rgba(8,10,9,0.74) 45%, rgba(8,10,9,0.92) 100%);
}
.board-wrap {
  position: relative; z-index: 2;
  padding-block: clamp(3rem, 8vw, 5.5rem);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.board h1 {
  color: var(--on-dark); font-weight: 700;
  font-size: clamp(2rem, 5.6vw, 3.6rem);
  line-height: 1.06; letter-spacing: -0.018em;
  max-width: 18ch; margin-bottom: 0.9rem;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.board-deck {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.5; color: var(--on-dark-dim);
  max-width: 52ch;
}

.status-glass {
  margin: 2.25rem auto 0; width: 100%; max-width: 420px;
  background: rgba(20,23,21,0.58);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.85rem 2rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.status-kicker {
  font-family: var(--grot); font-weight: 600;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--on-dark-faint); margin-bottom: 0.85rem;
}
.status-line { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin-bottom: 0.65rem; }
.status-glass .status-sq {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--spar-green-light);
  box-shadow: 0 0 10px 2px rgba(52,211,153,0.7);
  display: inline-block;
}
.status-glass.is-shut .status-sq {
  background: var(--spar-red-light);
  box-shadow: 0 0 10px 2px rgba(255,90,99,0.7);
}
.status-word {
  font-family: var(--grot); font-weight: 700;
  font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--spar-green-light);
}
.status-glass.is-shut .status-word { color: var(--spar-red-light); }
.status-time {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(2rem, 5vw, 2.75rem); letter-spacing: -0.02em;
  color: var(--on-dark); margin-bottom: 0.5rem;
}
.status-copy { font-size: 0.9375rem; color: var(--on-dark-dim); margin-bottom: 1.25rem; }
.status-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.chip {
  font-family: var(--grot); font-size: 0.75rem; font-weight: 600; color: var(--on-dark-dim);
  background: rgba(255,255,255,0.08); border: 1px solid var(--ink-line);
  padding: 0.4rem 0.85rem; border-radius: 999px;
}

/* Glow follows open/closed state; the global prefers-reduced-motion rule
   above already forces every animation-duration to ~0 for reduced-motion
   users, so the pulse becomes a static glow rather than being removed. */
@keyframes glow-open {
  0%, 100% { box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(52,211,153,.25), 0 0 34px 2px rgba(52,211,153,.28); }
  50%      { box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(52,211,153,.4),  0 0 54px 8px rgba(52,211,153,.4); }
}
@keyframes glow-shut {
  0%, 100% { box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,90,99,.25), 0 0 34px 2px rgba(255,90,99,.28); }
  50%      { box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,90,99,.4),  0 0 54px 8px rgba(255,90,99,.4); }
}
.status-glass { animation: glow-open 3.4s ease-in-out infinite; }
.status-glass.is-shut { animation: glow-shut 3.4s ease-in-out infinite; }

@media (max-width: 700px) {
  .board-photo-right { display: none; }
  .board-photo-left { flex-basis: 100%; }
}

/* ===== Department tile row =============================================== */

.tiles {
  background: var(--ink-950);
  padding-block: clamp(2.5rem, 6vw, 3.75rem) clamp(3rem, 7vw, 4.5rem);
  border-bottom: 1px solid var(--ink-line-soft);
}
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.15rem; margin-bottom: 2.25rem; }
@media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tile-grid { grid-template-columns: 1fr; } }

.tile-frame {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--ink-line);
  background: var(--ink-900);
}
.tile-frame img { width: 100%; height: 100%; object-fit: cover; }
.tile-frame-icon {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(155deg, var(--ink-800), var(--ink-950));
}
.tile-icon-badge {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.tile-icon-badge.badge-green { background: rgba(52,211,153,0.14); box-shadow: inset 0 0 0 1px rgba(52,211,153,.35); color: var(--spar-green-light); }
.tile-icon-badge.badge-red   { background: rgba(255,90,99,0.14);  box-shadow: inset 0 0 0 1px rgba(255,90,99,.35);  color: var(--spar-red-light); }
.tile-icon-badge svg { width: 30px; height: 30px; }

.tile-tag {
  position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2;
  background: rgba(8,10,9,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--on-dark);
  font-family: var(--grot); font-weight: 700; font-size: 0.625rem;
  text-transform: uppercase; letter-spacing: 0.09em;
  padding: 0.32rem 0.6rem; border-radius: 999px;
}
.tile-label {
  margin-top: 0.85rem; text-align: center;
  font-family: var(--serif); font-weight: 600; font-size: 1.0625rem;
  color: var(--on-dark);
}

.showcase-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; margin-bottom: 1.5rem; }
.showcase-info { text-align: center; font-size: 0.9375rem; color: var(--on-dark-dim); }
.showcase-info a { color: var(--on-dark); text-decoration-color: var(--spar-red-light); }
.showcase-info a:hover { color: var(--spar-red-light); }

/* ===== Inner page header — smaller photo banner, same dark chrome ======== */

.page-head {
  position: relative;
  background-size: cover; background-position: center;
  border-bottom: 3px solid var(--spar-red);
  color: var(--on-dark);
}
.page-head::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,10,9,0.78) 0%, rgba(8,10,9,0.9) 100%);
}
.page-head .wrap { position: relative; z-index: 2; padding-block: clamp(2.5rem, 6vw, 4rem); }
.page-head h1 {
  color: var(--on-dark); font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3.2rem);
  line-height: 1.06; letter-spacing: -0.015em;
  max-width: 20ch; margin-bottom: 0.9rem;
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}
.page-head .deck {
  font-size: 1.125rem; line-height: 1.5; color: var(--on-dark-dim);
  max-width: 54ch;
}

.crumb {
  font-weight: 600; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--on-dark-faint);
  margin-bottom: 1.1rem;
}
.crumb a { color: var(--on-dark-dim); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
.crumb a:hover { color: #fff; }
.crumb span { margin-inline: 0.5rem; }

/* ===== Sections ========================================================== */

.sec { padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--rule-100); background: var(--paper); }
.sec:first-of-type { border-top: 0; }
.sec-tint { background: var(--paper-tint); }

.sec-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.sec-rule {
  display: flex; align-items: center; gap: 0.75rem;
  border-top: 2px solid var(--text-900);
  padding-top: 0.6rem; margin-bottom: 1rem;
}
.sec-num {
  font-family: var(--serif); font-weight: 600; font-size: 0.9375rem;
  color: var(--text-900); font-variant-numeric: tabular-nums;
}
.sec-dash { width: 24px; height: 2px; background: var(--spar-red); }
.sec-label {
  font-family: var(--grot); font-weight: 600; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-500);
}
.sec-title {
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.15; letter-spacing: -0.01em;
  max-width: 22ch; color: var(--text-900);
}
.sec-sub { margin-top: 0.75rem; color: var(--text-700); max-width: 54ch; }

/* ===== Spread: main column + standing rail =============================== */

.spread {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .spread { grid-template-columns: 1fr; gap: 2.25rem; }
}

.prose { max-width: 66ch; }
.prose h2 {
  font-weight: 700; font-size: clamp(1.45rem, 3vw, 1.9rem);
  line-height: 1.2; margin: 2.5rem 0 0.9rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-weight: 600; font-size: 1.25rem; line-height: 1.3; margin: 2rem 0 0.7rem; }
.prose ul { margin: 0 0 1.15em; padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: 1.5rem; margin-bottom: 0.6rem; }
.prose li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; background: var(--spar-red); }
.prose a { color: var(--text-900); text-decoration-color: var(--rule-300); }
.prose a:hover { color: var(--spar-red-dark); }

.rail {
  border-left: 1px solid var(--rule-100);
  padding-left: clamp(1.5rem, 2.5vw, 2.25rem);
}
@media (min-width: 901px) { .rail { position: sticky; top: 92px; } }
@media (max-width: 900px) {
  .rail { border-left: 0; padding-left: 0; border-top: 2px solid var(--text-900); padding-top: 1.5rem; }
}
.rail h2 {
  font-family: var(--grot); font-weight: 600;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-500); margin-bottom: 1rem;
}
.rail-row { border-top: 1px solid var(--rule-100); padding-block: 0.85rem; }
.rail-row:first-of-type { border-top: 0; padding-top: 0; }
.rail-row .k {
  display: block; font-weight: 600; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-500); margin-bottom: 0.3rem;
}
.rail-row .v { font-size: 0.9375rem; line-height: 1.45; color: var(--text-900); }
.rail-open {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--spar-green-dark);
}
.rail-open .sq { width: 8px; height: 8px; border-radius: 50%; background: var(--spar-green-dark); }
.rail-open.is-shut { color: var(--spar-red-dark); }
.rail-open.is-shut .sq { background: var(--spar-red-dark); }

/* ===== Hairline grid — department / sibling cards ======================== */

.hair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px;
  background: var(--rule-100);
  border: 1px solid var(--rule-100);
}
.hair-cell {
  background: var(--card);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  transition: background 120ms linear;
}
.hair-cell:hover { background: var(--paper-tint); }
a.hair-cell { text-decoration: none; color: inherit; display: block; }
.hair-cell h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.1875rem; line-height: 1.25; margin-bottom: 0.5rem;
}
.hair-cell p { font-size: 0.9375rem; line-height: 1.55; color: var(--text-700); }
.hair-kicker {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem;
  font-weight: 600; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-500);
}
.hair-kicker::before { content: ''; width: 6px; height: 6px; background: var(--spar-red); flex: none; }
.hair-cell .more {
  display: inline-block; margin-top: 0.9rem;
  font-weight: 600; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-900);
  border-bottom: 2px solid var(--spar-red); padding-bottom: 2px;
}

/* ===== Hours table — today's row filled =================================== */

.hours {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  background: var(--card);
  border: 1px solid var(--rule-100);
}
.hours caption {
  text-align: left; font-weight: 600; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-500); padding-bottom: 0.75rem;
}
.hours th, .hours td {
  text-align: left; padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--rule-100);
  font-size: 0.9375rem;
}
.hours tr:first-child th, .hours tr:first-child td { border-top: 0; }
.hours th { font-weight: 600; color: var(--text-900); }
.hours td { text-align: right; color: var(--text-700); }
.hours tr.is-today th, .hours tr.is-today td { background: var(--ink-950); color: var(--on-dark); }
.hours tr.is-today th { box-shadow: inset 4px 0 0 var(--spar-red); }

/* ===== Buttons ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--grot); font-weight: 600;
  font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 1rem 1.75rem; min-height: 48px;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: 999px;
  transition: background 140ms linear, color 140ms linear, border-color 140ms linear, transform 140ms linear;
}
.btn:active { transform: scale(0.98); }
/* Double-class selectors here are deliberate: a .btn can land inside .prose
   (e.g. a Directions CTA in a body paragraph), and ".prose a" (class+type,
   specificity 0,1,1) would otherwise beat a single-class ".btn-solid"
   (0,1,0) and silently repaint the button text dark-on-dark. Matching on
   ".btn.btn-solid" (0,2,0) always wins regardless of where the button sits. */
.btn.btn-solid { background: var(--ink-950); color: var(--on-dark); }
.btn.btn-solid:hover { background: var(--spar-red-dark); color: #fff; }
.btn.btn-red { background: var(--spar-red); color: #fff; }
.btn.btn-red:hover { background: var(--spar-red-dark); }
.btn.btn-line { background: transparent; color: var(--text-900); border-color: var(--rule-300); }
.btn.btn-line:hover { background: var(--ink-950); color: var(--on-dark); border-color: var(--ink-950); }
.cookie .btn.btn-line { color: var(--on-dark); border-color: rgba(255,255,255,0.35); }
.cookie .btn.btn-line:hover { background: var(--on-dark); color: var(--ink-950); }

/* ===== FAQ ================================================================ */

.faq { border-top: 2px solid var(--text-900); }
.faq-item { border-bottom: 1px solid var(--rule-100); padding-block: 1.5rem; }
.faq-item h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.1875rem; line-height: 1.3; margin-bottom: 0.55rem;
  max-width: 48ch;
}
.faq-item p { color: var(--text-700); max-width: 66ch; font-size: 1rem; }

/* ===== News listing ======================================================= */

.news { border-top: 2px solid var(--text-900); }
.news-item {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule-100);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
@media (max-width: 700px) { .news-item { grid-template-columns: 1fr; gap: 0.75rem; } }
.news-cat {
  font-weight: 600; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-500);
  border-top: 2px solid var(--spar-red); padding-top: 0.6rem;
}
.news-item h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.25;
  margin-bottom: 0.5rem; max-width: 40ch;
}
.news-item p { color: var(--text-700); max-width: 62ch; }

/* ===== Figure ============================================================= */

.figure { margin: 0; }
.figure img { border: 1px solid var(--rule-300); width: 100%; border-radius: var(--radius-sm); }
.figure figcaption {
  font-size: 0.875rem; color: var(--text-500);
  padding-top: 0.6rem; border-top: 1px solid var(--rule-100); margin-top: 0.6rem;
  max-width: 44ch;
}

/* ===== Form ================================================================ */

.form { max-width: 34rem; }
.field { margin-bottom: 1.35rem; }
.field label {
  display: block;
  font-weight: 600; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-500); margin-bottom: 0.45rem;
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--grot); font-size: 1rem; color: var(--text-900);
  background: var(--card);
  border: 1px solid var(--rule-300);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.9rem;
}
.field input:focus, .field textarea:focus {
  outline: 3px solid var(--ink-950); outline-offset: 1px; background: #fff;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.form-note { font-size: 0.875rem; color: var(--text-500); margin-top: 1rem; }

/* ===== Footer ============================================================= */

.site-foot {
  background: var(--ink-950);
  color: var(--on-dark-dim);
  border-top: 3px solid var(--spar-red);
  padding-block: clamp(2.5rem, 5vw, 4rem) 0;
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.site-foot h2 {
  font-family: var(--grot); font-weight: 600;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--on-dark); margin-bottom: 1rem;
  border-top: 1px solid var(--ink-line-soft); padding-top: 0.9rem;
}
.site-foot p { font-size: 0.9375rem; line-height: 1.6; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 0.6rem; font-size: 0.9375rem; }
.site-foot a {
  color: var(--on-dark-dim);
  text-decoration: underline;
  text-decoration-color: rgba(246,245,242,0.4);
  text-underline-offset: 3px;
}
.site-foot a:hover { color: #fff; text-decoration-color: var(--spar-red-light); }
.foot-row { margin-bottom: 0.7rem; font-size: 0.9375rem; }
.foot-row .k {
  display: block; font-weight: 600; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--on-dark-faint);
}
.colophon {
  border-top: 1px solid var(--ink-line-soft);
  padding-block: 1.25rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  justify-content: space-between; align-items: center;
  font-size: 0.8125rem; color: var(--on-dark-faint);
}
.colophon a { color: var(--on-dark-dim); }

/* ===== Cookie notice & to-top ============================================= */

.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--ink-950); color: var(--on-dark);
  border-top: 3px solid var(--spar-red);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 220ms ease, visibility 0s linear 220ms;
}
.cookie.is-up {
  transform: translateY(0);
  visibility: visible;
  transition: transform 220ms ease, visibility 0s linear 0s;
}
.cookie .wrap {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding-block: 1rem;
}
.cookie p { font-size: 0.875rem; margin: 0; max-width: 60ch; }
.cookie a { color: var(--on-dark); }
.cookie-actions { display: flex; gap: 0.6rem; }
.cookie .btn { padding: 0.65rem 1.1rem; min-height: 44px; font-size: 0.75rem; }

.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  background: var(--ink-950); color: var(--on-dark);
  border: 0; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%;
  font-size: 1.1rem; line-height: 1;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 180ms linear, background 120ms linear, visibility 0s linear 180ms;
}
.to-top.is-shown {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity 180ms linear, background 120ms linear, visibility 0s linear 0s;
}
body.cookie-up .to-top { bottom: 104px; }
.to-top:hover { background: var(--spar-red-dark); }

/* ===== Fade-in ============================================================= */
/* Reveal animation: content is visible by default and only hides behind
   this class once JS has confirmed it can also reveal it again (the '.js'
   class is added synchronously in <head>). No-JS visitors always see full
   content — matches the pattern already fixed in the earlier a11y audit. */

.js .rise { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 500ms ease; }
.js .rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rise { opacity: 1; transform: none; } }

/* ===== Print =============================================================== */

@media print {
  .util, .nav, .nav-toggle, .cookie, .to-top, .site-foot, .tiles { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .board { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .board-photos, .board-scrim, .status-glass { display: none; }
  .board h1 { color: #000; }
}