/* ============================================================
   Fonts — served from this site, not from Google
   ============================================================

   These used to be fetched from fonts.googleapis.com on every page
   load. Serving them ourselves is faster (no extra DNS lookup and
   connection to another company's server before any text can be
   drawn) and means no visitor's IP address is handed to Google
   simply for reading about a chess club.

   Only the weights the stylesheet actually uses are here.

   VERSIONS MATTER. These are Inter 3.019 and Merriweather 2.002 —
   the releases Google was serving, and the ones this design was drawn
   against. The current releases are noticeably different: Inter 4 is
   drawn wider, and the packaged Merriweather 2.1 is the "Light 18pt"
   optical cut, which is literally a lighter face. Shipping those made
   every heading and paragraph look light and spaced out. If these
   files are ever updated, compare before and after.

   font-display: swap tells the browser to draw the text immediately
   in a fallback face and repaint when the real one arrives, rather
   than showing a blank page for a moment.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/merriweather-latin-700-normal.woff2") format("woff2");
}

/* Watford Chess Club — modern site styles */

:root {
  /* Club colours taken from the official badge and flyer */
  --navy-900: #08234a;   /* badge navy */
  --navy-800: #0d2f5e;
  --navy-700: #123c78;
  --navy-600: #1a4f96;
  --cream: #faf8f3;
  --cream-dark: #f0ebe0;
  --ink: #1b1f26;
  --ink-soft: #515a66;
  --gold: #ffbe00;       /* flyer gold */
  --gold-light: #ffd257;
  --gold-deep: #8a6400;  /* gold dark enough for text on light backgrounds */
  --line: #e3ddd0;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(8, 35, 74, 0.10);
  --shadow-sm: 0 2px 8px rgba(8, 35, 74, 0.08);
  --max: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
  line-height: 1.25;
  color: var(--navy-900);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--gold-deep); }

/* height:auto keeps an image in proportion when CSS narrows it. Without
   it, an <img> carrying width and height attributes — which it should,
   so the page doesn't jump about as images load — gets squashed the
   moment a stylesheet gives it a different width. */
img { max-width: 100%; height: auto; display: block; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--navy-900);
  color: #fff;
  padding: 10px 16px;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
}

