/* Tonight Overhead — "The Evening Almanac"
   A printed night bulletin: warm paper, soft ink, one ember accent.
   Written fresh for this site; no fleet stylesheets were consulted.
   Palette: paper #FAF5EA · ink #20242B · ember #C8501B ·
            slate violet #565D8C · hairline #D8CFBB            */

:root{
  --paper:#FAF5EA; --paper2:#F3ECDB; --ink:#20242B; --ink2:#4A4A42;
  --ember:#C8501B; --violet:#565D8C; --hair:#D8CFBB;
  --dark:#22263A; --darklit:#3E4666;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.42}
a{color:var(--ember);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:760px;margin:0 auto;padding:0 14px 26px}

/* ---------- masthead ---------- */
.masthead{padding:14px 0 8px;border-bottom:3px double var(--ink)}
.mast-top{display:flex;align-items:center;gap:10px}
.logo{flex:0 0 auto;display:block}
.wordmark{font-family:var(--serif);font-size:30px;font-weight:700;letter-spacing:.2px;line-height:1}
.wordmark a{color:var(--ink)}
.wordmark a:hover{text-decoration:none}
.tagline{font-family:var(--serif);font-style:italic;color:var(--ink2);font-size:14.5px;margin-top:3px}
.dateline{font-family:var(--serif);font-size:15px;margin-top:9px;color:var(--ink)}
.dateline b{font-weight:700}
.mast-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mast-tools .place-name{font-family:var(--serif);font-size:19px;font-weight:700;margin-right:2px}
input[type=search],select{font:inherit;font-size:15px;color:var(--ink);background:#FFFDF6;
  border:1px solid var(--ink2);border-radius:2px;padding:6px 8px}
input[type=search]{width:min(300px,62vw)}
button{font:inherit;font-size:14.5px;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);border-radius:2px;padding:6px 12px;cursor:pointer}
button.ghost{background:transparent;color:var(--ink)}
button:active{transform:translateY(1px)}
.search-results{border:1px solid var(--hair);background:#FFFDF6;margin-top:6px;max-width:420px}
.search-results a{display:block;padding:7px 10px;color:var(--ink);border-top:1px solid var(--hair)}
.search-results a:first-child{border-top:0}
.search-results a span{color:var(--ink2);font-size:13px}

/* ---------- verdict & frame facts ---------- */
.verdict{font-family:var(--serif);font-size:21px;line-height:1.3;margin:14px 0 4px}
.verdict .k{display:block;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--ember);margin-bottom:3px}
.frame{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;color:var(--ink2);margin:6px 0 2px}
.frame b{color:var(--ink);font-weight:600}

/* ---------- the night bar ---------- */
.nightbar{margin:12px 0 2px}
.nb-track{position:relative;height:44px;border:1px solid var(--ink);display:flex;overflow:hidden;background:var(--paper2)}
.nb-seg{height:100%}
.nb-day{background:#EAD9AE}
.nb-civil{background:#B9BEDD}
.nb-nautical{background:#7C83B4}
.nb-astro{background:var(--violet)}
.nb-dark{background:var(--dark)}
.nb-darklit{background:var(--darklit);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.10) 0 5px,transparent 5px 10px)}
.nb-now{position:absolute;top:0;bottom:0;width:0}
.nb-now i{position:absolute;top:50%;left:-5px;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:var(--ember);box-shadow:0 0 0 2px var(--paper)}
.nb-now::after{content:"";position:absolute;top:50%;left:-5px;width:10px;height:10px;margin-top:-5px;
  border-radius:50%;background:var(--ember);opacity:.45;animation:nbpulse 2.6s ease-in-out infinite}
@keyframes nbpulse{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(2.1);opacity:0}}
.nb-times{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2);margin-top:3px}
.nb-legend{display:flex;flex-wrap:wrap;gap:3px 14px;font-size:12.5px;color:var(--ink2);margin-top:5px}
.nb-legend i{display:inline-block;width:10px;height:10px;margin-right:5px;border:1px solid rgba(32,36,43,.35);vertical-align:-1px}
.sw-day{background:#EAD9AE}.sw-civil{background:#B9BEDD}.sw-nautical{background:#7C83B4}
.sw-astro{background:var(--violet)}.sw-dark{background:var(--dark)}
.sw-darklit{background:var(--darklit)}

/* ---------- sections on rules ---------- */
section{margin-top:20px}
h2{font-family:var(--serif);font-size:19px;margin:0 0 2px;padding-top:10px;border-top:1px solid var(--ink)}
h2 .sub{font-family:var(--sans);font-size:12.5px;color:var(--ink2);font-weight:400}
.lede{font-size:14.5px;color:var(--ink2);margin:2px 0 6px}

/* ---------- best bets ---------- */
.bets{list-style:none;margin:4px 0 0;padding:0}
.bets li{padding:7px 0;border-top:1px solid var(--hair);display:flex;gap:10px}
.bets li:first-child{border-top:0}
.bets .n{font-family:var(--serif);font-weight:700;color:var(--ember);font-size:18px;line-height:1.1;flex:0 0 20px}
.bets .what{font-weight:600}
.bets .why{color:var(--ink2);font-size:14px}

/* ---------- the running order (timeline) ---------- */
.tl{list-style:none;margin:2px 0 0;padding:0}
.tl li{display:flex;gap:12px;padding:6px 0;border-top:1px solid var(--hair);align-items:baseline}
.tl li:first-child{border-top:0}
.tl .t{flex:0 0 84px;font-family:var(--serif);font-weight:700;font-size:15.5px;white-space:nowrap}
.tl .e{flex:1}
.tl .e .note{display:block;color:var(--ink2);font-size:13.5px}
.tl .iss .t{color:var(--ember)}

/* ---------- the parade table ---------- */
table.parade{width:100%;border-collapse:collapse;font-size:14.5px}
table.parade th{font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink2);
  text-align:left;padding:5px 6px 4px 0;border-bottom:1px solid var(--ink)}
