/* ===== news.html (data-driven news hub: ?city= & ?cat=): page-only styles, built from site.css tokens ===== */

/* hero: reuses .hero-band (orange, dot grain, ink extrusion) */
.hub-hero{padding-bottom:clamp(28px, 3.6vw, 48px)}
.hub-hero::after{content:"714"; position:absolute; z-index:-1; right:-.04em; top:-.16em; font-family:var(--font-display); font-size:clamp(220px, 30vw, 460px); line-height:1; color:transparent; -webkit-text-stroke:3px rgba(11,11,11,.09); pointer-events:none}
/* city hubs: faint street map of that city under the orange (between the dot grain and the 714) */
.hub-hero__map{position:absolute; inset:0; z-index:-1; pointer-events:none; background:center/cover no-repeat; opacity:.13;
  -webkit-mask-image:radial-gradient(120% 95% at 62% 45%, #000 40%, transparent 92%); mask-image:radial-gradient(120% 95% at 62% 45%, #000 40%, transparent 92%)}
.crumbs ol{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:8px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--on-orange-muted)}
.crumbs li + li::before{content:"/"; margin-right:8px; opacity:.5}
.crumbs a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.crumbs [aria-current]{color:var(--ink)}
.hub-hero__grid{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:clamp(28px, 4vw, 64px); align-items:end}
.hub-hero__grid > div{min-width:0}
.hub-hero h1{line-height:.84}
.hub-hero h1.is-long{font-size:clamp(56px, 8.2vw, 136px)}
.hub-hero .hero-band__sub{max-width:52ch}
.hub-stats{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:0}
.hub-stats li{padding:2px 22px 2px 0; margin-right:22px; border-right:2px solid rgba(11,11,11,.18)}
.hub-stats li:last-child{border-right:0; margin-right:0}
.hub-stats b{display:block; font-family:var(--font-display); font-weight:400; font-size:clamp(34px, 3.2vw, 46px); line-height:.9; color:var(--ink)}
.hub-stats span{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--on-orange-muted)}

/* "Get <city> alerts" card */
.hub-alert{--jt-depth:var(--juice-deep); position:relative; background:var(--ink); color:var(--text); border-radius:var(--r-lg); box-shadow:var(--frame); padding:22px 22px 20px; display:flex; flex-direction:column; gap:14px}
.hub-alert__top{display:flex; align-items:center; gap:14px}
.hub-alert__top img{width:54px; height:54px; border-radius:50%; flex:none; box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--juice)}
.hub-alert .kicker{display:block; margin-bottom:6px; color:var(--juice)}
.hub-alert h2{font-size:clamp(30px, 2.6vw, 38px)}
.hub-alert > p{font-size:14.5px; color:var(--muted)}
.hub-switch{display:flex; align-items:center; gap:14px; width:100%; border:0; text-align:left; padding:14px 16px; border-radius:16px; background:rgba(255,247,238,.06); box-shadow:inset 0 0 0 1px var(--line-2); transition:background .2s, box-shadow .2s}
.hub-switch:hover{background:rgba(255,247,238,.1)}
.hub-switch__ico{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(255,93,0,.16); color:var(--juice); flex:none}
.hub-switch__ico svg{width:20px; height:20px}
.hub-switch__txt{flex:1; min-width:0}
.hub-switch__txt b{display:block; font-size:16px}
.hub-switch__txt span{display:block; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.hub-switch[aria-checked="true"]{background:rgba(255,93,0,.14); box-shadow:inset 0 0 0 2px var(--juice)}
.hub-switch[aria-checked="true"] .hub-switch__txt span{color:var(--juice)}
.hub-switch[aria-checked="true"] .sw{background:var(--juice)}
.hub-switch[aria-checked="true"] .sw::after{transform:translateX(20px); background:var(--ink)}
.hub-alert__topics{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.hub-alert__topics li{font-size:12.5px; font-weight:600; color:var(--muted); padding:6px 10px; border-radius:999px; background:rgba(255,247,238,.05)}
.hub-alert__done{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding-top:2px; font-size:14px; color:var(--cream); font-weight:600}
.hub-alert__done[hidden]{display:none}
.hub-switch__on{display:none !important}
/* Alerts on: the card shrinks to the switch row. data-on is set before paint by Hub.tsx, then kept by React. */
.hub-alert[data-on="1"]{padding:8px; gap:6px; border-radius:20px}
.hub-alert[data-on="1"] .hub-alert__top, .hub-alert[data-on="1"] > p, .hub-alert[data-on="1"] .hub-alert__topics{display:none}
.hub-alert[data-on="1"] .hub-switch{padding:10px 12px; gap:12px}
.hub-alert[data-on="1"] .hub-switch__ico{width:34px; height:34px; border-radius:10px}
.hub-alert[data-on="1"] .hub-switch__ico svg{width:18px; height:18px}
.hub-alert[data-on="1"] .hub-switch__txt b{font-size:15px}
.hub-alert[data-on="1"] .hub-switch{background:rgba(255,93,0,.14); box-shadow:inset 0 0 0 2px var(--juice)}
.hub-switch__more{font-style:normal; display:none}
.hub-alert[data-on="1"] .hub-switch__txt span{color:var(--juice)}
.hub-alert[data-on="1"] .hub-switch__on{display:block !important}
.hub-alert[data-on="1"] .hub-switch__off{display:none}
.hub-alert[data-on="1"] .sw{background:var(--juice)}
.hub-alert[data-on="1"] .sw::after{transform:translateX(20px); background:var(--ink)}
.hub-alert__done{display:none}
.hub-alert[data-on="1"] .hub-alert__done:not([hidden]){display:block; padding:0 6px 2px}
.hub-alert__phone{border:0; background:none; padding:2px 0; font:inherit; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px}
.hub-alert__phone:hover{color:var(--cream)}

/* city switcher: one horizontal, scrollable row of ink chips on the orange band */
.hub-cities{flex-wrap:nowrap; align-items:center; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  margin:clamp(28px, 3vw, 40px) calc(var(--gutter) * -1) 0; padding:4px var(--gutter);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 56px), transparent);
          mask-image:linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 56px), transparent)}
