/* Coil site — a 1966 full-page magazine ad you can play */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --ink: #2e2a24;          /* aged black ink */
  --red: #c23b22;          /* period spot red */
  --blue: #1d3a4a;         /* deep process blue */
  --paper: #f2e8d0;        /* yellowed stock */
  --backdrop: #35312c;     /* the desk the magazine lies on */
}
body {
  background: var(--backdrop);
  color: var(--ink);
  font: 17px/1.55 Georgia, "Times New Roman", serif;
  padding: 34px 12px 0;
}
a { color: var(--red); }

main { display: flex; justify-content: center; }

/* ── the printed sheet ── */
.sheet {
  position: relative;
  width: min(780px, 100%);
  background: url("assets/paper.jpg") center / cover;
  box-shadow: 0 2px 4px #0006, 0 24px 70px #000a;
  padding: clamp(22px, 5vw, 56px);
  overflow: hidden;
}
/* everything printed on the page is INK: it multiplies into the paper fibers */
.eyebrow, .burst, .masthead, .copy, .caption, .records-head, .fine { mix-blend-mode: multiply; }
/* print grain over EVERYTHING (pedal included) so it all reads as one page */
.sheet::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 9;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  opacity: .07; mix-blend-mode: multiply;
}

.eyebrow { text-align: center; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
           margin-bottom: 26px; }
.eyebrow span { font-size: 11px; letter-spacing: .5em; padding-left: .5em; }

/* ── NEW! starburst ── */
.burst {
  position: absolute; top: 40px; right: 26px; width: 108px; height: 108px; z-index: 3;
  display: flex; align-items: center; justify-content: center; transform: rotate(12deg);
}
.burst::before, .burst::after {
  content: ""; position: absolute; inset: 8px; background: var(--red);
}
.burst::before { transform: rotate(0deg); }
.burst::after  { transform: rotate(45deg); }
.burst span {
  position: relative; z-index: 1; color: var(--paper); text-align: center;
  font: 900 18px/1.05 "Cooper Black", "Cooper Std", Rockwell, Georgia, serif;
  letter-spacing: .02em;
}

/* ── masthead ── */
.masthead { text-align: center; margin-bottom: 30px; padding-right: 90px; padding-left: 90px; }
.script {
  font: 400 clamp(30px, 6vw, 44px)/1 "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive;
  color: var(--blue); transform: rotate(-3deg); margin-bottom: 2px;
}
h1 {
  font: 900 clamp(30px, 6.4vw, 52px)/1.06 "Cooper Black", "Cooper Std", Rockwell, "Arial Black", Georgia, serif;
  color: var(--ink); letter-spacing: .01em; text-transform: none;
}
h1 em { font-style: normal; color: var(--red); }
.deck { font-style: italic; margin-top: 12px; font-size: 18px; color: #4a4238; }

/* ── two columns: copy | demonstration ── */
.adgrid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 34px; align-items: start; }
@media (max-width: 640px) { .adgrid { grid-template-columns: 1fr; } .masthead { padding-left: 0; padding-right: 70px; } }

.copy p { margin-bottom: 14px; text-align: justify; hyphens: auto; }
.copy strong { letter-spacing: .02em; }

.checks { list-style: none; margin: 18px 0 22px; }
.checks li { padding: 3px 0 3px 30px; position: relative; }
.checks li::before {
  content: "✔"; position: absolute; left: 4px; top: 2px; color: var(--red); font-weight: 700;
}