table.parade td{padding:6px 6px 6px 0;border-bottom:1px solid var(--hair);vertical-align:top}
table.parade td.pname{font-family:var(--serif);font-weight:700;font-size:16px;white-space:nowrap}
table.parade .vword{font-weight:700}
table.parade .why{color:var(--ink2);font-size:13.5px;display:block}
td.num,th.num{text-align:right;white-space:nowrap}

/* ---------- moon & showers ---------- */
.moon-line{font-size:15.5px;margin:4px 0}
.fact-list{list-style:none;margin:4px 0 0;padding:0;font-size:14.5px}
.fact-list li{padding:5px 0;border-top:1px solid var(--hair)}
.fact-list li:first-child{border-top:0}
.fact-list .fl-k{color:var(--ink2)}
.shower-note{color:var(--ink2);font-size:13.5px}

/* ---------- directory ---------- */
.dir-group{font-family:var(--serif);font-size:16.5px;margin:14px 0 4px;font-weight:700}
.dir{display:flex;flex-wrap:wrap;gap:2px 0;font-size:14.5px}
.dir a{padding:3px 10px 3px 0;color:var(--ink)}
.dir a:hover{color:var(--ember)}
.place-blurb{font-family:var(--serif);font-style:italic;color:var(--ink2);font-size:15px;margin:8px 0 0}

/* ---------- footer ---------- */
footer{margin-top:26px;border-top:3px double var(--ink);padding-top:10px;font-size:13px;color:var(--ink2)}
footer .cols{display:flex;flex-wrap:wrap;gap:4px 22px;margin-bottom:8px}
footer a{color:var(--ink2);text-decoration:underline}
.disc{margin:8px 0 0}
.adslot{margin:18px 0;text-align:center}

/* ---------- sky card (print take-away) ---------- */
.sky-card{display:none}
@media print{
  body{background:#fff}
  .mast-tools,.app,.no-print,footer .cols{display:none !important}
  .sky-card{display:block;border:2px solid var(--ink);padding:18px 20px;max-width:640px}
  .sky-card .sc-head{font-family:var(--serif);border-bottom:3px double var(--ink);padding-bottom:8px;margin-bottom:10px}
  .sky-card .sc-name{font-size:24px;font-weight:700}
  .sky-card .sc-date{font-style:italic;color:var(--ink2)}
  .sky-card .sc-verdict{font-family:var(--serif);font-size:17px;margin:8px 0}
  .sky-card .nb-track{border:1px solid #000}
  .sky-card ul{list-style:none;margin:8px 0 0;padding:0}
  .sky-card li{padding:4px 0;border-top:1px solid #bbb;font-size:14px}
  .sky-card .sc-foot{margin-top:12px;font-size:11.5px;color:#555}
}
@media (prefers-reduced-motion: reduce){
  .nb-now::after{animation:none}
  *{scroll-behavior:auto !important}
}
@media (max-width:560px){
  .wordmark{font-size:25px}
  .verdict{font-size:19px}
  .tl .t{flex-basis:72px;font-size:14.5px}
  table.parade{font-size:13.5px}
  table.parade td.pname{font-size:14.5px}
}