/* $XMAS | Santa is the new dev. Palette taken from the cult art. */
@font-face {
  font-family: "Fredoka";
  src: url("assets/fredoka.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* color */
  --night-950: #071027;
  --night-900: #0c1838;
  --night-800: #142456;
  --night-700: #1e3474;
  --sky-200: #d6e2ff;
  --snow: #f6f8ff;
  --snow-dim: #e4eaf8;
  --ink: #0c1838;
  --ink-soft: #33416a;
  --red-600: #c8202b;
  --red-700: #a8161f;
  --red-ink: #b31b25;
  --pine-700: #17602f;
  --pine-800: #0f4a23;
  --pine-900: #0b3a1b;
  --gold: #ffd166;
  --gold-deep: #f2b632;

  /* type */
  --font: "Fredoka", ui-rounded, "Nunito", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-sm: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lede: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 4.6vw, 5.25rem);
  --fs-count: clamp(2.25rem, 1.6rem + 3vw, 4rem);

  /* space */
  --gutter: 16px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  --s9: 112px;
  --section: clamp(var(--s8), 8vw, var(--s9));
  --maxw: 1200px;

  /* shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;
  --shadow-soft: 0 10px 30px -12px rgb(3 8 24 / 0.55);
  --shadow-paper: 0 18px 40px -18px rgb(12 24 56 / 0.45);

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 140ms;
  --dur-ui: 200ms;
  --dur-shake: 420ms;

  --header-h: 60px;
}
@media (min-width: 768px) { :root { --gutter: 32px; --fs-body: 1.125rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s4)); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--snow);
  background: var(--night-900);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.08; font-weight: 700; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
::selection { background: var(--red-600); color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--night-700) var(--night-950); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s4); top: -100px; z-index: 50; padding: var(--s3) var(--s4); background: var(--gold); color: var(--ink); border-radius: var(--r-sm); font-weight: 600; }
.skip:focus { top: var(--s3); }
.gold { color: var(--gold); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: var(--s3) var(--s5);
  border-radius: var(--r-pill); border: 2px solid transparent;
  font: 600 1.0625rem/1.1 var(--font); text-decoration: none; text-align: center;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease;
}
.btn:active { transform: scale(0.97); }
.btn--red {
  color: #fff;
  background: var(--red-600);
  box-shadow: inset 0 -3px 0 var(--red-700), var(--shadow-soft);
}
.btn--snow { color: var(--ink); background: var(--snow); box-shadow: inset 0 -3px 0 var(--snow-dim), var(--shadow-soft); }
.btn--sm { min-height: 40px; padding: var(--s2) var(--s4); font-size: var(--fs-sm); }
@media (hover: hover) and (pointer: fine) {
  .btn--red:hover { background: var(--red-700); }
  .btn--snow:hover { background: #fff; }
}
.textlink { font-weight: 500; color: var(--sky-200); padding: var(--s2) var(--s1); }
@media (hover: hover) and (pointer: fine) { .textlink:hover { color: #fff; } }

.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.5;
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip--gold { color: var(--ink); background: var(--gold); }
.chip--gold::before { background: var(--red-600); }
.chip--red { color: #fff; background: var(--red-600); }
.chip--snow { color: var(--pine-900); background: var(--snow); }
.chip--snow::before { background: var(--red-600); }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgb(12 24 56 / 0.92);
  border-bottom: 1px solid rgb(214 226 255 / 0.12);
}
@supports (backdrop-filter: blur(1px)) { .top { background: rgb(12 24 56 / 0.78); backdrop-filter: blur(10px); } }
.top__in { display: flex; align-items: center; gap: var(--s4); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: 1.25rem; text-decoration: none; margin-right: auto; }
.brand img { border-radius: 50%; border: 2px solid var(--snow); }
.top__nav { display: none; }
@media (min-width: 768px) {
  .top__nav { display: flex; gap: var(--s1); }
  .top__nav a { display: block; padding: var(--s2) var(--s3); border-radius: var(--r-pill); text-decoration: none; font-weight: 500; color: var(--sky-200); transition: color var(--dur-ui) ease, background-color var(--dur-ui) ease; }
  .top__nav a:hover { color: #fff; background: rgb(214 226 255 / 0.1); }
}

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate;
  padding-top: clamp(var(--s6), 5vw, var(--s8));
  padding-bottom: calc(var(--section) + var(--s5));
  background:
    radial-gradient(60rem 36rem at 85% -10%, rgb(52 90 180 / 0.55), transparent 70%),
    linear-gradient(180deg, var(--night-900), var(--night-800) 70%, var(--night-700));
}
.snow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero__grid { display: grid; gap: var(--s6); align-items: center; }
.hero h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
.hero h1 .gold { display: block; }
.lede { margin-top: var(--s5); font-size: var(--fs-lede); color: var(--sky-200); max-width: 34ch; }
.hero .chip { margin-top: var(--s4); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s6); }
.cta .btn { flex: 1 1 100%; }
@media (min-width: 480px) { .cta .btn { flex: 0 0 auto; } }

.hero__art { margin: 0; justify-self: center; width: 100%; max-width: 560px; }
.hero__art picture {
  display: block; padding: 8px; border-radius: var(--r-lg);
  background: repeating-linear-gradient(45deg, var(--red-600) 0 14px, var(--snow) 14px 28px);
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.6);
  transform: rotate(-1.5deg);
}
.hero__art img { width: 100%; height: auto; aspect-ratio: 1; border-radius: calc(var(--r-lg) - 8px); background: var(--night-800); }

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s7); }
  .hero__art { order: 0; }
}

/* contract address */
.ca { margin-top: var(--s6); max-width: 560px; }
.ca__label { font-size: var(--fs-sm); font-weight: 500; color: var(--sky-200); margin-bottom: var(--s2); }
.ca__row {
  display: flex; align-items: stretch; gap: var(--s2);
  padding: var(--s2); padding-left: var(--s4);
  background: var(--night-950); border: 1px solid rgb(214 226 255 / 0.22); border-radius: var(--r-md);
}
.ca__value {
  flex: 1 1 auto; min-width: 0; align-self: center;
  font-family: var(--mono); font-size: 0.9375rem; line-height: 1.45; color: var(--snow);
  overflow-wrap: anywhere; word-break: break-all;
}
.ca__copy {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; min-width: 92px; justify-content: center; padding: 0 var(--s4);
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  font: 600 var(--fs-sm)/1 var(--font); color: var(--ink); background: var(--gold);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease;
}
.ca__copy svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ca__copy:active { transform: scale(0.96); }
.ca__copy[data-state="done"] { background: #9be3b0; }
.ca__copy[data-state="fail"] { background: var(--snow); }
@media (hover: hover) and (pointer: fine) { .ca__copy:hover { background: var(--gold-deep); } .ca__copy[data-state="done"]:hover { background: #9be3b0; } }

/* countdown */
.countdown {
  margin-top: var(--s7);
  display: grid; gap: var(--s4);
  padding: var(--s5); border-radius: var(--r-lg);
  background: var(--night-950);
  border: 2px solid rgb(255 209 102 / 0.35);
}
.countdown__title { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); color: var(--gold); }
.countdown__units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.countdown__units li { display: grid; justify-items: center; padding: var(--s3) var(--s1); border-radius: var(--r-md); background: var(--night-800); }
.countdown__num { font-size: var(--fs-count); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown__lbl { margin-top: var(--s1); font-size: var(--fs-sm); color: var(--sky-200); }
.countdown__note { font-size: var(--fs-sm); color: var(--sky-200); }
.countdown[data-state="live"] .countdown__timer, .countdown[data-state="over"] .countdown__timer { display: none; }
@media (min-width: 768px) {
  .countdown { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: center; column-gap: var(--s6); padding: var(--s6); }
  .countdown__note { grid-column: 1; grid-row: 2; }
  .countdown__timer { grid-column: 2; grid-row: 1 / span 2; }
  .countdown__units { gap: var(--s3); }
}

/* snow drift edge */
.drift { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(36px, 5vw, 80px); fill: var(--snow); }
.drift--top { top: -1px; bottom: auto; fill: var(--snow); }

/* ---------- Santa ---------- */
.santa { background: var(--snow); color: var(--ink); padding-block: var(--s7) var(--section); }
.santa__grid { display: grid; gap: var(--s7); align-items: start; }
.santa h2 { font-size: var(--fs-h2); color: var(--red-ink); }
.santa__intro p { margin-top: var(--s4); max-width: 58ch; color: var(--ink-soft); }
.santa__intro p:first-of-type { margin-top: var(--s5); font-size: var(--fs-lede); color: var(--ink); }
.santa a { color: var(--red-ink); font-weight: 600; }

.note {
  position: relative;
  padding: var(--s6) var(--s5) var(--s5);
  background: #fffdf6;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-paper);
  transform: rotate(1deg);
  background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgb(23 96 47 / 0.12) 35px 36px);
}
.note::before { /* tape */
  content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 28px; translate: -50% 0; rotate: -3deg;
  background: repeating-linear-gradient(45deg, rgb(200 32 43 / 0.85) 0 10px, rgb(255 255 255 / 0.85) 10px 20px);
  border-radius: 3px;
}
.note__title { font-size: 1.5rem; color: var(--pine-700); }
.note__list { margin-top: var(--s4); display: grid; gap: var(--s4); counter-reset: rule; }
.note__list li { position: relative; padding-left: 36px; color: var(--ink-soft); }
.note__list li::before {
  counter-increment: rule; content: counter(rule);
  position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 0.875rem; color: #fff; background: var(--pine-700);
}
.note__list strong { color: var(--ink); font-weight: 600; }
.note .chip { margin-top: var(--s5); }
@media (min-width: 960px) { .santa__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s8); } .note { margin-top: var(--s4); } }

/* ---------- gifts ---------- */
.gifts { position: relative; padding-block: calc(var(--section) + var(--s5)) var(--section); background: var(--night-900); }
.head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.gifts h2 { font-size: var(--fs-h2); }
.gifts__intro { margin-top: var(--s4); max-width: 60ch; color: var(--sky-200); font-size: var(--fs-lede); }

.route { position: relative; display: grid; gap: var(--s6); margin-top: var(--s7); counter-reset: stop; }
.route::before { /* the candy cane path */
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 6px; border-radius: 3px;
  background: repeating-linear-gradient(180deg, var(--red-600) 0 12px, var(--snow) 12px 24px);
}
.route__stop { position: relative; display: grid; align-content: start; grid-template-columns: 60px minmax(0, 1fr); column-gap: var(--s4); row-gap: var(--s2); }
.route__icon {
  grid-row: 1 / span 2; width: 60px; height: 60px; padding: 12px; border-radius: 50%;
  background: var(--night-950); border: 2px solid var(--gold);
  fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  position: relative; z-index: 1;
}
.route__stop h3 { font-size: var(--fs-h3); align-self: end; padding-top: var(--s2); }
.route__stop p { color: var(--sky-200); max-width: 46ch; }
@media (min-width: 960px) {
  .route { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
  .route::before {
    left: 30px; right: calc((100% - 3 * var(--s5)) / 4 - 30px); top: 27px; bottom: auto; width: auto; height: 6px;
    background: repeating-linear-gradient(90deg, var(--red-600) 0 12px, var(--snow) 12px 24px);
  }
  .route__stop { grid-template-columns: 1fr; row-gap: var(--s3); }
  .route__icon { grid-row: auto; }
  .route__stop h3 { padding-top: var(--s3); }
}

.fair {
  margin-top: var(--s7); padding: var(--s5); border-radius: var(--r-lg);
  border: 2px dashed rgb(214 226 255 / 0.35);
  display: grid; gap: var(--s4); justify-items: start;
}
.fair h3 { font-size: var(--fs-h3); color: var(--gold); }
.fair ul { display: grid; gap: var(--s2); }
.fair li { position: relative; padding-left: 26px; color: var(--sky-200); }
.fair li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 10px; height: 10px; rotate: 45deg; background: var(--red-600); border-radius: 2px; }
@media (min-width: 960px) {
  .fair { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s6); padding: var(--s5) var(--s6); }
  .fair ul { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
  .fair .chip { grid-column: 2; grid-row: 1; }
}

/* ---------- advent ---------- */
.advent {
  padding-block: var(--section);
  background:
    radial-gradient(40rem 30rem at 0% 0%, rgb(255 255 255 / 0.06), transparent 70%),
    var(--pine-800);
}
.advent__grid { display: grid; gap: var(--s7); align-items: start; }
.advent h2 { font-size: var(--fs-h2); }
.advent__copy > p { margin-top: var(--s4); max-width: 52ch; color: #dcefe2; font-size: var(--fs-lede); }
.weeks { margin-top: var(--s6); display: grid; gap: var(--s5); }
.weeks li { padding-left: var(--s5); border-left: 1px solid rgb(255 255 255 / 0.35); }
.weeks h3 { font-size: var(--fs-h3); color: var(--gold); }
.weeks p { margin-top: var(--s1); color: #dcefe2; }

.calendar {
  padding: var(--s4); border-radius: var(--r-lg);
  background: var(--pine-900);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.12);
}
.doors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); }
.door {
  position: relative; aspect-ratio: 3 / 4; min-height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm) var(--r-sm) 6px 6px; cursor: pointer;
  font: 700 clamp(1.125rem, 0.9rem + 1vw, 1.625rem)/1 var(--font); color: #fff;
  background: var(--red-600);
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.22), inset 0 6px 0 var(--snow);
  transition: transform var(--dur-press) var(--ease-out);
}
.door--green { background: var(--pine-700); }
.door svg { position: absolute; bottom: 10%; left: 50%; translate: -50% 0; width: 14px; height: 14px; fill: none; stroke: rgb(255 255 255 / 0.85); stroke-width: 2.4; stroke-linecap: round; }
@media (max-width: 599px) { .door:not(.door--25) svg { display: none; } }
.door--25 { grid-column: 1 / -1; aspect-ratio: auto; min-height: 76px; background: var(--gold); color: var(--ink); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); gap: var(--s1); }
.door--25 .door__sub { display: block; font-size: var(--fs-sm); font-weight: 600; }
.door--25 svg { stroke: var(--ink); left: auto; right: var(--s4); bottom: auto; top: 50%; translate: 0 -50%; width: 18px; height: 18px; }
.door:active { transform: scale(0.96); }
.door.is-shaking { animation: door-shake var(--dur-shake) var(--ease-out); }
@keyframes door-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-4px) rotate(-2deg); }
  40% { transform: translateX(4px) rotate(2deg); }
  60% { transform: translateX(-2px) rotate(-1deg); }
  80% { transform: translateX(2px) rotate(1deg); }
}
.calendar__status { margin-top: var(--s4); min-height: 1.6em; text-align: center; font-weight: 500; color: #dcefe2; }
@media (min-width: 960px) {
  .advent__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s8); }
  .calendar { padding: var(--s5); transform: rotate(0.6deg); }
  .doors { gap: var(--s3); }
}

