/* ==========================================================================
   Guyanese Nurses Association of America, Inc.
   Design system — navy emblem blue, heritage brass, warm paper.
   Signature device: "the shoreline" — a hairline rule anchored at Brooklyn
   and Georgetown, the two shores this association has served since 1970.
   ========================================================================== */

:root {
  /* Colour ---------------------------------------------------------------- */
  --navy:        #0F2C57;   /* drawn from the association emblem */
  --navy-deep:   #081A34;   /* darkest panels, footer */
  --navy-mid:    #1B4682;
  --navy-tint:   #E7EDF6;
  --navy-line:   rgba(15, 44, 87, .14);

  --brass:       #B4842B;   /* heritage accent — rules, nodes, small marks */
  --brass-lit:   #D9A63C;   /* on dark grounds */
  --brass-soft:  #F0DCB0;

  --paper:       #FCF8F1;   /* warm page ground */
  --sand:        #F2E7D6;   /* banded relief */
  --white:       #FFFFFF;

  --ink:         #131F36;
  --muted:       #5B6880;
  --muted-dark:  rgba(255, 255, 255, .72);

  /* Type ------------------------------------------------------------------ */
  --serif:  "Newsreader", Georgia, "Times New Roman", serif;
  --sans:   "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:   "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Metrics --------------------------------------------------------------- */
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;

  --shadow-sm: 0 2px 8px rgba(8, 26, 52, .06);
  --shadow-md: 0 18px 44px rgba(8, 26, 52, .12);
  --shadow-lg: 0 36px 80px rgba(8, 26, 52, .22);

  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Text size. Everything on the site is sized in rem, so this one number
     scales the whole page. Visitors change it with the control in the top bar
     and the choice is remembered; 1 is the site's own slightly-enlarged
     baseline, not the browser's 16px default. */
  --text-scale: 1;
  --header-h: 4.75rem;
}

html { font-size: calc(110% * var(--text-scale)); }

/* ==========================================================================
   Base
   ========================================================================== */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.25rem); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }

:focus-visible {
  outline: 3px solid var(--brass-lit);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: var(--white);
  padding: .8rem 1.2rem; font-weight: 600;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: clamp(4rem, 8vw, 7rem); }
.band--tight { padding-block: clamp(2.75rem, 5vw, 4rem); }
.band--sand { background: var(--sand); }
.band--tint { background: var(--navy-tint); }
.band--white { background: var(--white); }

.band--navy {
  background: var(--navy);
  color: var(--white);
}
.band--navy h1, .band--navy h2, .band--navy h3 { color: var(--white); }
.band--navy p { color: var(--muted-dark); }

.band--deep { background: var(--navy-deep); color: var(--white); }
.band--deep h2, .band--deep h3 { color: var(--white); }
.band--deep p { color: var(--muted-dark); }

/* Eyebrow — a small typed label. Used to name a section, never to decorate. */
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.1rem;
}
.band--navy .eyebrow,
.band--deep .eyebrow { color: var(--brass-lit); }

.lede {
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.band--navy .lede, .band--deep .lede { color: var(--muted-dark); }

.head { max-width: 68ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .lede { margin-inline: auto; }

/* ==========================================================================
   Signature: the shoreline
   A hairline anchored at the two places this association serves.
   Full scale in the hero; reduced to a divider elsewhere; turned vertical
   on the history page, where the nodes carry years.
   ========================================================================== */

.shoreline {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-lit);
  white-space: nowrap;
}

.shoreline__track {
  position: relative;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    var(--brass) 0%, rgba(217, 166, 60, .35) 50%, var(--brass) 100%);
}
.shoreline__track::before,
.shoreline__track::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--brass-lit);
}
.shoreline__track::before { left: 0; }
.shoreline__track::after  { right: 0; }

/* The traveling mark — one nurse crossing, once every twelve seconds. */
.shoreline__mark {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(217, 166, 60, .25);
  animation: cross 12s var(--ease) infinite;
}
@keyframes cross {
  0%, 8%    { left: 0;    opacity: 0; }
  14%       { opacity: 1; }
  50%       { left: 100%; opacity: 1; }
  56%, 100% { left: 100%; opacity: 0; }
}

