@font-face{font-family:"Mirety";src:url("../assets/snowglobe/fonts/Mirety.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Mirety";src:url("../assets/snowglobe/fonts/Mirety-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Klinsman";src:url("../assets/snowglobe/fonts/KlinsmanTypeface-Light.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"Klinsman";src:url("../assets/snowglobe/fonts/KlinsmanTypeface.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Klinsman";src:url("../assets/snowglobe/fonts/KlinsmanTypeface-Bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Essential Sans";src:url("../assets/snowglobe/fonts/EssentialSans-SemiBold.otf") format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:"Essential Sans";src:url("../assets/snowglobe/fonts/EssentialSans-Bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Essential Sans";src:url("../assets/snowglobe/fonts/EssentialSans-BoldItalic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}

:root{
  --navy:#212942; --blue:#406C9D; --sky:#91A8C5; --frost:#C2D0DB;
  --cream:#F8F1E7; --tan:#EFE4D2; --paper:#FFFBF4; --paper-line:#E6D9C4;
  --gold:#F9DEA9; --rust:#A4502F; --pine:#2F4A3E; --bark:#5C4A36; --tan-line:#C9B697;
  --wood-1:#9C6A43; --wood-2:#8A5A37; --wood-3:#A97650; --wood-4:#7E5232;
  --f-display:"Mirety",Georgia,serif;
  --f-label:"Klinsman",sans-serif;
  --f-body:"Essential Sans",system-ui,sans-serif;
  --gutter:clamp(20px,5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--navy);font-family:var(--f-body);font-weight:600}
body>section,body>div{background:var(--cream)}
img{display:block;max-width:100%}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--navy)}
::selection{background:var(--gold);color:var(--navy)}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.close a:focus-visible{outline-color:var(--navy)}

.kicker{font-family:var(--f-label);font-weight:400;font-size:13px;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:var(--blue)}
.kicker--light{color:var(--sky)}
.kicker--pine{color:var(--pine)}

.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 34px;border-radius:999px;background:transparent;font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn--light{color:var(--cream);border:1px solid var(--cream)}
.btn--light:hover{background:var(--cream);color:var(--navy)}
.btn--light:active{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn--dark{color:var(--navy);border:1.5px solid var(--navy)}
.btn--dark:hover{background:var(--navy);color:var(--cream)}
.btn[disabled]{opacity:.5;cursor:wait}

/* HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;background:var(--navy)!important;color:var(--cream);overflow:hidden;display:flex;flex-direction:column}
.hero__nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px var(--gutter)}
.hero__wordmark{height:26px;width:auto}
.nav-link{font-family:var(--f-label);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--cream);text-decoration:none;border-bottom:1px solid var(--sky);padding-bottom:4px}
.nav-link:hover{color:var(--gold)}
.hero__body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px var(--gutter) 72px;gap:36px}
.hero__logo{width:min(420px,74vw);height:auto;transform:rotate(-2deg)}
.hero__tagline{margin:0;max-width:30ch;font-family:var(--f-display);font-weight:400;font-size:clamp(26px,3.4vw,38px);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.hero__tagline em{color:var(--gold)}

.join{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;gap:16px;scroll-margin-top:40px}
.join__form{width:100%;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px;text-align:left}
.field--email{flex:2 1 220px}
.field--zip{flex:1 1 120px}
.join__form .btn{flex:1 1 180px}
.field__label{font-family:var(--f-label);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--sky)}
.field input{background:transparent;border:0;border-bottom:1px solid var(--sky);border-radius:0;color:var(--cream);font-family:var(--f-body);font-weight:600;font-size:18px;padding:10px 2px;width:100%}
.field input::placeholder{color:var(--sky);opacity:1}
.field input[aria-invalid="true"]{border-bottom-color:var(--gold)}
.join__note{margin:0;font-size:14px;color:var(--frost)}
.join__note.is-error{color:var(--gold)}
.join__success{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0}
.join__success[hidden]{display:none}
.join__success-title{font-family:var(--f-display);font-size:clamp(34px,4.5vw,52px);line-height:1;color:var(--gold)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* SNOW */
.snow{position:absolute;inset:0;pointer-events:none;z-index:1}
.flake{position:absolute;top:0;border-radius:50%;background:var(--cream);animation:sgfall var(--dur) linear var(--delay) infinite,sgsway var(--sway) ease-in-out var(--delay) infinite;will-change:transform}
@keyframes sgfall{from{transform:translate3d(0,-20px,0)}to{transform:translate3d(var(--drift),105vh,0)}}
@keyframes sgsway{0%,100%{margin-left:0}50%{margin-left:14px}}
@media (prefers-reduced-motion:reduce){.flake{animation:none;top:var(--still-top)}}

/* DIVIDERS */
.wood{height:22px;background:repeating-linear-gradient(90deg,var(--wood-1) 0 46px,var(--wood-2) 46px 48px,var(--wood-3) 48px 94px,var(--wood-4) 94px 96px)!important;border-top:3px solid var(--rust);border-bottom:3px solid var(--pine)}
.stripes{display:flex;flex-direction:column;gap:5px;padding:0 var(--gutter)}
.stripes span{display:block;height:8px;background:var(--rust)}
.stripes span:nth-child(2){background:var(--pine)}
.stripes span:nth-child(3){height:4px;background:var(--navy)}

/* ABOUT */
.about{padding:clamp(80px,12vw,150px) var(--gutter) clamp(64px,9vw,110px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.about__title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(56px,10vw,132px);line-height:.92;letter-spacing:-.035em;display:flex;flex-wrap:wrap;justify-content:center;column-gap:.22em}
.about__title>*{display:inline-block}
.nudge-up{transform:translateY(-.06em)}
.nudge-up-sm{transform:translateY(-.03em)}
.tilt{font-style:italic;color:var(--rust);transform:rotate(-3deg) translateY(.04em)}
.about__body{margin:0;max-width:600px;font-size:clamp(17px,1.6vw,20px);line-height:1.55;text-wrap:pretty}

.plates{width:100%;max-width:1120px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(40px,6vw,72px);align-items:start}
.plate{margin:0;padding:12px 12px 16px;background:var(--paper);border:1px solid var(--paper-line);box-shadow:0 1px 2px rgba(33,41,66,.06),0 10px 30px rgba(33,41,66,.07)}
.plate--a{transform:rotate(-2deg)}
.plate--b{transform:rotate(1.5deg) translateY(28px)}
.plate--c{transform:rotate(-1deg)}
.plate__img{aspect-ratio:4/5;background:var(--frost);overflow:hidden}
.plate__img img{width:100%;height:100%;object-fit:cover}
.plate figcaption{margin-top:12px;font-family:var(--f-display);font-style:italic;font-size:20px}

/* PERKS */
.perks{padding:clamp(64px,9vw,110px) var(--gutter) clamp(80px,11vw,140px);display:flex;flex-direction:column;align-items:center;gap:clamp(40px,5vw,64px)}
.perks__head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.perks__title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(40px,5.5vw,72px);line-height:1;letter-spacing:-.03em}
.perks__title em{color:var(--rust)}
.perks__grid{width:100%;max-width:1040px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-top:1px solid var(--frost)}
.perk{padding:32px clamp(16px,2.4vw,32px);border-bottom:1px solid var(--frost);display:flex;flex-direction:column;gap:12px}
.perk+.perk{border-left:1px solid var(--frost)}
@media (max-width:820px){.perk+.perk{border-left:0}}
.perk__num{font-family:var(--f-label);font-size:13px;letter-spacing:.3em;color:var(--rust);font-variant-numeric:tabular-nums}
.perk h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:32px;letter-spacing:-.02em}
.perk p{margin:0;font-size:16px;line-height:1.55}

/* CLOSE */
.close{background:var(--tan)!important;padding:clamp(80px,11vw,140px) var(--gutter) 40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.close__stamp{width:150px;height:auto;transform:rotate(8deg);border-radius:50%;box-shadow:0 8px 20px rgba(33,41,66,.18)}
.close__title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(44px,6.5vw,88px);line-height:1;letter-spacing:-.03em}
.close__title em{color:var(--rust)}
.footer{width:100%;max-width:1120px;margin-top:clamp(60px,8vw,100px);padding-top:24px;border-top:1px solid var(--tan-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-family:var(--f-label);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bark)}
.footer a{color:inherit;text-decoration:none}
.footer a:hover{color:var(--navy)}

/* Shared heading + button variants (home cities section + city pages) */
.section-title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(40px,5.5vw,72px);line-height:1;letter-spacing:-.03em}
.section-title em{color:var(--rust);font-style:italic}
.btn--solid{background:var(--navy);color:var(--cream);border:1.5px solid var(--navy)}
.btn--solid:hover{background:#15192a;border-color:#15192a}
.btn--solid:active{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.nav-link--frost{color:var(--frost);border-bottom-color:var(--frost)}

/* CITIES (home page) */
.cities{padding:clamp(64px,9vw,110px) var(--gutter) clamp(40px,6vw,72px);display:flex;flex-direction:column;align-items:center;gap:clamp(40px,5vw,64px)}
.cities__head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.cities__grid{width:100%;max-width:1200px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(20px,2.6vw,32px);align-items:stretch}

.city{background:var(--paper);border:1px solid var(--paper-line);padding:28px 26px 26px;display:flex;flex-direction:column;gap:14px}
.city--filled{border-top:4px solid var(--rust)}
.city--empty{border:1.5px dashed var(--tan-line);justify-content:center;text-align:center;gap:16px}
.city__meta{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-label);font-size:11px;letter-spacing:.28em;text-transform:uppercase}
.city__state{color:var(--pine)}
.city__date{color:var(--rust)}
.city__name{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(48px,7vw,72px);line-height:.95;letter-spacing:-.02em}
.city__blurb{margin:0;color:var(--bark);font-size:15px;line-height:1.5}
.city__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:10px}
.city__actions .btn{flex:1 1 150px;height:46px;padding:0 20px;font-size:11px}
.city--empty .kicker{font-size:11px}
.city__empty-title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(32px,5vw,44px);letter-spacing:-.02em}
.city__empty-title em{color:var(--rust);font-style:italic}
.city__empty-copy{margin:0;max-width:34ch;color:var(--bark);font-size:15px;line-height:1.55}

