/* ===========================================================================
   ROMOTANA Gala 2026 — the invitation page
   ===========================================================================

   This page does not look like the rest of the site, on purpose. The site is a
   publication: warm paper, hairlines, one red accent, a grotesque for anything
   that signposts. An invitation to a black-tie evening at a club on Farragut
   Square is a different object — it is engraved, it is centered, it is navy and
   gold, and it says one thing at a time.

   So this stylesheet keeps the site's foundations (the tokens, the two
   typefaces, the form and button components, the toasts) and re-dresses them:

     1. The ground is navy, the sheet is cream, and the sheet carries a double
        gold rule the way a plate-printed card carries a border.
     2. The serif leads. Source Serif 4 sets every line meant to be read aloud —
        the title, the invitation line, the letter; Archivo is demoted to
        letterspaced small caps for labels, eyebrows and the form.
     3. Ornament is a hairline and a star, never a shadow or a gradient. The
        star rule is the flyer's, so the page and the poster are plainly the
        same evening.
     4. Everything is centered down to the letter, which is set ragged-right on
        a 34em measure because centered body copy cannot be read.

   The ticket tile is the one place this page behaves like an application, and
   even there it stays inside the frame: a navy panel on the cream sheet, the
   two rates as cards you choose between, and the people who are coming.
   =========================================================================== */

:root {
  --gala-navy:      #0a1f47;
  --gala-navy-deep: #061330;
  --gala-ink:       #16203a;
  --gala-ink-2:     #3d4760;
  --gala-paper:     #fbf8f1;
  --gala-paper-2:   #f3ecdd;
  --gala-gold:      #b8862b;
  --gala-gold-lit:  #d9ad53;
  --gala-gold-pale: #e9d9ae;
  --gala-rule:      #d8cdb4;
}

/* ------------------------------------------------------------ the ground -- */
body.gala {
  background: var(--gala-navy-deep);
  /* Two soft lights behind the sheet, so the navy is not a flat block. No
     image: this has to open on a phone in a hotel lobby. */
  background-image:
    radial-gradient(90rem 60rem at 50% -10rem, #16356f 0%, rgba(22, 53, 111, 0) 60%),
    radial-gradient(60rem 40rem at 10% 110%, #112a5c 0%, rgba(17, 42, 92, 0) 65%);
  background-attachment: fixed;
  color: var(--gala-ink);
  font-family: var(--serif);
}

/* ----------------------------------------------------------- the masthead -- */
/* The association's mark as a crest: centered, the wordmark it already
   carries left to do its own work, and only the long name set beneath it. */
.gala-mast {
  display: flex;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1rem clamp(1.25rem, 3vw, 2rem);
}
.gala-mast__brand {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.gala-mast__brand img {
  width: 104px;
  height: auto;
  /* The mark was drawn for paper: on navy its own white ground disappears, so
     it is lifted on a disc of light rather than left floating. */
  padding: 0.35rem 0.6rem;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 2px;
}
.gala-mast__brand strong { display: none; }
.gala-mast__brand em {
  display: block;
  max-width: 26rem;
  color: var(--gala-gold-pale);
  font-family: var(--sans);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.7;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- the sheet -- */
.gala-sheet {
  max-width: 60rem;
  margin: 0 auto clamp(2rem, 6vw, 4rem);
  background: var(--gala-paper);
  /* The plate border: a gold rule, a breath of paper, then a hairline. */
  border: 3px solid var(--gala-gold);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
              0 30px 80px rgba(3, 10, 26, 0.55);
}
.gala-sheet > section { padding-inline: clamp(1.5rem, 6vw, 5rem); }
.gala-sheet__inner { outline: 1px solid var(--gala-rule); outline-offset: -0.75rem; }

/* ------------------------------------------------------------- ornaments -- */
.gala-rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto;
  max-width: 34rem;
  color: var(--gala-gold);
}
.gala-rule::before, .gala-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gala-gold), transparent);
}
.gala-rule span { font-size: 0.8rem; letter-spacing: 0.3em; }