/* Reduced form: section divider */
.rule {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.4rem;
}
.rule::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brass);
  flex: none;
}
.rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--navy-line);
}
.band--navy .rule::after,
.band--deep .rule::after { background: rgba(255, 255, 255, .18); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--brass {
  background: var(--brass);
  color: var(--white);
  border-color: var(--brass);
}
.btn--brass:hover { background: #9E7223; border-color: #9E7223; box-shadow: var(--shadow-sm); }

.btn--navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.btn--navy:hover { background: var(--navy-deep); border-color: var(--navy-deep); }

.btn--outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy-line);
}
.btn--outline:hover { border-color: var(--navy); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .32);
}
.btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, .07); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* ==========================================================================
   Utility bar — text size
   Sits above the masthead and scrolls away with the page, so the sticky
   header keeps the top of the screen for navigation.
   ========================================================================== */

.utility {
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.utility__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .7rem;
  padding-block: .4rem;
}
.utility__label {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.sizer { display: flex; gap: .25rem; }

.sizer__btn {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  padding: .3rem .6rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  transition: color .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease);
}
/* The glyph previews the size it sets. */
.sizer__btn i {
  font-style: normal;
  font-family: var(--serif);
  line-height: 1;
}
.sizer__btn:nth-child(1) i { font-size: .82rem; }
.sizer__btn:nth-child(2) i { font-size: 1rem; }
.sizer__btn:nth-child(3) i { font-size: 1.2rem; }

.sizer__btn:hover { color: var(--white); background: rgba(255, 255, 255, .07); }
.sizer__btn[aria-pressed="true"] {
  color: var(--navy-deep);
  background: var(--brass-lit);
  border-color: var(--brass-lit);
}

@media (max-width: 620px) {
  .utility__inner { justify-content: center; gap: .5rem; }
  .utility__label { display: none; }
  .sizer__btn { padding: .35rem .7rem; }
}

@media print { .utility { display: none; } }

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.masthead__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: .5rem;
  gap: 1.5rem;
  min-height: var(--header-h);
  padding-block: .5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--white);
  margin-right: auto;
}
.brand img {
  width: 2.7rem; height: 2.7rem;
  border-radius: 50%;
  background: var(--white);
  flex: none;
}
.brand__name {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand__sub {
  display: block;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--brass-lit);
  margin-top: .18rem;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 1.3vw, 1.25rem);
}
.nav a {
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, .82);
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav a:hover { color: var(--white); }
.nav a[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--brass-lit);
}
.nav .btn { border-bottom: none; }
.nav .btn:hover { border-bottom: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 18px; height: 2px;
  background: var(--white);
  transform: translateX(-50%);
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { left: 0; transform: translateY(-6px); }
.nav-toggle span::after  { left: 0; transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 3.5rem);
}

/* The emblem, enlarged and set into the ground as a watermark. */
.hero::after {
  content: "";
  position: absolute;
  right: -8%;
  top: 50%;
  width: min(46vw, 560px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1px solid rgba(217, 166, 60, .16);
  border-radius: 50%;
  box-shadow: inset 0 0 0 24px rgba(217, 166, 60, .05),
              inset 0 0 0 25px rgba(217, 166, 60, .12);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

.hero h1 { color: var(--white); }
.hero h1 em {
  font-style: italic;
  color: var(--brass-lit);
}

.hero__lede {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  color: rgba(255, 255, 255, .78);
  max-width: 46ch;
  margin-top: 1.6rem;
}

.hero__aside {
  border-left: 1px solid rgba(255, 255, 255, .16);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
}
.hero__motto {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.35;
  color: var(--white);
}
.hero__motto span { display: block; }
.hero__motto span + span { color: rgba(255, 255, 255, .55); }
.hero__motto span + span + span { color: rgba(255, 255, 255, .34); }
.hero__since {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-lit);
  margin-top: 1.5rem;
}

.hero .shoreline { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */

.pagehead {
  background: var(--navy);
  color: var(--white);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 3.5rem);
}
.pagehead h1 { color: var(--white); font-size: clamp(2.2rem, 5vw, 3.6rem); }
.pagehead .lede { margin-top: 1.3rem; color: rgba(255, 255, 255, .76); }

.crumb {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 1.1rem;
}
.crumb a { color: var(--brass-lit); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ==========================================================================
   Statement — the mission, set at reading scale
   ========================================================================== */

.statement {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.55rem);
  line-height: 1.28;
  letter-spacing: -.015em;
  max-width: 22ch;
  margin: 0;
}
.statement--wide { max-width: 30ch; }
.statement b { font-weight: 500; color: var(--brass); }
.band--navy .statement b, .band--deep .statement b { color: var(--brass-lit); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split--lean { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

/* ==========================================================================
   Cards & grids
   ========================================================================== */

.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--muted); font-size: .96rem; margin-bottom: 0; }

a.card { text-decoration: none; display: block; }
a.card:hover,
.card--lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brass-soft);
}

