/* =========================================================================
   Caleb & Jordan — September 18, 2027
   Visual system from BUILD-BRIEF.md revision 4.
   Le Jour Serif (display) + Georgia (everything else).
   ========================================================================= */

/* --- Le Jour Serif -------------------------------------------------------
   The licensed webfont was not supplied with the handoff, so it is not in this
   repository. Two ways it arrives, neither of which costs a request today:

   1. Installed on the reader's own machine — the local() rule below finds it.
   2. Dropped into site/assets/fonts/ as LeJourSerif.woff2 (or .woff/.otf/.ttf)
      — tools/build.py then writes assets/css/le-jour-serif.css and links it
      from every page. Netlify runs that on each deploy, so pushing the files
      is the whole job.

   Until then headings fall back to Playfair Display, which shares Le Jour
   Serif's high stroke contrast. Re-check how "Caleb & Jordan" wraps on the
   homepage once the real font is in.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Le Jour Serif";
  src: local("Le Jour Serif"), local("LeJourSerif");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette — exact values from the brief, never sampled from the mockups */
  --olive:        #D7DA9F;   /* pale olive, primary surface */
  --moss:         #879063;   /* logo moss olive */
  --cream:        #EFF2C4;   /* lemon cream */
  --blush:        #F0A599;
  --coral:        #F09367;
  --raspberry:    #C94A7C;
  --terracotta:   #CE5A43;
  --brown:        #7B5849;   /* warm brown */

  /* Darker ink variants, used where contrast requires it */
  --raspberry-ink: #A2305C;  /* raspberry for headings on blush (3:1 at display sizes) */
  --raspberry-sm:  #7F2648;  /* small raspberry text on blush — 4.6:1 */
  --brown-ink:     #573D32;  /* small supporting copy */
  --moss-ink:      #565F3C;  /* small text on olive — 4.65:1 */

  --rule:        rgba(123, 88, 73, 0.30);
  --rule-strong: rgba(123, 88, 73, 0.55);
  --field-bg:    #FBFCEB;

  --display: "Le Jour Serif", "Playfair Display", Didot, "Bodoni 72", Georgia, serif;
  --body: Georgia, "Times New Roman", serif;

  --page: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
}

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

/* Author display rules (.btn, .nav) would otherwise beat the browser's own
   [hidden] rule, so state the intent once, loudly. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown-ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

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

a { color: var(--brown); text-underline-offset: 3px; }
a:hover { color: var(--raspberry-ink); }

:focus-visible {
  outline: 3px solid var(--raspberry-ink);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--raspberry); color: #fff; padding: 12px 18px;
  font-family: var(--body); text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

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

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

/* ---------------------------------------------------------------- header */
.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 30;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 92px;
  padding-block: 12px;
}
.logo { display: inline-flex; align-items: center; margin-right: auto; }
.logo img { width: 68px; height: auto; }
.logo:focus-visible { outline-offset: 4px; }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); }
.nav a {
  font-family: var(--body);
  font-size: 17px;
  color: var(--brown-ink);
  text-decoration: none;
  padding: 10px 2px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--terracotta); color: var(--brown-ink); }