.gala-eyebrow {
  margin: 0;
  color: var(--gala-gold);
  font-family: var(--sans);
  font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- the invitation -- */
.gala-hero {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1rem, 2.5vw, 1.75rem);
  text-align: center;
}
.gala-hero__org {
  margin: 1.4rem auto 0;
  max-width: 30rem;
  color: var(--gala-ink-2);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.8;
}
/* The flyer's ribbon, in CSS: a gold band with a notch cut from each end. */
.gala-ribbon {
  display: inline-block;
  margin: 1.5rem 0 0.2rem;
  padding: 0.42rem 2.4rem;
  background: linear-gradient(180deg, #c89a3c, var(--gala-gold));
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.1rem) 50%, 100% 100%, 0 100%, 1.1rem 50%);
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.gala-hero h1 {
  margin: 0.5rem 0 0;
  color: var(--gala-navy);
  font-family: var(--serif);
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.gala-hero h1 .gala-year {
  display: block;
  margin-top: 0.1em;
  color: var(--gala-gold);
  font-size: 0.62em;
  font-style: italic;
  letter-spacing: 0;
}
.gala-invite-line {
  margin: 1.5rem auto 0;
  max-width: 32rem;
  color: var(--gala-ink-2);
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
  font-style: italic;
  line-height: 1.6;
}

/* the date, the hour, the room */
.gala-when {
  margin: 0 auto;
  max-width: 34rem;
}
.gala-when dt {
  color: var(--gala-gold);
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.gala-when dd {
  margin: 0.3rem 0 1.3rem;
  color: var(--gala-navy);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.35;
}
.gala-when dd small {
  display: block;
  margin-top: 0.25rem;
  color: var(--gala-ink-2);
  font-size: 0.78em;
}

/* ------------------------------------------------------------ the poster -- */
.gala-poster {
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
  max-width: 26rem;
}
.gala-poster img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gala-rule);
  box-shadow: 0 10px 30px rgba(10, 31, 71, 0.18);
}
.gala-poster { margin-bottom: 0.5rem; }
.gala-poster figcaption {
  margin-top: 0.6rem;
  color: var(--gala-ink-2);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- the letter -- */
.gala-letter { padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 5vw, 3.25rem); }
.gala-letter__sheet {
  margin: 0 auto;
  max-width: 36rem;
}
.gala-letter__head {
  margin-bottom: 1.6rem;
  text-align: center;
}
.gala-letter p {
  margin: 0 0 1.15rem;
  color: var(--gala-ink);
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  line-height: 1.75;
}
.gala-letter__body > p:first-child::first-letter {
  float: left;
  margin: 0.12em 0.14em 0 0;
  color: var(--gala-gold);
  font-size: 3.1em;
  font-weight: 700;
  line-height: 0.82;
}
.gala-letter__salutation { margin-bottom: 1.15rem; }
.gala-letter strong { color: var(--gala-navy); }
.gala-sign {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gala-rule);
}
.gala-sign__off { margin: 0 0 0.5rem; font-style: italic; color: var(--gala-ink-2); }
/* The signature sits on the paper, not in a box: no border, no background, and
   drawn at about half the width of the measure so it reads as a hand and not as
   a graphic. */
.gala-sign__hand {
  display: block;
  width: min(19rem, 64%);
  height: auto;
  margin: 0.2rem 0 -0.4rem -0.35rem;
}
.gala-sign__name {
  margin: 0;
  color: var(--gala-navy);
  font-size: 1.3rem;
  font-weight: 700;
}
.gala-sign__title {
  margin: 0.1rem 0 0;
  color: var(--gala-ink-2);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --------------------------------------------------------- the patronage -- */
.gala-patronage {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--gala-paper-2);
  border-block: 1px solid var(--gala-rule);
  text-align: center;
}
.gala-patronage h2 {
  margin: 0 0 0.9rem;
  color: var(--gala-gold);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.gala-patronage p {
  margin: 0 auto;
  max-width: 38rem;
  color: var(--gala-navy);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
  font-style: italic;
  line-height: 1.7;
}

/* ------------------------------------------------------------ the guests -- */
.gala-guests { padding-block: clamp(2rem, 5vw, 3rem); text-align: center; }
.gala-guests h2 {
  margin: 0.4rem 0 0.6rem;
  color: var(--gala-navy);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem);
  font-weight: 700;
}
.gala-guests__lead {
  margin: 0 auto 1.6rem;
  max-width: 32rem;
  color: var(--gala-ink-2);
  font-size: 1.05rem;
}
.gala-guests ul {
  display: grid;
  gap: 0.7rem 2.5rem;
  margin: 0 auto;
  padding: 0;
  max-width: 44rem;
  list-style: none;
  text-align: left;
}
@media (min-width: 46rem) { .gala-guests ul { grid-template-columns: 1fr 1fr; } }
.gala-guests li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--gala-ink);
  font-size: 1.02rem;
  line-height: 1.5;
}
.gala-guests li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--gala-gold);
  font-size: 0.75em;
}

