/* ============ TOKENS ============ */
:root{
  --ground:#E9EEEF; --ground-2:#DFE6E8;
  --panel:#F7FAFA; --panel-2:#EEF3F4; --panel-hi:#FFFFFF;
  --ink:#0C1E26; --ink-2:#274049; --muted:#5C737B; --faint:#8CA0A7;
  --rule:rgba(12,30,38,.14); --rule-soft:rgba(12,30,38,.07);
  --real:#0D7484; --real-dim:rgba(13,116,132,.12);
  --bs:#A9600B; --bs-dim:rgba(169,96,11,.12);
  --alert:#B03A30; --alert-dim:rgba(176,58,48,.12);
  --on-accent:#FFFFFF;
  --shadow:0 1px 2px rgba(12,30,38,.06), 0 8px 24px -12px rgba(12,30,38,.18);
  --dial-ground:#F2F6F7; --dial-line:rgba(12,30,38,.18); --dial-text:#5C737B;
  --sw:1px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#080F13; --ground-2:#0C171D;
    --panel:#101F27; --panel-2:#0D1A21; --panel-hi:#16303B;
    --ink:#DBE7EB; --ink-2:#B4C8CF; --muted:#7B9299; --faint:#5B7078;
    --rule:rgba(219,231,235,.14); --rule-soft:rgba(219,231,235,.07);
    --real:#4FD1DB; --real-dim:rgba(79,209,219,.13);
    --bs:#EFA13C; --bs-dim:rgba(239,161,60,.13);
    --alert:#E2574C; --alert-dim:rgba(226,87,76,.14);
    --on-accent:#06171A;
    --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px #000;
    --dial-ground:#0B161B; --dial-line:rgba(219,231,235,.16); --dial-text:#7B9299;
  }
}
:root[data-theme="dark"]{
  --ground:#080F13; --ground-2:#0C171D;
  --panel:#101F27; --panel-2:#0D1A21; --panel-hi:#16303B;
  --ink:#DBE7EB; --ink-2:#B4C8CF; --muted:#7B9299; --faint:#5B7078;
  --rule:rgba(219,231,235,.14); --rule-soft:rgba(219,231,235,.07);
  --real:#4FD1DB; --real-dim:rgba(79,209,219,.13);
  --bs:#EFA13C; --bs-dim:rgba(239,161,60,.13);
  --alert:#E2574C; --alert-dim:rgba(226,87,76,.14);
  --on-accent:#06171A;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px #000;
  --dial-ground:#0B161B; --dial-line:rgba(219,231,235,.16); --dial-text:#7B9299;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:400}
p{margin:0}
a{color:var(--real); text-decoration-thickness:1px; text-underline-offset:3px}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--real); outline-offset:2px; border-radius:2px}
table{color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.num{font-variant-numeric:tabular-nums}
.wrap{width:min(1180px,100% - 2.5rem); margin-inline:auto}
.view[hidden]{display:none}
.lbl{font-family:"IBM Plex Mono",monospace; font-size:.66rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}

/* ============ TOP BAR ============ */
.topbar{border-bottom:var(--sw) solid var(--rule); background:var(--ground-2)}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 0; flex-wrap:wrap}
.wordmark{font-family:"Instrument Serif",Georgia,serif; font-size:1.2rem; letter-spacing:-.01em; color:var(--ink);
  text-decoration:none; display:inline-flex; align-items:baseline; gap:.4rem}
.wordmark em{font-style:italic; color:var(--bs)}
.topnav{display:flex; gap:.2rem; flex-wrap:wrap}
.topnav a{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:.35rem .6rem; border:var(--sw) solid transparent; border-radius:2px}
.topnav a:hover{color:var(--ink); border-color:var(--rule)}
.topnav a.on{color:var(--bs); border-color:var(--bs); background:var(--bs-dim)}

