/* Trumpington Polo Club, dressed as part of The Trumpington Group.

   The palette and type are lifted from trumpingtongroup.com rather than
   invented: Cormorant Garamond for anything read as prose, Jost for anything
   read as a label, warm cream paper and deep navy ink. Corners are square
   throughout because the group brand has no rounded edge anywhere.

   Held in one stylesheet rather than inline per page because these six pages
   are hand-written HTML with no build step, and the lockup has to be identical
   on every one of them. */

:root {
  --cream: #f5f0e8;
  --cream-deep: #ede6da;
  --paper: #fff;
  --navy: #1a2744;
  --navy-deep: #161e30;
  --slate: #4a5560;
  --stone: #e5e0d6;
  --stone-line: #c5bcb0;
  --danger: #9c3b2e;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Several component classes below set `display`, which would otherwise beat the
   user-agent rule for the `hidden` attribute and reveal panels the scripts mean
   to keep back until their data has loaded. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--slate);
  font: 400 1.125rem/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 .5rem;
}
h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: 1.75rem; }
p { margin: 0 0 1rem; }

/* Cormorant's old-style numerals sit at differing heights, so times, handicaps
   and references are set in Jost with tabular figures. */
.num {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

/* ── The group lockup ───────────────────────────────────────
   Name in letterspaced serif capitals over a descriptor ruled either side.
   Set as type rather than an image so it stays crisp, and so both the type and
   the hairlines inherit currentColor and work on navy as well as on cream. */

/* Colour is inherited so the lockup works on cream and on navy alike; each
   context below states which. */
.brand {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.brand .wordmark {
  display: block;
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}
.brand .descriptor {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .35rem;
  font: 400 .62rem/1 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
}
/* The tracking adds a trailing gap after the last letter; the small left inset
   keeps the descriptor optically centred between the rules. */
.brand .descriptor span { text-indent: .34em; }
.brand .descriptor::before,
.brand .descriptor::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .45;
}
.brand.lg .wordmark { font-size: clamp(1.9rem, 5vw, 3rem); }
.brand.lg .descriptor { margin-top: .6rem; font-size: .75rem; }

/* ── Layout ─────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}
.wrap-narrow { max-width: 52rem; }

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section-paper { background: var(--paper); }

/* Navy bands: heroes, closing calls to action and the footer. */
.dark { background: var(--navy); color: rgb(255 255 255 / 82%); }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark .brand, .site-footer .brand { color: #fff; }
.dark .eyebrow { color: rgb(255 255 255 / 70%); }
.dark .lead { color: rgb(255 255 255 / 85%); }
.dark hr { border-color: rgb(255 255 255 / 20%); }

/* Cream bar at the top of the inner pages. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1.25rem, 5vw, 2.5rem);
  border-bottom: 1px solid var(--stone-line);
  background: rgb(245 240 232 / 92%);
  backdrop-filter: blur(8px);
}
.topbar .brand { color: var(--navy); }
.topbar .back {
  font: 400 .69rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid var(--stone-line);
  padding-bottom: .2rem;
}
.topbar .back:hover { color: var(--navy); border-bottom-color: var(--navy); }

/* ── Type helpers ───────────────────────────────────────── */

/* The group's small tracked capitals, used above a heading to say what a thing is. */
.eyebrow {
  font: 400 .69rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 .9rem;
}
.lead {
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--slate);
}
.centred { text-align: center; }
.measure { max-width: 44rem; }
.centred .measure { margin-inline: auto; }

/* ── The outlined call to action used throughout the design ── */

.btn {
  display: inline-block;
  border: 1px solid rgb(26 39 68 / 50%);
  background: none;
  color: var(--navy);
  padding: 1rem 2rem;
  font: 400 .69rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.btn:hover { background: var(--navy); color: #fff; }
.dark .btn { border-color: rgb(255 255 255 / 70%); color: #fff; }
.dark .btn:hover { background: #fff; color: var(--navy); }
.btn-solid { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-solid:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.btn[disabled] { opacity: .5; cursor: wait; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.centred .actions { justify-content: center; }

/* ── Panels and notices ─────────────────────────────────── */

.panel {
  background: var(--paper);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 18px 50px rgb(26 39 68 / 10%);
}
.notice {
  border-left: 2px solid var(--navy);
  background: var(--cream-deep);
  padding: 1rem 1.25rem;
  margin: 1.75rem 0;
}
.notice strong { display: block; color: var(--navy); }
.error-box {
  display: none;
  border-left: 2px solid var(--danger);
  background: #f4e3e0;
  color: #7c2e23;
  padding: .9rem 1.1rem;
  margin: 0 0 1.25rem;
}
.fine-print {
  font-size: .95rem;
  color: var(--slate);
  margin-top: 1.5rem;
}

/* ── Forms ──────────────────────────────────────────────── */

fieldset { border: 0; padding: 0; margin: 0 0 2.75rem; }
legend {
  width: 100%;
  font: 300 1.75rem/1.2 var(--serif);
  color: var(--navy);
  padding: 0 0 .75rem;
  border-bottom: 1px solid var(--stone-line);
  margin-bottom: 1.5rem;
}
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.full { grid-column: 1 / -1; }

/* Labels are Jost rather than Cormorant, which is too light to be read
   confidently at this size. */
label {
  display: block;
  font: 500 .8rem/1.4 var(--sans);
  letter-spacing: .04em;
  color: var(--navy);
}
label span {
  display: block;
  margin-top: .2rem;
  font-weight: 400;
  color: var(--slate);
}
input, textarea, select {
  width: 100%;
  margin-top: .45rem;
  padding: .75rem .8rem;
  border: 1px solid var(--stone-line);
  border-radius: 0;
  background: var(--paper);
  color: var(--navy);
  font: 400 1rem/1.4 var(--serif);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}
textarea { min-height: 6.25rem; resize: vertical; }

.check {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: .65rem;
  margin: 1rem 0 0;
  font-weight: 400;
}
.check input { width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--navy); }
/* Consents and acknowledgements are full sentences rather than field labels, so
   they are set as prose. */
.check span { margin: 0; font: 400 1rem/1.5 var(--serif); color: var(--slate); }

/* ── Footer ─────────────────────────────────────────────── */

.site-footer { background: var(--navy); color: rgb(255 255 255 / 82%); }
.site-footer .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.site-footer a { text-decoration-color: rgb(255 255 255 / 35%); text-underline-offset: .25em; }
.site-footer a:hover { text-decoration-color: #fff; color: #fff; }
.site-footer .legal {
  border-top: 1px solid rgb(255 255 255 / 10%);
  background: var(--navy-deep);
}
.site-footer .legal .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  padding-block: 1.25rem;
  font: 400 .63rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 45%);
}

@media (max-width: 40rem) {
  .grid { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
  .topbar { flex-direction: column; align-items: flex-start; gap: .9rem; }
}