/* The Friendship Awards: black and gold.
 *
 * One stylesheet, no build step, no CDN, and ONE typeface.
 *
 * Type: Georgia, and nothing else. There was a display stack here (Didot,
 * Bodoni 72, Hoefler Text, ...) and it was visibly mixing faces on the page,
 * because a multi-family stack resolves PER ELEMENT and per weight: Didot has
 * no bold italic and Bodoni 72 ships its weights as separate families, so a
 * heading landed on Didot while a bold or italicised neighbour fell through to
 * the next name in the list. Georgia is one family with real regular, bold,
 * italic and bold italic files on every platform that has it, so no weight of
 * it can fall through to a different face. It is declared once, as --font, and
 * every rule that sets a family references that variable. There is no second
 * stack, and no web font is fetched, so the page renders in its intended voice
 * offline and costs the visitor nothing.
 *
 * Letter-spacing is not set ad hoc either: the uppercase treatments draw from
 * three tracking steps (--track-wide, --track, --track-tight) so the small caps
 * across the masthead, labels, buttons, tables and tags read as one system.
 *
 * The gold is #c9a227, warm and slightly antiqued rather than brassy, with a
 * lighter step for headings on dark ground and a deeper one for rules and
 * borders. Nothing else is coloured: the restraint is the formality.
 */

:root {
  --ink: #0b0b0d;            /* near black, the ground */
  --ink-raised: #131318;     /* a panel lifted off the ground */
  --ink-line: #23232b;       /* a hairline that is not quite gold */
  --gold: #c9a227;           /* the accent */
  --gold-light: #e3c977;     /* headings and hovers */
  --gold-deep: #8a6f1b;      /* rules, borders, quiet edges */
  --gold-veil: rgba(201, 162, 39, 0.26);
  --text: #e9e5db;           /* warm off white, easier than pure white on black */
  --text-muted: #a8a294;
  --danger: #d98b7a;

  /* The one family. Nothing else in this file may name a typeface. */
  --font: Georgia, serif;

  /* The three tracking steps for uppercase treatments, widest to tightest. */
  --track-wide: 0.34em;   /* the masthead mark and section eyebrows */
  --track: 0.22em;        /* labels, buttons, table headings, stat captions */
  --track-tight: 0.14em;  /* tags and the small button */

  --measure: 34rem;
  --page: 62rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Form controls default to the platform sans and code elements to its mono, so
   every one of them is named here rather than left to the browser. This is the
   rule that stops a stray face appearing on a page nobody re-checked. */
body,
input,
select,
textarea,
button,
code,
pre,
kbd,
samp {
  font-family: var(--font);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.7;
  /* A very slow radial lift behind the fold, so the black is not flat. */
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 162, 39, 0.10), transparent 70%);
  background-repeat: no-repeat;
}

/* ---------- structure ---------- */

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.75rem 0 1.5rem;
  border-bottom: 1px solid var(--gold-veil);
}

.masthead__mark {
  font-family: var(--font);
  font-size: 1rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}

.masthead__mark:hover { color: var(--gold-light); }

.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: baseline;
  font-size: 0.8125rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.masthead__nav a,
.masthead__nav button {
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.masthead__nav a:hover,
.masthead__nav button:hover { color: var(--gold-light); }

main { padding: 3.5rem 0 5rem; }

.colophon {
  border-top: 1px solid var(--gold-veil);
  padding: 2rem 0 3rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* ---------- the hero ---------- */

.hero { text-align: center; padding: 2rem 0 1rem; }

.hero__crest { margin: 0 auto 2.5rem; display: block; }

.eyebrow {
  margin: 0 0 1.25rem;
  font-size: 0.75rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gold);
}

.hero__title {
  margin: 0 0 1.5rem;
  font-family: var(--font);
  font-weight: normal;
  font-size: clamp(2.75rem, 9vw, 5.25rem);
  line-height: 1.02;
  color: var(--gold-light);
}

.hero__tagline {
  margin: 0 auto 1.1rem;
  max-width: 32rem;
  font-family: var(--font);
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--text);
}

/* The honest line. Quieter than the tagline and set in italic, so it reads as
   a formal subtitle rather than as an aside, and the page never winks. */
.hero__aka {
  margin: 0 auto 2.5rem;
  max-width: 30rem;
  font-family: var(--font);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* The rule between the title and the particulars: a hairline with a small
   gold lozenge at its centre. */
.rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 22rem;
  margin: 2.5rem auto;
  color: var(--gold-deep);
}