/* ============ MASTHEAD ============ */
.mast{position:relative; border-bottom:var(--sw) solid var(--rule); background:var(--ground-2); overflow:hidden}
#stars{position:absolute; inset:0; width:100%; height:100%; display:block}
.mast-in{position:relative; padding:2.6rem 0 2rem; display:flex; flex-direction:column; gap:1.1rem}
.glyphrow{font-size:1rem; color:var(--faint); letter-spacing:.22em}
h1.title{font-family:"Instrument Serif",Georgia,serif; font-size:clamp(2.7rem,8.2vw,5.4rem);
  line-height:.94; letter-spacing:-.015em}
h1.title em{font-style:italic; color:var(--bs)}
.tagline{max-width:52ch; color:var(--muted); font-size:1.02rem}
.tagline b{color:var(--ink-2); font-weight:600}
.legend{display:flex; gap:1.3rem; flex-wrap:wrap; padding-top:.4rem}
.legend span{display:flex; align-items:center; gap:.45rem; font-size:.74rem; color:var(--muted);
  font-family:"IBM Plex Mono",monospace; letter-spacing:.04em}
.dot{width:9px; height:9px; border-radius:50%; flex:none}
.dot.r{background:var(--real)} .dot.b{background:var(--bs)}

/* ============ SECTIONS ============ */
section{padding:3.2rem 0 .4rem}
.sec-head{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem;
  border-bottom:var(--sw) solid var(--rule); padding-bottom:.7rem}
.sec-head h2{font-family:"Instrument Serif",Georgia,serif; font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.05}
.sec-head p{color:var(--muted); font-size:.9rem; max-width:56ch}

/* ============ CONSOLE ============ */
.console{display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:1.6rem; align-items:start}
@media(max-width:860px){.console{grid-template-columns:1fr}}
.dialbox{background:var(--panel); border:var(--sw) solid var(--rule); border-radius:3px;
  padding:1rem; box-shadow:var(--shadow)}
.dialbox canvas{width:100%; height:auto; display:block; border-radius:2px}
.dial-cap{display:flex; justify-content:space-between; gap:1rem; margin-top:.75rem;
  border-top:var(--sw) solid var(--rule-soft); padding-top:.6rem}
.ephem{background:var(--panel); border:var(--sw) solid var(--rule); border-radius:3px; box-shadow:var(--shadow); overflow:hidden}
.ephem-head{display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.7rem .9rem; border-bottom:var(--sw) solid var(--rule); background:var(--panel-2); flex-wrap:wrap}
.tbl-scroll{overflow-x:auto}
.tbl-scroll table{width:100%; border-collapse:collapse; font-family:"IBM Plex Mono",monospace; font-size:.8rem}
th{text-align:left; font-weight:500; font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); padding:.5rem .9rem; border-bottom:var(--sw) solid var(--rule); white-space:nowrap}
td{padding:.42rem .9rem; border-bottom:var(--sw) solid var(--rule-soft); white-space:nowrap; font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--real-dim)}
td.body{font-family:"Archivo",sans-serif; font-size:.86rem; color:var(--ink); white-space:normal}
.glyph{font-size:1.05em; color:var(--real); margin-right:.45em}
.rx{color:var(--alert); font-weight:600}
.pill{display:inline-block; padding:.1rem .42rem; border-radius:2px; font-size:.66rem;
  letter-spacing:.08em; text-transform:uppercase; border:var(--sw) solid currentColor}
.pill.rx{color:var(--alert); background:var(--alert-dim)}
.pill.fw{color:var(--muted); border-color:var(--rule)}

/* ============ SETUP ============ */
.setup{background:var(--panel); border:var(--sw) solid var(--rule); border-radius:3px;
  box-shadow:var(--shadow); padding:1.4rem; display:grid; gap:1.1rem}
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.9rem 1.1rem}
.field{display:flex; flex-direction:column; gap:.32rem; min-width:0}
.field input,.field select{background:var(--panel-2); border:var(--sw) solid var(--rule); border-radius:2px;
  padding:.55rem .6rem; font-family:"IBM Plex Mono",monospace; font-size:.85rem; width:100%}