.card__mark {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy-tint);
  color: var(--navy);
  margin-bottom: 1.1rem;
}
.card__mark svg { width: 20px; height: 20px; }

/* Filled navy card — singles out one item in a row of white cards. */
.card--navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.card--navy h3 { color: var(--white); }
.card--navy p { color: rgba(255, 255, 255, .76); }
.card--navy .card__tag { color: var(--brass-lit); }
a.card--navy:hover { border-color: var(--brass-lit); }

/* Card set on a navy ground */
.card--onnavy {
  background: transparent;
  border-color: rgba(255, 255, 255, .2);
  color: var(--white);
}
.card--onnavy h3 { color: var(--white); }
.card--onnavy p { color: rgba(255, 255, 255, .68); }
.card--onnavy:hover { border-color: var(--brass-lit); box-shadow: none; }

.card__tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .7rem;
}

/* ==========================================================================
   People
   ========================================================================== */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
}

.person__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--navy-tint);
  margin-bottom: .9rem;
}
.person__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform .5s var(--ease);
}
.person:hover .person__frame img { transform: scale(1.04); }

/* Fallback tile for an officer whose photograph we don't hold */
.person__initials {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--brass-lit);
  font-family: var(--serif);
  font-size: 2.2rem;
  letter-spacing: .04em;
}

.person__name {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.25;
  margin: 0 0 .25rem;
}
.person__role {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}

/* ==========================================================================
   President's welcome
   ========================================================================== */

.welcome {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.welcome__portrait {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-md);
}
.welcome__portrait img { width: 100%; height: 100%; object-fit: cover; }

.signoff {
  margin-top: 1.8rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--navy-line);
}
.band--navy .signoff, .band--deep .signoff { border-top-color: rgba(255, 255, 255, .18); }
.signoff__name {
  font-family: var(--serif);
  font-size: 1.2rem;
  display: block;
}
.signoff__title {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brass);
}
.band--navy .signoff__title, .band--deep .signoff__title { color: var(--brass-lit); }

/* ==========================================================================
   Timeline — the shoreline turned vertical, nodes carrying years
   ========================================================================== */

.timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 clamp(2.25rem, 5vw, 3.5rem);
  list-style: none;
  border-left: 1px solid var(--navy-line);
}

.timeline > li { position: relative; padding-bottom: clamp(2rem, 4vw, 3rem); }
.timeline > li:last-child { padding-bottom: 0; }

.timeline > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(2.25rem, 5vw, 3.5rem) - 5.5px);
  top: .55rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--brass);
}

.timeline__year {
  display: block;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--brass);
  margin-bottom: .45rem;
}
.timeline__body { color: var(--muted); margin: 0; }

/* ==========================================================================
   Numbered steps — used only where the content really is a sequence
   ========================================================================== */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
  padding: clamp(1.25rem, 2.4vw, 1.8rem);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--brass);
  padding-top: .2rem;
}
.steps h3 { margin-bottom: .4rem; }
.steps p { color: var(--muted); font-size: .96rem; margin-bottom: 0; }

/* ==========================================================================
   Rate table — real figures, set in the mono face for alignment
   ========================================================================== */