.coupon { border: 2.5px dashed var(--ink); padding: 14px 16px; text-align: center; background: #00000006; }
.coupon-head { font: 900 20px/1.2 "Cooper Black", "Cooper Std", Rockwell, Georgia, serif; color: var(--blue);
               margin-bottom: 6px; letter-spacing: .03em; }
.coupon p:last-child { font-size: 14px; line-height: 1.5; }

/* ── the working demonstration model ── */
.pedal { position: relative; }
#start-overlay {
  position: absolute; inset: -8px; z-index: 5; display: flex; align-items: center; justify-content: center;
  background: #f2e8d0cc; backdrop-filter: blur(2px);
}
#start {
  width: 168px; height: 168px; border-radius: 50%; cursor: pointer;
  background: var(--red); color: var(--paper); border: 6px double var(--paper);
  outline: 3px solid var(--red);
  font: 900 19px/1.25 "Cooper Black", "Cooper Std", Rockwell, Georgia, serif;
  letter-spacing: .05em; transform: rotate(-8deg);
  box-shadow: 0 6px 20px #0005;
}
#start:hover { transform: rotate(-8deg) scale(1.04); }

/* the face: flat photo + live sprites (the halftone-print pass comes later) */
.press-photo { position: relative; top: 0; left: 0; width: min(100%, 460px); margin: 0 auto; }
.reel-face {
  position: relative; width: 100%; display: block;
  background: url("assets/background.png?v=2") center / contain no-repeat;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
  filter: sepia(.10) contrast(1.01) saturate(.95);
}
.reel-face .knob { position: absolute; cursor: ns-resize; }
.reel-face .knob::before {
  content: ""; position: absolute; inset: -2%; border-radius: 50%;
  background: radial-gradient(circle at 50% 54%, rgba(58,38,18,.26) 0%, rgba(58,38,18,.13) 55%, rgba(58,38,18,0) 72%);
}
.reel-face .knob img { position: relative; width: 100%; height: 100%; display: block; }
.reel-face .lamp {
  position: absolute; cursor: pointer; opacity: 1; transition: opacity .18s, filter .3s;
  background: url("assets/lamp_on.png") center / 100% 100% no-repeat;
}
.reel-face.off .lamp { opacity: 0; }
.reel-face .lamp { transition: opacity .3s, filter .3s; }
.reel-face.drivein .lamp { filter: hue-rotate(28deg) saturate(1.15) brightness(1.1); }  /* dusk at the lot */
.reel-face .fan { position: absolute; pointer-events: none; }
.reel-face .fan img { width: 100%; height: 100%; display: block; }
.reel-face .switch { position: absolute; cursor: pointer; }
.reel-face .switch:active { background: radial-gradient(circle, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 62%); }
.reel-face.kick { animation: kick .16s ease-out; }
@keyframes kick { 30% { top: 2px; left: 1px; } 70% { top: -1px; left: 0; } }

.caption { font-size: 13.5px; font-style: italic; text-align: center; margin: 12px 8px 20px;
           color: #4a4238; }
.caption strong { font-style: normal; }

.records-head { font: 700 13px/1.3 Georgia, serif; letter-spacing: .12em; text-align: center;
                margin-bottom: 8px; color: var(--blue); }

/* rows of coupon-ish buttons */
.row { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 4px 0; }
.row button {
  font: 700 11.5px/1 Georgia, serif; letter-spacing: .1em; padding: 9px 12px; cursor: pointer;
  color: var(--blue); background: #fbf6ea; border: 1.5px solid var(--blue); border-radius: 2px;
}
.row button.on { color: var(--paper); background: var(--red); border-color: var(--red); }
.row button.loading { opacity: .5; }
.clips { margin-bottom: 8px; }
.vol { font-size: 11px; letter-spacing: .14em; color: var(--blue); display: flex; gap: 8px; align-items: center;
       font-family: Georgia, serif; font-weight: 700; }
.vol input { accent-color: var(--red); width: 110px; }
.hint { font-size: 12px; font-style: italic; opacity: .7; text-align: center; padding-top: 10px; }
#mic { background: #fbf6ea; color: var(--ink); border: 1.5px solid var(--blue); border-radius: 2px;
       padding: 7px 9px; font: 700 11.5px Georgia, serif; max-width: 200px; }

.fine { margin-top: 30px; padding-top: 10px; border-top: 1px solid #00000030;
        font-size: 11px; text-align: center; opacity: .65; }

footer { text-align: center; padding: 22px 0 34px; font-size: 13px; color: #cfc6b8; }
footer a { color: #cfc6b8; }