/* ===========================================================
   minnesotavikings.io — /culture/lizzo-vikings/
   "Dated cultural clippings pinned to a Minneapolis map."
   Every class on this page is prefixed .cl-  — nothing here is
   shared with, or borrowed from, any other stylesheet.
   Light paper ground, purple map lines, gold date pins.

   All imagery is CSS/SVG drawing. There is no photograph of any
   named person on this page and none may be added without a
   licence and a positive identification.
   =========================================================== */

/* ---------- self-hosted expanded face: datelines and date pins ---------- */
@font-face{
  font-family:"Archivo Expanded CL";
  src:url("/assets/fonts/archivo-expanded-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo Expanded CL";
  src:url("/assets/fonts/archivo-expanded-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo Expanded CL";
  src:url("/assets/fonts/archivo-expanded-900.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap;
}

/* ===========================================================
   Tokens.  Contrast figures are measured against the paper
   ground --cl-paper (#f7f4ec) unless stated otherwise.
   =========================================================== */
.page-clippings{
  --cl-paper:#f7f4ec;        /* the page ground                       */
  --cl-paper-2:#fffdf7;      /* clipping stock, one shade brighter    */
  --cl-paper-3:#efeade;      /* recessed panels, table stripes        */
  --cl-edge:#cfc7b6;         /* torn paper edge                       */
  --cl-rule:#b9b4c6;         /* table + box borders (darker than #d2d2de) */
  --cl-rule-2:#8d879c;       /* heavier rules                         */

  --cl-ink:#23202c;          /* body text            15.9:1           */
  --cl-ink-2:#55506a;        /* secondary text        7.0:1           */
  --cl-ink-3:#6b6580;        /* captions              5.0:1           */

  --cl-purple:#4f2683;       /* map lines, headings   9.9:1 as text   */
  --cl-purple-deep:#3b1c63;
  --cl-purple-ink:#2a1450;
  --cl-purple-soft:#e6ddf3;  /* purple wash — fill only, never text   */
  --cl-purple-line:#7a4fc0;  /* line work only, not text              */

  --cl-gold:#44cee3;         /* PIN / RULE / FILL ONLY. Fails as text */
  --cl-gold-deep:#199fb3;    /* the darkest gold that still reads     */
  --cl-on-gold:#041c1f;      /* ink used on top of gold   11.1:1      */

  --cl-red:#a3121a;          /* correction marks + their labels 7.2:1 */
  --cl-red-soft:#fbe9e9;

  --cl-green:#175c34;        /* "Confirmed" side label      7.6:1     */
  --cl-green-soft:#e6f1e9;

  --cl-head:58px;            /* the site header is sticky at 58px     */
  --cl-shadow:0 1px 2px rgba(35,32,44,.13), 0 10px 22px -14px rgba(35,32,44,.4);
}

.page-clippings{background:var(--cl-paper);color:var(--cl-ink)}

/* Belt and braces: nothing on this page may push the page sideways.
   `clip` rather than `hidden` — `hidden` on <body> makes it a scroll
   container and kills the sticky jump bar. */
.page-clippings{overflow-x:clip}

.cl-main{display:block}

/* ---------- shared primitives ---------- */
.cl-sec{border-top:1px solid var(--cl-edge)}
.cl-sec .wrap{padding-top:clamp(30px,4.4vw,54px);padding-bottom:clamp(30px,4.4vw,54px)}
.cl-sec-alt{background:var(--cl-paper-3)}

.cl-kicker{
  font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--cl-purple);margin:0 0 10px;
}
.cl-h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3.5vw,38px);line-height:1.06;letter-spacing:.005em;
  color:var(--cl-purple-ink);margin:0 0 6px;
}
.cl-h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,2vw,22px);line-height:1.12;letter-spacing:.02em;
  color:var(--cl-purple-ink);margin:0 0 8px;
}
.cl-lede{font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.62;color:var(--cl-ink-2);margin:0 0 18px;max-width:70ch}
.cl-p{margin:0 0 13px;line-height:1.66;max-width:72ch}
.cl-p:last-child{margin-bottom:0}
.cl-note{
  font-size:13.5px;line-height:1.6;color:var(--cl-ink-2);
  border-left:3px solid var(--cl-purple-line);padding-left:12px;margin:16px 0 0;max-width:70ch;
}

