/* MICO · Stillville ballot — 05 v1-B
   Values lifted from the Figma frame, not eyeballed.
   Georgia = headers, Arial = everything else (both system fonts). */

:root{
  /* canonical, from welcometostillville.com CSS variables */
  --ground:#A8BBAF;   /* --stillVilleBlue  (reads sage, not blue) */
  --paper:#F4F8B3;    /* --stillVilleYellow */
  --alt:#CDDDD3;      /* --sectionBackground */
  --ink:#1F2A1F;
  --green:#324432;    --seal:#324432;    --dim:#56604F;
  --rule:#8E9A8B;     --sel:#E8EF9A;
  --shadow:#808080;   --light:#DFDFDF;   --white:#fff;
  --serif:"Times New Roman",Times,serif;
  --sans:Verdana,Geneva,"DejaVu Sans",sans-serif;  /* --siteFont */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); font-family:var(--sans); color:var(--ink);
  -webkit-font-smoothing:antialiased; padding:72px 20px;
}

/* ── window chrome ─────────────────────────────────────────────── */
/* ── Aqua window, circa 10.3 ───────────────────────────────────── */
.window{
  width:860px; max-width:100%; margin:0 auto; position:relative;
  background:var(--paper);
  border:1px solid #6E6E6E;
  border-radius:8px 8px 6px 6px;
  overflow:hidden;
  box-shadow:0 26px 64px rgba(0,0,0,.30), 0 3px 8px rgba(0,0,0,.20);
}
.titlebar{
  cursor:grab; user-select:none; -webkit-user-select:none;
  position:relative; display:flex; align-items:center; gap:8px;
  height:36px; padding:0 12px;
  background:linear-gradient(to bottom,#F0F0F0 0%,#DCDCDC 48%,#CFCFCF 52%,#B9B9B9 100%);
  border-bottom:1px solid #8A8A8A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
/* the Aqua pinstripe — 1px on, 1px off */
.titlebar::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.42) 0 1px, rgba(0,0,0,0) 1px 2px);
  opacity:.55;
}
.titlebar > *{position:relative}
.dot{
  width:12px;height:12px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.34);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.75), 0 1px 0 rgba(255,255,255,.5);
}
.dot.r{background:radial-gradient(circle at 34% 28%,#FFA9A2 0%,#FF6259 46%,#D8382E 100%)}
.dot.y{background:radial-gradient(circle at 34% 28%,#FFE29A 0%,#FFC23C 46%,#D2921A 100%)}
.dot.g{background:radial-gradient(circle at 34% 28%,#A6F0A8 0%,#33CC48 46%,#169A2B 100%)}
.titlebar .t{
  flex:1 1 auto; text-align:center;
  font-family:"Lucida Grande","Lucida Sans Unicode",var(--sans);
  font-size:12px; font-weight:700; color:#33342F;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.titlebar .sp{flex:0 0 58px}
/* resize grip, bottom right */
.grip{
  position:absolute; right:2px; bottom:2px; width:13px; height:13px; pointer-events:none;
  background:repeating-linear-gradient(135deg,
    rgba(0,0,0,.30) 0 1px, rgba(255,255,255,.55) 1px 2px, rgba(0,0,0,0) 2px 4px);
  opacity:.65;
}
/* status bar along the bottom, like a real window */
.statusbar{
  display:flex; align-items:center; justify-content:space-between;
  height:22px; padding:0 12px;
  font-family:"Lucida Grande",var(--sans); font-size:10px; color:#5A5A55;
  background:linear-gradient(to bottom,#E4E4E4,#CDCDCD);
  border-top:1px solid #9A9A9A;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}

.page{padding:32px 46px 36px}

/* ── masthead ──────────────────────────────────────────────────── */
/* ── nameplate ─────────────────────────────────────────────────
   ROW 1  [ oak lockup — left ]                [ town seal — right ]
   ROW 2  ═══ double rule ═══
   ROW 3  Stillville Postal        VOL/NO · DATE · PRICE
   ────────────────────────────────────────────────────────────── */
.nameplate{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding:12px 0 10px; overflow:hidden;
}
.nameplate .vignette{
  width:320px; height:auto; flex:0 1 auto; min-width:0; display:block;
  margin-left:0;                 /* ink starts at x0 — flush with the rule */
}
.nameplate .crest{
  width:150px; height:auto; flex:0 0 auto; display:block; margin-bottom:4px;
}
.rule-double{border:0;border-top:3px double var(--green);margin:0}

/* folio strip — the paper's name runs here, with the particulars */
.dateline{
  display:flex; align-items:baseline; gap:20px;
  padding:8px 2px 9px; margin-bottom:2px;
  border-bottom:1px solid var(--green);
}
.postname{
  font-family:var(--serif); font-weight:700; font-size:26px; line-height:1;
  color:var(--green); margin:0 -.02em 0 0; letter-spacing:-.01em;
  white-space:nowrap; flex:0 0 auto;
}
.dateline .folio{
  flex:1 1 auto; display:flex; justify-content:space-between; gap:12px;
  font-family:var(--sans); font-size:9px; font-weight:700;
  letter-spacing:.14em; color:var(--green); text-transform:uppercase;
}
.kicker2{
  font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.2em;
  color:#8A2B2B; text-transform:uppercase; margin:20px 0 2px;
}

.new-badge{height:18px;vertical-align:-4px;margin-left:8px}

/* ── headings ──────────────────────────────────────────────────── */
h2{font-family:var(--serif);font-weight:700;font-size:34px;color:var(--green);margin:2px 0 8px;line-height:1.1}
.sub{font-size:11px;line-height:1.5;color:var(--dim);margin:0 0 10px;max-width:none}
@media (min-width:761px){ .sub{white-space:nowrap} }   /* one line on desktop */
.meta{font-size:10px;font-weight:700;letter-spacing:1.2px;color:var(--green);margin:0 0 14px}

/* ── the ballot table ──────────────────────────────────────────── */
table.ballot{width:100%;border-collapse:collapse;border:1px solid var(--green);font-size:11.5px}
table.ballot thead th{
  background:var(--green); color:var(--white);
  font-size:10px; font-weight:700; letter-spacing:1px; text-align:left;
  padding:9px 8px;
}
table.ballot tbody td{padding:9px 8px;border-bottom:1px solid var(--rule)}
table.ballot tbody tr{background:#FBFDE4;cursor:pointer}
table.ballot tbody tr:nth-child(even){background:var(--alt)}
table.ballot tbody tr:hover{background:#EFF5C7}
table.ballot tbody tr.selected,
table.ballot tbody tr.selected:hover{background:var(--sel)}
table.ballot tbody tr.selected td{font-weight:700}
td.mark{width:46px;text-align:center}
td.mark span{
  display:inline-block;width:12px;height:12px;border-radius:50%;
  border:1px solid var(--seal);background:var(--white);vertical-align:middle;
}
tr.selected td.mark span{background:var(--seal)}
caption.note{caption-side:bottom;text-align:left;font-size:10px;font-style:italic;color:var(--dim);padding-top:7px}

/* ── fieldset + 2002 bevels ────────────────────────────────────── */
fieldset.reg{border:1px solid var(--rule);margin:18px 0 0;padding:18px}
fieldset.reg legend{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--green);padding:0 6px}
.reg p{font-size:12px;line-height:1.5;color:var(--dim);margin:0 0 12px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lab{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--dim)}
input[type=email]{
  flex:1 1 320px; min-width:220px; height:26px; padding:0 8px;
  font-family:var(--sans); font-size:12px; color:var(--ink);
  background:var(--white); border:0; border-radius:0;
  border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-bottom:2px solid var(--light); border-right:2px solid var(--light);
  outline:0;
}
input[type=email]:focus{background:#FFFDF2}
button.cast{
  height:28px; padding:0 16px; cursor:pointer;
  font-family:var(--sans); font-size:12px; font-weight:700; color:var(--green);
  background:var(--sel); border:0; border-radius:0;
  border-top:2px solid var(--light); border-left:2px solid var(--light);
  border-bottom:2px solid var(--shadow); border-right:2px solid var(--shadow);
}
button.cast:active{
  border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-bottom:2px solid var(--light); border-right:2px solid var(--light);
}
button.cast:disabled{color:var(--dim);cursor:not-allowed;opacity:.6}
.fine{font-size:10px;font-style:italic;color:var(--dim);margin:12px 0 0}
.err{font-size:11px;color:#8A2B2B;margin:10px 0 0;min-height:14px}

/* ── footer ────────────────────────────────────────────────────── */
footer{margin-top:22px;padding-top:12px;border-top:1px solid var(--rule)}
footer .a{font-size:9px;font-weight:700;letter-spacing:1px;color:var(--green)}
footer .b{font-size:9px;color:var(--dim);margin-top:4px}

/* ── received state ────────────────────────────────────────────── */
.received{display:none;padding:26px 0 6px}
.received h3{font-family:var(--serif);font-size:25px;color:var(--green);margin:0 0 8px}
.received p{font-size:12px;color:var(--dim);margin:0 0 6px;line-height:1.55}
.stub{
  margin-top:16px;padding:14px 16px;background:var(--white);
  border:1px dashed var(--rule);font-family:"Courier New",Courier,monospace;
  font-size:11px;line-height:1.7;color:var(--ink);max-width:420px;
}
body.done .ballot-stage{display:none}
body.done .received{display:block}

@media (max-width:620px){
  /* on a phone the window IS the screen — no desktop behind it */
  body{padding:0;background:var(--paper)}
  .window{
    width:100%; max-width:none; margin:0;
    min-height:100vh; min-height:100dvh;
    border:0; border-radius:0; box-shadow:none;
    transform:none !important;          /* never carries a drag offset */
  }
  .titlebar{cursor:default; border-radius:0}
  .grip{display:none}
  .statusbar{position:sticky; bottom:0}
  .page{padding:18px 16px 26px}
  .nameplate{padding:8px 0 6px;gap:10px}
  .nameplate .vignette{width:58%}
  .nameplate .crest{width:84px}
  .dateline{display:block;padding:7px 2px 8px}
  .postname{font-size:22px;margin-bottom:4px}
  .dateline .folio{flex-wrap:wrap;gap:3px 10px;font-size:7px;letter-spacing:.06em}
  h2{font-size:26px}
  table.ballot{font-size:12px}
  th.hide,td.hide{display:none}
}

/* ── ballots closed — the barrier, played straight ─────────────── */
.closed{display:none;padding:26px 0 10px;text-align:center}
.closed img{width:240px;max-width:70%;height:auto;image-rendering:pixelated}
.closed h2{text-align:left}
.closed .msg{font-size:12px;color:var(--dim);margin:14px auto 0;max-width:460px;line-height:1.6}
body.closed-state .ballot-stage{display:none}
body.closed-state .closed{display:block}

/* ── period advertising ────────────────────────────────────────── */
.with-rail{display:flex;gap:26px;align-items:flex-start}
.with-rail .main{flex:1 1 auto;min-width:0}
.rail{flex:0 0 172px;padding-top:4px}
.rail .slug{
  font-size:8px;letter-spacing:.09em;color:#9A9A90;text-transform:uppercase;
  margin:0 0 5px;font-family:var(--sans);
}
.rail img{display:block;width:172px;height:auto;border:1px solid var(--rule)}
.rail .slug.under{margin:5px 0 0}
.badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.badges img{height:31px;width:auto;display:block;image-rendering:pixelated}
@media (max-width:760px){ .with-rail{display:block} .rail{display:none} }

/* ── footer badges ─────────────────────────────────────────────── */
.badges{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:12px}
.badges img{height:31px;width:auto;display:block;image-rendering:pixelated;border:0}
.badges .stamp{
  height:31px;display:flex;align-items:center;gap:5px;padding:0 8px;
  background:linear-gradient(to bottom,#F4F4EE,#DCDCD2);
  border:1px solid #9A9A90; font-family:var(--sans); font-size:9px; color:#3B3B36;
  line-height:1.1; text-align:left;
}
.badges .stamp b{display:block;font-size:9px}
.badges .stamp i{display:block;font-style:normal;font-size:8px;color:#6C6C64}

/* dragging */
.window.dragging{transition:none}
.window.dragging .titlebar{cursor:grabbing}
.window.moved{box-shadow:0 34px 80px rgba(0,0,0,.34), 0 4px 10px rgba(0,0,0,.22)}

/* ═══ POSTAL DEVICES ══════════════════════════════════════════════
   The Post is a postal service, not a paper. Three cheap, instantly
   readable signals: an airmail border, a postmark, a franked slip.  */

/* airmail chevrons down the window's outer edge */
.window::before,
.window::after{
  content:""; position:absolute; top:36px; bottom:22px; width:9px; z-index:3;
  background:repeating-linear-gradient(135deg,
    #A33A2E 0 6px, #F1F1EC 6px 12px, #2D4470 12px 18px, #F1F1EC 18px 24px);
  opacity:.85; pointer-events:none;
}
.window::before{left:0}
.window::after{right:0}
.page{position:relative; z-index:2}

/* the seal, read as a cancellation */
.dateline .crest{
  filter:none;
  transform:rotate(-7deg);
  transform-origin:center;
}

/* counter line */
.dateline .folio span:last-child{
  border:1px solid var(--green); padding:2px 6px; letter-spacing:.18em;
}

/* the posting slip — franked, monospaced, torn */
.stub{
  position:relative; background:#FBFAF4; border:1px solid var(--rule);
  border-left:4px double var(--green);
}
.stub::after{
  content:"POSTED"; position:absolute; right:14px; top:50%;
  transform:translateY(-50%) rotate(-14deg);
  font:700 26px/1 "Times New Roman",serif; letter-spacing:.06em;
  color:rgba(163,58,46,.34); border:3px double rgba(163,58,46,.34);
  padding:4px 12px; pointer-events:none;
}
.received h2::after{
  content:""; display:inline-block; width:10px; height:10px; margin-left:9px;
  border-radius:50%; background:var(--green); vertical-align:middle; opacity:.55;
}
@media (max-width:620px){ .window::before,.window::after{display:none} }

/* their own in-world banner — a wide strip above the manifest */
.wallad{display:block;width:100%;height:auto;border:1px solid var(--rule);margin:0 0 14px}
.wallad-slug{font-size:8px;letter-spacing:.09em;color:var(--dim);text-transform:uppercase;margin:0 0 4px}

/* second ad — two frames alternating, the way a 2002 banner blinked.
   steps(1) = a hard cut, never a fade. 1.4s cycle is ~0.7Hz, well under
   the 3Hz photosensitivity threshold. */
.rail-second{
  position:relative; display:block; width:172px; margin:4px 0 0;
  border:0; background:transparent;
}
.rail-second img{display:block;width:100%;height:auto}
.rail-second .frame-b{
  position:absolute; top:0; left:0;
  animation:adblink 1.4s steps(1,end) infinite;
}
@keyframes adblink{
  0%, 49.99%   {opacity:0}
  50%, 100%    {opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .rail-second .frame-b{animation:none;opacity:0}
}