/* ==========================================================================
   Digital Gossip — website design system  (v1, October 2026)
   Fonts: Archivo (variable, OFL) for UI + headlines, Newsreader (variable, OFL) for reading.
   ========================================================================== */

@font-face{font-family:"Archivo";src:url("../fonts/Archivo-Variable.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/Archivo-Italic-Variable.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/Newsreader-Variable.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/Newsreader-Italic-Variable.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}

:root{
  /* Brand colour */
  --blue:#2233FF;      /* Link Blue — primary */
  --blue-deep:#1622C4; /* hover / pressed */
  --pink:#FF9EC4;      /* Whisper Pink — Overheard, highlights */
  --pink-soft:#FFE4EF;
  --ink:#10133A;       /* text, dark surfaces */
  --mist:#EEF0FF;      /* quiet panels */
  --white:#FFFFFF;
  --slate:#545A78;     /* secondary text (7.0:1 on white) */
  --rule:#D9DCEE;
  --ok:#0F7B4E; --warn:#A35A00; --no:#B3123F; /* status, always paired with text */

  /* Type */
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --cond:72%; /* headline width axis */

  /* Scale (1.25 major third, rounded) */
  --t-xs:.8125rem; --t-s:.9375rem; --t-m:1.0625rem; --t-l:1.375rem; --t-xl:1.75rem; --t-2xl:2.25rem; --t-3xl:3rem; --t-4xl:4rem;

  --wrap:1240px; --gut:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font:400 var(--t-m)/1.5 var(--sans);font-optical-sizing:auto}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.on-dark :focus-visible,.foot :focus-visible{outline-color:var(--pink)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:99}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Headline type ---------- */
.h{font-family:var(--sans);font-stretch:var(--cond);font-weight:800;letter-spacing:-.012em;line-height:1.02;margin:0;text-wrap:balance}
.h-4xl{font-size:clamp(2.5rem,5.4vw,var(--t-4xl))}
.h-3xl{font-size:clamp(2.1rem,4vw,var(--t-3xl))}
.h-2xl{font-size:clamp(1.75rem,3vw,var(--t-2xl))}
.h-xl{font-size:var(--t-xl);line-height:1.06}
.h-l{font-size:var(--t-l);line-height:1.1}
.h-m{font-size:1.1875rem;line-height:1.12}
.dek{font-family:var(--serif);font-size:1.25rem;line-height:1.45;color:var(--slate);margin:.6em 0 0}
.meta{font-size:var(--t-xs);color:var(--slate);line-height:1.4}
.meta b{color:var(--ink);font-weight:600}

/* ---------- Category tag: a tiny speech bubble with the pixel tail ---------- */
.tag{display:inline-block;position:relative;font:600 var(--t-xs)/1 var(--sans);color:var(--white);background:var(--blue);padding:5px 8px 5px;border-radius:6px 6px 6px 0;margin-bottom:12px}
.tag::after{content:"";position:absolute;left:0;bottom:-6px;width:6px;height:6px;background:inherit;clip-path:polygon(0 0,100% 0,100% 50%,50% 50%,50% 100%,0 100%)}
.tag--pink{background:var(--pink);color:var(--ink)}
.tag--ink{background:var(--ink)}
.tag--ghost{background:var(--mist);color:var(--ink)}
a.tag:hover{color:var(--white);background:var(--blue-deep)}

/* ---------- Status chips (Overheard) ---------- */
.status{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font:600 var(--t-xs)/1 var(--sans);padding:5px 8px;border:1.5px solid currentColor;border-radius:4px}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status--heard{color:var(--ink)}
.status--checking{color:var(--warn)}
.status--confirmed{color:var(--ok)}
.status--denied{color:var(--no)}

/* ---------- Buttons ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font:700 var(--t-s)/1 var(--sans);padding:13px 18px;border:2px solid var(--ink);background:var(--ink);color:var(--white);cursor:pointer}
.btn:hover{background:var(--blue);border-color:var(--blue);color:var(--white)}
.btn--blue{background:var(--blue);border-color:var(--blue)}
.btn--blue:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn--pink{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.btn--pink:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn--sm{padding:9px 12px;font-size:var(--t-xs)}
.btn .dots{display:inline-flex;gap:3px}.btn .dots i{width:4px;height:4px;border-radius:50%;background:currentColor}

/* ---------- Utility bar ---------- */
.util{background:var(--ink);color:#C9CCE6;font-size:var(--t-xs)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:16px}
.util a{color:#fff}.util a:hover{color:var(--pink)}
.util nav{display:flex;gap:20px}
.util .tip{color:var(--pink);font-weight:600}

/* ---------- Masthead ---------- */
.mast{border-bottom:1px solid var(--rule)}
.mast .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding-top:22px;padding-bottom:18px}
.mast .logo img{height:54px;width:auto}
.mast .line{font:500 var(--t-s)/1.3 var(--serif);font-style:italic;color:var(--slate);border-left:2px solid var(--pink);padding-left:14px;max-width:24ch}
.mast .acts{display:flex;gap:10px;align-items:center}
.search{display:flex;align-items:center;border:2px solid var(--ink);height:44px}
.search input{border:0;font:500 var(--t-s) var(--sans);padding:0 12px;width:210px;height:100%;background:transparent;color:var(--ink)}
.search input:focus{outline:none}.search:focus-within{border-color:var(--blue)}
.search button{border:0;background:transparent;height:100%;padding:0 12px;cursor:pointer;color:var(--ink)}
.burger{display:none;border:2px solid var(--ink);background:none;height:44px;width:44px;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--ink);margin:4px auto}

/* ---------- Section nav ---------- */
.nav{border-bottom:3px solid var(--ink);background:var(--white);position:sticky;top:0;z-index:20}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav a{display:block;font:700 var(--t-s)/1 var(--sans);font-stretch:85%;padding:15px 12px 13px;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-3px}
.nav a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.nav a[aria-current]{border-bottom-color:var(--blue);color:var(--blue)}
.nav .oh a{background:var(--pink);color:var(--ink);border-bottom-color:var(--pink)}
.nav .oh a:hover{background:var(--ink);color:var(--pink);border-bottom-color:var(--ink)}
.nav li:first-child a{padding-left:0}

/* ---------- Live strip: "someone's typing…" (the one moving thing) ---------- */
.live{background:var(--mist);font-size:var(--t-s)}
.live .wrap{display:flex;align-items:center;gap:14px;min-height:46px}
.typing{display:inline-flex;align-items:center;gap:4px;background:var(--blue);padding:7px 9px;border-radius:10px 10px 10px 0;flex:none}
.typing i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.4s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.live strong{font-weight:700;flex:none}
.live a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.live time{color:var(--slate);flex:none;margin-left:auto;font-size:var(--t-xs)}

/* ---------- Ads ---------- */
.ad{display:grid;place-items:center;background:repeating-linear-gradient(-45deg,var(--mist) 0 10px,#F6F7FF 10px 20px);color:var(--slate);font:500 var(--t-xs)/1.3 var(--sans);text-align:center;border:1px solid var(--rule)}
.ad span{background:var(--white);padding:4px 8px}
.ad--lb{height:90px;max-width:970px;margin:20px auto}
.ad--mpu{width:300px;height:250px;max-width:100%}
.ad--hp{width:300px;height:600px;max-width:100%}

/* ---------- Section heads with the pixel-step rule ---------- */
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 18px;padding-bottom:10px;position:relative}
.sh::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--ink)}
.sh::before{content:"";position:absolute;left:0;bottom:-8px;width:12px;height:8px;background:var(--ink);clip-path:polygon(0 0,100% 0,100% 50%,50% 50%,50% 100%,0 100%)}
.sh h2{font:800 var(--t-xl)/1 var(--sans);font-stretch:var(--cond);margin:0;letter-spacing:-.01em}
.sh a{font:600 var(--t-s)/1 var(--sans);color:var(--blue)}
.sh a:hover{text-decoration:underline}
.sh--blue::after,.sh--blue::before{background:var(--blue)}
.sh--light::after,.sh--light::before{background:var(--white)}
.sh--light h2,.sh--light a{color:var(--white)}

/* ---------- Grid ---------- */
.g{display:grid;gap:var(--gut)}
.g-12{grid-template-columns:repeat(12,1fr)}
.s-8{grid-column:span 8}.s-7{grid-column:span 7}.s-6{grid-column:span 6}.s-5{grid-column:span 5}.s-4{grid-column:span 4}.s-3{grid-column:span 3}.s-9{grid-column:span 9}
.sec{padding-top:36px;padding-bottom:36px}
.sec--tight{padding-top:24px;padding-bottom:24px}

/* ---------- Story units ---------- */
.story a:hover .h{color:var(--blue)}
.story .img{position:relative;overflow:hidden;margin-bottom:12px;background:var(--mist)}
.story .img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.story .h{margin-bottom:6px}
.story p.sum{font-family:var(--serif);color:var(--slate);margin:0 0 8px;font-size:1.0625rem;line-height:1.45}
.lead .img img{aspect-ratio:16/9}
.lead .h{font-size:clamp(2.2rem,4.4vw,3.5rem)}
.lead .dek{margin-bottom:10px}
.also{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.also a{font:700 1.0625rem/1.2 var(--sans);font-stretch:88%;display:block;padding-left:14px;border-left:3px solid var(--blue)}
@media (max-width:760px){.also{grid-template-columns:1fr}}
.credit{position:absolute;right:0;bottom:0;background:rgba(16,19,58,.72);color:#fff;font-size:11px;padding:3px 6px}

/* text-only river */
.river{list-style:none;margin:0;padding:0}
.river li{padding:14px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:1fr;gap:4px}
.river li:first-child{padding-top:0}
.river time{font:700 var(--t-xs)/1.5 var(--sans);color:var(--blue)}
.river a{font:700 1.0625rem/1.2 var(--sans);font-stretch:88%}
.river .meta{margin-top:4px}

/* horizontal compact */
.row{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--rule)}
.row:first-of-type{padding-top:0}
.row img{aspect-ratio:1/1;object-fit:cover;width:120px}
.row .h{font-size:1.0625rem}

/* most read: genuinely ranked, so numbered */
.ranked{list-style:none;margin:0;padding:0;counter-reset:r}
.ranked li{counter-increment:r;display:grid;grid-template-columns:44px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--rule)}
.ranked li::before{content:counter(r);font:800 2.25rem/0.9 var(--sans);font-stretch:var(--cond);color:var(--blue)}
.ranked a{font:700 1rem/1.2 var(--sans);font-stretch:88%}

/* ---------- Overheard: speech-bubble cards on pink ---------- */
.oh-band{background:var(--pink);padding:40px 0 48px}
.oh-band .sh h2,.oh-band .sh a{color:var(--ink)}
.oh-intro{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:22px}
.oh-intro p{font:500 1.0625rem/1.45 var(--serif);max-width:58ch;margin:0}
.bubbles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.bub{position:relative;background:var(--white);padding:20px 20px 18px;border-radius:18px 18px 18px 0;margin-bottom:24px;display:flex;flex-direction:column;gap:12px}
.bub::after{content:"";position:absolute;left:0;bottom:-24px;width:24px;height:24px;background:var(--white);clip-path:polygon(0 0,100% 0,100% 33.3%,66.6% 33.3%,66.6% 66.6%,33.3% 66.6%,33.3% 100%,0 100%)}
.bub q{font:500 1.1875rem/1.4 var(--serif);quotes:none}
.bub q::before,.bub q::after{content:none}
.bub footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--rule)}
.bub .meta a{color:var(--blue);font-weight:600}
.bub--ink{background:var(--ink);color:#fff}.bub--ink::after{background:var(--ink)}
.bub--ink .meta{color:#C9CCE6}.bub--ink footer{border-color:#2C3070}
.bub--ink .status--heard{color:#fff}

/* ---------- People moves ---------- */
.moves{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.move img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.05);margin-bottom:10px}
.move:hover img{filter:none}
.move-initials{display:grid;place-items:center;width:100%;aspect-ratio:4/5;margin-bottom:10px;background:var(--ink,#111);color:#fff;font:800 clamp(2.5rem,6vw,4rem)/1 var(--sans);font-stretch:var(--cond);letter-spacing:.02em}
.move .who{font:800 1.25rem/1.05 var(--sans);font-stretch:var(--cond)}
.move .what{font:400 var(--t-s)/1.4 var(--serif);color:var(--slate);margin-top:4px}

/* ---------- Jobs ---------- */
.jobs{list-style:none;margin:0;padding:0}
.job{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.job .co{width:56px;height:56px;display:grid;place-items:center;font:800 1.25rem/1 var(--sans);font-stretch:var(--cond);color:#fff}
.job h3{font:700 1.0625rem/1.2 var(--sans);margin:0}
.job .meta{margin-top:3px}
.sal{font:700 var(--t-s)/1.2 var(--sans);text-align:right;white-space:nowrap}
.sal small{display:block;font-weight:500;color:var(--slate);font-size:var(--t-xs)}
.badge{font:600 11px/1 var(--sans);padding:3px 6px;background:var(--pink-soft);color:var(--ink);border-radius:3px;margin-left:6px;vertical-align:2px}

/* ---------- Events ---------- */
.ev{display:grid;grid-template-columns:76px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule);align-items:start}
.date{border:2px solid var(--ink);text-align:center;padding:6px 0 7px}
.date b{display:block;font:800 2rem/1 var(--sans);font-stretch:var(--cond)}
.date span{font:600 var(--t-xs)/1 var(--sans)}
.ev h3{font:800 1.25rem/1.1 var(--sans);font-stretch:var(--cond);margin:0 0 4px}

/* ---------- Newsletter band ---------- */
.nl{background:var(--blue);color:#fff;padding:48px 0}
.nl .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.nl h2{color:#fff}
.nl p{font:400 1.1875rem/1.45 var(--serif);color:#E3E6FF;margin:.6em 0 0;max-width:46ch}
.nl form{display:grid;gap:12px}
.nl label.chk{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-s);color:#fff}
.nl input[type=email]{height:52px;border:0;padding:0 14px;font:500 1rem var(--sans);width:100%}
.nl .inline{display:flex}
.nl .inline .btn{border-color:var(--ink);height:52px}
.nl small{color:#C9CDFF;font-size:var(--t-xs)}
input[type=checkbox]{accent-color:var(--ink);width:18px;height:18px;margin:1px 0 0}

/* ---------- Footer ---------- */
.foot{border-top:6px solid var(--pink);background:var(--ink);color:#C9CCE6;padding:48px 0 28px;font-size:var(--t-s)}
.foot a{color:#fff}.foot a:hover{color:var(--pink)}
.foot .top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;padding-bottom:32px;border-bottom:1px solid #2C3070}
.foot h4{font:700 var(--t-s)/1 var(--sans);color:var(--pink);margin:0 0 14px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot .about p{margin:16px 0 0;max-width:34ch;line-height:1.5}
.foot .bot{display:flex;justify-content:space-between;gap:16px;padding-top:20px;font-size:var(--t-xs);flex-wrap:wrap}

/* ---------- Article ---------- */
.crumbs{font-size:var(--t-xs);color:var(--slate);margin:24px 0 18px}
.crumbs a{color:var(--blue)}
.art-head{max-width:860px}
.art-head .h{font-size:clamp(2.3rem,4.8vw,3.75rem)}
.art-head .dek{font-size:1.375rem;max-width:62ch}
.byline{display:flex;align-items:center;gap:12px;margin:22px 0 0;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.byline img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.byline .who{font-weight:700;font-size:var(--t-s)}
.byline .share{margin-left:auto;display:flex;gap:8px}
.share a{width:38px;height:38px;border:2px solid var(--ink);display:grid;place-items:center;font:700 13px/1 var(--sans)}
.share a:hover{background:var(--ink);color:#fff}
.figure{margin:26px 0}
.figure img{width:100%}
.figure figcaption{font-size:var(--t-xs);color:var(--slate);padding-top:8px;border-bottom:1px solid var(--rule);padding-bottom:8px}
.body{font:400 1.1875rem/1.65 var(--serif);max-width:68ch}
.body p{margin:0 0 1.15em}
.body h2{font:800 1.75rem/1.1 var(--sans);font-stretch:var(--cond);margin:1.6em 0 .5em}
.body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.body--drop > p:first-of-type::first-letter{float:left;font:800 4.6rem/.82 var(--sans);font-stretch:var(--cond);color:var(--blue);margin:6px 10px 0 0}
.pull{position:relative;background:var(--mist);margin:1.6em 0 2.2em;padding:22px 24px;border-radius:18px 18px 18px 0;font:700 1.5rem/1.25 var(--sans);font-stretch:85%}
.pull::after{content:"";position:absolute;left:0;bottom:-24px;width:24px;height:24px;background:var(--mist);clip-path:polygon(0 0,100% 0,100% 33.3%,66.6% 33.3%,66.6% 66.6%,33.3% 66.6%,33.3% 100%,0 100%)}
.pull cite{display:block;font:500 var(--t-s)/1.3 var(--sans);font-style:normal;color:var(--slate);margin-top:10px}
.factbox{border:2px solid var(--ink);padding:18px 20px;margin:1.6em 0;font-family:var(--sans);font-size:1rem}
.factbox h3{font:800 1.25rem/1 var(--sans);font-stretch:var(--cond);margin:0 0 10px}
.factbox ul{margin:0;padding-left:18px;line-height:1.5}
.reply{background:var(--pink-soft);padding:16px 18px;font:400 var(--t-s)/1.5 var(--sans);margin:1.8em 0;border-left:4px solid var(--pink)}
.tags-row{display:flex;flex-wrap:wrap;gap:8px 10px;margin:22px 0}
.tags-row .tag{margin:0}
.authorbox{display:grid;grid-template-columns:84px 1fr;gap:16px;padding:20px 0;border-top:4px solid var(--ink)}
.authorbox img{width:84px;height:84px;object-fit:cover;border-radius:50%}
.side > * + *{margin-top:32px}

/* ---------- Page heads ---------- */
.phead{padding:32px 0 26px;border-bottom:1px solid var(--rule)}
.phead p{font:400 1.25rem/1.45 var(--serif);color:var(--slate);max-width:62ch;margin:.6em 0 0}
.phead--blue{background:var(--blue);color:#fff;border:0}
.phead--blue p{color:#E3E6FF}
.phead--pink{background:var(--pink);border:0}
.phead--pink p{color:var(--ink)}
.phead--ink{background:var(--ink);color:#fff;border:0}.phead--ink p{color:#C9CCE6}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}
.tabs a{font:600 var(--t-s)/1 var(--sans);padding:10px 14px;border:2px solid var(--ink)}
.tabs a[aria-current]{background:var(--ink);color:#fff}
.tabs a:hover{border-color:var(--blue);color:var(--blue)}
.tabs a[aria-current]:hover{color:#fff;background:var(--blue)}
.pager{display:flex;gap:6px;margin:30px 0 0}
.pager a{min-width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--ink);font-weight:700;padding:0 12px}
.pager a[aria-current]{background:var(--ink);color:#fff}

/* ---------- Forms ---------- */
.field{display:grid;gap:6px;margin-bottom:18px}
.field label{font:700 var(--t-s)/1.2 var(--sans)}
.field .hint{font-size:var(--t-xs);color:var(--slate);margin-top:-2px}
.field input,.field select,.field textarea{font:400 1rem/1.4 var(--sans);border:2px solid var(--ink);padding:12px;background:#fff;color:var(--ink);width:100%}
.field textarea{min-height:160px;resize:vertical;font-family:var(--serif);font-size:1.0625rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #C7CCFF}
.radio-set{display:grid;gap:10px}
.radio-set label{display:flex;gap:10px;align-items:flex-start;font-weight:500;border:2px solid var(--rule);padding:12px;cursor:pointer}
.radio-set label:has(input:checked){border-color:var(--blue);background:var(--mist)}
.radio-set input{accent-color:var(--blue);width:18px;height:18px;margin:2px 0 0}
.panel{background:var(--mist);padding:22px}
.panel h3{font:800 1.375rem/1.1 var(--sans);font-stretch:var(--cond);margin:0 0 10px}
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(s);width:30px;height:30px;display:grid;place-items:center;background:var(--blue);color:#fff;font:800 1rem/1 var(--sans);border-radius:8px 8px 8px 0}

/* ---------- Directory / cards with information-bearing borders ---------- */
.filters{display:grid;gap:18px;align-content:start}
.filters fieldset{border:0;padding:0;margin:0}
.filters legend{font:700 var(--t-s)/1 var(--sans);margin-bottom:10px}
.filters label{display:flex;gap:8px;align-items:center;font-size:var(--t-s);padding:4px 0}
.filters label span{margin-left:auto;color:var(--slate);font-size:var(--t-xs)}
.agency{display:grid;grid-template-columns:72px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule);align-items:start}
.agency .co{width:72px;height:72px;display:grid;place-items:center;font:800 1.5rem/1 var(--sans);font-stretch:var(--cond);color:#fff}
.agency h3{font:800 1.375rem/1.05 var(--sans);font-stretch:var(--cond);margin:0 0 4px}
.agency p{font:400 1rem/1.45 var(--serif);color:var(--slate);margin:6px 0 10px;max-width:60ch}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:600 12px/1 var(--sans);padding:6px 8px;background:var(--mist);border-radius:3px}
.verified{display:inline-flex;align-items:center;gap:5px;font:600 var(--t-xs)/1 var(--sans);color:var(--blue)}
.verified::before{content:"";width:14px;height:14px;background:var(--blue);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}

/* stats (media kit) */
.stat{border-top:4px solid var(--ink);padding-top:12px}
.stat b{display:block;font:800 3rem/1 var(--sans);font-stretch:var(--cond);color:var(--blue)}
.stat span{font:500 var(--t-s)/1.4 var(--sans);color:var(--slate)}
.table{width:100%;border-collapse:collapse;font-size:var(--t-s)}
.table th,.table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.table th{font-weight:700;border-bottom:3px solid var(--ink)}
.table td:last-child{font-weight:700;white-space:nowrap}
.pkg{border:2px solid var(--ink);padding:22px;display:flex;flex-direction:column;gap:12px}
.pkg h3{font:800 1.625rem/1 var(--sans);font-stretch:var(--cond);margin:0}
.pkg ul{margin:0;padding-left:18px;font-size:var(--t-s);line-height:1.6}
.pkg .price{font:800 2rem/1 var(--sans);font-stretch:var(--cond)}
.pkg .price small{font:500 var(--t-xs) var(--sans);color:var(--slate)}
.pkg--feature{background:var(--ink);color:#fff;border-color:var(--ink)}
.pkg--feature .price small{color:#C9CCE6}

/* awards hero */
.awards{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.awards .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding-top:48px;padding-bottom:48px}
.awards img{width:100%;aspect-ratio:4/3;object-fit:cover}
.awards p{font:400 1.25rem/1.45 var(--serif);color:#C9CCE6;max-width:48ch}
.awards .h{color:#fff}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:var(--t-s);margin:18px 0 24px}
.kv dt{color:var(--pink);font-weight:600}.kv dd{margin:0}

/* 404 */
.nf{padding:80px 0;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.nf .big{font:800 clamp(8rem,20vw,16rem)/.8 var(--sans);font-stretch:var(--cond);color:var(--blue);letter-spacing:-.03em}

/* search results */
.result{padding:18px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:1fr 180px;gap:20px}
.result img{aspect-ratio:3/2;object-fit:cover}
mark{background:var(--pink-soft);color:inherit;padding:0 2px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .mast .line{display:none}
  .mast .wrap{grid-template-columns:auto 1fr}
  .mast .acts{justify-self:end}
  .bubbles{grid-template-columns:1fr 1fr}
  .moves{grid-template-columns:repeat(2,1fr)}
  .foot .top{grid-template-columns:1fr 1fr 1fr}
  .foot .about{grid-column:1/-1}
  .s-8,.s-7,.s-9{grid-column:span 12}.s-4,.s-5,.s-3{grid-column:span 6}
  .side-col{grid-column:span 12}
}
@media (max-width:760px){
  :root{--gut:16px}
  .util nav{display:none}
  .mast .logo img{height:38px}
  .search{display:none}
  .burger{display:block}
  .mast .acts .btn{display:none}
  .g-12 > *{grid-column:span 12!important}
  .bubbles,.moves{grid-template-columns:1fr}
  .moves{grid-template-columns:1fr 1fr}
  .nl .wrap,.awards .wrap,.nf{grid-template-columns:1fr}
  .foot .top{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:96px 1fr}.row img{width:96px}
  .live time{display:none}
  .oh-intro{flex-direction:column;align-items:flex-start}
  .result{grid-template-columns:1fr}
  .agency{grid-template-columns:56px 1fr}.agency .co{width:56px;height:56px}.agency > :last-child{grid-column:2}
  .job{grid-template-columns:48px 1fr}.job .co{width:48px;height:48px}.job .sal{grid-column:2;text-align:left}
  .byline .share{display:none}
  .body{font-size:1.125rem}
}

/* ---------- Mobile drawer ---------- */
.drawer{background:var(--ink);padding:12px 0 20px}
.drawer ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
.drawer a{display:block;color:#fff;font:700 1.0625rem/1 var(--sans);padding:12px 0;border-bottom:1px solid #2C3070}
.drawer a:hover{color:var(--pink)}
@media (min-width:761px){.drawer{display:none}}

/* bubbles on white pages sit on Mist so the shape still reads */
.on-white .bub{background:var(--mist)}.on-white .bub::after{background:var(--mist)}.on-white .bub footer{border-color:#D3D7F3}

.bubbles--2{grid-template-columns:1fr 1fr}
.ad--mob{display:none;width:320px;height:50px;margin:16px auto}
.filter-wrap > summary{display:none;list-style:none}
.filter-wrap > summary::-webkit-details-marker{display:none}
@media (max-width:760px){
  .bubbles--2{grid-template-columns:1fr}
  .ad--lb{display:none}.ad--mob{display:grid}
  .filter-wrap > summary{display:inline-flex;margin-bottom:8px}
  .filter-wrap:not([open]) .filters{display:none}
}
.agency p.meta{font:400 var(--t-xs)/1.4 var(--sans);color:var(--slate);margin:0}