.field input:hover,.field select:hover{border-color:var(--muted)}
.hint{font-size:.72rem; color:var(--faint); line-height:1.35; max-width:82ch}
.fieldset-title{display:flex; align-items:center; gap:.7rem; margin-top:.2rem}
.fieldset-title::after{content:""; flex:1; height:1px; background:var(--rule)}
.btnrow{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
.btn{border:var(--sw) solid var(--ink); background:var(--ink); color:var(--ground); cursor:pointer;
  padding:.6rem 1.05rem; border-radius:2px; font-family:"IBM Plex Mono",monospace;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; transition:opacity .15s, transform .08s}
.btn:hover{opacity:.85} .btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink); opacity:1}
.btn.gps{background:var(--real); border-color:var(--real); color:var(--on-accent)}
.gpsline{display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--muted);
  font-family:"IBM Plex Mono",monospace}
.led{width:8px; height:8px; border-radius:50%; background:var(--faint); flex:none}
.led.on{background:var(--real); box-shadow:0 0 0 3px var(--real-dim)}
.led.err{background:var(--alert); box-shadow:0 0 0 3px var(--alert-dim)}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.led.seek{background:var(--bs); animation:blip 1s infinite}

/* ============ NAV RAIL ============ */
.rail{position:sticky; top:0; z-index:30; background:var(--ground);
  border-bottom:var(--sw) solid var(--rule); border-top:var(--sw) solid var(--rule); margin-top:2.6rem}
.rail-in{display:flex; gap:.35rem; overflow-x:auto; padding:.55rem 0; scrollbar-width:none}
.rail-in::-webkit-scrollbar{display:none}
.rail button{flex:none; border:var(--sw) solid transparent; background:transparent; cursor:pointer; border-radius:2px;
  padding:.4rem .75rem; font-family:"IBM Plex Mono",monospace; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.rail button:hover{color:var(--ink); border-color:var(--rule)}
.rail button[aria-pressed="true"]{background:var(--bs-dim); color:var(--bs); border-color:var(--bs)}
.rail .count{color:var(--faint); margin-left:.4em}

/* ============ READING CARDS ============ */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1rem; padding-bottom:1rem}
.card{background:var(--panel); border:var(--sw) solid var(--rule); border-radius:3px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; transition:border-color .18s}
.card:hover{border-color:var(--muted)}
.card.wide{grid-column:span 2}
@media(max-width:800px){.card.wide{grid-column:span 1}}
.card-head{display:flex; justify-content:space-between; align-items:center; gap:.8rem;
  padding:.6rem .95rem; border-bottom:var(--sw) solid var(--rule); background:var(--panel-2)}
.card-head .cat{color:var(--faint)}
.card-body{padding:1.05rem .95rem 1.1rem; display:flex; flex-direction:column; gap:.7rem; flex:1}
.q{font-size:.82rem; color:var(--muted)}
.ans{font-family:"Instrument Serif",Georgia,serif; font-size:1.65rem; line-height:1.14;
  color:var(--bs); letter-spacing:-.01em}
.ans.real{color:var(--real)}
.sub{font-size:.9rem; color:var(--ink-2); line-height:1.5}
.tag{display:inline-flex; align-items:center; gap:.35rem; font-family:"IBM Plex Mono",monospace;
  font-size:.63rem; letter-spacing:.11em; text-transform:uppercase; color:var(--faint);
  border:var(--sw) solid var(--rule); border-radius:2px; padding:.12rem .4rem}
.tag.real{color:var(--real); border-color:var(--real); background:var(--real-dim)}
.tag.bs{color:var(--bs); border-color:var(--bs); background:var(--bs-dim)}

/* the interpretation: technical prose, set apart from the answer */
.interp{border-top:var(--sw) solid var(--rule-soft); padding-top:.75rem; display:flex;
  flex-direction:column; gap:.6rem}
.interp .lbl{margin-bottom:-.1rem}
.interp p{font-size:.855rem; line-height:1.62; color:var(--ink-2); max-width:64ch}
.interp p .term{color:var(--ink); font-weight:600}
.interp p .deg{font-family:"IBM Plex Mono",monospace; font-size:.94em; font-variant-numeric:tabular-nums;
  color:var(--real); white-space:nowrap}
