/* =========================================================================
   NCRHA - Northern Counties Rink Hockey Association
   Design direction: federation editorial. Swiss grid, brutal type scale,
   hairline rules, index tables. The brand specification fixes the palette
   to seven colours, zero corner radius, flush left, monochrome photography
   and no gradients, patterns or decorative shapes. Everything below works
   inside those rules and gets its impact from scale, rhythm and restraint.
   ========================================================================= */

/* ---- Fonts ------------------------------------------------------------ */
/* Jost stands in for Axiforma until the association licenses it.
   Both are geometric sans faces so the swap is one font-family line. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/jost-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/jost-variable-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --ring: #00FF03;        /* brand field: buttons, table headers, active states */
  --forest: #075B03;      /* headings, links, rules, deep grounds */
  /* Amber measures about 2.1:1 against white so it never carries text
     on a light ground. It is used for rules, error accents and for text
     on the black notice bar only. */
  --amber: #F0A031;
  --ink: #000000;         /* body text, the only text colour on ring green */
  --grey: #7F7F7F;        /* captions and role lines */
  --paper: #F6F5F5;       /* alternating rows and sunken panels */
  --white: #FFFFFF;       /* default ground */

  /* Ring green at 10 percent over white. Navigation hover only. */
  --nav-tint: #E5FFE6;
  /* Hairlines are black at low alpha so they read as a rule, not a colour */
  --hair: rgba(0, 0, 0, 0.14);
  --hair-light: rgba(255, 255, 255, 0.22);

  --font: 'Jost', 'Axiforma', 'Century Gothic', 'Segoe UI', sans-serif;

  --measure: 66ch;
  --container: 1360px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Type scale. The jump from body to display is deliberate and large. */
  --step-0: 1.0625rem;
  --step-1: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.15rem);
  --step-3: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --step-4: clamp(2.6rem, 1.7rem + 4vw, 5rem);
  --step-hero: clamp(2.9rem, 1.1rem + 8.2vw, 8.5rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: clamp(4.5rem, 9vw, 9rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* z-index scale */
  --z-nav: 100;
  --z-overlay: 150;
  --z-transition: 200;
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Photography is monochrome across the whole site. The contrast lift
   stops the greys going muddy once the colour is removed. */
.photo { filter: grayscale(1) contrast(1.08); }

a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ring); color: var(--ink); }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.04;
  color: var(--forest);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.15; }
h4 { font-size: var(--step-0); letter-spacing: -0.01em; }

/* The reading measure applies to running text only. Structural lists
   (navigation, footer columns, indexes) must span their container. */
p { max-width: var(--measure); }
.prose ul, .prose ol, .article-body ul, .article-body ol { max-width: var(--measure); }
strong { font-weight: 600; }

button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

/* Numerals line up in tables, dates and statistics */
time, .tabular, td, th, .stat-value { font-variant-numeric: tabular-nums; }

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

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Editorial grid ---------------------------------------------------- */
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
@media (max-width: 991px) { .grid12 { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 639px) { .grid12 { grid-template-columns: 1fr; } }

/* ---- Type helpers ------------------------------------------------------ */
.kicker {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey);
}
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
/* Amber measures only about 2.1:1 against white so it is never used for
   text on a light ground. It carries text on the black notice bar and
   otherwise appears as a rule or an error accent. Forest green replaces
   it for small labels, which reads at roughly 8.9:1. */
.kicker .kicker-no { color: var(--forest); font-variant-numeric: tabular-nums; }

.lede {
  font-size: var(--step-1); font-weight: 300;
  line-height: 1.45; max-width: 44ch; letter-spacing: -0.01em;
}
.caption { font-size: 0.8125rem; color: var(--grey); line-height: 1.5; }

/* ---- Rules ------------------------------------------------------------- */
.rule { border: 0; height: 3px; background: var(--forest); }
.rule-hair { border: 0; height: 1px; background: var(--hair); }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.8rem;
  background: var(--ring); color: var(--ink);   /* black on ring green, always */
  font-weight: 600; letter-spacing: -0.01em;
  padding: 1rem 1.7rem; min-height: 48px;
  text-decoration: none; border: 2px solid var(--ring);
  overflow: hidden; isolation: isolate;
}
/* The fill wipes in from the left rather than cross fading */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.42s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:hover, .btn:focus-visible { color: var(--ring); }
.btn .arrow { transition: transform 0.42s var(--ease-out); }
.btn:hover .arrow { transform: translateX(5px); }

.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline::before { background: var(--ink); }
.btn-outline:hover, .btn-outline:focus-visible { color: var(--white); }

.btn-inverse { background: transparent; border-color: var(--white); color: var(--white); }
.btn-inverse::before { background: var(--white); }
.btn-inverse:hover, .btn-inverse:focus-visible { color: var(--forest); }