.rates {
  width: 100%;
  border-collapse: collapse;
  font-size: .96rem;
  table-layout: fixed;   /* label column wraps instead of setting a hard min-width */
}
.rates td:first-child, .rates th:first-child { word-break: break-word; }
.rates caption {
  text-align: left;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  padding-bottom: .9rem;
}
.rates th,
.rates td {
  text-align: left;
  padding: .85rem 0;
  border-bottom: 1px solid var(--navy-line);
}
.rates th {
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.rates td:last-child,
.rates th:last-child {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.rates tbody tr:hover td { background: rgba(180, 132, 43, .05); }

/* ==========================================================================
   Fact strip
   ========================================================================== */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.fact__figure {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: 1;
  color: var(--brass-lit);
  display: block;
}
.band--sand .fact__figure,
.band--white .fact__figure,
.band--tint .fact__figure { color: var(--brass); }
.fact__label {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .7rem;
}
.band--navy .fact__label, .band--deep .fact__label { color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   Detail list (contact, support, event particulars)
   ========================================================================== */

.details { margin: 0; }
.details div + div { margin-top: 1.5rem; }
.details dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .4rem;
}
.details dd {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
}
.details a { color: inherit; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.band--navy .details dt, .band--deep .details dt { color: var(--brass-lit); }

/* ==========================================================================
   Notice — flags content the association still needs to supply
   ========================================================================== */

.notice {
  border: 1px dashed var(--brass);
  border-radius: var(--r-md);
  background: rgba(180, 132, 43, .06);
  padding: 1.25rem 1.5rem;
  font-size: .93rem;
  color: var(--muted);
}
.notice strong { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   Flyer / media
   ========================================================================== */

.media {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--navy-line);
  box-shadow: var(--shadow-sm);
  background: var(--white);
}

/* ==========================================================================
   Invitation — the printed flyer, shown as the artefact it is
   ========================================================================== */

.invite { margin: 0; }

.invite a {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.invite a:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.invite img {
  width: 100%;
  height: auto;
}
.invite figcaption {
  margin-top: .9rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .invite { max-width: 460px; margin-inline: auto; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .7);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .92rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
.footer h4 {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-lit);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: .6rem; }
.footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.footer__brand { display: flex; gap: .9rem; align-items: flex-start; }
.footer__brand img {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--white);
  flex: none;
}
.footer__motto {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-lit);
  margin-top: 1rem;
}

.footer__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .8rem;
  color: rgba(255, 255, 255, .48);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form { max-width: 780px; }

.form fieldset {
  border: none;
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  padding: 0;
}
.form legend {
  display: block;
  width: 100%;
  padding: 0 0 .7rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--navy-line);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
}
.form__hint {
  font-size: .92rem;
  color: var(--muted);
  margin: -.7rem 0 1.5rem;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem 1.1rem;
  margin-bottom: 1.1rem;
}
.field { grid-column: span 12; display: flex; flex-direction: column; }
.field--6 { grid-column: span 6; }
.field--4 { grid-column: span 4; }
.field--3 { grid-column: span 3; }
.field--2 { grid-column: span 2; }

.field label {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .45rem;
}
.field label .req { color: var(--brass); }

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-sm);
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
/* The native select arrow ignores our type, so it is replaced with one drawn
   in the brand's brass. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23B4842B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath 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: 12px 8px;
  cursor: pointer;
}
.field select:invalid { color: var(--muted); }

.field textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.55;
}

.field input:hover, .field select:hover, .field textarea:hover {
  border-color: var(--brass-soft);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(180, 132, 43, .18);
}
.field input:user-invalid { border-color: #A6382F; }

/* Radio groups set as pills — one tap target per option, no tiny circles. */
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; margin-bottom: 0; }
.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
/* A pill carries its option's real casing — "PhD", not "PHD" — so it must
   undo the uppercase treatment the surrounding field label sets. */
.choice span {
  display: block;
  padding: .6rem 1.05rem;
  background: var(--white);
  border: 1px solid var(--navy-line);
  border-radius: 100px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease);
}
.choice input:hover + span { border-color: var(--brass); }
.choice input:checked + span {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.choice input:focus-visible + span {
  outline: 3px solid var(--brass-lit);
  outline-offset: 2px;
}

/* Rate pills carry their price, so the choice and its cost are one decision. */
.choice--rate span b {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  color: var(--brass);
  margin-left: .45rem;
}
.choice--rate input:checked + span b { color: var(--brass-lit); }

/* File picker — the native control is unstyleable, so it is made invisible
   and laid over a button we can style. The real input still receives the
   click, so keyboard and screen-reader behaviour is untouched. */
.filepick {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  padding: 1rem;
  background: var(--white);
  border: 1px dashed var(--navy-line);
  border-radius: var(--r-md);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.filepick:hover { border-color: var(--brass); }
.filepick input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.filepick__btn {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.15rem;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-sm);
  font-size: .86rem;
  font-weight: 700;
  white-space: nowrap;
}
.filepick__name {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.filepick input:focus-visible + .filepick__btn {
  outline: 3px solid var(--brass-lit);
  outline-offset: 2px;
}
.filepick.is-set { border-style: solid; border-color: var(--brass); }
.filepick.is-set .filepick__name { color: var(--ink); }
.filepick.is-big { border-color: #A6382F; }

/* Bait for automated submissions. Kept out of sight and out of the tab order,
   but not display:none — some bots skip fields that are hidden that way. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: .5rem;
}
.form__note {
  font-size: .88rem;
  color: var(--muted);
  max-width: 42ch;
}

/* Eligibility criteria: conditions to satisfy, not a sequence, so they take
   marks rather than numbers. */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 1.02rem;
  line-height: 1.55;
}
.ticks li + li {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--navy-line);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--brass);
}
.ticks li + li::before { top: 1.37em; }
.band--navy .ticks li + li,
.band--deep .ticks li + li { border-top-color: rgba(255, 255, 255, .18); }

