/* KOQ petition page. Fan-magazine cover, picked by Audrey Sept 9 from four
   directions: red masthead, condensed cover type over the clip frame, a
   yellow starburst, black rules. Anton for the big lines, Barlow Condensed
   for labels and the ticker, DM Sans for everything you read. White page,
   ink black, one red and one yellow. Mobile first, because this gets
   opened from a DM. */

:root {
  --red: #C8102E;
  --red-deep: #A60D26;
  --yellow: #FFD23F;
  --yellow-tint: #FFF6D6;
  --ink: #111111;
  --ink-70: rgba(17, 17, 17, 0.7);
  --ink-50: rgba(17, 17, 17, 0.5);
  --ink-15: rgba(17, 17, 17, 0.15);
  --white: #FFFFFF;
  --poster: "Anton", Impact, "Arial Narrow", sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px;
}

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus {
  left: 8px; top: 8px; z-index: 10;
  background: var(--white); color: var(--ink);
  padding: 10px 16px; border: 2px solid var(--ink);
}

/* Masthead */

.masthead { background: var(--red); color: var(--white); }
.masthead-in {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 10px;
}
.masthead h1 {
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(2.6rem, 11.5vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
.crown { width: clamp(30px, 8vw, 40px); height: auto; flex: 0 0 auto; margin-bottom: 4px; }

.strip { border-bottom: 2px solid var(--ink); }
.strip-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-top: 10px;
  padding-bottom: 8px;
}
.strip-in a { color: var(--red); text-decoration: none; }
.strip-in a:hover { text-decoration: underline; }

/* Cover photo, which is also the clip */

.cover { padding-bottom: clamp(28px, 6vw, 40px); }
.cover-wrap { padding-left: 0; padding-right: 0; }

.cover-photo { position: relative; }

.clip-poster {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 560px) { .clip-poster { aspect-ratio: 3 / 2; } }
.clip-poster img {
  display: block;
  width: 100%;
  height: 100%;
  /* The key art is square; a landscape crop keeps her face and the crown
     and drops the show and network marks along the bottom edge. */
  object-fit: cover;
  object-position: 50% 15%;
}
.clip-poster:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }

.cover-line {
  position: absolute;
  left: 18px; right: 120px; top: 16px;
  color: var(--white);
  font-family: var(--poster);
  font-size: clamp(2.4rem, 10.5vw, 3.4rem);
  line-height: 0.9;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.watch {
  position: absolute;
  right: 14px; bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--cond);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 12px 8px 10px;
  transition: background 0.15s ease;
}
.watch i {
  display: block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--red);
}
.clip-poster:hover .watch { background: var(--yellow); }

.burst {
  position: absolute;
  right: 14px; top: 14px;
  width: 92px; height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: var(--yellow);
  font-family: var(--cond);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 18px;
  clip-path: polygon(50% 0%, 61% 12%, 76% 6%, 80% 22%, 96% 26%, 90% 40%, 100% 50%, 90% 60%, 96% 74%, 80% 78%, 76% 94%, 61% 88%, 50% 100%, 39% 88%, 24% 94%, 20% 78%, 4% 74%, 10% 60%, 0% 50%, 10% 40%, 4% 26%, 20% 22%, 24% 6%, 39% 12%);
  transform: rotate(8deg);
  transition: transform 0.15s ease;
}
.burst:hover { transform: rotate(0deg) scale(1.04); }
.playing .burst { display: none; }

.cover-photo iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--ink);
}

.clip-credit {
  font-family: var(--cond);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin: 8px 20px 0;
}

.sub {
  font-size: 17px;
  line-height: 1.45;
  margin: 18px 20px 0;
}

.count {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin: 10px 20px 0;
}

/* Buttons */

.btn {
  display: block;
  width: 100%;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 15px 26px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--red); border-color: var(--red); }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.btn[disabled] { opacity: 0.55; cursor: default; }

