/* ===========================================================
   GEORGE'S WEBSITE — Garibaldi Grid design system
   Page styles for the main pages. Design tokens, the header/nav and
   the footer live in shell.css, which every page (quiz games included)
   loads first. Organised in the order below:

   1. Fonts & reset
   2. Design tokens (in shell.css)
   3. Base typography
   4. Layout helpers
   5. Header & navigation (in shell.css)
   6. Buttons
   7. Hero (home) + page banners
   8. Cards
   9. Section blocks (stats, quick-fire, gallery, footer)
   10. Footer (in shell.css)
   11. Motion
   12. Accessibility & responsive
   =========================================================== */

/* 1. Fonts & reset --------------------------------------------------
   Fonts are NOT loaded here with @import — that forces the browser to
   download this file, parse it, discover the @import, and only then
   start the font request: one extra network round-trip before a single
   font byte arrives. Each HTML page instead loads the font stylesheet
   with its own <link rel="stylesheet">, right after the <link
   rel="preconnect"> hints, so the connection and the request start
   together as soon as the page is parsed. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body { margin: 0; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }


/* 3. Base typography -------------------------------------------------- */
body{
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--chalk); text-wrap: balance; margin: 0 0 var(--s3); }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.55rem); line-height: 1.2; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 var(--s4); max-width: 62ch; color: var(--chalk-dim); }
.lede { font-size: 1.1rem; color: var(--chalk); }
.eyebrow{
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text);
  margin: 0 0 var(--s2);
}
code, .mono-num { font-variant-numeric: tabular-nums; font-family: var(--font-display); letter-spacing: 0.02em; }

/* 4. Layout helpers -------------------------------------------------- */
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: var(--s4); }
main { display: block; }
section { padding-block: var(--s7); }
section + section { border-top: 1px solid var(--line); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
@media (max-width: 800px){
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}


/* 6. Buttons ------------------------------------------------------------ */
.btn{
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase;
  border-radius: var(--r-pill); padding: 14px 28px; border: none; cursor: pointer; min-height: 44px;
  display: inline-flex; align-items: center; gap: 8px; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }
/* Text-on-fill contrast varies by colour, so background + text come from
   the paired --btn-bg/--on-accent tokens (set per page above), never
   --accent + a hardcoded chalk — that combination is what produced an
   unreadable 1.5:1 button on the gold-accented School page. */
.btn-primary{ background: var(--btn-bg); color: var(--on-accent); box-shadow: var(--glow-accent); }
.btn-primary:hover, .btn-primary:focus-visible { filter: brightness(1.08); }
.btn-secondary{ background: transparent; color: var(--accent-text); border: 2px solid var(--accent); padding: 12px 26px; }
.btn-secondary:hover, .btn-secondary:focus-visible { box-shadow: var(--glow-accent); }
.btn-ghost{ background: var(--surface-raised); color: var(--chalk); border: 1px solid var(--line-strong); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--gold); color: var(--gold); }
.btn-row { display: flex; gap: var(--s4); flex-wrap: wrap; }

/* 7. Hero (home) + page banners ------------------------------------------ */
.hero{
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(225,16,44,0.16), transparent 55%),
    radial-gradient(100% 120% at 100% 10%, rgba(245,185,66,0.08), transparent 55%),
    var(--surface);
  border-bottom: 1px solid var(--line-strong);
  padding-block: var(--s8) var(--s7);
}
.hero-wordmark{
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 9vw, 5.5rem);
  line-height: 0.95; letter-spacing: -0.01em; color: var(--chalk);
  text-shadow: 0 0 40px rgba(225,16,44,0.45); animation: pulseGlow 3.4s ease-in-out infinite;
}
.hero-wordmark span { color: var(--garibaldi); }
@keyframes pulseGlow{
  0%,100% { text-shadow: 0 0 40px rgba(225,16,44,0.45); }
  50% { text-shadow: 0 0 58px rgba(225,16,44,0.75); }
}
.hero-tag{ color: var(--chalk-dim); font-size: 1.1rem; max-width: 46ch; }
.hero-actions{ display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.btn-big{ font-size: 1.1rem; padding: 16px 30px; min-height: 56px; }
@media (max-width: 520px){ .hero-actions .btn-big{ flex: 1 1 40%; justify-content: center; } .hero-actions .btn-primary{ flex-basis: 100%; } }

.hero-inner{ display: flex; align-items: center; justify-content: space-between; gap: var(--s7); flex-wrap: wrap; }
.hero-copy{ flex: 1 1 380px; }
.hero-photo{ flex: 0 1 260px; max-width: 260px; }
.hero-photo-wide{ flex-basis: 360px; max-width: 360px; }
.hero-photo img{
  width: 100%; height: auto; display: block; border-radius: var(--r-lg);
  border: 1px solid var(--line-strong); box-shadow: var(--glow-garibaldi);
}
@media (max-width: 700px){ .hero-photo:not(.hero-photo-wide) img{ max-height: 46vh; width: auto; max-width: 100%; margin: 0 auto; object-fit: cover; } .hero-photo:not(.hero-photo-wide){ margin-inline: auto; } }
.hero-photo figcaption{ font-size: 0.8rem; color: var(--chalk-faint); margin-top: var(--s2); text-align: center; }

/* A real photo used as a feature (not squeezed into a small card slot). */
.feature-photo{ max-width: 300px; }
.feature-photo img{
  width: 100%; height: auto; display: block; border-radius: var(--r-lg);
  border: 1px solid var(--line-strong); box-shadow: var(--glow-accent);
}
.feature-photo figcaption{ font-size: 0.85rem; color: var(--chalk-dim); margin-top: var(--s3); }
.feature-row{ display: flex; gap: var(--s6); align-items: center; flex-wrap: wrap; }
.feature-row .feature-text{ flex: 1 1 320px; }

/* A decorative banner graphic for pages with no real photo to show
   (Games, School, About) — a big icon badge on a glass panel, with a
   few smaller emoji scattered round it, so the banner isn't just bare
   text the way it used to be on every page. */
.banner-figure{
  flex: 0 1 220px; max-width: 220px; aspect-ratio: 1; position: relative;
  border-radius: var(--r-lg); border: 1px solid var(--line-strong);
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.06), transparent 60%), var(--surface-raised);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.banner-figure .icon-badge{ width: 96px; height: 96px; border-radius: 28px; font-size: 46px; position: relative; z-index: 1; }
.banner-figure .icon-badge svg{ width: 48px; height: 48px; }
.banner-deco{ position: absolute; inset: 0; pointer-events: none; font-size: 1.7rem; opacity: 0.5; }
.banner-deco span{ position: absolute; filter: grayscale(0.1); }
@media (max-width: 760px){ .banner-figure{ flex-basis: 150px; max-width: 150px; } .banner-figure .icon-badge{ width: 68px; height: 68px; font-size: 32px; } .banner-figure .icon-badge svg{ width: 34px; height: 34px; } }

