/* Moon Print - ink on paper.

   One spot colour, hard offset shadows, a serif for the words and a mono for
   the numbers. The moon always sits in an ink block so the printed disc reads
   the way it does on a real risograph sheet. */

:root{
  --paper:#f4efe3; --paper2:#fbf8f1; --ink:#12110c; --spot:#a8452c;
  --muted:#5d5849; --rule:#12110c;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shell:1160px;
  --ad-top-h:98px; --ad-bot-h:68px;
}
@media(max-width:1099px){:root{--ad-top-h:68px}}
@media(max-width:759px){:root{--ad-top-h:58px;--ad-bot-h:58px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  /* the full-bleed ad rows are sized in vw, which counts the scrollbar, so the
     page would otherwise pick up a few pixels of sideways scroll */
  margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink);
  font-family:var(--mono); font-size:15px; line-height:1.6;
  padding-top:var(--ad-top-h); padding-bottom:var(--ad-bot-h);
  background-image:
    radial-gradient(rgba(18,17,12,.055) 1px, transparent 1px),
    radial-gradient(rgba(18,17,12,.04) 1px, transparent 1px);
  background-size:22px 22px, 22px 22px;
  background-position:0 0, 11px 11px;
}
img,canvas{max-width:100%}
a{color:var(--ink)}

/* ---------- ads ----------
   The papa (pixiie) set only, and no skyscrapers, so there are no side rails:
   all ten units sit in the flow or in the two fixed strips and every one of
   them is live at every width. Heights of the two strips follow the sizes
   ads.js picks, so a unit is never clipped. */
.adbanner{position:fixed;left:0;right:0;z-index:90;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--paper2)}
.adbanner.top{top:0;height:var(--ad-top-h);border-bottom:3px solid var(--rule)}
.adbanner.bot{bottom:0;border-top:3px solid var(--rule);
  height:calc(var(--ad-bot-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
.ad-row{display:flex;justify-content:center;width:100%;margin:clamp(12px,2vw,20px) 0;overflow:hidden}
.ad-row.wide{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ad-slot{line-height:0;max-width:100vw}
.ad-slot iframe{border:0;display:block;max-width:100vw}
.ad-native{width:min(var(--shell),100% - clamp(28px,6vw,96px));margin:clamp(12px,2vw,20px) auto}
[hidden]{display:none !important}

/* ---------- frame ---------- */
.site{position:relative;z-index:70;background:var(--paper2);
  border-bottom:3px solid var(--rule);display:flex;align-items:center;gap:16px;
  padding:11px clamp(12px,3vw,22px);flex-wrap:wrap}
.logo{font-family:var(--serif);font-size:26px;line-height:1;text-decoration:none;letter-spacing:.01em}
.logo span{color:var(--spot)}
.nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.nav a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--muted)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);text-decoration:underline}

.shell{width:min(var(--shell),100% - clamp(28px,6vw,96px));margin:0 auto}
.section{margin:clamp(24px,3.6vw,40px) 0}
/* the first block on a page sits close under the header rule */
main.shell:first-of-type > .section:first-child{margin-top:clamp(16px,2.4vw,26px)}
footer{border-top:3px solid var(--rule);background:var(--paper2);margin-top:32px;
  padding:22px clamp(12px,3vw,22px) 30px}
footer .inner{width:min(var(--shell),100%);margin:0 auto;display:flex;gap:18px;
  flex-wrap:wrap;align-items:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
footer a{color:var(--muted)}
footer .note{margin-left:auto;text-transform:none;letter-spacing:0;color:var(--muted)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0 0 .4em}
h1{font-size:clamp(38px,7vw,74px);letter-spacing:-.01em}
h2{font-size:clamp(26px,4vw,40px)}
h3{font-size:clamp(19px,2.6vw,24px)}
.kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--spot);margin:0 0 10px}
.lede{font-size:16px;max-width:62ch;color:var(--muted)}
.prose p{max-width:68ch;color:var(--muted)}
.prose h2{color:var(--ink)}

/* ---------- the picker ---------- */
.stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(20px,4vw,44px);align-items:start}
@media(max-width:900px){.stage{grid-template-columns:1fr}}

.block{background:var(--ink);border:3px solid var(--rule);box-shadow:8px 8px 0 var(--spot);
  padding:18px;display:flex;align-items:center;justify-content:center}