.nav a[aria-current="page"] { border-bottom-color: var(--raspberry); color: var(--raspberry-ink); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--coral { background: var(--coral); color: #3F2A20; border-color: var(--coral); }
.btn--coral:hover { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
.btn--brown { background: var(--brown); color: #FFF9F2; border-color: var(--brown); }
.btn--brown:hover { background: #64463A; color: #fff; }
.btn--outline { background: transparent; color: var(--brown-ink); border-color: var(--rule-strong); }
.btn--outline:hover { background: rgba(123,88,73,.08); color: var(--brown-ink); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; pointer-events: none;
}

.nav-toggle {
  display: none;
  min-height: 48px; min-width: 48px;
  align-items: center; justify-content: center; gap: 8px;
  background: transparent; border: 1px solid var(--rule-strong);
  font-family: var(--body); font-size: 16px; color: var(--brown-ink);
  cursor: pointer;
}

@media (max-width: 860px) {
  .site-header__inner { min-height: 76px; }
  .logo img { width: 54px; }
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter) 24px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .nav a[aria-current="page"] { border-bottom-color: var(--raspberry); }
  .nav .btn { margin-top: 16px; }
}

/* ------------------------------------------------------------------ hero */
.hero { background: var(--olive); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: stretch;
}
.hero__text {
  padding: clamp(40px, 6vw, 86px) clamp(20px, 5vw, 72px) clamp(44px, 6vw, 86px);
  display: flex; flex-direction: column; justify-content: center;
  max-width: 820px; margin-left: auto; width: 100%;
}
.hero__names {
  font-family: var(--display);
  font-weight: 400;
  color: var(--raspberry);
  font-size: clamp(64px, 12vw, 168px);
  line-height: .92;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(18px, 2.4vw, 30px);
}
.hero__names .amp { color: var(--brown); font-style: italic; }

/* When the wordmark has been drawn as outlines, the h1 holds the artwork plus
   the real name for assistive technology. */
.hero__names--art { font-size: 0; line-height: 0; margin-bottom: clamp(20px, 2.6vw, 34px); }
.wordmark { display: block; width: 100%; max-width: 780px; height: auto; }
.hero__date {
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--brown);
  margin: 0 0 18px;
}
.hero__rule { width: 74px; height: 3px; background: var(--coral); border: 0; margin: 0 0 22px; }
.hero__venue { font-size: clamp(20px, 2vw, 27px); color: var(--brown); margin: 0; }
.hero__city { font-size: 17px; color: var(--moss-ink); margin: 2px 0 30px; }
.hero__cta { align-self: flex-start; padding-inline: 46px; }

.hero__photo { position: relative; min-height: 380px; }
.hero__photo picture { display: contents; }
.hero__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* focal point held on the couple, not the centre of the landscape */
  object-position: 50% 42%;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__text { order: 2; padding-block: 40px 44px; }
  .hero__photo { order: 1; min-height: 62vw; max-height: 480px; }
  .hero__photo img { object-position: 50% 40%; }
}

/* ------------------------------------------------------------- countdown */
.countdown {
  background: var(--blush);
  padding: clamp(18px, 2.6vw, 30px) 0;
}
.countdown__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.countdown__left { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 28px); }
.countdown__num {
  font-family: var(--display);
  font-size: clamp(56px, 9vw, 118px);
  line-height: .9;
  color: var(--raspberry-ink);
}
.countdown__label {
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brown-ink);
  line-height: 1.25;
  max-width: 7ch;
}
.countdown__date {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 44px);
  color: var(--raspberry-ink);
  border-bottom: 3px solid var(--coral);
  padding-bottom: 8px;
}
@media (max-width: 620px) {
  .countdown__inner { justify-content: flex-start; }
  .countdown__date { font-size: 28px; }
}

/* ------------------------------------------------------------ title band */
.title-band { background: var(--olive); padding: clamp(36px, 5.5vw, 76px) 0 clamp(30px, 4.5vw, 60px); }
.title-band__inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.page-title {
  font-family: var(--display);
  font-weight: 400;
  color: var(--raspberry);
  font-size: clamp(50px, 9vw, 128px);
  line-height: .95;
  letter-spacing: -0.015em;
  margin: 0;
}
.title-band__meta { text-align: right; color: var(--brown); font-size: 17px; line-height: 1.5; }
.title-band__meta strong { display: block; font-weight: normal; font-size: 19px; }
@media (max-width: 620px) { .title-band__meta { text-align: left; } }

/* ---------------------------------------------------------------- blocks */
.section { padding: clamp(36px, 5vw, 72px) 0; }
.section--cream { background: var(--cream); }
.section--olive { background: var(--olive); }
.section--blush { background: var(--blush); }

.h2 {
  font-family: var(--display); font-weight: 400;
  color: var(--raspberry-ink);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  margin: 0 0 18px;
}
.h3 {
  font-family: var(--display); font-weight: 400;
  color: var(--brown);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  margin: 0 0 10px;
}
.eyebrow {
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--moss-ink); margin: 0 0 12px;
}
.eyebrow--rasp { color: var(--raspberry-ink); }
/* Small type on blush needs more contrast than the heading tint gives. */
.panel--blush .eyebrow--rasp,
.section--blush .eyebrow--rasp { color: var(--raspberry-sm); }
.lede { font-size: clamp(18px, 1.7vw, 21px); color: var(--brown-ink); max-width: 62ch; }
.muted { color: var(--brown); }
.small { font-size: 15px; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.split--55 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.split--45 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 900px) {
  .split--55, .split--45 { grid-template-columns: 1fr; }
}

.panel { padding: clamp(24px, 3.4vw, 44px); }
.panel--blush { background: var(--blush); color: var(--brown-ink); }
.panel--blush .muted, .section--blush .muted { color: var(--brown-ink); }
.panel--blush .small, .section--blush .small { color: var(--brown-ink); }
.panel--olive { background: var(--olive); }
.panel--cream { background: var(--cream); }
.panel--field { background: var(--field-bg); border: 1px solid var(--rule); }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 28px 0; }
.rule--terracotta { border-top: 1px solid var(--terracotta); }

.stack > * + * { margin-top: 14px; }
.stack-lg > * + * { margin-top: 28px; }

.datum { margin: 0; }
.datum dt {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--moss-ink); margin-bottom: 4px;
}
.datum dd { margin: 0 0 18px; font-size: 18px; color: var(--brown-ink); }

.pending {
  display: inline-block;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--brown);
  border: 1px solid var(--rule-strong);
  padding: 4px 10px;
}

.linkish {
  color: var(--brown); text-decoration: underline;
  text-underline-offset: 4px;
}
.panel--blush .linkish,
.section--blush .linkish,
.panel--blush a:not(.btn),
.section--blush a:not(.btn) { color: var(--brown-ink); }
.linkish:hover { color: var(--raspberry-ink); }

