@font-face{font-family:Marker;src:url(fonts/marker.woff) format("woff");font-display:swap}
@font-face{font-family:Hand;src:url(fonts/hand.woff) format("woff");font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--navy:#0b1530;--navy2:#101d3d;--ink:#f6f1e6;--muted:#b9c3da;--gold:#ffc74a;--gold2:#ffdf8a;--glass:rgba(12,22,48,.78);--line:rgba(255,255,255,.14);--s:1;--z:1}
*{box-sizing:border-box}
html,body{margin:0;background:var(--navy);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.frame{width:100%;overflow:hidden;background:radial-gradient(120% 80% at 70% 0%,#13224a 0%,var(--navy) 60%)}
.stage{position:relative;width:1536px;height:1024px;zoom:var(--s)}
/* ---------- header ---------- */
.logo{position:absolute;left:44px;top:18px;display:flex;flex-direction:column;font-family:Marker;font-size:44px;line-height:.86;text-decoration:none;transform:rotate(-4deg);transform-origin:0 50%;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35);z-index:5}
.logo span+span{font-size:43px;margin-left:-4px}
.pillnav{position:absolute;left:434px;top:26px;width:540px;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;border-radius:24px;background:rgba(10,18,40,.72);border:1px solid var(--line);backdrop-filter:blur(8px);box-shadow:0 8px 30px rgba(0,0,0,.35);z-index:5}
.pillnav a{font-size:13.5px;text-decoration:none;color:#e7ebf5;padding:8px 18px;border-radius:18px;transition:background .25s,color .25s}
.pillnav a:hover{background:rgba(255,255,255,.07);color:#fff}
.pillnav a.on{background:rgba(255,255,255,.13);padding:8px 26px}
.toggles{position:absolute;left:1188px;top:25px;width:112px;height:42px;display:flex;justify-content:space-around;align-items:center;border-radius:22px;background:rgba(10,18,40,.72);border:1px solid var(--line);z-index:5}
.toggles button{background:none;border:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center}
.toggles button:hover{background:rgba(255,255,255,.08)}
.toggles svg{width:21px;height:21px;fill:none;stroke:#e9edf6;stroke-width:1.6}
#sun svg{stroke:var(--gold)} #sun circle{fill:var(--gold)}
#snd[aria-pressed=false] .w1,#snd[aria-pressed=false] .w2{opacity:.35}
.worldof{position:absolute;left:1338px;top:24px;display:flex;flex-direction:column;font-family:Hand;font-size:17px;letter-spacing:.17em;line-height:1.15;transform:rotate(-6deg);z-index:5}
.worldof span+span{margin-left:22px}
.worldof svg{position:absolute;left:146px;top:4px;width:28px;height:28px;fill:none;stroke:#e7ebf5;stroke-width:1.5;transform:rotate(6deg)}
/* ---------- hero ---------- */
.hero{position:absolute;left:0;top:0;width:420px;height:660px;z-index:4;pointer-events:none}
.hero>*{pointer-events:auto}
.tag{position:absolute;left:44px;top:104px;margin:0;font-family:Hand;font-size:15px;letter-spacing:.2em;line-height:1.42;color:#d5dcec;transform:rotate(-2.5deg)}
h1{position:absolute;left:34px;top:178px;margin:0;font-family:Marker;font-weight:400;font-size:62px;line-height:.86;letter-spacing:.005em;color:#fbf6ea;text-shadow:0 4px 18px rgba(0,0,0,.45);transform:rotate(-3deg);transform-origin:0 0}
h1 span{display:block;white-space:nowrap}
h1 span:nth-child(2){margin-left:-4px}
.sub{position:absolute;left:42px;top:338px;margin:0;font-family:Hand;font-size:25px;letter-spacing:.09em;color:#f2eee4;transform:rotate(-3deg);white-space:nowrap}
.sub em{font-style:normal;position:relative}
.sub em:after{content:"";position:absolute;left:-4px;right:-8px;bottom:-9px;height:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7C30 2 70 1 98 4' stroke='%23ffc74a' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;background-size:100% 100%}
.cta{position:absolute;left:30px;top:390px;width:232px;height:50px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:26px;background:linear-gradient(180deg,#ffd35f,#ffbf3a);color:#1a1a2c;font-family:Hand;font-size:20px;letter-spacing:.12em;text-decoration:none;box-shadow:0 10px 30px rgba(255,190,60,.28),inset 0 -2px 0 rgba(0,0,0,.12);transition:transform .25s,box-shadow .25s}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,190,60,.45)}
.cta span{transition:transform .25s}.cta:hover span{transform:translateX(4px)}
.hint{position:absolute;left:40px;top:454px;margin:0;font-family:Hand;font-size:13.5px;letter-spacing:.16em;line-height:1.3;color:#dfe5f2;transform:rotate(-12deg);padding-left:40px}
.hint svg{position:absolute;left:0;top:-14px;width:36px;height:36px;fill:none;stroke:#e6eaf4;stroke-width:1.4;stroke-linecap:round;transform:rotate(10deg)}
/* ---------- town ---------- */
.pan{position:absolute;left:0;top:0;width:1536px;height:748px;outline:none}
.world{position:relative;width:1536px;height:748px}
.plate{display:block;width:1536px;height:748px;user-select:none;-webkit-user-drag:none}
.world:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,21,48,.55) 0,rgba(11,21,48,.12) 22%,transparent 34%),linear-gradient(180deg,transparent 80%,var(--navy) 100%)}
.fx,.hot{position:absolute;inset:0;width:100%;height:100%}
.fx{pointer-events:none}
.hot{z-index:2}
.hot .b{cursor:pointer;outline:none}
.hot .b polygon{fill:rgba(255,210,120,0);stroke:rgba(255,215,130,0);stroke-width:2;transition:fill .3s,stroke .3s,filter .3s}
.hot .b:hover polygon,.hot .b:focus-visible polygon,.hot .b.lit polygon{fill:rgba(255,205,110,.10);stroke:rgba(255,215,130,.9);filter:drop-shadow(0 0 8px rgba(255,200,90,.9))}
.callouts{position:absolute;inset:0;pointer-events:none;z-index:3}
.co{position:absolute;display:flex;gap:14px;align-items:flex-start;padding:12px 16px 12px 14px;background:rgba(10,18,40,.86);border:1px solid rgba(255,255,255,.18);border-radius:10px;backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:auto;cursor:pointer;transition:transform .3s,border-color .3s;animation:float 6s ease-in-out infinite}
.co:nth-child(2){animation-delay:-1.5s}.co:nth-child(3){animation-delay:-3s}.co:nth-child(4){animation-delay:-4.5s}
.co:after{content:"";position:absolute;left:var(--tx,50%);bottom:-7px;width:12px;height:12px;background:inherit;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);transform:rotate(45deg)}
.co.lit,.co:hover{border-color:rgba(255,205,100,.8);transform:translateY(-3px)}
.co svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
.co b{display:block;font-family:Hand;font-weight:400;font-size:13.5px;letter-spacing:.13em;color:var(--gold)}
.co span{display:block;font-size:12.5px;line-height:1.45;color:#eef1f7;margin-top:4px;max-width:132px}
@keyframes float{50%{translate:0 -3px}}
.markers{display:none}
.zoom{display:none}
/* ---------- card strip ---------- */
.strip{position:absolute;left:50px;top:742px;width:1436px;height:152px;border-radius:18px;background:rgba(12,22,48,.82);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 -10px 50px rgba(0,0,0,.25);z-index:4}
.cards{display:flex;gap:19px;padding:20px 20px 0;list-style:none;margin:0}
.card{position:relative;flex:none;width:230px;height:114px;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#16224a;cursor:pointer;text-align:left;padding:0;transition:transform .3s,border-color .3s,box-shadow .3s}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,14,32,.85))}
.card .n{position:absolute;left:13px;bottom:12px;z-index:1;width:25px;height:25px;border-radius:50%;background:#f7f0e0;color:#18203a;display:grid;place-items:center;font-size:10px;font-weight:600}
.card .l{position:absolute;left:50px;bottom:15px;z-index:1;font-family:Hand;font-size:15px;letter-spacing:.12em;color:#fff}
.card:hover,.card:focus-visible,.card.lit{transform:translateY(-4px);border-color:rgba(255,205,100,.75);box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 0 1px rgba(255,205,100,.3)}
.card:hover img,.card.lit img{transform:scale(1.06)}
.card.map{width:170px;background:transparent;border-color:transparent;display:flex;align-items:center}
.card.map:after{display:none}
.card.map img{position:static;width:92px;height:100px;object-fit:cover;border-radius:50%;-webkit-mask:radial-gradient(closest-side,#000 70%,transparent);mask:radial-gradient(closest-side,#000 70%,transparent)}
.card.map .l{position:static;margin-left:16px;line-height:1.5;text-align:center}
.card.map .l svg{display:block;margin:8px auto 0;width:24px;height:20px;fill:none;stroke:#fff;stroke-width:1.4}
/* ---------- ticker ---------- */
.ticker{position:absolute;left:0;top:906px;width:1536px;height:118px;display:flex;align-items:center;z-index:4;background:linear-gradient(180deg,transparent,rgba(5,10,26,.4))}
.ticker h2{margin:0 0 0 52px;width:262px;white-space:nowrap;font-family:Hand;font-weight:400;font-size:15px;letter-spacing:.16em;color:#e8ecf5}
.tick-win{width:950px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.tick-win ul{display:flex;gap:14px;margin:0;padding:0 10px;list-style:none;width:max-content;animation:tick 48s linear infinite}
.tick-win:hover ul{animation-play-state:paused}
.tick-win li{display:flex;align-items:center;gap:16px;width:190px;height:64px;padding:0 14px;border-radius:10px;background:rgba(18,30,62,.75);border:1px solid var(--line);font-size:12px;line-height:1.4;color:#eef1f7}
.tick-win li small{display:block;color:#8f9bb8;font-size:11px;margin-top:2px}
.tick-win li svg{width:30px;height:30px;flex:none;fill:none;stroke:#fff;stroke-width:1.5}
.tick-win li svg.y{stroke:var(--gold);fill:rgba(255,199,74,.15)}
@keyframes tick{to{transform:translateX(calc(-50% - 7px))}}
.never{margin:0 0 0 60px;font-family:Hand;font-size:15px;letter-spacing:.14em;line-height:1.3;transform:rotate(-8deg);position:relative}
.never svg{display:block;width:44px;height:16px;margin:6px 0 0 50px;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round}
/* ---------- tooltip & panel ---------- */
.tip{position:fixed;left:0;top:0;z-index:50;pointer-events:none;padding:8px 12px;border-radius:9px;background:rgba(10,18,40,.94);border:1px solid rgba(255,205,100,.6);font-size:12.5px;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.4);transform:translate3d(var(--x),var(--y),0)}
.tip b{font-family:Hand;font-weight:400;letter-spacing:.12em;color:var(--gold);margin-right:8px}
.panel{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 40px);padding:0;border:1px solid rgba(255,205,100,.45);border-radius:20px;background:linear-gradient(160deg,rgba(20,34,72,.97),rgba(9,16,38,.98));color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);overflow:auto}
.panel::backdrop{background:rgba(4,8,22,.55);backdrop-filter:blur(3px)}
.panel[open]{animation:pop .45s cubic-bezier(.2,.9,.25,1.15)}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.96)}}
.pin{position:relative;padding:22px 26px 22px}
.x{position:absolute;right:14px;top:12px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:22px;z-index:2}
.phead{display:flex;gap:20px;align-items:center}
.phead img{width:230px;height:130px;object-fit:cover;border-radius:12px;border:1px solid var(--line);flex:none}
.pno{margin:0;font-family:Hand;letter-spacing:.16em;color:var(--gold);font-size:15px}
.panel h2{margin:2px 0 6px;font-family:Marker;font-weight:400;font-size:38px;line-height:1}
.plead{margin:0;color:var(--muted);font-size:14px}
.pbody{margin-top:18px;font-size:15.5px;line-height:1.65;color:#e8ecf5}
.pbody p{margin:0 0 12px}
.pbody .note{font-size:13px;color:#98a4c0}
.btn{display:inline-block;margin-top:6px;padding:12px 22px;border-radius:24px;background:linear-gradient(180deg,#ffd35f,#ffbf3a);color:#1a1a2c;font-family:Hand;font-size:17px;letter-spacing:.1em;text-decoration:none;border:0}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.socials{list-style:none;padding:0;margin:6px 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.socials li{padding:12px 14px;border:1px dashed rgba(255,255,255,.2);border-radius:10px;display:flex;justify-content:space-between;font-size:14px}
.socials em{color:#8f9bb8;font-style:normal;font-size:12px}
.idea{font-family:Hand;font-size:20px;color:var(--gold2);min-height:30px;margin:12px 0}
.maplist{padding-left:20px}.maplist button{background:none;border:0;color:var(--gold);text-decoration:underline;padding:4px 0;font-size:15px}
.pnav{display:flex;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pnav button{background:none;border:0;color:var(--muted);font-size:13px}.pnav button:hover{color:#fff}
/* sunrise easter egg */
body.dawn .plate{filter:brightness(1.18) saturate(1.1) hue-rotate(-8deg)}
body.dawn .world:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,150,110,.28),rgba(255,200,140,.08) 40%,transparent);mix-blend-mode:screen}
/* ---------- mobile ---------- */
@media (max-width:820px){
  .frame{overflow:visible}
  .stage{zoom:1;width:100%;height:auto;display:flex;flex-direction:column}
  .top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px;background:linear-gradient(180deg,var(--navy) 70%,transparent)}
  .logo{position:static;font-size:30px;transform:rotate(-4deg)}.logo span+span{font-size:29px}
  .pillnav{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));top:auto;translate:-50% 0;width:calc(100% - 24px);max-width:420px;height:48px;padding:0 4px;z-index:30;overflow-x:auto;scrollbar-width:none}
  .pillnav a{padding:8px 7px;font-size:12px;flex:none}.pillnav a.on{padding:8px 11px}
  .toggles{position:static;width:auto;height:40px;padding:0 4px;margin-left:auto}
  .worldof{display:none}
  .hero{position:relative;width:auto;height:auto;padding:4px 22px 8px}
  .hero>*{position:static}
  .tag{font-size:13px;letter-spacing:.17em;margin:6px 0 14px}
  h1{position:static;font-size:clamp(56px,17.5vw,78px);transform:rotate(-3deg);transform-origin:0 50%;margin-top:6px}
  .sub{font-size:19px;margin-top:16px}
  .hero .cta{position:static;display:inline-flex;width:auto;padding:0 26px;margin-top:22px}
  .hint{display:inline-block;margin:0 0 0 18px;font-size:11.5px;vertical-align:-12px;transform:rotate(-8deg)}
  .hint svg{display:none}
  .pan{position:relative;width:100%;height:min(62vh,480px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;margin-top:14px;scrollbar-width:none;touch-action:pan-x pan-y;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .pan::-webkit-scrollbar,.pillnav::-webkit-scrollbar,.strip::-webkit-scrollbar{display:none}
  .world{zoom:var(--z)}
  .world:after{background:none}
  .callouts{display:none}
  .markers{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
  .mk{position:absolute;pointer-events:auto;translate:-50% -100%;display:flex;align-items:center;gap:8px;padding:9px 14px 9px 9px;min-height:48px;border-radius:26px;background:rgba(10,18,40,.9);border:1px solid rgba(255,205,100,.7);font-family:Hand;font-size:20px;letter-spacing:.1em;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.45);scale:calc(1 / var(--z));transform-origin:50% 100%}
  .mk i{width:30px;height:30px;border-radius:50%;background:var(--gold);color:#1a1a2c;display:grid;place-items:center;font-style:normal;font-family:Inter;font-weight:700;font-size:13px}
  .mk:after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;background:inherit;border-right:1px solid rgba(255,205,100,.7);border-bottom:1px solid rgba(255,205,100,.7);rotate:45deg}
  .zoom{display:flex;gap:8px;height:0;justify-content:flex-end;padding-right:14px;position:relative;z-index:8;top:-60px}
  .zoom button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(10,18,40,.85);font-size:22px}
  .strip{position:relative;left:auto;top:auto;width:auto;height:auto;margin:-10px 0 0;border-radius:18px 18px 0 0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .cards{padding:16px;gap:12px;width:max-content}
  .card{width:72vw;max-width:290px;height:150px;scroll-snap-align:center}
  .card.map{width:180px}
  .ticker{position:relative;top:auto;width:100%;height:auto;flex-direction:column;align-items:stretch;padding:20px 0 96px}
  .ticker h2{margin:0 0 12px 20px;width:auto;font-size:14px}
  .tick-win{width:100%}
  .never{margin:18px 24px 0 auto}
  .phead{flex-direction:column;align-items:flex-start}.phead img{width:100%;height:150px}
  .panel{margin:auto 0 0;width:100vw;max-width:100vw;border-radius:22px 22px 0 0;max-height:88dvh}
  .socials{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.paused *,.paused *:before{animation-play-state:paused!important}

/* My Story: Dan & Jax photos */
.jax{margin:14px 0 4px}.jg{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:6px}.jg img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}.jg .big{grid-row:span 2;aspect-ratio:auto;object-position:50% 20%}.jax figcaption{margin-top:8px;font-size:13px;opacity:.8;font-style:italic}