/* ==========================================================================
   EVERYBODY'S HOMETOWN — the dropbox.
   Windows 95 that spent the night in a photocopier: gray bevels, hard pixel
   edges, acid ink, scrawled notes taped over the chrome. Readability is the
   one thing never spent on the joke.
   ========================================================================== */

:root {
  /* win95 chrome */
  --face: #c0c0c0;
  --face-2: #d4d4d4;
  --light: #ffffff;
  --shadow: #808080;
  --dark: #404040;
  --black: #000000;
  --titlebar: #000080;
  --desktop: #0a3838;

  /* cheap ink */
  --acid: #b6ff2e;
  --pink: #ff2d95;
  --magenta: #ff2d95;
  --cyan: #2ed5ff;
  --yellow: #ffe04a;
  --plum: #4b0f3a;
  --green: #b6ff2e;

  --pixel: 'Press Start 2P', 'Courier New', monospace;
  --ui: 'Silkscreen', 'Courier New', monospace;
  --body: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --scrawl: 'Caveat', 'Bradley Hand', 'Comic Sans MS', cursive;
  --mono: ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;

  --wrap: 1180px;
  --bevel-out: inset -2px -2px 0 var(--dark), inset 2px 2px 0 var(--light);
  --bevel-in: inset 2px 2px 0 var(--dark), inset -2px -2px 0 var(--light);
  --cursor-arrow: url('/static/cursor-arrow.png') 1 1, auto;
  --cursor-hand: url('/static/cursor-hand.png') 11 2, pointer;
}

* { box-sizing: border-box; }

/* The `hidden` attribute has to win over the layout rules below, or any element
   we style with display: (like the drag-and-drop screen) shows up on load. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.1rem);
  line-height: 1.6;
  color: #101010;
  background-color: var(--desktop);
  background-image: url('/static/tile.png');
  background-repeat: repeat;
  background-size: 32px 32px;
  cursor: var(--cursor-arrow);
  overflow-x: hidden;
}

a, button, .btn, select, summary, .chk, .chip, [data-copy-for] { cursor: var(--cursor-hand); }
input[type='text'], input[type='email'], input[type='url'], textarea { cursor: text; }

img, svg { max-width: 100%; }
img { display: block; }
a { color: var(--titlebar); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--pink); }

:focus-visible { outline: 3px dashed var(--pink); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(0.75rem, 3vw, 1.6rem); }
.narrow { max-width: 780px; }
.scrawl { font-family: var(--scrawl); font-size: 1.35em; line-height: 1.2; color: #2b2b2b; }
.hand { font-family: var(--scrawl); font-size: 1.4em; }
.muted { color: #4a4a4a; }
.empty { font-family: var(--body); padding: 1rem; background: #ececec; border: 2px solid var(--black); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 400;
  background: var(--acid); color: #000; padding: 0.6rem 1rem; border: 2px solid #000;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ------------------------------- masthead -------------------------------- */

.masthead {
  background: var(--black);
  border-bottom: 4px solid var(--acid);
  padding: clamp(1.4rem, 4vw, 2.6rem) 0 clamp(1rem, 3vw, 1.6rem);
  position: relative;
  overflow: hidden;
}
.masthead::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(0, 0, 0, 0) 2px 4px);
}
.masthead__inner { position: relative; }

.badge {
  display: inline-block; margin: 0 0 0.8rem;
  font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.08em;
  background: var(--pink); color: #fff; border: 2px solid var(--black);
  padding: 0.2rem 0.5rem; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
  transform: rotate(-1.4deg);
}

.wordmark {
  margin: 0 0 0.5rem;
  font-family: var(--pixel);
  font-size: clamp(1.15rem, 4.2vw, 2.9rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--light);
  text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 rgba(46, 213, 255, 0.45);
  overflow-wrap: break-word;
}
.wordmark .word { display: inline-block; white-space: nowrap; max-width: 100%; }
.wordmark .ch { display: inline-block; }
.wordmark .ch:nth-child(2n) { color: var(--acid); transform: translateY(-0.06em); }
.wordmark .ch:nth-child(3n) { transform: translateY(0.05em); }
.wordmark--small { font-size: clamp(1.4rem, 6vw, 2.4rem); }

