/* Wheels and Wings.
   Palette and type are pulled from the subject: a 1943 C-47 parked on grass
   next to chrome. Olive drab and bone from the airframe, oxidized aluminum
   for structure, rudder red used only where something is urgent or chosen.
   The one signature element is the invasion stripe band — Placid Lassie wore
   those over Normandy, and nothing else on the internet looks like it. It is
   used once per page, never as decoration twice. */

:root {
  --od:      #444C3B;   /* olive drab */
  --od-deep: #2B3025;
  --bone:    #E9E3D3;   /* parchment */
  --alu:     #9BA3A6;   /* oxidized aluminum */
  --ink:     #1A1C17;
  --signal:  #B8402A;   /* rudder red */
  --sky:     #7A93A0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: "Newsreader", Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
}

.stripes {                    /* the signature */
  height: 10px;
  background: repeating-linear-gradient(
    90deg, var(--ink) 0 28px, var(--bone) 28px 56px);
  border-bottom: 1px solid var(--od-deep);
}

.wrap { max-width: 780px; margin: 0 auto; padding: 28px 20px 64px; }

h1, h2, h3, .display {
  font-family: "Saira Condensed", "Arial Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.05;
}
h1 { font-size: clamp(2.1rem, 7vw, 3.4rem); }
h2 { font-size: 1.4rem; margin-top: 34px; color: var(--od-deep); }

.eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--od);
}
.mono { font-family: "IBM Plex Mono", monospace; }
.muted { color: #5C6154; }

/* Data plate: a riveted placard, used for tickets and receipts. */
.plate {
  background: var(--od);
  color: var(--bone);
  border-radius: 3px;
  padding: 20px 22px;
  box-shadow: inset 0 0 0 1px rgba(233,227,211,.25);
}
.plate .row {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: "IBM Plex Mono", monospace; font-size: .82rem;
  padding: 5px 0; border-bottom: 1px dotted rgba(233,227,211,.3);
}

.card {
  background: #fff;
  border: 1px solid var(--alu);
  border-radius: 3px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

/* Ballot entries. Selection is a heavy left edge in rudder red — a marking,
   not a checkbox. */
.ballot { display: grid; gap: 10px; }
.entry {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--alu);
  border-left: 6px solid var(--alu);
  border-radius: 3px; padding: 14px 16px;
  font: inherit; color: inherit;
  transition: border-color .12s, transform .12s;
}
.entry:hover { border-color: var(--od); transform: translateX(2px); }
.entry[aria-pressed="true"] {
  border-color: var(--od-deep);
  border-left-color: var(--signal);
  background: #FFFDF7;
}
.entry .placard {
  font-family: "IBM Plex Mono", monospace; font-weight: 600;
  background: var(--od-deep); color: var(--bone);
  padding: 6px 9px; border-radius: 2px; font-size: .9rem;
}
.entry .mark {
  margin-left: auto; color: var(--signal); font-weight: 700;
  font-family: "Saira Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: .1em; font-size: .78rem; opacity: 0;
}
.entry[aria-pressed="true"] .mark { opacity: 1; }

button.action, .action {
  font-family: "Saira Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 700; font-size: 1rem;
  background: var(--od-deep); color: var(--bone);
  border: 0; border-radius: 3px; padding: 14px 22px;
  cursor: pointer; text-decoration: none; display: inline-block;
}
button.action:disabled { background: var(--alu); cursor: not-allowed; }

input, select {
  font: inherit; padding: 9px 10px;
  border: 1px solid var(--alu); border-radius: 2px; background: #fff;
}
input[type="number"] { width: 76px; }

:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

.notice {
  border-left: 4px solid var(--signal);
  background: #FFF6F1; padding: 12px 14px; margin: 14px 0;
}
.bar { height: 12px; background: var(--od); border-radius: 2px; }

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