/* ---------- cult ---------- */
.cult { padding-block: var(--section); background: var(--night-900); }
.cult__grid { display: grid; gap: var(--s7); align-items: center; }
.cult h2 { font-size: var(--fs-h2); }
.cult p { margin-top: var(--s4); max-width: 56ch; color: var(--sky-200); }
.cult p:first-of-type { margin-top: var(--s5); color: var(--snow); font-size: var(--fs-lede); }
.links { display: grid; gap: var(--s3); }
.link-tile {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); border-radius: var(--r-md); text-decoration: none;
  background: var(--night-800); border: 1px solid rgb(214 226 255 / 0.16);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease, border-color var(--dur-ui) ease;
}
.link-tile svg { flex: 0 0 auto; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--red-600); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.links li:nth-child(2) svg { background: var(--pine-700); }
.links li:nth-child(3) svg { background: var(--gold); stroke: var(--ink); }
.link-tile span { display: grid; min-width: 0; }
.link-tile strong { font-weight: 600; font-size: 1.125rem; }
.link-tile small { font-size: var(--fs-sm); color: var(--sky-200); overflow-wrap: anywhere; }
.link-tile:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .link-tile:hover { background: var(--night-700); border-color: rgb(255 209 102 / 0.5); } }
@media (min-width: 960px) { .cult__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s8); } }

/* ---------- footer ---------- */
.foot { padding-block: var(--s8) var(--s7); background: var(--night-950); border-top: 1px solid rgb(214 226 255 / 0.1); }
.foot__brand { font-size: 1.75rem; font-weight: 700; }
.foot__brand span { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--sky-200); }
.ca--foot { margin-top: var(--s5); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: var(--s6); margin-left: calc(var(--s3) * -1); }
.foot__links a { display: inline-block; padding: var(--s2) var(--s3); color: var(--sky-200); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .foot__links a:hover { color: #fff; } }
.foot__soon { margin-top: var(--s5); font-size: var(--fs-sm); color: var(--sky-200); max-width: 60ch; }
@media (min-width: 960px) {
  .foot__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s8); align-items: end; }
  .foot__links { margin-top: 0; }
}
.foot__legal { margin-top: var(--s3); font-size: var(--fs-sm); font-weight: 600; color: var(--snow); }

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