/* A.L.A.R.A. — a 1947 comic-book advertisement.
   Joshua's reference is the Kix "Atomic Bomb Ring" page: exploded headline,
   the prize with callout arrows, a strip where the boy triumphs, a wall of
   breathless copy in columns, an order blank at the bottom.
   The surface is relentlessly cheerful. Everything that is wrong with it is
   in the pictures and the fine print, never in the sales voice. */

:root {
  --paper:  #efe4c8;
  --ink:    #1a1614;
  --red:    #c0261c;
  --yellow: #e8b325;
  --faded:  #6b5d47;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #2a2622;
  color: var(--ink);
  font-family: "Georgia", "Times New Roman", serif;
}

/* the page IS a sheet of newsprint */
.sheet {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--paper);
  /* cheap stock: a coarse dot screen plus age */
  background-image:
    radial-gradient(circle at 1px 1px, #0000000e 1px, transparent 1px),
    linear-gradient(160deg, #00000000 55%, #7a5c2210 100%);
  background-size: 4px 4px, 100% 100%;
  padding: 0 0 40px;
  box-shadow: 0 0 60px #0009;
}

.adv-rule {
  font: 700 9px/1 "Arial Narrow", Arial, sans-serif;
  letter-spacing: .5em; text-transform: uppercase;
  text-align: center; color: var(--faded);
  padding: 8px 0 6px; border-bottom: 1px solid #1a161433;
}

/* ── the shout ─────────────────────────────────────────────────────── */
header.shout { padding: 18px 26px 6px; }

.kicker {
  font: 700 clamp(15px, 2.6vw, 26px)/1 "Arial Black", Impact, sans-serif;
  letter-spacing: .01em; text-transform: uppercase;
  transform: rotate(-2deg); display: inline-block;
  margin: 0 0 2px;
}

/* the exploded word: outline + hard shadow, set big and tight */
h1.blast {
  margin: 0;
  font: 900 clamp(40px, 10.5vw, 118px)/.84 "Arial Black", Impact, sans-serif;
  letter-spacing: -.02em; text-transform: uppercase;
  color: var(--red);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 6px 6px 0 var(--ink), 0 0 22px #c0261c55;
  transform: rotate(-1.5deg);
}
h1.blast em { font-style: normal; color: var(--yellow); display: block; }

.sub {
  margin: 10px 0 0;
  font: 700 clamp(13px, 2vw, 20px)/1.15 "Arial Black", Impact, sans-serif;
  text-transform: uppercase; letter-spacing: .02em;
}
.sub b { background: var(--red); color: var(--paper); padding: 2px 8px; }
.sub .whisper {
  display: block; margin-top: 6px;
  font: italic 400 12px/1.3 Georgia, serif; letter-spacing: 0;
  text-transform: none; color: var(--faded);
}

/* ── hero + price ──────────────────────────────────────────────────── */
.hero { position: relative; margin: 14px 26px 0; border: 3px solid var(--ink); }
.hero img { display: block; width: 100%; }
.burst {
  position: absolute; right: -10px; top: -18px; width: 132px; height: 132px;
  display: grid; place-content: center; text-align: center;
  background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink); transform: rotate(-12deg);
  clip-path: polygon(50% 0,61% 12%,76% 6%,80% 22%,96% 24%,90% 39%,100% 50%,
                     90% 61%,96% 76%,80% 78%,76% 94%,61% 88%,50% 100%,
                     39% 88%,24% 94%,20% 78%,4% 76%,10% 61%,0 50%,
                     10% 39%,4% 24%,20% 22%,24% 6%,39% 12%);
}
.burst b { font: 900 30px/1 "Arial Black", Impact, sans-serif; display: block; }
.burst span { font: 700 9px/1.1 "Arial Narrow", Arial, sans-serif; letter-spacing: .06em; }