/* Text link with a rule that draws in */
.link-draw {
  position: relative; display: inline-block;
  font-weight: 600; text-decoration: none; padding-bottom: 3px;
}
.link-draw::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform 0.4s var(--ease-out);
}
.link-draw:hover::after, .link-draw:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

/* ---- Scroll progress --------------------------------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ring); transform: scaleX(0); transform-origin: left center;
  z-index: 250; pointer-events: none;
}

/* ---- Notice bar -------------------------------------------------------- */
.notice-bar { background: var(--ink); color: var(--white); font-size: 0.9375rem; }
.notice-bar .container { display: flex; align-items: center; gap: 1rem; padding-block: 0.6rem; }
.notice-bar .notice-tag {
  color: var(--amber); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; font-size: 0.7rem; white-space: nowrap;
}
.notice-bar p { max-width: none; flex: 1; }
.notice-bar a { color: var(--white); }
.notice-dismiss { color: var(--white); font-size: 1.4rem; line-height: 1; padding: 0.2rem 0.5rem; }
.notice-dismiss:hover { color: var(--amber); }

/* ---- Header ------------------------------------------------------------ */
.site-header {
  background: var(--white); position: sticky; top: 0; z-index: var(--z-nav);
  border-bottom: 1px solid var(--hair);
  transition: box-shadow 0.3s ease;
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--hair), 0 10px 30px rgba(0, 0, 0, 0.06); }

/* Scroll intelligence: reading downward slides the header away, scrolling
   back up returns it at once.
   This must be a transform. Collapsing the nav's height instead changes
   the document height, which nudges the scroll position, which flips the
   direction test back and the header strobes. */
.site-header { transition: transform 0.38s var(--ease-out), box-shadow 0.3s ease; }
.site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
  .site-header.is-hidden { transform: none; }
}

.header-brand { display: flex; align-items: center; gap: 1rem; padding-block: 0.9rem; }
.header-brand img { width: 54px; height: 54px; flex: none; }
.header-brand .brand-name {
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.2rem);
  font-weight: 700; color: var(--forest); line-height: 1.12;
  text-decoration: none; letter-spacing: -0.02em;
}
.header-brand .brand-name span { display: block; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; }

.search-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 500; padding: 0.6rem 0.85rem; min-height: 44px;
  color: var(--ink); border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.search-toggle:hover { background: var(--paper); border-color: var(--hair); }
.search-toggle svg { width: 17px; height: 17px; }
.search-toggle .kbd {
  font-size: 0.7rem; color: var(--grey); border: 1px solid var(--hair);
  padding: 0.05rem 0.35rem; line-height: 1.4;
}

/* Primary navigation */
/* The mega panel is positioned against the nav bar rather than against
   its list item so it can span the full width of the header. */
.site-nav { border-top: 1px solid var(--hair); position: relative; }
.nav-list { list-style: none; display: flex; align-items: stretch; }
.nav-list > li { position: static; }

.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.9rem 1.15rem; min-height: 48px;
  color: var(--ink); text-decoration: none;
  font-weight: 500; letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-link:first-child { padding-left: 0; }
/* Hover tint sits behind the label and wipes up */
.nav-link::before {
  content: ""; position: absolute; inset: 0; background: var(--nav-tint);
  transform: scaleY(0); transform-origin: bottom center; z-index: -1;
  transition: transform 0.28s var(--ease-out);
}
.nav-link:hover::before { transform: scaleY(1); }
/* The active rule is a 4px forest green underline per the specification */
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--forest); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.34s var(--ease-out);
}
.nav-link[aria-current="true"] { font-weight: 600; }
.nav-link[aria-current="true"]::after { transform: scaleX(1); }

.nav-link .chev { width: 11px; height: 11px; transition: transform 0.25s var(--ease-out); }
li.open > .nav-link .chev { transform: rotate(180deg); }

.nav-cta { margin-left: auto; display: flex; align-items: center; padding-left: 1rem; }
.nav-cta .btn { padding: 0.6rem 1.4rem; min-height: 44px; }

/* ---- Mega menu --------------------------------------------------------- */
/* A full width panel of structured columns plus a feature card whose
   photograph swaps as links are hovered. */
.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--white);
  border-top: 3px solid var(--ring);
  border-bottom: 1px solid var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  z-index: 90;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.12);
  /* Visibility flips instantly on the way in and only after the fade on
     the way out. Transitioning it in both directions leaves the panel
     unrendered on the tick keyboard focus is moved into it. */
  transition: opacity 0.2s ease, transform 0.24s var(--ease-out), visibility 0s linear 0.24s;
}
li.open > .mega {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.24s var(--ease-out), visibility 0s;
}

.mega-inner {
  max-width: var(--container); margin-inline: auto;
  padding: var(--space-4) var(--gutter) var(--space-5);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.15fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 1180px) {
  .mega-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-feature { display: none; }
}