.tagline { margin: 0; font-family: var(--ui); font-size: 0.8rem; color: var(--acid); letter-spacing: 0.05em; }
.issue {
  display: inline-block; margin: 0.8rem 0 0; padding: 0.25rem 0.6rem;
  font-family: var(--ui); font-size: 0.72rem; text-transform: uppercase;
  background: var(--yellow); color: #000; border: 2px solid var(--black);
  transform: rotate(-1.4deg);
}
.masthead__note { margin: 0.6rem 0 0; color: #fff; }

/* -------------------------------- ticker --------------------------------- */

.ticker { background: var(--plum); border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); overflow: hidden; padding: 0.3rem 0; }
.ticker__track { display: flex; align-items: center; width: max-content; white-space: nowrap; animation: slide 38s linear infinite; }
.ticker__item { font-family: var(--ui); font-size: 0.72rem; color: var(--acid); padding: 0 1rem; }
.ticker__dot { color: var(--pink); font-size: 0.6rem; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* -------------------------------- window --------------------------------- */

.win {
  margin: 1.2rem 0;
  background: var(--face);
  border: 2px solid var(--black);
  box-shadow: inset -2px -2px 0 var(--dark), inset 2px 2px 0 var(--light), 7px 7px 0 rgba(0, 0, 0, 0.55);
}
.win__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: var(--black); color: var(--acid); padding: 0.3rem 0.4rem;
  border-bottom: 2px solid var(--black);
  font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.04em;
}
.win__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win__btns { display: flex; gap: 2px; flex: none; }
.win__btns i {
  font-style: normal; width: 1.15rem; height: 1.15rem; display: grid; place-items: center;
  background: var(--face); color: #000; border: 1px solid var(--black);
  box-shadow: inset -1px -1px 0 var(--dark), inset 1px 1px 0 var(--light);
  font-family: var(--ui); font-size: 0.6rem;
}
.win--full .win__bar { background: var(--acid); color: #000; }
.win--bad .win__bar { background: var(--pink); color: #fff; }
.win__menu {
  margin: 0; padding: 0.25rem 0.5rem; background: #dcdcdc; border-bottom: 1px solid var(--shadow);
  font-family: var(--ui); font-size: 0.66rem; color: #202020; overflow-wrap: anywhere;
}
.win__body { padding: clamp(0.8rem, 2.5vw, 1.4rem); }
.win__foot { border-top: 1px solid var(--shadow); padding: 0.4rem 0.6rem; background: #cfcfcf; font-family: var(--scrawl); font-size: 1.2rem; color: #333; }

.panel { background: var(--face); border: 2px solid var(--black); box-shadow: var(--bevel-out); padding: 0.9rem; margin: 1rem 0; }
.panel h2 { font-family: var(--pixel); font-size: 0.85rem; margin: 0 0 0.6rem; }

/* --------------------------------- hero ---------------------------------- */

.hero { display: grid; gap: clamp(1rem, 3vw, 1.8rem); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.label { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.1em; color: #fff; background: #000; display: inline-block; padding: 0.15rem 0.45rem; margin: 0 0 0.7rem; }
.hero__headline {
  font-family: var(--pixel); font-size: clamp(1rem, 2.4vw, 1.5rem); line-height: 1.5;
  margin: 0 0 0.8rem; color: #000; text-shadow: 3px 3px 0 rgba(255, 45, 149, 0.35);
}
.hero__blurb { margin: 0 0 0.7rem; max-width: 52ch; border-left: 7px solid var(--titlebar); padding-left: 0.9rem; }
.hero__note { font-family: var(--scrawl); font-size: 1.3rem; margin: 0 0 0.9rem; color: #333; }

.rules { background: #ececec; border: 2px solid var(--black); box-shadow: var(--bevel-in); padding: 0.8rem; margin-top: 0.5rem; }
.rules h3 { font-family: var(--ui); font-size: 0.75rem; margin: 0 0 0.5rem; text-transform: uppercase; }
.rules ul { margin: 0; padding-left: 1.1rem; columns: 2; column-gap: 2rem; }
.rules li { margin-bottom: 0.3rem; break-inside: avoid; }

/* --------------------------------- meter --------------------------------- */

.meter { background: var(--face); border: 2px solid var(--black); box-shadow: var(--bevel-out); padding: 0.8rem; }
/* The issue number is the headline of the panel: it is the thing people ask
   about, and "ISSUE 1" is a better sentence than any amount of chrome. */
.meter__issueline { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; }
.meter__issueword { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: #000; background: var(--yellow); border: 2px solid var(--black); padding: 0.15rem 0.35rem; }
.meter__issueno { font-family: var(--pixel); font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1; color: var(--black); text-shadow: 3px 3px 0 var(--pink); }
.meter__first { font-family: var(--scrawl); font-size: 1.2rem; color: var(--plum); margin: 0.2rem 0 0.6rem; }
.meter__title { font-family: var(--ui); font-size: 0.8rem; letter-spacing: 0.08em; margin: 0 0 0.7rem; text-transform: uppercase; }
.meter__readout { display: flex; gap: 0.6rem; justify-content: flex-start; align-items: flex-end; margin-bottom: 0.7rem; }
.meter__stat { display: flex; flex-direction: column; gap: 0.3rem; }
.meter__stat span { font-family: var(--ui); font-size: 0.6rem; color: #333; text-transform: uppercase; }
.pixel-big {
  font-family: var(--pixel); font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1.1;
  color: #000; background: var(--acid); border: 2px solid var(--black); padding: 0.3rem 0.5rem;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); display: inline-block;
}
.meter__track { background: #8f8f8f; border: 2px solid var(--black); box-shadow: var(--bevel-in); padding: 3px; height: 2.1rem; }
.meter__fill { display: flex; gap: 2px; height: 100%; }
.seg { flex: 1 1 0; background: #6f6f6f; }
.seg.is-on { background: var(--acid); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22); }
.meter__note { font-family: var(--scrawl); font-size: 1.25rem; margin: 0.7rem 0 0; }
.meter.is-full .seg.is-on { background: var(--pink); }
.meter.is-full .pixel-big { background: var(--pink); color: #fff; }
.meter.is-full .meter__issueno { text-shadow: 3px 3px 0 var(--acid); }
.meter.is-full .meter__note { color: var(--plum); font-weight: 700; }

/* -------------------------------- buttons -------------------------------- */

.btn {
  display: inline-block; font-family: var(--ui); font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.04em; text-decoration: none; color: #000; background: var(--face);
  border: 2px solid var(--black); box-shadow: var(--bevel-out);
  padding: 0.5rem 0.8rem; margin: 0;
}
.btn:hover { background: var(--face-2); color: #000; }
.btn:active { box-shadow: var(--bevel-in); transform: translate(1px, 1px); }
.btn--go { background: var(--acid); }
.btn--go:hover { background: #c9ff5c; }
.btn--jump { background: var(--yellow); }
.btn--danger { background: #ffd0d0; }
.btn--tiny { font-size: 0.62rem; padding: 0.3rem 0.45rem; }
.btn--big { font-size: 0.85rem; padding: 0.75rem 1.1rem; }
.btn[disabled] { color: #6b6b6b; background: #b0b0b0; box-shadow: var(--bevel-in); cursor: not-allowed; transform: none; }
.inline { display: inline; margin: 0; }

/* ------------------------------- the form -------------------------------- */

.sechead { margin: 1.4rem 0 0.8rem; }
.sechead__title {
  font-family: var(--pixel); font-size: clamp(0.95rem, 2.2vw, 1.3rem); margin: 0 0 0.4rem;
  color: #fff; background: #000; display: inline-block; padding: 0.35rem 0.55rem;
  box-shadow: 4px 4px 0 var(--pink);
}
.sechead__sub { font-family: var(--scrawl); font-size: 1.3rem; margin: 0.5rem 0 0; color: #fff; text-shadow: 1px 1px 0 #000; }
.sechead--left { text-align: left; }

.formsec, .contents, .presshist { margin: 1.6rem 0; }

.slip {
  background: var(--face); border: 2px solid var(--black);
  box-shadow: inset -2px -2px 0 var(--dark), inset 2px 2px 0 var(--light), 7px 7px 0 rgba(0, 0, 0, 0.55);
  padding: clamp(0.9rem, 2.6vw, 1.5rem);
}
.slip__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.slip__field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.slip__field--wide { grid-column: 1 / -1; }
.slip label, .editfield label, .notebox label { font-family: var(--ui); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.hint { margin: 0; font-size: 0.85rem; color: #3a3a3a; }

textarea, input[type='text'], input[type='email'], input[type='url'], input[type='password'], input[type='file'], select {
  width: 100%; font-family: var(--mono); font-size: 0.95rem; color: #000; background: #fff;
  border: 2px solid var(--black); box-shadow: var(--bevel-in); padding: 0.45rem 0.5rem;
}
textarea { resize: vertical; min-height: 6rem; line-height: 1.6; }
input[readonly] { background: #eeeeee; }
textarea::placeholder { font-family: var(--scrawl); font-size: 1.2rem; color: #666; }
.counter { font-family: var(--ui); font-size: 0.6rem; color: #333; text-align: right; }
.filewrap { position: relative; }
.filedrop { display: block; margin-top: 0.4rem; font-family: var(--ui); font-size: 0.68rem; border: 2px dashed var(--black); background: #e4e4e4; padding: 0.4rem; text-align: center; }
.filestate { display: block; margin-top: 0.4rem; font-family: var(--mono); font-size: 0.8rem; color: #1c1c1c; }
.chk { display: flex; gap: 0.5rem; align-items: flex-start; margin: 1rem 0; font-family: var(--ui); font-size: 0.72rem; text-transform: uppercase; }
.chk input { width: auto; }
.check { display: flex; gap: 0.6rem; align-items: flex-start; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submitrow { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 0.5rem; }
.privacy { margin: 0; font-size: 0.82rem; color: #333; max-width: 46ch; }

.dropzone { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(10, 20, 20, 0.85); border: 8px dashed var(--acid); }
.dropzone span { font-family: var(--pixel); font-size: clamp(1rem, 4vw, 2rem); color: var(--acid); }

/* ------------------------------ printed issues --------------------------- */

.pastissues { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pastissue {
  display: flex; flex-direction: column; gap: 0.15rem;
  background: var(--plum); color: #fff; border: 2px solid var(--black);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); padding: 0.5rem 0.7rem;
  font-family: var(--ui); font-size: 0.68rem; transform: rotate(-1deg);
}
.pastissue:nth-child(even) { transform: rotate(1.2deg); }
.pastissue__no { color: var(--acid); }
.pastissue__d { color: #ffd9ee; }
.pastissue__scan { color: #fff; border-bottom: 2px solid var(--acid); text-decoration: none; }
.pastissue__scan:hover { color: var(--acid); }
.pastissue__scan--none { color: #d9b6cd; border-bottom: 0; }
.pastissue__size { font-size: 0.6rem; color: var(--acid); }

.presshist h2 { font-family: var(--pixel); font-size: clamp(0.9rem, 2vw, 1.15rem); color: #fff; text-shadow: 3px 3px 0 #000; margin: 0 0 0.3rem; }
.presshist__sub { font-family: var(--scrawl); font-size: 1.3rem; color: #ffe9f6; margin: 0 0 0.9rem; }
.presshist a, .footer__blurb a { color: var(--cyan); }

.cutline { display: flex; align-items: center; gap: 0.6rem; margin: 2rem 0 0.5rem; color: #fff; }
.cutline__dash { flex: 1; border-top: 3px dashed rgba(255, 255, 255, 0.6); }
.cutline span { font-size: 1.2rem; }

/* --------------------------------- flash --------------------------------- */

.flash {
  font-family: var(--ui); font-size: 0.76rem; padding: 0.55rem 0.7rem;
  border: 2px solid var(--black); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); margin: 1rem 0;
  background: var(--acid); width: fit-content; max-width: min(100%, 780px);
}
.flash--ok { background: var(--acid); }
.flash--bad { background: var(--pink); color: #fff; }

/* --------------------------------- tape ---------------------------------- */

.tape {
  position: absolute; width: 84px; height: 26px;
  background: rgba(255, 236, 168, 0.9);
  border-left: 1px dashed rgba(0, 0, 0, 0.4);
  border-right: 1px dashed rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.tape--top { top: -13px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.tape--corner { top: -14px; left: -10px; transform: rotate(-38deg); }

/* -------------------------------- thanks --------------------------------- */

.thanks { margin: 2rem auto; }
.thanks__title { font-family: var(--pixel); font-size: clamp(1rem, 3vw, 1.6rem); margin: 0 0 0.8rem; }
.thanks__body { margin: 0 0 1.2rem; }
.thanks__links { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.2rem; }

/* -------------------------------- footer --------------------------------- */

.footer { background: #000; border-top: 4px solid var(--pink); margin-top: 2.5rem; padding: 1.6rem 0; }
.footer__inner { display: grid; gap: 0.6rem; }
.footer__blurb { color: #d8d8d8; margin: 0; max-width: 68ch; }
.footer__sweet { margin: 0; font-family: var(--scrawl); font-size: 1.7rem; color: var(--acid); }
.footer__staff a, .footer__contact { font-family: var(--ui); font-size: 0.7rem; color: var(--acid); margin: 0; }
.footer__staff a { color: var(--acid); }

/* ------------------------------ error page ------------------------------- */

.page-err { margin: 3rem auto; }
.err__code { font-family: var(--pixel); font-size: 2rem; margin: 0.4rem 0; }
.err__msg { margin: 0 0 1rem; }

/* ============================== staff room ============================== */

body.page-staff { background-color: #0a2b2b; }

.staffbar { background: var(--black); border-bottom: 3px solid var(--acid); position: sticky; top: 0; z-index: 20; }
.staffbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.staffbar__brand { margin: 0; font-family: var(--ui); font-size: 0.74rem; color: var(--acid); display: flex; align-items: center; gap: 0.4rem; }
.staffbar__brand em { color: #fff; font-style: normal; }
.led { width: 0.6rem; height: 0.6rem; background: var(--acid); border: 1px solid #000; box-shadow: 0 0 6px var(--acid); }
.staffnav { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-left: auto; }
.staffnav__link {
  font-family: var(--ui); font-size: 0.62rem; text-decoration: none; color: #000; background: var(--face);
  border: 2px solid var(--black); box-shadow: var(--bevel-out); padding: 0.3rem 0.45rem; text-transform: uppercase;
}
.staffnav__link:hover { background: var(--cyan); color: #000; }
.staffnav__link.is-active { background: var(--pink); color: #fff; box-shadow: var(--bevel-in); }
.staffbar__out { display: flex; align-items: center; gap: 0.5rem; }
.staffbar__who { font-family: var(--ui); font-size: 0.62rem; color: #ddd; }

.staffmain { margin: 1.5rem auto; }
.staffmain__title { font-family: var(--pixel); font-size: clamp(0.9rem, 2vw, 1.15rem); color: #fff; text-shadow: 3px 3px 0 var(--pink); margin: 0 0 0.6rem; }
.staffmain__sub { color: #fff; text-shadow: 1px 1px 0 #000; margin: 0 0 1rem; }

.statstrip { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; }
.statstrip li {
  background: var(--face); border: 2px solid var(--black); box-shadow: var(--bevel-out);
  padding: 0.5rem 0.7rem; display: flex; flex-direction: column; min-width: 6.5rem;
}
.statstrip strong { font-family: var(--pixel); font-size: 1.1rem; line-height: 1.3; }
.statstrip span { font-family: var(--ui); font-size: 0.6rem; text-transform: uppercase; color: #333; }

.presspanel h2 { font-family: var(--pixel); font-size: 0.9rem; }
.presspanel.is-ready { box-shadow: inset -2px -2px 0 var(--dark), inset 2px 2px 0 var(--light), 0 0 0 3px var(--acid); }
.pressform { margin-top: 0.8rem; }
.pressform .scrawl { margin: 0.6rem 0 0; }
.presspanel .meter { margin-top: 0.5rem; box-shadow: none; }

/* Setting the box: the staff's number, which is the one the public sees. */
.panel__hint { font-family: var(--mono); font-size: 0.78rem; margin: 0 0 0.7rem; color: #2b2b2b; }
.meterpanel h2 { font-family: var(--pixel); font-size: 0.9rem; }
.meterform { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.meterform label { font-family: var(--ui); font-size: 0.62rem; text-transform: uppercase; }
.meterform input[type="number"] {
  font-family: var(--pixel); font-size: 1.1rem; width: 6rem; padding: 0.4rem 0.5rem;
  border: 2px solid var(--black); box-shadow: var(--bevel-in); background: #fff; color: #000;
}
.meterform__state { font-family: var(--ui); font-size: 0.62rem; text-transform: uppercase; color: #333; }

/* Scans: one row per printed issue, upload and remove side by side. */
.scanpanel h2 { font-family: var(--pixel); font-size: 0.9rem; }
.scanlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.scanrow {
  display: grid; gap: 0.4rem; align-items: center;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  background: #ececec; border: 2px solid var(--black); box-shadow: var(--bevel-in);
  padding: 0.45rem 0.55rem; font-family: var(--mono); font-size: 0.8rem;
}
.scanrow__no { font-family: var(--pixel); font-size: 0.72rem; }
.scanrow__d { color: #444; }
.scanrow__file a { color: #000; border-bottom: 2px solid var(--pink); text-decoration: none; }
.scanrow__file a:hover { background: var(--acid); }
.scanrow__file.muted, .scanrow__file .muted { color: #666; }
.scanform { display: flex; align-items: center; gap: 0.3rem; margin: 0; }
.scanform input[type="file"] { font-family: var(--ui); font-size: 0.6rem; max-width: 12rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1rem 0; }
.chip {
  font-family: var(--ui); font-size: 0.62rem; text-decoration: none; color: #000; background: #dfe6e6;
  border: 2px solid var(--black); padding: 0.3rem 0.45rem; text-transform: uppercase;
}
.chip:hover { background: var(--cyan); }
.chip.is-active { background: var(--acid); box-shadow: var(--bevel-in); }

.pile { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.postcard {
  background: var(--face); border: 2px solid var(--black); box-shadow: var(--bevel-out);
  border-left: 10px solid var(--yellow); padding: 0.9rem; position: relative;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.postcard--approved { border-left-color: var(--acid); }
.postcard--rejected { border-left-color: var(--pink); }
.postcard--printed { border-left-color: var(--titlebar); }
.postcard--pending { border-left-color: var(--yellow); }
.postcard--used, .postcard--revoked, .postcard--expired { border-left-color: var(--shadow); }
.postcard__state {
  position: absolute; top: -0.55rem; right: 0.6rem; font-family: var(--ui); font-size: 0.6rem;
  background: #000; color: var(--acid); padding: 0.15rem 0.35rem; text-transform: uppercase;
}
.postcard__state--rejected { background: var(--pink); color: #fff; }
.postcard__state--approved { background: var(--acid); color: #000; }
.postcard__state--printed { background: var(--titlebar); color: #fff; }
.postcard__state--pending { background: var(--yellow); color: #000; }
.postcard__head { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; font-family: var(--ui); font-size: 0.62rem; color: #222; border-bottom: 1px dotted var(--shadow); padding-bottom: 0.4rem; }
.contacted { background: var(--cyan); padding: 0 0.25rem; }
.postcard__body { display: grid; gap: 0.6rem; }
.postcard__q h3 { font-family: var(--ui); font-size: 0.64rem; margin: 0 0 0.2rem; text-transform: uppercase; color: #333; }
.postcard__q p { margin: 0; overflow-wrap: anywhere; }
.postcard__title { font-weight: 700; }
.postcard__q--no { background: #e6e6e6; border: 2px solid var(--black); padding: 0.5rem; }
.postcard__q--no h3 { color: #333; }
.postcard__link { margin: 0; font-family: var(--mono); font-size: 0.82rem; overflow-wrap: anywhere; }
.notebox { display: grid; gap: 0.35rem; background: #e9e9e9; border: 2px dotted var(--shadow); padding: 0.5rem; }
.notebox textarea { min-height: 3rem; font-size: 0.88rem; }
.notebox .btn { justify-self: start; }
.postcard__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; border-top: 1px dotted var(--shadow); padding-top: 0.6rem; align-items: center; }
.postcard__actions > form:last-child { margin-left: auto; }
.art { margin: 0; background: #fff; border: 2px solid var(--black); box-shadow: var(--bevel-in); padding: 0.4rem; }
.art img { border: 1px solid #000; background: #fff; max-height: 380px; width: auto; }
.art figcaption { font-family: var(--mono); font-size: 0.72rem; margin-top: 0.3rem; color: #333; overflow-wrap: anywhere; }
.art--file { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; font-family: var(--mono); font-size: 0.85rem; }

.kv { display: flex; gap: 0.6rem; margin: 0 0 0.35rem; }
.kv span { font-family: var(--ui); font-size: 0.62rem; text-transform: uppercase; color: #333; min-width: 7rem; }

.editform { display: grid; gap: 1rem; }
.editgroup {
  background: var(--face); border: 2px solid var(--black); box-shadow: var(--bevel-out);
  padding: 0.9rem; margin: 0; display: grid; gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.editgroup legend { font-family: var(--ui); font-size: 0.7rem; text-transform: uppercase; background: var(--acid); border: 2px solid var(--black); padding: 0.1rem 0.4rem; }
.editfield { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.editfield label { color: #222; }
.editfield code { font-family: var(--mono); text-transform: none; color: #444; }
.editform__foot { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.staffauth { max-width: 620px; margin: 2rem auto; }
.staffauth__title { font-family: var(--pixel); font-size: clamp(0.9rem, 2.4vw, 1.3rem); margin: 0 0 0.8rem; }
.staffauth__title .slash { color: var(--pink); }
.backlink { font-family: var(--ui); font-size: 0.66rem; }
.page-staffauth { background-color: #0a2b2b; }

/* ------------------------------- responsive ------------------------------ */

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .staffnav { margin-left: 0; }
}

@media (max-width: 680px) {
  .slip__grid { grid-template-columns: minmax(0, 1fr); }
  .rules ul { columns: 1; }
  .scanrow { grid-template-columns: minmax(0, 1fr) auto; }
  .scanrow__file { grid-column: 1 / -1; }
  .scanform { grid-column: 1 / -1; }
  .pile { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .win { box-shadow: inset -2px -2px 0 var(--dark), inset 2px 2px 0 var(--light), 4px 4px 0 rgba(0, 0, 0, 0.5); }
  .meter__readout { flex-direction: column; align-items: stretch; }
  .meter__issueline { gap: 0.35rem; }
  .statstrip li { flex: 1 1 40%; }
  .pastissue { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  * { transition: none !important; }
}