/* MikeIsWatching.com
   Palette sampled from reference/banner.webp: cream #E8E2D2, ink #010101.
   One accent: the REC red. Type: Mona Sans, set wide and narrow to match the banner. */

@font-face {
  font-family: "Mona Sans";
  src: url("fonts/MonaSans-latin-var.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  --cream: #E8E2D2;
  --ink: #010101;
  --rec: #D8261C;
  --muted: rgba(1, 1, 1, 0.66);
  --rule: rgba(1, 1, 1, 0.2);
  --night: #0D0C0B;
  --osd: rgba(232, 226, 210, 0.94);
  --bar: 48px;
  /* The bar plus the strip a phone keeps for its gesture bar or home indicator,
     where the browser draws the page under it (viewport-fit=cover). */
  --bar-total: calc(var(--bar) + env(safe-area-inset-bottom, 0px));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  padding-bottom: var(--bar-total);
  background: var(--cream);
  color: var(--ink);
  font-family: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 450;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; z-index: 100; left: 12px; top: -60px; background: var(--ink); color: var(--cream); padding: 10px 14px; font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--rec); outline-offset: 3px; }

/* The only decoder. Hidden but still decoding, same trick as Haley Facts. */
#feed { position: absolute; top: 0; left: 0; width: 2px; height: 2px; opacity: 0.001; pointer-events: none; }
canvas[data-feed] { width: 100%; height: 100%; }

/* ---- type ---- */
.display { font-weight: 900; text-transform: uppercase; letter-spacing: -0.004em; margin: 0; }
.fit { display: block; max-width: 100%; white-space: nowrap; line-height: 0.84; }
.fit > span { display: inline-block; }
.lockup .fit + .fit { margin-top: 0.05em; }
.w-wide { font-stretch: 112%; word-spacing: 0.14em; }
.w-cond { font-stretch: 75%; }
.paid { font-stretch: 75%; font-weight: 460; text-transform: uppercase; letter-spacing: 0.035em; }
.osdt { font-weight: 620; font-stretch: 84%; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* ---- camera furniture ---- */
.rec { display: inline-block; flex: none; width: 0.66em; height: 0.66em; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0.55em rgba(216, 38, 28, 0.55); animation: rec 2.8s ease-in-out infinite; }
@keyframes rec { 0%, 50%, 100% { opacity: 1; } 75% { opacity: 0.1; } }
.vf { position: absolute; pointer-events: none; z-index: 3; }
.vf i { position: absolute; width: var(--vf-size, 28px); height: var(--vf-size, 28px); border: var(--vf-w, 2px) solid var(--vf-color, var(--cream)); }
.vf i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.vf i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.vf i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.vf i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
/* Film grain on the footage only, so reading text stays crisp. Texture made in site.js. */
.grainy { position: relative; overflow: hidden; isolation: isolate; }
.grainy::after {
  content: ""; position: absolute; inset: -40px; z-index: 2; pointer-events: none;
  background-image: var(--grain, none); opacity: 0.34; mix-blend-mode: overlay;
  animation: grain 0.8s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-18px, 12px); }
  40% { transform: translate(14px, -22px); }
  60% { transform: translate(-10px, -6px); }
  80% { transform: translate(22px, 16px); }
  100% { transform: translate(0, 0); }
}

/* ---- fixed bottom bar: the disclaimer on every view ---- */
.bottombar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: var(--bar-total); display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--cream); border-top: 2px solid var(--ink); padding: 0 max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px)); }
.bottombar .paid { font-size: 13px; }
.bottombar a { background: var(--ink); color: var(--cream); text-decoration: none; font-weight: 880; font-stretch: 80%; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 16px 7px; }
.bottombar a:hover { background: var(--cream); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }

