@font-face {
  font-family: "Oswald Variable";
  src: url("/fonts/oswald-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 700; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4 Variable";
  src: url("/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 900; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
:root {
  --ground: #0d211a;
  --panel: #16362a;
  --panel-2: #122c22;
  --line: rgba(239, 231, 214, 0.16);
  --cream: #efe7d6;
  --cream-dim: rgba(239, 231, 214, 0.6);
  --rally: #f0c330;
  --rally-ink: #171106;
  --display: "Oswald Variable", "Arial Narrow", sans-serif;
  --serif: "Source Serif 4 Variable", Georgia, serif;
  --mono: "IBM Plex Mono", Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ground);
  color: var(--cream);
  font-family: var(--serif);
  line-height: 1.55;
  font-size: 17px;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--rally); outline-offset: 3px; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ── ticker ── */
.ticker {
  background: var(--rally);
  color: var(--rally-ink);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 9px 0;
  border-bottom: 1px solid rgba(23, 17, 6, 0.25);
}
.ticker__track { display: inline-block; animation: tick 38s linear infinite; }
.ticker__track span { margin-right: 3.5em; }
.ticker__track b { font-weight: 700; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ── masthead ── */
header { border-bottom: 1px solid var(--line); }
/* Vertical padding only: the shorthand used in the concept reference reset the
   24px horizontal gutter this element inherits from .wrap, which left the crest
   and club name hanging 24px outside the content column at every width. */
.mast { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 20px; }
.mast__id { display: flex; align-items: center; gap: 16px; }
/* the crest SVG carries its own rally-yellow ring and cream field */
.roundel { width: 52px; height: 52px; flex: none; }
.roundel img { display: block; width: 100%; height: 100%; }
.mast__name {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: 0.045em; text-transform: uppercase; line-height: 1.02;
}
.mast__est { font-family: var(--mono); font-size: 11px; color: var(--cream-dim); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; }
nav { display: flex; gap: 26px; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 0.1em; }
/* nowrap keeps "The Club" on one line when the nav becomes a scrolling row */
nav a { padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
nav a:hover { border-bottom-color: var(--rally); }
nav a[aria-current="page"] { border-bottom-color: var(--rally); }
nav a.is-members { color: var(--rally); }
/* Narrow screens: the nav drops to its own full-width row rather than being
   squeezed to ~170px beside the club name, where three of the five links ended
   up behind a scroll. Padding keeps the focus ring clear of the scroll clip. */
@media (max-width: 760px) {
  .mast { flex-wrap: wrap; gap: 18px; }
  /* The padding gives the focus ring room inside the scroll box; the matching
     negative margin keeps the first link on the 24px column edge. */
  nav { overflow-x: auto; width: calc(100% + 8px); margin: 0 -4px; padding: 4px; }
}
/* Six items do not fit a 375px row at the desktop gap and tracking: Members was
   left half-cut at the scroll edge. Tightening the gap and the letter-spacing
   pulls the first five links inside the column, so nothing clips mid-word and
   only the tail of the row is reached by scrolling. */
@media (max-width: 420px) {
  nav { gap: 13px; font-size: 12px; letter-spacing: 0.05em; }
}
@media (max-width: 360px) {
  /* 8px rather than 10px is what puts the whole row inside a 320px screen:
     at 10px the row overran by 5px and clipped the tail of MEMBERS. */
  nav { gap: 8px; font-size: 11px; letter-spacing: 0.03em; }
}

/* ── lead story ── */
.lead { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .lead { grid-template-columns: 1fr; } }
.lead__photo { position: relative; min-height: 430px; background: var(--panel); }
.lead__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-cap {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  background: rgba(13, 33, 26, 0.85); color: var(--cream-dim);
  padding: 6px 12px;
}
.lead__story { padding: 44px 24px 44px 44px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px) { .lead__story { padding: 32px 24px; } }
.kicker {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: 0.18em; color: var(--rally);
  margin-bottom: 14px;
}
.lead__story h1 {
  font-size: clamp(30px, 4vw, 44px); line-height: 1.08; font-weight: 600;
  text-wrap: balance; margin-bottom: 18px;
}
.lead__story p { color: var(--cream-dim); max-width: 46ch; margin-bottom: 22px; }
.byline { font-family: var(--mono); font-size: 12px; color: var(--cream-dim); letter-spacing: 0.05em; }

/* ── story rail ── */
.rail { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .rail { grid-template-columns: 1fr; } }
.rail article { padding: 30px 28px 34px; border-left: 1px solid var(--line); }
.rail article:first-child { border-left: none; padding-left: 0; }
@media (max-width: 900px) { .rail article { border-left: none; padding-left: 0; border-top: 1px solid var(--line); } }
.rail h3 { font-size: 21px; line-height: 1.2; font-weight: 600; margin: 10px 0 10px; text-wrap: balance; }
.rail h3 a:hover { text-decoration: underline; text-decoration-color: var(--rally); text-underline-offset: 4px; }
.rail p { font-size: 15px; color: var(--cream-dim); }

/* ── events ── */
.events { padding: 56px 0 64px; border-bottom: 1px solid var(--line); }
.events__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 30px; }
.events__head h2, .paddock h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 38px); letter-spacing: 0.04em;
}
.events__all { font-family: var(--mono); font-size: 13px; color: var(--rally); letter-spacing: 0.05em; }
.events__all:hover { text-decoration: underline; text-underline-offset: 4px; }
.plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .plates { grid-template-columns: 1fr; } }
.plate {
  background: var(--rally); color: var(--rally-ink);
  border-radius: 10px;
  padding: 24px 24px 20px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: inset 0 0 0 2px rgba(23, 17, 6, 0.85), inset 0 0 0 5px var(--rally);
  transition: transform 0.15s ease;
}
.plate:hover { transform: translateY(-3px) rotate(-0.4deg); }
@media (prefers-reduced-motion: reduce) { .plate, .plate:hover { transition: none; transform: none; } }
.plate__date { font-family: var(--display); font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: 0.01em; }
.plate__date small { font-size: 20px; font-weight: 700; letter-spacing: 0.08em; vertical-align: 6px; margin-left: 2px; }
.plate__name { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 18px; letter-spacing: 0.05em; margin-top: 10px; }
.plate__meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; opacity: 0.75; }