/* ----------------------------------------------------------- the evening -- */
.gala-evening {
  padding-block: clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.gala-evening h2 {
  margin: 0.4rem 0 0.8rem;
  color: var(--gala-navy);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
}
.gala-evening p {
  margin: 0 auto 1rem;
  max-width: 36rem;
  color: var(--gala-ink-2);
  font-size: 1.05rem;
  line-height: 1.7;
}
.gala-evening__venue {
  margin: 0 auto;
  color: var(--gala-navy);
  font-size: 1.2rem;
  line-height: 1.5;
}
.gala-band {
  display: block;
  width: 100%;
  height: auto;
  border-top: 1px solid var(--gala-rule);
}

/* ------------------------------------------------------------- the tickets -- */
.gala-tickets {
  padding-block: clamp(2.25rem, 6vw, 3.5rem);
  background: var(--gala-navy);
  background-image: radial-gradient(60rem 30rem at 50% 0%, #163569 0%, rgba(22, 53, 105, 0) 70%);
  color: #fff;
}
.gala-tickets h2 {
  margin: 0.5rem 0 0.6rem;
  color: #fff;
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
  text-align: center;
}
.gala-tickets .gala-eyebrow,
.gala-tickets .gala-rule { color: var(--gala-gold-lit); }
.gala-tickets__lead {
  margin: 0 auto 2rem;
  max-width: 34rem;
  color: var(--gala-gold-pale);
  font-size: 1.05rem;
  line-height: 1.65;
  text-align: center;
}
.gala-tickets__lead a { color: #fff; }
.gala-tickets__lead p { margin: 0 0 0.6rem; }
.gala-tickets__lead p:last-child { margin-bottom: 0; }

/* A line of explanation inside a step, not a standfirst. */
.gala-step__note {
  margin: -0.3rem 0 1.1rem;
  color: var(--gala-gold-pale);
  font-size: 0.92rem;
  line-height: 1.6;
}
.gala-step__note--quiet {
  padding: 0.9rem 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--gala-gold);
  color: rgba(233, 217, 174, 0.85);
}

/* The required mark: the site's red is for the site's paper, not for navy. */
.gala-form .field__req { color: var(--gala-gold-lit); }

.gala-form { max-width: 42rem; margin: 0 auto; font-family: var(--sans); }

/* a step inside the tile */
.gala-step { margin-bottom: 2rem; }
.gala-step > h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  color: var(--gala-gold-lit);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.gala-step > h3 b {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--gala-gold);
  border-radius: 50%;
  color: var(--gala-gold-lit);
  font-size: 0.75rem;
  letter-spacing: 0;
}

/* the two rates, as cards */
.gala-choices { display: grid; gap: 0.85rem; }
@media (min-width: 34rem) { .gala-choices--2 { grid-template-columns: 1fr 1fr; } }
.gala-choice {
  position: relative;
  display: block;
  padding: 1.1rem 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(233, 217, 174, 0.35);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.gala-choice:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--gala-gold); }
