:root {
  --red: #a00918;
  --red-dark: #730717;
  --red-light: #c51b28;
  --green: #075b32;
  --green-light: #147747;
  --white: #fffdf8;
  --gold: #f7d39a;
  --muted: #f7e4df;
  --shadow: 0 15px 45px rgb(56 0 13 / 19%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--red-dark); }
body {
  min-height: 100dvh;
  margin: 0;
  color: var(--white);
  background:
    radial-gradient(ellipse at 50% 26%, rgb(230 52 60 / 30%) 0%, transparent 51%),
    radial-gradient(ellipse at 6% 80%, rgb(255 174 137 / 6%), transparent 41%),
    linear-gradient(145deg, #97000c 0%, #af081c 43%, #760613 100%);
  position: relative;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.header-greenery {
  position: absolute;
  width: 100%; height: min(230px, 23vw);
  min-height: 105px;
  top: 0; left: 0;
  background-image: url('header-garland.webp');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.site-shell {
  width: min(100%, 540px);
  min-height: 100dvh;
  padding: clamp(98px, 13vw, 144px) 25px 27px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
  text-align: center;
}
.masthead { position: relative; margin-bottom: 22px; }
.eyebrow { font-size: .64rem; font-weight: 750; letter-spacing: .23em; }
.eyebrow--light { color: #ffe1b5; }
.eyebrow-star { margin: 0 .35rem; color: var(--white); }
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 16px auto 6px;
  line-height: .85;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  letter-spacing: -.075em;
  text-shadow: 0 4px 16px rgba(84, 0, 9, .20);
}
.brand-the { font-size: clamp(2.7rem, 8.8vw, 3.7rem); line-height: .78; font-style: italic; transform: translateX(-36px); }
.brand-main { font-size: clamp(4.15rem, 14vw, 6.1rem); font-weight: bold; font-style: italic; white-space: nowrap; }
.season-divider { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 24px; }
.season-divider p { margin: 0; font-size: .73rem; font-weight: 760; letter-spacing: .28em; white-space: nowrap; }
.season-divider span { flex: 0 1 42px; height: 1px; background: #f3c3b3; }
.view { width: 100%; }
.view--welcome { padding-top: 1px; }
.present-stage { height: 206px; position: relative; display: grid; place-items: center; margin: 4px auto 10px; }
.present {
  --gift-w: 142px;
  width: var(--gift-w);
  height: 136px;
  position: relative;
  transform: rotate(-4deg);
  filter: drop-shadow(0 19px 14px rgb(57 0 13 / 28%));
}
.present-box {
  position: absolute; left: 3px; right: 3px; top: 48px; bottom: 0;
  border: 2px solid #ffeac5; border-radius: 3px 3px 8px 8px;
  background: linear-gradient(94deg, #cda97c 0%, #f1d6ac 21%, #ffe7c0 48%, #e4ba89 83%, #ba8559 100%);
  box-shadow: inset -9px 0 12px rgb(109 58 34 / 13%);
}
.present-band { position: absolute; width: 33px; height: 100%; left: calc(50% - 16.5px); top: 0; background: linear-gradient(90deg, #9d101a 0%, #e12e36 30%, #d51a25 65%, #970c17 100%); box-shadow: 0 2px 7px rgb(111 9 13 / 14%); }
.present-lid {
  position: absolute; left: -3px; width: calc(100% + 6px); top: 30px; height: 26px;
  background: linear-gradient(120deg, #fff1ce 0%, #f2d3a2 45%, #caa176 100%);
  border: 2px solid #ffe4b6; border-radius: 5px 5px 3px 3px;
  z-index: 3;
  transform-origin: 70% 85%;
}
.present-lid-band { position: absolute; top: -2px; left: calc(50% - 18px); width: 36px; height: 27px; background: linear-gradient(90deg, #b1111d, #f33b3b 48%, #b41122); }
.ribbon-loop {
  position: absolute;
  width: 63px; height: 43px; top: -37px; left: 17px;
  border: 13px solid #dd2430; border-radius: 63% 46% 67% 53%;
  transform: rotate(27deg); box-shadow: inset 3px 1px 4px rgb(97 9 16 / 26%);
  background: transparent; z-index: 4;
}
.ribbon-loop--right { left: 69px; transform: rotate(-25deg); border-color: #f14640; }
.gift-twinkle { position: absolute; color: #ffe7b1; text-shadow: 0 0 12px #ffe1a0; }
.gift-twinkle--one { left: 18%; top: 25%; font-size: 26px; }
.gift-twinkle--two { right: 22%; top: 16%; font-size: 19px; }
.gift-twinkle--three { right: 17%; bottom: 19%; font-size: 30px; }
.section-heading {
  margin: 6px auto 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 5vw, 2.0rem);
  font-weight: normal;
  line-height: 1.25;
  text-wrap: balance;
}
.intro-text { margin: 0 auto 24px; max-width: 330px; color: #ffe9e2; font-size: 0.98rem; line-height: 1.6; }
.primary-button, .outlined-button {
  width: 100%; max-width: 396px;
  min-height: 57px;
  padding: 15px 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border: 2px solid #e2ddba;
  border-radius: 15px;
  color: var(--white);
  background: linear-gradient(180deg, #107548, #00512e);
  box-shadow: 0 6px 0 rgb(67 0 5 / 16%), 0 10px 24px rgb(62 0 10 / 14%);
  font-size: .90rem;
  font-weight: 820;
  letter-spacing: .08em;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.primary-button:hover:not(:disabled) { filter: brightness(1.14); transform: translateY(-1px); }
.primary-button:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 3px 0 rgb(67 0 5 / 16%); }
.little-note { font-size: .76rem; color: #f9d6d0; margin: 15px auto 3px; line-height: 1.55; }
.site-footer { margin-top: auto; padding-top: 24px; width: 100%; }
.foot-divider { display: flex; align-items: center; gap: 15px; color: #e4b27c; font-size: 1rem; }
.foot-divider::before, .foot-divider::after { content: ''; height: 1px; flex: 1; background: rgb(255 243 220 / 28%); }
.progress-label { font-size: .77rem; color: #ffeddd; margin: 14px 0 11px; }
.progress-track { display: flex; justify-content: center; gap: 6px; margin: 0 auto; max-width: 295px; }
.progress-track span { flex: 1; height: 7px; border: 1px solid #f5d2c9; border-radius: 10px; background: rgb(255 255 255 / 16%); }
.progress-track span.filled { background: #49b779; border-color: #9ee2b6; }
.footer-caption { margin: 27px 0 4px; color: #f6d1c8; font-size: .57rem; letter-spacing: .18em; }
.snowfall { pointer-events: none; position: fixed; z-index: 1; inset: 0; overflow: hidden; }
.snowflake { position: absolute; left: var(--snow-left); top: -25px; width: var(--snow-size); height: var(--snow-size); background: #fffaf0; border-radius: 50%; box-shadow: 0 0 7px #fff7ed; animation: drift var(--snow-duration) linear var(--snow-delay) infinite; }
@keyframes drift { from { transform: translate3d(0, -30px, 0); } to { transform: translate3d(var(--snow-drift), 110vh, 0); } }
.ambient-star { pointer-events:none; position: absolute; z-index:1; color: #fff2d4; opacity:.75; }
.ambient-star--one { top: 32%; left: 10%; font-size: 24px; }
.ambient-star--two { top: 60%; right: 11%; font-size: 22px; }
.ambient-star--three { top: 78%; left: 8%; font-size: 12px; }
.view--form { text-align: left; max-width: 405px; margin: 6px auto 0; }
.view--form .section-heading, .view--form .intro-text { text-align: center; }
.view--form .section-heading { margin-bottom: 9px; }
.view--form .intro-text { margin-bottom: 23px; font-size: .92rem; }
.back-button, .plain-button { display: block; padding: 10px 1px; border: 0; background: transparent; color: #fff4e9; font-size: .7rem; font-weight: 780; letter-spacing: .15em; }
.back-button { margin-top: -14px; margin-bottom: 14px; }
.back-button:hover, .plain-button:hover { text-decoration: underline; }
.small-present { text-align: center; font-size: 1.8rem; line-height: 1.2; margin-bottom: 14px; }
.field { margin: 0 0 18px; }
.field label, .utility-form label { display: block; margin-bottom: 9px; font-size: .70rem; font-weight: 820; letter-spacing: .15em; }
.field input, .field select, .utility-form input, .utility-form select {
  width: 100%; min-height: 53px; border: 1px solid #f1e8d7; border-radius: 13px;
  background: #fffefa; color: #33282d; padding: 14px 17px; font-size: 1rem;
  appearance: none; -webkit-appearance: none;
}
.field select { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="%232a573c" stroke-width="2" viewBox="0 0 24 24"%3E%3Cpath d="m6 9 6 6 6-6"/%3E%3C/svg%3E'); background-repeat: no-repeat; background-size: 16px; background-position: right 18px center; padding-right: 45px; }
.field select:invalid { color: #736f70; }
.field input::placeholder { color: #aca2a2; }
.field input[type="password"] { letter-spacing: .30em; font-size: 1.22rem; }
.field-help { font-size: .73rem; line-height: 1.5; margin: 7px 3px 0; color: #ffe1d5; }
#identity-form > .primary-button, #pin-fields .primary-button { margin-top: 4px; max-width: 100%; }
.form-message { background: #fff7e5; border-left: 4px solid #ffd180; color: #681a1f; padding: 13px 14px; border-radius: 8px; font-size: .82rem; margin: 16px 0; line-height: 1.5; }
#form-footer { text-align: center; }
.view--reveal { padding-top: 12px; }
.gift-animation { height: 225px; display: grid; place-items: center; position: relative; }
.present--opening { transform: scale(1.3) rotate(-4deg); }
.gift-animation.is-opening .present-lid { animation: open-lid 1s cubic-bezier(.22,.61,.36,1) forwards; }
.gift-animation.is-opening .present-box { animation: excited-box .32s ease 2; }
@keyframes open-lid { 0%, 24% { transform: translateY(0) rotate(0); } 52% { transform: translateY(-28px) rotate(-12deg); } 100% { transform: translateY(-92px) rotate(-32deg); opacity: .85; } }
@keyframes excited-box { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 65% { transform: translateX(3px); } }
.opening-spark { position: absolute; z-index: 3; font-size: 29px; color: #ffe1aa; text-shadow: 0 0 20px #ffc16e; opacity: 0; }
.opening-spark--one { left: 15%; top: 35%; }
.opening-spark--two { right: 17%; top: 17%; }
.opening-spark--three { right: 27%; bottom: 10%; }
.opening-spark--four { left: 30%; top: 3%; }
.gift-animation.is-opening .opening-spark { animation: burst .7s ease-out .35s forwards; }
@keyframes burst { 0% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(1.55) rotate(65deg); } }
.reveal-content { animation: reveal-in .5s both; }
@keyframes reveal-in { from { opacity:0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.reveal-kicker { margin: 8px 0 16px; font-size: .68rem; letter-spacing: .21em; color: #ffdeae; font-weight: 700; }
.reveal-ho { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: clamp(2.8rem, 12vw, 4.2rem); font-weight: normal; line-height: 1.1; margin: 0 0 13px; }
.reveal-line { font: 1.35rem/1.3 Georgia, "Times New Roman", serif; margin: 0 auto 15px; }
.reveal-line--last { margin-top: 15px; }
.recipient-ribbon { max-width: 375px; background: linear-gradient(#006333, #034b2b); border-top: 2px solid #ead0a2; border-bottom: 2px solid #e7cda0; padding: 12px 16px 14px; margin: 0 auto; transform: rotate(-1deg); box-shadow: var(--shadow); position: relative; }
.recipient-ribbon::before, .recipient-ribbon::after { content: ''; position: absolute; height: 26px; width: 21px; background: #06472b; top: 17px; z-index: -1; }
.recipient-ribbon::before { left: -15px; transform: skewY(18deg); }
.recipient-ribbon::after { right: -15px; transform: skewY(-18deg); }
.recipient-ribbon span { font: italic bold clamp(2.7rem, 10vw, 4.3rem)/1.1 Georgia,"Times New Roman",serif; text-shadow: 1px 2px 2px #032d1c; overflow-wrap: anywhere; }
.holly-divider { color: #e8c8a0; font-size: 1.4rem; margin: 4px 0 8px; }
.holly-divider span { font-size: 2.3rem; color: #57bf78; vertical-align: -3px; }
.reveal-note { font: italic 1rem/1.3 Georgia,"Times New Roman",serif; color: #fbe6d8; margin: 0 0 25px; }
.outlined-button { background: transparent; border-color: #ffe6d6; box-shadow: none; }
.outlined-button:hover { background: rgb(255 255 255 / 10%); }
.plain-button { margin: 14px auto 0; }
.utility-page { min-height: 100dvh; display: grid; place-items: center; padding: 26px 20px; }
.utility-card { width: min(100%, 520px); margin: 0 auto; padding: 32px 30px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 23px; background: rgb(91 0 15 / 45%); box-shadow: var(--shadow); }
.utility-emoji { font-size: 3.3rem; text-align:center; }
.utility-card .eyebrow { text-align: center; color: #ffe3b7; }
.utility-heading { margin: 9px 0 17px; font: italic normal 2.5rem/1.2 Georgia, serif; text-align: center; }
.utility-text { font-size: .91rem; line-height: 1.66; color: #f9e8df; }
.utility-error, .utility-success { margin: 15px 0; padding: 13px; border-radius: 10px; line-height: 1.5; color: #4b1111; background: #fff1d7; font-size: .88rem; }
.utility-success { color: #104d29; background: #e0ffeb; }
.utility-form { display: flex; flex-direction:column; gap: 8px; margin: 24px 0 15px; }
.utility-form input, .utility-form select { margin-bottom: 12px; }
.utility-form .primary-button { max-width: 100%; }
.utility-footnote { margin: 22px 0; color: #f6d4cb; font-size: .77rem; line-height: 1.6; }
.text-link { color: white; display: block; margin: 20px 0 0; }
.utility-card code { color: #ffe8b2; }
@media (max-width: 560px) {
  .header-greenery { height: 128px; background-position: center top; }
  .site-shell { padding: 100px 26px 18px; }
  .masthead { margin-bottom: 10px; }
  .brand { margin-top: 13px; }
  .brand-the { transform: translateX(-28px); }
  .brand-main { font-size: clamp(3.75rem, 14.2vw, 5.3rem); }
  .season-divider { margin-top: 19px; }
  .present-stage { height: 180px; margin-top: 1px; }
  .present--static { transform: scale(.88) rotate(-4deg); }
  .intro-text { margin-bottom: 22px; }
  .site-footer { padding-top: 22px; }
  .footer-caption { margin-top: 20px; }
}
@media (max-width: 350px) { .site-shell { padding-left: 17px; padding-right: 17px; } .eyebrow { letter-spacing: .14em; } .brand-main { font-size: 3.6rem; } .season-divider p { letter-spacing: .17em; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .snowfall { display: none !important; }
}