.card-foot{display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  padding:.5rem .95rem; border-top:var(--sw) solid var(--rule-soft); margin-top:auto}
.reroll{border:var(--sw) solid var(--rule); background:transparent; color:var(--muted); cursor:pointer;
  border-radius:2px; padding:.24rem .55rem; font-family:"IBM Plex Mono",monospace; font-size:.64rem;
  letter-spacing:.1em; text-transform:uppercase}
.reroll:hover{color:var(--ink); border-color:var(--ink)}
.conf{display:flex; align-items:center; gap:.45rem; font-family:"IBM Plex Mono",monospace;
  font-size:.64rem; color:var(--faint); letter-spacing:.08em}
.meter{width:52px; height:4px; background:var(--rule); border-radius:2px; overflow:hidden}
.meter i{display:block; height:100%; background:var(--bs)}
.meter.real i{background:var(--real)}

/* ============ CARD INTERNALS ============ */
.bigthree{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem}
.bt{background:var(--ground-2); border:var(--sw) solid var(--rule-soft); border-radius:2px; padding:.6rem .55rem; text-align:center}
.bt .g{font-size:1.5rem; color:var(--real); line-height:1}
.bt .n{font-family:"Instrument Serif",Georgia,serif; font-size:1.05rem; margin-top:.15rem}
.bt .d{font-family:"IBM Plex Mono",monospace; font-size:.63rem; color:var(--faint); font-variant-numeric:tabular-nums}
.swatches{display:flex; gap:.5rem; flex-wrap:wrap}
.sw{display:flex; align-items:center; gap:.45rem; font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted)}
.sw i{width:26px; height:26px; border-radius:2px; border:var(--sw) solid var(--rule); display:block}
.nums{display:flex; gap:.4rem; flex-wrap:wrap}
.nums b{font-family:"IBM Plex Mono",monospace; font-size:1rem; font-weight:500; font-variant-numeric:tabular-nums;
  background:var(--bs-dim); color:var(--bs); border:var(--sw) solid var(--bs); border-radius:2px; padding:.16rem .5rem}