/* ── the strip ─────────────────────────────────────────────────────── */
.strip-head {
  margin: 26px 26px 8px; text-align: center;
  font: 700 clamp(16px, 3vw, 30px)/1 "Arial Black", Impact, sans-serif;
  text-transform: uppercase; color: var(--red); transform: rotate(-.6deg);
}
.strip-head small { display: block; color: var(--ink); font-size: 12px; letter-spacing: .1em; margin-top: 4px; }

.strip {
  display: grid; gap: 0; margin: 0 26px;
  grid-template-columns: repeat(4, 1fr);
  border: 3px solid var(--ink);
}
.strip figure { position: relative; margin: 0; border-right: 3px solid var(--ink); }
.strip figure:last-child { border-right: none; }
.strip img { display: block; width: 100%; }
.strip figcaption {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  background: var(--paper); border: 2px solid var(--ink);
  padding: 5px 7px; font-size: 10.5px; line-height: 1.25;
}
@media (max-width: 760px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .strip figure:nth-child(2) { border-right: none; }
  .strip figure:nth-child(3), .strip figure:nth-child(4) { border-top: 3px solid var(--ink); }
}

/* ── the prize, with callouts ──────────────────────────────────────── */
.prize { margin: 30px 26px 0; display: grid; gap: 22px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 860px) { .prize { grid-template-columns: 1fr; } }