.cl-ul{margin:0 0 14px;padding-left:0;list-style:none}
.cl-ul li{position:relative;padding-left:22px;margin-bottom:9px;line-height:1.6}
.cl-ul li::before{
  content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;
  background:var(--cl-gold);border:1px solid var(--cl-gold-deep);border-radius:50%;
}
.cl-ul li:last-child{margin-bottom:0}

/* Every inline SVG on this page is sized in CSS. An unsized inline
   <svg> renders at 300x150 and destroys these layouts. */
.page-clippings svg{display:block}

/* ===========================================================
   1. Breadcrumbs
   =========================================================== */
.cl-crumbs{background:var(--cl-purple-ink);border-bottom:1px solid var(--cl-purple-deep)}
.cl-crumbs .wrap{padding-top:4px;padding-bottom:4px}
.cl-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0;padding:0;list-style:none}
.cl-crumbs li{
  display:flex;align-items:center;gap:9px;min-width:0;min-height:44px;
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:#d5c9ec;
}
.cl-crumbs li+li::before{content:"/";color:#8a75b0}
.cl-crumbs a{display:flex;align-items:center;min-height:44px;
  color:#66d3e3;text-decoration:underline;text-underline-offset:3px}
.cl-crumbs a:hover{color:#fff}
.cl-crumbs [aria-current="page"]{color:#fff}

/* ===========================================================
   2. Separate banner.
   Minneapolis skyline at dusk. Purple stadium lighting left,
   concert-stage glow right, music waves travelling toward a
   football-field pattern. No lettering, no logo, no face.

   TO SWAP IN A REAL BANNER LATER: uncomment the single
   <img class="cl-banner-img"> line in the HTML. The rule below
   then retires the drawn version automatically.
   =========================================================== */
.cl-banner{position:relative;background:#0b0a14;border-bottom:3px solid var(--cl-gold);overflow:hidden}
.cl-banner-svg,.cl-banner-img{
  display:block;width:100%;height:clamp(150px,20vw,290px);object-fit:cover;
}
.cl-banner:has(.cl-banner-img) .cl-banner-art{display:none}

/* ===========================================================
   3. Masthead — explainer label, H1, dates
   =========================================================== */
.cl-mast .wrap{padding-top:clamp(24px,3.4vw,40px);padding-bottom:clamp(22px,3vw,34px)}
.cl-flags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.cl-flag{
  display:inline-flex;align-items:center;gap:7px;min-height:28px;
  font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  padding:5px 11px;border-radius:2px;
}
.cl-flag-explainer{background:var(--cl-gold);color:var(--cl-on-gold);border:1px solid var(--cl-gold-deep)}
.cl-flag-topic{background:var(--cl-purple);color:#fff}
.cl-flag svg{width:14px;height:14px;flex:none}

.cl-h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(29px,5.4vw,58px);line-height:1;letter-spacing:.004em;
  color:var(--cl-purple-ink);margin:0 0 14px;max-width:20ch;
}
.cl-dates{
  display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 0;padding:12px 0 0;
  border-top:1px solid var(--cl-edge);
  font-size:13px;color:var(--cl-ink-2);
}
.cl-dates div{display:flex;gap:7px;min-width:0;flex-wrap:wrap}
.cl-dates dt{
  font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cl-ink-3);
}
.cl-dates dd{margin:0;color:var(--cl-ink)}

/* ---------- sticky section jump bar (sits under the 58px header) ---------- */
.cl-jump{
  position:sticky;top:var(--cl-head);z-index:9;
  background:var(--cl-paper-2);border-top:1px solid var(--cl-edge);
  border-bottom:1px solid var(--cl-edge);
}
.cl-jump .wrap{padding-top:0;padding-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cl-jump ul{display:flex;gap:4px;margin:0;padding:0;list-style:none;min-width:0}
.cl-jump li{flex:none;min-width:0}
.cl-jump a{
  display:flex;align-items:center;min-height:44px;padding:0 12px;
  font-family:"Archivo Expanded CL",var(--display);font-weight:600;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cl-purple);text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent;
}
.cl-jump a:hover{border-bottom-color:var(--cl-gold);color:var(--cl-purple-ink)}

/* ===========================================================
   4. Opening answer block
   =========================================================== */
.cl-open{background:var(--cl-paper-2);border-top:1px solid var(--cl-edge);border-bottom:1px solid var(--cl-edge)}
.cl-open .wrap{padding-top:clamp(26px,3.6vw,44px);padding-bottom:clamp(26px,3.6vw,44px)}
.cl-open-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3vw,42px);align-items:start}
.cl-open-grid > *{min-width:0}
@media (max-width:860px){.cl-open-grid{grid-template-columns:minmax(0,1fr)}}

/* the purple-outlined quick-answer clipping */
.cl-quick{
  position:relative;background:var(--cl-paper);
  border:3px solid var(--cl-purple);border-radius:2px;
  padding:clamp(18px,2.4vw,26px);box-shadow:var(--cl-shadow);min-width:0;
}
.cl-quick::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--cl-gold);
}
.cl-quick h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,2.1vw,23px);line-height:1.12;color:var(--cl-purple-ink);
  margin:8px 0 12px;
}
.cl-quick .cl-kicker{margin-top:4px}