.kv{display:grid; grid-template-columns:auto 1fr; gap:.25rem .9rem; font-family:"IBM Plex Mono",monospace; font-size:.78rem}
.kv dt{color:var(--faint); letter-spacing:.06em; text-transform:uppercase; font-size:.64rem; align-self:center}
.kv dd{margin:0; font-variant-numeric:tabular-nums; color:var(--ink)}
.compat{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.bar{height:9px; background:var(--rule); border-radius:2px; overflow:hidden; margin-top:.2rem}
.bar i{display:block; height:100%; background:var(--bs); transition:width .5s cubic-bezier(.22,1,.36,1)}
.moonwrap{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.moon{width:74px; height:74px; flex:none; border-radius:50%; background:var(--ground-2);
  border:var(--sw) solid var(--rule); overflow:hidden}
.moon canvas{width:100%; height:100%; display:block}
.ask{display:flex; gap:.5rem; flex-wrap:wrap}
.ask input{flex:1; min-width:150px; background:var(--panel-2); border:var(--sw) solid var(--rule);
  border-radius:2px; padding:.5rem .6rem; font-size:.88rem}
.coord{font-family:"IBM Plex Mono",monospace; font-size:.74rem; color:var(--ink);
  background:var(--ground-2); border:var(--sw) solid var(--rule); border-radius:2px; padding:.45rem .6rem;
  user-select:all; word-break:break-all}
.compass{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap}
.compass canvas{width:72px; height:72px; flex:none}

/* ============ DESTINATIONS ============ */
.dests{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem}
.dest{background:var(--panel); border:var(--sw) solid var(--rule); border-radius:3px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden; text-align:left}
.dest-btn{all:unset; cursor:pointer; display:flex; flex-direction:column; gap:.5rem;
  padding:1rem .95rem; border-bottom:var(--sw) solid transparent}
.dest-btn:hover{background:var(--panel-2)}
.dest-btn:focus-visible{outline:2px solid var(--real); outline-offset:-2px}
.dest-occ{display:flex; justify-content:space-between; align-items:center; gap:.7rem}
.dest-name{font-family:"Instrument Serif",Georgia,serif; font-size:1.55rem; line-height:1.1; color:var(--bs)}
.dest-name span{color:var(--muted); font-size:.9rem; font-family:"Archivo",sans-serif; display:block; margin-top:.1rem}
.dest-meta{display:flex; gap:.5rem 1.1rem; flex-wrap:wrap; font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums}
.dest-meta b{color:var(--ink); font-weight:500}
.dest-blurb{font-size:.87rem; color:var(--ink-2); line-height:1.5}
.dest-more{display:flex; align-items:center; gap:.4rem; font-family:"IBM Plex Mono",monospace;
  font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--real)}
.dest-more i{font-style:normal; transition:transform .2s}
.dest[open] .dest-more i{transform:rotate(90deg)}
.dest-panel{display:none; border-top:var(--sw) solid var(--rule); background:var(--panel-2);
  padding:1rem .95rem 1.1rem; flex-direction:column; gap:1rem}
.dest.open .dest-panel{display:flex}
.dest.open{grid-column:1/-1}
@media(min-width:820px){
  .dest.open .dest-panel{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:1.2rem 2rem; align-items:start}
  .dest.open .dest-panel > .trip-grid, .dest.open .dest-panel > .caveat,
  .dest.open .dest-panel > .city-media{grid-column:1/-1}
}
.trip-block{display:flex; flex-direction:column; gap:.45rem}
.trip-block h4{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint)}
.trip-block p{font-size:.86rem; line-height:1.55; color:var(--ink-2); max-width:64ch}
.trip-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem}
.trip-list li{font-size:.86rem; line-height:1.5; color:var(--ink-2); padding-left:1rem; position:relative}
.trip-list li::before{content:"\25B8"; position:absolute; left:0; color:var(--bs)}
.trip-list li b{color:var(--ink); font-weight:600}
.trip-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:.5rem}
.stat{background:var(--panel); border:var(--sw) solid var(--rule-soft); border-radius:2px; padding:.55rem .6rem}
.stat .k{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); display:block}
.stat .v{font-family:"IBM Plex Mono",monospace; font-size:.95rem; font-variant-numeric:tabular-nums; color:var(--ink)}
.stat .v small{font-size:.7rem; color:var(--muted)}
.caveat{font-size:.72rem; color:var(--faint); line-height:1.45; border-top:var(--sw) solid var(--rule-soft); padding-top:.55rem}

/* ============ EVIDENCE PAGE ============ */
.proof{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem}
.essay{background:var(--panel); border:var(--sw) solid var(--rule); border-left:3px solid var(--real);
  border-radius:3px; box-shadow:var(--shadow); padding:1.2rem 1.15rem; display:flex; flex-direction:column; gap:.6rem}
.essay h3{font-family:"Instrument Serif",Georgia,serif; font-size:1.35rem; line-height:1.15}
.essay p{font-size:.88rem; color:var(--ink-2); line-height:1.6; max-width:62ch}
.essay .cite{font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--faint); letter-spacing:.03em;
  border-top:var(--sw) solid var(--rule-soft); padding-top:.5rem; margin-top:auto}
.essay.wide{grid-column:1/-1}
.bigstat{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:2.1rem; color:var(--real); line-height:1; letter-spacing:-.02em}
.bigstat span{font-size:.9rem; color:var(--muted); letter-spacing:.06em}
.forer-list{display:flex; flex-direction:column; gap:.5rem; margin:0; padding:0; list-style:none}
.forer-list li{font-size:.88rem; color:var(--ink-2); padding-left:1.1rem; position:relative; line-height:1.5}
.forer-list li::before{content:"\2014"; position:absolute; left:0; color:var(--bs)}
pre.code{background:var(--ground-2); border:var(--sw) solid var(--rule); border-radius:2px; padding:.7rem .8rem;
  overflow-x:auto; font-family:"IBM Plex Mono",monospace; font-size:.74rem; line-height:1.6; color:var(--ink-2); margin:0}