/* Top bar */
.topbar {
  background: var(--navy-900);
  color: #c3d3e8;
  font-size: 0.85rem;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.topbar a { color: var(--gold-light); }
.topbar a:hover { color: #fff; }

/* Header / nav */
.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--navy-900);
}
.brand-mark {
  height: 50px;
  width: auto;
  flex: none;
  display: block;
}
.brand-text { line-height: 1.15; }
.brand-text strong {
  display: block;
  font-family: "Merriweather", Georgia, serif;
  font-size: 1.15rem;
  color: var(--navy-900);
}
.brand-text span {
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
nav.main-nav a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--navy-900);
  font-weight: 600;
  font-size: 0.95rem;
}
nav.main-nav a:hover,
nav.main-nav a[aria-current="page"] {
  background: var(--cream-dark);
  color: var(--navy-800);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 1.1rem;
  cursor: pointer;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--gold);
  color: var(--navy-900);
}
.btn-primary:hover { background: var(--gold-light); color: var(--navy-900); }
.btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.btn-outline:hover { background: rgba(255,255,255,0.12); color: #fff; }
.btn-outline-dark {
  background: transparent;
  border-color: var(--navy-700);
  color: var(--navy-800);
}
.btn-outline-dark:hover { background: var(--navy-800); color: #fff; }

/* Hero */
.hero {
  background:
    linear-gradient(120deg, rgba(8,35,74,0.94), rgba(18,60,120,0.86)),
    repeating-conic-gradient(#0d2f5e 0% 25%, #08234a 0% 50%);
  background-size: auto, 64px 64px;
  color: #fff;
  padding: 72px 0 88px;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}
.hero h1 { color: #fff; }
.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--gold-light);
  font-weight: 700;
  margin-bottom: 12px;
}
.hero p.lead {
  font-size: 1.1rem;
  color: #d3dfee;
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.hero-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 24px;
  backdrop-filter: blur(2px);
}
.hero-card h3 { color: #fff; margin-bottom: 12px; font-family: "Merriweather", Georgia, serif; }
.hero-card dl { margin: 0; }
.hero-card dt { color: var(--gold-light); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 14px; }
.hero-card dt:first-child { margin-top: 0; }
.hero-card dd { margin: 2px 0 0; color: #eef3fa; }

/* Section framing */
section { padding: 64px 0; }
section.alt { background: var(--cream-dark); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.section-head p { color: var(--ink-soft); margin: 6px 0 0; max-width: 60ch; }
.eyebrow-line {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--gold-deep);
  font-weight: 700;
}

/* Cards / grids */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 8px; }
.card .meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  font-weight: 700;
}
.tag {
  display: inline-block;
  background: var(--cream-dark);
  color: var(--navy-800);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 6px;
}

/* CTA band */
.cta-band {
  background: var(--navy-800);
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #d3dfee; max-width: 60ch; margin: 0 auto 24px; }

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
caption { text-align: left; font-weight: 700; padding: 10px 0; color: var(--navy-900); }
thead th {
  background: var(--navy-800);
  color: #fff;
  text-align: left;
  padding: 12px 16px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
tbody td, tbody th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: #fbfaf5; }
.table-wrap { overflow-x: auto; border-radius: var(--radius); }

/* Page header (interior pages) */
.page-header {
  background: var(--navy-900);
  color: #fff;
  padding: 48px 0;
}
.page-header h1 { color: #fff; margin-bottom: 6px; }
.page-header p { color: #c3d3e8; margin: 0; }
.breadcrumb {
  font-size: 0.85rem;
  color: var(--gold-light);
  margin-bottom: 10px;
}
.breadcrumb a { color: var(--gold-light); }

.content-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}
.sidebar .card + .card { margin-top: 20px; }
.prose h2 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }

/* Fee table emphasis */
.fee-highlight {
  border: 2px solid var(--gold);
}

/* Footer */
footer.site-footer {
  background: var(--navy-900);
  color: #c3d3e8;
  padding: 48px 0 24px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-grid h4 { color: #fff; font-family: inherit; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: #c3d3e8; }
.footer-grid a:hover { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 18px;
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  color: #93a6c0;
}

/* Responsive */
@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .content-columns { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  nav.main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    display: none;
    box-shadow: var(--shadow);
  }
  nav.main-nav.open { display: block; }
  nav.main-nav ul { flex-direction: column; padding: 10px 20px 18px; }
  nav.main-nav a { display: block; padding: 12px 8px; }
  .nav-toggle { display: block; }
  .site-header { position: sticky; }
}

/* ------------------------------------------------ Joining steps */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0 0 8px;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 26px 62px;
  margin: 0;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--gold);
  font-family: "Merriweather", Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 46px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
}
.steps li h3 { margin-bottom: 6px; font-size: 1.1rem; }
.steps li p { margin-bottom: 0; }

/* Note panel — for honest expectation-setting rather than warnings */
.note-panel {
  border-left: 4px solid var(--gold);
  background: #fff;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin: 28px 0;
  box-shadow: var(--shadow-sm);
}
.note-panel h3 { margin-bottom: 8px; font-size: 1.1rem; }
.note-panel p:last-child { margin-bottom: 0; }

/* ------------------------------------------------ Site notices */
.notice-band {
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 0.95rem;
}
.notice-band .container {
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.notice-band .tagword {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  white-space: nowrap;
  padding-top: 2px;
}
.notice-band p { margin: 0; }
.notice-info     { background: #eaf0f8; color: #123c78; }
.notice-info .tagword { color: #1a4f96; }
.notice-important{ background: #fdf3d8; color: #6b5410; }
.notice-important .tagword { color: #8a6400; }
.notice-closure  { background: #fae9e7; color: #8a2b22; }
.notice-closure .tagword { color: #a5342a; }

/* ------------------------------------------- Test-copy warning bar */
.test-bar {
  background: repeating-linear-gradient(45deg, #1b1f26, #1b1f26 12px, #2a2f38 12px, #2a2f38 24px);
  color: #ffd257;
  text-align: center;
  padding: 9px 16px;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}
.test-bar strong { color: #fff; letter-spacing: 0.08em; }
.test-bar a { color: #ffd257; text-decoration: underline; }

/* ============================================================
   2026 REFRESH
   ------------------------------------------------------------
   Ideas borrowed from the chess-club templates Sagar liked, built
   into this site rather than bought as a theme:

     - a photographic hero, dark navy over it, text on the left
     - a high-contrast display serif for the headline only
     - gold as the single action colour, on pill buttons
     - a quiet column of social icons at the edge of the window
     - more air: bigger type, more space between sections

   To use a real photograph, replace assets/hero.jpg. Landscape,
   at least 1600px wide, and not too busy on the left where the
   headline sits. The overlay does the rest.
   ============================================================ */

@font-face{
  font-family:"Display";
  src:url("fonts/playfair-display-latin-700-normal.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Display";
  src:url("fonts/playfair-display-latin-400-normal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{ --gold:#e0b04a; --gold-light:#f0c86e; }

/* ---------------------------------------------------------- hero */
.hero{
  position:relative;
  background:
    linear-gradient(90deg, rgba(6,18,38,.96) 0%, rgba(6,18,38,.80) 42%, rgba(6,18,38,.42) 100%),
    url("hero.jpg") center right / cover no-repeat,
    #08234a;
  padding:104px 0 116px;
}
.hero-inner{ grid-template-columns:1.25fr 0.75fr; gap:56px; align-items:center; }
.hero .eyebrow{
  font-size:.74rem; letter-spacing:.28em; color:var(--gold);
  margin-bottom:20px;
}
.hero h1{
  font-family:"Display",Georgia,serif;
  font-weight:400;
  font-size:clamp(2.5rem, 4.6vw, 4rem);
  line-height:1.08;
  letter-spacing:-0.01em;
  margin-bottom:22px;
}
.hero p.lead{ font-size:1.16rem; line-height:1.7; color:#c9d6e8; max-width:44ch; }
.hero-actions{ margin-top:34px; gap:14px; }

/* The card beside the headline sits on the photograph, so it needs its
   own darkening rather than relying on the background. */
.hero-card{
  background:rgba(6,18,38,.62);
  backdrop-filter:blur(8px);
  border:1px solid rgba(224,176,74,.30);
  border-radius:14px;
  padding:30px 30px 26px;
}
.hero-card h3{ font-family:"Display",Georgia,serif; font-weight:400; font-size:1.4rem; }
.hero-card dt{ color:var(--gold); letter-spacing:.16em; font-size:.68rem; }
/*
 * Links inside the hero panel. Without this they inherit the site's
 * navy link colour, which is close to invisible on the dark panel.
 * Kept the same colour as the surrounding text and marked as a link by
 * the underline instead, so the address still reads as an address.
 */
.hero-card a{
  color:var(--gold);
  text-decoration:underline;
  text-decoration-color:rgba(224,176,74,.55);
  text-underline-offset:3px;
}
.hero-card a:hover, .hero-card a:focus{ color:var(--gold-light); text-decoration-color:var(--gold-light); }

/*
 * Links in running text, everywhere on the site.
 *
 * The site's default is navy with no underline, which asks the reader to
 * spot a link by colour alone — a signal a colour-blind visitor may not
 * receive at all, and one that is easy to miss even with normal sight
 * when the link is a short phrase inside a sentence.
 *
 * Scoped to prose deliberately. Navigation, breadcrumbs, the footer and
 * anything styled as a button are obviously clickable from where they
 * sit, and underlining those would only add clutter.
 */
main :is(p, li, dd, td, blockquote) a:not(.btn){
  text-decoration:underline;
  text-decoration-color:rgba(11,37,69,.35);
  text-underline-offset:2px;
}
main :is(p, li, dd, td, blockquote) a:not(.btn):hover{
  text-decoration-color:var(--gold-deep);
}
/*
 * A quiet second line under a table cell's main value — the team's
 * captain under the team name, for instance. Deliberately small and
 * grey: it is context, not data to be scanned down the column.
 */
.muted-line{
  display:block;
  font-size:.78rem;
  font-weight:400;
  color:var(--ink-soft);
  margin-top:2px;
}

/*
 * A link sitting inside a footer sentence — the "(map)" after the
 * address. The footer's list links don't need underlining because their
 * position makes them obvious; one inside running text does.
 */
.footer-grid p a{
  color:var(--gold);
  text-decoration:underline;
  text-decoration-color:rgba(224,176,74,.55);
  text-underline-offset:2px;
}
.footer-grid p a:hover{ color:var(--gold-light); text-decoration-color:var(--gold-light); }

/* The hero panel sets its own, lighter treatment above. */
.hero-card :is(p, li, dd, td, blockquote) a:not(.btn){
  text-decoration-color:rgba(224,176,74,.65);
  text-underline-offset:3px;
}

/* ------------------------------------------------------- buttons */
.btn{ border-radius:999px; padding:14px 30px; letter-spacing:.01em; }
.btn-primary{ background:var(--gold); color:#20180a; border:1px solid var(--gold); }
.btn-primary:hover{ background:var(--gold-light); border-color:var(--gold-light); }
.btn-outline{ border:1px solid rgba(255,255,255,.45); color:#fff; }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); background:transparent; }
.btn-outline-dark{ border-radius:999px; }

/* --------------------------------------------------- section rhythm */
section{ padding:88px 0; }
/*
 * The first section on an interior page sits directly under the dark
 * page header, which already carries 60px of padding below its text.
 * At the full 88px the two stack into about 150px of empty cream and
 * the page looks like it failed to load. The home page is exempt: its
 * first section is the hero, which is meant to fill that space.
 */
main > section:first-child:not(.hero){ padding-top:40px; }

/*
 * The first thing in a text column must not carry a top margin.
 *
 * Headings in prose get 1.6em above them so they breathe after a
 * paragraph. On a page that opens with a heading — Contact, About —
 * that margin fires against nothing and drops the whole column below
 * the sidebar card, while a page opening with a paragraph (Joining)
 * lines up correctly. Same markup, different first element.
 *
 * The second selector covers signed-in administrators, for whom each
 * block is wrapped in an .editable div, so the heading is a grandchild
 * rather than a child.
 */
.prose > :first-child,
.prose > :first-child > :first-child,
/*
 * ...and the case that catches everyone: inside .editable the FIRST
 * child is the "Edit:" pin, not the heading. The pin is positioned
 * absolutely so it occupies no space, but it is still first — so the
 * selector above zeroes the pin's margin and leaves the heading's
 * intact. This one takes the element after the pin.
 */
.prose > :first-child > .editable-pin + *{ margin-top:0; }
.section-head{ margin-bottom:44px; }
.eyebrow-line{
  letter-spacing:.26em; font-size:.72rem; color:var(--gold-deep);
  margin-bottom:10px;
}
h2{ font-family:"Display",Georgia,serif; font-weight:400; letter-spacing:-0.01em; }
.section-head h2{ font-size:clamp(1.8rem, 2.6vw, 2.5rem); }

/* ----------------------------------------------------------- cards */
.card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:34px 30px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(8,35,74,.10);
  border-color:rgba(224,176,74,.55); }
.card h3{ font-family:"Display",Georgia,serif; font-weight:700; font-size:1.25rem; }

/* ------------------------------------------------------ page header */
/*
 * Interior page headers are a flat deep navy — no photograph.
 *
 * The board texture was tried here and dropped deliberately. It appears
 * on every interior page, so anything strong enough to notice becomes
 * wallpaper by the third page, and it competed with the page title for
 * attention on a band whose only job is to say where you are. The
 * photograph stays on the home hero alone, where it can carry weight.
 */
.page-header{
  background:#061226;
  padding:64px 0 60px;
}
.page-header h1{ font-family:"Display",Georgia,serif; font-weight:400;
  font-size:clamp(2.1rem,3.4vw,3rem); }

/* --------------------------------------------------- the cta band */
.cta-band h2{ font-family:"Display",Georgia,serif; font-weight:400; }

/*
 * One dark colour, used everywhere.
 *
 * The site previously carried three near-navies doing the same job —
 * #061226 in the hero, #0d2f5e in this band, #08234a in the footer.
 * Nobody names the difference, but it reads as three attempts at a
 * colour rather than one decision, and the gold sits far better
 * against the darkest of them.
 *
 * The mid navy is kept for the thin top bar and table header rows:
 * they are small, they sit against cream, and a little variation
 * there stops the palette going monotone.
 */
footer.site-footer{ background:#061226; }

/*
 * The call to action is a contained panel, not a full-width band.
 *
 * Run dark from the top of the call to action all the way through the
 * footer and the bottom third of the home page becomes one heavy slab —
 * and because both are the same navy now, closing the gap between them
 * only made that worse. Floating the panel on cream does two jobs at
 * once: it separates the invitation from the footer without a seam or a
 * dividing rule, and it cuts the amount of dark on the page roughly in
 * half. The panel also reads as something to act on rather than part of
 * the page furniture, which is the point of it.
 */
.cta-band{ background:transparent; padding:80px 0 88px; }
.cta-band > .container{
  background:#061226;
  border-radius:20px;
  padding:64px 40px;
  max-width:960px;
}
footer.site-footer{ margin-top:0; }

@media (max-width:640px){
  /* On a phone the inset would eat most of a narrow screen, so the
     panel keeps its rounded corners but sits closer to the edges. */
  .cta-band{ padding:48px 0 56px; }
  .cta-band > .container{ padding:40px 22px; border-radius:16px; }
}

/* ------------------------------------------------- the social rail */
.social-rail{
  position:fixed; right:20px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:12px; z-index:40;
}
.social-rail a{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--gold); color:#20180a;
  box-shadow:0 6px 18px rgba(8,35,74,.22);
  transition:background .15s, transform .15s;
}
.social-rail a:hover{ background:var(--navy-900); color:var(--gold); transform:translateY(-2px); }

/* Below this width the rail would sit on top of the page rather than
   beside it, and the footer icons cover the same ground. */
@media (max-width:1180px){ .social-rail{ display:none; } }

/* --------------------------------------------------- back to top */
/*
 * Sits below the social rail on wide screens, sharing its right-hand
 * margin so the two read as one column of controls rather than two
 * things that happen to be near each other. Deliberately quieter than
 * the rail: navy rather than gold, because getting back to the top is
 * housekeeping, not something we are inviting people to do.
 */
.to-top{
  position:fixed; right:20px; bottom:24px; z-index:45;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--navy-800); color:#fff;
  box-shadow:0 6px 18px rgba(8,35,74,.28);
  /* Out of the way until it is useful — see main.js. */
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, background .15s, visibility .18s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover, .to-top:focus{ background:var(--gold); color:#20180a; }
@media (max-width:640px){
  .to-top{ right:14px; bottom:16px; width:40px; height:40px; }
}
/* A reader who has asked for less movement gets no slide, just a fade. */
@media (prefers-reduced-motion:reduce){
  .to-top{ transition:opacity .18s ease, visibility .18s; transform:none; }
}

@media (max-width:880px){
  .hero{ padding:64px 0 72px; background-position:center; }
  .hero-inner{ grid-template-columns:1fr; gap:32px; }
  section{ padding:56px 0; }
  main > section:first-child:not(.hero){ padding-top:28px; }
}

/* ---------------------------------------------------- News carousel
   A scroll-snapped row rather than a slideshow. The browser does the
   scrolling and the touch handling; the script only moves it a page at
   a time and keeps the dots in step. With no JavaScript the controls
   stay hidden and the row is still scrollable, so no story is lost.

   Card widths are set here, and the script reads them back rather than
   being told separately — one definition of "how many fit", so the dots
   cannot disagree with what is on screen. */
.carousel { position: relative; }

.carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Room for the cards' shadow, which a clipped overflow would cut. */
  padding: 4px 4px 8px;
  margin: -4px -4px -8px;
  /* Firefox and the standard property; hidden because the dots do this job. */
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-item {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 48px) / 3);   /* three across, two 24px gaps */
  display: flex;
  flex-direction: column;
}
/* Equal heights, so moving through the row does not make it jump. */
.carousel-item .carousel-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}
.carousel-controls[hidden] { display: none; }

.carousel-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy-900);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.carousel-arrow:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-deep); }
.carousel-arrow:disabled { opacity: .35; cursor: default; }

.carousel-dots { display: flex; align-items: center; gap: 6px; }

/* The dot itself is small; the button around it is finger-sized. */
.carousel-dot {
  border: none;
  background: none;
  padding: 8px 5px;
  cursor: pointer;
  line-height: 0;
}
.carousel-dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--navy-900);
  opacity: .28;
  transition: opacity .15s, transform .15s;
}
.carousel-dot:hover::before { opacity: .5; }
/* Current page: gold and larger, so it is not colour alone that marks it. */
.carousel-dot[aria-selected="true"]::before {
  background: var(--gold);
  opacity: 1;
  transform: scale(1.5);
}
.carousel-dot:focus-visible::before { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 880px) {
  .carousel-item { flex-basis: calc((100% - 24px) / 2); }   /* two across */
}
@media (max-width: 640px) {
  .carousel-item { flex-basis: 100%; }                      /* one at a time */
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}