/* ---- stage: one camera that multiplies ---- */
.stage { height: calc(100svh - var(--bar-total)); min-height: 540px; display: flex; flex-direction: column; background: var(--cream); }
.frame { flex: 1; min-height: 0; background: #000; }
.wall { position: absolute; inset: 0; display: grid; gap: 2px; background: #000; transition: opacity 0.18s; }
.wall.cut { opacity: 0; transition: none; }
.wall[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.wall[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wall[data-n="9"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wall[data-n="16"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wall canvas { min-height: 0; }
.noscript-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame .vf { inset: clamp(14px, 2.2vw, 30px); --vf-size: clamp(24px, 3vw, 44px); }
.osd { position: absolute; z-index: 4; display: flex; align-items: center; gap: 0.6em; color: var(--osd); text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 1px 5px rgba(0, 0, 0, 0.6); white-space: nowrap; }
.osd.tl { top: calc(clamp(14px, 2.2vw, 30px) + 16px); left: calc(clamp(14px, 2.2vw, 30px) + 18px); }
.osd.tr { top: calc(clamp(14px, 2.2vw, 30px) + 16px); right: calc(clamp(14px, 2.2vw, 30px) + 18px); }
.osd.bl { bottom: calc(clamp(14px, 2.2vw, 30px) + 16px); left: calc(clamp(14px, 2.2vw, 30px) + 18px); }
.osd.br { bottom: calc(clamp(14px, 2.2vw, 30px) + 16px); right: calc(clamp(14px, 2.2vw, 30px) + 18px); }
.super { position: absolute; z-index: 4; left: 8%; right: 8%; bottom: 14%; margin: 0; text-align: center; color: var(--cream); font-weight: 860; font-stretch: 78%; font-size: clamp(26px, 3.6vw, 58px); line-height: 1; text-transform: uppercase; letter-spacing: 0.004em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.7); transition: opacity 0.35s; }
.super.is-empty { opacity: 0; }
.tap { position: absolute; z-index: 5; left: 50%; top: 60%; transform: translate(-50%, -50%); white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; background: rgba(1, 1, 1, 0.55); color: var(--cream); border: 2px solid var(--cream); padding: 15px 22px 14px; font-weight: 860; font-stretch: 80%; font-size: 19px; letter-spacing: 0.1em; text-transform: uppercase; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.tap svg { width: 21px; height: 21px; }
.tap:hover { background: var(--cream); color: var(--ink); }
/* video controls live on the frame, like a camera's own buttons */
.frame .ctl { background: rgba(1, 1, 1, 0.35); border: 1.5px solid rgba(232, 226, 210, 0.8); color: var(--cream); padding: 6px 10px 5px; cursor: pointer; text-shadow: none; }
.frame .ctl:hover { background: var(--cream); color: var(--ink); }

.band { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(16px, 2vw, 26px) clamp(20px, 3vw, 44px); }
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.3vw, 18px); }
.who { margin: 0; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.4; font-weight: 480; text-wrap: balance; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.cta { display: inline-block; text-decoration: none; font-weight: 880; font-stretch: 80%; font-size: clamp(16px, 1.2vw, 18px); letter-spacing: 0.07em; text-transform: uppercase; padding: 11px 18px 10px; border: 2px solid var(--ink); }
.cta.primary { background: var(--ink); color: var(--cream); }
.cta.primary:hover { background: var(--cream); color: var(--ink); }
.cta.ghost:hover { background: var(--ink); color: var(--cream); }

/* ---- the record ---- */
.story { padding: clamp(64px, 9vw, 140px) 0 clamp(24px, 4vw, 48px); }
.story > .intro, .story > .chapter { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px); }
.intro { max-width: 1000px !important; margin-bottom: clamp(56px, 8vw, 110px); text-align: center; scroll-margin-top: 16px; }
.lede { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; margin: 1.1em auto 0; max-width: 34em; font-weight: 490; }
.chapter { margin-top: 0; margin-bottom: clamp(56px, 8vw, 104px); }
.ch { position: relative; display: inline-block; margin: 0 0 clamp(20px, 3vw, 36px); padding: 12px 18px 11px; font-weight: 700; font-stretch: 84%; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; }
.ch .vf { inset: 0; --vf-color: var(--ink); --vf-size: 12px; --vf-w: 2px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.6vw, 56px) clamp(28px, 4.4vw, 72px); }
.facts.one { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.fact { border-top: 3px solid var(--ink); padding-top: 16px; }
.when { margin: 0 0 12px; font-weight: 900; font-stretch: 75%; font-size: 22px; letter-spacing: 0.02em; }
.say { margin: 0 0 0.7em; font-size: clamp(21px, 1.95vw, 28px); line-height: 1.32; font-weight: 560; letter-spacing: -0.006em; }
.proof { font-weight: 720; font-stretch: 92%; font-size: clamp(15px, 1.2vw, 17px); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; white-space: nowrap; }
.proof::after { content: "\00a0\2192"; }
.proof:hover { background: var(--ink); color: var(--cream); text-decoration: none; }

.pull { position: relative; margin: 0 0 clamp(56px, 8vw, 104px); background: var(--night); color: var(--cream); padding: clamp(64px, 9vw, 130px) clamp(24px, 8vw, 140px); text-align: center; }
.pull .osd { font-size: 12.5px; }
.pull .vf { inset: clamp(14px, 2.2vw, 30px); --vf-size: clamp(22px, 2.6vw, 38px); }
.pull blockquote { margin: 0 auto; max-width: 1100px; }
.pull blockquote p { margin: 0; font-weight: 860; font-stretch: 78%; font-size: clamp(34px, 5.4vw, 84px); line-height: 0.98; text-transform: uppercase; letter-spacing: 0.002em; }
.pull figcaption { margin: 1.6em auto 0; max-width: 40em; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: rgba(232, 226, 210, 0.86); }
.pull .proof { color: var(--cream); margin-left: 0.3em; }
.pull .proof:hover { background: var(--cream); color: var(--ink); }
/* The quote sits on the campaign's video: the moment he says it, silent. The grade
   (black and white, darkened) is baked into the file by tools/make_team_media.sh;
   this only crops it and adds the shade that keeps the type readable. */
.pull-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 56% 30%; background: var(--night); pointer-events: none; }
.pull::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 64% at 50% 50%, rgba(13, 12, 11, 0.58), rgba(13, 12, 11, 0.16) 100%),
    linear-gradient(180deg, rgba(13, 12, 11, 0.50), rgba(13, 12, 11, 0.08) 30%, rgba(13, 12, 11, 0.08) 70%, rgba(13, 12, 11, 0.56)); }
.pull blockquote, .pull figcaption { position: relative; z-index: 3; }
.pull blockquote p { text-shadow: 0 2px 26px rgba(1, 1, 1, 0.55); }
.pull figcaption { text-shadow: 0 0 2px rgba(1, 1, 1, 0.9), 0 1px 14px rgba(1, 1, 1, 0.85); }

/* ---- the clip behind "See the proof" on the quote (a native <dialog>) ---- */
.clip { padding: 0; border: 0; background: transparent; color: var(--cream); width: min(92vw, 960px); max-width: none; max-height: 96svh; overflow: auto; }
.clip::backdrop { background: rgba(1, 1, 1, 0.92); }
.clip-box { position: relative; background: var(--night); padding: clamp(16px, 3vw, 26px); }
.clip-box > .vf { inset: 6px; --vf-size: 16px; }
.clip-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.clip-tag { margin: 0; display: flex; align-items: center; gap: 0.6em; color: var(--osd); }
.clip-x { cursor: pointer; background: transparent; border: 1.5px solid rgba(232, 226, 210, 0.8); color: var(--cream); padding: 6px 10px 5px; }
.clip-x:hover { background: var(--cream); color: var(--ink); }
.clip video { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: calc(100svh - 230px); object-fit: contain; background: #000; }
.clip video::cue { background: rgba(1, 1, 1, 0.82); color: #fff; }
.clip-cap { margin: 14px 0 0; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.45; }
.clip-src { margin: 8px 0 0; font-size: 14.5px; }
.clip-src a { font-weight: 640; }
.clip-src a:hover { background: var(--cream); color: var(--ink); text-decoration: none; }
.clip-paid { margin: 14px 0 0; font-size: 12.5px; color: var(--osd); }
@media (max-height: 520px) and (orientation: landscape) {
  .clip { width: min(96vw, 900px); }
  .clip-box { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "top top" "vid cap" "vid src" "vid paid"; grid-template-rows: auto auto auto 1fr; column-gap: 22px; padding: 16px 22px; }
  .clip-top { grid-area: top; margin-bottom: 10px; }
  .clip video { grid-area: vid; max-height: calc(100svh - 104px); }
  .clip-cap { grid-area: cap; margin-top: 0; }
  .clip-src { grid-area: src; }
  .clip-paid { grid-area: paid; align-self: end; }
}

/* ---- the ending: the banner itself, at its own proportions, then the ask ---- */
.closer { border-top: 4px solid var(--ink); scroll-margin-top: 16px; }
.banner { display: grid; grid-template-columns: minmax(0, 38.5fr) minmax(0, 61.5fr); aspect-ratio: 2000 / 570; overflow: hidden; }
.banner-photo { position: relative; overflow: hidden; }
.banner-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left bottom; }
.banner-type { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 2.4% 2.3% 1.8% 1%; }
.url { font-weight: 860; font-stretch: 92%; letter-spacing: -0.012em; line-height: 1.05; margin: 0.4em 0 0; }
.banner-type .paid { font-size: clamp(11px, 1.02vw, 16px); margin: 1em 0 0; }
.give { text-align: center; border-top: 2px solid var(--ink); padding: clamp(32px, 4.4vw, 60px) clamp(20px, 4vw, 56px) clamp(40px, 5vw, 72px); }
.closer-sub { font-size: clamp(20px, 1.8vw, 26px); font-weight: 560; margin: 0 0 0.9em; }
.amounts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; width: min(900px, 100%); margin: 0 auto; }
.amounts a { display: block; text-decoration: none; border: 2px solid var(--ink); padding: 14px 6px 12px; font-weight: 880; font-stretch: 80%; font-size: clamp(22px, 2vw, 28px); }
.amounts a:hover, .amounts a.feat { background: var(--ink); color: var(--cream); }
.express { font-size: 13px; line-height: 1.45; color: var(--muted); margin: 1.1em auto 0; max-width: 30em; }

.foot { border-top: 2px solid var(--ink); padding: 28px clamp(20px, 4vw, 56px) 36px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.foot nav { display: flex; gap: 22px; }
.paidbox { border: 2px solid var(--ink); padding: 9px 14px 8px; font-size: 14px; }

/* ---- responsive tiers ----
   1200 and up   desktop (the base styles above)
   900 to 1199   small laptops, tablets held sideways
   600 to 899    tablets upright, big phones sideways
   under 600     phones
   Upright screens size the camera by width, so the video never turns into a
   tall sliver of a 16:9 frame. */
@media (max-width: 1199px) {
  .band { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); }
  .cta { padding: 10px 15px 9px; }
}
@media (max-width: 1199px) and (orientation: portrait) {
  .stage { height: auto; min-height: 0; }
  .frame { flex: none; aspect-ratio: 3 / 2; }
  .band { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vw, 22px); padding: clamp(18px, 3vw, 32px) clamp(18px, 4vw, 44px) clamp(22px, 3.4vw, 36px); }
  .band .lockup { max-width: 860px; }
  .who { font-size: clamp(16px, 2.2vw, 19px); }
  .cta { font-size: clamp(16px, 2vw, 18px); padding: 12px 18px 11px; }
}
@media (max-width: 899px) {
  .osdt { font-size: 12px; letter-spacing: 0.13em; }
  .story { padding-top: 72px; }
  .facts { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .pull { padding: 88px 44px 72px; }
  .banner { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); aspect-ratio: 2.6; }
  .banner-type { padding: 3% 3% 2.4% 2%; }
  .banner-type .paid { font-size: 11px; }
}
@media (max-width: 699px) {
  .amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .osdt { font-size: 11px; letter-spacing: 0.12em; }
  .super { left: 6%; right: 6%; font-size: clamp(24px, 7.8vw, 34px); }
  .band { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 22px; gap: 16px; }
  .story { padding-top: 48px; }
  .pull { padding: 76px 22px 64px; }
  .banner { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
  .banner-photo { aspect-ratio: 780 / 570; }
  .banner-type { padding: 18px 18px 22px; }
  .banner-type .paid { font-size: 12px; }
  .foot { flex-direction: column; align-items: center; text-align: center; padding-bottom: 32px; }
  .bottombar .paid { font-size: 11.5px; }
  .bottombar a { font-size: 14px; padding: 8px 13px 7px; }
}
@media (max-width: 599px) and (orientation: portrait) {
  .frame { aspect-ratio: 9 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rec, .grainy::after { animation: none; }
  .wall, .super { transition: none; }
}