pre.code b{color:var(--bs)}

/* ============ FOOTER ============ */
footer{margin-top:3.5rem; border-top:var(--sw) solid var(--rule); background:var(--ground-2); padding:2.2rem 0 2.6rem}
.foot{display:flex; justify-content:space-between; gap:1.6rem; flex-wrap:wrap; align-items:flex-start}
.foot p{font-size:.82rem; color:var(--muted); max-width:56ch; line-height:1.6}
.foot .sig{font-family:"Instrument Serif",Georgia,serif; font-size:1.5rem; color:var(--ink)}
.foot .sig em{font-style:italic; color:var(--bs)}

/* ============ MISC ============ */
.toast{position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%) translateY(140%);
  background:var(--ink); color:var(--ground); padding:.6rem 1rem; border-radius:2px; z-index:80;
  font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.06em;
  transition:transform .35s cubic-bezier(.22,1,.36,1); max-width:min(90vw,420px); text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}
@keyframes fadeup{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.card,.dest{animation:fadeup .45s cubic-bezier(.22,1,.36,1) backwards}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}

/* ---- multipage additions ---- */
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--ground);
  padding:.6rem 1rem; z-index:100; border-radius:0 0 2px 0;
  font-family:"IBM Plex Mono",monospace; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase}
.skip:focus{left:0}
.mast.compact .mast-in{padding:2rem 0 1.7rem}
.mast.compact h1.title{font-size:clamp(2.1rem,5.6vw,3.5rem)}
.mast.compact .tagline{max-width:60ch; font-size:.96rem}
main{display:block}

/* ---- city combobox ---- */
.combo{position:relative}
.combo input{width:100%}
.combo input[aria-invalid="true"]{border-color:var(--alert); background:var(--alert-dim)}
.combo.ok input{border-color:var(--real)}
.combo-list{position:absolute; z-index:40; top:calc(100% + 3px); left:0;
  width:max(100%, 260px); max-width:calc(100vw - 2.5rem);
  max-height:268px; overflow-y:auto; overscroll-behavior:contain;
  background:var(--panel-hi); border:var(--sw) solid var(--rule); border-radius:2px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.45); list-style:none; margin:0; padding:.22rem}
.combo-list[hidden]{display:none}
.combo-list li{display:flex; justify-content:space-between; align-items:baseline; gap:.8rem;
  padding:.38rem .5rem; border-radius:2px; cursor:pointer;
  font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--ink)}
.combo-list li[aria-selected="true"]{background:var(--real-dim); outline:var(--sw) solid var(--real)}
.combo-list li:hover{background:var(--real-dim)}
.combo-list li .cc{color:var(--faint); font-size:.7rem; letter-spacing:.04em; text-align:right; flex:0 1 auto}
.combo-list li > span:first-child{flex:1 1 auto; min-width:0}
.combo-list li mark{background:transparent; color:var(--real); font-weight:600}
.combo-list .none{color:var(--muted); cursor:default; font-style:italic}
.combo-list .none:hover{background:transparent}
.combo-msg{font-size:.7rem; line-height:1.4; color:var(--faint); margin-top:.24rem}
.combo-msg.err{color:var(--alert)}
.combo-msg.ok{color:var(--muted)}
.field-msg{font-size:.7rem; line-height:1.4; color:var(--faint); margin-top:.24rem}
.field-msg.err{color:var(--alert)}
input[aria-invalid="true"]{border-color:var(--alert)}

/* ---- why this one ---- */
.reason{border-left:2px solid var(--bs); padding-left:.8rem; display:flex; flex-direction:column; gap:.35rem}
.reason p{font-size:.865rem; line-height:1.6; color:var(--ink-2); max-width:64ch}
.reason p b{color:var(--bs); font-weight:600}