.page-banner{
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
  padding-block: var(--s7) var(--s6);
  position: relative;
  overflow: hidden;
}
.page-banner::before{
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 160% at 10% 0%, var(--accent-ink), transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}
.page-banner .wrap { position: relative; }
.page-banner h1 { font-size: clamp(1.9rem, 5vw, 2.75rem); }

/* 8. Cards ----------------------------------------------------------------
   Deliberately NOT a coloured top-border rail on every card — that reads
   as a template default. At rest, a card is quiet (neutral border, no
   accent). The accent only shows up in the tag chip, and the border
   only picks up the accent colour and glow when a visitor is actually
   interacting with the card (hover / keyboard focus). */
.card{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover, .card:focus-within { transform: translateY(-4px); }
.card.football:hover, .card.football:focus-within { border-color: var(--garibaldi); box-shadow: var(--glow-garibaldi); }
.card.gaming:hover, .card.gaming:focus-within { border-color: var(--garibaldi); box-shadow: var(--glow-garibaldi); }
.card.school:hover, .card.school:focus-within { border-color: var(--gold); box-shadow: var(--glow-gold); }
.card.quiz:hover, .card.quiz:focus-within { border-color: var(--volt); box-shadow: var(--glow-volt), 0 0 40px rgba(245,185,66,0.18); }

/* A considered empty state, not a wireframe box: soft gradient, a quiet
   icon, small-caps label underneath — reads as "photo coming soon"
   rather than "unfinished placeholder". */
.photo-slot{
  height: 130px; border-radius: var(--r-sm);
  background: radial-gradient(120% 140% at 30% 15%, rgba(241,237,233,0.05), transparent 65%), var(--surface-raised);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--chalk-dim); font-size: 0.72rem; font-family: var(--font-body); letter-spacing: 0.02em;
  border: 1px solid var(--line); text-align: center; padding: var(--s3);
}
.photo-slot svg{ width: 22px; height: 22px; opacity: 0.55; }
.card.football .photo-slot svg{ color: var(--garibaldi); }
.card.gaming .photo-slot svg{ color: var(--garibaldi); }

/* Real logo/cover-art image, same footprint as .photo-slot above so a
   card looks the same whether it has a real image yet or not. contain
   (not cover) so a square logo or a portrait cover never gets cropped. */
.card-photo{
  height: 130px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-raised); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.card-photo img{ max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.card.school .photo-slot svg{ color: var(--gold); }

.card h3 { font-size: 1.1rem; margin-bottom: 0; }
.card p { margin: 0; color: var(--chalk-dim); font-size: 0.92rem; }
.tag{
  align-self: flex-start; font-family: var(--font-display); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.02em; padding: 4px 10px; border-radius: var(--r-pill);
}
.card.football .tag { background: var(--garibaldi-ink); color: var(--garibaldi-text); }
.card.gaming .tag { background: var(--garibaldi-ink); color: var(--garibaldi-text); }
.card.school .tag { background: var(--gold-ink); color: var(--gold); }

/* Card CTA affordance: an arrow that nudges right on hover. Used on the
   three Home tiles so they read as "go here", not just decorative panels. */
.card-arrow{
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
}
.card-arrow svg{ width: 16px; height: 16px; transition: transform 0.2s ease; }
.card:hover .card-arrow svg, .card:focus-within .card-arrow svg{ transform: translateX(4px); }
.card.football .card-arrow{ color: var(--garibaldi-text); }
.card.gaming .card-arrow{ color: var(--garibaldi-text); }
.card.school .card-arrow{ color: var(--gold); }
.card.quiz .card-arrow{ color: var(--volt-text); }

/* 8b. Home hub tiles: a bento grid, not a uniform 2x2 of identical boxes.
   Game Zone gets the bigger tile (it's where most of the content lives),
   each tile carries a bold gradient icon badge instead of a thin outline
   glyph, and the whole thing tilts slightly on hover/pointer move for a
   touch of depth. Additive — doesn't touch the shared .card rules other
   pages still use. */
.hub-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(150px, auto); gap: var(--s4);
}
.hub-tile{
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); color: inherit;
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}
.hub-tile::before{
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
  background: radial-gradient(140% 100% at 100% 0%, var(--tile-glow, rgba(157,92,255,0.14)), transparent 60%);
}
.hub-tile:hover, .hub-tile:focus-within { transform: translateY(-6px) scale(1.012); }
.hub-tile:hover::before, .hub-tile:focus-within::before { opacity: 1; }
/* The bento asymmetry: Game Zone is the tall feature column on the
   right, School is a wide bar underneath Football and Video Games. */
