/* Kcounty.Media — house look (cream, ink, red, gold; Instrument Serif + Manrope). Phone first. */
:root{--cream:#faf8fb;--paper:#ffffff;--ink:#231a2b;--red:#5b2a6e;--teal:#1f7a8c;--gold:#e0a83a;--line:#e6dfe9;--mute:#5c4f63;--alert:#b3261e}
/* Huckleberry scheme (Anthony, Nov 4 2026): huckleberry purple leads, lake teal for labels, gold underlines. --red now holds the purple so every existing rule follows. */
*{box-sizing:border-box}html,body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.5 Manrope,system-ui,sans-serif}
a{color:var(--red)}img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
/* masthead */
.mast{border-bottom:3px double var(--ink);background:var(--cream)}
.mast .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0 6px;font-size:12px;color:var(--mute)}
.brand{display:block;text-align:center;text-decoration:none;padding:4px 0 2px}
.tag{text-align:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding-bottom:8px}
.menu{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line);padding:6px 0}
.menu::-webkit-scrollbar{display:none}
.menu a{flex:none;text-decoration:none;color:var(--ink);font-weight:700;font-size:14px;padding:8px 10px;border-radius:8px;white-space:nowrap}
.menu a.on,.menu a:hover{background:var(--red);color:#fff}
.menu a.pre{opacity:.55}
.cityf{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0 10px}
.cityf a{font-size:13px;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:var(--paper)}
.cityf a.on{background:var(--red);border-color:var(--red);color:#fff}
/* page */
main{padding:18px 0 40px}
.eye{font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
h1.sec{font:400 clamp(38px,9vw,64px)/1.02 'Instrument Serif',Georgia,serif;margin:6px 0 8px}
h2{font:400 28px/1.1 'Instrument Serif',Georgia,serif;margin:26px 0 10px;padding-bottom:4px;border-bottom:3px solid var(--gold);display:inline-block}
.lede{font-size:18px;color:var(--mute);max-width:62ch;margin:0 0 14px}
.grid{display:grid;gap:14px}@media(min-width:820px){.grid.two{grid-template-columns:2fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.card h3{margin:0 0 6px;font:400 22px/1.15 'Instrument Serif',Georgia,serif}
.card .src{font-size:12px;color:var(--mute);margin-top:8px}
.subs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.subs span{font-size:13px;font-weight:700;border-left:3px solid var(--gold);padding:2px 8px;background:var(--paper)}
.runs{font-size:14px;color:var(--mute);border-top:1px dashed var(--line);padding-top:8px;margin-top:10px}
.pre-note{background:#fdf3dc;border:1px solid var(--gold);border-radius:10px;padding:8px 12px;font-size:13px;margin:0 0 14px}
.empty{border:2px dashed var(--line);border-radius:14px;padding:22px;text-align:center;color:var(--mute)}
/* live modules */
.wx{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}@media(min-width:620px){.wx{grid-template-columns:repeat(4,1fr)}}
.wx div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.wx b{display:block;font-size:13px}.wx .t{font:400 30px/1 'Instrument Serif',serif;color:var(--red)}.wx small{font-size:12px;color:var(--mute)}
.alert{background:var(--alert);color:#fff;border-radius:10px;padding:8px 12px;font-weight:700;margin-bottom:8px}
.games{list-style:none;margin:0;padding:0}.games li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.games li span{color:var(--mute);font-size:13px;text-align:right}
.rail{display:grid;gap:10px}@media(min-width:620px){.rail{grid-template-columns:repeat(2,1fr)}}@media(min-width:960px){.rail{grid-template-columns:repeat(3,1fr)}}
.rail a.card{text-decoration:none;color:var(--ink);display:block}.rail a.card:hover{border-color:var(--red)}
.rail .card p{margin:0;color:var(--mute);font-size:14px}
/* footer */
footer{border-top:3px double var(--ink);padding:18px 0 40px;font-size:14px;color:var(--mute)}
footer .cols{display:flex;flex-wrap:wrap;gap:8px 18px}footer a{color:var(--ink);font-weight:600;text-decoration:none}
/* phone: the live boxes come first; laptop: weather in the side column runs two across */
@media(max-width:819px){.grid.two>aside{order:-1}}
aside .wx{grid-template-columns:repeat(2,1fr)!important}
.grid>.card{align-self:start}
.wk li{display:block}.wk li span{display:block;text-align:left;margin-top:2px}
.menu a.on{opacity:1}
/* Newspaper type (Anthony, Nov 4 2026: "More of pressdemocrat.com style headers. Look at the masthead."):
   a tall high-contrast serif nameplate in plain ink, bold serif headlines, uppercase serif section labels over a thin
   rule, and a bold black sans menu. Fonts: Bodoni Moda (nameplate), Noto Serif (headlines), Noto Sans (menu, labels). */
body{font-family:'Noto Sans',system-ui,sans-serif}
.tag{font-family:'Noto Sans',sans-serif}
.mast{border-bottom:1px solid var(--ink)}
.menu{justify-content:center;border-top:none;padding:4px 0 8px}
.menu a{font:700 15px 'Noto Sans',sans-serif;color:var(--ink);background:none!important;padding:8px 9px;border-radius:0;border-bottom:3px solid transparent}
.menu a.on,.menu a:hover{color:var(--ink)!important;border-bottom-color:var(--red)}
.menu a.pre{opacity:.6}.menu a.on{opacity:1}
@media(max-width:819px){.menu{justify-content:flex-start}}
h1.sec{font:700 clamp(34px,7vw,52px)/1.08 'Noto Serif',Georgia,serif}
h2{display:block;font:400 22px/1.2 'Noto Serif',Georgia,serif;text-transform:uppercase;letter-spacing:.02em;border-bottom:2px solid var(--red);padding-bottom:6px}
.card h3,.rail .card h3{font:700 19px/1.25 'Noto Serif',Georgia,serif}
.eye{font-family:'Noto Sans',sans-serif}
.wx .t{font-family:'Noto Serif',Georgia,serif;font-weight:700}
.menu{justify-content:flex-start}.menu a:first-child{margin-left:auto}.menu a:last-child{margin-right:auto}
.brand{padding-bottom:10px}
/* All-white newspaper scheme (Anthony, Nov 4 2026: "make it a total white scheme. Copy this one" — pressdemocrat.com):
   white page and cards, black type, one deep red (#9e0b0f) for rules, buttons and the open section, warm dark gray
   section labels, light gray hairlines. Replaces Huckleberry. */
:root{--cream:#ffffff;--paper:#ffffff;--ink:#000000;--red:#9e0b0f;--teal:#8f0a0e;--gold:#9e0b0f;--line:#e3e3e3;--mute:#555555;--label:#38322a;--alert:#9e0b0f}
html,body{background:#fff}
.mast{background:#fff;border-bottom:1px solid #000}
h2{color:var(--label);border-bottom:2px solid var(--red)}
.card{background:#fff;border:1px solid var(--line);border-radius:4px}
.wx div{border-radius:4px}
.subs span{background:#fff;border-left-color:var(--red)}
.cityf a{background:#fff;border-color:#cfcfcf}
.cityf a.on{background:var(--red);border-color:var(--red)}
.pre-note{background:#fff6f6;border-color:#e8c4c5}
.empty{border-radius:4px}
.games a{color:#000;text-decoration:none;font-family:"Noto Serif",Georgia,serif}.games a:hover{text-decoration:underline;color:var(--red)}
/* Masthead: Lake Coeur d'Alene turned sideways, faded behind the name (Anthony, Nov 4 2026) */
.brand{position:relative;isolation:isolate}
.brand::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;height:clamp(104px,24vw,168px);aspect-ratio:1680/1010;transform:translate(-50%,-50%);background:url(/assets/art/lake-cda-landscape.svg) center/contain no-repeat;opacity:.2;pointer-events:none}
.mast{overflow:hidden}

/* Newsroom: story lists, the story page, and the event form (Nov 4 2026) */
.story-item{padding:12px 0;border-bottom:1px solid var(--line)}
.story-item h3{font:700 21px/1.25 'Noto Serif',Georgia,serif}
.story-item h3 a{color:var(--ink);text-decoration:none}
.story-item h3 a:hover{text-decoration:underline}
.story-item p{color:var(--mute);margin-top:4px}
article[data-live="story"]{max-width:720px}
.story-img{width:100%;height:auto;margin:16px 0}
.story-body{font:18px/1.7 'Noto Serif',Georgia,serif;margin-top:16px}
.story-body p{margin:0 0 1em}
.story-src li{margin:4px 0 4px 18px}
form.submit{display:grid;gap:12px}
form.submit label{display:grid;gap:4px;font:600 13px 'Noto Sans',sans-serif;color:var(--label)}
form.submit input,form.submit textarea{font:16px 'Noto Sans',sans-serif;border:1px solid #bbb;border-radius:4px;padding:9px 10px;width:100%;background:#fff;color:#000}
form.submit textarea{min-height:90px}
form.submit .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form.submit button{justify-self:start;background:var(--red);color:#fff;border:0;border-radius:4px;padding:11px 22px;font:700 15px 'Noto Sans',sans-serif;cursor:pointer}
form.submit .note{font-size:13px;color:var(--mute)}
form.submit .hp{position:absolute;left:-9999px}
@media(max-width:600px){form.submit .two{grid-template-columns:1fr}}

/* Masthead watershed (Anthony, Nov 4 2026): the lake keeps its size behind the name; its rivers run on, off the top of
   the page (Coeur d'Alene and St. Joe, east) and down the page (the Spokane, west, to the Columbia). It sits behind
   everything: body and masthead are see-through, so the white page shows it, and white cards cover it. */
html{background:#fff;overflow-x:clip} body{background:transparent;overflow-x:clip} .mast{background:transparent}
.brand{isolation:auto}
.brand::before{--u:calc(clamp(104px,24vw,168px) / 1010);z-index:-1;transform:none;aspect-ratio:auto;
  width:calc(4512 * var(--u));height:calc(10064 * var(--u));
  left:calc(50% - 840 * var(--u) + -1252 * var(--u));top:calc(50% - 505 * var(--u) + -4606 * var(--u));
  background:url(/assets/art/lake-cda-watershed-masthead.svg) 0 0/100% 100% no-repeat}
.mast{overflow:visible}
/* Thinner masthead (Anthony, Nov 4 2026: "too thick"): tighter rows, towns on one scrolling line, one-line tagline on phones */
.mast .row{padding:6px 0 0}
.brand{padding:2px 0 4px}
.tag{padding-bottom:2px;font-size:11px}
.menu{padding:2px 0 2px}
.menu a{padding:6px 9px}
.cityf{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px 0 8px}
.cityf::-webkit-scrollbar{display:none}
.cityf a{flex:none;font-size:12px;padding:3px 9px}
@media(max-width:600px){.tag{letter-spacing:.06em;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mast .row{font-size:11px}}

/* NAV BAR (Nov 4 2026): K County red bar, traditional — a fine black rule above, small-caps-style labels, white underline on the page you're on */
.mast{border-bottom:0}
.navbar{position:sticky;top:0;z-index:50;background:var(--red);border-top:3px double #000;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.navbar .wrap{display:flex;align-items:center;gap:6px;min-height:44px}
.nv-brand{display:none;flex:none;color:#fff;text-decoration:none;font:700 19px/1 'Playfair Display',Georgia,serif;padding-right:14px;margin-right:4px;border-right:1px solid rgba(255,255,255,.35)}
.navbar.stuck .nv-brand{display:block}
.nv{flex:1;display:flex;align-items:center;min-width:0}
.nv-row{display:flex;align-items:center;min-width:0;overflow:hidden;flex:1;justify-content:center}
.navbar.stuck .nv-row{justify-content:flex-start}
.nv a{flex:none;color:#fff;text-decoration:none;font:700 13px/1 'Noto Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:15px 11px 13px;border-bottom:3px solid transparent;white-space:nowrap}
.nv a:hover{background:rgba(0,0,0,.16)}
.nv a.on{border-bottom-color:#fff}
.nv a.pre{opacity:.72}.nv a.pre.on{opacity:1}
.nv-more-wrap{position:relative;flex:none}
.nv-more{background:none;border:0;color:#fff;font:700 13px/1 'Noto Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:15px 11px 13px;border-bottom:3px solid transparent;cursor:pointer}
.nv-more:hover,.nv-more[aria-expanded="true"]{background:rgba(0,0,0,.16)}
.nv-more.on{border-bottom-color:#fff}
.nv-drop{position:absolute;right:0;top:100%;min-width:230px;background:#fff;border:1px solid #000;border-top:3px solid var(--red);box-shadow:0 10px 28px rgba(0,0,0,.18);padding:6px 0;z-index:60}
.nv-drop a{display:block;color:#000;text-transform:none;letter-spacing:0;font:600 15px/1.2 'Noto Sans',sans-serif;padding:11px 18px;border-bottom:0;border-left:3px solid transparent}
.nv-drop a:hover{background:#f6f6f6;border-left-color:var(--red)}
.nv-drop a.on{border-left-color:var(--red);font-weight:700}
.cityf{padding:10px 0 10px}
@media(max-width:600px){.nv a,.nv-more{padding:14px 9px 12px;font-size:12px;letter-spacing:.05em}.nv-brand{font-size:16px;padding-right:10px}}
.nv [hidden]{display:none!important}
.nv .nv-drop a{font:600 15px/1.2 'Noto Sans',sans-serif;letter-spacing:0;text-transform:none;padding:11px 18px;opacity:1}
.nv .nv-drop a.pre::after{content:" · preview";font-weight:400;color:#888;font-size:12px}
/* Nav bar inside the page width, not end to end; it collapses sideways into a short bar when you scroll (Anthony, Nov 4 2026) */
.navbar{background:transparent;border-top:0;box-shadow:none;pointer-events:none}
.navbar .wrap{pointer-events:auto;background:var(--red);border-top:3px double #000;box-shadow:0 2px 10px rgba(0,0,0,.18);max-width:1048px;transition:max-width .35s ease,border-radius .35s ease,margin-top .35s ease;padding:0 10px}
.navbar.stuck .wrap{max-width:600px;border-radius:0 0 10px 10px;border-top-width:3px}
@media(max-width:1080px){.navbar .wrap{max-width:calc(100% - 32px)}.navbar.stuck .wrap{max-width:min(600px,calc(100% - 16px))}}

/* THE TIC TAC (Anthony, Nov 4 2026): a long floating pill, pastel lake blue, dark lake text; it floats with a gap when you scroll */
.navbar{top:10px;padding:8px 0 2px}
.navbar .wrap,.navbar.stuck .wrap{background:#c9def0;border:1px solid rgba(30,74,110,.18);border-top:1px solid rgba(30,74,110,.18);border-radius:999px;box-shadow:0 6px 18px rgba(30,74,110,.18),0 1px 2px rgba(0,0,0,.08);padding:0 14px 0 18px}
.navbar .wrap{max-width:min(1000px,calc(100% - 32px))}
.navbar.stuck .wrap{max-width:min(600px,calc(100% - 20px))}
.nv a,.nv-more{color:#1e4a6e;padding:13px 11px 11px}
.nv a:hover,.nv-more:hover,.nv-more[aria-expanded="true"]{background:rgba(30,74,110,.08)}
.nv a.on,.nv-more.on{border-bottom-color:#1e4a6e}
.nv-brand{color:#1e4a6e;border-right-color:rgba(30,74,110,.3)}
.nv-drop{border:1px solid rgba(30,74,110,.25);border-top:3px solid #1e4a6e;border-radius:12px;margin-top:8px;overflow:hidden}
.nv .nv-drop a{color:#000}
.nv-drop a:hover,.nv-drop a.on{border-left-color:#1e4a6e}
.nv a,.nv-more{border-radius:999px 999px 0 0}.nv a:hover,.nv-more:hover,.nv-more[aria-expanded="true"]{border-radius:999px}.nv .nv-drop a,.nv .nv-drop a:hover{border-radius:0}
.navbar .wrap,.navbar.stuck .wrap{border:1.5px solid #1e4a6e}

/* THE GLASS BAR (Nov 4 2026) — the AE office bottom nav (Shield Point office), in K County lake blue. Phone and laptop. */
:root{--glass:linear-gradient(180deg,rgba(255,255,255,.78),rgba(236,243,250,.66));--glassline:rgba(255,255,255,.92);--barink:#3a4450;--acc:#1e4a6e;--accbg:#dcebf7;--ring:radial-gradient(circle at 30% 25%,#fff,#e8f1f9)}
body{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));width:min(560px,calc(100% - 20px));z-index:40;
 display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:6px 8px;border-radius:26px;
 background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
 border:1px solid var(--glassline);box-shadow:0 18px 40px -12px rgba(15,40,80,.35),0 2px 6px rgba(15,40,80,.12),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(15,40,80,.06)}
.tabbar a,.tabbar button{border:0;background:none;display:grid;justify-items:center;gap:2px;font:600 11px/1.2 'Noto Sans',sans-serif;color:var(--barink);padding:6px 0 4px;position:relative;cursor:pointer;border-radius:18px;text-decoration:none}
.tabbar .ic{width:30px;height:30px;padding:3px}
.tabbar a.on,.tabbar button.on{color:var(--acc);background:var(--accbg)}
.tabbar a.core{margin-top:-30px}.tabbar a.core.on{background:none}.tabbar a.core.on .ring{border:2px solid var(--acc)}
.tabbar a.core .ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--ring);border:1px solid #c9def0;
 box-shadow:0 12px 26px -8px rgba(30,74,110,.45),0 3px 8px rgba(0,0,0,.15),inset 0 1px 0 #fff}
.tabbar a.core img{width:48px;height:auto}
.sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));width:min(420px,calc(100% - 20px));z-index:45;display:none;padding:8px;border-radius:22px;
 background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid var(--glassline);box-shadow:0 20px 50px -10px rgba(15,40,80,.35)}
.sheet.on{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.sheet a{border-radius:14px;padding:10px 4px;display:grid;justify-items:center;gap:4px;font:600 12px/1.2 'Noto Sans',sans-serif;color:var(--barink);text-decoration:none;text-align:center}
.sheet a:hover,.sheet a.on{background:var(--accbg);color:var(--acc)}
.sheet .ic{width:30px;height:30px}
@media print{.tabbar,.sheet{display:none!important}}
/* TOWN PILLS (Anthony, Nov 4 2026): stay at the top as floating pills in the bar's glass blue */
.townbar{position:sticky;top:0;z-index:35;padding:8px 0 6px;pointer-events:none}
.townbar .cityf{pointer-events:auto;padding:2px 2px 4px;gap:8px}
.cityf a{background:var(--glass)!important;-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
 border:1px solid #c9def0!important;color:var(--barink)!important;font:600 12.5px/1 'Noto Sans',sans-serif;padding:8px 14px;border-radius:999px;
 box-shadow:0 6px 16px -8px rgba(15,40,80,.35),inset 0 1px 0 rgba(255,255,255,.95)}
.cityf a:hover{background:var(--accbg)!important;color:var(--acc)!important}
.cityf a.on{background:var(--acc)!important;border-color:var(--acc)!important;color:#fff!important}
/* Not gray (Anthony, Nov 4 2026): the bar, the More sheet and the town pills are filled pastel lake blue */
:root{--glass:linear-gradient(180deg,rgba(214,231,246,.94),rgba(193,216,238,.9));--glassline:#9fc0de;--barink:#1e4a6e;--accbg:rgba(255,255,255,.6)}
.tabbar{border:1.5px solid #1e4a6e}
.sheet{background:linear-gradient(180deg,rgba(220,235,248,.97),rgba(201,222,240,.95));border:1.5px solid #1e4a6e}
.sheet a:hover,.sheet a.on{background:rgba(255,255,255,.65)}
.cityf a{border:1.5px solid #1e4a6e!important;color:#1e4a6e!important}
.tabbar a.core .ring{background:radial-gradient(circle at 30% 25%,#ffffff,#d6e7f6);border:1.5px solid #1e4a6e}
.townbar .cityf a:first-child{margin-left:auto}.townbar .cityf a:last-child{margin-right:auto}
.tag{font:700 14px/1.2 'Noto Sans',sans-serif!important;letter-spacing:.32em!important;color:#1e4a6e!important;padding:2px 0 4px!important;white-space:nowrap}
.tag{margin-top:10px!important}
/* TOWNS, option A (Anthony, Nov 4 2026): the newspaper strip — small capitals with thin dividers, your town underlined */
.townbar{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #e3e3e3;padding:6px 0 6px}
.townbar .cityf{gap:0!important;padding:0!important}
.cityf a{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important;
 color:#1e4a6e!important;font:700 12px/1 'Noto Sans',sans-serif!important;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px!important;border-left:1px solid #9fc0de!important}
.cityf a:first-child{border-left:0!important}
.cityf a:hover{color:#000!important;background:none!important}
.cityf a.on{color:#000!important;background:none!important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

/* Marble icons (the Icon Skin Machine) */
.tabbar img.ic{width:34px;height:34px;padding:0;border-radius:9px;box-shadow:0 2px 5px rgba(30,74,110,.25)}
.sheet img.ic{width:42px;height:42px;border-radius:11px;box-shadow:0 2px 6px rgba(30,74,110,.22)}
.sheet svg.ic{width:42px;height:42px;padding:6px}
.tabbar a,.tabbar button,.sheet a,.tabbar a.on,.tabbar button.on,.sheet a.on,.sheet a:hover{color:var(--red)!important}
.home-eye{display:flex;align-items:center;gap:8px}.home-eye img{width:34px;height:auto;display:block}
.cityf a{color:var(--red)!important}.cityf a:hover,.cityf a.on{color:var(--red)!important;text-decoration-color:var(--red)}

/* TOWN BACKDROPS (Anthony, Nov 4 2026): each town page wears its own place behind everything — Hayden: Hayden Lake */
.townbg{position:fixed;inset:0;z-index:-2;background-position:center 58%;background-size:min(92vw,880px) auto;background-repeat:no-repeat;opacity:.13;pointer-events:none}
/* Town pages (Anthony, Nov 4 2026): the county art stays inside the masthead and stops at its bottom line;
   the town's own backdrop never shows in the masthead. The masthead becomes its own white panel. */
body:has(.townbg) .mast{position:relative;z-index:0;background:#fff;overflow:hidden;border-bottom:1px solid #e3e3e3}
body:has(.townbg) .townbar{background:#fff}

/* THE WEATHER TV (Nov 4 2026): wood cabinet, glowing screen, channel dial, speaker grille, little legs */
.tv{margin-bottom:16px}
.tv-cab{display:grid;grid-template-columns:1fr 74px;gap:12px;padding:14px;border-radius:22px;
 background:repeating-linear-gradient(92deg,rgba(0,0,0,.06) 0 2px,transparent 2px 9px),repeating-linear-gradient(88deg,rgba(255,255,255,.05) 0 1px,transparent 1px 5px),linear-gradient(180deg,#8a5a34,#6b4325 55%,#57361d);
 box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 0 rgba(0,0,0,.3),0 14px 26px -12px rgba(40,20,5,.55);border:1px solid #3e2612}
.tv-screen{position:relative;aspect-ratio:4/3;border-radius:28px/24px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#2a3d34 0,#13201b 62%,#0a110e 100%);
 box-shadow:inset 0 0 0 6px #2a2a2a,inset 0 0 0 9px #111,inset 0 0 40px rgba(0,0,0,.85);color:#c8f5d2;font-family:ui-monospace,Menlo,Consolas,monospace}
.tv-glass{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 30% 18%,rgba(255,255,255,.16),transparent 45%);pointer-events:none;z-index:2}
.tv-show{position:absolute;inset:0;padding:16px 18px;display:flex;flex-direction:column;justify-content:center;gap:4px;text-shadow:0 0 6px rgba(150,255,190,.55);z-index:1}
.tv-top{position:absolute;top:12px;left:18px;right:18px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;opacity:.8}
.tv-head{font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.tv-head.tv-alert{color:#ffd27a;text-shadow:0 0 6px rgba(255,190,90,.6)}
.tv-big{font-size:clamp(38px,9vw,54px);line-height:1;font-weight:700;color:#e9fff0}
.tv-line{font-size:14px;line-height:1.3}
.tv-sub{font-size:11.5px;opacity:.75}
.tv-week{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;text-align:center;margin-top:10px}
.tv-week b{display:block;font-size:12px;opacity:.85}.tv-week span{font-size:20px;font-weight:700;color:#e9fff0}
.tv-static{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;mix-blend-mode:screen;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 120px}
.tv-flip .tv-static{animation:tvstatic .42s steps(6) 1}
.tv-flip .tv-show{animation:tvroll .42s ease 1}
@keyframes tvstatic{0%{opacity:.9;background-position:0 0}50%{opacity:.75;background-position:-40px 30px}100%{opacity:0;background-position:20px -20px}}
@keyframes tvroll{0%{filter:brightness(2) blur(1px);transform:scaleY(.96)}100%{filter:none;transform:none}}
.tv-panel{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0;border-radius:12px;background:linear-gradient(180deg,#e9e1cf,#cfc4ab);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.15)}
.tv-dial{width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;position:relative;transition:transform .35s cubic-bezier(.3,1.4,.5,1);
 background:radial-gradient(circle at 35% 30%,#fdfbf6,#bdb39c 70%,#8f8670);box-shadow:0 3px 6px rgba(0,0,0,.35),inset 0 -2px 3px rgba(0,0,0,.25)}
.tv-dial i{position:absolute;left:50%;top:5px;width:4px;height:15px;margin-left:-2px;border-radius:2px;background:var(--red)}
.tv-dial:focus-visible{outline:3px solid #1e4a6e;outline-offset:3px}
.tv-ch{font:700 11px/1 ui-monospace,Menlo,monospace;color:#3b2a1a;letter-spacing:.08em}
.tv-knob{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fdfbf6,#a99f87);box-shadow:0 2px 4px rgba(0,0,0,.3);position:relative}
.tv-knob i{position:absolute;left:50%;top:3px;width:3px;height:9px;margin-left:-1.5px;background:#3b2a1a;border-radius:2px}
.tv-grille{flex:1;width:46px;min-height:40px;border-radius:6px;background:repeating-linear-gradient(0deg,#5a4a36 0 2px,#d9cfb9 2px 5px)}
.tv-legs{display:flex;justify-content:space-between;padding:0 34px;height:12px}
.tv-legs i{width:16px;height:12px;background:#4a2e17;clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}
.tv .src{margin-top:6px}
@media(prefers-reduced-motion:reduce){.tv-flip .tv-static,.tv-flip .tv-show{animation:none}}
.tv-show{padding:38px 18px 14px}.tv .src{font-size:12px;color:var(--mute);line-height:1.4}
.tv-show{justify-content:flex-start}.tv-big{white-space:nowrap;font-size:clamp(32px,7.5vw,48px)}
.tv-screen{container-type:inline-size}.tv-big{font-size:clamp(26px,15cqw,52px)}.tv-week span{font-size:clamp(14px,7.5cqw,22px)}

/* How to watch / listen / tickets (Nov 4 2026) */
.how{margin-top:10px;padding-top:10px;border-top:1px dashed #d9d9d9;display:grid;gap:6px;font-size:13px}
.how div{display:grid;grid-template-columns:62px 1fr;gap:8px}
.how b{font:700 11px/1.6 'Noto Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.how a{color:#1e4a6e}
.tvch{font-style:normal;font-weight:700;color:#1e4a6e}

/* THE WEATHER SKY (Nov 4 2026) — the box looks like the sky outside right now */
.sky{position:relative;overflow:hidden;border-radius:16px;min-height:210px;color:#fff;isolation:isolate;margin-bottom:4px;box-shadow:0 10px 24px -14px rgba(15,40,80,.6)}
.sky-day.sky-clear{background:linear-gradient(180deg,#3b8fd6,#8cc6ef 75%,#cfe7f7)}
.sky-day.sky-partly{background:linear-gradient(180deg,#4a90c9,#9cc7e6 75%,#d9e9f4)}
.sky-day.sky-cloudy,.sky-day.sky-fog{background:linear-gradient(180deg,#7d8b98,#a9b4bd 70%,#c9d0d6)}
.sky-day.sky-rain{background:linear-gradient(180deg,#5d6c7a,#8995a1 70%,#a9b2ba)}
.sky-day.sky-storm{background:linear-gradient(180deg,#3a4250,#5f6875 70%,#7d8590)}
.sky-day.sky-snow{background:linear-gradient(180deg,#9fb0c0,#c9d4de 70%,#e9eef3);color:#1e2a36}
.sky-night{background:linear-gradient(180deg,#0b1530,#1b2a4e 65%,#2c3c62)}
.sky-night.sky-cloudy,.sky-night.sky-rain,.sky-night.sky-fog{background:linear-gradient(180deg,#1a2130,#2c3444 65%,#3a4253)}
.sky-night.sky-storm{background:linear-gradient(180deg,#11151f,#232a37 70%,#323a48)}
.sky-art,.sky-art i{position:absolute;pointer-events:none}
.sky-art{inset:0;z-index:-1}
.sky-sun{width:120px;height:120px;right:-20px;top:-24px;border-radius:50%;background:radial-gradient(circle,#fff6c9 0,#ffd75e 45%,rgba(255,215,94,0) 70%);animation:skyglow 6s ease-in-out infinite}
.sky-cloudy .sky-sun,.sky-rain .sky-sun,.sky-storm .sky-sun,.sky-snow .sky-sun,.sky-fog .sky-sun{opacity:.25}
.sky-moon{width:56px;height:56px;right:26px;top:20px;border-radius:50%;box-shadow:-12px 6px 0 0 #f2edd8;transform:rotate(-20deg)}
.sky-stars{inset:0;background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 30% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 55% 18%,#fff,transparent),radial-gradient(1px 1px at 72% 45%,#fff,transparent),radial-gradient(1px 1px at 86% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 35%,#fff,transparent),radial-gradient(1px 1px at 64% 80%,#fff,transparent);animation:skytwinkle 4s ease-in-out infinite}
.sky-cloudy .sky-stars,.sky-rain .sky-stars,.sky-storm .sky-stars,.sky-fog .sky-stars,.sky-snow .sky-stars{opacity:.2}
.sky-cloud{height:46px;border-radius:46px;background:rgba(255,255,255,.85);filter:blur(1px);animation:skydrift linear infinite}
.sky-cloud::before,.sky-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.sky-cloud::before{width:56px;height:56px;left:18px;top:-26px}.sky-cloud::after{width:40px;height:40px;left:62px;top:-16px}
.sky-cloud.c1{width:140px;top:34px;left:-160px;animation-duration:38s}
.sky-cloud.c2{width:110px;top:90px;left:-130px;animation-duration:52s;animation-delay:-20s;opacity:.8}
.sky-cloud.c3{width:170px;top:8px;left:-190px;animation-duration:64s;animation-delay:-40s;opacity:.7}
.sky-cloudy .sky-cloud,.sky-rain .sky-cloud,.sky-fog .sky-cloud{background:rgba(220,226,232,.9)}
.sky-storm .sky-cloud,.sky-night .sky-cloud{background:rgba(120,130,145,.85)}
.sky-art .sky-rain,.sky-art .sky-rain2{inset:-20px 0 0 0;background-image:repeating-linear-gradient(105deg,rgba(255,255,255,.0) 0 9px,rgba(220,235,255,.55) 9px 10px,rgba(255,255,255,0) 10px 22px);background-size:100% 60px;animation:skyfall .5s linear infinite}
.sky-rain2{opacity:.6;background-size:100% 44px;animation-duration:.38s;animation-delay:-.2s}
.sky-art .sky-snow,.sky-art .sky-snow2{inset:-40px 0 0 0;background-image:radial-gradient(2.5px 2.5px at 10% 10%,#fff,transparent),radial-gradient(2px 2px at 35% 40%,#fff,transparent),radial-gradient(3px 3px at 60% 20%,#fff,transparent),radial-gradient(2px 2px at 82% 55%,#fff,transparent),radial-gradient(2.5px 2.5px at 25% 75%,#fff,transparent),radial-gradient(2px 2px at 70% 85%,#fff,transparent);background-size:160px 120px;animation:skysnow 6s linear infinite}
.sky-snow2{background-size:110px 90px;animation-duration:9s;opacity:.7}
.sky-art .sky-fog{inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,0) 0 18px,rgba(255,255,255,.35) 18px 34px);filter:blur(6px);animation:skyfog 14s ease-in-out infinite alternate}
.sky-flash{inset:0;background:#fff;opacity:0;animation:skyflash 7s infinite}
.sky-body{position:relative;padding:16px 18px 54px}
.sky-place{font:700 11px/1 'Noto Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.sky-temp{font:700 clamp(58px,8vw,76px)/1 'Noto Serif',Georgia,serif;margin:8px 0 2px;text-shadow:0 2px 10px rgba(0,0,0,.25);font-variant-numeric:tabular-nums}
.sky-cond{font:600 16px/1.3 'Noto Sans',sans-serif;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.sky-snow .sky-temp,.sky-snow .sky-cond{text-shadow:none}
.sky-tick{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden;white-space:nowrap;padding:9px 0}
.sky-tick-in{display:inline-flex;animation:skytick 48s linear infinite}
.sky-tick-in span{padding-right:60px;font:600 13px/1 'Noto Sans',sans-serif;font-variant-numeric:tabular-nums}
.sky:hover .sky-tick-in{animation-play-state:paused}
.sky-src{margin:6px 2px 16px;font-size:11px;line-height:1.35;color:var(--mute)}
@keyframes skydrift{to{transform:translateX(calc(100vw + 400px))}}
@keyframes skyfall{to{background-position:0 60px}}
@keyframes skysnow{to{background-position:20px 120px}}
@keyframes skyfog{to{transform:translateX(-30px)}}
@keyframes skyglow{50%{transform:scale(1.06)}}
@keyframes skytwinkle{50%{opacity:.6}}
@keyframes skyflash{0%,92%,96%,100%{opacity:0}93%,95%{opacity:.55}}
@keyframes skytick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.sky-art i,.sky-tick-in{animation:none!important}.sky-tick{white-space:normal}.sky-tick-in span+span{display:none}}

/* REALISTIC SKY */
.sky-art{overflow:hidden}
.sk-svg,.sk-fx,.sk-bolt{position:absolute;inset:0;width:100%;height:100%}
.skc{animation:skcdrift linear infinite}
@keyframes skcdrift{from{transform:translate(-420px,var(--y,0))}to{transform:translate(110%,var(--y,0))}}
.sk-fog{animation:skfog 18s ease-in-out infinite alternate}
@keyframes skfog{to{transform:translateX(40px)}}
.sk-stars{animation:skytwinkle 5s ease-in-out infinite}
.sk-bolt{opacity:0;animation:skbolt 8s infinite;filter:drop-shadow(0 0 6px #cfe3ff)}
.sk-flash{position:absolute;inset:0;background:#e9f1ff;opacity:0;animation:skyflash 8s infinite}
@keyframes skbolt{0%,90%,95%,100%{opacity:0}91%,93%{opacity:1}}
.sky-body,.sky-tick{z-index:1}
.sky-temp,.sky-cond,.sky-place{text-shadow:0 2px 12px rgba(0,0,0,.45)}
@media(prefers-reduced-motion:reduce){.skc,.sk-fog,.sk-stars,.sk-bolt,.sk-flash{animation:none!important}}
/* a soft shade behind the words so white numbers read on pale skies */
.sky:not(.sky-snow) .sky-art::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,22,38,.42),rgba(10,22,38,.12) 45%,rgba(10,22,38,0) 70%);pointer-events:none}
.sky-day.sky-cloudy .sky-art::after,.sky-day.sky-fog .sky-art::after{background:linear-gradient(100deg,rgba(10,22,38,.55),rgba(10,22,38,.18) 50%,rgba(10,22,38,0) 75%)}

/* home: the newest story leads under "Kootenai County, today" */
.story-item.lead h3{font-size:clamp(24px,3.4vw,34px);line-height:1.15;margin:6px 0 8px}
.story-item.lead p{font-size:18px;line-height:1.5}
.story-item.lead{padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid var(--rule,#ddd)}
.lead-img{margin:4px 0 8px;border-radius:6px;border:1px solid var(--rule,#ddd)}

.story-item.lead h1.lead-title{font-size:clamp(28px,4.2vw,44px);line-height:1.1;margin:4px 0 10px}
.story-item.lead h1.lead-title a{color:inherit;text-decoration:none}
.lead-dek{font-size:19px;line-height:1.5;margin:0 0 12px;color:var(--ink,#222)}

/* WEATHER CARD (Nov 4 2026) — lake-blue glass to match the bottom nav; replaces the painted sky */
.sky.wx2{color:var(--ink);background:linear-gradient(180deg,#eef5fb,#d6e7f6);border:1.5px solid #9fc0de;box-shadow:0 10px 24px -18px rgba(30,74,110,.55);min-height:0;padding:14px 16px 12px;border-radius:18px;overflow:hidden}
.wx2-night.sky.wx2{background:linear-gradient(180deg,#e3ecf6,#c6d8ec)}
.wx2-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.wx2-eye{color:var(--red)}.wx2-now{color:#1e4a6e;opacity:.7}
.wx2-main{display:flex;align-items:center;gap:14px;margin:6px 0 2px}
.wx2 .wi{width:84px;height:84px;flex:none;overflow:visible}
.wx2-temp{font-family:'Noto Serif',Georgia,serif;font-size:56px;line-height:1;font-weight:700;color:#1e4a6e;font-variant-numeric:tabular-nums}
.wx2-cond{font-weight:700;font-size:15px;margin-top:4px}.wx2-hilo{font-size:13px;color:var(--mute)}
.wx-curve{display:block;width:100%;height:auto;margin:6px 0 4px}
.wx-ct{font-size:10px;font-weight:800;fill:#9e0b0f;text-anchor:middle}.wx-ch{font-size:10px;fill:#1e4a6e;text-anchor:middle;opacity:.8}
.wx2-chips{display:flex;flex-wrap:wrap;gap:6px}
.wx2-chips span{font-size:12px;font-weight:700;color:#1e4a6e;background:rgba(255,255,255,.65);border:1px solid #9fc0de;border-radius:999px;padding:3px 10px}
/* motion: the card settles in, the curve draws itself, the icon lives */
.wx2{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}.wx2.in{opacity:1;transform:none}
.wx2 .wx-line{stroke-dasharray:1;stroke-dashoffset:1}.wx2.in .wx-line{transition:stroke-dashoffset 1.6s .3s ease-out;stroke-dashoffset:0}
.wx2 .wx-area,.wx2 .wx-curve circle,.wx2 .wx-ct{opacity:0}.wx2.in .wx-area,.wx2.in .wx-curve circle,.wx2.in .wx-ct{opacity:1;transition:opacity .6s 1.4s}
.wi-rays{transform-origin:32px 32px;animation:wispin 24s linear infinite}
.wi-sun circle{animation:wipulse 4s ease-in-out infinite;transform-origin:32px 32px}
.wi-cloud{animation:wibob 5s ease-in-out infinite}.wi-cloud2{animation:wibob 7s ease-in-out infinite reverse}
.wi-rain line{animation:widrop 1.1s linear infinite}.wi-rain line:nth-child(2){animation-delay:-.4s}.wi-rain line:nth-child(3){animation-delay:-.75s}
.wi-snow circle{animation:wiflake 2.6s ease-in-out infinite}.wi-snow circle:nth-child(2){animation-delay:-.9s}.wi-snow circle:nth-child(3){animation-delay:-1.7s}
.wi-bolt{animation:wibolt 3.4s infinite}
.wi-fog line{animation:wifog 4s ease-in-out infinite alternate}.wi-fog line:nth-child(2){animation-delay:-2s}
.wi-twinkle circle{animation:skytwinkle 3s ease-in-out infinite}.wi-twinkle circle:nth-child(2){animation-delay:-1s}.wi-moon{animation:wibob 8s ease-in-out infinite}
@keyframes wispin{to{transform:rotate(360deg)}}
@keyframes wipulse{50%{transform:scale(1.05)}}
@keyframes wibob{50%{transform:translateX(3px)}}
@keyframes widrop{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(8px);opacity:0}}
@keyframes wiflake{0%{transform:translate(0,-6px);opacity:0}30%{opacity:1}100%{transform:translate(3px,8px);opacity:0}}
@keyframes wibolt{0%,80%,100%{opacity:0}83%,88%{opacity:1}}
@keyframes wifog{to{transform:translateX(6px)}}
@media(prefers-reduced-motion:reduce){.wx2,.wx2 *{animation:none!important;transition:none!important}.wx2{opacity:1;transform:none}.wx2 .wx-line{stroke-dashoffset:0}.wx2 .wx-area,.wx2 .wx-curve circle,.wx2 .wx-ct{opacity:1}}
/* weather sits right on the page: white, no border, no shadow (Anthony, Nov 4 2026) */
.sky.wx2,.wx2-night.sky.wx2{background:transparent;border:0;box-shadow:none;border-radius:0;padding:4px 0 8px}
.wx2-chips span{background:#fff}
main{padding-top:34px}

/* division standings on the Sports page */
table.stand{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.stand th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:right;padding:4px 6px;border-bottom:1px solid var(--line)}
table.stand th:first-child,table.stand td:first-child{text-align:left}
table.stand td{text-align:right;padding:6px;border-bottom:1px solid var(--line)}
table.stand tr.us td{font-weight:800;color:var(--red);background:#f4f8fc}

.sptabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid var(--ink);margin:4px 0 16px}
.sptabs button{font:700 13px/1 'Noto Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;background:none;border:0;padding:12px 14px 10px;color:var(--mute);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.sptabs button[aria-selected="true"]{color:var(--red);border-bottom-color:var(--red)}

.gtabs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.gtabs button{font:700 12px/1 'Noto Sans',sans-serif;padding:6px 10px;border-radius:999px;border:1px solid #9fc0de;background:#fff;color:#1e4a6e;cursor:pointer}
.gtabs button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.gteam{font:700 20px/1.2 'Noto Serif',Georgia,serif;margin:2px 0 4px}
.gpane{animation:gin .45s ease}@keyframes gin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.gpane{animation:none}}
/* ONE FONT (Anthony, Nov 5 2026: "be all about that one. 6"): Merriweather everywhere; only the Kcounty.Media wordmark keeps Playfair */
html body *:not(.brand):not(.brand *){font-family:'Merriweather',Georgia,serif!important}
body{font-size:16px;line-height:1.65}
h1.sec,.story-item.lead h1.lead-title{font-weight:900;letter-spacing:-.01em}
h2,h3,.gteam,.wx2-temp{font-weight:900}
.story-body p,.lead-dek{font-weight:400;line-height:1.75}
.cityf a,.tabbar a,.tabbar button,.sptabs button,.gtabs button,.wx2-top,.eye,.wx2-chips span{font-weight:700;letter-spacing:.06em}

/* GAMES FEED — a slick digital scoreboard on the front page */
.card.gfeed{background:linear-gradient(160deg,#0f2a42,#1e4a6e 70%,#24577f);color:#fff;border:0;border-radius:18px;padding:14px 16px 10px;overflow:hidden;position:relative;box-shadow:0 14px 30px -18px rgba(15,42,66,.8)}
.card.gfeed::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);pointer-events:none}
.gf-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.gf-live{font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.gf-live i{width:8px;height:8px;border-radius:50%;background:#ff4d4f;box-shadow:0 0 0 0 rgba(255,77,79,.7);animation:gfpulse 1.8s infinite}
@keyframes gfpulse{70%{box-shadow:0 0 0 8px rgba(255,77,79,0)}100%{box-shadow:0 0 0 0 rgba(255,77,79,0)}}
.gf-dots{display:flex;gap:6px}.gf-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s}
.gf-dots button.on{background:#fff;width:22px;border-radius:5px}
.gf-stage{min-height:150px;cursor:pointer}
.gf-slide{animation:gfin .5s cubic-bezier(.2,.8,.2,1)}@keyframes gfin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.gf-team{font-size:22px;font-weight:900;margin:0 0 8px;color:#fff}
.gf-row{padding:8px 0;border-top:1px solid rgba(255,255,255,.12)}
.gf-badge{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-bottom:6px}
.gf-badge.final{background:rgba(255,255,255,.16)}.gf-badge.next{background:var(--red)}
.gf-score{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gf-side{display:flex;justify-content:space-between;align-items:baseline;background:rgba(0,0,0,.22);border-radius:10px;padding:6px 10px;opacity:.7}
.gf-side.win{opacity:1;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.gf-ab{font-weight:900;font-size:15px;letter-spacing:.04em}
.gf-num{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 0 12px rgba(160,210,255,.55)}
.gf-match{display:flex;align-items:center;gap:10px;font-size:20px}.gf-match i{font-size:12px;opacity:.7;font-style:normal}
.gf-line{font-weight:700;font-size:15px}
.gf-when{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12px;margin-top:6px;color:#d6e7f6}
.gf-cd{background:rgba(255,255,255,.14);border-radius:999px;padding:1px 8px;font-weight:700}
.gf-tv{border:1px solid rgba(255,255,255,.4);border-radius:4px;padding:0 6px;font-weight:700;color:#fff}
.gf-bar{height:3px;background:rgba(255,255,255,.12);border-radius:2px;margin:6px 0 8px;overflow:hidden}.gf-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9fc0de,#fff)}
.gf-tick{overflow:hidden;white-space:nowrap;font-size:12px;color:#d6e7f6;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.gf-tick-in{display:inline-block;animation:gftick 40s linear infinite}.gf-tick-in span{margin-right:28px}.gf-tick-in b{color:#fff}
@keyframes gftick{to{transform:translateX(-50%)}}
.card.gfeed .src{color:#9fc0de;margin-top:6px}
@media(prefers-reduced-motion:reduce){.gf-slide,.gf-tick-in,.gf-live i{animation:none}}
.grid.two>aside,.grid.two>section{min-width:0}
.card.gfeed{min-width:0;max-width:100%}
.gf-tick{width:100%;max-width:100%;contain:inline-size}
/* masthead a little thicker, page starts a couple hairs lower (Anthony, Nov 5 2026) */
.mast .brand{padding-top:10px;padding-bottom:8px}
.mast .tag{margin-bottom:8px}
main{padding-top:42px}
main.wrap{padding-top:30px}
.lead-read{display:inline-block;font-weight:900;color:var(--red);text-decoration:none;margin:0 0 14px;border-bottom:2px solid var(--red)}
/* Games feed sits on the white page, like the weather (Anthony, Nov 5 2026) */
.card.gfeed{background:transparent;color:var(--ink);box-shadow:none;border-radius:0;padding:4px 0 8px;border-top:2px solid var(--ink)}
.card.gfeed::before{display:none}
.gf-team{color:var(--ink)}
.gf-row{border-top-color:var(--line)}
.gf-badge.final{background:#e9f1f8;color:#1e4a6e}.gf-badge.next{color:#fff}
.gf-side{background:#f3f7fb;opacity:.65}.gf-side.win{opacity:1;box-shadow:inset 0 0 0 1.5px #1e4a6e}
.gf-num{color:#1e4a6e;text-shadow:none}
.gf-when{color:var(--mute)}.gf-cd{background:#e9f1f8;color:#1e4a6e}.gf-tv{border-color:#9fc0de;color:#1e4a6e}
.gf-dots button{background:#c9d9e8}.gf-dots button.on{background:var(--red)}
.gf-bar{background:#e9f1f8}.gf-bar i{background:linear-gradient(90deg,#9fc0de,var(--red))}
.gf-tick{color:var(--mute)}.gf-tick-in b{color:var(--ink)}
.card.gfeed .src{color:var(--mute)}
/* Weather and Games float on the home page: light grey cards that hover over the page (Anthony, Nov 5 2026) */
.sky.wx2,.wx2-night.sky.wx2,.card.gfeed{background:#f3f4f6;border:0;border-radius:18px;padding:14px 16px 12px;
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 12px 28px -12px rgba(15,23,42,.28);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.sky.wx2:hover,.card.gfeed:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(15,23,42,.06),0 22px 38px -14px rgba(15,23,42,.34)}
.sky.wx2.in{transform:none}.sky.wx2.in:hover{transform:translateY(-4px)}
.card.gfeed{border-top:0;margin-top:18px}
.gf-side{background:#fff}.gf-badge.final,.gf-cd,.gf-bar{background:#e6ebf1}.wx2-chips span{background:#fff}
@media(prefers-reduced-motion:reduce){.sky.wx2:hover,.card.gfeed:hover{transform:none}}
/* WIDER PAGE + AD COLUMN on desktop (Anthony, Nov 5 2026: "three columns like Press Democrat for ad spots", "have the page wider").
   Below 1200px the ad column is hidden and the page stays as it was. Slots are house spots that point to /advertise/ until ads are sold. */
.adrail{display:none}
@media(min-width:1200px){
  .wrap{max-width:1360px}
  .grid.two.has-ads{grid-template-columns:minmax(0,1fr) 360px 300px;gap:28px}
  .adrail{display:flex;flex-direction:column;gap:24px;align-self:stretch}
  .adslot{width:300px}.adslot .adlab{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:4px;text-align:center}
  .adslot a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;text-decoration:none;color:#1e4a6e;background:#f3f4f6;border:1.5px dashed #9fc0de;border-radius:6px;padding:16px}
  .ad-m a{height:250px}.ad-t{position:sticky;top:70px}.ad-t a{height:600px}
  .adslot b{font-size:18px;font-weight:900;color:var(--ink)}.adslot small{font-size:12px;color:var(--mute)}.adslot i{font-style:normal;font-weight:700;color:var(--red);border-bottom:2px solid var(--red)}
  .adslot a:hover{background:#e9f1f8}
}
.adslot a.adimg{display:block;height:auto;padding:0;border:0;background:none;border-radius:6px;overflow:hidden;box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}.adslot a.adimg img{display:block;width:300px;height:auto}
.adframe{display:block;border:0;width:300px;border-radius:6px;box-shadow:0 10px 24px -14px rgba(0,0,0,.45);background:transparent}
/* banner spot under the town strip: 728x90 on laptops, 320x100 on phones */
.adbanner{display:flex;flex-direction:column;align-items:center;margin:0 auto 22px;max-width:100%}
.adbanner .adlab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.adbanner .adhouse{display:flex;gap:14px;align-items:center;justify-content:center;width:728px;max-width:100%;height:90px;text-decoration:none;color:#1e4a6e;background:#f3f4f6;border:1.5px dashed #9fc0de;border-radius:6px;padding:0 14px;text-align:center}
.adbanner .adhouse b{font-weight:900;color:var(--ink)}.adbanner .adhouse small{font-size:12px;color:var(--mute)}.adbanner .adhouse i{font-style:normal;font-weight:700;color:var(--red);border-bottom:2px solid var(--red)}
@media(max-width:759px){.adbanner .adhouse{width:320px;height:100px;flex-direction:column;gap:2px}}
.adbanner .adframe,.adbanner .adimg img{max-width:100%}
.adbanner .adframe{width:auto}
/* desktop: the ad column and the weather/games column trade places (Anthony, Nov 5 2026) */
@media(min-width:1200px){.grid.two.has-ads{grid-template-columns:minmax(0,1fr) 300px 360px}.grid.two.has-ads>.adrail{order:2}.grid.two.has-ads>aside:not(.adrail){order:3}}
/* STAGGERED COLUMNS (Anthony, Nov 5 2026): laptop = story | box ad over the games | weather over the skyscraper.
   Under 1200px the box ads are hidden and both asides stack in the right column; phones show the weather, then the games, then the story. */
.adslot{display:none}
.grid.two.has-ads>aside.colA,.grid.two.has-ads>aside.colB{display:flex;flex-direction:column;gap:18px;min-width:0}
@media(min-width:820px) and (max-width:1199px){.grid.two.has-ads>section{grid-column:1;grid-row:1/span 2}.grid.two.has-ads>.colB{grid-column:2;grid-row:1}.grid.two.has-ads>.colA{grid-column:2;grid-row:2}}
@media(max-width:819px){.grid.two.has-ads>.colB{order:-2}.grid.two.has-ads>.colA{order:-1}}
@media(min-width:1200px){
  .grid.two.has-ads{grid-template-columns:minmax(0,1fr) 300px 360px}
  .grid.two.has-ads>section{grid-column:1}.grid.two.has-ads>.colA{grid-column:2;grid-row:1;order:0}.grid.two.has-ads>.colB{grid-column:3;grid-row:1;order:0}
  .adslot{display:block}.ad-t{position:static}
  .colA .card.gfeed{margin-top:0}
}
.adslot,.adbanner{transition:opacity .65s ease,transform .65s ease,filter .65s ease}.adfade{opacity:0;transform:translateY(8px) scale(.985);filter:blur(2px)}
@media(prefers-reduced-motion:reduce){.adfade{transform:none;filter:none}}
/* commercial in an ad spot (switched on per ad in data/ads.json): the film on top at 16:9, the name and a watch button under it */
.advid{display:flex;flex-direction:column;background:#1b1214;border-radius:6px;overflow:hidden;box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.advid video{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;display:block;background:#0f1114}
.advid .vinfo{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:10px 12px;color:#fbf6ea}
.advid .vinfo small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#e6a93c;font-weight:800}
.advid .vinfo b{font-size:18px;font-weight:900}
.advid .vinfo a{background:#fbf6ea;color:#1b1214;font-weight:800;font-size:12px;text-decoration:none;border-radius:8px;padding:8px 10px;text-align:center}
.adslot .advid .vinfo b{color:#fbf6ea}
.adslot .advid .vinfo a,.ad-t .advid .vinfo a,.ad-m .advid .vinfo a{height:auto;display:block;border:0;background:#fbf6ea;padding:9px 10px;flex:none}
.adslot .advid .vinfo a:hover{background:#fff}
.ad-t .advid .vinfo{justify-content:flex-start;padding-top:22px}
.ad-m .advid .vinfo{flex-direction:row;align-items:center;justify-content:space-between;padding:8px 10px;gap:8px}
.ad-m .advid .vinfo small{display:none}.ad-m .advid .vinfo b{font-size:15px}

/* Ads inside a story (Nov 5 2026): a box between paragraphs, on phones too, and one banner after the story */
article .story-ad{display:block;width:300px;margin:30px auto;padding-top:14px;border-top:1px solid var(--line)}
article .story-ad-b{margin:26px auto 8px}
.story-sub{font:700 23px/1.25 'Playfair Display',Georgia,serif;color:var(--ink);margin:30px 0 10px}
article .story-ad .adlab{display:block;font:600 10px/1.4 Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-align:center;margin-bottom:6px}
/* Story page on laptops (Anthony, Nov 5 2026): the story, then an ad column on the right — a box at the top and a
   skyscraper that stays in view while reading. Under 1200px the column is gone; phones keep the ads inside the story. */
.story-rail{display:none}
@media(min-width:1200px){
  .story-lay{display:grid;grid-template-columns:minmax(0,720px) 300px;justify-content:space-between;gap:48px}
  .story-rail{display:flex;flex-direction:column;gap:28px;padding-top:18px}
  .story-rail .ad-t{position:sticky;top:84px}
}

/* pictures inside a story body (a paragraph that is only a kcounty.media picture link) */
.story-fig{margin:26px 0}.story-fig img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 10px 26px -16px rgba(35,26,43,.5)}
.story-fig figcaption{font:600 13px/1.4 Manrope,system-ui,sans-serif;color:var(--mute);margin-top:8px}
/* the presenting sponsor strip under the masthead (home page) */
.adsponsor{margin-bottom:26px}.adsponsor .adlab{color:#a8853a;letter-spacing:.2em}
.adsponsor .adframe{border-radius:6px;box-shadow:0 10px 30px -12px rgba(11,14,20,.55)}
/* COLUMN FIX (Anthony, Nov 5 2026: "the columns are all messed up — ads, weather, games")
   laptop: story | box ad over games | weather over the tall ad — two even side columns, ads centered in them
   tablet / small laptop: one right column, weather then games stacked tight (no gap) */
@media(min-width:1200px){
  .grid.two.has-ads{grid-template-columns:minmax(0,1fr) 330px 330px;gap:28px}
  .grid.two.has-ads>.colA,.grid.two.has-ads>.colB{align-self:start}
  .grid.two.has-ads .adslot{align-self:center}
}
@media(min-width:820px) and (max-width:1199px){
  .grid.two.has-ads{grid-template-rows:auto 1fr}
  .grid.two.has-ads>.colB,.grid.two.has-ads>.colA{align-self:start}
}
.card.gfeed{overflow:hidden}
.gf-score{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.gf-side{min-width:0}
.gf-match{flex-wrap:wrap}
/* STORY PAGE, THREE COLUMNS on laptops (Anthony, Nov 5 2026: "that needs another column"), same as the home page:
   story | box ad over the games | weather over the tall ad that stays in view */
@media(min-width:1200px){
  .story-lay{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto 1fr;justify-content:stretch;gap:22px 40px;align-items:start}
  .story-lay>article[data-live="story"]{grid-column:1;grid-row:1/span 2}.story-rail.rB{grid-column:2;grid-row:1}.story-rail.rA{grid-column:2;grid-row:2}
}
@media(min-width:1320px){
  .story-lay{grid-template-columns:minmax(0,1fr) 330px 330px;grid-template-rows:auto;gap:28px}
  .story-lay>article[data-live="story"]{grid-row:1}.story-rail.rA{grid-column:2;grid-row:1}.story-rail.rB{grid-column:3;grid-row:1}
}
@media(min-width:1200px){
  .story-lay>article[data-live="story"]{max-width:none}
  .story-rail{gap:22px;padding-top:6px;min-width:0}
  .story-rail .adslot{align-self:center}
  .story-rail.rA .card.gfeed{margin-top:0}
  .story-rail.rB{align-self:stretch}
}
/* home + town pages: three columns only once there is room (1320px+); 1200-1319 = story | one side column */
@media(min-width:1200px) and (max-width:1319px){
  .grid.two.has-ads{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto 1fr;gap:22px 36px}
  .grid.two.has-ads>section{grid-column:1;grid-row:1/span 2}.grid.two.has-ads>.colB{grid-column:2;grid-row:1}.grid.two.has-ads>.colA{grid-column:2;grid-row:2}
}
/* MORE STORIES card under the weather */
.card.more{padding:16px 18px 6px;border-radius:16px;background:#fff;box-shadow:0 10px 26px -18px rgba(30,74,110,.45);border:1px solid var(--line)}
.card.more h3{font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:0 0 6px}
.more-item{display:block;padding:12px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.more-item:first-of-type{border-top:0}
.more-item small{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#1e4a6e;margin-bottom:3px}
.more-item b{display:block;font-size:16px;line-height:1.25;font-weight:900}
.more-item span{display:block;font-size:13.5px;line-height:1.45;color:var(--mute);margin-top:4px}
.more-item i{display:inline-block;font-style:normal;font-size:12px;font-weight:800;color:var(--red);margin-top:5px}
.more-item:hover b{color:var(--red)}
@media(max-width:819px){.grid.two.has-ads .card.more{display:none}}
.more-sm{margin-top:28px}@media(min-width:1200px){.more-sm{display:none!important}}
.story-rail .card.more{margin-top:0}
/* SIDE COLUMNS, Nov 5 2026 (Anthony): middle = weather over games over the tall ad; right = more stories over the box ad.
   When the side columns stack (smaller laptops, tablets, phones) the weather column comes first. */
@media(min-width:820px) and (max-width:1199px){.grid.two.has-ads>.colA{grid-row:1}.grid.two.has-ads>.colB{grid-row:2}}
@media(min-width:1200px) and (max-width:1319px){
  .grid.two.has-ads>.colA{grid-column:2;grid-row:1}.grid.two.has-ads>.colB{grid-column:2;grid-row:2}
  .story-rail.rA{grid-column:2;grid-row:1}.story-rail.rB{grid-column:2;grid-row:2}
}
@media(max-width:819px){.grid.two.has-ads>.colA{order:-2}.grid.two.has-ads>.colB{order:-1}}
@media(min-width:1200px){.story-rail.rB{align-self:start}.story-rail.rA{align-self:stretch}.grid.two.has-ads>.colA .card.gfeed{margin-top:0}}
/* home: second picture story — a step down from the lead, with a rule above it */
.story-item.lead2{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.story-item.lead2 h1.lead-title{font-size:clamp(24px,3vw,34px)}
/* COLUMN TINTS (Anthony, Nov 5 2026: "lightly make each column a very light shade of different colors that would still
   show the background pictures"). See-through washes, so the lake map behind every page still shows. */
.grid.two.has-ads>section,.grid.two.has-ads>aside.colA,.grid.two.has-ads>aside.colB{border-radius:18px;padding:14px}
.grid.two.has-ads>section{background:rgba(30,74,110,.12);box-shadow:inset 0 0 0 1px rgba(30,74,110,.16)}
.grid.two.has-ads>aside.colA{background:rgba(46,125,80,.14);box-shadow:inset 0 0 0 1px rgba(46,125,80,.18)}
.grid.two.has-ads>aside.colB{background:rgba(201,150,40,.16);box-shadow:inset 0 0 0 1px rgba(201,150,40,.22)}
/* TOWN BAR, MODERN (Anthony, Nov 5 2026: "make the cities not look newspaper … fancy … do something when you hover").
   Glass pills in lake blue; on hover a pill lifts, fills with a blue-to-teal gradient and a light sweeps across it.
   The town you are on stays filled. Placed last so it wins over the older newspaper rules above. */
.townbar,body:has(.townbg) .townbar{background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(16px) saturate(170%)!important;backdrop-filter:blur(16px) saturate(170%)!important;border-bottom:1px solid rgba(30,74,110,.10)!important;padding:10px 0!important}
.townbar .cityf{gap:8px!important;padding:2px 4px 4px!important}
.townbar .cityf a{position:relative;overflow:hidden;isolation:isolate;flex:none;
  font:600 14px/1 Manrope,'Noto Sans',system-ui,sans-serif!important;letter-spacing:.01em!important;text-transform:none!important;text-decoration:none!important;
  color:#1e4a6e!important;background:rgba(30,74,110,.06)!important;border:1px solid rgba(30,74,110,.16)!important;border-left:1px solid rgba(30,74,110,.16)!important;
  border-radius:999px!important;padding:9px 16px!important;box-shadow:0 1px 2px rgba(30,74,110,.06)!important;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,color .2s ease,border-color .2s ease}
.townbar .cityf a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(120deg,#1e4a6e,#2b7a9e 60%,#3aa6a0);opacity:0;transition:opacity .25s ease}
.townbar .cityf a::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);opacity:0}
.townbar .cityf a:hover,.townbar .cityf a:focus-visible{color:#fff!important;border-color:transparent!important;transform:translateY(-2px);box-shadow:0 8px 20px rgba(30,74,110,.28)!important;outline:none}
.townbar .cityf a:hover::before,.townbar .cityf a:focus-visible::before{opacity:1}
.townbar .cityf a:hover::after{opacity:1;animation:kcmSweep .7s ease forwards}
.townbar .cityf a.on{color:#fff!important;border-color:transparent!important;box-shadow:0 4px 14px rgba(30,74,110,.25)!important}
.townbar .cityf a.on::before{opacity:1}
@keyframes kcmSweep{to{left:120%}}
@media(prefers-reduced-motion:reduce){.townbar .cityf a{transition:none}.townbar .cityf a:hover{transform:none}.townbar .cityf a:hover::after{animation:none;opacity:0}}
html body .townbar .cityf a{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',system-ui,sans-serif!important;font-weight:600!important;letter-spacing:.005em!important}
/* TOWNS SLIDE OUT (Anthony, Nov 6 2026). Closed: only the current town and a Towns button. Open: the rest slide out in turn. */
.townbar .cityf{gap:0!important;justify-content:center!important;align-items:center}
.townbar .cityf a,.townbar .cityf a:first-child,.townbar .cityf a:last-child{margin:0 4px!important;max-width:260px;white-space:nowrap;
  transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .35s ease,padding .5s cubic-bezier(.2,.8,.2,1),margin .5s cubic-bezier(.2,.8,.2,1),transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,color .2s ease!important;
  transition-delay:calc(var(--i,0) * 45ms)!important}
.townbar .cityf:not(.open) a:not(.on){max-width:0!important;opacity:0!important;padding-left:0!important;padding-right:0!important;margin:0!important;border-width:0!important;pointer-events:none;transition-delay:0s!important}
.townbar .cityf .tw-tog{flex:none;margin:0 4px;border:1px dashed rgba(30,74,110,.35);background:rgba(255,255,255,.7);color:#1e4a6e;border-radius:999px;padding:9px 14px;cursor:pointer;
  font:600 14px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif!important;transition:background .2s ease,color .2s ease}
.townbar .cityf .tw-tog i{display:inline-block;font-style:normal;margin-left:4px;transition:transform .35s ease}
.townbar .cityf.open .tw-tog i{transform:rotate(180deg)}
.townbar .cityf .tw-tog:hover{background:#1e4a6e;color:#fff}
@media(prefers-reduced-motion:reduce){.townbar .cityf a,.townbar .cityf a:first-child,.townbar .cityf a:last-child{transition:none!important}}
/* DESKTOP BAR (Anthony, Nov 6 2026): longer on wide screens, about 92px a section, Home still the raised middle. */
.tabbar.wide{width:min(calc(var(--n,5) * 92px + 48px),calc(100% - 40px))!important;grid-template-columns:repeat(var(--n,5),1fr)!important}
.tabbar.wide a,.tabbar.wide button{white-space:nowrap}
/* TOWN KALENDAR (Nov 6 2026): county-wide events mixed into a town's calendar wear a small County tag. */
.town-kal{margin-top:18px}.kk-head{margin:0 0 4px}
.kk-county{display:inline-block;font:700 10px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif!important;letter-spacing:.08em;text-transform:uppercase;color:#1e4a6e;background:rgba(30,74,110,.10);border-radius:999px;padding:3px 7px;vertical-align:2px}
.games li b .kk-county,.kk-county{display:inline-block!important;width:auto!important;margin:0 6px 0 0!important}
/* MASTHEAD WEATHER (Anthony, Nov 6 2026). A lake-glass card at the right of the masthead on wide screens; a slim centered
   strip under the tagline on smaller ones. The column weather card stands down. */
.mast .wrap{position:relative}
.mast-wx{display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100% - 8px);margin:8px auto 6px;padding:10px 16px 10px 12px;border-radius:20px;text-decoration:none!important;color:#1e4a6e!important;
  background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(214,231,246,.72));-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(30,74,110,.18);box-shadow:0 12px 28px -16px rgba(30,74,110,.55),inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;transform:translateY(-6px);transition:opacity .6s ease,transform .6s ease,box-shadow .25s ease}
.mast-wx.in{opacity:1;transform:none}
.mast-wx:hover{box-shadow:0 18px 34px -16px rgba(30,74,110,.65),inset 0 1px 0 rgba(255,255,255,.9);transform:translateY(-2px)}
.mast-wx .mw-ic svg{width:54px;height:54px;display:block}
.mast-wx .mw-t,.mast-wx .mw-lake{display:grid;line-height:1.15;text-align:left}
.mast-wx .mw-eye{font:700 10px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif!important;letter-spacing:.14em;text-transform:uppercase;color:#9e0b0f}
.mast-wx .mw-t b{font:900 34px/1 'Merriweather',Georgia,serif;color:#1e4a6e;font-variant-numeric:tabular-nums}
.mast-wx .mw-c{font:600 13px/1.25 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif!important;color:#1d2a36}
.mast-wx small{font:500 11.5px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif!important;color:#55606b}
.mast-wx .mw-lake{padding-left:14px;border-left:1px solid rgba(30,74,110,.18)}
.mast-wx .mw-lake b{font:800 18px/1.15 'Merriweather',Georgia,serif;color:#1e4a6e}
.sky-moved+.sky-src{display:none}
@media(min-width:1180px){.mast-wx{position:absolute;right:0;top:34px;margin:0}}
@media(max-width:600px){.mast-wx{gap:10px;padding:8px 12px 8px 8px}.mast-wx .mw-ic svg{width:42px;height:42px}.mast-wx .mw-t b{font-size:26px}.mast-wx small{display:none}.mast-wx .mw-lake b{font-size:15px}}
@media(prefers-reduced-motion:reduce){.mast-wx{transition:none;opacity:1;transform:none}}
/* CONDENSED HEADER (Anthony, Nov 6 2026). A slim glass bar with the name slides down once the masthead scrolls away. */
.minibar{position:fixed;left:0;right:0;top:0;z-index:45;height:52px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  border-bottom:1px solid rgba(30,74,110,.14);box-shadow:0 6px 18px -12px rgba(30,74,110,.45);transform:translateY(-110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
body.mini .minibar{transform:none}
.minibar .wrap{height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.minibar .mb-brand{text-decoration:none}
.minibar .mb-wx{position:absolute;right:0;font:700 14px/1 'Merriweather',Georgia,serif;color:#1e4a6e;text-decoration:none;white-space:nowrap}
.minibar .mb-wx:empty{display:none}
body.mini .townbar{top:52px!important;transition:top .35s cubic-bezier(.2,.8,.2,1)}
@media(max-width:600px){.minibar{height:46px}.minibar .mb-wx{font-size:12px;right:4px}body.mini .townbar{top:46px!important}}
@media(max-width:420px){.minibar .mb-wx{display:none}}
@media(prefers-reduced-motion:reduce){.minibar,body.mini .townbar{transition:none}}
@media print{.minibar{display:none}}

/* COLUMNS ON EVERY PAGE (Anthony, Nov 6 2026). Pages that were one column get the home layout from kcm.js (.kcm-cols);
   on phones their own content comes first and the weather / games / stories follow. Story pages tint their three
   columns the same blue / green / gold as the home page. */
@media(max-width:819px){.grid.two.has-ads.kcm-cols>aside.colA,.grid.two.has-ads.kcm-cols>aside.colB{order:1}}
@media(min-width:1200px){
  .story-lay>article[data-live="story"],.story-rail{border-radius:18px;padding:14px}
  .story-lay>article[data-live="story"]{background:rgba(30,74,110,.12);box-shadow:inset 0 0 0 1px rgba(30,74,110,.16)}
  .story-rail.rA{background:rgba(46,125,80,.14);box-shadow:inset 0 0 0 1px rgba(46,125,80,.18)}
  .story-rail.rB{background:rgba(201,150,40,.16);box-shadow:inset 0 0 0 1px rgba(201,150,40,.22)}
}
/* Directory in the column layout: the search row stacks so nothing runs past the blue column. */
.kcm-cols .search{grid-template-columns:minmax(0,1fr)!important}
.kcm-cols .search>*{min-width:0;max-width:100%}
/* MASTHEAD WEATHER + LAKE, NO BOX (Anthony, Nov 6 2026: "no border around the weather and lake statistics, just the
   background of the page"). No card, no border, no shadow, no frosted glass; the numbers sit on the page itself. */
.mast-wx,.mast-wx:hover{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.mast-wx:hover{transform:none}
/* TOWNS DON'T CUT THE RIVER (Anthony, Nov 6 2026: "make it so the towns do not cut off the river that goes south of the
   masthead"). At the top of the page the town strip has no white band, no blur and no line, so the Spokane runs on
   behind it. Once the reader scrolls (body.mini) the strip gets its glass back so the pills stay readable over stories.
   Town pages keep their own white masthead panel, as set Nov 4. */
body:not(:has(.townbg)) .townbar{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom-color:transparent!important}
body.mini:not(:has(.townbg)) .townbar{background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(16px) saturate(170%)!important;backdrop-filter:blur(16px) saturate(170%)!important;border-bottom-color:rgba(30,74,110,.10)!important}
/* KCOUNTY.MEDIA WORDMARK (Anthony, Nov 6 2026, logo 1 "on the lake"): Kcounty in black at 900, the dot and an italic
   Media in lake blue. The lake behind it stays exactly as it was. */
/* TAGLINE (Anthony, Nov 6 2026): "The fresh source for Kootenai County" replaces Info ~ Fun ~ Biz. Longer line, so
   tighter spacing; on phones it may wrap to two lines rather than be cut off. */
.mast .tag{letter-spacing:.16em!important}
@media(max-width:600px){.mast .tag{letter-spacing:.05em!important;font-size:10.5px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}}
/* SCROLL BAR NAME ON THE LAKE (Anthony, Nov 6 2026: "when scrolling the top bar needs to have the lake behind the name").
   Same lake, same faint blue as the masthead, sized to fit the bar; the name keeps the masthead's weights. */
/* TOP STORIES CARD, middle column of the home page (Anthony, Nov 6 2026). */
.card.top-rest{padding:16px 18px 6px}
.top-rest .tr-h{font:700 12px/1 'Noto Sans',Inter,sans-serif!important;letter-spacing:.2em;text-transform:uppercase;color:#9e0b0f;padding-bottom:10px;border-bottom:2px solid #111;margin-bottom:2px}
.top-rest .tr-item{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(30,74,110,.14);text-decoration:none;color:inherit}
.top-rest .tr-item:last-child{border-bottom:0}
.top-rest .tr-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.top-rest .tr-k{font:700 10.5px/1 'Noto Sans',Inter,sans-serif!important;letter-spacing:.14em;text-transform:uppercase;color:#1e4a6e}
.top-rest .tr-t{font:700 18px/1.22 'Playfair Display',Georgia,serif!important;color:#111}
.top-rest .tr-item:hover .tr-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.top-rest .tr-d{font-size:13.5px;line-height:1.45;color:#4a4553;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.top-rest .tr-r{font-size:12.5px;font-weight:700;color:#9e0b0f}
.top-rest .tr-img{flex:0 0 84px;width:84px;height:84px;object-fit:cover;object-position:left top;border-radius:10px;box-shadow:0 0 0 1px rgba(30,74,110,.12)}
/* MASTHEAD SPLIT (Anthony, Nov 6 2026: "Lake info stays right, weather moves left"). On laptops the strip spans the
   masthead: weather on the left of the name, Lake CDA on the right. Only the two blocks take clicks, so the name
   between them stays a link home. Phones keep the one centered strip. */
@media(min-width:1180px){
  .mast-wx{left:0!important;right:0!important;width:auto!important;max-width:none!important;justify-content:flex-start;padding:10px 0!important;pointer-events:none}
  .mast-wx>*{pointer-events:auto}
  .mast-wx .mw-lake{margin-left:auto;border-left:0!important;padding-left:0!important;text-align:right}
}

/* THE WAY BACK (Nov 6 2026): labelled Back at the header's far left on every page but Home, like the AE apps */
.kcm-back{flex:none;display:inline-flex;align-items:center;gap:3px;height:34px;padding:0 12px 0 7px;border-radius:11px;border:1.5px solid rgba(30,74,110,.28);
 background:#fff;color:#1e4a6e;font:700 13.5px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kcm-back:hover{background:#eef3f8}
.kcm-back:focus-visible{outline:3px solid #1e4a6e;outline-offset:2px}
.kcm-back svg{width:18px;height:18px;flex:none}
.mast .row:has(.kcm-back){justify-content:flex-start}
.mast .row:has(.kcm-back)>span:last-child{margin-left:auto}
.minibar .kcm-back{position:absolute;left:0;top:50%;transform:translateY(-50%);height:32px}
@media(max-width:600px){.kcm-back{height:32px;padding:0 10px 0 6px;font-size:12.5px}.minibar .kcm-back{left:4px;height:30px;padding:0 7px}.minibar .kcm-back span{display:none}}
@media print{.kcm-back{display:none}}

/* THE LOGO MARK IS THE MASTHEAD (Anthony, Nov 6 2026): logo 4, the upright Lake CdA on the left, a thin line, then
   Kcounty.Media with the tagline under it, set at the far left. A thin gray line closes the masthead. */
.mast{border-bottom:0!important}
.mast>.wrap{border-bottom:1px solid #cfcfcf;padding-bottom:4px}
/* laptops: lake level sits over the temperature, at the right */
@media(min-width:1180px){
  .mast-wx{left:auto!important;right:0!important;top:auto!important;bottom:22px!important;display:grid!important;grid-template-columns:auto auto;column-gap:12px!important;row-gap:8px!important;align-items:center;justify-content:end!important;width:auto!important;padding:0!important}
  .mast-wx .mw-lake{grid-column:2;grid-row:1;margin:0!important;border:0!important;padding:0!important;text-align:left!important}
  .mast-wx .mw-ic{grid-column:1;grid-row:2}
  .mast-wx .mw-t{grid-column:2;grid-row:2}
}
/* laptops: the section nav sits right under the masthead and the town bar steps out (for now). Phones keep the
   floating nav at the bottom and the town bar. */
@media(min-width:900px){
  .townbar{position:relative!important;top:auto!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:0!important;padding:10px 0 0!important}
  html body .tabbar.top-nav{position:relative!important;left:auto!important;bottom:auto!important;top:auto!important;transform:none!important;margin:14px auto 6px!important}
  html body .tabbar.top-nav a.core{margin-top:-22px!important}
}
/* Home in the nav: the lake stands the right way, north up, like the logo mark (Nov 6 2026) */
html body .tabbar a.core .ring img.up{width:auto!important;height:46px!important}
@media(max-width:600px){html body .tabbar a.core .ring img.up{height:44px!important}}
/* SCROLL BAR = THE LOGO MARK (Anthony, Nov 6 2026): when scrolling, the slim top bar shows the logo (upright lake | line |
   Kcounty.Media), and on laptops the section nav stays right below it. */
@media(min-width:900px){
  html body .tabbar.top-nav{position:sticky!important;top:60px!important;z-index:44!important}
  html body .minibar{height:60px}
  body.mini .tabbar.top-nav a.core{margin-top:-8px!important}
}

/* THE LAND UNDER THE WATER (Anthony, Nov 6 2026: "lay the terrain of the land underneath, the mountains and prairies that
   go with the lake and rivers"). Shaded relief from USGS elevation, fitted to the same lake-and-rivers map. It now sits on
   the page itself, under every card and word (the old layer rode over the text). The masthead keeps only the lake and
   rivers: a white band covers the terrain down to the masthead's gray line. Positions come from kcm.js (mapBg). */
.brand::before{display:none!important;content:none!important}
html{background:url(/assets/art/lake-cda-watershed-bg.svg) var(--mx,0) var(--my,0)/var(--mw,0) var(--mh,0) no-repeat,#fff!important}
/* Terrain taken off (Anthony, Nov 6 2026: "ditch the terrain"); the lake and rivers stay, under the words. */

/* TOWNS IN THE MASTHEAD (Anthony, Nov 6 2026): the town pills sit at the bottom of the masthead, just above its gray line,
   on phones and laptops. They scroll away with the masthead. */
html body .mast .townbar{position:static!important;top:auto!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;padding:4px 0 10px!important;transition:none!important}
html body .mast .townbar>.wrap{padding:0!important;max-width:none!important}
@media(min-width:1180px){.mast-wx{bottom:auto!important;top:56px!important}}
.mast>.wrap{display:flex;flex-direction:column}
.mast>.wrap>.townbar{order:9}
.mast>.wrap>.mast-wx{align-self:center}

/* CALENDAR LISTS (Anthony, Nov 6 2026): each event gets its own very light background, alternating, so they read apart */
[data-live="kalendar"] ul.wk>li{padding:10px 12px!important;border-radius:10px;border-bottom:0!important;margin:0 0 6px!important}
[data-live="kalendar"] ul.wk>li:nth-child(4n+1){background:#eef5fb}
[data-live="kalendar"] ul.wk>li:nth-child(4n+2){background:#f0f7ef}
[data-live="kalendar"] ul.wk>li:nth-child(4n+3){background:#fbf5ea}
[data-live="kalendar"] ul.wk>li:nth-child(4n+4){background:#f5f0f8}

/* LAPTOPS: THE NAV BAR IS THE ONLY THING THAT STAYS AT THE TOP (Anthony, Nov 6 2026), with Back at its far left.
   The slim name bar is off on laptops; phones keep it, and keep the nav at the bottom. */
.tabbar .kcm-back{display:none}
@media(min-width:900px){
  html body .minibar{display:none!important}
  html body .tabbar.top-nav{top:14px!important}
  .mast .kcm-back{display:none!important}
  html body .tabbar.top-nav .kcm-back.nav-back{display:inline-flex;position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:2}
  html body .tabbar.top-nav:has(.nav-back){padding-left:100px!important;width:min(calc(var(--n,5) * 92px + 148px),calc(100% - 40px))!important}
}
/* Bigger nav icons (Anthony, Nov 6 2026) */
html body .tabbar img.ic{width:40px!important;height:40px!important;border-radius:10px}
@media(min-width:900px){html body .tabbar img.ic{width:48px!important;height:48px!important;border-radius:12px}}

/* DOCK THE NAV ANYWHERE (laptops). The grip sits at the bar's right end; the bar docks top (default), bottom, left or right. */
.nav-grip{display:none}
@media(min-width:900px){
  html body #tabbar.top-nav .nav-grip{display:inline-flex;position:absolute;right:12px;top:50%;transform:translateY(-50%);width:26px;height:44px;align-items:center;justify-content:center;
    border:0;background:none;padding:0;color:#1e4a6e;opacity:.55;cursor:grab;touch-action:none;border-radius:8px}
  html body #tabbar.top-nav .nav-grip:hover{opacity:1;background:rgba(30,74,110,.08)}
  html body #tabbar.top-nav .nav-grip svg{width:10px;height:18px}
  html body #tabbar.top-nav{width:min(calc(var(--n,5) * 92px + 188px),calc(100% - 40px))!important;padding-right:44px!important}
  html body #tabbar.top-nav.dragging{position:fixed!important;transform:none!important;margin:0!important;bottom:auto!important;opacity:.92;transition:none!important;cursor:grabbing;z-index:60!important}
  /* bottom */
  html.nav-bottom body #tabbar.top-nav:not(.dragging){position:fixed!important;top:auto!important;bottom:16px!important;left:50%!important;transform:translateX(-50%)!important;margin:0!important}
  html.nav-bottom body{padding-bottom:140px}
  /* left and right: one tall column */
  html.nav-left body #tabbar.top-nav:not(.dragging),html.nav-right body #tabbar.top-nav:not(.dragging){position:fixed!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;margin:0!important;
    width:104px!important;padding:46px 6px 10px!important;grid-template-columns:1fr!important;grid-auto-flow:row!important;row-gap:2px;max-height:calc(100vh - 24px);overflow-y:auto;overflow-x:hidden;border-radius:24px}
  html.nav-left body #tabbar.top-nav:not(.dragging){left:12px!important;right:auto!important}
  html.nav-right body #tabbar.top-nav:not(.dragging){right:12px!important;left:auto!important}
  html.nav-left body,html.nav-right body{transition:padding .2s}
  html.nav-left body{padding-left:118px}
  html.nav-right body{padding-right:118px}
  html.nav-left body #tabbar.top-nav .nav-grip,html.nav-right body #tabbar.top-nav .nav-grip{top:8px;right:auto;left:50%;transform:translateX(-50%) rotate(90deg)}
  html.nav-left body #tabbar.top-nav .nav-back,html.nav-right body #tabbar.top-nav .nav-back{position:static;transform:none;margin:0 auto 6px;justify-self:center}
  html.nav-left body #tabbar.top-nav a.core,html.nav-right body #tabbar.top-nav a.core{margin-top:4px!important}
  html.nav-left body #tabbar.top-nav a.core .ring,html.nav-right body #tabbar.top-nav a.core .ring{width:58px;height:58px}
}
@media(min-width:900px){
  html.nav-left body #tabbar.top-nav img.ic,html.nav-right body #tabbar.top-nav img.ic{width:38px!important;height:38px!important}
  html.nav-left body #tabbar.top-nav a,html.nav-right body #tabbar.top-nav a{padding:4px 0 3px!important;font-size:10.5px!important}
  html.nav-left body #tabbar.top-nav a.core .ring,html.nav-right body #tabbar.top-nav a.core .ring{width:50px;height:50px}
  html.nav-left body #tabbar.top-nav a.core .ring img.up,html.nav-right body #tabbar.top-nav a.core .ring img.up{height:38px!important}
  html.nav-left body .mast-wx,html.nav-right body .mast-wx{right:16px!important}
}

/* LAPTOPS, Nov 6 2026 (Anthony): the nav docks on the LEFT by default ("it looks great there"); the slim bar that stays at
   the top comes back with the logo and Back in it, and Back leaves the nav bar. */
@media(min-width:900px){
  html body .minibar{display:block!important;height:60px}
  html body .mast .kcm-back{display:inline-flex!important}
  html body #tabbar.top-nav .kcm-back.nav-back{display:none!important}
  html body #tabbar.top-nav{width:min(calc(var(--n,5) * 92px + 88px),calc(100% - 40px))!important;padding-left:24px!important;top:72px!important}
  html.nav-left body #tabbar.top-nav:not(.dragging),html.nav-right body #tabbar.top-nav:not(.dragging){top:calc(50% + 30px)!important;max-height:calc(100vh - 84px);padding-left:6px!important}
}

/* RESOURCES widget (top of the right column) */
.card.res{padding:16px 16px 12px!important}
.res-h{margin:0 0 8px!important;font-size:13px!important;letter-spacing:.14em;text-transform:uppercase;color:#9e0b0f!important}
.res-h small{display:block;letter-spacing:.06em;color:#1e4a6e;font-size:12px;margin-top:2px}
.res-911{display:block;text-align:center;background:#9e0b0f;color:#fff!important;border-radius:10px;padding:9px 10px;font-weight:700;text-decoration:none;margin:0 0 10px}
.res-911 b{font-size:1.15em}
.res-sw{display:flex;gap:6px;margin:0 0 8px}
.res-sw button{flex:1;border:1.5px solid #1e4a6e;background:#fff;color:#1e4a6e;border-radius:999px;padding:6px 8px;font:700 12.5px/1.1 system-ui,sans-serif;cursor:pointer}
.res-sw button.on{background:#1e4a6e;color:#fff}
.res-q{width:100%;box-sizing:border-box;border:1px solid #cfd8e0;border-radius:10px;padding:8px 10px;font-size:14px;margin:0 0 8px}
.res-cats{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}
.res-cats button{border:0;background:#eef3f8;color:#1e4a6e;border-radius:999px;padding:5px 10px;font:600 12px/1.1 system-ui,sans-serif;cursor:pointer}
.res-cats button.on{background:#1e4a6e;color:#fff}
.res-note{font-size:12.5px;color:#55606b;margin:0 0 6px}
.res-list{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto}
.res-list li{padding:8px 2px;border-bottom:1px solid #e6ebef;display:grid;gap:2px}
.res-list li:last-child{border-bottom:0}
.res-list b{font-size:14px;line-height:1.25}
.res-list span{font-size:12.5px;color:#55606b}
.res-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.res-acts a{font-weight:700;font-size:13px;color:#1e4a6e;text-decoration:none}
.res-call{color:#9e0b0f!important}

/* SPORTS PAGE: the team cards sit inside the main column now (the side columns were added), so they wrap to fit it
   instead of spilling into the Events column (Nov 6 2026). */
[data-live="sports-full"] .sppane .grid.three{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;gap:14px!important}
[data-live="sports-full"] .sppane .grid.three>*{min-width:0}
[data-live="sports-full"] .games li{flex-wrap:nowrap}
@media(max-width:899px){html body #tabbar .nav-grip{display:none!important}}

/* Calendar event colors run on across the days (one counter), a touch stronger so each event reads on its own (Nov 7 2026) */
[data-live="kalendar"] ul.wk>li.ev-c0{background:#e6f0fa!important}
[data-live="kalendar"] ul.wk>li.ev-c1{background:#e8f4e6!important}
[data-live="kalendar"] ul.wk>li.ev-c2{background:#faf1e0!important}
[data-live="kalendar"] ul.wk>li.ev-c3{background:#f1eaf7!important}

/* Resources: the header folds the box; phones start folded */
.res-tog{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;background:none;border:0;padding:0;margin:0 0 8px;text-align:left;cursor:pointer;font:inherit}
.res-tog .res-h{margin:0!important;display:block;font-weight:700}
.res-tog i{font-style:normal;color:#1e4a6e;font-size:18px;transition:transform .2s}
.res.res-closed .res-in{display:none}
.res.res-closed .res-tog{margin:0}
.res.res-closed .res-tog i{transform:rotate(-90deg)}

/* PHONES (Nov 7 2026): the stories come first, the scores and side columns after them */
@media(max-width:819px){.grid.two.has-ads>section{order:0}.grid.two.has-ads>aside.colA,.grid.two.has-ads>aside.colB{order:1}}
/* Event cards (Nov 7 2026): tints about three times stronger, plus a 4px colored stripe down the left of each card */
[data-live="kalendar"] ul.wk>li.ev-c0{background:#d3e4f5!important;border-left:4px solid #2f6fa8!important}
[data-live="kalendar"] ul.wk>li.ev-c1{background:#d6ecd1!important;border-left:4px solid #3f8a3a!important}
[data-live="kalendar"] ul.wk>li.ev-c2{background:#f6e3bf!important;border-left:4px solid #c08a1e!important}
[data-live="kalendar"] ul.wk>li.ev-c3{background:#e5d8f1!important;border-left:4px solid #7a4fa6!important}
[data-live="kalendar"] ul.wk>li[class^="ev-c"]{border-radius:4px 10px 10px 4px}
/* Phone ad spots between stories (Nov 7 2026) */
@media(max-width:819px){.adslot.ad-ph{display:flex!important;flex-direction:column;align-items:center;margin:18px auto;width:100%;max-width:300px}}
@media(min-width:820px){.adslot.ad-ph{display:none!important}}
/* Meet the producer link (Nov 7 2026) */
.mast .row .pub-link{font:700 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;color:#1e4a6e;text-decoration:none;border:1px solid rgba(30,74,110,.3);border-radius:99px;padding:5px 10px;margin-left:10px;white-space:nowrap}
.mast .row .pub-link:hover{background:#1e4a6e;color:#fff}
.minibar .mb-pub{position:absolute;right:0;top:50%;transform:translateY(-50%);font:700 12.5px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;color:#1e4a6e;text-decoration:none;border:1px solid rgba(30,74,110,.3);border-radius:99px;padding:6px 11px;background:#fff;white-space:nowrap}
.minibar .mb-wx{right:150px!important}
@media(max-width:600px){.mast .row .pub-link{font-size:11px;padding:4px 8px;margin-left:6px}.minibar .mb-pub{font-size:11px;padding:5px 8px;right:4px}.minibar .mb-pub span{display:none}.minibar .mb-wx{display:none!important}}
/* GET THE APP pill + how-to (Nov 7 2026): small, folded until tapped */
.mast .row .app-wrap{position:relative;margin-left:8px}
.mast .row .app-pill{font:700 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;color:#55606b;background:none;border:1px dashed rgba(30,74,110,.35);border-radius:99px;padding:5px 10px;cursor:pointer;white-space:nowrap}
.mast .row .app-pill:hover,.mast .row .app-pill[aria-expanded="true"]{color:#1e4a6e;border-style:solid}
.app-how{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:min(300px,86vw);background:#fff;border:1px solid #d7e0e8;border-radius:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.35);padding:12px 14px;text-align:left;font:500 13px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;color:#1d2a36}
.app-how>b{display:block;font-size:13.5px;color:#1e4a6e;margin-bottom:6px}
.app-how p{margin:6px 0}.app-how i{font-style:normal;font-weight:700}
.app-how .app-note{font-size:12px;color:#55606b}
.app-how .app-go{margin:6px 0 2px;background:#1e4a6e;color:#fff;border:0;border-radius:99px;padding:8px 14px;font:700 13px/1 system-ui,sans-serif;cursor:pointer}
@media(max-width:600px){.mast .row .app-pill{font-size:11px;padding:4px 8px}.mast .row .app-wrap{margin-left:6px}.app-how{left:auto;right:-60px}}
/* masthead row: date left, the two small links grouped at the right (Nov 7 2026) */
.mast .row .mast-links{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.mast .row .mast-links .pub-link,.mast .row .mast-links .app-wrap{margin-left:0}
.mast .row:has(.mast-links)>span:not(#today):not(.mast-links){margin-left:12px}
.mast .row #today{white-space:nowrap}
.app-how{left:auto!important;right:0!important}
@media(max-width:600px){.mast .row:has(.mast-links)>span:not(#today):not(.mast-links){display:none}.mast .row .mast-links{gap:6px}.app-how{right:-4px!important}}
/* THUMBNAILS IN EVERY STORY LIST (Nov 7 2026): the story's picture, else the lake */
.story-item.si-th{display:flex;gap:14px;align-items:flex-start}
.story-item.si-th .si-img{flex:0 0 112px}
.story-item.si-th .si-img img{display:block;width:112px;height:84px;object-fit:cover;object-position:left top;border-radius:10px;box-shadow:0 0 0 1px rgba(30,74,110,.12)}
.story-item.si-th .si-tx{min-width:0;flex:1}
.story-item.si-th h3{margin-top:0}
.more-item{display:flex!important;gap:12px;align-items:flex-start}
.more-item .mi-img{flex:0 0 72px;width:72px;height:72px;object-fit:cover;object-position:left top;border-radius:9px;box-shadow:0 0 0 1px rgba(30,74,110,.12)}
.more-item .mi-tx{display:block;min-width:0;flex:1}
@media(max-width:600px){.story-item.si-th .si-img{flex-basis:88px}.story-item.si-th .si-img img{width:88px;height:66px}}
.more-item .mi-tx{color:var(--ink);font-size:inherit;line-height:inherit;margin:0}
/* the owner gear (Nov 7 2026): quiet, at the far right of the masthead row */
.mast .row .kcm-gear{display:inline-grid;place-items:center;width:26px;height:26px;color:#8a97a3;opacity:.7;border-radius:8px;margin-left:2px}
.mast .row .kcm-gear:hover{opacity:1;color:#1e4a6e;background:#eef4fa}
.mast .row .kcm-gear svg{width:16px;height:16px}

/* THE GEAR, alone at the far left of the masthead row; one tap turns it and opens the back office (Nov 7 2026) */
.mast .row .kcm-gear{position:relative;z-index:3;display:inline-grid;place-items:center;width:38px;height:38px;margin:0 14px 0 -8px;padding:0;color:#7d8b97;opacity:.85;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mast .row .kcm-gear svg{width:21px;height:21px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mast .row .kcm-gear:hover{opacity:1;color:#1e4a6e;background:#eef4fa}
.mast .row .kcm-gear:hover svg{transform:rotate(45deg)}
.mast .row .kcm-gear.turn{opacity:1;color:#1e4a6e;background:#eef4fa}
.mast .row .kcm-gear.turn svg{transform:rotate(240deg)}
@media (prefers-reduced-motion:reduce){.mast .row .kcm-gear svg{transition:none}}

/* ===== THE HOUSE ICONS + SECTION COLORS (Anthony, Nov 7 2026: "use a house brand, and color each section. within that section
   the dominant color scheme is that color. stay light, stay simple"). One line style on a soft tile, one color per section.
   On a section page (and its stories) that color leads: a light page tint, labels, links, underlines, the active tab. ===== */
.ic.hb{display:inline-grid!important;place-items:center;flex:none;box-sizing:border-box;width:40px!important;height:40px!important;padding:0!important;border-radius:12px;
  background:color-mix(in srgb,var(--c) 13%,#fff);color:color-mix(in srgb,var(--c) 88%,#000);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent);transition:background .2s,color .2s}
.ic.hb svg{width:58%;height:58%;display:block}
.tabbar a:hover .ic.hb,.sheet a:hover .ic.hb{background:color-mix(in srgb,var(--c) 22%,#fff)}
.tabbar a.on .ic.hb,.sheet a.on .ic.hb{background:var(--c);color:#fff;box-shadow:0 4px 10px -4px color-mix(in srgb,var(--c) 70%,transparent)}
.tabbar a[style*="--c"],.sheet a[style*="--c"]{color:#3c3442!important}
.tabbar a.on[style*="--c"],.sheet a.on[style*="--c"]{color:color-mix(in srgb,var(--c) 85%,#000)!important;background:transparent!important}
.tabbar button[data-more]{color:#3c3442!important}
.sheet .ic.hb{width:42px!important;height:42px!important}
@media(min-width:900px){html body .tabbar .ic.hb{width:46px!important;height:46px!important;border-radius:13px}}
html.nav-left body #tabbar.top-nav .ic.hb,html.nav-right body #tabbar.top-nav .ic.hb{width:40px!important;height:40px!important}
/* the section's own page */
html[data-sec] body{--cream:color-mix(in srgb,var(--sec) 5%,#fbfafc);background:var(--cream)}
html[data-sec] .mast,html[data-sec] .townbar{background:var(--cream)}
html[data-sec] main{--red:color-mix(in srgb,var(--sec) 88%,#000);--teal:color-mix(in srgb,var(--sec) 88%,#000);--gold:var(--sec)}
html[data-sec] main .eye{color:color-mix(in srgb,var(--sec) 85%,#000)}
html[data-sec] main h1.sec{color:color-mix(in srgb,var(--sec) 35%,#231a2b)}
html[data-sec] main h2{border-bottom-color:var(--sec)}
html[data-sec] main .subs span{background:color-mix(in srgb,var(--sec) 10%,#fff);border-color:color-mix(in srgb,var(--sec) 28%,#fff);color:color-mix(in srgb,var(--sec) 80%,#000)}
html[data-sec] main .story-item h3 a,html[data-sec] main h3 a{color:var(--ink)}
html[data-sec] .grid.two.has-ads>section{background:color-mix(in srgb,var(--sec) 9%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sec) 18%,transparent)}
/* phone: the gear, Back and the links share the top row, so the date steps aside under 480px */
@media(max-width:480px){.mast .row #today{display:none}.mast .row .kcm-gear{margin-right:6px}}

/* the House tiles (drawn, full color) replace the line icons: same sizes as before; the section you are on gets a ring in its color */
html body .tabbar img.ic.hs,html body .sheet img.ic.hs{border-radius:11px;box-shadow:0 2px 6px rgba(0,0,0,.18);background:none;padding:0;transition:transform .15s}
html body .tabbar a:hover img.ic.hs,html body .sheet a:hover img.ic.hs{transform:translateY(-2px)}
html body .tabbar a.on img.ic.hs,html body .sheet a.on img.ic.hs{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}

/* Seniors help list (Nov 7 2026) — big type, big tap targets */
.sr-list{list-style:none;margin:0;padding:0}.sr-list li{padding:12px 0;border-top:1px solid var(--line);display:grid;gap:3px}.sr-list li:first-child{border-top:0}
.sr-list b{font-size:18px}.sr-list small{font-size:13px;color:var(--mute);font-weight:700}.sr-list span{font-size:16px;color:var(--mute)}
.sr-acts{display:flex;gap:14px;flex-wrap:wrap}.sr-acts a{font-size:17px;font-weight:800;text-decoration:none;padding:6px 0}
.src{font-size:12.5px;color:var(--mute);margin:8px 0 0}

/* the docked nav never runs past the window (Nov 7 2026: "top of the site gets cut off"): capped to the screen, scrolls inside if ever needed */
@media(min-width:900px){html.nav-left body #tabbar.top-nav:not(.dragging),html.nav-right body #tabbar.top-nav:not(.dragging){max-height:calc(100vh - 84px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;top:calc(50% + 26px)!important}
  html.nav-left body #tabbar.top-nav::-webkit-scrollbar,html.nav-right body #tabbar.top-nav::-webkit-scrollbar{display:none}}

/* THE DARK NAV (Anthony, Nov 7 2026: "make the nav dark"): deep lake-navy glass, light labels; the House tiles pop on it.
   Phone bottom bar, laptop dock, and the More sheet alike. */
html body #tabbar,html body #tabbar.top-nav{background:linear-gradient(180deg,rgba(22,34,48,.94),rgba(12,20,30,.96))!important;border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)!important;-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
html body #tabbar a,html body #tabbar button,html body #tabbar a[style*="--c"],html body #tabbar button[data-more]{color:#d6dee7!important;background:transparent!important}
html body #tabbar a:hover,html body #tabbar button:hover{color:#fff!important;background:rgba(255,255,255,.06)!important}
html body #tabbar a.on[style*="--c"]{color:#fff!important;background:rgba(255,255,255,.08)!important}
html body #tabbar a.on img.ic.hs{box-shadow:0 0 0 2px #0e1824,0 0 0 4px var(--c)!important}
html body #tabbar a.core,html body #tabbar a.core.on{color:#fff!important}
html body #tabbar a.core .ring{background:#f4f8fb!important;box-shadow:0 0 0 3px #0e1824,0 6px 16px -4px rgba(0,0,0,.6)!important}
html body #tabbar .nav-grip{color:#8fa3b6!important}
html body #sheet{background:linear-gradient(180deg,rgba(22,34,48,.97),rgba(12,20,30,.98))!important;border:1px solid rgba(255,255,255,.12)!important}
html body #sheet a{color:#d6dee7!important}html body #sheet a:hover,html body #sheet a.on{color:#fff!important;background:rgba(255,255,255,.07)!important}

/* More, from the More button (Nov 7 2026): a short dark list beside the nav, sliding out of it */
html body #sheet.fly{transform:none!important;width:236px!important;padding:8px!important;border-radius:18px!important}
html body #sheet.fly.on{display:flex!important;flex-direction:column;gap:2px;animation:kmore .22s cubic-bezier(.2,.8,.2,1) both}
html body #sheet.fly a{display:flex!important;align-items:center;gap:12px;justify-items:start;text-align:left;padding:7px 10px!important;border-radius:12px;font:700 15px/1.2 'Noto Sans',system-ui,sans-serif}
html body #sheet.fly img.ic.hs{width:38px!important;height:38px!important;flex:none}
html body #sheet.fly[data-from="l"]{--kx:-14px;--ky:0}html body #sheet.fly[data-from="r"]{--kx:14px;--ky:0}
html body #sheet.fly[data-from="t"]{--kx:0;--ky:-10px}html body #sheet.fly[data-from="b"]{--kx:0;--ky:10px}
@keyframes kmore{from{opacity:0;translate:var(--kx) var(--ky)}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){html body #sheet.fly.on{animation:none}}

/* GLASSY, SEE-THROUGH (Anthony, Nov 7 2026: "make the nav glassy see through"): the dark nav becomes smoked glass —
   the page shows through, blurred; labels keep a soft shadow so they stay readable over anything. */
html body #tabbar,html body #tabbar.top-nav,html body #sheet,html body #sheet.fly{
  background:linear-gradient(180deg,rgba(28,42,58,.50),rgba(12,20,30,.58))!important;
  -webkit-backdrop-filter:blur(18px) saturate(180%)!important;backdrop-filter:blur(18px) saturate(180%)!important;
  border:1px solid rgba(255,255,255,.22)!important;box-shadow:0 18px 40px -18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18)!important}
html body #tabbar a,html body #tabbar button,html body #sheet a{text-shadow:0 1px 3px rgba(0,0,0,.55)}
@media(max-width:480px){.minibar .mb-pub{display:none!important}}

/* Tech: the Build Podcast and the B~Log (Nov 7 2026) */
.disclose{font-size:13px;color:var(--mute);margin:-4px 0 12px}
.pods{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.pod{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.pod-play{position:relative;display:block;border:0;padding:0;margin:0;cursor:pointer;background:#000;aspect-ratio:16/9;overflow:hidden}
.pod-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .2s,transform .3s}
.pod-play:hover img{opacity:1;transform:scale(1.03)}
.pod-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(200,16,46,.92);color:#fff;font-size:22px;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.pod-frame{width:100%;aspect-ratio:16/9;border:0;display:block}
.pod-tx{padding:10px 12px 12px;display:grid;gap:3px}.pod-tx small{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.pod-tx b{font:400 21px/1.15 'Instrument Serif',Georgia,serif}.pod-tx a{font-size:13.5px;font-weight:700}
.blog-list{list-style:none;margin:0;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:14px}
.blog-list li a{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.blog-list li:first-child a{border-top:0}.blog-list b{font-weight:700}.blog-list span{color:var(--mute);font-size:13px;white-space:nowrap}
.more-link{margin:8px 0 0;font-weight:700}

/* the top bar carries the date and the county (Nov 7 2026), left side, after Back */
.minibar .mb-date{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:flex;gap:14px;align-items:baseline;font:500 13px/1 'Merriweather',Georgia,serif;color:#3c3442;white-space:nowrap}
.minibar .mb-date b{font-weight:700}
.minibar:has(.kcm-back) .mb-date{left:100px}
@media(max-width:1099px){.minibar .mb-date span{display:none}}
@media(max-width:899px){.minibar .mb-date{display:none}}


/* THE ONE LOGO (Anthony, Nov 7 2026: "replace all logos with this. I don't want to see another one."). The locked
   Kcounty.Media logo is a drawn picture (the K holds a North Idaho scene), so it is always the image file
   /assets/brand/kcm-logo-1600.png, never rebuilt from text. Masthead and the slim top bar both use it. */
.mast .brand.kcm-logo{display:flex!important;justify-content:flex-start;align-items:center;padding:10px 0 12px!important;position:relative;z-index:2;line-height:0}
.mast .kcm-logo img{display:block;width:clamp(300px,56vw,780px);height:auto;max-width:100%}
@media(max-width:600px){.mast .brand.kcm-logo{justify-content:center}.mast .kcm-logo img{width:min(94vw,560px)}}
html body .minibar a.mb-logo{display:flex;align-items:center;line-height:0}
html body .minibar a.mb-logo::before{display:none!important;content:none!important}
.minibar .mb-logo img{height:40px;width:auto;display:block}
@media(max-width:600px){.minibar .mb-logo img{height:34px}}
video.pod-frame{background:#000;height:auto}

/* Story byline: newsroom standard, name on its own line (Nov 8 2026) */
.byline{font-size:15px;color:var(--ink,#1f2a37);margin:14px 0 0;letter-spacing:.01em}
.byline .byname{font-weight:700}
.src.dateline{margin-top:2px}

.story-dl{margin:18px 0 26px}.story-dl a{display:inline-block;font-size:19px;font-weight:700;color:#fff;background:#2c6e9b;border-radius:10px;padding:14px 22px;text-decoration:none;line-height:1.3}.story-dl a:hover{background:#1e4a6e}

.story-house{display:block;margin:28px 0;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.12)}.story-house img{display:block;width:100%;height:auto}

/* GAMES: ESPOwords and ESPOdraw, played in the page (Anthony, Nov 8 2026) */
.games2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.games2{grid-template-columns:1fr}}
.game{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--rule,#e3ddd3);border-radius:14px;padding:16px}
.game-mark{width:96px;height:96px;border-radius:22%;flex:none;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.game-tx{display:flex;flex-direction:column;gap:4px;min-width:0}.game-tx b{font-size:24px}.game-tx small{color:#6b6259}
.game-play{margin-top:8px;font:700 16px Inter,system-ui,sans-serif;background:#1e4a6e;color:#fff;border:0;border-radius:999px;padding:11px 20px;cursor:pointer}
.game.on{display:block;padding:0;overflow:hidden;grid-column:1/-1}
.game-frame{width:100%;height:min(82vh,760px);border:0;display:block;background:#fff}
.game-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;font:600 14px Inter,system-ui,sans-serif;background:#f6f1ea}

/* Get the app: iPhone steps with pictures of Safari's buttons (Nov 8 2026) */
.app-how .app-steps{list-style:none;margin:6px 0 8px;padding:0;display:flex;flex-direction:column;gap:8px}
.app-how .app-steps li{display:flex;align-items:center;gap:10px;counter-increment:st}
.app-how .app-steps li::before{content:counter(st);flex:none;width:20px;height:20px;border-radius:50%;background:#1e4a6e;color:#fff;font:700 12px/20px system-ui,sans-serif;text-align:center}
.app-how .ios-ic{flex:none;width:30px;height:30px;padding:3px;border-radius:8px;background:#f2f2f7}
.app-how .app-steps{counter-reset:st}
.app-how .app-warn{background:#fff6dd;border:1px solid #e8cf7a;border-radius:10px;padding:8px 10px;font-weight:600}
/* games: two side by side only when both fit; otherwise one above the other (Anthony, Nov 8 2026: "they do not fit in the card") */
.games2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important}
.game{min-width:0;box-sizing:border-box}
.game-tx{flex:1}
@media(max-width:420px){.game-mark{width:72px;height:72px}}
/* TAP TO ENLARGE (Nov 8 2026) — see assets/zoom.js */
img.zm-able{cursor:zoom-in}
img.zm-able:focus-visible{outline:3px solid #1e4a6e;outline-offset:3px}
.zm-btn{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:0;border-radius:99px;background:rgba(17,24,33,.78);color:#fff;font:700 12.5px/1 Inter,system-ui,sans-serif;cursor:zoom-in;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.zm-btn svg,.zm-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.zm-btn:hover{background:#1e4a6e}
.zm-btn{border:1.5px solid rgba(255,255,255,.55);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.zm-wrap>.zm-btn{top:10px;bottom:auto} /* top corner: on tall phone graphics the bottom corner is a screen away */
html.zm-on,html.zm-on body{overflow:hidden!important}
.zm-veil{position:fixed;inset:0;z-index:2147483000;background:rgba(10,14,20,.94);display:flex;flex-direction:column}
.zm-veil[hidden]{display:none}
.zm-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:zoom-in;padding:max(56px,env(safe-area-inset-top)) 12px 12px}
.zm-veil.zoomed .zm-stage{cursor:grab}
.zm-img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;transform-origin:center;transition:transform .12s ease-out;background:#fff;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.zm-x{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
.zm-x svg{width:22px;height:22px}
.zm-cap{color:#e8edf2;font:500 14px/1.4 Inter,system-ui,sans-serif;text-align:center;padding:4px 16px 2px;max-width:900px;margin:0 auto}
.zm-hint{color:rgba(232,237,242,.6);font:600 12px/1 Inter,system-ui,sans-serif;text-align:center;padding:6px 0 max(14px,env(safe-area-inset-bottom))}
.zm-veil.zoomed .zm-hint,.zm-veil.zoomed .zm-cap{opacity:0}
.zm-wrap{position:relative;display:block}.zm-wrap.zm-inl{display:inline-block;max-width:100%;vertical-align:top}.zm-wrap>img{display:block}
@media(max-width:600px){.zm-btn{padding:7px 10px;font-size:12px;right:8px;bottom:8px}.zm-stage{padding:60px 0 6px}.zm-img{border-radius:0}}
.zm-veil{background:#0b0f14!important}

/* Latest news (home, Nov 9 2026) */
.tr-ago{color:#1e6f5c;font-weight:600}
.latest-h{margin:22px 0 6px}
@media(min-width:820px){.latest-h{display:none}}

/* TECH: ONLY TWO COLUMNS (Anthony, Nov 9 2026). Left: new stories, calendar under. Second column: Build Podcast up top,
   More stories under it. Same order on the phone: left column first, then the second column. */
@media(min-width:820px){
  .grid.two.has-ads.tech-two{grid-template-columns:minmax(0,1fr) 360px!important;grid-template-rows:auto!important}
  .grid.two.has-ads.tech-two>section{grid-column:1!important;grid-row:1!important;align-self:start}
  .grid.two.has-ads.tech-two>aside.colB{grid-column:2!important;grid-row:1!important;order:0!important;align-self:start}
}
.tech-two>aside.colB .pods{grid-template-columns:minmax(0,1fr)}
.tech-two>aside.colB>h2{margin-top:0}
.tech-two>aside.colB .ad-t{position:static}
@media(max-width:819px){.grid.two.has-ads.tech-two .card.more:not([hidden]){display:block}}
/* Tech's ad spots show at every width: both in the second column on a laptop, the box ad on a phone. */
@media(min-width:820px){.tech-two>aside.colB .adslot{display:block;width:300px;align-self:center}}
@media(max-width:819px){.tech-two>aside.colB .adslot.ad-m{display:flex;flex-direction:column;align-items:center;margin:18px auto;width:100%;max-width:300px}}
/* Tech: the ad sits to the right of the calendar (Anthony, Nov 9 2026). Side by side on a laptop; under the calendar when the column is too narrow. */
.tech-cal{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:start}
.tech-cal-main{min-width:0}
.tech-cal .adslot{display:flex;flex-direction:column;align-items:center;width:300px;max-width:100%;margin:0 auto;position:static}
@media(min-width:1200px){.tech-cal{grid-template-columns:minmax(0,1fr) 300px}.grid.two.has-ads .tech-cal .adslot{margin:0;align-self:start}}
/* Tech: "See all of our episodes" is a real button, above and below the Build Podcast videos (Anthony, Nov 9 2026). */
.pod-all{display:block;text-align:center;font-weight:800;font-size:17px;line-height:1.2;padding:14px 16px;margin:12px 0;border-radius:12px;background:#c8102e;color:#fff!important;text-decoration:none!important;box-shadow:0 4px 12px rgba(200,16,46,.28)}
.pod-all:hover,.pod-all:focus-visible{background:#a50d26}
/* A section's own More list shows on phones too, or its older stories could not be reached there (Nov 9 2026). */
@media(max-width:819px){.grid.two.has-ads .card.more.more-sec:not([hidden]){display:block}}
/* SHARE (Anthony, Nov 9 2026): the home-screen app has no address bar, so every page and every story carries a Share button. */
.kcm-share{flex:none;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px 0 9px;margin-left:8px;border-radius:11px;border:1.5px solid rgba(30,74,110,.28);background:#fff;color:#1e4a6e;font:700 13.5px/1 'Merriweather',Georgia,serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kcm-share:hover{background:#eef3f8}.kcm-share:focus-visible{outline:3px solid #1e4a6e;outline-offset:2px}
.kcm-share svg{width:17px;height:17px;flex:none}
.mast .row>.kcm-share:first-child{margin-left:0}
.mast .row:has(.kcm-share){justify-content:flex-start}.mast .row:has(.kcm-share)>span:last-of-type{margin-left:auto}
.minibar .kcm-share{position:absolute;left:0;top:50%;transform:translateY(-50%);height:32px;margin:0}
.minibar .kcm-back+.kcm-share{left:88px}
.kcm-share.story-share{height:44px;padding:0 18px 0 14px;margin:12px 0 14px;font-size:15px;background:#1e4a6e;color:#fff;border-color:#1e4a6e;border-radius:12px}
.kcm-share.story-share:hover{background:#163a57}.kcm-share.story-share svg{width:19px;height:19px}
.kcm-share.story-share-end{display:flex;margin:22px 0 6px}
.kcm-toast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,12px);z-index:90;max-width:88vw;padding:11px 16px;border-radius:12px;background:#1e2a33;color:#fff;font:700 14px/1.3 'Merriweather',Georgia,serif;box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;overflow-wrap:anywhere}
.kcm-toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:600px){.kcm-share{height:32px;padding:0 10px 0 8px;font-size:12.5px;margin-left:6px}.minibar .kcm-share{left:4px;height:30px;padding:0 7px}.minibar .kcm-share span,.mast .row .kcm-share span{display:none}.mast .row .kcm-share{padding:0 6px;margin-left:0}.mast .row:has(.kcm-share) .kcm-back{padding:0 7px 0 4px;margin-right:4px}.minibar .kcm-back+.kcm-share{left:42px}
  .kcm-share.story-share{height:46px;font-size:15px;padding:0 18px 0 14px}}
@media print{.kcm-share,.kcm-toast{display:none}}
/* The pop-out menu never runs off the top of a phone: it stops short of the screen and scrolls (Outdoors made it twelve rows, Nov 9 2026). */
html body #sheet.fly{max-height:calc(100vh - 176px);max-height:calc(100dvh - 176px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html body #sheet.fly a{flex:none}
/* The side dock now holds eight sections, Home and More (Nov 9 2026). On a short laptop screen everything tightens so More still shows. */
@media(min-width:1200px) and (max-height:960px){
  html.nav-left body #tabbar.top-nav img.ic,html.nav-right body #tabbar.top-nav img.ic{width:29px!important;height:29px!important}
  html.nav-left body #tabbar.top-nav a,html.nav-right body #tabbar.top-nav a,html.nav-left body #tabbar.top-nav button,html.nav-right body #tabbar.top-nav button{padding:2px 0 1px!important;font-size:9.5px!important;gap:1px!important}
  html.nav-left body #tabbar.top-nav a.core .ring,html.nav-right body #tabbar.top-nav a.core .ring{width:40px;height:40px}
  html.nav-left body #tabbar.top-nav a.core .ring img.up,html.nav-right body #tabbar.top-nav a.core .ring img.up{height:30px!important}
  html.nav-left body #tabbar.top-nav:not(.dragging),html.nav-right body #tabbar.top-nav:not(.dragging){padding-top:34px!important;row-gap:0}
}
/* SLIM TOP BAR WITH SHARE IN IT (Nov 9 2026): Share sat on top of the date. The date now starts after Share, and steps
   aside on narrower screens before it can reach the logo. */
.minibar:has(.kcm-share) .mb-date{left:100px}
.minibar:has(.kcm-back):has(.kcm-share) .mb-date{left:188px}
@media(max-width:1399px){.minibar:has(.kcm-share) .mb-date span{display:none}}
@media(max-width:1099px){.minibar:has(.kcm-back):has(.kcm-share) .mb-date{display:none}}
/* THE APP LAUNCHER (Anthony, Nov 9 2026): More opens a grid of app icons, the same on the phone and the laptop. A group
   shows its title and a gold line, then its apps. */
html body #sheet.fly{width:min(372px,calc(100vw - 24px))!important;padding:12px 10px!important;border-radius:22px!important}
html body #sheet.fly.on{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 2px;align-content:start}
html body #sheet.fly a{display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;text-align:center;padding:5px 2px 4px!important;border-radius:14px;font:700 11.5px/1.15 'Noto Sans',system-ui,sans-serif;min-width:0}
html body #sheet.fly a span{display:block;max-width:100%;overflow-wrap:anywhere}
html body #sheet.fly img.ic.hs{width:52px!important;height:52px!important;border-radius:13px}
html body #sheet.fly .grp{grid-column:1/-1;padding:5px 6px 1px}html body #sheet.fly .grp:first-child{padding-top:0}
html body #sheet.fly .grp b{display:block;font:800 12px/1 'Noto Sans',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f1c75b}
html body #sheet.fly .grp i{display:block;height:2px;border-radius:2px;background:#f1c75b;margin-top:5px}
@media(min-width:900px){html body #sheet.fly{width:312px!important}html body #sheet.fly.on{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* PHONE BAR HOLDS FIVE APPS AND MORE (Anthony, Nov 9 2026: Biz Directory joins it). One row, however many it holds. */
@media(max-width:899px){
  html body #tabbar{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))!important;align-items:start}
  html body #tabbar a,html body #tabbar button{font-size:10.5px!important;line-height:1.1!important;min-width:0;text-align:center;justify-items:center}
  html body #tabbar img.ic{width:40px!important;height:40px!important}
}
@media(max-width:899px){html body #tabbar a.core .ring{width:min(58px,15vw)!important;height:min(58px,15vw)!important}html body #tabbar a.core .ring img.up{height:min(42px,11vw)!important}html body #tabbar a.core{margin-top:-18px!important}}
@media(max-width:360px){html body #tabbar img.ic{width:34px!important;height:34px!important}html body #tabbar a,html body #tabbar button{font-size:9.5px!important}}

/* Launcher: a group can start a new line on the phone (Anthony, Nov 9 2026: "drop espo words down to the lower line next to draw") */
html body #sheet.fly i.brk{grid-column:1/-1;height:0;margin:-4px 0 0;padding:0;display:block}

/* BLACK MASTHEAD, SITE-WIDE (Anthony, Nov 9 2026, 11:54 PM: "make the whole masthead on the site like that. leave the rest white").
   The masthead is black and reversed; everything under it stays white. The logo is /assets/brand/kcm-logo-reverse-1600.png:
   the real logo file with its black lettering, tagline and rule flipped to white by a lane, NOT a logo he supplied. Swap in
   his own reverse file the day he hands one over. */
html body header.mast{background:url(/assets/art/lake-cda-watershed-bg-onblack.svg?v=2) var(--mmx,-9999px) var(--mmy,0)/var(--mw,0) var(--mh,0) no-repeat,#000!important;border-bottom:0!important}
html body header.mast .row,html body header.mast .row>span,html body header.mast .row #today{color:#d7dce2!important}
html body header.mast .row .kcm-gear,html body header.mast .row .kcm-gear svg{color:#c9d0d8!important}
html body header.mast .townbar{background:transparent!important}
html body header.mast .row .pub-link{color:#fff!important;border-color:rgba(255,255,255,.55)!important;background:transparent}
html body header.mast .row .pub-link:hover{background:#fff!important;color:#000!important}
html body header.mast .row .app-pill{color:#fff!important;border-color:rgba(255,255,255,.55)!important}
html body header.mast .mast-wx{color:#fff!important}
html body header.mast .mast-wx .mw-t b,html body header.mast .mast-wx .mw-lake b{color:#fff!important}
html body header.mast .mast-wx .mw-eye{color:#f0c36a!important}
html body header.mast .mast-wx .mw-c{color:#e8edf2!important}
html body header.mast .mast-wx small{color:#b9c2cc!important}
html body header.mast .mast-wx .mw-lake{border-left-color:rgba(255,255,255,.28)!important}

/* LANDING ANIMATION (Anthony, Nov 10 2026). assets/kcm-intro.js runs it. While it plays the real logo image is held back and
   the rest of the masthead waits; "everything else just kind of fills in" at the end. */
html.kcm-intro-on header.mast .kcm-logo>img{visibility:hidden}
html.kcm-intro-on:not(.kcm-intro-fill) header.mast .row,html.kcm-intro-on:not(.kcm-intro-fill) header.mast .townbar,html.kcm-intro-on:not(.kcm-intro-fill) header.mast .mast-wx{opacity:0!important}
html.kcm-intro-fill header.mast .row,html.kcm-intro-fill header.mast .townbar{transition:opacity .7s ease}
header.mast .kcm-intro img{max-width:none!important;display:block}

/* THE NAV PANEL IS BLACK (Anthony, Nov 10 2026, 12:19 AM: "all the way on the left that panel where the nav is on the desktop
   needs to be black"). The column the desktop nav sits in is black top to bottom, so it reads as one piece with the black
   masthead. It follows the nav if he docks it on the right. Phones have no such panel. */
@media(min-width:900px){
  html.nav-left body::before,html.nav-right body::before{content:"";position:fixed;top:0;bottom:0;width:118px;background:#000;z-index:0;pointer-events:none}
  html.nav-left body::before{left:0}
  html.nav-right body::before{right:0}
}

/* EVERY ARTICLE IS ITS OWN LITTLE HOVERING CARD (Anthony, Nov 10 2026, 12:20 AM: "each article gets its own little hovering
   card"). Each story in every list (the big leads, the lists under them, Latest news, the More lists) sits on its own white
   card with a soft shadow under it, and lifts a little when the pointer is over it. No more hairlines between stories. */
html body .story-item,html body a.more-item{background:#fff!important;border:1px solid rgba(30,74,110,.11)!important;border-radius:16px!important;
  padding:14px 16px!important;margin:0 0 14px!important;box-shadow:0 14px 26px -16px rgba(16,32,52,.45),0 2px 5px rgba(16,32,52,.07);transition:transform .18s ease,box-shadow .18s ease}
html body .story-item.lead{padding:18px 18px 16px!important;margin-bottom:18px!important}
html body .story-item:last-child,html body a.more-item:last-child{margin-bottom:4px!important}
@media(hover:hover) and (pointer:fine){
  html body .story-item:hover,html body a.more-item:hover{transform:translateY(-3px);box-shadow:0 22px 34px -18px rgba(16,32,52,.55),0 3px 8px rgba(16,32,52,.09)}
}
@media(max-width:600px){html body .story-item,html body a.more-item{padding:12px 13px!important;border-radius:14px!important}html body .story-item.lead{padding:14px 14px 13px!important}}
@media(prefers-reduced-motion:reduce){html body .story-item,html body a.more-item{transition:none}}

/* Latest news on Home: its stories are cards too (same rule as above; these use their own class). */
html body .top-rest a.tr-item{background:#fff!important;border:1px solid rgba(30,74,110,.11)!important;border-radius:16px!important;padding:13px 14px!important;margin:0 0 14px!important;
  box-shadow:0 14px 26px -16px rgba(16,32,52,.45),0 2px 5px rgba(16,32,52,.07);transition:transform .18s ease,box-shadow .18s ease}
html body .top-rest a.tr-item:last-child{margin-bottom:4px!important}
@media(hover:hover) and (pointer:fine){html body .top-rest a.tr-item:hover{transform:translateY(-3px);box-shadow:0 22px 34px -18px rgba(16,32,52,.55),0 3px 8px rgba(16,32,52,.09)}}
@media(prefers-reduced-motion:reduce){html body .top-rest a.tr-item{transition:none}}

/* THE NAV BAR WEARS THE K'S COLORS (Anthony, Nov 10 2026, 12:21 AM: "Make the nav bar the same color scheme as the K").
   Read off the K in the logo file, top to bottom: silver sky, pale blue, sky blue, slate mountains, deep navy, lake blue
   with the lighter water lines. Labels get a dark edge so they read on the light sky at the top. */
html body #tabbar#tabbar,html body #tabbar#tabbar.top-nav{
  background:
    repeating-linear-gradient(180deg,rgba(120,185,235,0) 0 6px,rgba(128,190,238,.5) 6px 8px) bottom/100% 26% no-repeat,
    linear-gradient(180deg,#b6b6b4 0%,#96aec4 9%,#7aabdc 22%,#7aabdc 31%,#334b63 39%,#334b63 51%,#1b3048 57%,#1b3048 70%,#1c63ad 74%,#1c63ad 100%)!important;
  border:1px solid rgba(255,255,255,.28)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body #tabbar#tabbar a,html body #tabbar#tabbar button{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.55)}

/* THE SCROLL BAR IS BLACK TOO (Anthony, Nov 10 2026, 12:27 AM: "top bar when you scroll needs to be black and everything
   reverse"). The slim bar that drops in when you scroll is black; its logo is the reversed file; the date, the weather and
   lake line and the producer button are white. The Back and Share buttons keep their white pills so they read as buttons. */
html body .minibar{background:rgba(0,0,0,.92)!important;border-bottom:1px solid rgba(255,255,255,.14)!important;box-shadow:0 8px 22px -14px rgba(0,0,0,.8)!important}
html body .minibar .mb-date,html body .minibar .mb-date b,html body .minibar .mb-date span{color:#e3e8ee!important}
html body .minibar .mb-wx{color:#fff!important}
html body .minibar .mb-pub{color:#fff!important;border-color:rgba(255,255,255,.55)!important;background:transparent!important}
html body .minibar .mb-pub:hover{background:#fff!important;color:#000!important}

/* THE SPORTS TICKER under the masthead (Anthony, Nov 10 2026). Black like the masthead it hangs from, white type. */
.kcm-ticker{position:relative;z-index:1;display:flex;align-items:stretch;background:#000;color:#fff;border-top:1px solid rgba(255,255,255,.16);border-bottom:2px solid #1c63ad;height:40px;overflow:hidden;
  font:500 14px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;white-space:nowrap}
.kcm-ticker .tk-h{flex:none;display:flex;align-items:center;padding:0 14px;background:#1c63ad;color:#fff;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;position:relative;z-index:2;box-shadow:8px 0 14px #000}
.kcm-ticker .tk-w{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center}
.kcm-ticker .tk-in{display:inline-flex;align-items:center;will-change:transform;animation:kcmTick 60s linear infinite}
.kcm-ticker:hover .tk-in,.kcm-ticker:active .tk-in,.kcm-ticker:focus-within .tk-in{animation-play-state:paused}
@keyframes kcmTick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.kcm-ticker .tk-i{display:inline-flex;align-items:center;gap:7px;padding:0 20px;height:40px;color:#e6ebf1;text-decoration:none;border-right:1px solid rgba(255,255,255,.14)}
.kcm-ticker .tk-i b{color:#fff;font-weight:800}
.kcm-ticker .tk-i em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#000;background:#f0c36a;border-radius:99px;padding:3px 7px}
.kcm-ticker .tk-i i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:4px;padding:3px 6px}
.kcm-ticker .tk-f{background:#c0392b;color:#fff}.kcm-ticker .tk-n{background:rgba(255,255,255,.16);color:#fff}
.kcm-ticker.still .tk-w{overflow-x:auto;scrollbar-width:none}.kcm-ticker.still .tk-in{animation:none}
@media(max-width:600px){.kcm-ticker{height:38px;font-size:13px}.kcm-ticker .tk-h{padding:0 10px;font-size:11px}.kcm-ticker .tk-i{padding:0 14px;height:38px}}
@media print{.kcm-ticker{display:none}}

/* SUN in the masthead readout, in the same fashion as the lake (Anthony, Nov 10 2026) */
.mast-wx .mw-sun b{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.mast-wx .mw-sun b i{font-style:normal;color:#f0c36a;font-size:.8em}
.mast-wx .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(min-width:1180px){
  html body .mast-wx{grid-template-columns:auto auto auto!important}
  html body .mast-wx .mw-lake.mw-sun{grid-column:3;grid-row:1;padding-left:14px!important;border-left:1px solid rgba(255,255,255,.28)!important}
  html body .mast-wx .mw-t{grid-column:2 / span 2}
}

/* Town pages, "By the numbers" card (Anthony, Nov 10 2026, 8:17 AM). Tiles sit two across on a phone and fill the column on a laptop. */
.tfcard h3{margin-bottom:2px}
.tfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px;margin:12px 0 10px}
.tfacts div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;min-width:0}
.tfacts b{display:block;font-size:22px;line-height:1.15;font-variant-numeric:tabular-nums}
.tfacts span{display:block;font-size:13px;line-height:1.3;color:var(--mute);margin-top:3px}
.tflist{margin:6px 0 0 18px;padding:0;font-size:15px}
.tflist li{margin:4px 0}

/* Events calendar: pick a date or a range (Anthony, Nov 10 2026, 12:49 PM). Big enough to tap on a phone. */
.kdate{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:8px 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.kdate label{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700}
.kdate input[type=date]{font:inherit;font-size:16px;font-weight:400;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#000;min-height:40px}
.kdate .kdq{display:flex;flex-wrap:wrap;gap:6px}
.kdate button{font:inherit;font-size:14px;font-weight:700;padding:8px 12px;min-height:40px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#000;cursor:pointer}
.kdate button.on{background:var(--red);border-color:var(--red);color:#fff}

/* ============ GOVERNMENT, THE NEW LOOK (PREVIEW ONLY: /government/?look=2) ============
   Anthony, Nov 10 2026, 2:16 PM: "enhance the look and scheme of each section, one at a time one by one. Starting with GOVT".
   Scheme: courthouse slate and navy with a brass line, the colors of the Gov icon. Nothing here applies without html.look2-gov. */
html.look2-gov{--g-navy:#16222e;--g-slate:#3d4f60;--g-stone:#eef1f4;--g-brass:#b8912f;--g-brass2:#e3c46a}
html.look2-gov body{background:linear-gradient(#e9edf1,#f6f7f9 420px)!important}
html.look2-gov .sec-hero{display:flex;align-items:center;gap:18px;margin:0 0 18px;padding:22px 22px 20px;border-radius:16px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--g-navy) 0%,#22364a 55%,var(--g-slate) 100%);box-shadow:0 10px 26px rgba(22,34,46,.28);border-bottom:4px solid var(--g-brass)}
html.look2-gov .sec-hero::before{content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;background:repeating-linear-gradient(90deg,#fff 0 10px,transparent 10px 34px)}
html.look2-gov .sec-hero>*{position:relative}
html.look2-gov .sec-hero-ic{display:block!important;flex:none;width:84px;height:84px;border-radius:20px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
html.look2-gov .sec-hero-k{display:block!important;font:700 12px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--g-brass2);margin-bottom:6px}
html.look2-gov main .sec-hero h1.sec{color:#fff!important;margin:0 0 6px;font-size:clamp(34px,7vw,54px)}
html.look2-gov .sec-hero .lede{color:#d8e0e8!important;margin:0 0 12px;font-size:17px}
html.look2-gov .sec-hero .subs{margin:0;gap:8px}
html.look2-gov .sec-hero .subs span{background:transparent!important;border:1px solid rgba(227,196,106,.7)!important;border-radius:999px;color:#fff;padding:5px 12px;font-size:13px}
html.look2-gov main h2{border-bottom:0!important;padding:0 0 0 12px!important;border-left:5px solid var(--g-brass)!important;color:var(--g-navy)!important;font-weight:700;letter-spacing:.06em;margin-top:30px}
html.look2-gov main .card,html.look2-gov main .story-item,html.look2-gov main a.more-item{border-radius:12px!important;border:1px solid #d5dce3!important;border-top:3px solid var(--g-slate)!important;box-shadow:0 2px 10px rgba(22,34,46,.07)}
html.look2-gov main a{color:#1d4268}
html.look2-gov main .empty{border:0!important;border-left:3px solid #c5ced7!important;border-radius:0!important;background:transparent;padding:6px 12px!important;text-align:left;font-style:italic;font-size:15px}
html.look2-gov main form.submit button{background:var(--g-navy)!important;color:var(--g-brass2)!important;border-radius:999px!important;border:0!important;font-weight:700;padding:12px 22px}
html.look2-gov main form.submit input,html.look2-gov main form.submit textarea{border-radius:8px!important;border-color:#c5ced7!important}
html.look2-gov .runs{border-top:1px solid #c5ced7;color:#4a5866}
@media (max-width:640px){html.look2-gov .sec-hero{padding:18px 16px 16px;gap:12px;align-items:flex-start}html.look2-gov .sec-hero-ic{width:60px;height:60px;border-radius:15px}}

/* New look: the header panel and the big story run the full width above the three columns (Anthony, Nov 10 2026, 2:37 PM). */
html.look2 main .sec-top{margin:0 0 18px}
html.look2 main .sec-top .sec-hero{margin-bottom:16px}
html.look2 main .sec-top .story-item.lead.wide{margin:0;padding:18px 18px 16px;background:#fff}
html.look2 main .sec-top .story-item.lead.wide h1.lead-title{font-size:clamp(28px,6.4vw,40px);line-height:1.1;margin:0 0 10px}
@media (min-width:900px){
  html.look2 main .sec-top .story-item.lead.wide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:28px;align-items:start;padding:24px 26px 20px}
  html.look2 main .sec-top .story-item.lead.wide>*{grid-column:1}
  html.look2 main .sec-top .story-item.lead.wide>a:has(img){grid-column:2;grid-row:1/span 5;margin:0}
  html.look2 main .sec-top .story-item.lead.wide img.lead-img{width:100%;margin:0;display:block}
  html.look2 main .sec-top .story-item.lead.wide h1.lead-title{font-size:clamp(34px,3.4vw,50px)}
  html.look2 main .sec-top .story-item.lead.wide .lead-dek{font-size:19px;line-height:1.5}
  html.look2 main .sec-top .sec-hero{padding:26px 30px 24px}
}

/* PHONES: THE NAV BAR IS ALWAYS THE PHONE BAR (Anthony, Nov 10 2026, 2:41 PM, third report of the bar parked mid-screen).
   html.kcm-phone is set from the real screen size, not the page width. These rules win over every laptop rule, so even
   if the phone reports a wide page for a moment the bar keeps its phone shape and place. */
html.kcm-phone body #tabbar#tabbar{position:fixed!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;margin:0!important;
  width:min(560px,calc(100% - 20px))!important;max-height:none!important;overflow:visible!important}
html.kcm-phone body #tabbar#tabbar .nav-grip,html.kcm-phone body #tabbar#tabbar .nav-back{display:none!important}
html.kcm-phone body{padding-left:0!important;padding-right:0!important}
html.kcm-phone body::before{display:none!important}

/* GOVERNMENT OPENING (preview, ?look=3; assets/gov-intro.js): until the Government header is laid over the masthead, the
   masthead shows as plain black and the header waits, so neither flashes first. */
html.gi-cover header.mast>*{visibility:hidden!important}html.gi-cover main .sec-hero{visibility:hidden!important}

/* GOVERNMENT CALENDAR, THE DOCKET LOOK (preview, ?look=3; html.look3-gov is set by assets/gov-intro.js).
   Anthony, Nov 10 2026, 6:20 PM and 6:21 PM: the calendar should represent its page, look slick, and every event hovers
   like the stories. Navy and brass from the Government scheme; each meeting is its own card with a date tab. */
html.look3-gov main [data-live="government"],html.look3-gov main [data-live="kalendar"]{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
html.look3-gov main [data-live="government"] h3,html.look3-gov main [data-live="kalendar"] #kl>h3{font:700 12px/1.2 Arial,Helvetica,sans-serif!important;letter-spacing:.18em;text-transform:uppercase;color:#3d4f60;margin:18px 0 10px!important;display:flex;align-items:center;gap:10px}
html.look3-gov main [data-live="government"] h3::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,#b8912f,rgba(184,145,47,0))}
html.look3-gov main [data-live="kalendar"] #kl>h3.gd-h{position:absolute!important;width:1px;height:1px;margin:-1px!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.look3-gov main [data-live="government"] ul.wk,html.look3-gov main [data-live="kalendar"] #kl{display:grid;grid-template-columns:1fr;gap:12px;margin:0!important;padding:0!important}
html.look3-gov main [data-live="kalendar"] #kl{margin-top:14px!important}
html.look3-gov main [data-live="kalendar"] #kl>ul.wk{display:contents}
html.look3-gov main ul.wk>li.gd-li{position:relative;display:grid!important;grid-template-columns:62px minmax(0,1fr);column-gap:14px;align-items:start;margin:0!important;padding:12px 14px 12px 12px!important;
  background:linear-gradient(180deg,#fff,#f4f6f9)!important;border:1px solid #cfd7df!important;border-left:1px solid #cfd7df!important;border-radius:14px!important;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,32,52,.08);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
html.look3-gov main ul.wk>li.gd-li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#b8912f,#e3c46a);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
html.look3-gov main ul.wk>li.gd-li>.gd{grid-row:1/span 3;display:grid;justify-items:center;align-content:center;gap:1px;min-height:66px;border-radius:10px;background:linear-gradient(160deg,#16222e,#3d4f60);color:#fff;
  box-shadow:inset 0 -3px 0 #b8912f;font-family:Arial,Helvetica,sans-serif;text-decoration:none;padding:6px 0 8px}
html.look3-gov main ul.wk>li.gd-li>.gd i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#e3c46a}
html.look3-gov main ul.wk>li.gd-li>.gd b{font-size:26px;line-height:1;font-weight:800;color:#fff}
html.look3-gov main ul.wk>li.gd-li>.gd u{text-decoration:none;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#c9d3dd}
html.look3-gov main ul.wk>li.gd-li>b{grid-column:2;font-size:18px;line-height:1.25}
html.look3-gov main ul.wk>li.gd-li>b a{color:#16222e!important;text-decoration:none}
html.look3-gov main ul.wk>li.gd-li>span:not(.gd){grid-column:2;display:block;margin-top:4px;font-size:14.5px;line-height:1.45;color:#3d4f60}
@media (hover:hover){html.look3-gov main ul.wk>li.gd-li:hover{transform:translateY(-3px);border-color:#b8912f!important;box-shadow:0 22px 34px -18px rgba(16,32,52,.55),0 3px 8px rgba(16,32,52,.09)}
  html.look3-gov main ul.wk>li.gd-li:hover::after{transform:scaleX(1)}html.look3-gov main ul.wk>li.gd-li:hover>b a{text-decoration:underline}}
html.look3-gov main ul.wk>li.gd-li:active,html.look3-gov main ul.wk>li.gd-li:focus-within{border-color:#b8912f!important}html.look3-gov main ul.wk>li.gd-li:active::after,html.look3-gov main ul.wk>li.gd-li:focus-within::after{transform:scaleX(1)}
@media (min-width:760px){html.look3-gov main [data-live="government"] ul.wk,html.look3-gov main [data-live="kalendar"] #kl{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}}
@media (prefers-reduced-motion:reduce){html.look3-gov main ul.wk>li.gd-li,html.look3-gov main ul.wk>li.gd-li::after{transition:none}html.look3-gov main ul.wk>li.gd-li:hover{transform:none}}
html.look3-gov main [data-live="kalendar"] .kdate{border-color:#cfd7df;border-radius:14px}
html.look3-gov main [data-live="kalendar"] .kdate button.on{background:#16222e!important;border-color:#16222e!important;box-shadow:inset 0 -3px 0 #b8912f}

/* THE BAR SAYS IT MOVES (preview, ?navtip=1; Anthony, Nov 10 2026, 8:03 PM). The grip carries the word Move on a laptop,
   and a first-visits note points at it with a button for each side. */
@media(min-width:900px){
  html.nav-say body #tabbar.top-nav .nav-grip{width:auto!important;min-width:44px;height:44px;padding:0 8px;gap:6px;opacity:1!important;border:1.5px dashed currentColor;border-radius:10px}
  html.nav-say body #tabbar.top-nav .nav-grip::after{content:"Move";font:700 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.04em}
  html.nav-say.nav-left body #tabbar.top-nav .nav-grip,html.nav-say.nav-right body #tabbar.top-nav .nav-grip{transform:translateX(-50%)!important;flex-direction:column;height:auto!important;padding:6px 4px;min-width:0}
  html.nav-say.nav-left body #tabbar.top-nav .nav-grip svg,html.nav-say.nav-right body #tabbar.top-nav .nav-grip svg{transform:rotate(90deg)}
  html.nav-say.nav-left body #tabbar.top-nav .nav-grip::after,html.nav-say.nav-right body #tabbar.top-nav .nav-grip::after{content:none}   /* on a side there is no room for the word; the dashed box stays */
  #navtip{position:fixed;z-index:2147483600;max-width:300px;padding:12px 38px 12px 14px;border-radius:14px;background:#fff;color:#111;border:2px solid #1e4a6e;box-shadow:0 18px 40px -14px rgba(10,25,45,.55);
    font:400 15px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;display:grid;gap:6px}
  #navtip b{font-size:16px}#navtip .nt-b{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
  #navtip .nt-b button{font:inherit;font-weight:700;font-size:14px;min-height:36px;padding:6px 12px;border-radius:999px;border:1.5px solid #1e4a6e;background:#fff;color:#1e4a6e;cursor:pointer}
  #navtip .nt-b button.on{background:#1e4a6e;color:#fff}
  #navtip .nt-x{position:absolute;top:4px;right:4px;width:32px;height:32px;border:0;background:none;font-size:22px;line-height:1;color:#111;cursor:pointer;border-radius:8px}
}
@media(max-width:899px){#navtip{display:none!important}}

/* Government: meetings and events in the middle column, under the ad (Anthony, Nov 10 2026, 8:17 PM). One card per row there. */
html.look3-gov main aside .gov-mid{margin-top:16px}
html.look3-gov main aside .gov-mid [data-live="government"] ul.wk,html.look3-gov main aside .gov-mid [data-live="kalendar"] #kl{grid-template-columns:1fr!important}
html.look3-gov main aside .gov-mid h2{margin-top:18px}
html.look3-gov main aside .gov-mid ul.wk>li.gd-li{grid-template-columns:54px minmax(0,1fr);column-gap:10px;padding:10px!important}
html.look3-gov main aside .gov-mid ul.wk>li.gd-li>b{font-size:16px}
html.look3-gov main aside .gov-mid .kdate{padding:8px}html.look3-gov main aside .gov-mid .kdate input[type=date]{max-width:150px}

/* ============ FAMILY, THE NEW LOOK (Anthony, Nov 10 2026, 8:24 PM: "Set u family like government ... the exact same format
   with the calender except more like a family look, same placement type") ============
   The same rules as Government, in the Family icon's colors: night-sky indigo and periwinkle with sunshine gold, on a warm
   cream page, with rounder corners and dots instead of pinstripes. Made by copying every Government rule and changing the
   colors (see tools/section-look.md). Nothing here applies without the family classes on the html tag. */
html.look2-fam{--g-navy:#1b1e4b;--g-slate:#4f5bd5;--g-stone:#f6f1ff;--g-brass:#e0a83a;--g-brass2:#ffd36b}
html.look2-fam body{background:linear-gradient(#fbf1dd,#fffaf0 420px)!important}
html.look2-fam .sec-hero{display:flex;align-items:center;gap:18px;margin:0 0 18px;padding:22px 22px 20px;border-radius:16px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--g-navy) 0%,#2d3391 55%,var(--g-slate) 100%);box-shadow:0 10px 26px rgba(27,30,75,.28);border-bottom:4px solid var(--g-brass)}
html.look2-fam .sec-hero::before{content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;background:repeating-linear-gradient(90deg,#fff 0 10px,transparent 10px 34px)}
html.look2-fam .sec-hero>*{position:relative}
html.look2-fam .sec-hero-ic{display:block!important;flex:none;width:84px;height:84px;border-radius:20px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
html.look2-fam .sec-hero-k{display:block!important;font:700 12px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--g-brass2);margin-bottom:6px}
html.look2-fam main .sec-hero h1.sec{color:#fff!important;margin:0 0 6px;font-size:clamp(34px,7vw,54px)}
html.look2-fam .sec-hero .lede{color:#ecebff!important;margin:0 0 12px;font-size:17px}
html.look2-fam .sec-hero .subs{margin:0;gap:8px}
html.look2-fam .sec-hero .subs span{background:transparent!important;border:1px solid rgba(255,211,107,.7)!important;border-radius:999px;color:#fff;padding:5px 12px;font-size:13px}
html.look2-fam main h2{border-bottom:0!important;padding:0 0 0 12px!important;border-left:5px solid var(--g-brass)!important;color:var(--g-navy)!important;font-weight:700;letter-spacing:.06em;margin-top:30px}
html.look2-fam main .card,html.look2-fam main .story-item,html.look2-fam main a.more-item{border-radius:12px!important;border:1px solid #e4dcf5!important;border-top:3px solid var(--g-slate)!important;box-shadow:0 2px 10px rgba(27,30,75,.07)}
html.look2-fam main a{color:#3a3fa8}
html.look2-fam main .empty{border:0!important;border-left:3px solid #d9cfee!important;border-radius:0!important;background:transparent;padding:6px 12px!important;text-align:left;font-style:italic;font-size:15px}
html.look2-fam main form.submit button{background:var(--g-navy)!important;color:var(--g-brass2)!important;border-radius:999px!important;border:0!important;font-weight:700;padding:12px 22px}
html.look2-fam main form.submit input,html.look2-fam main form.submit textarea{border-radius:8px!important;border-color:#d9cfee!important}
html.look2-fam .runs{border-top:1px solid #d9cfee;color:#55507a}
@media (max-width:640px){html.look2-fam .sec-hero{padding:18px 16px 16px;gap:12px;align-items:flex-start}html.look2-fam .sec-hero-ic{width:60px;height:60px;border-radius:15px}}
html.look3-fam main [data-live="government"],html.look3-fam main [data-live="kalendar"]{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
html.look3-fam main [data-live="government"] h3,html.look3-fam main [data-live="kalendar"] #kl>h3{font:700 12px/1.2 Arial,Helvetica,sans-serif!important;letter-spacing:.18em;text-transform:uppercase;color:#4f5bd5;margin:18px 0 10px!important;display:flex;align-items:center;gap:10px}
html.look3-fam main [data-live="government"] h3::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,#e0a83a,rgba(184,145,47,0))}
html.look3-fam main [data-live="kalendar"] #kl>h3.gd-h{position:absolute!important;width:1px;height:1px;margin:-1px!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.look3-fam main [data-live="government"] ul.wk,html.look3-fam main [data-live="kalendar"] #kl{display:grid;grid-template-columns:1fr;gap:12px;margin:0!important;padding:0!important}
html.look3-fam main [data-live="kalendar"] #kl{margin-top:14px!important}
html.look3-fam main [data-live="kalendar"] #kl>ul.wk{display:contents}
html.look3-fam main ul.wk>li.gd-li{position:relative;display:grid!important;grid-template-columns:62px minmax(0,1fr);column-gap:14px;align-items:start;margin:0!important;padding:12px 14px 12px 12px!important;
  background:linear-gradient(180deg,#fff,#fff9ee)!important;border:1px solid #e0d6f3!important;border-left:1px solid #e0d6f3!important;border-radius:14px!important;overflow:hidden;
  box-shadow:0 1px 2px rgba(27,30,75,.08);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
html.look3-fam main ul.wk>li.gd-li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#e0a83a,#ffd36b);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
html.look3-fam main ul.wk>li.gd-li>.gd{grid-row:1/span 3;display:grid;justify-items:center;align-content:center;gap:1px;min-height:66px;border-radius:10px;background:linear-gradient(160deg,#1b1e4b,#4f5bd5);color:#fff;
  box-shadow:inset 0 -3px 0 #e0a83a;font-family:Arial,Helvetica,sans-serif;text-decoration:none;padding:6px 0 8px}
html.look3-fam main ul.wk>li.gd-li>.gd i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#ffd36b}
html.look3-fam main ul.wk>li.gd-li>.gd b{font-size:26px;line-height:1;font-weight:800;color:#fff}
html.look3-fam main ul.wk>li.gd-li>.gd u{text-decoration:none;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#dfe2ff}
html.look3-fam main ul.wk>li.gd-li>b{grid-column:2;font-size:18px;line-height:1.25}
html.look3-fam main ul.wk>li.gd-li>b a{color:#1b1e4b!important;text-decoration:none}
html.look3-fam main ul.wk>li.gd-li>span:not(.gd){grid-column:2;display:block;margin-top:4px;font-size:14.5px;line-height:1.45;color:#4f5bd5}
@media (hover:hover){html.look3-fam main ul.wk>li.gd-li:hover{transform:translateY(-3px);border-color:#e0a83a!important;box-shadow:0 22px 34px -18px rgba(27,30,75,.55),0 3px 8px rgba(27,30,75,.09)}
  html.look3-fam main ul.wk>li.gd-li:hover::after{transform:scaleX(1)}html.look3-fam main ul.wk>li.gd-li:hover>b a{text-decoration:underline}}
html.look3-fam main ul.wk>li.gd-li:active,html.look3-fam main ul.wk>li.gd-li:focus-within{border-color:#e0a83a!important}html.look3-fam main ul.wk>li.gd-li:active::after,html.look3-fam main ul.wk>li.gd-li:focus-within::after{transform:scaleX(1)}
@media (min-width:760px){html.look3-fam main [data-live="government"] ul.wk,html.look3-fam main [data-live="kalendar"] #kl{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}}
@media (prefers-reduced-motion:reduce){html.look3-fam main ul.wk>li.gd-li,html.look3-fam main ul.wk>li.gd-li::after{transition:none}html.look3-fam main ul.wk>li.gd-li:hover{transform:none}}
html.look3-fam main [data-live="kalendar"] .kdate{border-color:#e0d6f3;border-radius:14px}
html.look3-fam main [data-live="kalendar"] .kdate button.on{background:#1b1e4b!important;border-color:#1b1e4b!important;box-shadow:inset 0 -3px 0 #e0a83a}
html.look3-fam main aside .gov-mid{margin-top:16px}
html.look3-fam main aside .gov-mid [data-live="government"] ul.wk,html.look3-fam main aside .gov-mid [data-live="kalendar"] #kl{grid-template-columns:1fr!important}
html.look3-fam main aside .gov-mid h2{margin-top:18px}
html.look3-fam main aside .gov-mid ul.wk>li.gd-li{grid-template-columns:54px minmax(0,1fr);column-gap:10px;padding:10px!important}
html.look3-fam main aside .gov-mid ul.wk>li.gd-li>b{font-size:16px}
html.look3-fam main aside .gov-mid .kdate{padding:8px}html.look3-fam main aside .gov-mid .kdate input[type=date]{max-width:150px}
html.look2-fam .sec-hero{border-radius:24px}
html.look2-fam .sec-hero::before{opacity:.13;background:radial-gradient(circle,#fff 0 2.2px,transparent 2.6px) 0 0/26px 26px,radial-gradient(circle,#ffd36b 0 1.6px,transparent 2px) 13px 13px/26px 26px}
html.look2-fam main .card,html.look2-fam main .story-item,html.look2-fam main a.more-item{border-radius:18px!important}
html.look3-fam main ul.wk>li.gd-li{border-radius:20px!important}html.look3-fam main ul.wk>li.gd-li>.gd{border-radius:16px}

/* swap v3: the column flip of 10:20 PM was taken back out at 10:27 PM ("I wanted the sizes to stay the same, but the subject
   headings to switch places"); the swap is now done in kcm.js (data-swap on the section's story list). */

/* Family: games where the second story list was (Anthony, Nov 10 2026, 10:43 PM). The game icons are square app marks. */
.card.more.games-card .game-item .mi-img{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none}

/* FAMILY: THE CALENDAR TAKES TWO COLUMNS (Anthony, Nov 10 2026, 11:13 PM). The calendar box is its own row of the page grid,
   under the middle ad and the right column, from the middle column to the right edge. */
html.look3-fam main .grid>.gov-span{border-radius:18px;padding:14px;background:rgba(46,125,80,.14);box-shadow:inset 0 0 0 1px rgba(46,125,80,.18);min-width:0;align-self:start}
html.look3-fam main .grid>.gov-span h2:first-child{margin-top:4px}
@media(min-width:1200px){
  html.look3-fam main .grid.two.has-ads.kcm-cols{grid-template-rows:auto 1fr!important}
  html.look3-fam main .grid.two.has-ads.kcm-cols>section{grid-row:1/span 2!important}
  html.look3-fam main .grid.two.has-ads.kcm-cols>aside.colA,html.look3-fam main .grid.two.has-ads.kcm-cols>aside.colB{grid-row:1!important;align-self:stretch!important}   /* both panels end on one line, so the calendar starts right under them */
  html.look3-fam main .grid.two.has-ads.kcm-cols>aside.colA{justify-content:center}
  html.look3-fam main .grid.two.has-ads.kcm-cols>.gov-span{grid-column:2/4;grid-row:2}
}
@media(min-width:820px) and (max-width:1199px){
  html.look3-fam main .grid.two.has-ads.kcm-cols{grid-template-rows:auto auto 1fr!important}
  html.look3-fam main .grid.two.has-ads.kcm-cols>section{grid-row:1/span 3!important}
  html.look3-fam main .grid.two.has-ads.kcm-cols>.gov-span{grid-column:2;grid-row:3}
  html.look3-fam main .grid>.gov-span [data-live="kalendar"] #kl{grid-template-columns:1fr!important}
}
/* SENIORS: EVENTS TAKE BOTH COLUMNS (Anthony, Nov 11 2026, 9:17 PM). The same row-of-its-own as Family's calendar. */
html.look3-seniors main .grid>.gov-span{border-radius:18px;padding:14px;background:rgba(46,125,80,.14);box-shadow:inset 0 0 0 1px rgba(46,125,80,.18);min-width:0;align-self:start}
html.look3-seniors main .grid>.gov-span h2:first-child{margin-top:4px}
@media(min-width:1200px){
  html.look3-seniors main .grid.two.has-ads.kcm-cols{grid-template-rows:auto 1fr!important}
  html.look3-seniors main .grid.two.has-ads.kcm-cols>section{grid-row:1/span 2!important}
  html.look3-seniors main .grid.two.has-ads.kcm-cols>aside.colA,html.look3-seniors main .grid.two.has-ads.kcm-cols>aside.colB{grid-row:1!important;align-self:stretch!important}   /* both panels end on one line, so the calendar starts right under them */
  html.look3-seniors main .grid.two.has-ads.kcm-cols>aside.colA{justify-content:center}
  html.look3-seniors main .grid.two.has-ads.kcm-cols>.gov-span{grid-column:2/4;grid-row:2}
  html.look3-seniors main .grid.two.has-ads.kcm-cols>aside.colA .adslot.ad-t{top:0}   /* the ad sits inside its panel: the panel now ends where the Events row begins */
}
@media(min-width:820px) and (max-width:1199px){
  html.look3-seniors main .grid.two.has-ads.kcm-cols{grid-template-rows:auto auto 1fr!important}
  html.look3-seniors main .grid.two.has-ads.kcm-cols>section{grid-row:1/span 3!important}
  html.look3-seniors main .grid.two.has-ads.kcm-cols>.gov-span{grid-column:2;grid-row:3}
  html.look3-seniors main .grid>.gov-span [data-live="kalendar"] #kl{grid-template-columns:1fr!important}
}
/* EVENTS TAKE BOTH COLUMNS ON EVERY THREE-COLUMN PAGE THAT HAS THEM IN THE MIDDLE (Anthony, Nov 11 2026, 10:02 PM): Health,
   Veterans, Scene, Savor, Biz and Government, the same row-of-its-own as Family and Seniors. gov-intro.js puts .has-span on the grid. */
html.look2 main .grid.has-span>.gov-span{border-radius:18px;padding:14px;background:rgba(46,125,80,.14);box-shadow:inset 0 0 0 1px rgba(46,125,80,.18);min-width:0;align-self:start}
html.look2 main .grid.has-span>.gov-span h2:first-child{margin-top:4px}
@media(min-width:1200px){
  html.look2 main .grid.two.has-ads.has-span{grid-template-rows:auto 1fr!important}
  html.look2 main .grid.two.has-ads.has-span>section{grid-row:1/span 2!important}
  html.look2 main .grid.two.has-ads.has-span>aside.colA,html.look2 main .grid.two.has-ads.has-span>aside.colB{grid-row:1!important;align-self:stretch!important}   /* both panels end on one line, so the calendar starts right under them */
  html.look2 main .grid.two.has-ads.has-span>aside.colA{justify-content:center}
  html.look2 main .grid.two.has-ads.has-span>.gov-span{grid-column:2/4;grid-row:2}
  html.look2 main .grid.two.has-ads.has-span>aside.colA .adslot.ad-t{top:0}   /* the ad sits inside its panel: the panel now ends where the Events row begins */
}
@media(min-width:820px) and (max-width:1199px){
  html.look2 main .grid.two.has-ads.has-span{grid-template-rows:auto auto 1fr!important}
  html.look2 main .grid.two.has-ads.has-span>section{grid-row:1/span 3!important}
  html.look2 main .grid.two.has-ads.has-span>.gov-span{grid-column:2;grid-row:3}
  html.look2 main .grid.has-span>.gov-span [data-live="kalendar"] #kl{grid-template-columns:1fr!important}
}
/* "MORE STORIES" UNDER EVENTS (Anthony, Nov 12 2026, 5:58 PM: "1"). gov-intro.js lifts the right column's More stories card into
   .more-row and puts .has-more-row on the grid. Three columns: row 1 the two ad panels, row 2 Events, row 3 More stories, each of
   the last two from the middle column to the right edge. */
html.look2 main .grid>.more-row{border-radius:18px;padding:14px;min-width:0;align-self:start}
html.look2 main .grid>.more-row:has(>.card[hidden]){display:none}
html.look2 main .grid>.more-row>.card.more{margin:0}
@media(min-width:1200px){
  html.look2 main .grid.two.has-ads.has-span.has-more-row{grid-template-rows:auto auto 1fr!important}
  html.look2 main .grid.two.has-ads.has-span.has-more-row>section{grid-row:1/span 3!important}
  html.look2 main .grid.two.has-ads.has-span.has-more-row>.more-row{grid-column:2/4;grid-row:3}
  html.look2 main .grid.two.has-ads.has-span.has-more-row>.gov-span{grid-column:2/4!important;grid-row:2!important}
  html.look2 main .grid>.more-row>.card.more{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:26px;align-items:start}
  html.look2 main .grid>.more-row>.card.more>h3{grid-column:1/-1}
  html.look2 main .grid>.more-row>.card.more>.more-item:nth-of-type(2){border-top:0}
}
@media(min-width:820px) and (max-width:1199px){
  html.look2 main .grid.two.has-ads.has-span.has-more-row{grid-template-rows:auto auto auto 1fr!important}
  html.look2 main .grid.two.has-ads.has-span.has-more-row>section{grid-row:1/span 4!important}
  html.look2 main .grid.two.has-ads.has-span.has-more-row>.more-row{grid-column:2;grid-row:4}
}
/* span v2 */

/* ============ HOME, THE SAME LOOK (Anthony, Nov 11 2026, 1:03 to 1:04 AM: "the home page needs to be laid out like the rest";
   "Instead of idaho on the header put the lake logo ... don't have it do any animation"). The colors come from
   section-looks.css (key home). Here: the lake logo, still, at the right of the header, on the same white disc the Home
   button in the nav bar uses. */
html.look2-home main .sec-hero{padding-right:130px!important}
html.look2-home main .sec-hero .sec-hero-lake{position:absolute!important;right:26px;top:50%;transform:translateY(-50%);width:88px;height:88px;border-radius:50%;background:#fff;padding:14px;box-sizing:border-box;object-fit:contain;box-shadow:0 6px 16px rgba(0,0,0,.35)}
@media (max-width:640px){html.look2-home main .sec-hero{padding-right:88px!important}html.look2-home main .sec-hero .sec-hero-lake{right:14px;width:62px;height:62px;padding:10px}}

/* THE CITY'S OWN PICTURE IN ITS HEADER (Anthony, Nov 11 2026, 11:13 AM: "Have it half or more than half of the city header").
   Laptop: the colored sketch fills the right 62% of the header and fades into the header's own color toward the words.
   Phone: the header grows and the sketch fills its lower half and more, under the words. */
html.look2-city main .sec-hero .sec-hero-art{position:absolute!important;top:0;right:0;bottom:0;width:62%;background-size:cover;background-position:center 42%;pointer-events:none;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 34%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 34%)}
html.look2-city main .sec-hero.has-art{min-height:230px}
html.look2-city main .sec-hero.has-art .sec-hero-t{max-width:44%;text-shadow:0 2px 10px rgba(6,16,30,.55)}
@media (max-width:760px){
 html.look2-city main .sec-hero.has-art{display:block!important;min-height:0;padding-bottom:calc(78vw + 16px)!important}
 html.look2-city main .sec-hero.has-art .sec-hero-t{max-width:none}
 html.look2-city main .sec-hero.has-art .sec-hero-ic{position:absolute!important;right:16px;top:16px;width:56px;height:56px}
 html.look2-city main .sec-hero .sec-hero-art{top:auto;left:0;right:0;bottom:0;width:100%;height:78vw;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 12%,#000 26%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 12%,#000 26%)}
}

/* THE LAUNCHER'S WAY OUT (Anthony, Nov 11 2026, 11:21 AM: "when it pops out it's fills up the whole phone almost so it's almost
   hard to get out of ... you should be able to close out of that somehow"). A Close button at the top of the launcher that
   stays put while the apps scroll under it. Same on a phone and on a laptop. */
html body #sheet .sh-top{display:none}
html body #sheet.fly .sh-top{display:flex;grid-column:1/-1;justify-content:flex-end;position:sticky;top:0;z-index:4;margin:-12px -10px 0;padding:8px 8px 6px;background:linear-gradient(180deg,rgba(18,28,40,.96) 72%,rgba(18,28,40,0));border-radius:22px 22px 0 0;flex:none}
html body #sheet.fly .sh-x{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 15px;border:1.5px solid rgba(255,255,255,.6);border-radius:99px;background:rgba(10,18,28,.55);color:#fff;font:800 13.5px/1 'Noto Sans',system-ui,sans-serif;letter-spacing:.02em;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.55);-webkit-tap-highlight-color:transparent}
html body #sheet.fly .sh-x svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.8;fill:none;stroke-linecap:round}
html body #sheet.fly .sh-x:focus-visible{outline:3px solid #f1c75b;outline-offset:2px}

/* THE TOP AD UNDER THE PAGE'S HEADER (Anthony, Nov 11 2026, 11:52 AM: "the advertisement presenter on eachpage needs to be
   under the page's header"). kcm.js moves the presenting sponsor's strip (or the page's top banner) to just after the header. */
html body .adbanner.ad-under{margin:16px auto 24px;width:100%;min-width:0;overflow:hidden}

/* The Home app icon (the lake) sits on the left of the Home header, placed like every other app's icon (Anthony, Nov 11 2026, 1:04 PM) */
html.look2-home main .sec-hero .sec-hero-lake{position:static!important;order:-1;flex:none;transform:none;right:auto;top:auto;width:84px;height:84px;align-self:center}
@media (max-width:640px){html.look2-home main .sec-hero{padding-right:16px!important}html.look2-home main .sec-hero .sec-hero-lake{width:60px;height:60px;padding:9px;align-self:flex-start}}
/* THE DATELINE (Anthony, Nov 11 2026): the place a story opens with */
.story-dl{font-weight:700;letter-spacing:.04em}

/* THE APP'S OWN SKETCH IN ITS HEADER (Anthony, Nov 11 2026). Same placement as the city headers above: laptop, the sketch
   fills the right 62% and fades toward the words; phone, the header grows and the sketch fills its lower part. */
html.look2 main .sec-hero.app-art .sec-hero-art{position:absolute!important;top:0;right:0;bottom:0;width:62%;background-size:cover;background-position:center 46%;pointer-events:none;z-index:0;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 34%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 34%)}
html.look2 main .sec-hero.app-art{min-height:230px}
/* only the icon and the words are lifted over the sketch. NEVER every child: the header's opening act (.gi, gov-intro.js) is its own
   absolutely placed layer, and forcing it into the flow killed every header animation (Anthony caught it, Nov 11 2026, 5:12 PM). */
html.look2 main .sec-hero.app-art>.sec-hero-ic,html.look2 main .sec-hero.app-art>.sec-hero-t{position:relative;z-index:1}
html.look2 main .sec-hero.app-art .sec-hero-t{max-width:44%;text-shadow:0 2px 10px rgba(6,16,30,.55)}
@media (max-width:760px){
 html.look2 main .sec-hero.app-art{display:block!important;min-height:0;padding-bottom:calc(78vw + 16px)!important}
 html.look2 main .sec-hero.app-art .sec-hero-t{max-width:none}
 html.look2 main .sec-hero.app-art .sec-hero-art{top:auto;left:0;right:0;bottom:0;width:100%;height:78vw;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 12%,#000 26%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 12%,#000 26%)}
}
/* a narrow header on a laptop (one that shares its row): the sketch goes under the words, full width */
html.look2 main .sec-hero.app-art.art-stack{padding-bottom:276px!important}
html.look2 main .sec-hero.app-art.art-stack .sec-hero-t{max-width:none}
html.look2 main .sec-hero.app-art.art-stack .sec-hero-art{top:auto;left:0;right:0;bottom:0;width:100%;height:260px;
 -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 12%,#000 26%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 12%,#000 26%)}

/* THE COVER WITH A SKETCH (Critic Room, Nov 11 2026: on a phone the first view put the sketch behind the words). gov-intro's
   cover is a copy of the header laid over the masthead, so it is the masthead's size, not the header's. In that copy the
   sketch keeps to the lower part on a phone and to the right side on a laptop, clear of the words. */
@media (max-width:760px){
 html.look2 main .sec-hero.app-art.gi-clone{padding-bottom:16px!important}
 html.look2 main .sec-hero.app-art.gi-clone .sec-hero-art{height:44%!important}
 /* THE SKETCH STAYS ON THE COVER (Anthony, Nov 11 2026, 9:01 PM: "some headers (at least on the phone do not have their sketch) like
    scene"). A 7:54 PM fix for Sports had hidden the sketch on every app header's cover. Only Sports keeps it hidden there: its pennants
    carry names and sat over the header's buttons. Every other app header has its sketch on the cover again, as it had at 5:57 PM. */
 html.look2 main .sec-hero.app-art.art-sports.gi-clone .sec-hero-art{display:none!important}
}
@media (min-width:761px){
 html.look2 main .sec-hero.app-art.art-stack.gi-clone{padding-bottom:0!important}
 html.look2 main .sec-hero.app-art.art-stack.gi-clone .sec-hero-t{max-width:44%}
 html.look2 main .sec-hero.app-art.art-stack.gi-clone .sec-hero-art{top:0;bottom:0;left:auto;right:0;width:62%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 34%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 34%)}
}
/* MORE DAYS on the full calendar */
.kk-more{display:block;width:100%;margin:18px 0 6px;padding:14px 16px;border:1px solid rgba(30,74,110,.35);border-radius:12px;background:#fff;color:#1e4a6e;font:700 16px/1.2 'Noto Sans',Inter,system-ui,sans-serif;cursor:pointer}
.kk-more:hover{background:#eef4fa}
/* NOTHING UNDER 12 PX (Critic Room, Nov 11 2026: small type). The little labels were 10 to 11 px. */
.kcm-ticker .tk-n,.kcm-ticker .tk-f,.kcm-ticker em,.mast-wx .mw-eye,.adslot .adlab,.adbanner .adlab,article .story-ad .adlab,.top-rest .tr-k,.top-rest .tr-ago,.pub-link,.app-pill,.kcm-ticker .tk-h{font-size:12px!important}
.mast-wx small{font-size:12px!important}
/* Savor's header sketch is a dinner table: on a laptop show the plates, not the candle tops (Anthony's picture, Nov 11 2026, 6:43 PM) */
@media (min-width:761px){html.look2-savor main .sec-hero.app-art:not(.art-stack) .sec-hero-art{background-position:center 80%}}
/* NEWS FIRST ON A PHONE (Anthony, Nov 11 2026, 6:47 PM: "fix the news first on a phone"). On a phone the page's big story comes
   right under the header, and the presenting sponsor follows it. A laptop keeps the sponsor under the header (his 11:52 AM
   ruling): the headline is already on the first screen there. */
@media (max-width:760px){
 html.look2 main .sec-top{display:flex;flex-direction:column}
 html.look2 main .sec-top>.sec-hero{order:1}
 html.look2 main .sec-top>.story-item.lead{order:2}
 html.look2 main .sec-top>.adbanner.ad-under{order:3}
 html.look2 main .sec-top>*{min-width:0}
}
/* SPORTS: THE PENNANTS (Anthony, Nov 11 2026, 7:28 PM). Our own art: one pennant per high school in its colors, names in type,
   no school's mascot or logo. The picture is drawn for each shape of header, so every pennant shows whole. */
html.look2 main .sec-hero.app-art.art-sports .sec-hero-art{background-position:center 50%;background-color:#eadcc3;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%);mask-image:linear-gradient(90deg,transparent 0,#000 12%)}
html.look2 main .sec-hero.app-art.art-sports.art-stack .sec-hero-art{background-size:contain;background-repeat:no-repeat;background-position:center bottom;
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%);mask-image:linear-gradient(180deg,transparent 0,#000 12%)}
@media (max-width:760px){
 html.look2 main .sec-hero.app-art.art-sports:not(.gi-clone) .sec-hero-art{background-image:url(/assets/art/apps/sports-header-phone.jpg)!important;background-size:100% auto;background-repeat:no-repeat;background-position:center bottom;height:97vw;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%);mask-image:linear-gradient(180deg,transparent 0,#000 13%)}
 html.look2 main .sec-hero.app-art.art-sports:not(.gi-clone){padding-bottom:calc(97vw + 16px)!important}   /* nine pennants need a taller block than the other headers' sketches */
 html.look2 main .sec-hero.app-art.art-sports.gi-clone .sec-hero-art{background-size:contain;background-repeat:no-repeat;background-position:center bottom;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%);mask-image:linear-gradient(180deg,transparent 0,#000 13%)}
}

/* THE LOGO ON A HEADER THAT COVERS THE MASTHEAD (Anthony, Nov 11 2026, 8:56 PM: "We need to add our logo to each app header,
   because when it's covering the masthead, we have no branding"). The shipped logo file, put in by gov-intro.js on the cover
   copy only. It takes the place the hidden "move me up" button was holding open, so nothing else in the header moves. */
main .sec-hero.gi-clone.has-brand .gi-up{display:none!important}
/* on the masthead's own black, so the blue in the logo reads on every header color (it washed out on Family, Weather and Sports) */
main .sec-hero.gi-clone .sec-hero-brand{display:block;box-sizing:content-box;width:max-content;height:28px;margin:3px 0 3px;padding:5px 10px 5px 8px;line-height:0;position:relative;z-index:1;background:#000;border:1px solid rgba(255,255,255,.22);border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
main .sec-hero.gi-clone .sec-hero-brand img{display:block;height:100%;width:auto;max-width:none}
@media (min-width:761px){
 /* on a laptop the logo shares the small gold line's row, so a header with two rows of buttons (Outdoors) still fits */
 main .sec-hero.gi-clone .sec-hero-brand{float:left;height:28px;margin:0 14px 7px 0;padding:6px 12px 6px 9px}
 main .sec-hero.gi-clone.has-brand .sec-hero-k{padding-top:14px;white-space:nowrap}
 main .sec-hero.gi-clone.has-brand .sec-hero-t h1{clear:both}
 main .sec-hero.gi-clone.has-brand.art-sports .sec-hero-k{white-space:normal;max-width:430px;padding-top:7px}   /* Sports: the small line wraps before the pennants */
}
@media (max-width:760px){
 main .sec-hero.gi-clone.has-brand .sec-hero-ic{width:48px!important;height:48px!important}   /* the icon gives the logo its room */
 /* THE LOGO FIRST, THE ICON UNDER IT (Anthony, Nov 11 2026, 9:53 PM: "flip-flop the logo and the icon ... put the logo all the way
    up at the top and put the icon back down where it was"). The plate is a little smaller up there so it clears the curled corner. */
 main .sec-hero.gi-clone.brand-top .sec-hero-brand{height:20px!important;margin:0 0 7px!important;padding:5px 8px 5px 6px}
 main .sec-hero.gi-clone.brand-top .sec-hero-ic{display:block}
 main .sec-hero.gi-clone.has-brand:not(.has-art){display:block!important}   /* headers with no sketch (Veterans, Health, Tech) stack the same way on the cover, so the logo clears the curled corner */
 main .sec-hero.gi-clone.has-brand:not(.has-art) .sec-hero-ic{display:block;margin:0!important}
 main .sec-hero.gi-clone.has-brand.has-art:not(.app-art) .sec-hero-brand{margin-top:0;height:22px}   /* a town header has no icon above the logo, so the logo drops clear of the curled corner */
}

/* WORDS OVER A PICTURE MUST READ EASILY (Anthony, Nov 11 2026, 10:00 PM: "you really can't see a lot of the white writing over the
   new pictures ... make the words very easy to read, especially to ... seniors and veterans"). Every header that carries a picture:
   the words are full white with a dark edge, the buttons are filled dark, and wherever words sit on the picture the picture is dimmed. */
html.look2 main .sec-hero.has-art .sec-hero-k,html.look2 main .sec-hero.has-art h1,html.look2 main .sec-hero.has-art .lede{text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 5px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.7)}
html.look2 main .sec-hero.has-art .lede{color:#fff!important;opacity:1!important;font-weight:500}
html.look2 main .sec-hero.has-art .subs span,html.look2 main .sec-hero.has-art .subs a{background:rgba(6,12,22,.78)!important;color:#fff!important;border-color:rgba(255,224,138,.9)!important}
html.look2 main .sec-hero.has-art .sec-hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:transparent}
@media (max-width:760px){
 /* the cover on a phone: the words sit on the picture from top to bottom, so the whole picture is dimmed there */
 html.look2 main .sec-hero.has-art.gi-clone .sec-hero-art::after{background:linear-gradient(180deg,rgba(6,12,22,.72),rgba(6,12,22,.5))}
 /* nothing runs under the curled corner: the small gold line wraps before it, the app name is a size smaller, and a town's words
    start lower (a town cover has no icon, so its name sat right where the corner is widest) */
 main .sec-hero.gi-clone.brand-top .sec-hero-k{max-width:180px;margin-bottom:4px!important}
 main .sec-hero.gi-clone.brand-top h1{font-size:27px!important;line-height:1.14!important;margin-bottom:4px!important;max-width:228px}
 main .sec-hero.gi-clone.brand-top .lede{max-width:255px;line-height:1.42!important;margin-bottom:8px!important}
 main .sec-hero.gi-clone.brand-top .sec-hero-ic{width:44px!important;height:44px!important}
 main .sec-hero.gi-clone.brand-top .sec-hero-t{margin-top:4px!important}
 main .sec-hero.gi-clone.brand-top.has-art:not(.app-art) .sec-hero-brand{margin-bottom:36px!important}
 main .sec-hero.gi-clone.brand-top.has-art:not(.app-art) h1{font-size:27px!important;max-width:205px}
 main .sec-hero.gi-clone.brand-top.has-art:not(.app-art) .sec-hero-k{max-width:165px}
}

/* THE LOGO BESIDE THE ICON ON A PHONE (Anthony, Nov 11 2026, 10:49 PM: "Put the logo right next to the icon to the right of the icon
   and level with it so all the way down level"). The pair sits a little lower than the icon used to, because the curled corner is
   narrower there and the logo clears it. A town cover and Home have no icon, so their logo stays at the top. */
@media (max-width:760px){
 main .sec-hero.gi-clone.brand-top.app-art:not(.art-home) .sec-hero-ic{margin-top:34px!important}
 main .sec-hero.gi-clone.brand-top.app-art:not(.art-home) .sec-hero-brand{position:absolute!important;left:68px;top:66px;margin:0!important;height:18px!important;padding:5px 8px 5px 6px}
}

/* THE NAV IS IN FRONT OF EVERYTHING ON THE PAGE (Anthony, Nov 11 2026, 10:52 PM: "the NAV gets cut off by the header ... the NAV's
   gotta be outside in front of all that"). The header's cover over the masthead and its curled corner sat above the nav and its More
   panel. They now sit under both. */
main .sec-hero.gi-clone{z-index:38!important}
main .gi-peel-sv{z-index:39!important}

/* THE TOP SPOT: two films side by side, on the phone and on the laptop alike (Anthony, Nov 12 2026). */
.vid-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2.2vw,26px);padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--rule,#ddd)}
.vid-pair.one{grid-template-columns:1fr;max-width:860px}
.vid-pair.one .vid-d{display:block}
.vid{min-width:0;display:flex;flex-direction:column}
.vid .eye{font-size:clamp(10px,1.3vw,13px)}
.vid-t{font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:clamp(15px,2.5vw,28px);line-height:1.14;margin:4px 0 8px;letter-spacing:-.01em}
.vid-t a{color:inherit;text-decoration:none}
.vid-d{font-size:clamp(13px,1.5vw,16px);line-height:1.5;margin:0 0 10px}
.vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:10px;margin-top:auto}
.vid .src{font-size:clamp(11px,1.3vw,13px);margin-top:6px}
.vid .kcm-share.story-share{align-self:flex-start;margin:8px 0 0}
@media (max-width:640px){.vid-d{display:none}.vid .kcm-share.story-share{height:38px;padding:0 12px 0 10px;font-size:13px}}