/* HAPPY HOUR holding page.
   Every style lives here: the CSP (style-src 'self') blocks inline styles. */

/* ---------- Fonts (self-hosted Google Fonts subsets; licences in /assets/fonts) ---------- */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo is a variable font: one file covers every weight the design uses (500–800). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/permanent-marker-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  --hh-yellow: #ffc414;
  --hh-yellow-press: #ebaf00;
  --hh-ink: #141412;
  --hh-smoke: #3a3834;
  --hh-foam: #f5f0e6;
  --hh-stone-200: #cfc9bd;
  --hh-stone-400: #8f897d;
  --hh-stone-600: #6b665c;

  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-ui: "Archivo", system-ui, sans-serif;
  --font-accent: "Permanent Marker", "Marker Felt", cursive;

  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;

  /* Fluid type. Mobile values track the 390px artboard; wider layouts override them. */
  --h1: clamp(96px, 27.7vw, 168px);
  --marker: clamp(26px, 7.2vw, 36px);
  --lead: 17px;
  --status-title: 44px;
  --status-text: 15px;
}

/* ---------- Base ---------- */

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

[hidden] {
  display: none !important;
}

html {
  background: var(--hh-ink);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--hh-ink);
  color: var(--hh-foam);
  font-family: var(--font-ui);
  font-weight: 500;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

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

a {
  color: var(--hh-foam);
  text-underline-offset: 4px;
}

a:hover {
  text-decoration-thickness: 2px;
}

button,
input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--hh-yellow);
  outline-offset: 3px;
}

[tabindex="-1"]:focus {
  outline: none;
}

::selection {
  background: var(--hh-yellow);
  color: var(--hh-ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Page layout (mobile first) ---------- */

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 28px;
  width: 100%;
  max-width: 1920px;
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  padding: 20px 18px 32px;
}

.site-header {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.site-header a {
  display: block;
  border-radius: 4px;
}

.logo {
  width: auto;
  height: 35.84px;
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Handwritten line: Permanent Marker, rotated −4°. */
.marker {
  align-self: flex-start;
  margin: 0 0 6px 2px;
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: var(--marker);
  line-height: 1;
  color: var(--hh-yellow);
  transform: rotate(-4deg);
  transform-origin: left bottom;
}

.marker--split {
  line-height: 1.05;
}

.marker__line {
  display: block;
  white-space: nowrap;
}

/* Line 1 ("coming soon to") and line 2 (the town) are always laid out the same way,
   at every width and for every town — nobody shrinks and nothing reflows onto a
   different number of lines depending on what's showing. */

.marker__line--town {
  display: block;
}

/* Town rotator: a one-line clipping window with a sliding track inside. Normally the
   track holds exactly one .town__option (the current town); a swap briefly appends the
   next one below it, then slides the track up by one line so the old name exits the
   top and the new one arrives from the bottom (town-rotator.js), before the old node is
   removed. min-width reserves room for the longest name ("Bishop's Stortford.") so the
   box doesn't resize as different names swap in — nothing shrinks, nothing jumps.
   The whole thing is aria-hidden; a .visually-hidden sibling elsewhere in the marker
   gives screen readers a single stable sentence instead. WCAG 2.2.2 is handled in JS
   by pausing on tab hide and on hover/focus of [data-town-region] — no visible Pause. */
.town {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  min-width: 9.6em;
  line-height: 1.2;
  vertical-align: top;
}

.town__track {
  display: block;
}

.town__track.is-sliding {
  transform: translateY(-1.2em);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.town__option {
  display: block;
  line-height: 1.2;
  white-space: nowrap;
}

.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h1);
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--hh-foam);
}

.title__line {
  display: block;
}

.lead {
  max-width: 27em;
  font-size: var(--lead);
  line-height: 1.45;
  font-weight: 500;
}

.eyebrow {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hh-stone-200);
}

/* ---------- Buttons (HappyHour.Button) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast), background-color var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
  filter: brightness(0.94);
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn--primary {
  background: var(--hh-yellow);
  color: var(--hh-ink);
}

.btn--primary:hover:not(:disabled) {
  background: var(--hh-yellow-press);
  color: var(--hh-ink);
}

.btn--outline {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px var(--hh-smoke);
}

.btn--outline:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1.5px var(--hh-stone-400);
}

.btn--lg {
  height: 60px;
  padding: 0 28px;
  font-size: 18px;
}

.btn--md {
  height: 48px;
  padding: 0 22px;
  font-size: 16px;
}

/* ---------- Sign-up form ---------- */