/* Membership roll — names only, set in columns like a printed register. */
.names {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 240px;
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
}
.names li {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.35;
  padding: .5rem 0;
  border-bottom: 1px dotted var(--navy-line);
  break-inside: avoid;
}

/* Secondary actions — keeping a copy is a separate job from sending. */
.form__aux {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--navy-line);
}
.form__aux-label {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: .4rem;
}
.form__aux .btn { padding: .7rem 1.2rem; }
.form__aux .form__hint {
  flex-basis: 100%;
  margin: .3rem 0 0;
  font-size: .88rem;
}
.form__aux .form__hint[hidden] { display: none; }

/* The printed sheet needs its own masthead; the site header is not printed. */
.print-head { display: none; }

/* Status region — speaks in the interface's voice, never apologises. */
.form__status {
  margin-top: 1.5rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-md);
  border: 1px solid var(--navy-line);
  background: var(--white);
  font-size: .95rem;
}
.form__status[hidden] { display: none; }
.form__status--ok { border-color: var(--brass); background: rgba(180, 132, 43, .08); }
.form__status--err { border-color: #A6382F; background: rgba(166, 56, 47, .07); }
.form__status h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.form__status p { margin-bottom: .8rem; color: var(--muted); }

.form__copy {
  width: 100%;
  min-height: 180px;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.55;
  resize: vertical;
  margin-bottom: .8rem;
}

@media (max-width: 720px) {
  .field--6, .field--4, .field--3, .field--2 { grid-column: span 12; }
  .field--3.field--keep, .field--2.field--keep { grid-column: span 6; }
}

/* ==========================================================================
   Gallery
   ========================================================================== */

/* Filter bar — album names carry their own counts, set in the utility face
   so the numbers align down the row. */
.gal-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 60;
  background: rgba(252, 248, 241, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--navy-line);
}
.gal-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding-block: .9rem;
  scrollbar-width: none;
}
.gal-bar__inner::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  flex: none;
  padding: .55rem 1rem;
  background: transparent;
  border: 1px solid var(--navy-line);
  border-radius: 100px;
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease);
}
.chip:hover { border-color: var(--brass); }
.chip__n {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--muted);
}
.chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.chip[aria-pressed="true"] .chip__n { color: var(--brass-lit); }

/* Masonry by columns — photographs keep their own proportions rather than
   being cropped square, which matters when the subject is people. */
.band--flush { padding-top: clamp(1.75rem, 3vw, 2.5rem); }

.gal-grid {
  columns: 4 240px;
  column-gap: clamp(.5rem, 1vw, .85rem);
}

.shot {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 clamp(.5rem, 1vw, .85rem);
  border: none;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--navy-tint);
  cursor: zoom-in;
  break-inside: avoid;
  position: relative;
  line-height: 0;
}
.shot img {
  width: 100%;
  height: auto;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 26, 52, .5), transparent 48%);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.shot:hover img, .shot:focus-visible img { transform: scale(1.045); }
.shot:hover::after, .shot:focus-visible::after { opacity: 1; }
.shot[hidden] { display: none; }

.gal-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.gal-count {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.gal-empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--muted);
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--navy-deep);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lb-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: var(--navy-deep);
  color: var(--white);
}
.lb-album {
  font-family: var(--serif);
  font-size: 1.05rem;
  margin-right: auto;
}
.lb-counter {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--brass-lit);
}

.lb-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  min-height: 0;
  overflow: hidden;
}
.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
}

.lb-btn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.lb-btn:hover { background: rgba(255, 255, 255, .16); border-color: var(--brass-lit); }
.lb-btn svg { width: 20px; height: 20px; }

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.lb-nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lb-nav--next { right: clamp(.5rem, 2vw, 1.5rem); }