.gala-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.gala-choice__title {
  display: block;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.gala-choice__price {
  display: block;
  margin-top: 0.3rem;
  color: var(--gala-gold-lit);
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}
.gala-choice__note {
  display: block;
  margin-top: 0.4rem;
  color: var(--gala-gold-pale);
  font-size: 0.82rem;
  line-height: 1.5;
}
.gala-choice:has(input:checked) {
  background: rgba(217, 173, 83, 0.14);
  border-color: var(--gala-gold-lit);
  box-shadow: inset 0 0 0 1px var(--gala-gold-lit);
}
.gala-choice:has(input:focus-visible) { outline: 2px solid var(--gala-gold-lit); outline-offset: 3px; }
.gala-choice--seats { text-align: center; }
.gala-choice--seats .gala-choice__price { font-size: 1.5rem; }

/* the fields, on navy */
.gala-form .field > label { color: var(--gala-gold-pale); font-weight: 600; }
.gala-form .field input,
.gala-form .field textarea {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(233, 217, 174, 0.4);
  color: #fff;
}
.gala-form .field input:hover,
.gala-form .field input:focus,
.gala-form .field textarea:hover,
.gala-form .field textarea:focus { background: rgba(255, 255, 255, 0.14); }
.gala-form .field input:focus,
.gala-form .field textarea:focus { outline-color: var(--gala-gold-lit); }
.gala-form .field__hint { color: rgba(233, 217, 174, 0.75); }
.gala-form .field__error { color: #ffc9cf; }
.gala-form .form__row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .gala-form .form__row--2 { grid-template-columns: 1fr 1fr; } }

.gala-people { display: grid; gap: 1rem; }
.gala-person {
  padding: 1.1rem 1.2rem 1.3rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(233, 217, 174, 0.3);
}
.gala-person > legend,
.gala-person > h4 {
  margin: 0 0 0.8rem;
  padding: 0;
  color: var(--gala-gold-lit);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.gala-person p.gala-person__why {
  margin: -0.4rem 0 0.9rem;
  color: rgba(233, 217, 174, 0.8);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* the total and the authorization */
.gala-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 1.5rem 0 1.1rem;
  padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gala-gold);
}
.gala-total__label {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.gala-total__value {
  color: var(--gala-gold-lit);
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
}
.gala-total__detail {
  flex-basis: 100%;
  color: var(--gala-gold-pale);
  font-size: 0.85rem;
}
.gala-agree {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
  color: var(--gala-gold-pale);
  font-size: 0.9rem;
  line-height: 1.6;
}
.gala-agree input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--gala-gold); }
.gala-fine {
  margin: 1.2rem auto 0;
  max-width: 36rem;
  color: rgba(233, 217, 174, 0.75);
  font-size: 0.82rem;
  line-height: 1.6;
  text-align: center;
}
.gala-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.6rem;
  background: var(--gala-gold);
  border: 1px solid var(--gala-gold-lit);
  color: #14203c;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.gala-btn:hover { background: var(--gala-gold-lit); color: #14203c; }
.gala-btn:active { transform: translateY(1px); }
.gala-btn--ghost {
  width: auto;
  background: transparent;
  border-color: var(--gala-gold);
  color: var(--gala-navy);
}
.gala-btn--ghost:hover { background: var(--gala-gold); color: #14203c; }
.gala-hero .gala-btn { width: auto; margin-top: 1.5rem; }

/* sales closed */
.gala-closed {
  margin: 0 auto;
  max-width: 34rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gala-gold);
  color: var(--gala-gold-pale);
  font-size: 1.02rem;
  line-height: 1.7;
  text-align: center;
}
.gala-closed a { color: #fff; }

/* -------------------------------------------------- the card form and after -- */
.gala-panel {
  padding-block: clamp(2.25rem, 6vw, 3.5rem);
  text-align: center;
}
.gala-panel h1 {
  margin: 0.6rem 0 0.8rem;
  color: var(--gala-navy);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.8rem);
}
.gala-panel p {
  margin: 0 auto 1rem;
  max-width: 34rem;
  color: var(--gala-ink-2);
  font-size: 1.05rem;
  line-height: 1.7;
}
.gala-receipt {
  margin: 1.75rem auto;
  max-width: 34rem;
  border: 1px solid var(--gala-rule);
  text-align: left;
}
/* The panel's title. White on navy at 0.72rem with 0.2em of tracking was pale
   and hard to read at a glance — the letterspacing was doing the damage. Bigger,
   tighter, with a gold rule under it. */