.signup {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "label"
    "email"
    "age"
    "submit"
    "meta";
  gap: 10px;
}

.signup__label {
  grid-area: label;
}

.field {
  grid-area: email;
  width: 100%;
  height: 60px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--hh-foam);
  color: var(--hh-ink);
  caret-color: var(--hh-ink);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  appearance: none;
}

.field::placeholder {
  color: var(--hh-stone-600);
  opacity: 1;
}

.field:-webkit-autofill {
  -webkit-text-fill-color: var(--hh-ink);
  box-shadow: 0 0 0 100px var(--hh-foam) inset;
}

.check {
  grid-area: age;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}

.check__box {
  flex: none;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--hh-stone-200);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}

.check__box::before {
  content: "";
  width: 12px;
  height: 7px;
  border-bottom: 3px solid var(--hh-ink);
  border-left: 3px solid var(--hh-ink);
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}

.check__box:checked {
  border-color: var(--hh-yellow);
  background: var(--hh-yellow);
}

.check__box:checked::before {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

.signup__submit {
  grid-area: submit;
}

.honeypot {
  position: absolute;
  top: 0;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup__meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.signup__turnstile[data-interactive] {
  margin-bottom: 10px;
}

.signup__status {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--hh-stone-200);
}

.signup__status:not(:empty) {
  margin-bottom: 8px;
}

.signup__note {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--hh-stone-400);
}

.signup__note a {
  color: var(--hh-stone-200);
}

/* Post-submit and confirmed states (the mockup's "signed up" block). */
.done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.done__title {
  max-width: 13em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--status-title);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--hh-yellow);
}

.done__text {
  font-size: var(--status-text);
  line-height: 1.45;
  font-weight: 500;
  color: var(--hh-stone-200);
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.reveal {
  animation: reveal var(--dur-base) var(--ease-out) both;
}

/* ---------- Photo panel + sample deal (HappyHour.DealCard) ---------- */

.panel {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Bottom-anchored: the card sits low, over the plain area below her T-shirt, leaving
     her face and both drinks clear above it (see .panel__photo-img's object-position). */
  justify-content: flex-end;
  gap: 24px;
  padding: 28px 18px 18px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--hh-ink);
  color: var(--hh-foam);
  /* Below 1024px the panel is a normal block, sized by its (short) content — without a
     ratio it would collapse to barely more than the card's own height and the photo
     would show only a sliver. A portrait ratio close to the source crop's own (708:900)
     gives the photo real height to work with. Desktop removes this: the grid gives it
     the full column height instead (see the 1024px breakpoint below). */
  aspect-ratio: 3 / 4;
}

/* Photo fills the panel edge-to-edge, behind the padding. A bottom-weighted scrim keeps
   the label legible over any part of the image; the deal card has its own solid ink
   background, so it stays legible on its own. */
.panel__photo {
  position: absolute;
  inset: 0;
}

.panel__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Biased toward the top: keeps her face and both drinks in frame and pushes the
     plainer area below her T-shirt down where the card sits, at any panel height. */
  object-position: center 22%;
  /* Ken Burns: transform only (never triggers layout/CLS), looping back to its start
     state so there's no jump at the seam. transform-origin matches object-position
     above, so the zoom pulls in on her face and both drinks rather than a corner. The
     global prefers-reduced-motion rule (bottom of this file) collapses the duration to
     ~0 and caps iteration-count at 1, which freezes this at its 0% (unzoomed) frame —
     no separate override needed here. */
  transform-origin: 50% 22%;
  animation: panel-photo-kenburns 18s ease-in-out infinite;
}

@keyframes panel-photo-kenburns {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.08) translate(-1.5%, -1%);
  }
}

.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 20, 18, 0.05) 0%, rgba(20, 20, 18, 0.4) 60%, rgba(20, 20, 18, 0.75) 100%);
}

.ping {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}

.ping__label {
  color: var(--hh-yellow);
}

.deal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--radius-xl);
  background: var(--hh-ink);
  color: var(--hh-foam);
}

.deal__badge {
  position: absolute;
  top: -10px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--hh-ink);
  box-shadow: 0 0 0 2px var(--hh-yellow);
  color: var(--hh-foam);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
}

.deal__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.deal__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--hh-yellow);
}

.deal__venue {
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}

.deal__meta {
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  color: var(--hh-stone-200);
}