.block canvas{display:block;width:100%;height:auto}

.panel{border:3px solid var(--rule);background:var(--paper2);box-shadow:8px 8px 0 var(--ink);padding:clamp(16px,3vw,24px)}
.fields{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field select,.field input{font-family:var(--mono);font-size:15px;padding:9px 11px;
  border:3px solid var(--rule);background:var(--paper);color:var(--ink);min-width:96px}
.field input{width:110px}
.field.wide{width:100%}
.field.wide input{width:100%}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 18px;border:3px solid var(--rule);background:var(--paper2);color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn.solid{background:var(--spot);color:var(--paper2);border-color:var(--rule)}
.toggle{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.tints{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:18px}
.tint-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.tint{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 10px;border:2px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer}
.tint:hover{background:var(--spot);color:var(--paper2)}
.tint[aria-pressed="true"]{background:var(--ink);color:var(--paper2)}

.readout{border-top:3px solid var(--rule);margin-top:20px;padding-top:16px}
.readout .big{font-family:var(--serif);font-size:clamp(28px,4.4vw,44px);line-height:1.05}
/* only shown on a date that actually carries a named moon or an eclipse */
.badge{display:inline-block;margin:10px 0 0;padding:6px 11px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--rule);
  background:var(--paper);color:var(--ink)}
.badge[data-tone="blood"]{background:#a8391f;border-color:#5e1e10;color:#fff2ea}
.badge[data-tone="blue"]{background:#2f5490;border-color:#16294a;color:#eaf2ff}
.stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px}
.stats div{min-width:96px}
.stats dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stats dd{margin:2px 0 0;font-size:19px}

/* ---------- listings ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.card{border:3px solid var(--rule);background:var(--paper2);box-shadow:5px 5px 0 var(--ink);
  padding:16px;text-decoration:none;display:block}
.card:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.card .mini{background:var(--ink);padding:12px;margin:-4px -4px 12px;display:flex;justify-content:center}
.card h3{margin:0 0 4px}
.card p{margin:0;font-size:12px;color:var(--muted)}

.years{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.years caption{text-align:left;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding-bottom:10px}
.years th,.years td{border-bottom:2px solid rgba(18,17,12,.18);padding:9px 10px;text-align:left}
.years th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400}
.years tbody tr:hover{background:rgba(168,69,44,.07)}
.years td:first-child{font-variant-numeric:tabular-nums}
.wrap{overflow-x:auto}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips a{font-size:12px;letter-spacing:.06em;padding:7px 11px;border:2px solid var(--rule);
  background:var(--paper2);text-decoration:none}
.chips a:hover{background:var(--spot);color:var(--paper2)}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.pair{grid-template-columns:1fr}}
.verdict{border:3px solid var(--rule);background:var(--paper2);box-shadow:8px 8px 0 var(--spot);
  padding:clamp(16px,3vw,24px);margin-top:22px}
.verdict .big{font-family:var(--serif);font-size:clamp(26px,4vw,40px);line-height:1.1}
.meter{height:18px;border:3px solid var(--rule);background:var(--paper);margin-top:14px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--spot)}
.small{font-size:12px;color:var(--muted)}


/* KRITRIM_MOONGLOW - owner 2026-09-10: "add glow effect".
   The disc canvas is transparent everywhere except the moon itself (its corner
   pixel reads alpha 0), and drop-shadow follows that alpha channel - so the halo
   traces the real outline of the lit shape instead of boxing the canvas. A
   crescent therefore glows as a crescent, which is the whole point.
   Three stacked passes because moonlight does not fall off in one step: a tight
   warm core off the lit limb, a wider cool wash, then a faint far bloom.
   Deliberately static - a pulsing moon reads as a toy, not as a print. */
#disc {
  filter:
    drop-shadow(0 0 10px rgba(255, 250, 232, 0.50))
    drop-shadow(0 0 30px rgba(214, 226, 255, 0.32))
    drop-shadow(0 0 72px rgba(150, 175, 255, 0.18));
}

/* The phase thumbnails get a single cheap pass. Eight blurred canvases with the
   full three-layer treatment is real paint cost for a 120px graphic. */
.mini canvas {
  filter: drop-shadow(0 0 6px rgba(226, 232, 255, 0.42));
}