/* ===========================================================
   5. Simplified Minneapolis map + three connections
   =========================================================== */
.cl-map-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.cl-map-grid > *{min-width:0}
@media (max-width:900px){.cl-map-grid{grid-template-columns:minmax(0,1fr)}}

.cl-mapfig{margin:0;min-width:0}
.cl-mapbox{
  background:var(--cl-paper-2);border:1px solid var(--cl-rule);border-radius:3px;
  padding:14px;box-shadow:var(--cl-shadow);
}
.cl-map-svg{width:100%;height:auto;aspect-ratio:7/5}
.cl-mapfig figcaption{
  margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--cl-ink-2);
}
.cl-mapfig figcaption b{
  display:block;font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cl-purple);
  margin-bottom:3px;
}

.cl-conns{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cl-conn{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;
  background:var(--cl-paper-2);border:1px solid var(--cl-rule);border-left:5px solid var(--cl-purple);
  border-radius:2px;padding:13px 14px;min-width:0;
}
.cl-conn > *{min-width:0}
.cl-conn-n{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--cl-gold);border:2px solid var(--cl-gold-deep);color:var(--cl-on-gold);
  font-family:"Archivo Expanded CL",var(--display);font-weight:900;font-size:14px;
}
.cl-conn h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:16px;letter-spacing:.02em;color:var(--cl-purple-ink);margin:0 0 4px;
}
.cl-conn h3 a{display:inline-flex;align-items:center;min-height:44px;
  color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--cl-purple-line)}
.cl-conn h3 a:hover{color:var(--cl-purple)}
.cl-conn p{margin:0;font-size:13.5px;line-height:1.56;color:var(--cl-ink-2)}
.cl-conn-line{
  display:inline-flex;align-items:center;gap:7px;margin-top:7px;
  font-family:"Archivo Expanded CL",var(--display);font-weight:600;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--cl-ink-3);
}
.cl-conn-swatch{width:22px;height:0;border-top:3px solid var(--cl-purple-line);flex:none}
.cl-conn-2 .cl-conn-swatch{border-top-style:dashed}
.cl-conn-3 .cl-conn-swatch{border-top-style:dotted;border-top-width:4px}
/* the three connections are also distinguished in the SVG by
   solid / dashed / dotted stroke, and named in text above. */
.cl-conn.is-lit{background:#fffaea;border-left-color:var(--cl-gold-deep)}

/* ===========================================================
   6. Three overlapping newspaper clippings
   Overlap is decorative only. Below 900px it is removed
   entirely and the clippings stack in document order.
   =========================================================== */
.cl-clips{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.cl-clip{
  position:relative;min-width:0;
  background:var(--cl-paper-2);
  border:1px solid var(--cl-edge);
  border-radius:2px;
  padding:clamp(18px,2.4vw,28px);
  box-shadow:var(--cl-shadow);
}
.cl-clip::after{ /* torn top edge, decorative */
  content:"";position:absolute;left:0;right:0;top:-1px;height:4px;
  background:repeating-linear-gradient(90deg,var(--cl-edge) 0 7px,transparent 7px 12px);
}
.cl-clip-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin:0 0 12px;min-width:0}
.cl-clip h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,2.4vw,27px);line-height:1.08;letter-spacing:.01em;
  color:var(--cl-purple-ink);margin:0;min-width:0;
}
.cl-dateline{
  display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 14px;padding:8px 0;
  border-top:2px solid var(--cl-purple);border-bottom:1px solid var(--cl-edge);
}
.cl-dateline div{display:flex;gap:7px;flex-wrap:wrap;min-width:0}
.cl-dateline dt{
  font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--cl-ink-3);
}
.cl-dateline dd{margin:0;font-family:"Archivo Expanded CL",var(--display);font-weight:600;font-size:12.5px;color:var(--cl-purple)}