.mega-col-title {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grey);
  padding-bottom: 0.8rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--hair);
}
.mega-col ul { list-style: none; }
.mega-col li { border-bottom: 1px solid var(--hair); }
.mega-col li:last-child { border-bottom: 0; }
.mega-col a {
  display: block; padding: 0.7rem 0; text-decoration: none; color: var(--ink);
  transition: padding-left 0.32s var(--ease-out), color 0.2s ease;
}
.mega-col a:hover, .mega-col a:focus-visible { padding-left: 0.7rem; color: var(--forest); }
.mega-link-label { display: block; font-weight: 600; letter-spacing: -0.01em; }
.mega-link-note { display: block; font-size: 0.8125rem; color: var(--grey); margin-top: 0.1rem; }

.mega-feature {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--paper); padding: var(--space-3);
}
.mega-feature-media { display: block; overflow: hidden; margin-bottom: var(--space-3); }
.mega-feature-media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.mega-feature:hover .mega-feature-media img { transform: scale(1.03); }
.mega-feature-kicker {
  display: block; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest);
}
.mega-feature-title {
  display: block; font-size: var(--step-1); font-weight: 700;
  color: var(--forest); line-height: 1.15; letter-spacing: -0.02em; margin-top: 0.5rem;
}
.mega-feature-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: var(--space-3); font-weight: 600; font-size: 0.875rem;
}
.mega-feature:hover .mega-feature-cta .arrow { transform: translateX(5px); }
.mega-feature-cta .arrow { transition: transform 0.4s var(--ease-out); }

.menu-toggle {
  display: none; align-items: center; gap: 0.5rem;
  font-weight: 600; padding: 0.6rem 0.9rem; min-height: 44px;
  border: 2px solid var(--ink);
}
.menu-toggle:hover { background: var(--paper); }
.menu-toggle svg { width: 19px; height: 19px; }

/* ---- Breadcrumbs ------------------------------------------------------- */
.breadcrumbs { font-size: 0.8125rem; color: var(--grey); border-bottom: 1px solid var(--hair); }
.breadcrumbs .container { padding-block: 0.9rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; max-width: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.45rem; color: var(--grey); }
.breadcrumbs a { color: var(--forest); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* ---- Hero -------------------------------------------------------------- */
/* One component for every page. Headline, sub-headline, actions, proof
   and media. The home page adds .is-lead for the display sized type and a page without media adds .is-plain so the copy can run wider. */
.hero {
  background: var(--forest); color: var(--white);
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem) 0;
}
.hero .grid12 { align-items: end; }
.hero-copy { grid-column: 1 / span 7; padding-bottom: var(--space-5); }
.hero-media { grid-column: 8 / span 5; align-self: stretch; display: flex; align-items: flex-end; }
.hero.is-plain .hero-copy { grid-column: 1 / span 9; }
@media (max-width: 1100px) {
  .hero-copy { grid-column: 1 / span 12; padding-bottom: var(--space-4); }
  .hero-media { grid-column: 1 / span 12; padding-bottom: var(--space-5); }
  /* Once the photograph sits under the copy a portrait crop is far too
     tall so it becomes a letterbox band instead. */
  .hero-media img { aspect-ratio: 16 / 7; }
}
@media (max-width: 991px) {
  .hero-copy, .hero.is-plain .hero-copy { grid-column: 1 / span 6; }
  .hero-media { grid-column: 1 / span 6; }
}

.hero h1 {
  color: var(--white);
  font-size: var(--step-4);
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin-top: var(--space-3);
}
.hero.is-lead h1 {
  font-size: var(--step-hero);
  line-height: 0.9; letter-spacing: -0.045em;
  max-width: 13ch; text-wrap: initial;
}
.hero .kicker { color: rgba(255, 255, 255, 0.8); }
.hero .kicker::after { background: var(--hair-light); }
.hero .kicker .kicker-no { color: var(--ring); }
.hero .lede { color: rgba(255, 255, 255, 0.86); margin-top: var(--space-3); max-width: 52ch; }
.hero p { color: rgba(255, 255, 255, 0.88); }