.rule::before, .rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-deep), transparent);
}

.rule__mark {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--gold);
}

/* ---------- the particulars (date, venue) ---------- */

.particulars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 4rem;
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
  text-align: center;
}

.particulars__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold);
}

.particulars__value {
  font-family: var(--font);
  font-size: 1.25rem;
  color: var(--text);
}

.particulars__value--pending { color: var(--text-muted); font-style: italic; }

/* ---------- prose ---------- */

.prose {
  max-width: var(--measure);
  margin: 0 auto;
}

.prose p { margin: 0 0 1.5rem; }

.prose p:last-child { margin-bottom: 0; }

.lede {
  font-family: var(--font);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text);
}

h1, h2, h3 {
  font-family: var(--font);
  font-weight: normal;
  color: var(--gold-light);
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 1.5rem; }
h2 { font-size: 1.75rem; margin: 3rem 0 1.25rem; }
h3 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }

a { color: var(--gold-light); text-decoration-color: var(--gold-deep); }
a:hover { color: var(--gold); }

/* ---------- a taste of the programme ---------- */

/* The category preview. A list and nothing else: two even columns of hairline
   rules on the wide view, one column on a phone. No cards, no icons. */

.honours {
  max-width: 48rem;
  margin: 4rem auto 0;
  text-align: center;
}

.honours__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.honours__list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--text);
}

.honours__note {
  margin: 2rem 0 0;
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* The rotator: one category at a time, centred and set noticeably larger than
   the surrounding copy, gold on the near black. Hidden until the script reveals
   it, so with JavaScript off nothing empty is shown and the full list above
   stands in. */
.honours__rotator {
  display: none;
  margin: 0.5rem auto 0;
  min-height: 2.6em;            /* holds the height across a two-line category so nothing jumps */
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font);
  font-size: 2rem;
  line-height: 1.3;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* When the script runs it adds this class to the section: the full list is
   taken out of the visual flow (kept in the page for assistive tech) and the
   rotator becomes the visible, focal element. */
.honours--rotating .honours__list {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.honours--rotating .honours__rotator {
  display: flex;
}

@media (max-width: 40rem) {
  .honours__rotator { font-size: 1.6rem; }
}

/* ---------- buttons and forms ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
  margin: 2.5rem 0 0;
}

.button {
  display: inline-block;
  padding: 1rem 2.5rem;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: bold;
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.button:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--ink); }

.button--quiet {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold-deep);
}

.button--quiet:hover { background: transparent; color: var(--gold-light); border-color: var(--gold); }

.button--small { padding: 0.55rem 1.25rem; font-size: 0.6875rem; letter-spacing: var(--track-tight); }

.form {
  max-width: var(--measure);
  margin: 0 auto;
}

.form--panel {
  background: var(--ink-raised);
  border: 1px solid var(--gold-veil);
  padding: 2.5rem;
}

.field { margin: 0 0 1.75rem; }

.field label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.6875rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold);
}

.field__hint {
  display: block;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  letter-spacing: normal;
  text-transform: none;
}

/* The twelve months as ticks. A fieldset so the group has one legend, and a
   grid so twelve options read as a compact block rather than a wall: three
   columns inside the form panel, folding to two and then one as it narrows. */
.field--months {
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.field--months legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-family: var(--font);
  font-size: 0.6875rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold);
}

.months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.6rem 1.25rem;
}

.field--months .months__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.9375rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  cursor: pointer;
}

.field--months input[type="checkbox"] {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  accent-color: var(--gold);
}

input[type="email"],
input[type="text"],
select,
textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--ink);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
}

textarea { min-height: 6rem; resize: vertical; }

input:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep);
}

.notice {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--gold);
  background: rgba(201, 162, 39, 0.07);
  font-size: 0.9375rem;
}

.notice--problem { border-left-color: var(--danger); background: rgba(217, 139, 122, 0.08); }

.notice ul { margin: 0; padding-left: 1.25rem; }

/* ---------- the inline sign-in box on the landing ---------- */
/* One field and one button, directly below the particulars. Sign in and joining
   the list are the same single action here. */
.signin-inline {
  max-width: 30rem;
  margin: 2.5rem auto 0;
  text-align: left;
}

.signin-inline__label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.6875rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold);
}

.signin-inline__row {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}

.signin-inline__input { flex: 1 1 auto; }

.signin-inline__row .button { flex: none; white-space: nowrap; }