/* CITY PAGE: hero */
.hero--city{min-height:88vh;min-height:88svh}
.chero__city{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(84px,17vw,230px);line-height:.85;letter-spacing:-.03em;transform:rotate(-2deg)}
.chero__date{margin:0;font-family:var(--f-display);font-weight:400;font-style:italic;font-size:clamp(22px,3.2vw,36px);color:var(--gold)}
.chero__intro{margin:0;max-width:36ch;color:var(--frost);font-size:clamp(16px,1.8vw,19px);line-height:1.6}

/* CITY PAGE: details */
.details{padding:clamp(64px,9vw,110px) var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);max-width:1120px;margin:0 auto}
@media (max-width:760px){.details{grid-template-columns:1fr}}
.details__intro{display:flex;flex-direction:column;gap:18px}
.details__heading{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(32px,4.5vw,52px);line-height:1.05;letter-spacing:-.02em}
.details__heading em{color:var(--rust);font-style:italic}
.details__body{margin:0;font-size:16px;line-height:1.6;max-width:46ch}
.details__dl{margin:0;border-top:1.5px solid var(--navy)}
.details__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0;padding:16px 0;border-bottom:1px solid #D9CDB8}
.details__row dt{font-family:var(--f-label);font-weight:400;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bark);margin:0}
.details__row dd{font-family:var(--f-display);font-size:26px;margin:0;text-align:right}
.details__row dd.tba{font-style:italic;color:var(--rust)}

