html,body{margin:0;width:100%;height:100%;background:#071422}
@font-face {
  font-family: 'Pause Show Condensed';
  src: url('/assets/fonts/RobotoCondensed.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.event-pause {
  --pause-navy: #071422;
  --pause-gold: #edc977;
  --pause-white: #f7f8fa;
  --pause-muted: #becbd8;
  box-sizing: border-box;
  height: var(--app-viewport-height, 100dvh);
  overflow: auto;
  overscroll-behavior-y: contain;
  color-scheme: dark;
  color: var(--pause-white);
  background: var(--pause-navy);
  border-top: 3px solid var(--pause-gold);
  border-image: linear-gradient(90deg, #9c7335, #f2d994 48%, #9c7335) 1;
  font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
  scrollbar-color: #72859a var(--pause-navy);
  scrollbar-width: thin;
}

.event-pause *, .event-pause *::before, .event-pause *::after { box-sizing: border-box; }
.event-pause:focus-visible { outline: 3px solid var(--pause-gold); outline-offset: -7px; }
.event-pause ::selection { color: var(--pause-navy); background: var(--pause-gold); }
.event-pause p, .event-pause h1 { margin: 0; }

.event-pause__page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: min(100%, 1184px);
  margin-inline: auto;
  padding: max(40px, env(safe-area-inset-top)) max(48px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(48px, env(safe-area-inset-left));
}

.event-pause__notice { margin-block: auto; padding-block: 28px 52px; }
.event-pause__hero {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(40px, 7vw, 100px);
}

.event-pause__logo { display: block; width: min(100%, 336px); height: auto; margin-inline: auto; }
.event-pause__message { min-width: 0; }
.event-pause h1 {
  font-family: 'Pause Show Condensed', 'Segoe UI', sans-serif;
  max-width: 20ch;
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.event-pause__thanks { max-width: 46ch; margin-top: 18px !important; color: var(--pause-muted); font-size: 1rem; line-height: 1.65; }


.event-pause__footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; color: var(--pause-muted); font-size: .8125rem; line-height: 1.5; }

@media (max-width: 900px) {
  .event-pause__page { padding-inline: max(32px, env(safe-area-inset-left)) max(32px, env(safe-area-inset-right)); }
  .event-pause__hero { gap: 36px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); }
}

@media (max-width: 619px) {
  .event-pause__page { padding: max(28px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
  .event-pause__notice { padding-block: 8px 32px; }
  .event-pause__hero { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: center; }
  .event-pause__logo { width: 192px; }
  .event-pause h1 { margin-inline: auto; font-size: 2rem; }
  .event-pause__thanks { margin: 14px auto 0 !important; font-size: .9375rem; line-height: 1.6; }
  .event-pause__footer { justify-content: center; text-align: center; font-size: .75rem; gap: 4px 16px; }
}

@media (max-height: 740px) and (max-width: 619px) {
  .event-pause__page { padding-block: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom)); }
  .event-pause__notice { padding-block: 0 16px; }
  .event-pause__logo { width: 104px; }
  .event-pause__hero { gap: 16px; }
  .event-pause h1 { font-size: 1.625rem; }
  .event-pause__thanks { margin-top: 10px !important; }
}

@media (max-height: 540px) and (min-width: 620px) {
  .event-pause__page { padding-block: max(22px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-bottom)); }
  .event-pause__notice { padding-block: 0 18px; }
  .event-pause__hero { grid-template-columns: minmax(0, .65fr) minmax(0, 1.4fr); gap: 32px; }
  .event-pause__logo { width: min(100%, 184px); }
  .event-pause h1 { font-size: 1.875rem; }
  .event-pause__thanks { margin-top: 10px !important; font-size: .875rem; line-height: 1.5; }
  .event-pause__footer { font-size: .75rem; }
}

@media (forced-colors: active) {
  .event-pause { border-image: none; background: Canvas; color: CanvasText; }
  .event-pause:focus-visible { outline-color: Highlight; }
  .event-pause h1, .event-pause__thanks, .event-pause__footer { color: CanvasText; }
}