.lb-foot {
  padding: 1rem clamp(1rem, 3vw, 2rem) 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

body.lb-open { overflow: hidden; }

@media (max-width: 900px) {
  .gal-bar__inner { flex-wrap: nowrap; overflow-x: auto; }
  .gal-grid { columns: 2 150px; }
}
@media (max-width: 620px) {
  .lb-nav { top: auto; bottom: 0; transform: none; }
  .lb-stage { padding-bottom: 4.5rem; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .09s; }
.reveal.d2 { transition-delay: .18s; }
.reveal.d3 { transition-delay: .27s; }
.reveal.d4 { transition-delay: .36s; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .nav a { font-size: .8rem; }
  .nav .btn { padding: .7rem 1rem; font-size: .82rem; }
}

@media (max-width: 1000px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy-deep);
    padding: 1rem 1.25rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    max-height: calc(100dvh - var(--header-h));
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease),
                visibility .22s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a {
    font-size: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
  }
  .nav a[aria-current="page"] { border-bottom-color: var(--brass-lit); }
  .nav a { min-width: 0; }
  /* At the largest text sizes the CTA must be free to wrap rather than force
     the drawer wider than the screen. */
  .nav .btn {
    justify-content: center;
    margin-top: 1.1rem;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__aside {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-left: 0;
    padding-top: 1.6rem;
  }
  .hero::after { display: none; }

  /* minmax(0,1fr) rather than 1fr: a single column of 1fr still lets a wide
   child (a rate table, a long address) push past the viewport at large text.
   Zero as the minimum forces the column to honour the screen instead. */
  .split, .split--lean, .welcome { grid-template-columns: minmax(0, 1fr); }
  .welcome__portrait { max-width: 340px; }

  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  /* Narrow screens have no room to hold the name on one line, and at the
     larger text sizes keeping it there would push the page sideways. */
  .brand__name, .brand__sub { white-space: normal; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .shoreline { font-size: .58rem; gap: .6rem; }
  .brand__name { font-size: .92rem; }
  .brand__sub { font-size: .58rem; }
  .statement { max-width: none; }
  .btn { width: 100%; justify-content: center; }
  .btn-row { flex-direction: column; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .shoreline__mark { display: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .masthead, .nav-toggle, .footer, .shoreline { display: none; }
  body { background: #fff; color: #000; }

  /* Scroll-reveal leaves anything not yet scrolled past at opacity 0. On
     paper there is no scrolling, so it must always be shown. */
  .reveal { opacity: 1 !important; transform: none !important; }

  /* Printing a filled-in form: everything except the form itself goes away,
     and the sheet gets its own letterhead. Triggered by the print buttons,
     which add .print-form to <body> for the duration of the dialog. */
  body.print-form main > section:not(.form-section) { display: none; }
  body.print-form .form-section { padding: 0; background: #fff; }
  body.print-form .wrap { max-width: none; padding-inline: 0; }
  body.print-form .head,
  body.print-form .form__actions,
  body.print-form .form__aux,
  body.print-form .form__status,
  body.print-form .honeypot { display: none; }

  body.print-form .print-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-bottom: .6rem;
    margin-bottom: 1.4rem;
    border-bottom: 2px solid var(--navy);
  }
  body.print-form .print-head img { width: 44px; height: 44px; }
  body.print-form .print-head strong {
    display: block;
    font-family: var(--serif);
    font-size: 1.1rem;
  }
  body.print-form .print-head span {
    display: block;
    font-size: .68rem;
    color: #444;
    margin-top: .15rem;
  }

  /* Only the chosen option is worth ink. */
  body.print-form .choice input:not(:checked) + span { display: none; }
  body.print-form .choice input:checked + span {
    background: #fff;
    color: #000;
    border-color: #666;
    font-weight: 700;
  }

  body.print-form fieldset { break-inside: avoid; margin-bottom: 1.2rem; }
  body.print-form legend { border-bottom-color: #999; color: #000; }
  body.print-form .field input {
    border: 1px solid #999;
    background: #fff;
    color: #000;
    padding: .45rem .5rem;
  }
  /* Tighter tracking on paper keeps a long caption on one line, so its
     required mark cannot be orphaned onto a line of its own. */
  body.print-form .field label { color: #333; letter-spacing: .05em; }
  body.print-form .form__hint { color: #444; }
}