.gala-receipt__head {
  padding: 0.7rem 1.1rem 0.6rem;
  background: var(--gala-navy);
  border-bottom: 2px solid var(--gala-gold);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gala-receipt dl { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.gala-receipt dt {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--gala-rule);
  color: var(--gala-ink-2);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gala-receipt dd {
  margin: 0;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--gala-rule);
  color: var(--gala-navy);
}
.gala-receipt dl > :nth-last-child(-n+2) { border-bottom: 0; }
.gala-receipt__seat { display: block; }
.gala-receipt__seat small { color: var(--gala-ink-2); }

/* the gateway's frame, inside the sheet */
.gala-frame {
  margin: 1.5rem auto 0;
  max-width: 40rem;
  background: #fff;
  border: 1px solid var(--gala-rule);
}
.gala-frame iframe { display: block; width: 100%; min-height: 34rem; border: 0; }

/* ------------------------------------------------------------- the footer -- */
.gala-foot {
  padding: 0 1.5rem clamp(2rem, 5vw, 3.5rem);
  color: var(--gala-gold-pale);
  font-family: var(--sans);
  text-align: center;
}
.gala-foot__rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 auto 1.25rem;
  max-width: 20rem;
  color: var(--gala-gold);
}
.gala-foot__rule::before, .gala-foot__rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gala-gold), transparent);
}
.gala-foot__org {
  margin: 0 0 0.5rem;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gala-foot__lines { margin: 0 0 0.6rem; font-size: 0.86rem; line-height: 1.8; }
.gala-foot__small { margin: 0; font-size: 0.76rem; opacity: 0.75; }
.gala-foot a { color: var(--gala-gold-pale); text-decoration-thickness: 1px; }
.gala-foot a:hover { color: #fff; }

/* --------------------------------------------------------------- printing -- */
/* Somebody will print this and put it on a desk. The invitation prints; the
   checkout, the navy and the photographs do not. */
@media print {
  body.gala { background: #fff; }
  .gala-mast__brand { color: #000; }
  .gala-mast__brand em { color: #444; }
  .gala-sheet { border: 0; box-shadow: none; max-width: none; }
  .gala-tickets, .gala-poster, .gala-band, .gala-foot__small { display: none; }
  .gala-patronage { background: transparent; }
}

/* The ticket number under a name: a number, so it is set in the sans at a size
   that survives being read out at a door. */
.gala-receipt__no {
  display: block;
  margin-top: 0.2rem;
  color: var(--gala-gold);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* On a phone the masthead's name and the invitation's own first line are the
   same words two inches apart. The mark stays; the words go. */
@media (max-width: 34rem) {
  .gala-mast__brand em { display: none; }
  .gala-mast { padding-bottom: 0.85rem; }
}

/* How many seats are left. Gold, small, directly under the heading — a fact,
   not a banner. */
.gala-left {
  margin: -0.75rem auto 1.75rem;
  max-width: 34rem;
  color: var(--gala-gold-lit);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}

/* ------------------------------------------------- the card, framed ------- */
/* The gateway's form is a white page in an iframe and will always be: those
   fields are Authorize.Net's, which is the whole reason no card number reaches
   this server. What this site can do is give it a frame that belongs to the
   invitation — a titled plate on the cream sheet rather than a white rectangle
   dropped into it. */
.gala-cardbox {
  margin: 1.75rem auto 0;
  max-width: 40rem;
  background: #fff;
  border: 1px solid var(--gala-rule);
  box-shadow: 0 10px 30px rgba(10, 31, 71, 0.10);
}
.gala-cardbox__head {
  margin: 0;
  padding: 0.7rem 1.1rem 0.6rem;
  background: var(--gala-navy);
  border-bottom: 2px solid var(--gala-gold);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
}
.gala-cardbox__note {
  margin: 0;
  padding: 0.85rem 1.1rem 1rem;
  border-top: 1px solid var(--gala-rule);
  color: var(--gala-ink-2);
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.6;
  text-align: left;
}
.gala-frame { margin: 0; max-width: none; border: 0; }
.gala-frame iframe { min-height: 30rem; }
.gala-cardback { margin: 1.25rem 0 0; font-family: var(--sans); font-size: 0.85rem; }
.gala-cardback a { color: var(--gala-ink-2); }

/* What they are buying, above the card fields. */
.gala-cardlead { margin: 0 auto 1.5rem; font-size: 1.1rem; color: var(--gala-ink-2); }
.gala-cardtotal {
  display: grid;
  gap: 0.15rem;
  margin: 0 auto;
  max-width: 40rem;
  padding: 1rem 1.1rem;
  background: var(--gala-paper-2);
  border: 1px solid var(--gala-gold);
  text-align: left;
}
.gala-cardtotal span {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gala-ink-2);
}
.gala-cardtotal strong {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gala-navy);
}
.gala-cardtotal small {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--gala-ink-2);
}

/* --------------------------------------------- the card page, corrected ---
   Two faults Dan saw before the measurements did.

   1. `.gala-panel p` sets the color and the measure for every paragraph in a
      panel — and both of these titles ARE paragraphs, so white-on-navy came out
      as body ink on navy, which is very nearly invisible. Specificity, not
      opinion: the panel's rule is a class AND an element, this was a class
      alone, and the panel won. Scoped here, so it wins and so does the title.
   2. The plate holding the card form was 40rem against the 34rem of everything
      above it, and its own title was then held to 34rem inside the wider box:
      three different edges in one column. One measure now, for all of them. */
.gala-panel .gala-receipt__head,
.gala-panel .gala-cardbox__head {
  max-width: none;
  color: #fff;
}
.gala-panel .gala-cardbox__note { max-width: none; }
.gala-cardbox { max-width: 34rem; }

/* ------------------------------------------------- our own card form ------
   The fields are this site's now, so they wear the invitation: cream ground,
   gold rules, the association's own type. What is NOT here is as important —
   no third-party stylesheet, no widget, nothing between the buyer and the
   gateway but Authorize.Net's own tokenizer. */
.gala-cardform {
  margin: 1.75rem auto 0;
  max-width: 34rem;
  text-align: left;
}
.gala-cardform .gala-step > h3 { color: var(--gala-gold); }
.gala-cardform .gala-step > h3 b { border-color: var(--gala-gold); color: var(--gala-gold); }
.gala-cardform .field > label { color: var(--gala-ink-2); font-weight: 700; }
.gala-cardform .field__req { color: var(--gala-gold); }
.gala-cardform .field input {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--gala-rule);
  border-radius: 0;
  color: var(--gala-ink);
  font-family: var(--sans);
  font-size: 1.05rem;
  padding: 0.65rem 0.2rem;
}
.gala-cardform .field input:hover { border-bottom-color: var(--gala-gold); }
.gala-cardform .field input:focus {
  background: #fff;
  border-bottom-color: var(--gala-gold);
  outline: 2px solid var(--gala-gold-lit);
  outline-offset: 2px;
}
.gala-cardform .field input::placeholder { color: #a9a08c; }
.gala-cardform .gala-step__note { color: var(--gala-ink-2); }
.gala-cardform .gala-btn { margin-top: 0.5rem; }

/* What the card service said, when it would not take the card. */
.gala-cardsay,
.gala-cardproblem {
  margin: 1.1rem auto;
  max-width: 34rem;
  padding: 0.9rem 1.1rem;
  background: #fbeaec;
  border-left: 3px solid var(--red, #c3122a);
  color: #7d0d1a;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.6;
  text-align: left;
}
.gala-cardsecure {
  margin: 1.1rem auto 0;
  max-width: 34rem;
  color: var(--gala-ink-2);
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.6;
  text-align: left;
}

/* What is missing, said once at the top of the form rather than only beside the
   field nobody has scrolled to yet. */
.gala-wrong {
  margin: 0 auto 1.75rem;
  max-width: 42rem;
  padding: 1rem 1.2rem;
  background: rgba(195, 18, 42, 0.12);
  border: 1px solid #e07a86;
  color: #ffd7dc;
  font-family: var(--sans);
  text-align: left;
}
.gala-wrong p { margin: 0 0 0.5rem; font-size: 0.95rem; }
.gala-wrong strong { color: #fff; }
.gala-wrong ul { margin: 0; padding-left: 1.1rem; }
.gala-wrong li { margin: 0.25rem 0; font-size: 0.9rem; line-height: 1.5; }
.gala-wrong a { color: #ffd7dc; text-underline-offset: 0.2em; }
.gala-wrong a:hover { color: #fff; }

/* A field the server sent back. */
.gala-form .field input[aria-invalid="true"] {
  border-color: #e07a86;
  border-bottom-width: 2px;
}
.gala-cardform .field input[aria-invalid="true"] { border-bottom-color: #c3122a; }

/* ===========================================================================
   The presentation folder — /gala/files
   ===========================================================================

   A shelf of material on the same cream sheet. It borrows the invitation's
   whole vocabulary rather than inventing one: gold letterspaced caps for the
   labels, a hairline between items, the serif for anything a person reads.
   There are no icons here — the site's sprite belongs to the site, and a type
   label ("FILM · 418 MB") says more in the same space.

   The player is the one black object on cream in the whole project. A film is
   a window and it reads as one: no rounded corners, no shadow, a hairline
   where the sheet meets it.
   =========================================================================== */
.gala-files {
  padding-block: clamp(2.5rem, 7vw, 4rem) clamp(2rem, 5vw, 3.25rem);
  text-align: center;
}
.gala-files h1 {
  margin: 0.5rem 0 0.8rem;
  color: var(--gala-navy);
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.12;
}
.gala-files__lead {
  margin: 0 auto;
  max-width: 34rem;
  color: var(--gala-ink-2);
  font-size: 1.05rem;
  line-height: 1.7;
}
.gala-files__lead p { margin: 0 0 0.6rem; }
.gala-files__lead p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- the shelf -- */
.gala-files__shelf {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.gala-file + .gala-file { border-top: 1px solid var(--gala-rule); padding-top: clamp(1.75rem, 4vw, 2.75rem); }

/* The film itself. 16:9 is the shape these are shot in; object-fit keeps a
   stray 4:3 from stretching rather than letterboxing. */
.gala-file__screen {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #06101f;
  border: 1px solid var(--gala-rule);
  object-fit: contain;
}
.gala-file__audio { display: block; width: 100%; }
/* A picture is capped by its height, not its width: a landscape photograph of
   last year's room fills the sheet like the player above it, and the flyer —
   which is a tall plate — does not become a poster nobody asked for. */
.gala-file__plate { display: flex; justify-content: center; }
.gala-file__plate img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 34rem;
  height: auto;
  border: 1px solid var(--gala-rule);
}

/* ------------------------------------------------------ the line beneath -- */
.gala-file__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin-top: 0.9rem;
}
.gala-file__name {
  margin: 0;
  color: var(--gala-navy);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
}
.gala-file__meta {
  margin: 0.25rem 0 0;
  color: var(--gala-gold);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.gala-file__meta span { color: var(--gala-rule); margin-inline: 0.15rem; }

/* Download is a link, not a button: four gold buttons down a cream sheet is a
   software page, and this is a folder. */
.gala-file__get {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gala-file__get a,
.gala-file__get button {
  color: var(--gala-navy);
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid var(--gala-gold);
  padding: 0 0 0.15rem;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.gala-file__get a:hover,
.gala-file__get button:hover { color: var(--gala-gold); }

/* What the office wrote about this film. The measure is the letter's, because
   it is the same kind of thing: prose somebody wrote, meant to be read. */
.gala-file__note {
  margin: 0.75rem 0 0;
  max-width: 36em;
  color: var(--gala-ink-2);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* An item with nothing to show — a PDF, a deck — would be a line of type
   stranded between two large objects. It gets a plate of its own instead, so a
   document reads as a thing on the shelf rather than as a caption. */
.gala-file--pdf .gala-file__line,
.gala-file--file .gala-file__line {
  margin-top: 0;
  padding: 1.1rem 1.25rem;
  background: var(--gala-paper-2);
  border: 1px solid var(--gala-rule);
}

/* ------------------------------------------------------- empty, and after -- */
.gala-files__empty {
  margin: 0 auto;
  max-width: 32rem;
  padding: 2rem 1.5rem;
  border: 1px dashed var(--gala-rule);
  color: var(--gala-ink-2);
  font-size: 1.02rem;
  line-height: 1.7;
}
.gala-files__empty p { margin: 0; }
.gala-files__fine {
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  max-width: 30rem;
  color: var(--gala-ink-2);
  font-size: 0.86rem;
  line-height: 1.6;
}
.gala-files__back { margin: 1.75rem 0 0; }

/* The material is the page; paper gets the list, not the players. */
@media print {
  .gala-file__screen, .gala-file__audio, .gala-file__get, .gala-files__back { display: none; }
}