@media (max-width: 30rem) {
  .signin-inline__row { flex-direction: column; }
  .signin-inline__row .button { width: 100%; }
}

/* ---------- quiet, secondary text ---------- */

.muted { color: var(--text-muted); }

/* ---------- a standalone message page ---------- */

.message {
  max-width: var(--measure);
  margin: 4rem auto;
  text-align: center;
}

.message h1 { margin-bottom: 1.25rem; }

/* ---------- responsive ---------- */

@media (max-width: 40rem) {
  main { padding: 2.5rem 0 3.5rem; }
  .form--panel { padding: 1.5rem; }
  .particulars { gap: 2rem; }
  .masthead { padding: 1.25rem 0 1rem; }
  .honours__list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   The self-signup form: the honeypot, and a little breathing room for the
   captcha. The honeypot is a real input moved far off-screen (never
   display:none, which some bots skip); a human never sees it, and any request
   that fills it is refused. Kept in the stylesheet rather than an inline style
   so the strict Content-Security-Policy needs no widening for it.
   --------------------------------------------------------------------------- */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.captcha {
  margin: 1.5rem 0 0.5rem;
}

/* ---------------------------------------------------------------------------
   The attendance question: its own box at the top of the details form, with a
   yes/no toggle in place of two radio buttons. Three states are preserved:
   No selected, Yes selected, or neither (a true 'not answered', the initial
   state, never a false default).
   --------------------------------------------------------------------------- */
.field--attend {
  margin: 0 0 1.75rem;
  padding: 1.25rem 1.5rem 1.4rem;
  border: 1px solid var(--gold-veil);
  background: var(--ink);
  min-width: 0;
}

.field--attend legend {
  padding: 0 0.5rem;
  margin: 0;
  font-family: var(--font);
  font-size: 0.6875rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold);
}

.toggle {
  display: inline-flex;
  margin: 0.35rem 0 0;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  overflow: hidden;
  background: var(--ink);
}

/* The radios drive the toggle but are visually removed; the labels are the
   control. Kept in the accessibility tree and keyboard-operable. */
.toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.toggle__option {
  padding: 0.5rem 1.7rem;
  margin: 0;
  font-family: var(--font);
  font-size: 0.8125rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, color 120ms ease;
}

.toggle__option:nth-of-type(2) { border-left: 1px solid var(--gold-deep); }

.toggle__input:checked + .toggle__option { background: var(--gold); color: var(--ink); }

.toggle__input:focus-visible + .toggle__option {
  outline: 2px solid var(--gold-light);
  outline-offset: -2px;
}

/* ---------------------------------------------------------------------------
   The profile page: the avatar (a circular medallion), its caption, and the
   upload control. An uploaded photo or a Gravatar fills the medallion with
   object-fit: cover, so any aspect ratio reads as a clean square; the monogram
   fallback is drawn in gold on the near black.
   --------------------------------------------------------------------------- */
.profile { max-width: var(--measure); margin: 0 auto; text-align: center; }

.avatar {
  width: 12rem;
  height: 12rem;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-raised);
}

.avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.avatar__monogram {
  font-family: var(--font);
  font-size: 4.5rem;
  line-height: 1;
  letter-spacing: var(--track-tight);
  color: var(--gold-light);
}

.profile__caption { margin: 0 auto 2rem; max-width: 28rem; font-size: 0.9375rem; }

/* Each panel on the profile page (the photograph, where in the world). Left
   aligned inside a centred column, and spaced so two panels read as two
   separate questions rather than one long form. */
.profile__section { text-align: left; margin: 0 auto 2rem; }

.profile__section .field:last-of-type { margin-bottom: 0; }

/* The country selector. Sized and coloured like every other control; the arrow
   is drawn as an inline SVG data URI so no image is fetched and the strict
   policy needs no widening. */
select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23c9a227' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem auto;
  cursor: pointer;
}

select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep);
}

/* The dark ground does not reach a native option list on every platform, so the
   options are coloured explicitly rather than left half themed. */
select option { background: var(--ink-raised); color: var(--text); }

input[type="file"] {
  width: 100%;
  padding: 0.6rem 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9375rem;
}

input[type="file"]::file-selector-button {
  margin-right: 1rem;
  padding: 0.55rem 1.25rem;
  border: 1px solid var(--gold-deep);
  background: transparent;
  color: var(--gold);
  font-family: var(--font);
  font-size: 0.6875rem;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover { border-color: var(--gold); color: var(--gold-light); }