.hero-ctas { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero-media img { width: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.hero.is-lead .hero-media img { aspect-ratio: 4 / 5; }
.hero:not(.is-lead) .hero-media img { aspect-ratio: 1 / 1; }
.hero-figure { width: 100%; }
.hero-figure figcaption { color: rgba(255, 255, 255, 0.6); margin-top: 0.7rem; font-size: 0.75rem; }

/* Proof markers. Association facts only, never invented metrics. */
.hero-meta {
  border-top: 1px solid var(--hair-light);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  padding-top: var(--space-3); margin-top: var(--space-4);
  max-width: none;
}
.hero-meta div { display: flex; flex-direction: column-reverse; gap: 0.15rem; }
.hero-meta dt { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.hero-meta dd {
  font-weight: 700; letter-spacing: -0.02em;
  font-size: var(--step-1); line-height: 1.1;
}

.banner-bar { height: 6px; background: var(--ring); transform-origin: left center; }

/* ---- Ticker ------------------------------------------------------------ */
.ticker {
  background: var(--ring); color: var(--ink);   /* black on ring green, always */
  overflow: hidden; border-block: 1px solid var(--ink);
  padding-block: 0.7rem;
}
.ticker-track { display: flex; width: max-content; will-change: transform; }
.ticker-track > span {
  display: inline-flex; align-items: center; gap: 2.5rem;
  padding-right: 2.5rem; white-space: nowrap;
  font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.13em; text-transform: uppercase;
}
.ticker-track .sep { color: var(--forest); }

/* ---- Sections ---------------------------------------------------------- */
.section { padding-block: var(--space-6); }
.section-sunken { background: var(--paper); }
.section-dark { background: var(--ink); color: var(--white); }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark .kicker { color: rgba(255,255,255,0.6); }
.section-dark .kicker::after { background: var(--hair-light); }
.section-dark a { color: var(--ring); }

.section-head { margin-bottom: var(--space-5); }
.section-head h2 { margin-top: var(--space-3); }
.section-head .section-aside { margin-top: var(--space-3); }
.section-foot { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--hair); }

/* Split layout used by most interior pages */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-6); align-items: start; }
@media (max-width: 991px) { .split { grid-template-columns: 1fr; gap: var(--space-4); } }

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---- Index rows: the signature component ------------------------------- */
/* Used for the club directory and the news list. An editorial index with
   a number, a large title and meta, plus a photo that tracks the cursor. */
.index-list { list-style: none; max-width: none; border-top: 1px solid var(--hair); }
.index-row { position: relative; border-bottom: 1px solid var(--hair); }
.index-row > a {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--space-3);
  padding-block: clamp(1.4rem, 2.4vw, 2.2rem);
  text-decoration: none; color: var(--ink);
  transition: padding-left 0.45s var(--ease-out), color 0.3s ease;
}
.index-row > a:hover { padding-left: 1.4rem; color: var(--forest); }
/* Ring green wipe behind the row */
.index-row::before {
  content: ""; position: absolute; inset: 0; background: var(--nav-tint);
  transform: scaleX(0); transform-origin: left center; z-index: -1;
  transition: transform 0.45s var(--ease-out);
}
.index-row:hover::before { transform: scaleX(1); }
.index-row .row-no {
  font-size: 0.75rem; font-weight: 600; color: var(--grey);
  letter-spacing: 0.1em; font-variant-numeric: tabular-nums;
}
.index-row .row-title {
  font-size: clamp(1.4rem, 0.9rem + 1.9vw, 2.6rem);
  font-weight: 700; color: inherit; line-height: 1.05; letter-spacing: -0.03em;
}
.index-row .row-sub { display: block; font-size: 0.9375rem; color: var(--grey); margin-top: 0.5rem; font-weight: 400; letter-spacing: 0; }
.index-row .row-meta {
  font-size: 0.8125rem; color: var(--grey); text-align: right;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 639px) {
  .index-row > a { grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--space-2); }
  .index-row .row-meta { grid-column: 2; text-align: left; }
  /* Long meta lines paint past a narrow column when they cannot wrap.
     The element box stays in bounds so it looks fine in a layout audit
     while the text still pushes the scroll width out. */
  .index-row .row-meta { white-space: normal; }
}

/* ---- Club crests ------------------------------------------------------- */
/* Third party brand marks. They keep their own colours so the monochrome
   photography rule does not apply and each sits on a plate so a set of
   crests with different backgrounds still reads as one system. */
.club-logo {
  --logo-size: 64px;
  width: var(--logo-size); height: var(--logo-size);
  flex: none; display: grid; place-items: center;
  padding: 6px; background: var(--white); border: 1px solid var(--hair);
}
.club-logo.on-dark { background: var(--ink); border-color: var(--ink); }
.club-logo img { width: 100%; height: 100%; object-fit: contain; }

.index-list.has-logos .index-row > a {
  grid-template-columns: 3rem var(--logo-col, 64px) minmax(0, 1fr) auto;
}
@media (max-width: 639px) {
  .index-list.has-logos .index-row > a {
    grid-template-columns: 2.2rem 48px minmax(0, 1fr);
  }
  .index-list.has-logos .club-logo { --logo-size: 48px; }
  .index-list.has-logos .index-row .row-meta { grid-column: 3; }
}

.club-identity {
  display: flex; align-items: center; gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--hair);
  margin-top: var(--space-3);
}
.club-identity-name { font-weight: 600; letter-spacing: -0.01em; }

