:root {
  --midnight: #020914;
  --night: #061327;
  --pine: #0d3a35;
  --pine-light: #195449;
  --cranberry: #a51f32;
  --cranberry-dark: #6d1122;
  --gold: #f4c45e;
  --gold-pale: #ffe7a5;
  --snow: #f8fbf7;
  --ice: #d9edf0;
  --ink: #172231;
  --paper: #f5efe3;
  --display: Georgia, "Times New Roman", serif;
  --sans: "Trebuchet MS", Arial, sans-serif;
  --shadow: 0 28px 80px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--midnight);
  font-family: var(--sans);
  overflow-x: hidden;
}
a { color: inherit; }
a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(244,196,94,.28); }
img { max-width: 100%; }
.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 1000;
  padding: .75rem 1rem;
  color: var(--night);
  background: var(--gold-pale);
  border-radius: .5rem;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.snowfall {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}
.snowflake {
  position: absolute;
  top: -12vh;
  left: var(--left);
  color: rgba(255,255,255,var(--opacity));
  font-family: Georgia, serif;
  font-size: var(--size);
  line-height: 1;
  text-shadow: 0 0 12px rgba(218,242,255,.6);
  filter: blur(var(--blur));
  animation: snow-drift var(--duration) linear var(--delay) infinite;
  will-change: transform;
}
@keyframes snow-drift {
  0% { transform: translate3d(0,-10vh,0) rotate(0deg); }
  25% { transform: translate3d(var(--sway),22vh,0) rotate(90deg); }
  55% { transform: translate3d(calc(var(--sway) * -.45),58vh,0) rotate(205deg); }
  80% { transform: translate3d(var(--sway),92vh,0) rotate(300deg); }
  100% { transform: translate3d(0,118vh,0) rotate(380deg); }
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: 1.5rem 0;
  color: white;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: white;
  font: 700 clamp(1.3rem,2.6vw,2rem)/1 var(--display);
  letter-spacing: .015em;
  text-decoration: none;
  text-shadow: 0 3px 20px rgba(0,0,0,.7);
  min-height: 44px;
}
.brand strong { color: var(--gold-pale); }
.brand-star { color: var(--gold); font-size: 1.1em; }
nav { display: flex; align-items: center; gap: 1.5rem; }
nav a {
  color: rgba(255,255,255,.92);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.nav-call {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .7rem 1rem;
  border: 1px solid rgba(255,231,165,.6);
  border-radius: 999px;
  background: rgba(109,17,34,.68);
  box-shadow: 0 7px 20px rgba(0,0,0,.2);
}

.hero {
  position: relative;
  min-height: 790px;
  height: min(940px,100svh);
  isolation: isolate;
  overflow: hidden;
  color: white;
  background: #061327;
}
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("assets/images/north-pole-night.png?v=20260819180732");
  background-size: cover;
  background-position: center;
  transform: scale(1.015);
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(1,6,17,.93) 0%, rgba(2,10,25,.75) 34%, rgba(3,15,30,.12) 67%, rgba(1,6,14,.3) 100%),
    linear-gradient(0deg, rgba(2,9,20,.9) 0%, transparent 24%, rgba(2,7,17,.2) 100%);
}
.hero-content {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(360px,.8fr);
  align-items: end;
  gap: clamp(1rem,3vw,4rem);
  width: min(1200px,92vw);
  height: 100%;
  margin: 0 auto;
  padding: 8.5rem 0 5.5rem;
}
.hero-copy { align-self: center; max-width: 680px; }
.kicker, .section-kicker {
  margin: 0 0 .8rem;
  color: var(--gold-pale);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 1.4rem;
  font: 700 clamp(3.8rem,7.4vw,7.7rem)/.89 var(--display);
  letter-spacing: -.055em;
  text-wrap: balance;
  text-shadow: 0 8px 35px rgba(0,0,0,.55);
}
h1 em { color: var(--gold-pale); font-weight: 400; }
.hero-intro {
  max-width: 620px;
  margin-bottom: 2rem;
  color: #e9f4f5;
  font: 1.07rem/1.75 var(--sans);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.magic-button {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-width: 210px;
  padding: .86rem 1.15rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 1rem;
  color: white;
  font-weight: 800;
  line-height: 1.08;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.magic-button:hover, .magic-button:focus-visible { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 20px 40px rgba(0,0,0,.38); }
.magic-button small { display: block; margin-bottom: .25rem; font-size: .65rem; font-weight: 600; opacity: .8; }
.magic-button-gold { color: #2b1c05; background: linear-gradient(145deg,#ffe8a3,#e5ad3e); border-color: #ffefbd; }
.magic-button-clear { background: linear-gradient(145deg,rgba(21,67,67,.84),rgba(7,38,45,.9)); }
.button-flake { font-size: 1.8rem; }

.homer-portrait {
  position: relative;
  align-self: end;
  width: min(520px,43vw);
  margin: 0;
  transform: translateY(1%);
  filter: drop-shadow(0 28px 28px rgba(0,0,0,.5));
}
.homer-portrait img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid rgba(255,233,170,.72);
  border-radius: 48% 48% 1.2rem 1.2rem / 15% 15% 1.2rem 1.2rem;
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.08), 0 22px 55px rgba(0,0,0,.45);
}
.portrait-glow {
  position: absolute;
  inset: 15% -8% 4%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse,rgba(255,216,128,.48),rgba(85,170,166,.18) 46%,transparent 70%);
  filter: blur(14px);
}
.homer-portrait figcaption {
  position: absolute;
  right: -1rem;
  bottom: 7%;
  z-index: 3;
  padding: .65rem 1.05rem .7rem;
  color: #312006;
  background: linear-gradient(135deg,#ffe9aa,#e4b04b);
  border: 1px solid #fff1c5;
  border-radius: .75rem;
  box-shadow: 0 12px 25px rgba(0,0,0,.25);
  transform: rotate(-2deg);
}
.homer-portrait figcaption span { display:block; font: 700 1.15rem var(--display); }
.homer-portrait figcaption small { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.scroll-cue {
  position: absolute;
  bottom: 1.35rem;
  left: 50%;
  z-index: 4;
  color: rgba(255,255,255,.78);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.scroll-cue span { margin-right: .4rem; color: var(--gold-pale); }

.welcome {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
  gap: clamp(2rem,7vw,7rem);
  padding: clamp(5rem,9vw,9rem) max(5vw,calc((100vw - 1120px)/2));
  background:
    radial-gradient(circle at 80% 20%,rgba(194,226,216,.55),transparent 24rem),
    linear-gradient(155deg,#fbf8ef,#e5efe9);
}
.welcome:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 18px;
  background: linear-gradient(135deg,transparent 8px,#f8f5ec 0) 0 0/18px 18px repeat-x;
}
.section-kicker { color: var(--cranberry); }
h2 {
  margin-bottom: 1.4rem;
  color: #162b2b;
  font: 700 clamp(2.7rem,5vw,5.1rem)/.98 var(--display);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.welcome-lead { color: #223c39; font: 1.2rem/1.75 var(--display); }
.welcome-copy > p:last-child { color: #536460; font-size: .98rem; line-height: 1.75; }
.promise {
  align-self: center;
  padding: 2.2rem;
  color: #fff7df;
  background: linear-gradient(155deg,#174a42,#092f2d);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50% 50% 46% 54% / 12% 12% 9% 9%;
  box-shadow: var(--shadow), inset 0 0 0 7px rgba(255,255,255,.04);
  text-align: center;
  transform: rotate(1deg);
}
.promise-star { margin-bottom: .5rem; color: var(--gold); font-size: 2rem; }
.promise h3 { margin-bottom: .8rem; font: 700 1.65rem var(--display); }
.promise p { color: #dcece6; font: italic 1rem/1.65 var(--display); }
.promise-signature { color: var(--gold-pale); font: italic 1.05rem var(--display); }

.path {
  position: relative;
  padding: clamp(5rem,9vw,9rem) max(5vw,calc((100vw - 1200px)/2));
  color: white;
  background:
    radial-gradient(ellipse at 15% 0,rgba(57,126,117,.35),transparent 35%),
    linear-gradient(155deg,#071c25,#06101f 70%);
  overflow: hidden;
}
.path:after {
  content: "❄";
  position: absolute;
  right: -3rem;
  bottom: -9rem;
  color: rgba(255,255,255,.025);
  font: 25rem/1 var(--display);
}
.path-heading { max-width: 680px; margin-bottom: 3rem; }
.path h2 { color: white; }
.path-heading > p:last-child { color: #b9d0cf; line-height: 1.7; }
.path-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: 1.5rem;
  color: white;
  background: linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8rem 8rem 1.25rem 1.25rem;
  box-shadow: 0 18px 38px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.16);
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.path-card:before { content:""; position:absolute; inset:0; opacity:.2; background:radial-gradient(circle at 50% 20%,var(--card-color),transparent 42%); }
.path-card:hover, .path-card:focus-visible { transform: translateY(-8px); border-color: rgba(255,231,165,.65); background: linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.06)); }
.path-call { --card-color:#d24b56; }.path-note { --card-color:#dba946; }.path-calendar { --card-color:#78c2cf; }.path-plan { --card-color:#4ea183; }
.path-ornament {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: .5rem auto 2rem;
  color: #fff;
  background: radial-gradient(circle at 35% 28%,rgba(255,255,255,.5),var(--card-color) 35%,#142d35 110%);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  box-shadow: inset -8px -10px 18px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.2);
  font: 1.8rem var(--sans);
}
.path-ornament:before { content:""; position:absolute; top:-18px; width:20px; height:14px; border:3px solid var(--gold); border-bottom:0; border-radius:8px 8px 0 0; }
.path-number { color: rgba(255,255,255,.45); font-size: .65rem; font-weight: 800; letter-spacing: .16em; }
.path-card h3 { margin: .6rem 0; font: 700 1.45rem var(--display); }
.path-card p { flex: 1; color: #b9cecf; font-size: .88rem; line-height: 1.55; }
.path-card strong { color: var(--gold-pale); font-size: .78rem; }

.closing {
  position: relative;
  padding: clamp(5rem,9vw,8rem) 5vw;
  color: #2b302c;
  background: linear-gradient(#f9f6ec,#e7ede6);
  text-align: center;
  overflow: hidden;
}
.closing-snow { position:absolute; top:-4rem; left:5%; color:rgba(25,84,73,.06); font:20rem/1 var(--display); }
.closing h2 { max-width: 850px; margin: 0 auto 1.2rem; }
.closing > p:not(.section-kicker) { color:#5a655e; }
.closing-actions { display:flex; justify-content:center; gap:.85rem; flex-wrap:wrap; margin-top:1.7rem; color:var(--cranberry-dark); font-weight:800; }
.closing-actions a { display:inline-flex; align-items:center; min-height:44px; overflow-wrap:anywhere; }
footer { display:flex; justify-content:space-between; gap:1rem; padding:1.5rem max(5vw,calc((100vw - 1200px)/2)); color:#b9cbcf; background:#020914; font-size:.75rem; }
footer p { margin:0; } footer a { display:inline-flex; align-items:center; min-height:44px; color:var(--gold-pale); }

section { scroll-margin-top: 5rem; }

a:focus-visible { outline: 3px solid var(--gold-pale); outline-offset: 4px; }

@media (max-width: 980px) {
  .hero { min-height: 840px; height: auto; }
  .hero-content { grid-template-columns: 1.1fr .9fr; min-height: 840px; }
  h1 { font-size: clamp(3.7rem,8.5vw,6.4rem); }
  .path-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  .site-header { align-items:flex-start; }
  nav a:not(.nav-call) { display:none; }
  .hero { min-height: 930px; }
  .hero-scene { background-position: 64% center; }
  .hero-shade { background:linear-gradient(0deg,rgba(1,6,16,.96) 0%,rgba(2,8,19,.68) 66%,rgba(1,6,16,.4) 100%); }
  .hero-content { grid-template-columns:1fr; align-content:end; min-height:930px; padding:6.5rem 0 5rem; text-align:center; }
  .hero-copy { order:2; }
  .hero-intro { margin-left:auto; margin-right:auto; }
  .hero-actions { justify-content:center; }
  .homer-portrait { order:1; justify-self:center; width:min(82vw,390px); transform:translateY(9%); }
  .homer-portrait figcaption { right:0; }
  h1 { font-size:clamp(3.25rem,14vw,5.1rem); }
  .welcome { grid-template-columns:1fr; }
  .promise { border-radius:2rem; transform:none; }
  .path-grid { grid-template-columns:1fr; }
  .path-card { min-height:260px; border-radius:1.5rem; }
  .path-ornament { margin:.1rem 0 1.5rem; }
  footer { flex-direction:column; text-align:center; }
}
@media (max-width: 440px) {
  .magic-button { width:100%; justify-content:center; }
  .hero { min-height:960px; }
  .hero-content { min-height:960px; }
  .scroll-cue { display:none; }
}
@media (pointer: coarse) {
  nav a, .magic-button, .path-card, .closing-actions a, footer a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .snowflake { animation:none; opacity:.38; }
  .magic-button, .path-card { transition:none; }
}