/*
  ex.gold Invites · coming soon
  Brand: berry #8d0052, gold #fdbf32, ink #180710, cream #faf8f3; Instrument Sans + Instrument Serif;
  sharp corners. Gold is for ornament only (it is too light for text on cream).
  Contrast (WCAG): ink on cream 18.4:1, ink-soft on cream 10.0:1, berry on cream 8.7:1, cream on berry 8.7:1,
  placeholder #7a6d73 on white 4.9:1, focus ring ink on cream 18.4:1.
*/

@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/InstrumentSans-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/InstrumentSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --berry: #8d0052;
  --gold: #fdbf32;
  --ink: #180710;
  --ink-soft: #4a3a42;
  --cream: #faf8f3;
  --paper: #ffffff;

  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --frame: 0.625rem;
  --gutter: 1.75rem;
}

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

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

body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The page is the card: a double gold rule inset from the edge, like the border of a printed invitation. */
body::before,
body::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--gold);
}

body::before {
  inset: var(--frame);
}

body::after {
  inset: calc(var(--frame) + 0.3125rem);
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
  padding: 3.5rem var(--gutter) 2rem;
  text-align: center;
}

/* Brand lock-up: peacock, then "ex.gold" (outlined wordmark) with "Invites" set in Instrument Serif italic. */

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: auto;
  height: 4rem;
  margin: 0 auto 1.25rem;
}

.lockup {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--berry);
  white-space: nowrap;
}

/* The wordmark's baseline is 22.1 % of the image height above its bottom edge; this sits it on the text baseline. */
.lockup-word {
  width: auto;
  height: 1.75rem;
  vertical-align: -0.387rem;
}

.lockup-product {
  margin-left: 0.3em;
}

.ornament {
  position: relative;
  width: 6rem;
  height: 1px;
  margin: 2rem auto 2.25rem;
  background: var(--gold);
}

.ornament::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--gold);
  box-shadow: 0 0 0 0.375rem var(--cream);
  transform: translate(-50%, -50%) rotate(45deg);
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--berry);
}

h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.375rem, 8.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 em {
  font-style: italic;
  color: var(--berry);
}

.lede {
  max-width: 33rem;
  margin: 1.5rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.lede a,
.note a,
.consent a {
  color: var(--berry);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Waitlist form */

.waitlist {
  width: 100%;
  max-width: 28rem;
  margin: 2.75rem 0 0;
  text-align: left;
}

.waitlist-label {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.waitlist-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.waitlist input[type='email'] {
  flex: 999 1 14rem;
  min-width: 0;
  height: 3.25rem;
  margin: 0;
  padding: 0 1rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}

.waitlist input[type='email']::placeholder {
  color: #7a6d73;
  opacity: 1;
}

.waitlist input[type='email'][aria-invalid='true'] {
  border-color: var(--berry);
  box-shadow: inset 0 0 0 1px var(--berry);
}

.waitlist button {
  flex: 1 0 auto;
  height: 3.25rem;
  margin: 0;
  padding: 0 1.5rem;
  border: 1px solid var(--berry);
  border-radius: 0;
  background: var(--berry);
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}

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

.waitlist input:focus-visible,
.waitlist button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.waitlist input[type='email']:focus-visible {
  outline-offset: 2px;
  border-color: var(--berry);
}

.consent {
  margin: 0.875rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.form-error {
  margin: 0 0 0.625rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--berry);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--berry);
}

/* Honeypot: off-screen for people, still filled in by naive bots. Not display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Result pages (result-pending.html, result-confirmed.html) */

.note {
  max-width: 30rem;
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.back {
  display: inline-block;
  margin-top: 2.25rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--berry);
  color: var(--berry);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.back:hover {
  background: var(--berry);
  color: var(--cream);
}

.foot {
  padding: 0 var(--gutter) 2.25rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.foot p {
  margin: 0;
}

/* Developer addition (privacy link); for the designer's review. */
.foot a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Developer addition: long-form text (privacy.html); for the designer's review. */
.prose {
  width: 100%;
  max-width: 34rem;
  margin: 2.5rem 0 0;
  text-align: left;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.prose h2 {
  margin: 2.25rem 0 0.5rem;
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.prose p,
.prose ul,
.prose ol {
  margin: 0.75rem 0 0;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: 0.375rem;
}

.prose strong {
  font-weight: 600;
  color: var(--ink);
}

.prose a {
  color: var(--berry);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.prose a strong {
  color: inherit;
}

.table-wrap {
  margin: 0.75rem 0 0;
  overflow-x: auto;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.prose th,
.prose td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--gold);
  text-align: left;
  vertical-align: top;
}

.prose th {
  font-weight: 600;
  color: var(--ink);
}

@media (min-width: 40rem) {
  :root {
    --frame: 1rem;
  }

  main {
    padding-top: 5rem;
  }

  .brand-mark {
    height: 4.75rem;
  }

  .lockup {
    font-size: 2.25rem;
  }

  .lockup-word {
    height: 2.0625rem;
    vertical-align: -0.456rem;
  }

  .lede {
    font-size: 1.125rem;
  }

  .foot {
    padding-bottom: 2.75rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .waitlist button,
  .back {
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease;
  }
}

@media (forced-colors: active) {
  .waitlist button,
  .back {
    border: 1px solid ButtonText;
  }
}

/*
  Analytics consent banner (designer's consent-banner.css, 12 Oct; markup in every page, wired by analytics.js).
  A white strip across the top of the page, set just inside the inner gold rule, so it reads as part of the card.
  "Accept" and "Decline" are identical in size, colour and weight; neither is nudged.
  Contrast: ink-soft text on white 10.6:1, berry link on white 9.3:1, ink button text on white 19.5:1,
  cream on ink (hover) 18.4:1.
*/

.cookie-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin: calc(var(--frame) + 0.3125rem + 1px) calc(var(--frame) + 0.3125rem + 1px) 0;
  padding: 0.875rem 1rem 1rem;
  border-bottom: 1px solid var(--gold);
  background: var(--paper);
}

/* `display: flex` above would otherwise override the hidden attribute. */
.cookie-banner[hidden] {
  display: none;
}

.cookie-banner-text {
  flex: 1 1 18rem;
  max-width: 46rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.cookie-banner-text a {
  color: var(--berry);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.cookie-banner-actions {
  display: flex;
  flex: 1 1 auto;
  gap: 0.5rem;
  max-width: 16rem;
}

.cookie-banner-button {
  flex: 1 1 0;
  min-width: 6.5rem;
  height: 2.75rem;
  margin: 0;
  padding: 0 1rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.cookie-banner-button:hover {
  background: var(--ink);
  color: var(--cream);
}

.cookie-banner-button:focus-visible,
.cookie-banner-text a:focus-visible,
.cookie-choice-button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Focus moves to <main tabindex="-1"> after a choice; it isn't a control, so no ring. */
main:focus {
  outline: none;
}

/* Footer "Cookie choices": looks like the Privacy link next to it. */
.cookie-choice-button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.cookie-choice[hidden] {
  display: none;
}

/* 360 px: the text takes the full width and the two buttons share the row below, 50/50. */
@media (max-width: 39.99rem) {
  .cookie-banner {
    justify-content: flex-start;
  }

  .cookie-banner-actions {
    flex-basis: 100%;
    max-width: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cookie-banner-button {
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
  }
}

@media (forced-colors: active) {
  .cookie-banner {
    border: 1px solid CanvasText;
  }
}

@media print {
  .cookie-banner {
    display: none;
  }
}