/* list rows (travel, registry, birmingham, story) */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.rows > li:last-child { border-bottom: 1px solid var(--rule); }
.rows__title { font-size: 19px; color: var(--brown-ink); }
.rows__meta { font-size: 15px; color: var(--brown); }

/* ------------------------------------------------------------- accordion */
.accordion { border-top: 1px solid var(--rule-strong); }
.accordion details { border-bottom: 1px solid var(--rule-strong); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 2px;
  min-height: 44px;
  font-size: 19px;
  color: var(--brown-ink);
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  font-size: 26px; line-height: 1; color: var(--terracotta);
}
.accordion details[open] summary::after { content: "\2212"; }
.accordion .accordion__body { padding: 0 2px 22px; max-width: 70ch; }

/* ----------------------------------------------------------------- forms */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 20px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label, .fieldset__legend {
  font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--moss-ink);
}
.field input, .field select, .field textarea {
  font-family: var(--body);
  font-size: 17px;
  color: var(--brown-ink);
  background: var(--field-bg);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid var(--raspberry-ink);
  outline-offset: 1px;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--terracotta);
  border-width: 2px;
}
.field__hint { font-size: 14px; color: var(--brown); text-transform: none; letter-spacing: 0; }
.field__error {
  font-size: 15px; color: #8E3320; min-height: 0;
}
.field__error:empty { display: none; }

.checkline {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 17px; color: var(--brown-ink);
  min-height: 44px; padding-block: 8px;
  cursor: pointer;
}
.checkline input[type="checkbox"] {
  width: 22px; height: 22px; margin-top: 4px; accent-color: var(--moss-ink);
  flex: none;
}

fieldset { border: 0; margin: 0; padding: 0; }
.fieldset__legend { padding: 0; margin-bottom: 8px; display: block; }

/* yes / no choice controls */
.choice { display: flex; gap: 10px; flex-wrap: wrap; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 92px; min-height: 48px; padding: 10px 22px;
  background: var(--field-bg);
  border: 1px solid var(--brown);
  color: var(--brown-ink);
  font-size: 17px; text-transform: none; letter-spacing: 0;
  cursor: pointer;
}
.choice input:checked + label {
  background: var(--moss-ink); border-color: var(--moss-ink); color: #FFFDF2;
}
.choice input:focus-visible + label { outline: 3px solid var(--raspberry-ink); outline-offset: 2px; }

.form-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 26px; }

/* status / alerts */
.notice {
  border-left: 4px solid var(--terracotta);
  background: rgba(255,255,255,.45);
  padding: 14px 18px;
  font-size: 16px;
  margin: 0 0 20px;
}
.notice--error { border-left-color: #A8321C; }
.notice--ok { border-left-color: var(--moss-ink); }

.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(123,88,73,.35);
  border-top-color: var(--brown);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* envelope preview */
.envelope {
  background: #FFFDF2;
  border: 1px solid var(--brown);
  padding: clamp(24px, 4vw, 44px);
  min-height: 250px;
  display: flex; flex-direction: column;
}
.envelope__logo { width: 56px; height: auto; }
.envelope__lines {
  margin: auto; text-align: center; font-size: 19px; line-height: 1.7;
  color: var(--brown-ink); white-space: pre-line;
}

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--olive); padding: clamp(28px, 4vw, 52px) 0; }
.site-footer__inner {
  display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap;
  align-items: center;
}
.site-footer nav { display: flex; gap: clamp(16px, 2.4vw, 34px); flex-wrap: wrap; }
.site-footer a { color: var(--brown-ink); text-decoration: none; padding: 8px 0; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__meta { font-size: 15px; color: var(--brown); }

/* ------------------------------------------------------------- city map */
.map-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 900px) { .map-layout { grid-template-columns: 1fr; } }
.map {
  position: relative; background: var(--olive);
  border: 1px solid var(--rule); min-height: 420px; overflow: hidden;
}
.map svg { display: block; width: 100%; height: 100%; }
.map__note {
  position: absolute; left: 12px; bottom: 12px;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,253,242,.9); padding: 4px 8px; color: var(--brown-ink);
}
.map__pin { cursor: pointer; }
.map__pin circle { transition: transform .15s ease; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.filters button {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--body); font-size: 17px; color: var(--brown-ink);
  padding: 10px 6px; min-height: 44px; cursor: pointer;
}
.filters button[aria-pressed="true"] { border-bottom-color: var(--raspberry); color: var(--raspberry-ink); }
.place { padding: 18px; border: 1px solid transparent; border-top: 1px solid var(--rule); }
.place.is-selected { background: var(--blush); border-color: var(--terracotta); }
.place h3 { margin: 0 0 4px; font-family: var(--display); font-size: 24px; font-weight: 400; color: var(--brown); }