/* The index rows used to float a photograph beside the pointer. It was
   removed at the client's request. The mega menu still previews imagery but anchored in its own panel rather than following the cursor. */

/* ---- Cards ------------------------------------------------------------- */
.card { position: relative; border-top: 3px solid var(--ink); padding-top: var(--space-3); background: transparent; }
.card::before {
  content: ""; position: absolute; top: -3px; left: 0; right: 0; height: 3px;
  background: var(--ring); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-block: 0.5rem 0.7rem; }
.card h3 a { text-decoration: none; color: inherit; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card:hover h3 { color: var(--forest); }
.card time { font-size: 0.8125rem; color: var(--grey); }
.card .tag {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest);
}
.card p { font-size: 0.9375rem; color: var(--ink); }
.card-media { overflow: hidden; margin-bottom: var(--space-2); }
.card-media img { transition: transform 0.7s var(--ease-out); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card:hover .card-media img { transform: scale(1.04); }

.card-sunken { background: var(--paper); padding: var(--space-4); border-left: 4px solid var(--ring); }
.section-sunken .card-sunken { background: var(--white); }

/* ---- Statistics band --------------------------------------------------- */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
@media (max-width: 767px) { .stat-band { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
.stat { border-top: 1px solid var(--hair-light); padding-top: var(--space-3); }
.stat-value {
  font-size: clamp(2.6rem, 1.5rem + 4vw, 5rem); font-weight: 700;
  line-height: 0.95; letter-spacing: -0.045em; color: var(--ring);
}
.stat-label { font-size: 0.8125rem; color: rgba(255,255,255,0.7); margin-top: 0.7rem; letter-spacing: 0.04em; }

/* ---- Tables ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
caption {
  text-align: left; font-weight: 600; color: var(--grey); padding-bottom: 0.9rem;
  caption-side: top; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
}
th, td { text-align: left; padding: 0.85rem 1rem; vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
thead th {
  background: var(--ring); color: var(--ink);   /* black on ring green, always */
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding-left: 1rem;
}
thead th:first-child { padding-left: 1rem; }
tbody tr { transition: background-color 0.2s ease; }
tbody tr:nth-child(even) { background: var(--paper); }
tbody tr:hover { background: var(--nav-tint); }
tbody td, tbody th { border-bottom: 1px solid var(--hair); }

/* ---- Definition rows --------------------------------------------------- */
.data-list { max-width: none; border-top: 1px solid var(--hair); }
.data-list > div {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--space-3);
  padding-block: var(--space-3); border-bottom: 1px solid var(--hair);
}
.data-list dt { font-weight: 600; color: var(--grey); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 0.25rem; }
.data-list dd p { max-width: none; }
@media (max-width: 639px) { .data-list > div { grid-template-columns: 1fr; gap: 0.4rem; } }

/* ---- Document list ----------------------------------------------------- */
.doc-list { list-style: none; max-width: none; border-top: 1px solid var(--hair); }
.doc-list li { position: relative; border-bottom: 1px solid var(--hair); }
.doc-list li > a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-3); align-items: baseline;
  padding-block: var(--space-3); text-decoration: none; color: var(--ink);
  font-weight: 600; transition: padding-left 0.4s var(--ease-out), color 0.25s ease;
}
.doc-list li > a:hover { padding-left: 1rem; color: var(--forest); }
.doc-list .doc-desc { font-size: 0.9375rem; color: var(--grey); font-weight: 400; padding-bottom: var(--space-3); max-width: var(--measure); margin-top: -0.6rem; }
.doc-meta { font-size: 0.8125rem; color: var(--grey); font-weight: 400; white-space: nowrap; }
.doc-format {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--forest); text-transform: uppercase;
  border: 1px solid var(--forest); padding: 0.1rem 0.45rem;
}
@media (max-width: 639px) {
  .doc-list li > a { grid-template-columns: 1fr; gap: 0.5rem; }
  .doc-meta { white-space: normal; }
}

/* ---- People ------------------------------------------------------------ */
.person { border-top: 1px solid var(--hair); padding-top: var(--space-3); }
.person .photo-frame { background: var(--paper); margin-bottom: var(--space-3); overflow: hidden; aspect-ratio: 1 / 1; }
.person .photo-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.person:hover .photo-frame img { transform: scale(1.05); }
.person h3 { font-size: var(--step-0); margin-bottom: 0.2rem; }
.person .role { color: var(--grey); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.6rem; }
.person a { font-size: 0.875rem; }

/* ---- Figures ----------------------------------------------------------- */
figure figcaption { margin-top: 0.7rem; }
.figure-frame { overflow: hidden; }
.figure-frame img { width: 100%; }