.cl-labels{
  list-style:none;margin:16px 0 0;padding:13px 15px;
  background:var(--cl-purple-soft);border-radius:2px;display:grid;gap:8px;
}
.cl-labels li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:4px 10px;font-size:13.5px;line-height:1.5}
.cl-labels li > *{min-width:0}
.cl-labels b{
  font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--cl-purple-deep);
  padding-top:3px;
}

/* Decorative shingle, wide screens only. Applied with transforms and
   generous side gutters so nothing can reach the viewport edge. */
@media (min-width:1000px){
  .cl-clips{gap:0;padding:10px 34px 22px}
  .cl-clip{width:calc(100% - 34px)}
  .cl-clip-1{transform:rotate(-.7deg);z-index:3}
  .cl-clip-2{transform:rotate(.55deg) translateX(30px);margin-top:-14px;z-index:2}
  .cl-clip-3{transform:rotate(-.4deg);margin-top:-14px;z-index:1}
  .cl-clip:focus-within,.cl-clip:hover{z-index:6}
}

/* ===========================================================
   7. Sound wave 2017 -> 2025
   =========================================================== */
.cl-wavefig{margin:0 0 24px;min-width:0}
.cl-wave-svg{width:100%;height:auto;aspect-ratio:6/1;min-height:70px}
.cl-wavefig figcaption{margin-top:8px;font-size:12.5px;color:var(--cl-ink-2)}

.cl-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:none}
.cl-step{
  display:grid;grid-template-columns:154px minmax(0,1fr);gap:8px 20px;
  padding:16px 0;border-top:1px solid var(--cl-edge);min-width:0;
}
.cl-step > *{min-width:0}
.cl-step:first-child{border-top:2px solid var(--cl-purple)}
.cl-step h3{
  font-family:"Archivo Expanded CL",var(--display);font-weight:900;
  font-size:clamp(17px,1.9vw,21px);line-height:1.14;color:var(--cl-purple);
  margin:0;letter-spacing:.01em;overflow-wrap:break-word;
}
.cl-step p{margin:0;line-height:1.62}
@media (max-width:620px){.cl-step{grid-template-columns:minmax(0,1fr)}}

.cl-callout{
  margin:24px 0 0;padding:18px 20px;background:var(--cl-purple);color:#fff;
  border-radius:2px;border-left:6px solid var(--cl-gold);
  font-size:clamp(15px,1.6vw,17px);line-height:1.6;max-width:74ch;
}

/* ===========================================================
   8. Radio dial — Minneapolis to Green Bay
   =========================================================== */
.cl-dialfig{margin:0 0 22px;min-width:0}
.cl-dial-svg{width:100%;height:auto;aspect-ratio:5/1;min-height:88px}
.cl-dialfig figcaption{margin-top:9px;font-size:12.5px;color:var(--cl-ink-2)}

.cl-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:22px 0 0}
.cl-two > *{min-width:0}
.cl-col{
  background:var(--cl-paper-2);border:1px solid var(--cl-rule);border-top:5px solid var(--cl-purple);
  border-radius:2px;padding:16px 17px;min-width:0;
}
.cl-col-gb{border-top-color:var(--cl-gold-deep)}
.cl-col h3{margin-top:0}
.cl-col p{margin:0;line-height:1.6}

/* ===========================================================
   9. Fact-check box — Confirmed / Not confirmed
   Both columns carry a word label and a distinct glyph.
   =========================================================== */