/* ------------------------------------------------------------ admin area */
.admin { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.admin__side { background: var(--olive); padding: 24px 20px; }
.admin__side img { width: 52px; margin-bottom: 20px; }
.admin__side nav { display: flex; flex-direction: column; gap: 2px; }
.admin__side nav button {
  text-align: left; background: transparent; border: 0; cursor: pointer;
  font-family: var(--body); font-size: 17px; color: var(--brown-ink);
  padding: 10px 6px; min-height: 44px;
}
.admin__side nav button[aria-current="true"] { color: var(--raspberry-ink); border-bottom: 2px solid var(--raspberry); }
.admin__tag { margin-top: 28px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--moss-ink); }
.admin__main { background: var(--cream); }
.admin__head {
  background: var(--olive); padding: 22px clamp(18px, 3vw, 38px);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.admin__head h1 { font-family: var(--display); font-weight: 400; color: var(--raspberry); font-size: clamp(32px, 4vw, 48px); margin: 0; }
.admin__body { padding: clamp(18px, 3vw, 38px); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
.stat { padding: 18px 20px; }
.stat:nth-child(odd) { background: var(--olive); }
.stat:nth-child(even) { background: var(--blush); }
.stat dt { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brown-ink); }
.stat dd { margin: 4px 0 0; font-family: var(--display); font-size: 40px; line-height: 1; color: var(--brown-ink); }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 16px; }
table.data th, table.data td {
  text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.data th {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--moss-ink); border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
.status-yes { color: var(--moss-ink); }
.status-no { color: #8E3320; }
.status-pending { color: var(--brown); }
@media (max-width: 760px) {
  .admin { grid-template-columns: 1fr; }
  .admin__side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; }
  .admin__side img { width: 40px; margin: 0; }
  .admin__side nav { flex-direction: row; flex-wrap: wrap; }
  .admin__tag { margin: 0; }
}

/* --------------------------------------------------------------- utility */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flow > * + * { margin-top: 1em; }
.tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .btn { display: none !important; }
  body { background: #fff; }
}

/* Editorial refinement: the original wedding palette, with room to breathe. */
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
::selection { background: var(--raspberry-ink); color: var(--cream); }
body { overflow-wrap: break-word; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--raspberry-ink); outline-offset: 6px; }
.site-header { position: sticky; top: 0; background: rgba(239,242,196,.97); backdrop-filter: blur(16px); }
.site-header__inner { min-height: 94px; }
.logo { margin-right: 0; flex-shrink: 0; }
.logo img { width: 58px; }
.header-date { margin-right: auto; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--moss-ink); }
.nav { gap: clamp(18px, 2.2vw, 32px); }
.nav a { font-size: 15px; }
.nav a.btn { padding: 13px 29px; border: 1px solid var(--brown-ink); font-size: 13px; letter-spacing: .08em; background: transparent; color: var(--brown-ink); }
.nav a.btn:hover, .nav a.btn[aria-current="page"] { background: var(--brown-ink); color: var(--cream); }
.btn { min-height: 52px; font-size: 15px; padding: 15px 26px; transition: background .25s, color .25s, transform .25s; }
.btn span { margin-left: 20px; font-size: 19px; }
.btn:hover { transform: translateY(-2px); }
.btn--brown { background: var(--brown-ink); border-color: var(--brown-ink); }
.btn--coral { border-color: var(--brown-ink); }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 12px; border-bottom: 1px solid var(--brown-ink); color: var(--brown-ink); text-decoration: none; font-size: 15px; }
.text-link span { display: inline-block; transition: transform .25s; }
.text-link:hover span { transform: translate(4px,-2px); }
.eyebrow { font-size: 11px; letter-spacing: .19em; }
.display-heading { font-family: var(--display); font-weight: 400; font-size: clamp(44px,5.3vw,76px); line-height: 1.08; letter-spacing: -.045em; margin: 0 0 26px; color: var(--raspberry-ink); text-wrap: balance; }
.display-heading em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.055em; }
.section { padding-block: clamp(64px, 8vw, 112px); }
.hero { overflow: hidden; }
.hero__grid { grid-template-columns: 1fr 1fr; min-height: min(740px, calc(100svh - 94px)); }
.hero__text { padding: 55px clamp(24px,5vw,78px) 30px; max-width: 820px; }
.hero__eyebrow { margin-bottom: 36px; }
.hero__names--art { margin-bottom: 30px; }
.hero__date { font-size: clamp(22px,2.2vw,30px); margin-bottom: 25px; }
.hero__details { border-top: 1px solid var(--rule-strong); padding-top: 22px; }
.hero__venue { font-size: clamp(18px,1.7vw,23px); color: var(--brown-ink); }
.hero__city { font-size: 15px; margin: 3px 0 25px; }
.hero__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero__cta { padding-inline: 26px; min-width: 155px; justify-content: space-between; }
.hero__scroll { margin-top: auto; padding-top: 40px; display: flex; align-items: center; gap: 24px; color: var(--moss-ink); font-size: 12px; text-decoration: none; }
.hero__scroll span { font-size: 22px; }
.hero__photo { margin: 0; overflow: hidden; }
.hero__photo img { object-position: 50% 45%; }
.hero__photo figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 42px 28px 20px; color: #fff; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(transparent,rgba(27,37,29,.65)); }
.countdown { padding-block: 32px; border-bottom: 1px solid var(--rule); }
.countdown__num { font-size: clamp(70px,9vw,130px); letter-spacing: -.05em; }
.countdown__label { font-size: 12px; letter-spacing: .14em; line-height: 1.6; max-width: 8ch; }
.countdown__date { font-size: clamp(30px,4vw,54px); border-bottom: 1px solid var(--raspberry-ink); padding-bottom: 3px; letter-spacing: -.03em; }
.day-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(65px,12vw,180px); align-items: center; }
.date-card { text-align: center; border: 1px solid var(--rule-strong); padding: 38px 30px 25px; color: var(--raspberry-ink); }
.date-card .eyebrow { color: var(--raspberry-ink); font-size: 15px; }
.date-card__day { display: block; font-family: var(--display); font-size: clamp(120px,18vw,240px); line-height: 1.15; letter-spacing: -.08em; padding-right: .08em; }
.date-card__bottom { display: flex; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 20px; margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.day-copy .lede { max-width: 32ch; }
.venue-detail { margin-block: 30px 16px; }
.venue-detail h3 { font-weight: normal; font-size: 21px; margin-bottom: 8px; }
.venue-detail p { font-size: 15px; margin: 0; }
.inline-actions { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 20px; }
.day-copy .small { font-size: 13px; }
.city-feature { padding-block: 80px 36px; }
.city-feature__heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; }
.city-feature__heading .text-link { margin-bottom: 30px; flex-shrink: 0; }
.city-art { display: block; overflow: hidden; margin-top: 28px; perspective: 1200px; background: var(--cream); }
.city-art img { display: block; width: 100%; height: auto; transform: scale(1.015) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transition: transform .6s ease-out; }
.art-caption { display: flex; justify-content: space-between; gap: 16px; padding-block: 15px; color: var(--moss-ink); font-size: 11px; letter-spacing: .06em; }
.guide-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; }
.editorial-links { border-top: 1px solid var(--rule-strong); }
.editorial-links > a { display: flex; justify-content: space-between; align-items: center; gap: 25px; border-bottom: 1px solid var(--rule-strong); color: var(--brown-ink); text-decoration: none; padding: 28px 0; transition: padding .25s, color .25s; }
.editorial-links > a:hover { padding-inline: 12px; color: var(--raspberry-ink); }
.editorial-links strong { display: block; font-family: var(--display); font-size: clamp(25px,3vw,36px); line-height: 1.25; font-weight: 400; }
.editorial-links small { display: block; margin-top: 9px; font-size: 14px; }
.editorial-links > a > span:last-child { font-size: 30px; }
.invitation-layout { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 48px; }
.invitation-monogram { width: 110px; height: auto; mix-blend-mode: multiply; }
.address-invitation .display-heading { font-size: clamp(38px,4vw,60px); }
.address-invitation p:last-child { margin-bottom: 0; max-width: 37ch; }
.site-footer { padding-block: 60px 25px; }
.footer-top { display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 40px; padding-bottom: 45px; }
.footer-names { font-family: var(--display); font-size: clamp(30px,4.3vw,62px); color: var(--raspberry-ink); letter-spacing: -.04em; margin: 0; }
.footer-names em { font-family: Georgia, serif; color: var(--brown); }
.footer-date { font-size: 13px; text-align: right; line-height: 1.8; }
.footer-monogram img { width: 86px; height: auto; }
.site-footer__inner { border-top: 1px solid var(--rule-strong); padding-top: 24px; align-items: baseline; gap: 18px; }
.site-footer nav { gap: 8px 24px; max-width: 950px; }
.site-footer nav a, .back-to-top { font-size: 13px; }
.back-to-top { white-space: nowrap; }
.back-to-top span { margin-left: 12px; }
.title-band { padding-block: 65px 55px; border-bottom: 1px solid var(--rule); }
.page-title { color: var(--raspberry-ink); font-size: clamp(54px,8vw,112px); letter-spacing: -.045em; line-height: 1.05; }
.title-band__meta { font-size: 13px; padding-bottom: 5px; }
.title-band__meta strong { font-size: 16px; }
.h2 { letter-spacing: -.035em; line-height: 1.15; }
.h3 { line-height: 1.2; }
.panel { padding: clamp(26px,3.8vw,52px); }
.panel--blush { border: 1px solid rgba(123,88,73,.18); }
.panel .h2 { font-size: clamp(30px,3vw,43px); }
.pending { border: 0; padding: 0; font-size: 15px; font-style: italic; }
.datum dt { font-size: 11px; margin-top: 22px; }
.datum dd { font-size: 17px; }
.field label, .fieldset__legend { font-size: 11px; }
.field input, .field select, .field textarea { min-height: 54px; background: rgba(251,252,235,.75); transition: border-color .2s, background .2s; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--brown); }
.form-grid { gap: 22px; }
.field__hint { font-size: 13px; }
.envelope { min-height: 280px; box-shadow: 0 12px 24px rgba(87,61,50,.08); border-color: var(--rule); }
.accordion summary { padding-block: 25px; }
.accordion summary:hover { color: var(--raspberry-ink); }
.registry-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 100px; align-items: center; }
.registry-layout > div > p:not(.eyebrow) { max-width: 42ch; }
.registry-note { text-align: center; padding-block: 56px; }
.registry-note img { margin: 0 auto 35px; }
.registry-note .eyebrow { margin: 38px 0 0; }
.story-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; }
.story-photo { margin: 0; }
.story-photo img { display: block; width: 100%; height: auto; }
.story-copy .display-heading { font-size: clamp(42px,4.4vw,65px); }
.party-intro { max-width: 900px; text-align: center; padding-block: 35px; }
.party-intro .lede { margin-inline: auto; }
.city-intro { display: grid; grid-template-columns: .6fr 1fr; gap: 40px; margin-bottom: 45px; align-items: baseline; }
.city-intro .lede { margin: 0; }
.map-layout { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 45px; align-items: start; }
.landmark-scene { margin: 0; position: sticky; top: 125px; min-width: 0; }
.landmark-scene > img { width: 100%; height: auto; display: block; }
.landmark-pins { display: flex; gap: 10px; margin-top: 15px; }
.landmark-pins button { flex: 1; font-family: var(--body); font-size: 13px; padding: 12px; min-height: 44px; border: 1px solid var(--rule-strong); background: transparent; color: var(--brown-ink); cursor: pointer; }
.landmark-pins button[aria-pressed="true"] { background: var(--brown-ink); color: var(--cream); }
.filters { gap: 6px; }
.filters button { font-size: 14px; }
.place { display: block !important; padding: 23px 0; transition: background .2s, padding .2s; }
.place.is-selected { padding-inline: 18px; }
.place h3 { font-size: 27px; margin-bottom: 10px; }
.place .eyebrow { margin-bottom: 8px; }
.place p { font-size: 14px; }
.place .text-link { font-size: 13px; }
.city-empty { padding: 30px 0; border-top: 1px solid var(--rule); color: var(--brown); font-size: 16px; }
.city-venue { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.city-venue p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero__text > * { animation: arrive .8s both; }
  .hero__text > :nth-child(2) { animation-delay: .08s; }
  .hero__text > :nth-child(3) { animation-delay: .16s; }
  .hero__text > :nth-child(4) { animation-delay: .24s; }
  .hero__text > :nth-child(5) { animation-delay: .32s; }
  [data-reveal].will-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
  [data-reveal].will-reveal.is-visible { opacity: 1; transform: none; }
  @keyframes arrive { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1100px) {
  .header-date { display: none; }
  .logo { margin-right: auto; }
  .hero__text { padding-inline: 35px; }
  .invitation-layout { grid-template-columns: 80px 1fr; gap: 30px; }
  .invitation-layout > .btn { grid-column: 2; justify-self: start; }
  .invitation-monogram { width: 80px; }
  .registry-layout { gap: 45px; }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__text { order: 1; max-width: none; padding: 42px var(--gutter) 30px; }
  .hero__photo { order: 2; min-height: 66vw; max-height: none; }
  .hero__photo img { object-position: 50% 45%; }
  .hero__eyebrow { margin-bottom: 26px; }
  .hero__names--art { max-width: 680px; margin-bottom: 25px; }
  .hero__scroll { display: none; }
  .hero__details { padding-top: 18px; }
  .hero__city { margin-bottom: 22px; }
  .hero__date { font-size: 25px; margin-bottom: 20px; }
  .hero__actions { gap: 24px; }
  .day-layout { gap: 50px; }
  .date-card { padding: 28px 20px 20px; }
  .date-card__day { font-size: 150px; }
  .guide-layout { grid-template-columns: 1fr 1.25fr; gap: 35px; }
  .city-feature { padding-top: 60px; }
  .city-feature__heading .display-heading { font-size: 48px; }
  .story-layout { grid-template-columns: 1fr; gap: 40px; }
  .story-copy { max-width: 600px; }
  .map-layout { grid-template-columns: 1fr; gap: 32px; }
  .landmark-scene { position: static; }
  .footer-top { grid-template-columns: 70px 1fr; gap: 25px; }
  .footer-monogram img { width: 70px; }
  .footer-date { grid-column: 2; margin: -15px 0 0; text-align: left; }
}
@media (max-width: 860px) {
  .site-header__inner { min-height: 78px; padding-block: 10px; }
  .logo img { width: 48px; }
  .header-date { display: block; margin-left: auto; margin-right: 6px; font-size: 9px; }
  .nav-toggle { min-width: 70px; padding: 0 10px; border: 0; font-size: 13px; }
  .nav-toggle__icon { width: 16px; height: 6px; border-block: 1px solid currentColor; transition: transform .2s; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon { transform: rotate(-45deg); }
  .nav { padding-inline: var(--gutter); gap: 0; box-shadow: 0 18px 28px rgba(87,61,50,.09); }
  .nav a { font-size: 22px; padding: 18px 0; }
  .nav a.btn { margin-top: 20px; }
  html { scroll-padding-top: 94px; }
}
@media (max-width: 620px) {
  .display-heading { font-size: 44px; }
  .hero__text { padding-top: 34px; }
  .hero__eyebrow { font-size: 10px; margin-bottom: 25px; }
  .hero__names--art { margin-bottom: 24px; }
  .hero__date { font-size: 23px; }
  .hero__venue { font-size: 19px; }
  .hero__photo { min-height: 70vw; }
  .hero__photo figcaption { padding: 35px 20px 14px; font-size: 9px; }
  .hero__actions { gap: 22px; }
  .hero__cta { min-width: 140px; }
  .countdown { padding-block: 26px; }
  .countdown__inner { justify-content: space-between; gap: 12px; }
  .countdown__left { gap: 15px; }
  .countdown__num { font-size: 70px; }
  .countdown__label { font-size: 9px; }
  .countdown__date { font-size: 29px; }
  .day-layout, .guide-layout, .registry-layout, .city-intro { grid-template-columns: 1fr; gap: 38px; }
  .date-card { max-width: 320px; width: 100%; margin: 0 auto; }
  .date-card__day { font-size: 155px; line-height: 1.1; }
  .date-card .eyebrow { font-size: 12px; }
  .date-card__bottom { padding-top: 15px; }
  .day-copy .display-heading br { display: none; }
  .city-feature__heading { display: block; }
  .city-feature__heading .display-heading { font-size: 43px; }
  .city-feature__heading .text-link { margin-bottom: 0; }
  .city-art { margin-top: 25px; }
  .art-caption { font-size: 9px; gap: 12px; }
  .city-art img { transform: none; }
  .editorial-links > a { padding-block: 23px; }
  .invitation-layout { grid-template-columns: 1fr; gap: 26px; }
  .invitation-layout > .btn { grid-column: 1; }
  .invitation-layout .invitation-monogram { width: 70px; }
  .address-invitation .display-heading { font-size: 42px; }
  .title-band { padding-block: 38px 32px; }
  .page-title { font-size: clamp(45px,11vw,66px); }
  .title-band__inner { gap: 24px; }
  .title-band__meta { display: none; }
  .footer-top { gap: 20px; grid-template-columns: 55px 1fr; padding-bottom: 30px; }
  .footer-monogram img { width: 55px; }
  .footer-names { font-size: 32px; }
  .footer-date { font-size: 12px; margin-top: -9px; }
  .site-footer nav { gap: 4px 22px; }
  .site-footer nav a { min-height: 40px; display: inline-flex; align-items: center; }
  .split { grid-template-columns: minmax(0,1fr); }
  .city-intro { gap: 10px; }
  .city-venue { display: block; }
  .city-venue .btn { margin-top: 24px; }
  .field input, .field select, .field textarea { font-size: 16px; }
  .accordion summary { font-size: 18px; }
  .registry-note { padding-block: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal].will-reveal { opacity: 1; transform: none; }
  .city-art img { transform: none; }
}
@media print {
  [data-reveal].will-reveal { opacity: 1; transform: none; }
  .hero__photo { min-height: 350px; }
}
@media (max-width: 380px) {
  .header-date { display: none; }
  .countdown__num { font-size: 61px; }
  .countdown__date { font-size: 26px; }
  .hero__actions { gap: 15px; }
  .hero__cta { min-width: 125px; padding-inline: 19px; }
  .footer-names { font-size: 27px; }
}
.weekend-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: start; }
.schedule-entry { padding-block: 30px; border-top: 1px solid var(--rule-strong); }
.schedule-entry p { max-width: 43ch; }
.schedule-entry .h2 { font-size: 40px; }
.schedule-venue { font-size: 23px; margin-bottom: 8px; }
.schedule-details { display: flex; gap: 30px; margin-block: 28px; }
.schedule-details dt { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; color: var(--moss-ink); }
.schedule-details dd { margin: 0; font-size: 15px; }
.weekend-aside { position: sticky; top: 125px; }
.weekend-aside .invitation-monogram { width: 85px; margin-bottom: 30px; }
.weekend-aside .display-heading { font-size: clamp(35px,3.5vw,50px); }
.weekend-aside .btn { margin-top: 20px; }
.weekend-bottom { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.travel-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 90px; align-items: center; }
.airport-card .h3 { font-size: 24px; }
.airport-code { font-family: var(--display); color: var(--raspberry-ink); font-size: clamp(65px,8vw,112px); line-height: 1.3; letter-spacing: -.04em; display: block; margin-bottom: 20px; }
.hotel-note { border-top: 1px solid var(--rule-strong); padding-top: 28px; }
@media (max-width: 1000px) {
  .weekend-layout, .travel-layout { gap: 42px; }
}
@media (max-width: 760px) {
  .weekend-layout, .travel-layout { grid-template-columns: 1fr; gap: 35px; }
  .weekend-aside { position: static; }
  .weekend-bottom { display: block; }
  .schedule-details { flex-wrap: wrap; }
  .schedule-entry .h2 { font-size: 34px; }
}

/* =========================================================================
   Under-construction gate — site/construction.html
   ========================================================================= */
.site-closed {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--olive);
}

