@font-face {
  font-family: "Roboto";
  src: url("./fonts/roboto/Roboto-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Central design controls. text-glow.js reads the --glow-* values below. */
  --font-family: "Roboto";
  --font-weight-body: 400;
  --font-weight-brand: 700;
  --font-weight-control: 500;
  --wordmark-size: clamp(2.5rem, .8rem + 8vw, 5.5rem);
  --company-scale: .4;
  --identity-width: 48rem;
  --identity-gap: .75rem;
  --portal-width: 21rem;
  --portal-gap: clamp(3.5rem, 9vh, 6rem);
  --portal-description-size: 1.125rem;
  --guest-panel-width: 28rem;
  --page-text: #f4f7f5;
  --page-background: #173d3b;

  /* LegendList light settings; solid base fill requested for both text lines. */
  --glow-wordmark-rgb: 241 232 215;
  --glow-company-rgb: 227 210 180;
  --glow-ivory-rgb: 243 235 220;
  --glow-shadow-rgb: 236 214 168;
  --glow-radius: 96px;
  --glow-rise: .50;
  --glow-decay: .965;
  --glow-tail: .018;
  --glow-base-opacity: 1;
  --glow-blur: 34px;
  --glow-wide-multiplier: 1.9;
  --glow-shadow-opacity: .55;
  --glow-shadow-gain: .42;
  --glow-edge-rgb: 255 255 255;
  --glow-edge-width: .4px;
  --glow-edge-opacity: .4;

  --frost-background: linear-gradient(135deg, rgb(255 255 255 / .82), rgb(245 245 248 / .68));
  --frost-border: rgb(255 255 255 / .72);
  --frost-blur: 28px;
  --frost-saturation: .45;
  --frost-text: #20262b;
  --frost-muted: #42484c;
  --frost-focus: #30383f;
  --frost-radius: 1.25rem;
  --field-background: rgb(255 255 255 / .4);
  --field-border: rgb(32 38 43 / .3);
  --dialog-width: 29rem;

  color-scheme: dark;
  font-family: var(--font-family);
  font-weight: var(--font-weight-body);
  color: var(--page-text);
  background: var(--page-background);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
button, input, select, textarea { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
button, a, input, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #f5fff9;
  outline-offset: 5px;
}

.forest {
  position: fixed;
  inset: 0;
  background: url("./images/forest-poster.webp") center / cover;
  pointer-events: none;
}
#forest-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; }
#forest-video.is-ready { opacity: 1; }
.shade {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, rgb(7 25 20 / .18), rgb(7 25 20 / .28)),
    linear-gradient(transparent 30%, rgb(7 25 20 / .2));
  pointer-events: none;
}
main {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--portal-gap);
  padding: 4rem 1.5rem 3rem;
  text-align: center;
}
.identity { width: min(100%, var(--identity-width)); }
.wordmark {
  margin: 0;
  font-size: var(--wordmark-size);
  font-weight: var(--font-weight-brand);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-kerning: none;
  white-space: nowrap;
  color: rgb(244 249 246);
  background: url("./images/frost-grain.svg"),
    linear-gradient(150deg, rgb(253 255 253) 15%, rgb(222 236 230) 56%, rgb(248 253 250));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 1px rgb(255 255 255 / .14), 0 0 20px rgb(227 248 235 / .06);
}
.company-name {
  margin: var(--identity-gap) 0 0;
  font-size: calc(var(--wordmark-size) * var(--company-scale));
  line-height: 1.5;
  font-kerning: none;
  white-space: nowrap;
}
.portal { width: min(100%, var(--portal-width)); }
.portal-actions { display: grid; gap: .8rem; }
.portal-description { margin: 0; text-align: center; font-size: var(--portal-description-size); line-height: 1.5; }
.action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 3.25rem;
  padding: .8rem 1.3rem;
  border-radius: .75rem;
  text-decoration: none;
  border: 1px solid rgb(241 251 245 / .38);
  color: #f6faf7;
  background: rgb(240 251 244 / .09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-weight: var(--font-weight-control);
  font-size: 1rem;
  line-height: 1.35;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.action:hover { background: rgb(240 251 244 / .17); border-color: rgb(241 251 245 / .7); }
.action.primary { color: #233d35; background: rgb(248 252 249 / .92); border-color: transparent; }
.action.primary:disabled { cursor: not-allowed; background: rgb(236 244 239 / .72); color: #344940; }
#letter-glow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .glow-ready #letter-glow { display: block; }
  .glow-ready [data-glow] { color: transparent; -webkit-text-fill-color: transparent; background: none; text-shadow: none; }
}
.motion-toggle {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  min-height: 2.75rem;
  padding: .65rem .9rem;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: .6rem;
  color: #f4f7f5;
  background: rgb(7 25 20 / .65);
  font-size: .75rem;
  cursor: pointer;
}
.motion-toggle[hidden] { display: none; }
@media (max-height: 36rem) { .motion-toggle { position: relative; float: right; margin: 0 1rem 1rem; right: auto; bottom: auto; } }

.request-dialog {
  width: min(calc(100% - 2rem), var(--dialog-width));
  max-height: calc(100svh - 2rem);
  padding: 2rem;
  border: 1px solid var(--frost-border);
  border-radius: var(--frost-radius);
  background: var(--frost-background);
  backdrop-filter: blur(var(--frost-blur)) saturate(var(--frost-saturation));
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(var(--frost-saturation));
  color: var(--frost-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .65), 0 1.5rem 6rem rgb(0 0 0 / .25);
  text-align: left;
}
.request-dialog::backdrop { background: rgb(8 10 14 / .25); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.dialog-heading h2 { font-size: 1.6rem; line-height: 1.2; font-weight: var(--font-weight-control); margin: 0; }
.close { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1.8rem; line-height: 1; min-width: 2.75rem; min-height: 2.75rem; }
.dialog-copy { color: var(--frost-muted); line-height: 1.5; font-size: .9375rem; margin: 0 0 1.5rem; }
.field { display: grid; gap: .45rem; margin: 1rem 0; font-size: .875rem; }
.field small { color: var(--frost-muted); font-weight: var(--font-weight-body); }
input, textarea { width: 100%; border: 1px solid var(--field-border); border-radius: .5rem; padding: .8rem; color: var(--frost-text); background: var(--field-background); color-scheme: light; }
textarea { resize: vertical; min-height: 6rem; }
.form-note { color: var(--frost-muted); font-size: .8125rem; line-height: 1.5; margin: 1rem 0; }
.request-dialog .action { width: 100%; color: var(--frost-text); background: rgb(255 255 255 / .7); border-color: rgb(32 38 43 / .2); }
.request-dialog .action:hover { background: rgb(255 255 255 / .9); border-color: rgb(32 38 43 / .4); }
.request-dialog :focus-visible { outline-color: var(--frost-focus); }

/* The authenticated reception shares the landing page's font and frost controls. */
.guest-portal { padding: clamp(1rem, 5vw, 3rem); }
.guest-portal .guest-panel {
  position: relative;
  display: block;
  width: min(100%, var(--guest-panel-width));
  min-height: auto;
  margin: 5vh auto;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--frost-border);
  border-radius: var(--frost-radius);
  background: var(--frost-background);
  backdrop-filter: blur(var(--frost-blur)) saturate(var(--frost-saturation));
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(var(--frost-saturation));
  color: var(--frost-text);
  overflow-wrap: anywhere;
}
.guest-panel a { color: inherit; }
.guest-panel h1 { font-size: 1.5rem; line-height: 1.3; }
.guest-panel h2 { font-size: 1.125rem; margin: 1.5rem 0 .5rem; }
.guest-panel p, .guest-panel li { line-height: 1.6; }
.guest-panel .guest-brand { font-size: 1.5rem; font-weight: var(--font-weight-brand); text-decoration: none; }
.guest-panel .action { width: 100%; color: var(--frost-text); background: var(--field-background); border-color: var(--field-border); }
.guest-panel :focus-visible { outline-color: var(--frost-focus); }
.guest-preview { margin-left: .5rem; font-size: .75rem; color: var(--frost-muted); }
.guest-controls { display: grid; gap: 1rem; margin-top: 1.25rem; text-align: left; }
.guest-control { display: grid; gap: .35rem; margin: 0; }
.guest-control > label, .guest-control > .guest-hint { margin: 0; color: var(--frost-muted); font-size: .8125rem; line-height: 1.45; }
.guest-control input[readonly] { width: 100%; min-width: 0; min-height: 2.75rem; padding: .65rem .75rem; border: 1px solid var(--field-border); border-radius: .5rem; color: var(--frost-text); background: rgb(255 255 255 / .25); cursor: default; }
.guest-control input::placeholder { color: var(--frost-muted); }
.guest-control .action { font-size: .875rem; }
.guest-control .action:disabled { opacity: .6; cursor: default; }
.guest-control > .guest-status-error { padding: .6rem .75rem; border-radius: .5rem; background: #fbe9e2; color: #71311e; }
.guest-confirmations { display: grid; gap: .65rem; margin-bottom: .35rem; }
.guest-confirmation { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .8125rem; line-height: 1.45; }
.guest-accept { display: flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .8125rem; }
.guest-accept input { margin: 0; width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--frost-text); }
.guest-confirmation details[open] { flex-basis: 100%; }
.guest-confirmation summary { cursor: pointer; text-decoration: underline; color: var(--frost-muted); }
.guest-confirmation details p { margin: .4rem 0 0; color: var(--frost-muted); }
.guest-portal .legal-panel { --guest-panel-width: 46rem; text-align: left; }
.legal-panel h1 { margin-top: 1.5rem; }
.legal-panel p { font-size: .9375rem; }
.mail-status { line-height: 1.5; font-size: .875rem; margin: 1rem 0 0; }
.mail-status:empty { display: none; }

@media (min-width: 48rem) { :root { --identity-gap: 1rem; } }
@media (max-aspect-ratio: 3/4) { .forest { background-position: 65% center; } }
@media (max-aspect-ratio: 3/4) { #forest-video { object-position: 65% center; } }
@media (max-height: 36rem) and (min-width: 40rem) { main { gap: 2rem; padding-block: 2rem; } }
@media (prefers-reduced-motion: reduce) {
  #letter-glow { display: none; }
  .action { transition: none; }
}
@media (forced-colors: active) {
  .wordmark { -webkit-text-fill-color: CanvasText; background: none; }
  .forest, .shade, #letter-glow { display: none; }
  .action { border: 1px solid ButtonText; }
}