/* ---- Forms ------------------------------------------------------------- */
.form-grid { display: grid; gap: var(--space-3); }
.form-field label { display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; }
.form-field .hint { font-size: 0.8125rem; color: var(--grey); font-weight: 400; letter-spacing: 0; text-transform: none; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font: inherit; padding: 0.85rem 1rem; min-height: 48px;
  border: 0; border-bottom: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); border-radius: 0;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.section-sunken .form-field input,
.section-sunken .form-field select,
.section-sunken .form-field textarea { background: var(--white); }
.form-field textarea { min-height: 170px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-bottom-color: var(--forest); background: var(--nav-tint);
}
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 2px;
}
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-bottom-color: var(--amber); }
.field-error {
  display: none; font-size: 0.875rem; font-weight: 600; color: var(--ink);
  margin-top: 0.5rem; padding-left: 0.7rem; border-left: 3px solid var(--amber);
}
.form-field.has-error .field-error { display: block; }

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-status {
  display: none; margin-top: var(--space-3); padding: var(--space-3);
  border-left: 5px solid var(--ring); background: var(--paper); font-weight: 500;
}
.form-status.visible { display: block; }

/* ---- Command palette --------------------------------------------------- */
.palette { position: fixed; inset: 0; z-index: var(--z-overlay); }
.palette[hidden] { display: none; }
.palette-scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.palette-panel {
  position: relative;
  max-width: 720px; margin: clamp(3rem, 10vh, 8rem) auto 0;
  background: var(--white);
  border: 1px solid var(--ink);
  border-top: 3px solid var(--ring);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column;
  max-height: min(70vh, 620px);
}
@media (max-width: 767px) {
  .palette-panel { margin: 0; max-width: none; max-height: 100vh; height: 100vh; border: 0; }
}

.palette-input-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: var(--space-3);
  border-bottom: 1px solid var(--hair);
}
.palette-input-row > svg { width: 18px; height: 18px; color: var(--grey); flex: none; }
#palette-input {
  flex: 1; font: inherit; font-size: var(--step-1); font-weight: 400;
  letter-spacing: -0.01em; border: 0; outline: none;
  background: transparent; color: var(--ink); min-width: 0;
}
#palette-input::placeholder { color: var(--grey); }
.palette-close {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--grey); border: 1px solid var(--hair);
  padding: 0.3rem 0.55rem; min-height: 0;
}
.palette-close:hover { color: var(--ink); border-color: var(--ink); }

.palette-body { overflow-y: auto; flex: 1; }
.palette-results { list-style: none; max-width: none; }

.palette-group {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grey);
  padding: var(--space-3) var(--space-3) 0.5rem;
}
.palette-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title type" "snippet type";
  gap: 0 var(--space-2);
  padding: 0.7rem var(--space-3);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.palette-row.is-active { background: var(--nav-tint); border-left-color: var(--ring); }
.palette-row-title { grid-area: title; font-weight: 600; letter-spacing: -0.01em; }
.palette-row.is-active .palette-row-title { color: var(--forest); }
.palette-row-snippet {
  grid-area: snippet; font-size: 0.8125rem; color: var(--grey);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.palette-row-type {
  grid-area: type; align-self: center;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--forest); white-space: nowrap;
}
.palette-empty { color: var(--grey); padding: var(--space-4) var(--space-3); }

.palette-foot {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem;
  padding: 0.7rem var(--space-3);
  border-top: 1px solid var(--hair);
  font-size: 0.7rem; color: var(--grey);
  background: var(--paper);
}
.palette-foot-hint { margin-left: auto; }
@media (max-width: 639px) { .palette-foot-hint { display: none; } }
kbd {
  font: inherit; font-size: 0.65rem; font-weight: 600;
  border: 1px solid var(--hair); padding: 0.1rem 0.35rem;
  margin-right: 0.15rem; color: var(--ink);
}

/* ---- Affiliation strip ------------------------------------------------- */
.affiliation { border-top: 1px solid var(--hair); padding-block: var(--space-5); }
.affiliation .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.affiliation p { max-width: 54ch; }
.affiliation .kicker { color: var(--grey); }

/* The supplied mark is white so it needs the dark field it was drawn
   for. The plate is the association's own forest green. */
.affiliation-lockup {
  flex: none; display: grid; place-items: center;
  width: clamp(160px, 22vw, 220px); aspect-ratio: 5 / 4;
  background: var(--forest); padding: var(--space-3);
  transition: background-color 0.25s ease;
}
.affiliation-lockup:hover { background: var(--ink); }
.affiliation-lockup img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 639px) { .affiliation .container { gap: var(--space-3); } }

/* ---- News article ------------------------------------------------------ */
.article-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-4);
  color: var(--grey); font-size: 0.8125rem; padding-block: var(--space-3);
  border-block: 1px solid var(--hair); margin-bottom: var(--space-4);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.article-body > * + * { margin-top: var(--space-3); }