.tape {
  height: 26px;
  flex: none;
  background: repeating-linear-gradient(
    -45deg,
    var(--coral) 0 18px,
    var(--terracotta) 18px 36px
  );
  border-block: 2px solid rgba(87, 61, 50, .35);
}

.site-closed__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 64px) var(--gutter);
  text-align: center;
}

.worksite__sign {
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brown);
  margin: 0 0 clamp(18px, 3vw, 30px);
}

/* The two of them either side of the name, working on it. */
.worksite {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0px, 0.6vw, 10px);
  width: 100%;
}

.worker {
  position: relative;
  flex: none;
  width: clamp(84px, 12vw, 150px);
}
.worker .sprite {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  display: block;
}

/* Tools are separate images so they can move independently of the body.
   Each is pinned to its owner's near hand and pivots from the handle end. */
.tool {
  position: absolute;
  width: 22%;
  height: auto;
  image-rendering: pixelated;
  transform-origin: 50% 90%;
}
.tool--hammer {
  right: 8%;
  bottom: 46%;
  animation: swing 1.5s ease-in-out infinite;
}
.tool--roller {
  left: 4%;
  bottom: 46%;
  animation: stroke 2.4s ease-in-out infinite;
}

/* He taps the letters and rocks back; she runs the roller up and down them. */
@keyframes swing {
  0%, 55%, 100% { transform: rotate(34deg); }
  70%           { transform: rotate(72deg); }
  80%           { transform: rotate(56deg); }
}
@keyframes stroke {
  0%, 100% { transform: rotate(-38deg) translateY(6%); }
  50%      { transform: rotate(-48deg) translateY(-16%); }
}