.cl-fact{
  background:var(--cl-paper-2);border:2px solid var(--cl-rule-2);border-radius:3px;
  box-shadow:var(--cl-shadow);overflow:hidden;
}
.cl-fact-head{
  background:var(--cl-purple-ink);color:#fff;padding:13px 18px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.cl-fact-head h3{
  margin:0;color:#fff;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,2vw,21px);letter-spacing:.03em;min-width:0;
}
.cl-fact-head svg{width:19px;height:19px;flex:none;color:var(--cl-gold)}
.cl-fact-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:0}
.cl-fact-cols > *{min-width:0}
.cl-fact-col{padding:17px 18px;border-top:1px solid var(--cl-rule)}
.cl-fact-col + .cl-fact-col{border-left:1px solid var(--cl-rule)}
@media (max-width:614px){.cl-fact-col + .cl-fact-col{border-left:0}}
.cl-fact-yes{background:var(--cl-green-soft)}
.cl-fact-no{background:var(--cl-red-soft)}
.cl-fact-label{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;
  font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
}
.cl-fact-yes .cl-fact-label{color:var(--cl-green)}
.cl-fact-no .cl-fact-label{color:var(--cl-red)}
.cl-fact-label svg{width:17px;height:17px;flex:none}
.cl-fact-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cl-fact-list li{
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:9px;
  font-size:14px;line-height:1.55;
}
.cl-fact-list li > *{min-width:0}
.cl-fact-list svg{width:17px;height:17px;margin-top:3px;flex:none}
.cl-fact-yes .cl-fact-list svg{color:var(--cl-green)}
.cl-fact-no .cl-fact-list svg{color:var(--cl-red)}
.cl-fact-answer{padding:17px 18px;border-top:2px solid var(--cl-purple);background:var(--cl-paper-3)}
.cl-fact-answer p{margin:0;line-height:1.62}

/* ===========================================================
   10. Cast strip — text and abstract illustration only.
   There is no portrait of anyone on this page.
   =========================================================== */
.cl-cast{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cl-cast > *{min-width:0}
.cl-cast li{
  background:var(--cl-paper-2);border:1px solid var(--cl-rule);border-radius:2px;
  padding:16px;display:grid;grid-template-rows:auto auto 1fr;gap:9px;min-width:0;
}
.cl-cast-mark{width:52px;height:52px;flex:none}
.cl-cast h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:17px;letter-spacing:.02em;color:var(--cl-purple-ink);margin:0;
}
.cl-cast p{margin:0;font-size:13.5px;line-height:1.55;color:var(--cl-ink-2)}
.cl-cast-role{
  display:inline-block;font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--cl-purple);color:#fff;padding:4px 8px;border-radius:2px;justify-self:start;
}
.cl-cast-role-artist{background:var(--cl-gold);color:var(--cl-on-gold)}

/* ===========================================================
   11. Balance scale — Support / Criticism
   =========================================================== */
.cl-scalefig{margin:0 0 20px;min-width:0}
.cl-scale-svg{width:100%;height:auto;aspect-ratio:16/7;min-height:130px;max-height:300px}
.cl-scalefig figcaption{margin-top:9px;font-size:12.5px;color:var(--cl-ink-2)}
.cl-sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px;margin:0 0 22px}
.cl-sides > *{min-width:0}
.cl-side{border:1px solid var(--cl-rule);border-radius:2px;padding:15px 16px;background:var(--cl-paper-2);min-width:0}
.cl-side-support{border-top:5px solid var(--cl-green)}
.cl-side-criticism{border-top:5px solid var(--cl-red)}
.cl-side-label{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 9px;
  font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
}
.cl-side-support .cl-side-label{color:var(--cl-green)}
.cl-side-criticism .cl-side-label{color:var(--cl-red)}
.cl-side-label svg{width:16px;height:16px;flex:none}
.cl-side p{margin:0;font-size:14px;line-height:1.6}

.cl-strands{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cl-strand{
  display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;
  border-left:4px solid var(--cl-purple-line);background:var(--cl-paper-2);
  border-top:1px solid var(--cl-rule);border-right:1px solid var(--cl-rule);
  border-bottom:1px solid var(--cl-rule);padding:13px 15px;min-width:0;
}
.cl-strand > *{min-width:0}
.cl-strand-n{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--cl-purple-soft);color:var(--cl-purple-deep);
  font-family:"Archivo Expanded CL",var(--display);font-weight:900;font-size:13px;
}
.cl-strand h3{font-size:15px;margin:0 0 4px}
.cl-strand p{margin:0;font-size:13.5px;line-height:1.55;color:var(--cl-ink-2)}