.hub-tile.football{ --tile-glow: rgba(225,16,44,0.16); grid-column: 1; grid-row: 1; }
.hub-tile.gaming{ --tile-glow: rgba(225,16,44,0.14); grid-column: 2; grid-row: 1; }
.hub-tile.quiz{ --tile-glow: rgba(157,92,255,0.18); grid-column: 3; grid-row: 1 / span 2; justify-content: center; }
.hub-tile.school{ --tile-glow: rgba(245,185,66,0.16); grid-column: 1 / span 2; grid-row: 2; flex-direction: row; align-items: center; }
.hub-tile.school .hub-icon{ margin-bottom: 0; }
.hub-tile.school .hub-text{ display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.hub-tile.school .card-arrow{ margin-top: 0; margin-left: auto; flex-shrink: 0; white-space: nowrap; }
.hub-tile.football:hover, .hub-tile.football:focus-within{ border-color: var(--garibaldi); box-shadow: var(--glow-garibaldi); }
.hub-tile.gaming:hover, .hub-tile.gaming:focus-within{ border-color: var(--garibaldi); box-shadow: var(--glow-garibaldi); }
.hub-tile.quiz:hover, .hub-tile.quiz:focus-within{ border-color: var(--volt); box-shadow: var(--glow-volt), 0 0 46px rgba(245,185,66,0.16); }
.hub-tile.school:hover, .hub-tile.school:focus-within{ border-color: var(--gold); box-shadow: var(--glow-gold); }

/* Reusable bold gradient icon badge — the same "modern app tile" glyph
   used across the whole site now, not just the Home hub. .hub-icon is
   kept as an alias so the Home tiles don't need touching. */
.icon-badge, .hub-icon{
  width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 18px rgba(0,0,0,0.35);
  font-size: 24px; line-height: 1;
}
.icon-badge svg, .hub-icon svg{ width: 26px; height: 26px; color: #fff; }
.icon-badge.sm{ width: 40px; height: 40px; border-radius: 12px; font-size: 19px; }
.icon-badge.sm svg{ width: 20px; height: 20px; }
.icon-badge.lg{ width: 84px; height: 84px; border-radius: 24px; font-size: 40px; }
.icon-badge.lg svg{ width: 42px; height: 42px; }
.icon-badge.red{ background: linear-gradient(145deg, #ff4d62, var(--garibaldi-solid)); }
.icon-badge.purple{ background: linear-gradient(145deg, #b98bff, #6a2fc0); }
.icon-badge.gold{ background: linear-gradient(145deg, #ffd27a, var(--gold)); }
.icon-badge.pink{ background: linear-gradient(145deg, #ff9ad1, #d1418f); }
.icon-badge.teal{ background: linear-gradient(145deg, #6fe3c8, #1f9d78); }
.icon-badge.mixed{ background: linear-gradient(145deg, #ffd27a, #b98bff); }
.hub-tile.football .hub-icon{ background: linear-gradient(145deg, #ff4d62, var(--garibaldi-solid)); }
.hub-tile.gaming .hub-icon{ background: linear-gradient(145deg, #ff4d62, var(--garibaldi-solid)); }
.hub-tile.quiz .hub-icon{ background: linear-gradient(145deg, #ffd27a, #b98bff); }
.hub-tile.school .hub-icon{ background: linear-gradient(145deg, #ffd27a, var(--gold)); }
.hub-tile h2{ font-size: 1.3rem; }
.hub-tile.quiz h2{ font-size: 1.7rem; }
.hub-tile p{ margin: 0; color: var(--chalk-dim); font-size: 0.94rem; max-width: 34ch; }
.hub-tile .card-arrow{ position: relative; }

/* Game Zone's featured tile gets a scattering of faint emoji in the
   background — a hint of what's inside without needing real screenshots. */
.hub-tile.quiz .hub-deco{
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  font-size: 2.6rem; opacity: 0.10; filter: grayscale(0.2);
}
.hub-tile.quiz .hub-deco span{ position: absolute; }

@media (max-width: 800px){
  .hub-grid{ grid-template-columns: 1fr; }
  .hub-tile, .hub-tile.football, .hub-tile.gaming, .hub-tile.quiz, .hub-tile.school{
    grid-column: 1; grid-row: auto;
  }
  .hub-tile.school{ flex-direction: column; align-items: flex-start; }
  .hub-tile.school .card-arrow{ margin-left: 0; margin-top: auto; }
}
@media (prefers-reduced-motion: reduce){
  .hub-tile{ transition: none; }
}

/* 9. Section blocks: stats, live badge, quick-fire, gallery -------------- */
.section-head { margin-bottom: var(--s5); }
.section-head p { margin-top: var(--s2); }

.stat-strip { display: flex; gap: var(--s6); flex-wrap: wrap; }
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; }
.stat.red .num { color: var(--garibaldi-text); }
.stat.violet .num { color: var(--volt-text); }
.stat.gold .num { color: var(--gold); }
.stat .cap { color: var(--chalk-dim); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; }

.live-badge{
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--garibaldi-text);
  background: var(--garibaldi-ink); border-radius: var(--r-pill); padding: 8px 16px;
}
.live-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--garibaldi); animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse{ 0%,100% { box-shadow: 0 0 0 0 rgba(225,16,44,0.6); } 50% { box-shadow: 0 0 0 8px rgba(225,16,44,0); } }

.fact-list{ display: flex; flex-direction: column; gap: var(--s3); }
.fact-list li{
  position: relative; padding-left: var(--s5); color: var(--chalk);
}
.fact-list li::before{
  content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}

.loves-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); }
.love-card { gap: var(--s2); }
.love-card:hover, .love-card:focus-within { border-color: var(--garibaldi); box-shadow: var(--glow-garibaldi); }
.love-emoji { font-size: 2rem; line-height: 1; }

.qf-list { display: flex; flex-direction: column; gap: var(--s3); }
.qf-item { display: flex; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.qf-item dt { font-family: var(--font-display); font-weight: 600; color: var(--chalk); min-width: 220px; }
.qf-item dd { margin: 0; color: var(--chalk-dim); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
@media (max-width: 700px){ .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item { margin: 0; }
.gallery-item .photo-slot, .gallery-item img { width: 100%; height: auto; aspect-ratio: 4/3; border-radius: var(--r-md); }
.gallery-item img { display: block; object-fit: cover; border: 1px solid var(--line); }
.gallery-item figcaption{ font-size: 0.8rem; color: var(--chalk-faint); margin-top: var(--s2); text-align: center; }

.faq-list { display: flex; flex-direction: column; gap: var(--s3); }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.faq-item summary{
  cursor: pointer; padding: var(--s4); font-family: var(--font-display); font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--accent-text); font-size: 1.4rem; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { padding: 0 var(--s4) var(--s4); margin: 0; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
th { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; font-size: 0.85rem; color: var(--chalk-dim); }
td { color: var(--chalk-dim); }
td.mono-num { color: var(--chalk); }
/* Score rows (Video Games' "My top scores"): a bold pill for the score
   instead of plain table text, and a little colour on each row. */
.table-wrap.score-table table{ border-collapse: separate; border-spacing: 0 8px; }
.table-wrap.score-table th{ border-bottom: none; padding-bottom: 4px; }
.table-wrap.score-table td{ border-bottom: none; background: var(--surface); padding: 14px; }
.table-wrap.score-table tr td:first-child{ border-radius: var(--r-md) 0 0 var(--r-md); display: flex; align-items: center; gap: 10px; }
.table-wrap.score-table tr td:last-child{ border-radius: 0 var(--r-md) var(--r-md) 0; }
.table-wrap.score-table .score-value{ font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--gold); background: var(--gold-ink); display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); }

.contact-card{
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: var(--s5);
}

/* A personal aside (a fact, a prediction, a goal) is not the same thing
   as an info panel (club stats, an email link) — giving it its own
   quieter, left-accented treatment instead of the same bordered box
   stops every block on the page from reading as one repeated component. */
.note-block{
  position: relative; padding: var(--s4) var(--s5); padding-left: calc(var(--s5) + var(--s2));
  border-left: 3px solid var(--accent);
}
.note-block p{ margin: 0; color: var(--chalk); font-size: 1.05rem; }
.note-block .note-label{
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.04em; color: var(--accent-text); margin-bottom: 6px;
}


/* 11. Motion --------------------------------------------------------------
   Content is visible by default — the fade-in is a bonus for viewers who
   have JS and no reduced-motion preference, never a requirement for
   seeing the page. If JS fails to load, is blocked, or hasn't run yet,
   .reveal elements are just... visible. The <html class="js"> hook is
   set by a one-line inline script in each page's <head>. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{ opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
  html.js .reveal.is-visible{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-wordmark, .live-dot { animation: none; }
  .card { transition: none; }
}

/* 12. Accessibility & responsive helpers ----------------------------------- */

@media (max-width: 700px){
  section { padding-block: var(--s6); }
  .stat-strip { gap: var(--s5); }
}


/* 13. Additions: rotating facts, next match, prediction tracker,
   progress bar ------------------------------------------------------------ */

/* Home: a small text button under the rotating "Did you know?" fact. */
.link-btn{
  background: none; border: none; padding: 0; margin-top: var(--s3); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.03em;
  color: var(--accent-text); min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
}
.link-btn:hover { color: var(--chalk); }

/* Football: next match */
.match-card{
  display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: var(--s5);
}
@media (max-width: 640px){ .match-card { grid-template-columns: 1fr; } }
.match-teams{ font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1.15; margin: 0; color: var(--chalk); }
.match-meta{ margin: var(--s2) 0 0; color: var(--chalk-dim); font-size: 0.95rem; }
.countdown{
  font-family: var(--font-display); font-weight: 700; text-align: center; line-height: 1;
  background: var(--garibaldi-ink); color: var(--garibaldi-text); border-radius: var(--r-md); padding: var(--s4) var(--s5);
}
.countdown .big{ display: block; font-size: 2.4rem; color: var(--chalk); }
.countdown .small{ font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.prediction-line{ grid-column: 1 / -1; max-width: none; border-top: 1px solid var(--line); padding-top: var(--s4); margin: 0; color: var(--chalk); }
.prediction-line strong{ font-family: var(--font-display); font-size: 1.2rem; color: var(--garibaldi-text); }

.predict-form{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.predict-form label{ display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--chalk-dim); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.03em; }
.predict-form input, .predict-form select{
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  color: var(--chalk); padding: 10px 12px; min-height: 44px; font-size: 1rem;
}
.predict-form input[type=number]{ width: 5.5rem; }
.predict-form input[type=password]{ width: 9rem; }
.predict-form .remember{ flex-direction: row; align-items: center; gap: 8px; min-height: 44px; }
.predict-form .remember input{ min-height: auto; width: 20px; height: 20px; }
.form-status{ grid-column: 1 / -1; max-width: none; margin: 0; font-size: 0.9rem; min-height: 1.4em; }
.form-status.ok{ color: #6ee7a8; }
.form-status.err{ color: var(--garibaldi-text); }
details.predict-toggle{ grid-column: 1 / -1; }
details.predict-toggle summary{
  cursor: pointer; font-family: var(--font-display); font-weight: 600; color: var(--garibaldi-text);
  min-height: 44px; display: inline-flex; align-items: center; list-style: none;
}
details.predict-toggle summary::-webkit-details-marker{ display: none; }
details.predict-toggle[open] summary{ margin-bottom: var(--s3); }

.tracker-summary{ margin-bottom: var(--s5); }
.pts-3{ color: #6ee7a8; font-weight: 700; }
.pts-1{ color: var(--gold); font-weight: 700; }
.pts-0{ color: var(--chalk-dim); }

/* School: bronze / silver / gold progress */
.medal-track{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s4); max-width: 520px; }
.medal-step{
  border-radius: var(--r-md); padding: var(--s3); text-align: center; border: 1px solid var(--line);
  background: var(--surface); color: var(--chalk-dim); font-family: var(--font-display); font-weight: 600;
}
.medal-step .medal{ font-size: 1.6rem; display: block; line-height: 1.2; filter: grayscale(1) opacity(0.45); }
.medal-step.done{ border-color: rgba(245,185,66,0.5); color: var(--chalk); background: var(--gold-ink); }
.medal-step.done .medal{ filter: none; }
.medal-step.next{ border-style: dashed; border-color: var(--gold); color: var(--gold); }
.medal-bar{ height: 8px; border-radius: var(--r-pill); background: var(--surface-raised); margin-top: var(--s3); max-width: 520px; overflow: hidden; }
.medal-bar span{ display: block; height: 100%; background: linear-gradient(90deg, #cd7f32, #c0c0c0, var(--gold)); border-radius: inherit; }

/* Football: "My own football" with George's player card beside the text */
.my-football { align-items: center; gap: var(--s5); }
.player-card { margin: 0; flex: 0 0 200px; }
.player-card .holo-card { border-radius: var(--r-md); box-shadow: 0 14px 34px rgba(0,0,0,0.5); overflow: hidden; }
.player-card img { width: 100%; height: auto; display: block; border-radius: var(--r-md); }
.player-card figcaption { font-size: 0.8rem; color: var(--chalk-faint); text-align: center; margin-top: var(--s3); }
.my-football-text { flex: 1; min-width: 0; }
@media (max-width: 600px){
  .my-football { flex-direction: column; align-items: stretch; text-align: left; }
  .player-card { flex: none; width: 70%; max-width: 240px; align-self: center; }
}


/* Football: live table, fixtures and results */
.muted { color: var(--chalk-faint); }
.mini-table { width: 100%; margin-top: var(--s4); border-collapse: collapse; font-size: 0.9rem; }
.mini-table th, .mini-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.mini-table th { font-size: 0.75rem; color: var(--chalk-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.mini-table td:nth-child(n+3), .mini-table th:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.mini-table tr.us td { background: rgba(225,16,44,0.14); color: var(--chalk); font-weight: 700; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.fx-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); }
.fx-col h3 { font-size: 1rem; margin-bottom: var(--s3); }
.fx-list { list-style: none; margin: 0; padding: 0; }
.fpl-head { margin: var(--s2) 0; color: var(--chalk-dim); font-size: 0.92rem; }
.fpl-list { list-style: none; margin: 0; padding: 0; }
.fpl-list li { display: grid; grid-template-columns: 1.6em 1fr auto; gap: var(--s3); align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fpl-list li:last-child { border-bottom: none; }
.fpl-rank { font: 700 0.9rem var(--font-display); color: var(--chalk-faint); text-align: center; }
.fpl-name b, .fpl-pts b { display: block; }
.fpl-name small, .fpl-pts small { display: block; font-size: 0.75rem; color: var(--chalk-faint); }
.fpl-pts { text-align: right; }
.fpl-pts b { font: 700 1.15rem var(--font-display); color: var(--chalk); }
.fpl-more summary { cursor: pointer; color: var(--chalk-dim); font-weight: 600; padding: 8px 0; }
.fpl-foot { margin: var(--s2) 0; font-size: 0.8rem; color: var(--chalk-faint); }
.fx-list li { display: grid; grid-template-columns: 5.8em 1fr auto; gap: var(--s3); align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fx-list li:last-child { border-bottom: none; }
.fxr-list { list-style: none; margin: 0; padding: 0; }
.fxr-list > li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fxr-list > li:last-child { border-bottom: none; }
.fxr-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fxr-board, .fxr-events { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: center; }
.fxr-team { font-weight: 700; line-height: 1.25; }
.fxr-team.is-forest { color: var(--garibaldi-text, #ff6b7d); }
.fxr-home { text-align: right; }
.fxr-away { text-align: left; }
.fxr-score { font: 800 1.35rem var(--font-display); font-variant-numeric: tabular-nums; padding: 2px 12px; border-radius: 8px; background: var(--surface-raised, rgba(255,255,255,0.06)); white-space: nowrap; }
.fxr-events { align-items: start; margin-top: 6px; }
.fxr-mid { width: 1px; }
.fxr-side { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; color: var(--chalk-dim); }
.fxr-side.fxr-home { align-items: flex-end; }
@media (max-width: 480px) { .fxr-team { font-size: 0.9rem; } .fxr-score { font-size: 1.15rem; padding: 2px 8px; } .fxr-side { font-size: 0.78rem; } }
.fx-date { font-size: 0.8rem; color: var(--chalk-faint); }
.fx-team small { color: var(--chalk-faint); }
.fx-right { display: inline-flex; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.fx-score { font-weight: 700; }
.fx-chip { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; color: #121014; }
.fx-chip.W { background: #3DCC7C; } .fx-chip.D { background: #c9c3bd; } .fx-chip.L { background: #FF5D5D; }
.fx-live { color: #FF5D5D; }
.match-live { margin: 6px 0 0; color: #FF5D5D; }

/* School Zone: links into SATs practice */
.sats-link { text-decoration: none; color: var(--chalk); }
.sats-link-emoji { font-size: 2rem; line-height: 1; }

/* =====================================================================
   SCROLL-DRIVEN ANIMATIONS
   Tied to the scroll position itself (no JavaScript), so they stay smooth
   on older phones. Browsers without support use the fade-in above.
   ===================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Sections rise in as they scroll into view. */
    html.js .reveal {
      opacity: 1; transform: none; transition: none;
      animation: sd-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
    }
    /* The hero photo drifts slower than the page: a bit of depth. */
    .hero-photo img { animation: sd-parallax linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    /* Photo gallery fans out. */
    .gallery-item { animation: sd-fan-left linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .gallery-item:nth-child(2) { animation-name: sd-fan-up; }
    .gallery-item:nth-child(3) { animation-name: sd-fan-right; }
    /* Forest badge spins in; cards tilt up into place. */
    .contact-card .card-photo img { animation: sd-spin linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .grid-3 > .card, .loves-grid > .card, .sats-grid > .sats-topic { animation: sd-card linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@keyframes sd-rise { from { opacity: 0; transform: translateY(40px) scale(0.97); } }
@keyframes sd-parallax { to { transform: translateY(-50px) scale(1.04); } }
@keyframes sd-fan-left { from { opacity: 0; transform: translate(40px, 30px) rotate(-8deg); } }
@keyframes sd-fan-up { from { opacity: 0; transform: translateY(50px) scale(0.9); } }
@keyframes sd-fan-right { from { opacity: 0; transform: translate(-40px, 30px) rotate(8deg); } }
@keyframes sd-spin { from { opacity: 0; transform: rotate(-200deg) scale(0.4); } }
@keyframes sd-card { from { opacity: 0; transform: perspective(800px) rotateX(18deg) translateY(30px); } }

/* Football: matchday weather and the live match centre */
.match-weather { margin: 6px 0 0; color: var(--chalk-dim); font-size: 0.92rem; }
.match-weather span { color: var(--chalk-faint); }
.fx-wx { font-size: 0.8rem; color: var(--chalk-dim); margin-right: 6px; }
.match-centre { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: var(--s5); }
.mc-head { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: 0.9rem; }
.mc-live { color: #FF5D5D; font-weight: 700; animation: mc-pulse 1.6s ease-in-out infinite; }
@keyframes mc-pulse { 50% { opacity: 0.55; } }
.mc-soon, .mc-ft { color: var(--gold); font-weight: 700; }
.mc-venue { color: var(--chalk-faint); }
.mc-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); margin: var(--s4) 0; font-family: var(--font-display); }
.mc-score b { font-size: clamp(2rem, 7vw, 3rem); color: var(--chalk); font-variant-numeric: tabular-nums; }
.mc-team { font-size: clamp(1.1rem, 3.5vw, 1.5rem); font-weight: 700; color: var(--chalk-dim); }
.mc-team:first-child { text-align: right; }
.mc-team.us { color: var(--garibaldi-text); }
.mc-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mc-events li { display: grid; grid-template-columns: 3.2em 1.6em 1fr; align-items: center; padding: 6px 10px; border-radius: var(--r-sm); background: rgba(255,255,255,0.03); }
.mc-events li.f.goal, .mc-events li.f.pen { background: rgba(225,16,44,0.16); }
.mc-events li.o { color: var(--chalk-dim); }
.mc-events small { color: var(--chalk-faint); }
.mc-min { font-variant-numeric: tabular-nums; color: var(--chalk-faint); font-size: 0.85rem; }
.mc-quiet, .mc-note { color: var(--chalk-faint); font-size: 0.85rem; margin: var(--s2) 0 0; }
.mc-lineup { margin-top: var(--s4); }
.mc-lineup summary { cursor: pointer; font-weight: 700; color: var(--chalk); }
.mc-lineup ol { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; }
.mc-lineup b { display: inline-block; width: 2em; color: var(--garibaldi-text); }
.mc-subs { font-size: 0.85rem; color: var(--chalk-faint); }
@media (prefers-reduced-motion: reduce) { .mc-live { animation: none; } }

/* About: Golden Retriever photo in the Dogs card */
.dog-photo { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(245,185,66,0.18), transparent 70%), var(--surface-raised); }
.dog-photo img { width: 100%; height: 100%; object-fit: cover; display: block; animation: dog-in 0.4s ease both; }
@keyframes dog-in { from { opacity: 0; transform: scale(1.04); } }
.dog-next { align-self: flex-start; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .dog-photo img { animation: none; } }

/* School Zone: Space corner */
.space-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); }
.space-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: flex; flex-direction: column; gap: 6px; }
.space-card h3 { font-size: 1.15rem; margin: 0; }
.space-kicker { margin: 0; font: 700 0.78rem var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.space-credit, .space-off { margin: 0; font-size: 0.8rem; color: var(--chalk-faint); }
.apod-img { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: #05030a; margin-bottom: 6px; order: -1; }
.apod-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.apod-img:hover img { transform: scale(1.04); }
.apod-none { display: grid; place-items: center; height: 100%; font-size: 3rem; }
.apod-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.7); }
.apod-more summary { cursor: pointer; color: var(--chalk); font-weight: 600; }
.apod-more p { color: var(--chalk-dim); font-size: 0.9rem; line-height: 1.6; }
.apod-open { margin: 0; font-size: 0.85rem; }
.apod-open a { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-weight: 600; }
.apod-open a:hover, .apod-open a:focus-visible { text-decoration: underline; }
.iss-map { aspect-ratio: 2 / 1; border-radius: var(--r-md); overflow: hidden; background: #070b16; border: 1px solid var(--line); }
.iss-map:not(.ready)::after { content: 'Loading the map…'; display: grid; place-items: center; height: 100%; color: var(--chalk-faint); font-size: 0.85rem; }
.iss-map.failed::after { content: 'Map unavailable'; }
.iss-map svg { width: 100%; height: 100%; display: block; }
.iss-sea { fill: #0b1426; }
.iss-grid { fill: none; stroke: rgba(160,190,255,0.08); stroke-width: 0.6; }
.iss-land { fill: #1f3350; stroke: #2c4668; stroke-width: 0.5; }
.iss-home { fill: var(--garibaldi); }
.iss-home-label { fill: var(--chalk-dim); font: 600 11px var(--font-body); }
.iss-trail { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0.8; }
.iss-dot circle { fill: var(--gold); }
.iss-dot .iss-ring { fill: rgba(245,185,66,0.25); animation: iss-ping 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.iss-dot text { font-size: 16px; }
@keyframes iss-ping { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.iss-text { margin: 4px 0 0; color: var(--chalk); }
.iss-text span { font-size: 0.82rem; color: var(--chalk-faint); }
.space-pair { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.eyebrow-link { color: inherit; text-decoration: none; }
.eyebrow-link:hover, .eyebrow-link:focus-visible { text-decoration: underline; }
.card.space-link { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: var(--s4); flex-wrap: wrap; text-decoration: none; color: var(--chalk); }
.card.space-link > div { flex: 1 1 260px; }
.space-link h3 { margin: 0 0 4px; }
.space-link p { margin: 0; }
.space-link .space-link-go { margin-left: auto; align-self: center; font-weight: 700; color: var(--gold); white-space: nowrap; }
.apod-img.contain img { object-fit: contain; }
.launch-count { margin: 2px 0; font: 700 1.7rem var(--font-display); color: var(--chalk); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.space-chip { align-self: flex-start; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(245,185,66,0.14); color: var(--gold); }
.space-chip.go { background: rgba(61,204,124,0.16); color: #3dcc7c; }
.quake-dot { fill: rgba(232,76,97,0.7); stroke: rgba(255,255,255,0.6); stroke-width: 0.6; }
.quake-dot.big { fill: var(--gold); stroke: #fff; }
.moon-row { display: flex; align-items: center; gap: var(--s4); margin: 6px 0; }
.moon-row h3 { margin: 0; }
.moon-svg { width: 116px; height: 116px; flex: none; filter: drop-shadow(0 0 18px rgba(245, 240, 220, 0.18)); }
.moon-dark { fill: #1d1b24; }
.moon-lit { fill: #efe9d8; }
.moon-rim { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.aurora-level { margin: 4px 0 2px; font: 700 1.25rem var(--font-display); color: var(--chalk); }
.aurora-meter { position: relative; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.aurora-meter span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #3dcc7c, #45d4c4, #9d5cff, #e84c61); }
.aurora-meter::after { content: ''; position: absolute; left: 66.7%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.55); }
.aurora-scale { position: relative; height: 1.3em; font-size: 0.72rem; color: var(--chalk-faint); }
.aurora-scale span { position: absolute; top: 0; white-space: nowrap; }
.aurora-scale span:nth-child(2) { left: 66.7%; transform: translateX(-50%); }
.aurora-scale span:last-child { right: 0; }
@media (prefers-reduced-motion: reduce) { .iss-dot .iss-ring { animation: none; } .apod-img img { transition: none; } }

/* Home: "Right now" tiles */
.now-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.now-tile { display: flex; flex-direction: column; gap: 4px; padding: var(--s4) var(--s5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); color: var(--chalk); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.now-tile:hover, .now-tile:focus-visible { transform: translateY(-3px); }
.now-tile.football:hover, .now-tile.football:focus-visible { border-color: var(--garibaldi); box-shadow: var(--glow-garibaldi); }
.now-tile.space:hover, .now-tile.space:focus-visible { border-color: var(--gold); box-shadow: var(--glow-gold); }
.now-tile.advice { cursor: default; }
.now-tile.advice:hover, .now-tile.advice:focus-visible { border-color: var(--gold); box-shadow: var(--glow-gold); }
.now-kicker { font: 700 0.78rem var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--chalk-faint); }
.now-main { font: 700 1.35rem var(--font-display); line-height: 1.2; }
.now-main small { font-size: 0.9rem; color: var(--chalk-faint); font-weight: 600; }
.now-tile.joke:hover, .now-tile.joke:focus-within { border-color: var(--gold); box-shadow: var(--glow-gold); }
.now-tile.joke .now-main { font: 600 1.05rem/1.4 var(--font-body, inherit); }
.joke-btn { align-self: flex-start; margin-top: 4px; min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--gold); background: transparent; color: var(--gold); font: 700 0.95rem var(--font-display); cursor: pointer; }
.joke-btn:hover, .joke-btn:focus-visible { background: var(--gold); color: var(--ink); }
.joke-punchline { color: var(--gold) !important; font-weight: 700; font-size: 1rem !important; }
.now-tile.advice .now-main { font: 600 1.05rem/1.4 var(--font-body, inherit); font-style: italic; }
.now-sub { font-size: 0.88rem; color: var(--chalk-dim); }

/* Football: Matchday block with tabs */
.md-tabs { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.md-tabs [role="tab"] { font-family: var(--font-display); font-weight: 700; font-size: 1rem; min-height: 44px; padding: 8px 18px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--chalk-dim); border: 1px solid var(--line-strong); cursor: pointer; }
.md-tabs [role="tab"][aria-selected="true"] { background: var(--garibaldi-solid); color: var(--chalk); border-color: var(--garibaldi); }
.md-tabs [role="tab"]:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }
[role="tabpanel"] > #fx-next, [role="tabpanel"] > #fx-results, [role="tabpanel"] > #fpl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s5); }
.md-panel-kicker { margin: 0 0 var(--s2); font-size: 0.85rem; color: #FF7a7a; font-weight: 700; }
#mc-wrap { margin-bottom: var(--s4); }
.tracker-box { margin-top: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s5); }
.tracker-box > summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--chalk); padding: 6px 0; }
.tracker-pts { color: var(--gold); }
.tracker-intro { color: var(--chalk-dim); font-size: 0.9rem; margin: var(--s2) 0; }
.fx-off { color: var(--chalk-dim); margin: var(--s2) 0; }

/* About: fun facts and quick-fire answers side by side */
.quick-facts { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--s6); align-items: start; }
@media (max-width: 760px) { .quick-facts { grid-template-columns: 1fr; gap: var(--s5); } }

/* School Zone: "Me at school" row */
.school-row { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: var(--s4); align-items: stretch; }
@media (max-width: 900px) { .school-row { grid-template-columns: 1fr 1fr; } .school-goal { grid-column: 1 / -1; } }
@media (max-width: 600px) { .school-row { grid-template-columns: 1fr; } }
.school-cell { margin: 0; }
.school-cell .icon-badge{ margin-bottom: var(--s3); }
.school-cell > .note-label { display: block; margin-bottom: var(--s2); }
.achievements-stack { display: grid; gap: var(--s3); }
.achievements-stack .card { padding: var(--s4); }
.achievements-stack .photo-slot, .achievements-stack .card-photo { height: 90px; }
.school-row > .school-cell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); border-left: 1px solid var(--line); }
.school-row .note-label, .school-cell > .note-label { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.school-row .achievements-stack .card { background: var(--surface-raised); }

/* About: rock jukebox in the Rock music card */
.jukebox { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.jukebox-btn { align-self: flex-start; font-family: var(--font-display); font-weight: 700; font-size: 1rem; min-height: 42px; padding: 6px 16px; border-radius: 999px; border: 0; cursor: pointer; color: #fff;
  background: var(--garibaldi-solid); box-shadow: 0 0 16px rgba(225,16,44,0.3); }
.jukebox-now { margin: 0; display: flex; gap: 10px; align-items: center; font-size: 0.85rem; color: var(--chalk-dim); }
.jukebox-now img { border-radius: 6px; flex-shrink: 0; }
.jukebox-now small { color: var(--chalk-faint); }

/* Video Games: RAWG details */
.game-meta { margin: 4px 0 0; font-size: 0.8rem; color: var(--chalk-faint); }
.coming-soon { margin-top: var(--s5); }
.coming-soon h3 { font-size: 1.05rem; margin-bottom: var(--s3); }
.coming-soon ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); }
.coming-soon li { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; }
.coming-soon img { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.coming-soon b { display: block; font-size: 0.9rem; }
.coming-soon small, .small-print { font-size: 0.75rem; color: var(--chalk-faint); }
.new-games { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (min-width: 700px) { .new-games { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.new-games li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.new-games img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--line); }
.new-games .ng-body { padding: 10px 12px 12px; }
.new-games b { display: block; font-size: 0.95rem; line-height: 1.25; }
.new-games small { display: block; font-size: 0.75rem; color: var(--chalk-faint); margin-top: 4px; }

/* Home: today's challenge button (George's Run daily challenge) */
.daily-cta{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 14px;border-radius:var(--r-lg);background:linear-gradient(90deg,rgba(245,185,66,.18),rgba(245,185,66,.06));border:1px solid rgba(245,185,66,.5);color:var(--chalk);text-decoration:none;max-width:420px;transition:transform .15s ease,border-color .15s ease;}
.daily-cta:hover,.daily-cta:focus-visible{transform:translateY(-2px);border-color:var(--gold);}
.daily-cta .daily-ico{font-size:26px;} .daily-cta b{display:block;font-family:var(--font-display);font-size:1.15rem;color:var(--gold);} .daily-cta small{display:block;font-size:.82rem;color:var(--chalk-dim);}
.daily-cta .daily-go{margin-left:auto;color:var(--gold);font-size:1.1rem;}

/* =====================================================================
   EXTRA MOTION
   A handful of small touches, all switched off for anyone who has asked
   their device for reduced motion. Hover lifts use the separate `translate`
   property, so they still work on elements that scroll-driven animations
   are already moving with `transform`.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* The top of every page builds itself, one piece after another. */
  .hero-copy > * { animation: mo-rise 0.7s cubic-bezier(.2,.8,.2,1) backwards; }
  .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.24s; }
  .hero-copy > :nth-child(5) { animation-delay: 0.32s; }
  .hero-actions .btn { animation: mo-pop 0.55s cubic-bezier(.3,1.5,.5,1) backwards; }
  .hero-actions .btn:nth-child(1) { animation-delay: 0.3s; }
  .hero-actions .btn:nth-child(2) { animation-delay: 0.4s; }
  .hero-actions .btn:nth-child(3) { animation-delay: 0.5s; }
  /* The big picture icons and the little emojis around them float. */
  .banner-figure .icon-badge { animation: mo-bob 4.2s ease-in-out infinite; }
  .banner-deco span { animation: mo-drift 5.5s ease-in-out infinite; }
  .banner-deco span:nth-child(2) { animation-delay: -1.4s; }
  .banner-deco span:nth-child(3) { animation-delay: -2.8s; }
  .banner-deco span:nth-child(4) { animation-delay: -4.1s; }
  /* Buttons: a shine sweeps across on hover, and they press in. */
  .btn { position: relative; overflow: hidden; }
  .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); translate: -120% 0; transition: translate 0.55s ease; pointer-events: none; }
  .btn:hover::after, .btn:focus-visible::after { translate: 120% 0; }
  .btn:active { scale: 0.97; }
  /* Cards and tiles lift towards you. */
  .hub-tile, .card, .game-card { transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
  .hub-tile:hover, .card:hover { translate: 0 -4px; }
  /* The crest in the header tips its hat. */
  .logo .logo-mark { transition: rotate 0.35s cubic-bezier(.3,1.6,.5,1), scale 0.35s cubic-bezier(.3,1.6,.5,1); }
  .logo:hover .logo-mark { rotate: -8deg; scale: 1.12; }
  /* Game Zone tiles pop in one after another when the page opens. */
  .grid.featured .game-card, .grid.compact .game-card { animation: mo-pop 0.5s cubic-bezier(.3,1.4,.5,1) backwards; }
  .grid .game-card:nth-child(1) { animation-delay: 0.05s; } .grid .game-card:nth-child(2) { animation-delay: 0.1s; }
  .grid .game-card:nth-child(3) { animation-delay: 0.15s; } .grid .game-card:nth-child(4) { animation-delay: 0.2s; }
  .grid .game-card:nth-child(5) { animation-delay: 0.25s; } .grid .game-card:nth-child(6) { animation-delay: 0.3s; }
  .grid .game-card:nth-child(n+7) { animation-delay: 0.35s; }
  /* Missions and level bars fill up when they appear. */
  .gzr-bar i, .gzr-xp i { animation: mo-fill 0.9s 0.25s cubic-bezier(.2,.8,.2,1) backwards; transform-origin: left; }
}
@keyframes mo-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes mo-pop { from { opacity: 0; transform: translateY(14px) scale(0.92); } }
@keyframes mo-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes mo-drift { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 3px -8px; rotate: 6deg; } }
@keyframes mo-fill { from { transform: scaleX(0); } }

/* ---- More motion (round two) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* A thin red line along the top shows how far down the page you are. */
  @supports (animation-timeline: scroll()) {
    body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000; background: linear-gradient(90deg, var(--garibaldi, #e1102c), var(--gold, #f5b942)); transform-origin: left; transform: scaleX(0); animation: mo-progress linear both; animation-timeline: scroll(root); pointer-events: none; }
    /* Section headings draw an underline as they arrive. */
    .section-head h2 { position: relative; padding-bottom: 8px; }
    .section-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 3px; background: var(--garibaldi, #e1102c); transform-origin: left; animation: mo-underline linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
  }
  /* Icons wiggle when you point at their tile. */
  .hub-tile:hover .hub-icon { animation: mo-wiggle 0.6s ease; }
  .game-card:hover .emoji-badge { animation: mo-wiggle 0.6s ease; }
  .school-cell:hover .icon-badge, .card:hover .icon-badge { animation: mo-wiggle 0.6s ease; }
  /* The header links slide a line in on hover. */
  .nav-links a { background-image: linear-gradient(var(--accent, #e1102c), var(--accent, #e1102c)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size 0.25s ease, color 0.2s ease; }
  .nav-links a:hover, .nav-links a:focus-visible { background-size: 100% 2px; }
  /* The match card's "days to go" number and the live dot get a little life. */
  .gzr-level.bump { animation: mo-bump 0.5s cubic-bezier(.3,1.6,.5,1); }
  /* Quick facts and lists slide in from the side one by one. */
  .quick-list li, .facts-list li { animation: mo-rise 0.5s ease backwards; }
  .quick-list li:nth-child(2), .facts-list li:nth-child(2) { animation-delay: 0.08s; }
  .quick-list li:nth-child(3), .facts-list li:nth-child(3) { animation-delay: 0.16s; }
  .quick-list li:nth-child(4), .facts-list li:nth-child(4) { animation-delay: 0.24s; }
  /* Player cards on the Football page tilt a touch towards you. */
  .player-card:hover, .grid-3 > .card:hover { rotate: -0.6deg; }
}
@keyframes mo-progress { to { transform: scaleX(1); } }
@keyframes mo-underline { from { transform: scaleX(0); } }
@keyframes mo-wiggle { 0%, 100% { rotate: 0deg; scale: 1; } 25% { rotate: -10deg; scale: 1.1; } 55% { rotate: 8deg; scale: 1.1; } 80% { rotate: -4deg; } }
@keyframes mo-bump { 0%, 100% { scale: 1; } 40% { scale: 1.12; } }

/* ---- Photo motion ---- */
@media (prefers-reduced-motion: no-preference) {
  /* The big photo at the top of a page floats and glows softly. (It keeps its scroll-in animation too.) */
  html.js .hero-photo.reveal { animation-name: sd-rise, mo-float; animation-timeline: view(), auto; animation-range: entry 0% entry 60%, normal; animation-duration: auto, 6s; animation-timing-function: linear, ease-in-out; animation-iteration-count: 1, infinite; animation-fill-mode: both, none; }
  .hero-photo { transition: scale 0.3s ease, rotate 0.3s ease; }
  .hero-photo:hover { scale: 1.04; rotate: -1deg; }
  /* Gallery photos lift and tilt a little when you point at them. */
  .gallery-item img, .feature-photo img { transition: translate 0.3s cubic-bezier(.2,.8,.2,1), rotate 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; }
  .gallery-item:hover img { translate: 0 -6px; box-shadow: 0 14px 30px rgba(0,0,0,0.45); }
  .gallery-item:nth-child(odd):hover img { rotate: -1.2deg; }
  .gallery-item:nth-child(even):hover img { rotate: 1.2deg; }
  .feature-photo:hover img { translate: 0 -5px; }
  /* The dog photo already has a frame that clips it, so it can zoom inside. */
  .dog-photo img { transition: scale 0.45s cubic-bezier(.2,.8,.2,1); }
  .dog-photo:hover img { scale: 1.08; }
  /* Gallery photos "develop" from dull and blurry to full colour as they scroll in. */
  @supports (animation-timeline: view()) {
    .gallery-item img { animation: mo-develop linear both; animation-timeline: view(); animation-range: entry 5% entry 85%; }
  }
  /* The club badge does a full spin when you point at it. */
  img[alt*="club badge"] { transition: rotate 0.6s cubic-bezier(.3,1.6,.5,1), scale 0.3s ease; }
  img[alt*="club badge"]:hover { rotate: 360deg; scale: 1.12; }
}
@keyframes mo-float { 0%, 100% { translate: 0 0; filter: drop-shadow(0 0 10px rgba(225,16,44,0.15)); } 50% { translate: 0 -7px; filter: drop-shadow(0 6px 22px rgba(225,16,44,0.38)); } }
@keyframes mo-develop { from { filter: grayscale(1) blur(5px) brightness(0.7); } to { filter: none; } }

/* The gallery photos slide in from the sides as you scroll; keep that from making the page wobble sideways on phones. */
.gallery-grid { overflow-x: clip; }