:root { --ink:#122b3b; --ink-soft:#49616d; --paper:#f6f6f0; --cream:#eeefe7; --line:#d5ddd8; --teal:#1d6d6a; --teal-dark:#0e4b52; --lime:#cbe769; --coral:#df725c; --white:#fff; --mono:'DM Mono',monospace; --sans:'DM Sans',sans-serif; --serif:'Playfair Display',serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.5; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1160px, calc(100% - 48px)); margin-inline:auto; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; width:min(1280px, calc(100% - 48px)); margin:auto; }
.brand { display:flex; align-items:center; gap:11px; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:33px; height:33px; border-radius:50%; background:var(--teal-dark); color:var(--lime); font-size:20px; }
.brand strong { display:block; font-size:18px; line-height:1; }
.brand small { display:block; margin-top:5px; color:var(--ink-soft); font:10px var(--mono); letter-spacing:.04em; text-transform:uppercase; }
nav { display:flex; align-items:center; gap:30px; font-size:13px; color:var(--ink-soft); } nav a:hover { color:var(--teal-dark); } .nav-cta { color:var(--teal-dark); border-bottom:1px solid var(--teal-dark); padding-bottom:3px; }
.hero { min-height:500px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; padding:62px 0 88px; overflow:hidden; }
.eyebrow { margin:0 0 16px; color:var(--teal); font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.live-dot { display:inline-block; width:7px; height:7px; margin-right:7px; background:var(--coral); border-radius:50%; box-shadow:0 0 0 4px #f3d9d1; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:24px; font-size:clamp(49px, 7vw, 88px); line-height:.98; letter-spacing:-.065em; font-weight:600; } h1 em { color:var(--teal); font-family:var(--serif); font-weight:600; letter-spacing:-.08em; } h2 { margin-bottom:12px; font-size:clamp(27px,3vw,39px); line-height:1.05; letter-spacing:-.05em; } p { color:var(--ink-soft); }
.hero-lede { max-width:500px; font-size:17px; line-height:1.6; }.hero-note { display:flex; gap:10px; align-items:flex-start; max-width:425px; margin-top:30px; padding:13px 16px; border-left:2px solid var(--coral); color:var(--ink-soft); font-size:12px; }.note-icon { color:var(--coral); font-size:18px; line-height:1; }
.orbital-art { position:relative; justify-self:end; width:min(420px, 90%); aspect-ratio:1; border-radius:50%; background:var(--teal-dark); overflow:hidden; }.orbital-ring { position:absolute; border:1px solid rgba(203,231,105,.23); border-radius:50%; transform:rotate(-25deg); }.ring-one { inset:14%; }.ring-two { inset:25%; border-color:rgba(203,231,105,.13); }.moon { position:absolute; top:15%; right:21%; width:30%; aspect-ratio:1; border-radius:50%; background:var(--lime); box-shadow:0 0 44px rgba(203,231,105,.28); }.moon span { position:absolute; top:7%; left:20%; width:18%; height:12%; border-radius:50%; background:#b2cf55; transform:rotate(20deg); box-shadow:17px 21px 0 -2px #b2cf55, -6px 28px 0 -5px #b2cf55; }.horizon { position:absolute; bottom:-2%; left:-4%; width:110%; height:32%; background:#0b3944; clip-path:polygon(0 48%,8% 35%,17% 43%,29% 25%,37% 39%,46% 20%,53% 40%,62% 27%,70% 44%,79% 18%,88% 37%,100% 27%,100% 100%,0 100%); }.star { position:absolute; color:var(--lime); }.star-a { left:24%; top:28%; font-size:16px; }.star-b { left:14%; top:53%; font-size:30px; }.star-c { left:64%; top:39%; font-size:24px; }
.planner { padding:34px 0 66px; border-top:1px solid var(--line); }.section-intro,.results-head,.stay-section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; }.intro-aside { width:270px; margin:0; font-size:13px; }.planner-form { display:grid; grid-template-columns:1.7fr 1fr 1fr 1.25fr auto; gap:9px; padding:9px; margin-top:26px; border:1px solid var(--line); background:var(--white); }.field { display:flex; flex-direction:column; gap:6px; padding:8px 12px; border-right:1px solid var(--line); }.field span { color:var(--ink-soft); font:10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }.field select,.field input { border:0; color:var(--ink); background:transparent; font:14px var(--sans); outline:none; min-width:0; }.field select { cursor:pointer; }.button { display:inline-flex; justify-content:center; align-items:center; gap:30px; border:0; padding:14px 20px; font:600 13px var(--sans); cursor:pointer; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--teal); color:var(--white); }.button-primary:hover { background:var(--teal-dark); }.button-secondary { background:var(--cream); color:var(--teal-dark); margin-top:15px; }.button-light { background:var(--lime); color:var(--teal-dark); }.form-status { min-height:18px; margin:10px 0 0; font:11px var(--mono); color:var(--teal); }
.results { padding:62px 0 100px; }.muted { color:#8a999c; font-weight:400; font-size:.6em; letter-spacing:0; }.text-button { border:0; border-bottom:1px solid var(--teal); padding:0 0 5px; color:var(--teal); background:none; font:12px var(--mono); cursor:pointer; }.text-button span { margin-left:12px; }.window-summary { margin-top:26px; display:grid; grid-template-columns:1.1fr 1fr; background:var(--teal-dark); color:var(--white); }.window-callout { display:flex; gap:12px; align-items:center; padding:21px 24px; border-right:1px solid rgba(255,255,255,.15); }.status-dot { flex:0 0 auto; width:10px; height:10px; border-radius:50%; }.status-dot.good { background:var(--lime); box-shadow:0 0 0 5px rgba(203,231,105,.14); }.window-callout strong,.window-callout span { display:block; }.window-callout strong { font-size:15px; }.window-callout span { margin-top:3px; color:#b9d4d1; font-size:12px; }.window-days { display:grid; grid-template-columns:repeat(3,1fr); }.day-pill { padding:17px 18px; border-left:1px solid rgba(255,255,255,.15); cursor:pointer; }.day-pill:hover,.day-pill.active { background:#1b6268; }.day-pill small { display:block; color:#a6c6c3; font:10px var(--mono); text-transform:uppercase; }.day-pill strong { display:block; margin:6px 0 1px; font-size:15px; }.day-pill span { color:var(--lime); font-size:11px; }.context-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:1px 0 70px; background:var(--line); border:1px solid var(--line); }.context-card { min-height:138px; padding:17px; background:var(--white); }.context-label { display:flex; justify-content:space-between; color:var(--ink-soft); font:10px var(--mono); text-transform:uppercase; letter-spacing:.05em; }.context-icon { color:var(--teal); font-size:22px; line-height:1; }.context-value { display:block; margin:19px 0 5px; font-size:21px; font-weight:600; letter-spacing:-.04em; }.context-detail { color:var(--ink-soft); font-size:11px; }.confidence { display:inline-block; margin-top:14px; padding:3px 6px; color:var(--teal); background:#e6f0e8; font:9px var(--mono); text-transform:uppercase; }.confidence.mixed { color:#986a29; background:#f5ead2; }.stay-section-head { margin-bottom:19px; }.result-count { color:var(--ink-soft); font:11px var(--mono); }.stay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.stay-card { display:flex; flex-direction:column; min-height:355px; padding:21px; background:var(--white); border:1px solid var(--line); position:relative; }.stay-card.featured { border-top:3px solid var(--lime); }.stay-badge { align-self:flex-start; padding:5px 8px; color:var(--teal-dark); background:var(--lime); font:9px var(--mono); text-transform:uppercase; }.stay-type { margin-top:22px; color:var(--teal); font:10px var(--mono); text-transform:uppercase; }.stay-card h3 { margin:7px 0 5px; font-size:22px; letter-spacing:-.05em; }.stay-place { margin:0; font-size:12px; }.stay-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:21px 0 18px; padding:14px 0; border-block:1px solid var(--line); }.metric strong,.metric span { display:block; }.metric strong { font-size:17px; }.metric span { margin-top:2px; color:var(--ink-soft); font:9px var(--mono); text-transform:uppercase; }.stay-reason { min-height:51px; margin:0 0 16px; font-size:12px; line-height:1.45; }.card-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }.card-actions button,.card-actions a { color:var(--teal); border:0; background:none; font:11px var(--mono); cursor:pointer; }.card-actions a { border-bottom:1px solid var(--teal); padding-bottom:3px; }.sponsored-note { margin:22px 0 0; font-size:11px; }.sponsored-note span { color:var(--teal); margin-right:5px; }
.method { display:grid; grid-template-columns: .9fr 1.1fr; gap:80px; align-items:center; padding:76px 0; border-top:1px solid var(--line); }.method-art { height:230px; position:relative; border-bottom:1px solid var(--ink); }.method-line { position:absolute; left:9%; right:8%; top:51%; border-top:1px dashed #99a8a2; }.method-sun,.method-moon { position:absolute; z-index:1; display:grid; place-items:center; width:58px; height:58px; border-radius:50%; font-size:31px; }.method-sun { left:7%; top:35%; color:var(--teal-dark); background:var(--lime); }.method-moon { right:7%; top:35%; color:var(--lime); background:var(--teal-dark); }.method-label { position:absolute; top:70%; color:var(--ink-soft); font:10px var(--mono); text-transform:uppercase; }.label-sun { left:8%; }.label-moon { right:5%; }.method-copy p { max-width:500px; }.signal-pills { display:flex; flex-wrap:wrap; gap:7px; margin:20px 0; }.signal-pills span { padding:7px 9px; color:var(--teal-dark); background:var(--cream); font:10px var(--mono); }
.operator { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:44px 48px; background:var(--teal); color:var(--white); }.operator h2 { color:var(--white); }.operator p { max-width:540px; margin:0; color:#c4dbd6; font-size:14px; }.operator .eyebrow { color:var(--lime); }.limitations { display:grid; grid-template-columns:.7fr 1.3fr; gap:90px; padding:92px 0; }.limitations-title h2 { max-width:210px; }.limitation-list details { padding:16px 0; border-top:1px solid var(--line); }.limitation-list details:last-child { border-bottom:1px solid var(--line); }.limitation-list summary { display:flex; justify-content:space-between; cursor:pointer; list-style:none; font-size:16px; font-weight:600; }.limitation-list summary::-webkit-details-marker { display:none; }.limitation-list summary:after { content:'+'; color:var(--teal); font:18px var(--mono); }.limitation-list details[open] summary:after { content:'−'; }.limitation-list details p { max-width:650px; margin:10px 30px 2px 0; font-size:13px; }
.footer { display:flex; justify-content:space-between; padding:25px 0 45px; color:#829092; font:10px var(--mono); }.footer a { color:var(--teal); }.footer span:last-child { text-align:right; }
dialog { width:min(530px, calc(100% - 32px)); padding:31px; border:0; color:var(--ink); box-shadow:0 20px 80px rgba(10,40,50,.25); }.dialog-close { position:absolute; top:17px; right:18px; border:0; background:none; color:var(--ink-soft); font-size:24px; cursor:pointer; }dialog::backdrop { background:rgba(11,35,45,.48); }.dialog-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }.dialog-row div { padding:12px; background:var(--cream); }.dialog-row strong,.dialog-row span { display:block; }.dialog-row strong { font-size:13px; }.dialog-row span { margin-top:4px; color:var(--ink-soft); font-size:11px; }
@media (max-width:850px) { .hero { grid-template-columns:1fr; padding-top:35px; }.orbital-art { justify-self:center; width:min(380px,90%); margin-top:45px; }.planner-form { grid-template-columns:1fr 1fr; }.field-destination { grid-column:span 2; }.planner-form .button { grid-column:span 2; }.field:nth-of-type(2) { border-right:0; }.context-grid { grid-template-columns:1fr 1fr; }.stay-grid { grid-template-columns:1fr 1fr; }.method { gap:40px; }.limitations { gap:40px; } }
@media (max-width:600px) { .shell,.topbar { width:min(100% - 30px, 1160px); }.topbar { height:72px; }.topbar nav a:not(.nav-cta) { display:none; }.brand small { font-size:8px; }.hero { padding:35px 0 60px; }.hero-lede { font-size:15px; }.orbital-art { width:82vw; }.section-intro,.results-head,.stay-section-head { align-items:flex-start; flex-direction:column; gap:12px; }.intro-aside { width:auto; }.planner-form { grid-template-columns:1fr; }.field-destination,.planner-form .button { grid-column:auto; }.field { border-right:0; border-bottom:1px solid var(--line); }.window-summary { grid-template-columns:1fr; }.window-callout { border-right:0; border-bottom:1px solid rgba(255,255,255,.15); }.window-days { grid-template-columns:repeat(3,1fr); }.day-pill { padding:13px 8px; }.day-pill strong { font-size:13px; }.context-grid,.stay-grid { grid-template-columns:1fr; }.context-card { min-height:auto; }.method { grid-template-columns:1fr; padding:60px 0; }.method-art { height:190px; }.operator { align-items:flex-start; flex-direction:column; padding:32px 24px; }.limitations { grid-template-columns:1fr; gap:25px; padding:65px 0; }.limitations-title h2 { max-width:none; }.footer { align-items:flex-start; flex-direction:column; gap:11px; }.footer span:last-child { text-align:left; } }
/* UX pass: nocturnal editorial identity */
body{background:radial-gradient(circle at 80% 0%,#233b59 0 12%,transparent 36%),#0c1929;color:#eef4ef}.hero{min-height:430px;background:linear-gradient(160deg,#0b1728,#142b45 62%,#234b59);border-bottom:1px solid #456675}.hero h1,.section-intro h2,.results h2{letter-spacing:-.06em}.planner-form,.stay-card,.context-card,.limitations details{background:#14263a;border-color:#385265;box-shadow:0 14px 35px #07111d80}.field input,.field select{background:#0e1d2e;color:#fff;border-color:#486171}.button-secondary{background:#233d50;color:#eef4ef}.button-primary{background:var(--lime);color:#112330}.operator{background:linear-gradient(110deg,#245c5e,#183744);border-radius:24px}.signal-pills span,.tag{background:#203c4e;color:#d5f0dc}
@media(max-width:720px){.hero{min-height:360px}.planner-form{grid-template-columns:1fr}.results-head,.section-intro{display:block}.results-head .text-button{margin-top:10px}.stay-grid,.context-grid{grid-template-columns:1fr}}