/* ===========================================================
   12. Venue poster — Minneapolis years
   =========================================================== */
.cl-poster{
  background:var(--cl-purple-ink);color:#fff;border-radius:3px;overflow:hidden;
  border:1px solid var(--cl-purple-deep);box-shadow:var(--cl-shadow);
}
.cl-poster-top{position:relative;background:var(--cl-purple-deep);padding:0}
.cl-poster-svg{width:100%;height:auto;aspect-ratio:8/1;min-height:56px}
.cl-poster-body{padding:clamp(18px,2.6vw,30px)}
.cl-poster h3{color:#fff;margin-top:0}
.cl-poster .cl-kicker{color:#66d3e3}
.cl-poster p{margin:0 0 12px;line-height:1.66;color:#e9e3f5;max-width:70ch}
.cl-poster p:last-child{margin-bottom:0}
.cl-poster-rule{border:0;border-top:2px solid var(--cl-gold);margin:16px 0;opacity:.85}

/* ===========================================================
   13. Timeline with circular date stamps and source slots
   =========================================================== */
.cl-time{list-style:none;margin:0;padding:0;position:relative}
.cl-time::before{
  content:"";position:absolute;left:33px;top:12px;bottom:12px;width:3px;
  background:linear-gradient(180deg,var(--cl-purple-line),var(--cl-purple));
  border-radius:2px;
}
.cl-tev{
  position:relative;display:grid;grid-template-columns:68px minmax(0,1fr);gap:16px;
  padding:0 0 22px;min-width:0;
}
.cl-tev > *{min-width:0}
.cl-pin{
  position:relative;z-index:1;width:68px;height:68px;border-radius:50%;
  background:var(--cl-gold);border:3px solid var(--cl-gold-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--cl-on-gold);text-align:center;line-height:1.05;
  font-family:"Archivo Expanded CL",var(--display);font-weight:900;
  box-shadow:0 2px 0 rgba(35,32,44,.18);
}
.cl-pin .cl-pin-y{font-size:15px;letter-spacing:.01em}
.cl-pin .cl-pin-d{font-size:9px;font-weight:700;letter-spacing:.06em;margin-top:2px}
.cl-tev-body{
  background:var(--cl-paper-2);border:1px solid var(--cl-rule);border-radius:2px;
  padding:14px 16px;min-width:0;
}
.cl-tev-body h3{
  font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--cl-purple);
  margin:0 0 6px;
}
.cl-tev-body p{margin:0 0 12px;line-height:1.6}
.cl-srcs{
  list-style:none;margin:0;padding:11px 0 0;border-top:1px dashed var(--cl-rule);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:6px 18px;
}
.cl-srcs > *{min-width:0}
.cl-srcs li{display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;min-width:0;font-size:12.5px}
.cl-src-k{
  font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cl-ink-3);flex:none;
}
.cl-src-v{color:var(--cl-ink)}
.cl-src-none{
  color:var(--cl-red);font-weight:700;
  border-bottom:2px dotted var(--cl-red);
}
@media (max-width:560px){
  .cl-time::before{left:25px}
  .cl-tev{grid-template-columns:52px minmax(0,1fr);gap:12px}
  .cl-pin{width:52px;height:52px;border-width:2px}
  .cl-pin .cl-pin-y{font-size:12px}
  .cl-pin .cl-pin-d{font-size:7.5px}
}

/* ===========================================================
   14. Source update desk — newsroom table
   =========================================================== */
.cl-tablewrap{overflow-x:auto;border:1px solid var(--cl-rule);border-radius:2px;background:var(--cl-paper-2)}
.cl-table{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.cl-table caption{
  caption-side:top;text-align:left;padding:12px 14px;
  font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cl-purple);
  border-bottom:1px solid var(--cl-rule);
}
.cl-table th,.cl-table td{
  border:1px solid var(--cl-rule);padding:11px 13px;text-align:left;vertical-align:top;line-height:1.5;
}
.cl-table thead th{
  background:var(--cl-purple);color:#fff;border-color:var(--cl-purple-deep);
  font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
}
.cl-table tbody tr.cl-row-alt td{background:var(--cl-paper-3)}
.cl-table .cl-empty{text-align:left;color:var(--cl-ink-2);background:var(--cl-paper-3)}
.cl-table .cl-empty b{
  display:block;font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--cl-red);margin-bottom:5px;
}