/* ── members teaser ── */
.paddock { background: var(--panel-2); border-bottom: 1px solid var(--line); }
.paddock .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 44px; padding-bottom: 44px; flex-wrap: wrap; }
.paddock p { color: var(--cream-dim); max-width: 52ch; margin-top: 10px; }
.btn {
  display: inline-block; background: var(--cream); color: var(--ground);
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 14px;
  padding: 14px 26px; border-radius: 4px; border: none; cursor: pointer;
}
.btn:hover { background: var(--rally); color: var(--rally-ink); }

/* ── footer ── */
footer { padding: 34px 0 44px; }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: baseline; }
footer p { font-family: var(--mono); font-size: 12px; color: var(--cream-dim); letter-spacing: 0.03em; }
footer a { text-decoration: underline; text-underline-offset: 3px; }

/* ── inner-page heading (new, not in concept) ── */
.page-title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 5vw, 56px); letter-spacing: 0.03em;
}

/* ── article body (new, not in concept) ── */
.prose { max-width: 65ch; font-size: 18px; }
.prose p { margin-bottom: 1.2em; color: var(--cream); }
.prose ol, .prose ul { margin: 0 0 1.2em 1.5em; }
.prose li { margin-bottom: 1em; padding-left: 4px; }
.prose li::marker { font-family: var(--mono); font-size: 15px; color: var(--rally); }
.prose strong { font-weight: 700; }
/* article photography */
.prose__figure { margin: 0 0 1.6em; }
.prose__figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.prose__figure figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--cream-dim); margin-top: 9px;
}

/* ── journal article and index (new, not in concept) ── */
.article { max-width: 860px; padding-top: 52px; padding-bottom: 60px; }
.article .page-title { margin-bottom: 16px; }
.article .byline { padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.article__back { margin-top: 34px; font-family: var(--mono); font-size: 13px; color: var(--rally); letter-spacing: 0.05em; }
.article__back a:hover { text-decoration: underline; text-underline-offset: 4px; }
.journal-index { padding-top: 52px; padding-bottom: 60px; }
.journal-index .page-title { margin-bottom: 12px; }
.journal-index__intro { color: var(--cream-dim); max-width: 58ch; margin-bottom: 26px; }
.journal-list article { padding: 28px 0; border-top: 1px solid var(--line); }
.journal-list h2 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; font-weight: 600; margin-bottom: 10px; text-wrap: balance; }
.journal-list h2 a:hover { text-decoration: underline; text-decoration-color: var(--rally); text-underline-offset: 4px; }
.journal-list p { color: var(--cream-dim); max-width: 62ch; margin-bottom: 12px; }