.article-body p { font-size: 1.09rem; line-height: 1.7; }
.article-body h2 { font-size: var(--step-2); margin-top: var(--space-5); }
.standfirst { font-size: var(--step-2); font-weight: 300; line-height: 1.32; max-width: 26ch; letter-spacing: -0.025em; color: var(--forest); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-4); }
.filter-btn {
  padding: 0.55rem 1.15rem; min-height: 44px; border: 1px solid var(--ink);
  font-weight: 500; font-size: 0.875rem;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.filter-btn:hover { background: var(--paper); }
.filter-btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); font-weight: 600; }

/* ---- Footer ------------------------------------------------------------ */
.site-footer { background: var(--forest); color: var(--white); }
.footer-bar { height: 6px; background: var(--ring); }
/* The wordmark controls its own lower spacing so the container adds
   none. See the optical note on .footer-wordmark. */
.footer-main { padding-block: var(--space-6) 0; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 991px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (max-width: 539px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-grid h2 {
  color: rgba(255, 255, 255, 0.6); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--space-3);
  padding-bottom: 0.8rem; border-bottom: 1px solid var(--hair-light);
}
.footer-grid ul { list-style: none; }
.footer-grid li { padding-block: 0.3rem; }
.footer-grid a { color: var(--white); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s ease; }
.footer-grid a:hover { color: var(--ring); }

/* Oversized wordmark closes the page. Centred at the client's request,
   the one deliberate exception to the flush left rule. */
.footer-wordmark {
  text-align: center;
  font-size: clamp(2rem, 0.5rem + 7.5vw, 8rem); font-weight: 700;
  line-height: 0.85; letter-spacing: -0.05em; color: rgba(255, 255, 255, 0.12);
  margin: var(--space-5) 0 0;
  border-top: 1px solid var(--hair-light);
  white-space: nowrap; overflow: hidden;
  /* Measured against the letterforms rather than the line box. At a line
     height below one the ink sits 2px below the top of the line box and
     5px above the bottom so symmetric padding lands within 3px of
     optically even. The gap used to be far larger below because the
     footer container added its own bottom padding underneath. */
  padding-block: var(--space-4);
}

.footer-below {
  border-top: 1px solid var(--hair-light); padding-block: var(--space-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
}
.footer-below p { max-width: none; font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); }
.footer-below a { color: var(--white); }
.footer-social { margin-left: auto; display: flex; gap: 0.6rem; }
.footer-social a {
  color: var(--white); display: inline-flex; padding: 0.6rem;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
  border: 1px solid var(--hair-light); transition: background-color 0.22s ease, color 0.22s ease;
}
.footer-social a:hover { background: var(--ring); color: var(--ink); border-color: var(--ring); }
.footer-social svg { width: 20px; height: 20px; }

/* ---- Prose ------------------------------------------------------------- */
.prose > * + * { margin-top: var(--space-3); }
.prose p { font-size: 1.06rem; line-height: 1.72; }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-5); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { padding-block: 0.2rem; }
.prose .drop-lead::first-letter {
  float: left; font-size: 4.2em; line-height: 0.78; font-weight: 700;
  color: var(--forest); padding-right: 0.09em; padding-top: 0.04em;
}
/* A four line drop cap eats too much of a narrow measure */
@media (max-width: 639px) {
  .prose .drop-lead::first-letter { font-size: 2.9em; line-height: 0.82; }
}

/* =========================================================================
   HALFTONE VELOCITY
   The live matrix, the cursor, the index navigator and the kinetic type.
   Signal green appears only where something is alive.
   ========================================================================= */

/* ---- Halftone panel ---------------------------------------------------- */
.halftone {
  position: relative;
  background: var(--ink);
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.halftone img { width: 100%; height: 100%; object-fit: cover; }
.halftone canvas { display: block; width: 100%; height: 100%; }
.halftone canvas[hidden] { display: none; }
@media (max-width: 1100px) { .halftone { aspect-ratio: 16 / 9; } }

/* ---- Pointer ----------------------------------------------------------- */
/* The system cursor is kept throughout. Interactive elements are marked
   with the standard pointer so the affordance is never ambiguous. */
a, button, .index-row, .filter-btn, summary { cursor: pointer; }
.halftone { cursor: crosshair; }

/* ---- Kinetic type ------------------------------------------------------ */
.kin {
  display: inline-block;
  will-change: font-variation-settings, transform;
}

/* ---- Header controls --------------------------------------------------- */
.index-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 500; padding: 0.6rem 0.85rem; min-height: 44px;
  color: var(--ink); border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.index-toggle:hover { background: var(--paper); border-color: var(--hair); }
.index-toggle svg { width: 17px; height: 17px; }

/* ---- Index navigator --------------------------------------------------- */
.index-nav {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--ink); color: var(--white);
  overflow-y: auto;
}
.index-nav[hidden] { display: none; }

