/* Shared city-page styles, extracted from the inline blocks so Googlebot fetches
   them once instead of on all 113 city pages. That includes @keyframes csaGlide:
   107 of the 108 pages that have it share ONE arc, so the common path lives here
   and only /berlin keeps its own copy inline, where it overrides this one because
   the inline <style> is emitted after the <link>.
   ONE-SHOT: tools/extract-city-css.py must be run on a tree that still has its
   inline <style> blocks. Re-running it on an already-extracted tree finds nothing
   to union and OVERWRITES this file with almost nothing. */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#020617;color:#94a3b8;font-family:'Exo 2',sans-serif;min-height:100vh}
.seo-hero{max-width:720px;margin:0 auto;padding:3rem 1.5rem 2rem;text-align:center}
.seo-hero h1{font-family:'Orbitron',sans-serif;font-size:clamp(1.4rem,4vw,2.2rem);color:#fff;line-height:1.3;margin-bottom:1rem}
.seo-hero h1 span{color:#00f0ff}
.seo-hero p{font-size:1rem;line-height:1.7;color:#77879d;margin-bottom:1rem}
.highlight{color:#94a3b8}
.seo-cta{display:inline-block;margin-top:1rem;padding:.75rem 2rem;font-family:'Orbitron',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.1em;color:#020617;background:linear-gradient(135deg,#00f0ff,#0ea5e9);border:none;border-radius:.5rem;text-decoration:none;transition:all .2s}
.seo-cta:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(0,240,255,.3)}
.divider{width:60px;height:2px;background:#00f0ff;margin:2rem auto;border-radius:1px}
.stats{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin:1.5rem 0}
.stat{text-align:center}
.stat-val{font-family:'Orbitron',sans-serif;font-size:1.4rem;color:#00f0ff;font-weight:700}
.stat-label{font-size:.65rem;color:#7487a1;letter-spacing:.1em;font-family:'Orbitron',sans-serif}
.faq{max-width:720px;margin:3rem auto 0;padding:0 1.5rem 2rem}
.faq h2{font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:.2em;color:#00f0ff;margin-bottom:1.5rem}
.faq-item{margin-bottom:1.5rem}
.faq-item h3{font-size:.95rem;color:#e2e8f0;margin-bottom:.4rem}
.faq-item p{font-size:.88rem;color:#77879d;line-height:1.6}
.tip{background:rgba(0,240,255,.03);border:1px solid rgba(0,240,255,.1);border-radius:.5rem;padding:1rem 1.25rem;margin-top:1.5rem}
.tip-label{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:.15em;color:#00f0ff;margin-bottom:.4rem}
.tip p{font-size:.85rem;color:#94a3b8;line-height:1.6}
.related{max-width:720px;margin:0 auto;padding:0 1.5rem 3rem}
.related-label{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:.2em;color:#6f87a8;margin-bottom:1rem;padding-top:1.5rem;border-top:1px solid rgba(100,116,139,.15)}
.back-link{display:block;text-align:center;padding:1rem;font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:.15em;color:#6f87a8;text-decoration:none}
.back-link:hover{color:#00f0ff}
@media(max-width:480px){
  html,body{overflow-x:hidden;max-width:100vw}
  .seo-hero{padding:2rem 1rem 1.5rem}
  .seo-cta{display:block;width:100%;text-align:center;white-space:normal;line-height:1.4}
  .stats{gap:1rem}
  .stat-val{font-size:1.1rem}
  .faq,.related{padding-left:1rem;padding-right:1rem}
}
.related-links{background:rgba(15,23,42,0.8);border:1px solid rgba(100,116,139,.2);padding:1.25rem 1.5rem;margin:3rem auto 0;max-width:720px}
.rl-label{font-family:'Orbitron',sans-serif;font-size:0.6rem;color:#00f0ff;letter-spacing:0.15em;margin-bottom:0.75rem}
.rl-row{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem}
.rl-row a{font-family:'Orbitron',sans-serif;font-size:0.68rem;color:#6f87a8;text-decoration:none;padding:0.5rem 0.6rem;border:1px solid rgba(100,116,139,.15);display:block;transition:all 0.2s}
.rl-row a:hover{color:#00f0ff;border-color:rgba(0,240,255,.3)}
.rl-row a .era-name{font-size:0.66rem;color:inherit;display:block}
@media(max-width:600px){.rl-row{grid-template-columns:1fr}}
/* ── Tonight cards ────────────────────────────────────────────────────
       Two readings of the same sky, and they are genuinely different kinds of
       thing — so they are not styled alike. Satellites are fast, time-critical
       and computed live from orbital elements: cyan, the colour of reflected
       sunlight, and the larger card. Planets are slow, warm and positional:
       amber, quieter, second. The hairline above each card is a horizon; the
       object sits above its own horizon at the right. */
    .sky-card{position:relative;background:#0b1220;border:1px solid rgba(148,163,184,.14);
      border-radius:10px;padding:1.05rem 1.15rem .95rem;margin:0 0 .85rem}
.sky-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
      border-radius:10px 10px 0 0;background:var(--sky-accent)}
.sky-card--sat{--sky-accent:#00f0ff}
.sky-card--planet{--sky-accent:#fbbf24}
.sky-eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.62rem;
      letter-spacing:.2em;text-transform:uppercase;color:var(--sky-accent);
      display:block;margin:0 0 .5rem;opacity:.9}
.sky-card::after{content:var(--sky-mark);position:absolute;top:.85rem;right:1rem;
      font-size:1.1rem;line-height:1;opacity:.5;pointer-events:none}
.sky-card--sat{--sky-mark:"\1F6F0\FE0F"}
.sky-card--planet{--sky-mark:"\1FA90"}
.sky-card p{margin:0}
.sky-card--sat p{font-size:1rem;line-height:1.62;color:#cbd5e1}
.sky-card--planet p{font-size:.9rem;line-height:1.6;color:#94a3b8}
@media(max-width:420px){
      .sky-card{padding:.95rem 1rem .85rem}
      .sky-card--sat p{font-size:.96rem}
      .sky-card::after{font-size:1rem;top:.8rem;right:.85rem}
    }
/* ── Place record ─────────────────────────────────────────────────────
       The cards above carry TONIGHT — live, accented, changing. Below is
       REFERENCE: coordinates, geometry, how this place behaves. Same
       vocabulary, deliberately quieter, so a reader can tell at a glance
       which half of the page changes. Prose is LEFT-ALIGNED: centred
       paragraphs of this length are the clearest amateur tell.
       CONTAINERS ONLY — not one word of the page's copy is altered. */
    .place{border:1px solid rgba(148,163,184,.12);border-radius:10px;
      padding:.35rem 1.15rem;margin:0 0 .9rem;text-align:left}
/* A spec list, not a stat dashboard. Wrapped flex gave 3+1 on four figures — a lone
       "-3 MAGNITUDE" stranded on its own row — and that ragged orphan is what read as
       unprofessional. A datasheet sets label left, value right, one per line, with a
       hairline between: it never orphans, it works at any count, and it says "reference
       table" rather than "dashboard widget". row-reverse puts the label first visually
       without touching a single line of markup. */
    .place-row{display:grid;grid-template-columns:1fr;gap:0}
.place-fig{min-height:36px;display:flex;flex-direction:row-reverse;justify-content:space-between;
      align-items:baseline;gap:1.25rem;padding:.5rem 0;
      border-bottom:1px solid rgba(148,163,184,.09)}
.place-fig:last-child{border-bottom:0}
.place-val{font-family:'Orbitron',sans-serif;font-size:.95rem;color:#00f0ff;
      font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;text-align:right}
.place-key{line-height:1.35;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.6rem;
      letter-spacing:.16em;text-transform:uppercase;color:#77879d;white-space:nowrap}
.place-note{margin:.8rem 0 0;padding-top:.75rem;font-size:.94rem;line-height:1.62;
      color:#94a3b8;border-top:1px solid rgba(148,163,184,.1)}
.place-note strong{color:#cbd5e1;font-weight:600}
.prose-block{text-align:left;max-width:64ch;margin:0 auto 1rem;font-size:.94rem;
      line-height:1.65;color:#94a3b8}
.notes-key{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.58rem;
      letter-spacing:.18em;text-transform:uppercase;color:#7487a1;display:block;
      max-width:64ch;margin:1.2rem auto .35rem}
@media(max-width:420px){.place{padding:.9rem 1rem}.place-row{gap:1.2rem}
      .place-val{font-size:.98rem}}
/* The hero container centres everything, which is right for the h1 and the call to
       action but wrong for body copy — it left the intro left-aligned and the paragraph
       below the figures still centred, which reads worse than either alone. Paragraphs
       are set left and measured; headings and the CTA keep their centring. */
    .seo-hero > p{text-align:left;max-width:64ch;margin-left:auto;margin-right:auto}
.seo-hero > .prose-block{margin-left:auto;margin-right:auto}
.wv-track{display:inline-block;font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:.04em;color:#00f0ff;text-decoration:none;background:rgba(0,240,255,.08);border:1px solid rgba(0,240,255,.3);border-radius:.4rem;padding:.25rem .55rem;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s}
.wv-track:hover,.wv-track:active{background:rgba(0,240,255,.18);border-color:rgba(0,240,255,.6);box-shadow:0 0 14px rgba(0,240,255,.25)}
.flag{height:.78em;width:auto;vertical-align:-.06em;margin:0 .2em;border-radius:2px;box-shadow:0 0 0 .5px rgba(255,255,255,.22)}
.csa-wrap{max-width:640px;margin:0 auto;font-family:'Exo 2',sans-serif}
.csa-head{display:flex;align-items:baseline;gap:.55rem;margin-bottom:.7rem;flex-wrap:wrap}
.csa-city{font-family:'Orbitron',sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:.04em;color:#e6eaf5}
.csa-lat{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#38bdf8}
.csa-eyebrow{font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:.18em;color:#7e8aae;margin-left:auto;text-transform:uppercase}
.csa-panel{container-type:size;position:relative;width:100%;aspect-ratio:400/210;border-radius:.8rem;overflow:hidden;background:radial-gradient(120% 135% at 50% 100%,#0e1e42 0%,#070f28 52%,#02040e 100%);border:1px solid rgba(56,120,220,.28);box-shadow:inset 0 0 42px rgba(2,6,20,.6)}
.csa-panel svg{position:absolute;inset:0;width:100%;height:100%}
.csa-stars{position:absolute;inset:0;opacity:.5;background-image:radial-gradient(1px 1px at 12% 24%,#fff,transparent),radial-gradient(1px 1px at 30% 42%,#cbd5e1,transparent),radial-gradient(1.3px 1.3px at 52% 20%,#fff,transparent),radial-gradient(1px 1px at 70% 38%,#e2e8f0,transparent),radial-gradient(1px 1px at 86% 22%,#fff,transparent),radial-gradient(1px 1px at 22% 60%,#cbd5e1,transparent),radial-gradient(1px 1px at 64% 58%,#fff,transparent)}
.csa-sat{position:absolute;left:0;top:0;width:2.7%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 11px 2px rgba(125,211,252,.95),0 0 4px #fff;will-change:transform;animation:csaGlide 7s ease-in-out infinite}
.csa-star{position:absolute;top:7%;right:4.5%;font-family:'JetBrains Mono',monospace;font-size:.58rem;color:#93a2c4;letter-spacing:.04em}
.csa-verdict{margin-top:.7rem;padding:.55rem .85rem;border-left:3px solid #4ade80;border-radius:.45rem;background:rgba(2,8,20,.5);font-size:.83rem;line-height:1.5;color:#cbd5e1}
.csa-stats{display:flex;gap:.5rem;margin-top:.6rem}
.csa-stat{flex:1;background:rgba(2,8,20,.45);border:1px solid rgba(100,116,139,.18);border-radius:.5rem;padding:.55rem .5rem;text-align:center}
.csa-stat b{display:block;font-family:'JetBrains Mono',monospace;font-size:.95rem;color:#38bdf8;line-height:1.1}
.csa-stat span{font-family:'Orbitron',sans-serif;font-size:.48rem;letter-spacing:.09em;color:#7e8aae;text-transform:uppercase}
.site-footer-nav{background:#010b18;border-top:1px solid rgba(0,240,255,0.08);padding:1.35rem 1.5rem .9rem;margin-top:2rem}
.sfn-inner{max-width:820px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:.65rem 1.15rem}
.sfn-group{display:flex;flex-direction:column;gap:.16rem}
.sfn-label{font-family:'Orbitron',sans-serif;font-size:0.5rem;letter-spacing:0.18em;color:#00f0ff;margin-bottom:0.28rem}
.sfn-group a{font-family:'Exo 2',sans-serif;font-size:0.68rem;line-height:1.42;color:#7487a1;text-decoration:none;letter-spacing:.01em;transition:color .2s;display:inline-block;min-height:24px;padding:3px 0;line-height:18px}
.sfn-group a:hover{color:#00f0ff}
.sfn-legal{max-width:760px;margin:1.05rem auto 0;padding-top:.7rem;border-top:1px solid rgba(100,116,139,.12);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.3rem .9rem;font-family:'Exo 2',sans-serif;font-size:.63rem;color:#6b7c94}
.sfn-legal a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(100,116,139,.25)}
.sfn-legal a:hover{color:#00f0ff;border-bottom-color:rgba(0,240,255,.4)}
.sfn-mark{font-family:'Orbitron',sans-serif;font-size:.58rem;letter-spacing:.12em;color:#6b7c94}
@media(max-width:480px){.sfn-legal{justify-content:center;text-align:center;font-size:.6rem}}
/* MOBILE: the two 20-link columns are what makes the block tall — one link per line over
   20 rows. Letting them wrap as inline chips keeps every link (the reachability the block
   exists for) while cutting the height roughly in half. */
@media(max-width:560px){
  .site-footer-nav .sfn-inner{grid-template-columns:1fr;gap:.75rem}
  .site-footer-nav .sfn-group{flex-direction:row;flex-wrap:wrap;gap:.3rem .7rem;align-items:baseline}
  .sfn-label{flex:0 0 100%;margin-bottom:.1rem}
  .sfn-group a{font-size:.66rem;line-height:1.3}
}

@media(max-width:480px){.sfn-inner{grid-template-columns:1fr 1fr}}
.lat-sky h2{margin-bottom:1.1rem;line-height:1.25}
.lat-sky p{margin-bottom:1rem}
.lat-sky p:last-child{margin-bottom:0}
.csa-seasons{margin-top:.7rem}
.csa-sl{font-family:'Orbitron',sans-serif;font-size:.5rem;letter-spacing:.1em;color:#7e8aae;margin-bottom:.4rem;text-transform:uppercase}
.csa-months{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.csa-mo{text-align:center;font-family:'JetBrains Mono',monospace;font-size:.54rem;padding:.32rem 0;border-radius:.25rem;background:rgba(2,8,20,.5);color:#93a2c4;border:1px solid rgba(100,116,139,.15)}
.csa-mo.wet{background:rgba(251,191,36,.13);color:#fbbf24;border-color:rgba(251,191,36,.32)}
.csa-mo.best{background:rgba(74,222,128,.13);color:#4ade80;border-color:rgba(74,222,128,.32)}
.csa-scap{font-size:.74rem;color:#94a3b8;margin-top:.45rem;line-height:1.45}
/* transform, not left/top: these are infinite animations, and animating a LAYOUT
   property runs layout+paint every frame for ever — the cause of the scroll jank
   reported on every live-data page. cqw/cqh keep the arc relative to the panel, and
   the -50% preserves the centring .csa-sat used to get from its own transform. */
@keyframes csaGlide{0.0%{transform:translate(calc(17.5cqw - 50%),calc(80.0cqh - 50%))}12.5%{transform:translate(calc(25.6cqw - 50%),calc(50.0cqh - 50%))}25.0%{transform:translate(calc(33.8cqw - 50%),calc(28.6cqh - 50%))}37.5%{transform:translate(calc(41.9cqw - 50%),calc(15.7cqh - 50%))}50.0%{transform:translate(calc(50.0cqw - 50%),calc(11.4cqh - 50%))}62.5%{transform:translate(calc(58.1cqw - 50%),calc(15.7cqh - 50%))}75.0%{transform:translate(calc(66.2cqw - 50%),calc(28.6cqh - 50%))}87.5%{transform:translate(calc(74.4cqw - 50%),calc(50.0cqh - 50%))}100.0%{transform:translate(calc(82.5cqw - 50%),calc(80.0cqh - 50%))}}@media(prefers-reduced-motion:reduce){.csa-sat{animation:none;transform:translate(calc(50cqw - 50%),calc(11.4cqh - 50%))}}
/* ── Cite this page ───────────────────────────────────────────────────────────
   Deliberately quiet. A writer who wants it will find it at the foot of the
   content; nobody else should notice it. Monospace signals "copy this", not
   "read this". */
.cite{max-width:720px;margin:2rem auto 0;padding:1.1rem 1.5rem 0;
  border-top:1px solid rgba(100,116,139,.15)}
.cite-k{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:.2em;
  color:#6f87a8;margin-bottom:.55rem}
.cite-t{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;
  line-height:1.65;color:#94a3b8;word-break:break-word}
.cite-n{font-size:.72rem;line-height:1.6;color:#7487a1;margin-top:.5rem}
.cite-n a{color:#7487a1;text-decoration:none;border-bottom:1px solid rgba(100,116,139,.3)}
.cite-n a:hover{color:#00f0ff;border-bottom-color:rgba(0,240,255,.4)}
@media(max-width:480px){.cite{padding-left:1rem;padding-right:1rem}.cite-t{font-size:.68rem}}