/* Layout: one long field-guide site under a sticky top bar: night-sky hero, weather tiles, the wheel, the directory, and service boards. One deliberate dark look, sharing the This EVE Life palette (deep space blues, cyan, magenta, amber) and type. No light theme. */
:root{color-scheme:dark;
--space:#03060e;--panel:#0a1222;--panel2:#0d1730;--edge:#1b2a45;--blue:#2e8bff;--deep:#1470e9;--cyan:#35d6ff;--pink:#ff5cc8;--magenta:#f22dc8;--amber:#ff8a3d;--ok:#3ee08f;--hi:#f2f7ff;--mid:#c9d6ee;--dim:#8b98b8;
/* Role names used by the pages and scripts, mapped onto the palette. */
--bg:var(--space);--paper:var(--panel);--ink:var(--hi);--mute:var(--dim);--line:var(--edge);--gold:var(--amber);--vine:var(--pink);--pine:var(--cyan);--sky:var(--blue);--on-accent:var(--hi);--scene-ink:var(--hi);
--wheel1:#1470e9;--wheel2:#c21f9e;--wheel3:#0a7a9e;--wheel4:#c4551a;--wheel-text:#f2f7ff;--wheel-rim:#0a1222;--hub:#2e8bff;
--display:'Orbitron',system-ui,sans-serif;--body:'Rajdhani','Segoe UI',system-ui,sans-serif;--tag:'Share Tech Mono',ui-monospace,Consolas,monospace}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--space);color:var(--mid);font-family:var(--body);font-size:18px;line-height:1.5;margin:0;
padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 85% 0%,#f22dc826,transparent 45%),radial-gradient(ellipse at 0% 100%,#1470e92e,transparent 50%),linear-gradient(#2e8bff10 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,#2e8bff10 1px,transparent 1px) 0 0/48px 48px}
a{color:var(--cyan)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding-block:0 4rem}
h1,h2,h3{text-wrap:balance}
h2{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,3.6vw,1.9rem);line-height:1.1;margin:0;color:var(--hi);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:.7rem}
h2::before{content:"";flex:none;width:3px;height:1.1em;background:linear-gradient(180deg,var(--pink),var(--amber));box-shadow:0 0 10px #f22dc8aa}
h3{font-family:var(--body);font-weight:700;font-size:1.1rem;margin:0;color:var(--hi)}
.tag{font-family:var(--tag);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.btn{font-family:var(--body);font-weight:700;font-size:1.05rem;letter-spacing:.02em;border:1px solid #4f8ff0;background:linear-gradient(180deg,#3276dc,#2459b8);color:var(--hi);padding:.7rem 1.2rem;cursor:pointer;border-radius:6px;text-decoration:none;display:inline-block;transition:box-shadow .2s}
.btn:hover{box-shadow:0 0 18px #2e8bff55}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:default;box-shadow:none}
.btn.alt{background:transparent;border-color:var(--edge);color:var(--mid)}
.btn.alt:hover{border-color:var(--cyan);color:var(--hi);box-shadow:0 0 14px #35d6ff33}

/* top bar */
body::after{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--space)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:#03060ee6;backdrop-filter:blur(8px);border-bottom:1px solid var(--edge);margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.top .in{max-width:1040px;margin:0 auto;display:flex;align-items:center;gap:1.1rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:.4rem}
.top .in::-webkit-scrollbar{display:none}
.top .brand{font-family:var(--display);font-weight:900;color:var(--hi);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;margin-right:auto;white-space:nowrap;text-decoration:none;padding-block:.6rem}
.top .brand:hover{color:var(--cyan)}
.top nav{display:flex;align-items:center;gap:1.1rem;flex:none}
.top nav a{font-family:var(--tag);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-decoration:none;padding-block:.6rem;white-space:nowrap;border-bottom:2px solid transparent}
.top nav a:hover{color:var(--cyan)}
.top nav a[aria-current="page"]{color:var(--pink);text-shadow:0 0 10px #f22dc888;border-bottom-color:var(--pink)}

/* hero */
.hero{position:relative;margin-top:1.2rem;border:1px solid var(--edge);border-radius:8px;overflow:hidden;min-height:340px;background:var(--space);box-shadow:0 0 40px #1470e922}
.hero svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,6,14,.82),rgba(3,6,14,.4) 55%,rgba(3,6,14,0))}
.hero .copy{position:relative;z-index:2;padding:clamp(1.4rem,5vw,3rem);max-width:36rem;color:var(--mid)}
.hero .tag{display:flex;align-items:center;gap:.6rem}
.hero .tag::before{content:"";width:9px;height:9px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);flex:none}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(2rem,6.5vw,3.6rem);line-height:1.02;margin:.6rem 0 .8rem;color:var(--hi);text-transform:uppercase;letter-spacing:.03em;text-shadow:0 3px 0 #02218a,0 0 28px #2e8bff88}
.hero p{margin:0 0 1.2rem;max-width:32rem;font-size:1.1rem;font-weight:500}
.hero .bar{display:flex;flex-wrap:wrap;gap:.7rem}

section{margin-top:3.6rem;scroll-margin-top:70px}
.head{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.3rem;padding-bottom:.9rem;border-bottom:1px solid var(--edge)}
.head p{margin:0;max-width:60ch;color:var(--mid)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-family:var(--tag);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--edge);background:var(--panel);color:var(--mid);padding:.4rem .85rem;border-radius:999px;cursor:pointer;transition:box-shadow .2s}
.chip:hover{border-color:var(--cyan);color:var(--hi)}
.chip[aria-pressed="true"]{background:#35d6ff14;border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px #35d6ff44}

/* panels */
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:6px;padding:1.1rem 1.2rem;min-width:0}
.note{font-size:.95rem;color:var(--dim)}

/* wheel */
.wheel-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.6rem;align-items:center}
.stage{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin-inline:auto;filter:drop-shadow(0 0 24px #1470e955)}
.stage canvas{width:100%;height:100%;display:block}
.pointer{position:absolute;left:50%;top:-6px;width:0;height:0;transform:translateX(-50%);border-left:16px solid transparent;border-right:16px solid transparent;border-top:34px solid var(--pink);filter:drop-shadow(0 0 8px #f22dc8aa);z-index:2}
.ctrl{display:flex;flex-direction:column;gap:1rem;min-width:0}
.sel{display:flex;flex-direction:column;gap:.35rem}
select{font-family:var(--body);font-weight:600;font-size:1.05rem;padding:.65rem .8rem;border:1px solid var(--edge);background:var(--panel2);color:var(--hi);border-radius:6px;max-width:100%}
.result{min-height:9rem;background:var(--panel);border:1px solid var(--pink);border-radius:6px;padding:1rem 1.2rem;box-shadow:0 0 18px #f22dc833 inset}
.result h3{font-family:var(--display);font-weight:800;font-size:1.4rem;line-height:1.15;margin:.3rem 0 .4rem;overflow-wrap:anywhere;color:var(--hi)}
.result p{margin:.15rem 0;color:var(--mid)}

/* directory */
.tools{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1rem}
input[type="search"]{font-family:var(--body);font-size:1rem;padding:.6rem .8rem;border:1px solid var(--edge);background:var(--panel2);color:var(--hi);border-radius:6px;width:100%;max-width:420px}
input[type="search"]::placeholder{color:var(--dim)}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.8rem}
.item{background:var(--panel);border:1px solid var(--edge);border-radius:6px;padding:.8rem .95rem;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.item h3{overflow-wrap:anywhere}
.item .meta{font-family:var(--tag);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.item .sm{font-size:.92rem;color:var(--dim);overflow-wrap:anywhere}
.item a{font-size:.92rem}
.count{font-family:var(--tag);font-size:.8rem;letter-spacing:.06em;color:var(--dim)}

/* services */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.svc .panel h3{font-family:var(--tag);font-weight:400;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:.7rem}
.svc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.svc li{border-top:1px solid var(--edge);padding-top:.6rem}
.svc li:first-child{border-top:0;padding-top:0}
.svc li b{display:block;font-weight:700;color:var(--hi);font-size:1.05rem}
.svc li span{display:block;font-size:.93rem;color:var(--dim)}
/* Links inside content are marked by an underline, not color alone. */
.svc a,.item a,.tile-l a,.result a,.fine a,.head a{text-decoration:underline;text-underline-offset:.18em;text-decoration-color:#35d6ff80}
.svc a:hover,.item a:hover,.tile-l a:hover,.result a:hover{text-decoration-color:var(--cyan)}
.fine{margin-top:2rem;font-size:.9rem;color:var(--dim);max-width:70ch}
footer{margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--edge);display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:space-between}
footer .tag{color:var(--dim);text-decoration:none}
footer a.tag:hover{color:var(--cyan)}

@media (max-width:760px){.wheel-box{grid-template-columns:minmax(0,1fr)}.hero::after{background:linear-gradient(180deg,rgba(3,6,14,.62),rgba(3,6,14,.6))}}

/* weather tiles and explore cards: panel with a magenta-to-amber top bar */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.tile,.card{position:relative;background:var(--panel);border:1px solid var(--edge);border-radius:6px;padding:1.1rem 1.1rem 1rem;min-width:0;display:flex;flex-direction:column;gap:.6rem;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.tile::before,.card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--magenta),var(--amber));box-shadow:0 0 10px #f22dc888}
.tile-h{display:flex;flex-direction:column;gap:.15rem}
.tile-h h3{font-family:var(--display);font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--hi)}
.tile-b{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.tile .big{font-family:var(--display);font-weight:900;font-size:3rem;line-height:1;color:var(--cyan);text-shadow:0 0 18px #35d6ff66}
.tile .cond{font-weight:600;color:var(--hi)}
.tile .next{display:flex;justify-content:space-between;gap:.6rem;border-top:1px solid var(--edge);padding-top:.4rem;font-size:.95rem;color:var(--hi)}
.tile .next span:last-child{color:var(--dim);text-align:right;min-width:0}
.tile-l{margin:0;font-size:.92rem;margin-top:auto}

/* Right-now strip: three plain links under the hero, not buttons */
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;margin-top:1rem;font-weight:600}
.quick a{color:var(--hi);text-decoration:underline;text-underline-offset:.18em;text-decoration-color:#35d6ff80}
.quick a:hover{color:var(--cyan)}
.svc li a[href^="tel:"]{white-space:nowrap}
@media (max-width:700px){.top .in{gap:1rem}.top .brand{display:none}.quick{flex-direction:column;align-items:flex-start;gap:.6rem}}

[hidden]{display:none!important}
/* multi-page site */
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;font-family:var(--tag);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.crumbs a{color:var(--pink);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs + section{margin-top:1.4rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.card{text-decoration:none;color:var(--mid);gap:.35rem}
.card:hover,.card:focus-visible{border-color:var(--cyan);box-shadow:0 0 18px #35d6ff33}
.card h3{font-family:var(--display);font-weight:800;font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;color:var(--hi);line-height:1.3}
.card span{color:var(--dim);font-size:.95rem}