/* ---- toggle ---- */
.toggle{display:flex; align-items:flex-start; gap:.7rem; cursor:pointer; padding:.2rem 0}
.toggle input{position:absolute; opacity:0; width:0; height:0}
.toggle-track{flex:none; width:38px; height:21px; border-radius:11px; background:var(--panel-2);
  border:var(--sw) solid var(--rule); position:relative; transition:background .18s, border-color .18s; margin-top:.1rem}
.toggle-track i{position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:var(--muted); transition:transform .18s, background .18s}
.toggle input:checked + .toggle-track{background:var(--bs-dim); border-color:var(--bs)}
.toggle input:checked + .toggle-track i{transform:translateX(17px); background:var(--bs)}
.toggle input:focus-visible + .toggle-track{outline:2px solid var(--real); outline-offset:2px}
.toggle-text{font-size:.87rem; color:var(--ink-2); line-height:1.45}
.toggle-text small{display:block; font-size:.72rem; color:var(--faint); line-height:1.4; margin-top:.15rem; max-width:60ch}

/* ---- predicted characteristics ---- */
.trait-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem}
.trait-list li{font-size:.88rem; line-height:1.55; color:var(--ink-2); padding-left:1rem;
  position:relative; border-bottom:var(--sw) solid var(--rule-soft); padding-bottom:.55rem}
.trait-list li:last-child{border-bottom:0; padding-bottom:0}
.trait-list li::before{content:"\2014"; position:absolute; left:0; color:var(--bs)}
.trait-list li b{color:var(--ink); font-weight:600}
.trait-list .src{display:block; font-family:"IBM Plex Mono",monospace; font-size:.66rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-top:.25rem}

/* ---- city media and outbound links ---- */
.city-media{display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap}
.city-media img{width:min(260px,100%); aspect-ratio:4/3; object-fit:cover; border-radius:3px;
  border:var(--sw) solid var(--rule); display:block; background:var(--ground-2)}
.city-media-text{flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:.4rem}
.city-media-text p{font-size:.86rem; line-height:1.55; color:var(--ink-2); max-width:62ch}
.city-media-text .credit{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.05em;
  color:var(--faint); line-height:1.5}
.links a{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--real); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--real) 45%, transparent); padding-bottom:1px}
.links a:hover{border-bottom-color:var(--real)}
.trip-list .links{display:inline-flex; gap:.7rem; margin-left:.5rem; white-space:nowrap}
.links-row{display:flex; flex-wrap:wrap; gap:.5rem 1.1rem}

/* ---- info popover ---- */
.btn-with-info{display:inline-flex; align-items:center; gap:.45rem}
.info-wrap{position:relative; display:inline-flex}
.info-btn{width:22px; height:22px; flex:none; border-radius:50%; cursor:pointer;
  border:var(--sw) solid var(--rule); background:var(--panel-2); color:var(--muted);
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; line-height:1; padding:0;
  display:inline-flex; align-items:center; justify-content:center; transition:color .15s, border-color .15s}
.info-btn:hover{color:var(--real); border-color:var(--real)}
.info-btn[aria-expanded="true"]{color:var(--on-accent); background:var(--real); border-color:var(--real)}
.info-pop{position:absolute; top:calc(100% + 8px); left:0; z-index:60;
  width:min(380px, calc(100vw - 2.5rem)); background:var(--panel-hi);
  border:var(--sw) solid var(--rule); border-radius:3px; padding:.85rem .9rem;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:.55rem}
.info-pop[hidden]{display:none}
.info-pop-head{display:flex; justify-content:space-between; align-items:center; gap:1rem;
  border-bottom:var(--sw) solid var(--rule-soft); padding-bottom:.5rem}
.info-close{background:transparent; border:0; cursor:pointer; color:var(--muted);
  font-size:.8rem; line-height:1; padding:.2rem}
.info-close:hover{color:var(--ink)}
.info-pop p{font-size:.82rem; line-height:1.6; color:var(--ink-2)}
.info-pop p b{color:var(--ink); font-weight:600}
.info-pop .info-note{border-top:var(--sw) solid var(--rule-soft); padding-top:.5rem;
  color:var(--muted); font-size:.78rem}