.prize h2, .copy h2 {
  margin: 0 0 8px;
  font: 700 clamp(17px, 2.4vw, 26px)/1 "Arial Black", Impact, sans-serif;
  text-transform: uppercase; color: var(--red);
}
.callouts { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.callouts li { margin: 0 0 10px; padding-left: 20px; position: relative; }
.callouts li::before {
  content: "▸"; position: absolute; left: 0; top: 0; color: var(--red); font-size: 15px;
}
.callouts b { text-transform: uppercase; letter-spacing: .04em; }

/* THE WORKING UNIT is a panel like the ones in the strip -- same paper, same
   3px keyline, same caption box. It used to sit on near-black, which read as
   a web app dropped into a 1947 page: the one element that admitted the year. */
.unit {
  border: 3px solid var(--ink); padding: 14px; position: relative;
  background: var(--paper) url("assets/ad/bench.png") center/cover no-repeat;
}
.unit .panel-cap {
  margin: 12px -14px -14px; padding: 8px 10px;
  border-top: 3px solid var(--ink); background: var(--paper);
  font-size: 10.5px; line-height: 1.3;
}
/* Enlarging the stamp put it over the brightest, busiest part of the pedal
   art, where red-on-dark stopped reading. A pale tint block behind it -- the
   way these were actually overprinted -- gives the letters something to sit
   on without turning it into a label. */
.unit .stamp {
  position: absolute; top: 12px; right: 14px; z-index: 3;
  font: 700 clamp(13px, 1.6vw, 18px)/1 "Arial Black", Impact, sans-serif;
  letter-spacing: .16em;
  color: #c0261c; border: 4px solid #c0261c; padding: 8px 12px;
  background: rgba(243, 228, 183, .82);
  box-shadow: 0 0 0 3px rgba(243, 228, 183, .82);
  transform: rotate(7deg); opacity: .92;
}
#face { max-width: 300px; margin: 0 auto; position: relative; }
#start-overlay {
  position: absolute; inset: 0; display: grid; place-content: center; z-index: 2;
  /* a printed scrim, not a dark web overlay: paper plus the same dot screen */
  background: #efe4c8e6;
  background-image: radial-gradient(circle at 1px 1px, #0000001a 1px, transparent 1px);
  background-size: 4px 4px;
}
#start {
  font: 700 12px/1 "Arial Black", Impact, sans-serif; letter-spacing: .14em;
  background: var(--yellow); color: var(--ink); border: 3px solid var(--ink);
  padding: 12px 16px; cursor: pointer;
}
.controls { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.controls button, .clips button {
  font: 700 9.5px/1 "Arial Narrow", Arial, sans-serif; letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.clips { display: contents; }
#mic { font: 10px Arial, sans-serif; max-width: 160px; }
/* until a device list exists it is an empty box sitting in the ad */
#mic:empty { display: none; }

/* ── the printed buttons ────────────────────────────────────────────────
   One generated PLATE backs every button and the label is drawn over it in
   HTML, because the clip buttons say things like "LOW GAIN · 165 BPM" and
   change -- bake a word into the art and it can never be those. Same reason
   the line never bakes tick marks into a face.
   border-image, not background-size: the plate has a rivet at each end, and
   stretching the whole thing squashes them. Slicing keeps the ends and
   stretches only the middle.
   The pressed state is DERIVED from the same pixels (tools/gen_ad.py), never
   generated separately -- a generated pair never registers. */
.controls button, .clips button, #mic {
  background: none; box-shadow: none; color: var(--ink);
  border-style: solid; border-width: 9px 18px;
  border-image-source: url("assets/ad/btn.png");
  border-image-slice: 62 128 fill;
  border-image-width: 9px 18px;
  border-image-repeat: stretch;
  padding: 2px 4px; text-shadow: 0 1px 0 #ffffff55;
}
.controls button.on, .clips button.on {
  border-image-source: url("assets/ad/btn_on.png");
  background: none; color: var(--paper); text-shadow: 0 1px 0 #00000055;
}
.controls button:active, .clips button:active { transform: translate(1px, 1px); }
#mic { -webkit-appearance: none; appearance: none; text-align: center; }
input[type=file] { display: none; }
.vol { display: flex; align-items: center; gap: 6px; font: 700 9px "Arial Narrow", Arial, sans-serif;
       letter-spacing: .12em; color: var(--ink);
       background: #efe4c8cc; border: 2px solid var(--ink); padding: 5px 8px; }
.vol input[type=range] { accent-color: var(--red); width: 92px; }

/* ── the wall of copy ──────────────────────────────────────────────── */
/* The copy sits INSIDE the prize grid's left column now: at full width that
   space beside the unit was simply empty, and the text began below the whole
   panel. One column, because half the page is not wide enough for three. */
.copy { margin: 22px 0 0; column-count: 1; font-size: 12.5px; line-height: 1.45; }
@media (min-width: 1180px) { .copy { column-count: 2; column-gap: 20px; } }
.copy h2 { column-span: all; }
.copy p { margin: 0 0 9px; }
.copy p:first-of-type::first-letter {
  float: left; font: 900 34px/28px "Arial Black", Impact, sans-serif;
  color: var(--red); padding: 2px 5px 0 0;
}
.copy b { text-transform: uppercase; }

/* ── the order blank ───────────────────────────────────────────────── */
.blank { margin: 28px 26px 0; border: 3px dashed var(--ink); padding: 16px 18px; }
.blank h3 {
  margin: 0 0 8px; font: 700 clamp(15px, 2.2vw, 22px)/1 "Arial Black", Impact, sans-serif;
  text-transform: uppercase; color: var(--red);
}
.blank .lines { font-size: 12px; line-height: 2.1; color: var(--faded); }
.blank .lines i { font-style: normal; border-bottom: 1px solid #1a161455; padding: 0 60px 0 4px; }
.blank .act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.blank .act a {
  font: 700 12px/1 "Arial Black", Impact, sans-serif; letter-spacing: .1em;
  background: var(--red); color: var(--paper); border: 3px solid var(--ink);
  padding: 12px 16px; text-decoration: none;
}
.blank .act a.ghost { background: var(--paper); color: var(--ink); }
/* the buy slot before there is anything to buy: stamped, not clickable */
.blank .act .pending {
  font: 700 11px/1 "Arial Narrow", Arial, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faded);
  border: 2px dashed #1a161455; padding: 11px 14px; cursor: default;
}

/* the fine print is where the truth is kept */
.fineprint {
  margin: 18px 26px 0; padding-top: 10px; border-top: 1px solid #1a161433;
  font-size: 9.5px; line-height: 1.5; color: var(--faded); text-align: justify;
}

footer { margin: 22px 26px 0; font-size: 10.5px; color: var(--faded); text-align: center; }
footer a { color: var(--red); }