.deal__ends {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.deal__ends-label {
  font-size: 10px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0.12em;
  color: var(--hh-stone-200);
}

.deal__timer {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: normal;
  font-variant-numeric: tabular-nums;
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  font-size: 15px;
  font-weight: 800;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hh-stone-400);
}

.site-footer__meta a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--hh-stone-400);
}

/* ---------- Document pages (privacy, 404) ---------- */

.page--doc .hero {
  gap: 32px;
}

.title--doc {
  font-size: clamp(64px, 11vw + 20px, 140px);
  line-height: 0.9;
}

.doc {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 44rem;
}

.doc__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--hh-yellow);
}

.doc p,
.doc li {
  font-size: 17px;
  line-height: 1.6;
  color: var(--hh-foam);
}

.doc ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 1.25em;
}

.doc li::marker {
  color: var(--hh-yellow);
}

.doc strong {
  font-weight: 700;
}

.doc__updated {
  font-size: 13px;
  color: var(--hh-stone-400);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page--error {
  grid-template-rows: auto 1fr auto;
}

.page--error .hero {
  align-self: center;
}

/* ---------- Tablet and up: inline form, one-line marker ---------- */

@media (min-width: 640px) {
  :root {
    --marker: 36px;
    --lead: 19px;
    --status-title: 52px;
    --status-text: 17px;
  }

  .page {
    gap: 36px;
    padding: 32px 32px 40px;
  }

  .site-header {
    min-height: 48px;
  }

  .logo {
    height: 44.8px;
  }

  .intro {
    gap: 18px;
  }

  .marker {
    margin: 0 0 6px 4px;
  }

  .marker--split {
    line-height: 1;
  }

  .signup {
    grid-template-columns: minmax(0, 380px) auto;
    grid-template-areas:
      "label label"
      "email submit"
      "age age"
      "meta meta";
    justify-content: start;
  }

  .field {
    padding: 0 24px;
  }

  .done {
    gap: 14px;
  }

  .panel {
    gap: 32px;
    padding: 40px 32px 32px;
  }

  .site-footer {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 24px;
  }
}

/* ---------- Desktop: two columns (the 1440×900 artboard) ---------- */

@media (min-width: 1024px) {
  :root {
    /* 168px at 1440×900; also shrinks on short windows so the hero stays above the fold. */
    --h1: clamp(104px, min(11.67vw, 18.67vh), 216px);
    --marker: clamp(28px, calc(var(--h1) * 0.2143), 46px);
    --lead: clamp(18px, 1.39vw, 23px);
    --status-title: clamp(44px, 3.89vw, 66px);
    --status-text: clamp(16px, 1.18vw, 19px);
  }

  .page {
    grid-template-columns: minmax(0, 1fr) clamp(400px, 38.89vw, 720px);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header panel"
      "main panel"
      "footer panel";
    gap: 32px 24px;
    padding: 24px;
  }

  .site-header {
    grid-area: header;
    margin: 16px 24px 0 40px;
  }

  .hero {
    grid-area: main;
    align-self: center;
    gap: 40px;
    padding: 0 24px 0 40px;
  }

  .hero > * {
    max-width: 680px;
  }

  .intro {
    gap: 22px;
  }

  .panel {
    grid-area: panel;
    /* The grid gives the panel the full column height on its own; no ratio needed
       (and flex-end still anchors the card low, same as below 1024px). */
    aspect-ratio: auto;
    gap: clamp(32px, 3.33vw, 60px);
    padding: clamp(40px, 3.89vw, 72px) clamp(32px, 3.33vw, 64px);
  }

  .ping {
    gap: 12px;
  }

  .site-footer {
    grid-area: footer;
    margin: 0 24px 8px 40px;
  }

  /* Document pages keep a single column, with the footer pinned to the bottom. */
  .page--doc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main"
      "footer";
  }

  .page--doc .hero {
    align-self: start;
    padding-top: 24px;
  }

  .page--error .hero {
    align-self: center;
    padding-top: 0;
  }
}

/* ---------- Preferences ---------- */

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

  .btn:active:not(:disabled) {
    transform: none;
  }
}

@media (forced-colors: active) {
  .check__box {
    border-color: CanvasText;
  }

  .check__box:checked {
    background: Highlight;
  }

  .check__box::before {
    border-color: HighlightText;
  }

  .deal__badge {
    border: 1px solid CanvasText;
  }
}