/* ── inner pages: events, the club, join, members (new, not in concept) ── */
.page { padding-top: 52px; padding-bottom: 60px; }
.page--narrow { max-width: 860px; }
.page .page-title { margin-bottom: 12px; }
.page__intro { color: var(--cream-dim); max-width: 58ch; margin-bottom: 30px; }
/* wide photo band under a page title, same treatment as the homepage lead */
.page__photo {
  /* width must be definite: with width auto, the min-height floor drives the
     aspect ratio backwards and inflates the box to 397px, overflowing the
     column on narrow screens. */
  position: relative; width: 100%; aspect-ratio: 21 / 9; min-height: 170px;
  background: var(--panel); margin: 22px 0 28px;
}
.page__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.page__note { font-family: var(--mono); font-size: 12px; color: var(--cream-dim); letter-spacing: 0.03em; margin-top: 26px; max-width: 62ch; }
.inline-link { color: var(--rally); text-decoration: underline; text-underline-offset: 3px; }

/* events page: one plate per row at every width */
.plates--full { grid-template-columns: 1fr; gap: 14px; }
.plate--row {
  display: grid; grid-template-columns: minmax(250px, 350px) 1fr;
  align-items: center; gap: 24px; padding: 20px 26px;
}
.plate--row:hover { transform: none; }
.plate__date--long {
  font-size: clamp(18px, 2.2vw, 23px); font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; line-height: 1.1; white-space: nowrap;
}
.plate__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.plate--row .plate__name { margin-top: 0; }
@media (max-width: 640px) {
  .plate--row { grid-template-columns: 1fr; gap: 8px; }
}

/* the club: sections and committee list */
.club-section { padding: 30px 0; border-top: 1px solid var(--line); }
.club-section:first-of-type { margin-top: 18px; }
.club-section h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 2.6vw, 26px); letter-spacing: 0.06em; margin-bottom: 16px;
}
.club-section__intro { color: var(--cream-dim); max-width: 58ch; margin-bottom: 20px; }
.committee { display: grid; grid-template-columns: max-content 1fr; gap: 10px 32px; align-items: baseline; }
.committee dt {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cream-dim);
}
.committee dd { font-family: var(--serif); font-size: 18px; }

/* forms: join and members sign in */
.form { max-width: 460px; margin-top: 30px; }
.form__field { margin-bottom: 18px; }
.form label {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim);
  margin-bottom: 7px;
}
.form input, .form textarea {
  width: 100%; background: var(--panel-2); color: var(--cream);
  border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--serif); font-size: 17px; padding: 11px 13px;
}
.form textarea { resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: rgba(239, 231, 214, 0.38); }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--rally); outline-offset: 2px; }
.btn--block { display: block; width: 100%; margin-top: 4px; }

/* join: static thank-you panel */
.thanks {
  background: var(--cream); color: var(--ground);
  border-radius: 6px; padding: 26px 28px; margin-top: 30px; max-width: 460px;
}
.thanks p { font-size: 18px; }
.thanks:focus-visible { outline: 2px solid var(--rally); outline-offset: 3px; }

/* members: the sign-in panel */
.page--centred { text-align: center; }
.page--centred .page-title { margin-bottom: 26px; }
.signin {
  max-width: 420px; margin: 0 auto; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 30px 30px 32px;
}
/* mono kicker here, not the display face the homepage kickers use */
.signin .kicker { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; margin-bottom: 4px; }
.signin .form { margin-top: 18px; max-width: none; }
.signin__demo {
  color: var(--rally); font-family: var(--mono); font-size: 13px;
  line-height: 1.5; letter-spacing: 0.02em; margin-top: 20px;
}
.signin__note {
  font-family: var(--mono); font-size: 12px; color: var(--cream-dim);
  letter-spacing: 0.04em; margin: 22px auto 0; max-width: 46ch;
}

/* ── gallery: a plain responsive grid, three up at full width ── */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 22px; margin-top: 4px; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .gallery { grid-template-columns: 1fr; } }
/* The source photographs are three different shapes; a common ratio with cover
   keeps the rows level without cropping anything important out of frame. */
.gallery__item img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; background: var(--panel); border: 1px solid var(--line);
}
.gallery__item figcaption { display: block; margin-top: 11px; }
.gallery__text {
  display: block; font-family: var(--mono); font-size: 13px;
  line-height: 1.5; letter-spacing: 0.01em; color: var(--cream);
}
.gallery__credit {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cream-dim); margin-top: 7px;
}

/* ── 404 ── */
.notfound { padding-top: 70px; padding-bottom: 90px; max-width: 640px; }
.notfound p { color: var(--cream-dim); margin-top: 14px; }
.notfound__links {
  display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; color: var(--rally);
}