.cl-types{list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.cl-types > *{min-width:0}
.cl-types li{
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;
  background:var(--cl-paper-2);border:1px solid var(--cl-rule);border-radius:2px;
  padding:11px 13px;font-size:13.5px;line-height:1.5;min-width:0;
}
.cl-types li > *{min-width:0}
.cl-types svg{width:16px;height:16px;margin-top:2px;color:var(--cl-purple);flex:none}

/* ===========================================================
   15. "What this page should not claim"
   HIGHEST-RISK ELEMENT ON THE PAGE.
   The red correction mark is never the only signal. Every row
   also carries the words "Not claimed", the whole block is
   introduced in text, and the list is inside a labelled region.
   =========================================================== */
.cl-nc{
  border:2px solid var(--cl-red);border-radius:3px;background:var(--cl-paper-2);
  box-shadow:var(--cl-shadow);overflow:hidden;
}
.cl-nc-head{background:var(--cl-red);color:#fff;padding:13px 18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cl-nc-head svg{width:19px;height:19px;flex:none}
.cl-nc-head h3{margin:0;color:#fff;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(16px,2vw,21px);letter-spacing:.03em;min-width:0}
.cl-nc-intro{padding:15px 18px 0;margin:0;font-size:14px;line-height:1.6;color:var(--cl-ink);max-width:78ch}
.cl-nc-list{list-style:none;margin:0;padding:15px 18px 18px;display:grid;gap:10px}
.cl-nc-list li{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;
  border:1px solid var(--cl-rule);border-left:5px solid var(--cl-red);border-radius:2px;
  background:var(--cl-red-soft);padding:11px 13px;min-width:0;
}
.cl-nc-list li > *{min-width:0}
.cl-nc-mark{width:24px;height:24px;color:var(--cl-red);flex:none;margin-top:1px}
.cl-nc-tag{
  display:inline-block;font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--cl-red);color:#fff;padding:4px 8px;border-radius:2px;margin-bottom:6px;
}
.cl-nc-text{display:block;font-size:14.5px;line-height:1.55;color:var(--cl-ink)}
.cl-nc-foot{
  margin:0;padding:15px 18px;border-top:1px solid var(--cl-rule);background:var(--cl-paper-3);
  font-size:13.5px;line-height:1.6;color:var(--cl-ink-2);
}
.cl-nc-foot b{
  display:block;font-family:"Archivo Expanded CL",var(--display);font-weight:700;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cl-purple);margin-bottom:4px;
}

/* ===========================================================
   16. FAQ — native <details>, shipped open, closed by script
   =========================================================== */
.cl-faq{display:grid;gap:10px}
.cl-faq details{
  border:1px solid var(--cl-rule);border-left:5px solid var(--cl-purple);
  border-radius:2px;background:var(--cl-paper-2);min-width:0;
}
.cl-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:44px;padding:12px 15px;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:15px;letter-spacing:.02em;color:var(--cl-purple-ink);
}
.cl-faq summary::-webkit-details-marker{display:none}
.cl-faq summary:hover{background:var(--cl-purple-soft)}
.cl-faq summary .cl-chev{width:18px;height:18px;flex:none;color:var(--cl-purple);transition:transform var(--t,.22s) ease}
.cl-faq details[open] summary .cl-chev{transform:rotate(180deg)}
.cl-faq .cl-faq-a{padding:0 15px 14px;margin:0;line-height:1.66;max-width:74ch}

/* ===========================================================
   17. Final overlapping papers
   =========================================================== */