.btn-hero { width: auto; margin: 18px 20px 0; }
.btn-wide { width: 100%; }

.btn-ghost { background: var(--white); color: var(--ink); }
.btn-ghost:hover { background: var(--yellow); border-color: var(--ink); color: var(--ink); }

/* Ticker */

.ticker {
  overflow: hidden;
  background: var(--yellow);
  padding: 10px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  font-family: var(--cond);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  animation: ticker 60s linear infinite;
}
.ticker-track i { font-style: normal; color: var(--red); }
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* The fans' note */

.note { padding: clamp(32px, 7vw, 48px) 20px 0; }
.note p {
  font-size: clamp(1.2rem, 4.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Form */

.sign { padding: clamp(28px, 6vw, 40px) 0 clamp(40px, 9vw, 64px); }

.card {
  background: var(--white);
  border: 2px solid var(--ink);
  padding: clamp(24px, 6vw, 36px) clamp(18px, 5vw, 32px) clamp(24px, 6vw, 32px);
}

h2 {
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(2rem, 8vw, 2.6rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 22px;
}

.field { margin: 0 0 16px; }

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.row .field { display: flex; flex-direction: column; justify-content: flex-end; }
@media (max-width: 380px) { .row { grid-template-columns: 1fr; } }

label {
  display: block;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.opt { font-weight: 500; color: var(--ink-50); }

input[type="text"], input[type="email"], select {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink-15);
  border-radius: 0;
  padding: 13px 14px;
  transition: border-color 0.12s ease;
}
input::placeholder { color: var(--ink-50); }
input[type="text"]:focus, input[type="email"]:focus, select:focus { outline: 0; border-color: var(--ink); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--red); }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 19px) center, calc(100% - 14px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-50);
  margin: -4px 0 18px;
}

/* Checkboxes */

.check {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 2px solid var(--ink-15);
  cursor: pointer;
  font-family: var(--body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.check:hover { border-color: var(--ink); }
.check-pick { background: var(--yellow-tint); border-color: transparent; }
.check-pick:hover { border-color: var(--ink); }

.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.check .box {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 2px solid var(--ink);
  background: var(--white);
  position: relative;
  transition: background 0.12s ease;
}
.check .box::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.12s ease;
}
.check input:checked + .box { background: var(--ink); }
.check input:checked + .box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .box { outline: 3px solid var(--yellow); outline-offset: 2px; }
.check input[aria-invalid="true"] + .box { border-color: var(--red); }

.check .text strong { font-weight: 700; }

.legal {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-50);
  margin: 12px 0 20px;
}

.err {
  border: 2px solid var(--red);
  color: var(--red);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 14px;
  margin: 0 0 14px;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Confirmation */

.done { text-align: center; padding: 12px 0 8px; }
.done h3 {
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(2rem, 8vw, 2.6rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.done p { margin: 0 auto 22px; max-width: 360px; color: var(--ink-70); }
.btn-share { width: auto; margin: 0 auto; }
.share-note { font-size: 14px; margin: 14px auto 0 !important; word-break: break-all; }
.socials {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.socials a {
  display: block;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 2px solid var(--ink-15);
  padding: 8px 12px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.socials a:hover { background: var(--yellow); border-color: var(--ink); }

/* Privacy page */

.card > p { margin: 0 0 16px; }
.card > p:last-child { margin: 8px 0 0; }
.card a:not(.btn) { color: var(--red); }
.card .btn-ghost { display: inline-block; width: auto; }

/* Footer */

footer { padding: 8px 0 clamp(36px, 8vw, 56px); text-align: center; }
.sponsor { font-size: 13px; color: var(--ink-70); margin: 0 0 10px; }
.sponsor strong { font-weight: 700; color: var(--ink); }
.fine { font-size: 12px; line-height: 1.6; color: var(--ink-50); margin: 0 auto; max-width: 440px; }
.fine a { color: var(--ink-70); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .ticker-track { width: 100%; justify-content: center; }
}