/* The ground answers whichever chapter is being considered */
.index-nav-media { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.index-nav-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s ease;
}
.index-nav-media.is-live img { opacity: 0.32; }

.index-nav-inner {
  position: relative;
  max-width: var(--container); margin-inline: auto;
  padding: var(--gutter) var(--gutter) var(--space-6);
  min-height: 100%;
  display: flex; flex-direction: column;
}
.index-nav-head {
  display: flex; align-items: center; gap: 1rem;
  padding-block: var(--space-2) var(--space-4);
}
.index-nav-head .kicker { color: rgba(255,255,255,0.6); flex: 1; }
.index-nav-head .kicker::after { background: var(--hair-light); }
.index-close {
  font-weight: 600; padding: 0.6rem 1.1rem; min-height: 44px;
  border: 1px solid var(--white); color: var(--white);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.index-close:hover { background: var(--ring); border-color: var(--ring); color: var(--ink); }

.index-nav-list { list-style: none; border-top: 1px solid var(--hair-light); }
.index-nav-list li { border-bottom: 1px solid var(--hair-light); }
.index-nav-list a {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: var(--space-3); align-items: baseline;
  padding-block: clamp(0.9rem, 1.7vw, 1.5rem);
  text-decoration: none; color: var(--white);
  transition: padding-left 0.45s var(--ease-out), color 0.25s ease;
}
.index-nav-list a:hover { padding-left: 1.4rem; color: var(--ring); }
.index-no { font-size: 0.75rem; color: var(--grey); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.index-label {
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.035em;
}
.index-note {
  font-size: 0.8125rem; color: var(--grey);
  letter-spacing: 0.08em; text-transform: uppercase; text-align: right;
}
@media (max-width: 639px) {
  .index-nav-list a { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .index-note { grid-column: 2; text-align: left; }
}

/* ---- View transitions -------------------------------------------------- */
/* The banner is a named element so it morphs between routes rather than
   cross fading with the rest of the page. */
.hero { view-transition-name: banner; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation-duration: 0.28s; }
  ::view-transition-new(root) { animation-duration: 0.34s; }
}

/* ---- Motion helpers ---------------------------------------------------- */
/* Content is visible by default. JS adds .m-ready only when it is safe to
   animate. A failed script or reduced motion never hides anything. */
.m-ready [data-reveal] { opacity: 0; }
.m-ready .line-inner { transform: translateY(105%); }
.line-mask { display: block; overflow: hidden; }
.line-inner { display: block; will-change: transform; }

/* ---- Responsive header ------------------------------------------------- */
@media (max-width: 991px) {
  .header-brand { padding-block: 0.7rem; }
  .header-brand img { width: 46px; height: 46px; }
  .menu-toggle { display: inline-flex; }

  .site-nav { display: none; }
  .site-nav.open { display: block; padding-bottom: var(--space-3); }

  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-link { width: 100%; padding: 0.95rem 0; border-bottom: 1px solid var(--hair); }
  .nav-link:first-child { padding-left: 0; }
  .nav-link::after { left: 0; width: 4px; right: auto; top: 0; bottom: 0; height: auto; transform: scaleY(0); }
  .nav-link[aria-current="true"]::after { transform: scaleY(1); }
  .nav-link[aria-current="true"] { padding-left: 1rem; }
  .nav-link .chev { margin-left: auto; }

  /* The mega panel becomes an inline expandable section on small screens */
  .mega {
    position: static; border: 0; border-left: 2px solid var(--ring);
    margin: 0 0 0.5rem 0.6rem; box-shadow: none;
    opacity: 1; visibility: hidden; transform: none; display: none;
  }
  li.open > .mega { display: block; visibility: visible; }
  .mega-inner {
    grid-template-columns: 1fr; gap: var(--space-3);
    padding: var(--space-2) 0 var(--space-3) var(--space-2);
  }
  .mega-col a { padding: 0.6rem 0; }
  .mega-feature { display: none; }

  .nav-cta { margin: var(--space-2) 0 0; padding-left: 0; }
  .nav-cta .btn { width: 100%; justify-content: space-between; }

}

@media (min-width: 992px) { .site-nav { display: block !important; } }

@media (max-width: 900px) {
  /* Labels collapse to marks so four controls still fit the bar */
  .search-toggle span:not(.kbd),
  .index-toggle span,
  .search-toggle .kbd { display: none; }
  .search-toggle, .index-toggle { padding: 0.6rem; }
}

@media (max-width: 539px) {
  .header-brand { gap: 0.7rem; }
  .header-brand img { width: 40px; height: 40px; }
  .header-brand .brand-name { font-size: 0.9rem; }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .ticker-track { transform: none !important; }
}

/* ---- Print ------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .notice-bar, .search-overlay,
  .ticker, .scroll-progress { display: none; }
}