.cl-final{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cl-final > *{min-width:0}
.cl-final li{
  background:var(--cl-paper-2);border:1px solid var(--cl-edge);border-top:6px solid var(--cl-gold);
  border-radius:2px;padding:17px 18px;box-shadow:var(--cl-shadow);min-width:0;
}
.cl-final h3{
  font-family:"Archivo Expanded CL",var(--display);font-weight:900;
  font-size:clamp(18px,2.3vw,24px);letter-spacing:.02em;color:var(--cl-purple);margin:0 0 8px;
}
.cl-final p{margin:0;line-height:1.6}
@media (min-width:1000px){
  /* The overlap is decorative: the covering card only ever sits over
     the next card's LEFT PADDING, never over its text. The pulled-in
     margin and the extra padding-left are the same distance. */
  .cl-final{gap:0;padding:8px 26px 16px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .cl-final li:nth-child(1){transform:rotate(-.8deg);z-index:3}
  .cl-final li:nth-child(2){transform:rotate(.5deg) translateY(10px);margin-left:-26px;padding-left:44px;z-index:2}
  .cl-final li:nth-child(3){transform:rotate(-.35deg) translateY(20px);margin-left:-26px;padding-left:44px;z-index:1}
  .cl-final li:hover,.cl-final li:focus-within{z-index:6}
}

/* ===========================================================
   18. Related pages
   =========================================================== */
.cl-rel{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cl-rel > *{min-width:0}
.cl-rel a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;
  background:var(--cl-paper-2);border:1px solid var(--cl-rule);border-left:5px solid var(--cl-purple);
  border-radius:2px;padding:14px 15px;text-decoration:none;color:var(--cl-purple-ink);min-width:0;
}
.cl-rel a:hover{background:var(--cl-purple-soft);border-left-color:var(--cl-gold-deep)}
.cl-rel a > span{min-width:0}
.cl-rel b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:15px;letter-spacing:.02em}
.cl-rel small{display:block;font-size:12.5px;color:var(--cl-ink-2);line-height:1.45;margin-top:2px}
.cl-rel svg{width:18px;height:18px;flex:none;color:var(--cl-purple)}

/* A destination that does not exist is never a link. */
.cl-nolink{
  display:inline-block;border-bottom:2px dotted var(--cl-ink-3);color:var(--cl-ink-2);
}

/* ===========================================================
   19. Motion

   There is deliberately NO scripted reveal on this page. Nothing
   here starts at opacity 0 waiting for JavaScript: the date pins,
   the timeline and the clippings are painted by the first render
   and stay painted. The only transitions are hover/open states.
   =========================================================== */
.cl-conn{transition:background var(--t-fast,.16s) ease, border-color var(--t-fast,.16s) ease}
#cl-line-1,#cl-line-2,#cl-line-3{transition:stroke-width var(--t-fast,.16s) ease}

@media (prefers-reduced-motion:reduce){
  .cl-conn,#cl-line-1,#cl-line-2,#cl-line-3{transition:none !important}
  .cl-pin{transition:none !important}
  .cl-clip,.cl-final li{transition:none !important}
  .cl-faq summary .cl-chev{transition:none !important}
  .page-clippings *,
  .page-clippings *::before,
  .page-clippings *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

/* ===========================================================
   20. Narrow screens — the clipping test
   =========================================================== */
@media (max-width:620px){
  .cl-clip-head{gap:4px 10px}
  .cl-labels li{grid-template-columns:minmax(0,1fr)}
  .cl-dates{gap:6px 14px}
}
@media (max-width:520px){
  .cl-h1{font-size:clamp(26px,8vw,34px)}
  .cl-quick{padding:16px}
  .cl-nc-list li{grid-template-columns:22px minmax(0,1fr);gap:9px;padding:10px 11px}
  .cl-nc-mark{width:20px;height:20px}
  .cl-fact-list li{grid-template-columns:18px minmax(0,1fr);gap:8px}
  .cl-srcs{grid-template-columns:minmax(0,1fr)}
}

/* ---------- small utilities (kept so no inline style is needed) ---------- */
.cl-mt{margin-top:26px}
.cl-mt-s{margin-top:16px}
.cl-side .cl-side-p2{margin-top:10px}

/* ---------- FAQ question inside <summary> ---------- */
.cl-faq-q{
  margin:0;min-width:0;font:inherit;color:inherit;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:15px;letter-spacing:.02em;line-height:1.25;
}
/* Content pass 2026-09-16: bulleted lists inside the Lizzo article */
.seo-article .cl-list{list-style:disc;margin:16px 0;padding-left:1.4em}
.seo-article .cl-list li{margin:0 0 10px;line-height:1.65}