/* Midterm Mania: election-night teletext. Generated by 05_Events/midterm-mania/page-directions/build-site.py; edit teletext.html, not this. */

  :root {
    --crt: #050505;
    --red: #F03A2E;   /* one side of the board */
    --blue: #2F7BFF;  /* the other; equal weight everywhere */
    --blu2: #7FB0FF;  /* blue for small text on black, 9:1 */
    --wht: #F2F2F2;
    --dim: #ADADAD;
    --disp: 'Jersey 25', 'VT323', monospace;
    --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  }
  * { box-sizing: border-box; }
  html { overflow-x: clip; }
  body {
    margin: 0;
    background: var(--crt);
    color: var(--blu2);
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 96px;
  }
  a { color: inherit; text-decoration: none; }
  a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--wht); outline-offset: 3px; }
  img { display: block; max-width: 100%; }
  h1, h2, h3, p { margin: 0; }
  h1, h2, h3, .disp { font-family: var(--disp); font-weight: 400; line-height: .88; letter-spacing: .01em; }

  /* CRT layers */
  .crt-scan { position: fixed; inset: 0; pointer-events: none; z-index: 60;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 4px); }
  .crt-vig { position: fixed; inset: 0; pointer-events: none; z-index: 59;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.35) 100%); }

  /* header row */
  .hdr {
    position: sticky; top: 0; z-index: 70;
    display: grid; grid-template-columns: auto auto 1fr auto; gap: 24px; align-items: center;
    padding: 8px 20px; line-height: 22px; border-bottom: 2px solid #1a1a1a;
    background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.18) 2px 4px), var(--crt);
    font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 13px;
  }
  .hdr .live { color: var(--wht); }
  .hdr .live::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--red); margin-right: 8px; vertical-align: 1px; }
  .hdr .ch { color: var(--blu2); }
  .hdr .dt { color: var(--wht); text-align: right; }
  .hdr .clk { color: var(--wht); font-variant-numeric: tabular-nums; }
  .cur { display: inline-block; width: .6em; height: 1em; background: var(--wht); vertical-align: -2px; margin-left: 6px; animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }

  .screen { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

  /* page blocks */
  .pg { padding: 40px 0 16px; border-bottom: 2px solid #161616; scroll-margin-top: 12px; }
  .pg-head {
    display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
    background: var(--red); color: #000; padding: 4px 12px; line-height: 24px;
    font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 13px;
  }
  .pg-head .sub, .pg-head .r { color: #000; }
  .pg:nth-of-type(even) > .pg-head { background: var(--blue); }
  .pg-body { padding: 24px 12px 16px; display: grid; gap: 24px; }
  .pg-body > .pg-head { margin: 0 -12px; }
  .pg h2 { font-size: clamp(44px, 7vw, 84px); color: var(--red); }
  .pg h2 .alt { color: var(--blue); }
  .lead { color: var(--wht); max-width: 64ch; font-size: 16px; }
  .note { color: var(--dim); font-size: 13px; letter-spacing: .04em; }
  .caps { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: 13px; }
  .acc { color: var(--blu2); } .wht { color: var(--wht); }

  /* hero */
  .hero { position: relative; padding: 0; border-bottom: 2px solid #161616; }
  .hero .px { position: absolute; inset: 0 calc(50% - 50vw); overflow: hidden; }
  .hero .px img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: .55; }
  .hero .px::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,.45) 0%, rgba(5,5,5,.6) 55%, var(--crt) 100%); }
  .hero-inner { position: relative; padding: 56px 12px 40px; display: grid; gap: 24px; }
  .hero h1 { font-size: clamp(96px, 17vw, 210px); }
  .hero h1 span { display: block; }
  .hero h1 .r { color: var(--red); text-shadow: 0 0 22px rgba(240,58,46,.45); }
  .hero h1 .b { color: var(--blue); text-shadow: 0 0 22px rgba(47,123,255,.5); }
  .hero .tag { color: var(--blu2); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
  .hero .lead { font-size: 17px; }
  .bars { display: flex; gap: 6px; align-items: flex-end; height: 44px; }
  .bars span { width: 18px; background: var(--red); }
  .bars span:nth-child(even) { background: var(--blue); }

  .idx { display: grid; gap: 8px; max-width: 560px; }
  .idx a { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; color: var(--wht); }
  .idx a .t { display: flex; gap: 8px; align-items: baseline; }
  .idx a .dots { flex: 1; border-bottom: 2px dotted #3a3a3a; transform: translateY(-4px); }
  .idx a .n { color: var(--blu2); font-weight: 600; }
  .idx a .d { color: var(--dim); font-size: 13px; }
  .idx a:hover .t { color: var(--blu2); }

  .btns { display: flex; gap: 12px; flex-wrap: wrap; }
  .btn { display: inline-block; padding: 12px 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 13px;
    background: var(--wht); color: #000; border: 0; cursor: pointer; }
  .btn:hover { background: #D6D6D6; }
  .btn.ghost { background: transparent; color: var(--wht); box-shadow: inset 0 0 0 2px var(--wht); }
  .btn.ghost:hover { color: var(--blu2); box-shadow: inset 0 0 0 2px var(--blu2); }
  .btn.giant { font-size: 18px; padding: 18px 28px; }

  /* tables */
  .rows { display: grid; gap: 0; border-top: 2px dotted #2a2a2a; }
  .row { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 2px dotted #2a2a2a; align-items: baseline; }
  .row .k { color: var(--red); font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
  .row .t { color: var(--wht); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
  .row .d { color: var(--blu2); font-size: 14px; margin-top: 2px; font-weight: 400; text-transform: none; letter-spacing: 0; }
  .row .v { color: var(--wht); font-family: var(--disp); font-size: 40px; line-height: 1; }
  #tickets .row { grid-template-columns: 1fr auto; }
  #show .row { grid-template-columns: 1fr; }
  @media (max-width: 640px) { .row { grid-template-columns: 72px 1fr; } .row .v { grid-column: 2; } #tickets .row { grid-template-columns: 1fr auto; } #tickets .row .v { grid-column: 2; } }

  /* poll bars */
  .poll { display: grid; gap: 16px; padding: 16px; border: 2px solid #2a2a2a; }
  .poll .q { color: var(--wht); font-weight: 600; }
  .bar { display: grid; grid-template-columns: 90px 1fr 52px; gap: 12px; align-items: center; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
  .bar .track { height: 18px; width: calc(round(down, 100%, 18px) - 4px); background: repeating-linear-gradient(90deg, #6B6B6B 0 14px, #0e0e0e 14px 18px); position: relative; }
  .bar .track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(90deg, var(--blue) 0 14px, #0e0e0e 14px 18px); }
  .bar .pct { color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) { .poll { padding: 16px 8px; } .bar { grid-template-columns: 64px 1fr 40px; gap: 8px; font-size: 12px; } }

  /* people */
  .people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 800px) { .people { grid-template-columns: repeat(2, 1fr); } }
  .person { display: grid; gap: 8px; align-content: start; }
  .person .ph { aspect-ratio: 1; overflow: hidden; border: 2px solid #2a2a2a; position: relative; background: #101010; }
  .person .ph img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.1) saturate(.85); }
  .person .ph.tbc { display: grid; place-items: center; text-align: center; color: var(--dim); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    background: repeating-linear-gradient(45deg, #101010 0 8px, #161616 8px 16px); }
  .person .nm { color: var(--red); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
  .person .rl { color: var(--wht); font-size: 13px; }
  .person .bio { color: var(--blu2); font-size: 13px; }

  /* photos */
  .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 700px) { .shots { grid-template-columns: 1fr; } }
  .shot { margin: 0; border: 2px solid #2a2a2a; background: #101010; display: grid; gap: 0; }
  .shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: contrast(1.08) saturate(.9); }
  .shot figcaption { padding: 8px; line-height: 16px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blu2); }

  /* email */
  .field { display: grid; grid-template-columns: 1fr auto; gap: 8px; max-width: 520px; position: relative; z-index: 61; }
  .field input { background: #000; color: var(--wht); border: 2px solid var(--dim); padding: 12px 14px; font: inherit; }
  .field input::placeholder { color: var(--dim); }
  .ok { color: var(--blu2); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
  .ok:empty { display: none; }

  /* footer + fastext */
  .foot { padding: 32px 12px 24px; display: grid; gap: 16px; color: var(--dim); font-size: 13px; }
  .foot img { width: 120px; }
  .ticker { position: fixed; left: 0; right: 0; bottom: 48px; z-index: 71; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.18) 2px 4px), #000; border-top: 2px solid #161616; overflow: hidden; white-space: nowrap; padding: 6px 0; line-height: 18px;
    color: var(--wht); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
  .ticker .track { display: inline-block; animation: roll 25s linear infinite; padding-left: 0; }
  .ticker .track span::after { content: "  ·  "; color: var(--dim); }
  @keyframes roll { to { transform: translateX(-50%); } }
  .fastext { position: fixed; left: 0; right: 0; bottom: 0; z-index: 72; display: grid; grid-template-columns: repeat(4, 1fr); }
  .fastext a { padding: 14px 8px; line-height: 20px; text-align: center; color: #000; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 12px;
    background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.18) 2px 4px); }
  .fastext a:focus-visible { outline: 2px solid #000; outline-offset: -5px; }
  .fastext a:nth-child(1) { background-color: var(--red); }
  .fastext a:nth-child(2) { background-color: var(--blue); }
  .fastext a:nth-child(3) { background-color: var(--red); }
  .fastext a:nth-child(4) { background-color: var(--blue); }
  .fastext a:hover { filter: brightness(1.12); }

  @media (max-width: 640px) {
    .hdr { grid-template-columns: auto 1fr auto; gap: 12px; padding: 8px 16px; }
    .hdr .live { display: none; }
    .hero-inner { padding: 48px 8px 32px; }
    .hero .lead { font-size: 15px; }
    .pg-body { padding: 24px 8px; }
    .pg-head { padding: 4px 8px; }
    .idx { gap: 0; }
    .idx a { padding: 12px 0; }
    .foot a, .note a { display: inline-block; padding: 12px 0; }
    .foot { padding: 32px 8px 24px; }
    .pg-body > .pg-head { margin: 0 -8px; }
    .screen { padding: 0 16px; }
  }
  @media (max-width: 400px) {
    .btn { padding: 12px 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cur { animation: none; }
    .ticker .track { animation: none; padding-left: 20px; }
  }

/* site additions */
a.ch:hover { color: var(--wht); }
.field .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ok.err { color: var(--red); }