@import url(/fonts.css);

:root {
  --paper: #f7eedb;
  --paper-2: #fbf5e8;
  --card: #fffaf0;
  --ink: #2b1d16;
  --muted: #6d5a4c;
  --red: #b8242f;
  --red-deep: #8e1a23;
  --green: #1d5a46;
  --green-2: #2f8a68;
  --gold: #c99a2e;
  --gold-soft: #f2d27a;
  --aqua: #5fbdb7;
  --pink: #ef8fa7;
  --line: #dccaa5;
  --field: #ffffff;
  --shadow: rgba(60, 30, 10, .16);
  --snow: #ffffff;
  --script: "Yellowtail", "Brush Script MT", cursive;
  --serif: "Fraunces", Georgia, serif;
  --mono: "Courier Prime", "Courier New", monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1d2b;
    --paper-2: #13263a;
    --card: #182c40;
    --ink: #f6ecd6;
    --muted: #b9ab93;
    --red: #ec5a5f;
    --red-deep: #c23d45;
    --green: #7fd1ad;
    --green-2: #4fb48c;
    --gold: #f0c25a;
    --line: #2f4862;
    --field: #0f2032;
    --shadow: rgba(0, 0, 0, .4);
    --snow: #dfe9f3;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23c99a2e' opacity='.22'%3E%3Cpath d='M40 20l2 12 12 2-12 2-2 12-2-12-12-2 12-2z'/%3E%3Cpath d='M160 120l1.5 8 8 1.5-8 1.5-1.5 8-1.5-8-8-1.5 8-1.5z'/%3E%3C/g%3E%3Cg fill='%235fbdb7' opacity='.25'%3E%3Ccircle cx='120' cy='40' r='3'/%3E%3Ccircle cx='30' cy='170' r='2.5'/%3E%3Ccircle cx='190' cy='200' r='2'/%3E%3C/g%3E%3C/svg%3E");
  color: var(--ink);
  font: 18px/1.55 var(--serif);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  overflow-x: hidden;
}
a { color: var(--red); text-underline-offset: 3px; }
::selection { background: var(--gold-soft); color: #2b1d16; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* Snow: two slow layers of flakes. */
.snowfall { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image: radial-gradient(circle, var(--snow) 1.3px, transparent 1.6px), radial-gradient(circle, var(--snow) 2px, transparent 2.4px);
  background-size: 90px 90px, 160px 160px; background-position: 0 0, 40px 60px;
  animation: snow 18s linear infinite; }
@media (prefers-color-scheme: light) { .snowfall { opacity: .9; filter: drop-shadow(0 0 1px rgba(120, 90, 50, .35)); } }
@keyframes snow { to { background-position: 30px 90px, 80px 220px; } }

/* Garland and hanging ornaments */
.garland { position: relative; overflow-x: clip; height: 190px; margin-bottom: -120px; z-index: 2; pointer-events: none; }
.tinsel { position: absolute; top: -4px; left: -2%; width: 104%; height: 80px; }
.drop { position: absolute; top: 18px; transform-origin: top center; transform: translateX(-50%); animation: sway 5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.7s); }
.drop .string { display: block; width: 1.5px; height: var(--len); margin: 0 auto -6px; background: linear-gradient(var(--gold), #a8893b); }
.drop .orn { display: block; filter: drop-shadow(0 6px 6px var(--shadow)); }
@keyframes sway { from { rotate: -3deg; } to { rotate: 3deg; } }
@media (max-width: 640px) {
  .d1, .d3, .d5, .d7 { display: none; } .garland { height: 120px; margin-bottom: -70px; }
  .drop .string { height: calc(var(--len) * .4); } .drop .orn { width: 40px; height: auto; }
}

/* Hero */
header.hero { position: relative; z-index: 1; text-align: center; padding: 120px 0 0; }
.presents { font: 700 13px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--green); margin: 0 0 6px; }
h1.title { margin: 0; font: 400 clamp(64px, 15vw, 132px)/.92 var(--script); color: var(--red); letter-spacing: .005em;
  text-shadow: 3px 3px 0 var(--paper), 6px 6px 0 var(--gold); transform: rotate(-4deg); padding: 6px 0 14px; }
.tagline { display: inline-flex; gap: 14px; align-items: center; font: 700 14px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); margin: 18px 0 0; }
.tagline .burst { width: 14px; height: 14px; color: var(--gold); }
.lede { max-width: 34em; margin: 22px auto 0; font-size: 20px; }
.busbox { max-width: 720px; margin: 8px auto 0; padding: 0 8px; }
svg.bus { width: 100%; height: auto; display: block; }
svg.bus .shadow { fill: rgba(40, 20, 10, .14); }
svg.bus .snowbank { fill: #ffffff; stroke: #e2d6bd; stroke-width: 1.5; }
svg.bus .sign { font: 700 9px var(--mono); fill: #f3b23a; letter-spacing: .08em; }
svg.bus .busword { font: 26px var(--script); fill: #fbf1d6; }
/* The bus drives in place, like the one on 50in50.group: the body bobs on its springs, the wheels
   spin, exhaust puffs drift back, and snowy pines and tire tracks slide past. All transforms and
   opacity, inside the SVG, so nothing widens the page or forces layout. */
svg.bus { overflow: hidden; }
svg.bus .bob { animation: bob .45s ease-in-out infinite alternate; }
svg.bus .spin { animation: spin .6s linear infinite; transform-box: fill-box; transform-origin: center; }
svg.bus .jiggle { animation: jiggle .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 10% 60%; }
svg.bus .bulb { animation: twinkle 2.4s steps(1) infinite, swing .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
svg.bus .b1 { animation-delay: .8s, -.3s; } svg.bus .b2 { animation-delay: 1.6s, -.6s; }
svg.bus .pass { animation: pass 14s linear infinite; }
svg.bus .tracks { animation: tracks .5s linear infinite; }
svg.bus .tracks path { stroke: #d8cbb0; stroke-width: 3; stroke-linecap: round; fill: none; }
svg.bus .pine { fill: #9cc2b0; } svg.bus .cap { fill: #ffffff; } svg.bus .post { fill: #b9a98a; } svg.bus .lamp { fill: #f6d77a; }
svg.bus .puff { fill: #e3dacb; opacity: 0; animation: puff 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
svg.bus .puff.p2 { animation-delay: .6s; } svg.bus .puff.p3 { animation-delay: 1.2s; }
@keyframes bob { to { transform: translateY(2.5px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes jiggle { from { transform: rotate(-1deg); } to { transform: rotate(1.2deg) translateY(-1px); } }
@keyframes swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes twinkle { 50% { opacity: .45; } }
@keyframes pass { to { transform: translateX(-640px); } }
@keyframes tracks { to { transform: translateX(-40px); } }
@keyframes puff { 0% { opacity: .8; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-60px, -20px) scale(2.4); } }
@media (prefers-color-scheme: dark) {
  svg.bus .pine { fill: #2d5a4b; } svg.bus .cap { fill: #dfe9f3; } svg.bus .post { fill: #6b7c8c; }
  svg.bus .tracks path { stroke: #a9bccd; } svg.bus .puff { fill: #8b9bab; }
}
@media (prefers-color-scheme: dark) { svg.bus .shadow { fill: rgba(0, 0, 0, .4); } svg.bus .snowbank { fill: #e6eef6; stroke: #a9bccd; } }

/* The ticket: countdown and the facts */
.ticket { position: relative; z-index: 1; margin: -6px auto 0; max-width: 640px; display: grid; grid-template-columns: 1fr auto; background: #b8242f; color: #fff6e3; border-radius: 10px; box-shadow: 0 10px 30px var(--shadow); overflow: hidden; }
.ticket .main { padding: 22px 24px; }
.ticket .eyebrow { font: 700 12px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .85; }
.ticket .count { font: 600 clamp(30px, 6vw, 40px)/1.1 var(--serif); margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.ticket .count small { font-size: .5em; font-weight: 500; letter-spacing: .02em; opacity: .9; margin: 0 .5em 0 .12em; }
.ticket .when { font-size: 16px; opacity: .92; }
.ticket .stub { display: grid; align-content: center; gap: 12px; padding: 18px 22px; background: #8e1a23; border-left: 3px dashed rgba(255, 246, 227, .55); min-width: 170px; }
.ticket .stub small { display: block; font: 700 11px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.ticket .stub b { font: 600 19px/1.2 var(--serif); }
.ticket::before, .ticket::after { content: ""; position: absolute; right: calc(170px + 41px); width: 22px; height: 22px; border-radius: 50%; background: var(--paper); }
.ticket::before { top: -11px; } .ticket::after { bottom: -11px; }
@media (max-width: 560px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket .stub { grid-template-columns: 1fr 1fr; border-left: 0; border-top: 3px dashed rgba(255, 246, 227, .55); }
  .ticket::before, .ticket::after { display: none; }
}

/* How it works */
.how { position: relative; z-index: 1; margin: 46px auto 0; max-width: 640px; }
h2.script { font: 400 46px/1 var(--script); color: var(--green); margin: 0 0 14px; transform: rotate(-2deg); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 700 19px/1 var(--mono); color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .6), transparent 30%), var(--c, #c8202d); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .25); }
.steps li:nth-child(2)::before { --c: #2f8a68; } .steps li:nth-child(3)::before { --c: #d99a2c; }
.steps b { display: block; font-weight: 650; }

/* The greeting card that holds the form */
.card { position: relative; z-index: 1; margin: 48px auto 0; max-width: 680px; background: var(--card); border-radius: 6px; padding: 14px; box-shadow: 0 16px 40px var(--shadow);
  background-image: repeating-linear-gradient(-45deg, var(--red) 0 14px, #fffaf0 14px 28px); }
.card > .in { background: var(--card); border-radius: 3px; padding: 34px clamp(18px, 5vw, 48px) 40px; }
@media (prefers-color-scheme: dark) { .card { background-image: repeating-linear-gradient(-45deg, #c23d45 0 14px, #f6ecd6 14px 28px); } }
.card h2 { font: 400 52px/1 var(--script); color: var(--red); margin: 0; text-align: center; }
.card .sub { text-align: center; margin: 8px 0 26px; color: var(--muted); font-size: 16px; }

form .q { margin: 0 0 24px; }
form label.l, form legend.l { display: block; font-weight: 600; font-size: 18px; margin: 0 0 8px; padding: 0; }
.req { color: var(--red); font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-left: 6px; white-space: nowrap; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=datetime-local], textarea, select {
  width: 100%; font: 18px/1.4 var(--serif); color: var(--ink); background: var(--field); border: 2px solid var(--line); border-radius: 6px; padding: 12px 14px; }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
textarea { min-height: 96px; resize: vertical; }
input[type=date] { max-width: 260px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.opt { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border: 2px solid var(--line); border-radius: 999px; cursor: pointer; background: var(--field); font-size: 17px; }
.opt:has(input:checked) { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--field)); }
.opt input { accent-color: var(--red); width: 20px; height: 20px; flex: none; margin: 0; }
.opt input[type=text] { padding: 6px 10px; font-size: 16px; border-width: 1px; height: auto; width: auto; flex: 1; min-width: 0; }
.check { display: flex; gap: 12px; align-items: center; font-size: 17px; cursor: pointer; }
.check input { accent-color: var(--red); width: 22px; height: 22px; margin: 0; }
.err { color: var(--red); font: 700 14px/1.3 var(--mono); margin: 6px 0 0; }
.q.bad input, .q.bad textarea { border-color: var(--red); }
.notice { border: 2px solid var(--red); border-radius: 6px; padding: 12px 16px; margin: 0 0 22px; font-size: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

button, .btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none;
  font: 700 17px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff8e6; background: #b8242f; padding: 18px 26px; border-radius: 999px;
  box-shadow: 0 4px 0 #7a141c, 0 10px 20px var(--shadow); }
button:hover, .btn:hover { filter: brightness(1.07); }
button:active, .btn:active { translate: 0 2px; box-shadow: 0 2px 0 #7a141c; }
button:focus-visible, .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.submit { display: flex; justify-content: center; margin-top: 30px; }
.submit button { width: 100%; max-width: 420px; font-size: 18px; }
.privacy { font-size: 15px; color: var(--muted); text-align: center; margin: 18px auto 0; max-width: 32em; }

/* Footer */
footer.foot { position: relative; z-index: 1; text-align: center; padding: 56px 20px 70px; color: var(--muted); font-size: 15px; }
footer.foot .doc { max-width: 30em; margin: 0 auto 10px; font-style: italic; }
footer.foot .sig { font: 34px/1 var(--script); color: var(--green); display: block; margin: 14px 0 4px; }

/* Thanks and closed */
.big-note { text-align: center; }
.big-note h2 { font-size: 64px; }
.big-note p { font-size: 19px; }
.big-note .ornrow { display: flex; justify-content: center; gap: 10px; margin: 6px 0 14px; }

@media (prefers-reduced-motion: reduce) {
  .snowfall, .drop, svg.bus .bulb, svg.bus .bob, svg.bus .spin, svg.bus .jiggle, svg.bus .pass, svg.bus .tracks, svg.bus .puff { animation: none; }
}
@media (max-width: 480px) { body { font-size: 17px; } .lede { font-size: 18px; } .card { padding: 9px; } }
@media (max-width: 640px) {
  header.hero { padding-top: 64px; }
  .presents { letter-spacing: .16em; font-size: 11px; }
  .tagline { font-size: 11px; letter-spacing: .1em; gap: 6px; }
}

/* The address group: street, unit, then city / state / ZIP on one row on wider screens. */
.addr .part { margin: 0 0 12px; }
.addr .sl { display: block; font-size: 15px; margin: 0 0 4px; color: var(--muted); }
.addr .opt-note { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-left: 6px; }
.addr .addr-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 12px; }
.addr .addr-row .part { margin: 0; }
.addr select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 30px; }
.addr .region { display: none; margin-top: 12px; }
.addr:has(option[value="__other"]:checked) .region { display: block; }
.addr .part.bad input, .addr .part.bad select { border-color: var(--red); }
.oldaddr { font: 15px/1.5 var(--mono); border-left: 4px solid var(--gold); padding: 8px 12px; white-space: pre-line; }
@media (max-width: 560px) { .addr .addr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .addr .part-city, .addr .part-state { grid-column: 1 / -1; } }