.hub-cities::-webkit-scrollbar{display:none}
.hub-cities__label{flex:none; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-right:6px}
.hub-hero .city-chips a{flex:none; display:inline-flex; align-items:center; gap:7px; color:var(--ink); box-shadow:inset 0 0 0 2px rgba(11,11,11,.8)}
.hub-hero .city-chips a small{font-size:10.5px; opacity:.6}
.hub-hero .city-chips a.is-zero{opacity:.5}
.hub-hero .city-chips a:hover{background:rgba(11,11,11,.12); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink)}
.hub-hero .city-chips a[aria-current="page"]{background:var(--ink); color:var(--cream); box-shadow:none; opacity:1}

/* feed: sticky category bar + lead/grid */
.hub-bar{position:sticky; top:var(--hdr-t); z-index:60; background:rgba(11,11,11,.9); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:clamp(24px, 3vw, 36px)}
.hub-bar__in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px}
.filter-chips{display:flex; gap:8px; flex-wrap:wrap; min-width:0}
.filter-chips a{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:9px 14px; border-radius:999px; background:transparent; color:var(--muted); box-shadow:inset 0 0 0 1px var(--line-2); transition:background .15s, color .15s, box-shadow .15s}
.filter-chips a:hover{color:var(--text); background:rgba(255,247,238,.07)}
.filter-chips a small{font-size:10.5px; opacity:.6}
.filter-chips a.is-zero{opacity:.45}
.filter-chips a[aria-current="page"]{background:var(--paper); color:var(--ink); box-shadow:none; opacity:1}
.filter-chips a[aria-current="page"] small{opacity:.7}
.hub-bar__count{flex:none; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.hub-bar__count b{color:var(--juice)}

.hub-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap)}
.hub-grid .story-card--lead{grid-column:span 2; grid-row:span 2}
.hub-grid .story-card--lead .story-card__media{aspect-ratio:auto; flex:1; min-height:300px}
.hub-grid .story-card--lead .story-card__media img{position:absolute; inset:0}
.hub-grid .story-card--lead .story-card__body{flex:none}
.hub-grid .story-card--lead .story-card__title{max-width:30ch}
.hub-grid .story-card--lead .story-card__dek{max-width:60ch}
.hub-grid.is-few{align-items:start}
.hub-grid.is-few .story-card--lead{grid-row:auto}
.hub-grid.is-few .story-card--lead .story-card__media{min-height:380px}
.story-card__kicker .story-card__label{white-space:nowrap}
@keyframes hubIn{from{opacity:0; transform:translateY(18px)}}
.hub-grid > .story-card{animation:hubIn .5s var(--ease) both}
.hub-empty{grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:18px; padding:56px 24px; text-align:center; color:var(--muted); border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--line)}
.hub-empty h3{font-size:clamp(34px, 4vw, 52px)}
.hub-empty__acts{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.hub-more{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:clamp(28px, 3vw, 40px)}
.hub-more[hidden]{display:none}
.hub-more small{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.hub-foot{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; margin-top:clamp(24px, 3vw, 36px); padding-top:20px; border-top:1px solid var(--line)}
.hub-foot .fine{max-width:62ch}

/* watch rail (only when the selection has related videos) */
.hub-watch[hidden]{display:none}
.hub-tips{margin-top:clamp(40px, 4vw, 56px)}
.hub-watch[hidden] + .hub-tips{margin-top:0}
.hub-lower.is-tips-only{padding:clamp(32px, 4vw, 56px) 0}

@media (max-width:1180px){
  .hub-hero__grid{grid-template-columns:minmax(0,1fr) 360px}
}
@media (max-width:980px){
  .hub-hero__grid{grid-template-columns:1fr; align-items:start}
  .hub-alert{max-width:560px}
  .hub-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .hub-grid .story-card--lead{grid-column:1/-1; grid-row:auto}
  .hub-grid .story-card--lead .story-card__media{flex:none; min-height:0; aspect-ratio:16/9}
}
@media (max-width:760px){
  .hub-hero::after{font-size:240px; top:-.1em; right:-.12em}
  .crumbs ol{margin-bottom:16px}
  .hub-hero h1{font-size:clamp(62px, 22vw, 96px)}
  .hub-hero h1.is-long{font-size:clamp(44px, 14.5vw, 72px)}
  .hub-stats{margin-top:22px}
  .hub-stats li{padding-right:14px; margin-right:14px}
  .hub-stats b{font-size:32px}
  .hub-stats span{font-size:9.5px; letter-spacing:.06em; display:block; line-height:1.3; margin-top:3px}
  /* Phones: the card is always the slim switch row, on or off. */
  .hub-alert{padding:8px; gap:6px; border-radius:20px}
  .hub-alert__top, .hub-alert > p, .hub-alert__topics{display:none}
  .hub-switch{padding:10px 12px; gap:12px}
  .hub-switch__ico{width:34px; height:34px; border-radius:10px}
  .hub-switch__ico svg{width:18px; height:18px}
  .hub-switch__txt b{font-size:15px}
  .hub-switch__more{display:inline}
  .hub-cities{margin-top:26px; margin-bottom:0}
  .hub-bar__in{padding-left:0; padding-right:0}
  .filter-chips{flex-wrap:nowrap; overflow-x:auto; padding:0 var(--gutter); scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, #000 85%, transparent); mask-image:linear-gradient(90deg, #000 85%, transparent)}
  .filter-chips::-webkit-scrollbar{display:none}
  .filter-chips a{flex:none}
  .hub-bar__count{display:none}
  .hub-grid{grid-template-columns:1fr}
  .hub-grid .story-card--lead .story-card__media{aspect-ratio:4/3}
  .hub-grid.is-few .story-card--lead .story-card__media{min-height:0}
  .hub-more .btn{width:100%}
}
@media (max-width:980px){ .hub-bar{background:var(--ink); -webkit-backdrop-filter:none; backdrop-filter:none} }

/* ---------- app only ---------- */
/* the watch rail is left out (not hidden) when there are no related videos */
.hub-lower.is-tips-only .hub-tips{margin-top:0}