/* Without motion the tools still rest against the letters, mid-job. */
@media (prefers-reduced-motion: reduce) {
  .tool--hammer { transform: rotate(46deg); }
  .tool--roller { transform: rotate(-42deg); }
  .worker--left::after { display: none; }
}

.worksite__name {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 660px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: clamp(10px, 2vw, 26px);
}
.worksite__name svg {
  width: 100%;
  max-width: 620px;
  height: auto;
}
.worksite__name p {
  font-family: var(--display);
  font-size: clamp(26px, 6vw, 68px);
  color: var(--raspberry);
  margin: 0;
}

.worksite__ground {
  height: 6px;
  width: min(760px, 96%);
  margin: 0 auto clamp(26px, 4vw, 44px);
  background: var(--moss);
  opacity: .32;
}

/* Sparks where the hammer lands. */
.worker--left::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: 62%;
  width: 6px;
  height: 6px;
  background: var(--coral);
  opacity: 0;
  animation: spark 1.5s ease-out infinite;
}
@keyframes spark {
  0%, 70%  { opacity: 0; transform: translate(0, 0) scale(1); }
  78%      { opacity: 1; transform: translate(6px, -8px) scale(1); }
  92%, 100%{ opacity: 0; transform: translate(14px, -18px) scale(.4); }
}