/* CITY PAGE: what to expect */
.expect{padding:clamp(80px,12vw,150px) var(--gutter) clamp(40px,6vw,72px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(40px,6vw,72px)}
.expect .plates{margin-top:0}
.plate__desc{margin:6px 0 0;font-family:var(--f-body);font-weight:600;font-style:normal;font-size:14px;line-height:1.4;color:var(--bark)}

/* CITY PAGE: per-city join (tan) */
.cjoin{background:var(--tan)!important;padding:clamp(80px,11vw,140px) var(--gutter) 40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.cjoin__stamp{width:130px;height:auto;transform:rotate(8deg);border-radius:50%;box-shadow:0 8px 20px rgba(33,41,66,.18)}
.cjoin__title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(34px,5.5vw,64px);line-height:1.05;letter-spacing:-.03em}
.cjoin__title em{color:var(--rust);font-style:italic}
.cjoin__copy{margin:0;max-width:46ch;font-size:16px;line-height:1.5;color:var(--bark)}
.cjoin .join{max-width:640px}
.cjoin .field input{color:var(--navy);border-bottom:1px solid var(--navy)}
.cjoin .field input::placeholder{color:var(--pine);opacity:.65}
.cjoin .field__label{color:var(--pine)}
.cjoin .join__note{color:var(--bark)}
.cjoin .join__note.is-error{color:var(--rust)}
.cjoin .join__success-title{color:var(--rust)}
.cjoin a:focus-visible,.cjoin input:focus-visible,.cjoin button:focus-visible{outline-color:var(--navy)}