@media (max-width: 620px) {
  .worksite { flex-wrap: wrap; gap: 8px; }
  .worksite__name { order: -1; flex-basis: 100%; padding-bottom: 8px; }
  .worker { width: clamp(76px, 26vw, 110px); }
  /* The sign is above them here, so the tools swap to the outside where they
     stay visible and read as raised towards it. */
  .tool--hammer { right: auto; left: -10%; }
  .tool--roller { left: auto; right: -10%; }
  .worker--left::after { right: auto; left: -10%; }
}

.site-closed h1 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--raspberry);
  font-size: clamp(38px, 8vw, 92px);
  line-height: .98;
  margin: 0 0 14px;
}
.site-closed__lede {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--brown-ink);
  max-width: 46ch;
  margin: 0 auto 10px;
}
.site-closed__facts {
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--brown);
  margin: 0 auto clamp(26px, 4vw, 40px);
}
.site-closed__facts strong { font-weight: normal; color: var(--brown-ink); }

.gate {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}
.gate input {
  font-family: var(--body);
  font-size: 17px;
  padding: 12px 14px;
  min-height: 48px;
  width: min(280px, 72vw);
  background: var(--field-bg);
  border: 1px solid var(--rule-strong);
  color: var(--brown-ink);
}
.gate__hint {
  font-size: 15px;
  color: var(--brown);
  margin: 14px auto 0;
}
.gate__error {
  color: #8E3320;
  font-size: 16px;
  margin: 14px auto 0;
  min-height: 0;
}
.gate__error:empty { display: none; }

.site-closed__foot {
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--moss-ink);
  padding: 18px var(--gutter);
  text-align: center;
}