/* =====================================================================
News. — 2027 EDITORIAL REDESIGN
Design tokens, layout system and components.
===================================================================== */
:root{
/* ---- brand & neutrals ---- */
--black: #000000;
--white: #ffffff;
--ink: #0B0B0C;
--ink-2: #17171A;
--ink-3: #232226;
--ink-hover: #4A4640;
--paper: #F5F1EA;
--paper-2: #FFFFFF;
--line: #DED7C8;
--line-dark: rgba(255,255,255,.12);
--muted: #6B675E;
--muted-light:#A39D8C;
--border-bottom:#e5e7eb;
--red: #D7141B;
--red-deep: #8C0F14;
--red-tint: #FCE7E4;
--dark-gray: #333333;
--header-bg: var(--dark-gray);
/* ---- category accents ---- */
--c-news: #D7141B;
--c-national: #0B4EA2;
--c-region: #6E4A9E;
--c-world: #0B6E99;
--c-crime: #000000;
--c-sport: #339933;
--c-magazine: #C21467;
--c-showbiz: #C21467;
--c-business: #9C6B12;
--c-scitech: #059be7;
--c-lifestyle:#F3B032;
--c-lifestyle-ink:#8A5804;
--c-health: #00C6B2;
--c-health-ink:#00786C;
--c-parenting: #67BDD6;
--c-parenting-ink:#1C6076;
/* ---- type ---- */
--serif: 'Noto Serif', 'Noto Serif Fallback', Georgia, 'Times New Roman', serif;
--sans: 'Noto Sans', 'Noto Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
--display: 'Archivo', 'Archivo Fallback', 'Noto Sans', system-ui, sans-serif;
/* ---- geometry ---- */
--shell-max: calc(1280px + 2 * var(--gutter)); /* content 1280px + side padding; News. → Theme & Colors → Site width */
--gutter: 48px;
--radius-s: 4px;
--radius-m: 8px;
--radius-l: 10px;
color-scheme: light;
}
/* Match system fallback metrics to webfonts — cuts refresh layout shift */
@font-face{
font-family: 'Noto Sans Fallback';
src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
size-adjust: 97.2%;
ascent-override: 100%;
descent-override: 27%;
line-gap-override: 0%;
}
@font-face{
font-family: 'Noto Serif Fallback';
src: local('Georgia'), local('Times New Roman');
size-adjust: 106%;
ascent-override: 92%;
descent-override: 25%;
line-gap-override: 0%;
}
@font-face{
font-family: 'Archivo Fallback';
src: local('Arial Narrow'), local('Helvetica Neue'), local('Arial');
size-adjust: 94%;
ascent-override: 95%;
descent-override: 24%;
line-gap-override: 0%;
}
html[data-theme="dark"]{
color-scheme: dark;
--ink: #F2EFE8;
--ink-2: #E8E4DA;
--ink-3: #D8D4C9;
--ink-hover: #CFCBC0;
--paper: #0B0B0C;
--paper-2: #141416;
--line: #2C2C30;
--line-dark: rgba(255,255,255,.12);
--muted: #A39D8C;
--muted-light:#7A756B;
--border-bottom:#2A2A2E;
}
*,*::before,*::after{ box-sizing:border-box; }
html{
scroll-behavior:smooth; scroll-padding-top:110px; overflow-x:clip;
scrollbar-gutter: stable;
}
body{
margin:0;
overflow-x:clip;
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:600; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
ul,ol{ list-style:none; margin:0; padding:0; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* ---- Skeleton placeholders (async / media loading) ---- */
.skel{
display:block; border-radius:6px;
background:linear-gradient(90deg, #e8e4dc 0%, #f3efe6 45%, #e8e4dc 90%);
background-size:200% 100%;
animation:skel-shimmer 1.4s ease-in-out infinite;
}
html[data-theme="dark"] .skel{
background:linear-gradient(90deg, #2a2a2e 0%, #35353a 45%, #2a2a2e 90%);
background-size:200% 100%;
}
/* Placeholders breathe with opacity (graphics card) instead of a moving background (repaints). */
@keyframes skel-shimmer{
0%,100%{ opacity:1; }
50%{ opacity:.6; }
}
.skel--media{ width:100%; }
.skel--ratio-16x10{ aspect-ratio:16/10; }
.skel--ratio-16x9{ aspect-ratio:16/9; }
.skel--ratio-4x3{ aspect-ratio:4/3; }
.skel--line{ height:12px; margin-top:10px; }
.skel--lg{ height:18px; }
.skel--w-25{ width:25%; }
.skel--w-30{ width:30%; }
.skel--w-35{ width:35%; }
.skel--w-55{ width:55%; }
.skel--w-60{ width:60%; }
.skel--w-70{ width:70%; }
.skel--w-80{ width:80%; }
.skel--w-85{ width:85%; }
.skel--w-90{ width:90%; }
.skel--w-95{ width:95%; }
.skel-grid{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
}
.skel-card{ min-width:0; }
.skel-next{
display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; align-items:center;
padding:16px; border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper-2);
}
.skel-next__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.skel-media{
position:relative; overflow:hidden; background:var(--paper);
}
.skel-media::before{
content:""; position:absolute; inset:0; z-index:0;
background:linear-gradient(90deg, #e8e4dc 0%, #f3efe6 45%, #e8e4dc 90%);
background-size:200% 100%;
animation:skel-shimmer 1.4s ease-in-out infinite;
}
html[data-theme="dark"] .skel-media::before{
background:linear-gradient(90deg, #2a2a2e 0%, #35353a 45%, #2a2a2e 90%);
background-size:200% 100%;
}
.skel-media > img,
.skel-media .article-hero__zoom > img,
.skel-media .feature-hero__zoom > img{
position:relative; z-index:1; opacity:0;
transition:opacity .28s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
/* The article photo is the main picture of the page: shown as soon as it arrives (it paints over
the placeholder), not after a script marks it loaded — that would delay the first big paint. */
.skel-media .article-hero__zoom > img,
.skel-media .feature-hero__zoom > img{ opacity:1; }
.skel-media.is-loaded > img,
.skel-media.is-loaded .article-hero__zoom > img,
.skel-media.is-loaded .feature-hero__zoom > img{ opacity:1; }
.skel-media.is-loaded::before{ opacity:0; animation:none; pointer-events:none; transition:opacity .28s ease; }
[data-skel-section]:not(.is-ready) [data-skel-content]{ display:none !important; }
[data-skel-section].is-ready [data-skel-placeholder]{ display:none !important; }
[data-skel-section] [data-skel-content] > *{
opacity:0;
transition:opacity .22s ease;
}
[data-skel-section] [data-skel-content] > *.is-skel-in{ opacity:1; }
@media (max-width:860px){
.skel-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.skel-next{ grid-template-columns:1fr; gap:14px; padding:12px; }
}
@media (max-width:560px){
.skel-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
.skel, .skel-media::before{ animation:none; }
[data-skel-section] [data-skel-content] > *{ transition:none; opacity:1; }
}
.skip-link{ position:absolute; left:12px; top:-80px; background:var(--ink); color:#fff; padding:12px 18px; border-radius:var(--radius-s); z-index:999; transition:top .2s; }
.skip-link:focus{ top:12px; }
.skip-link + .skip-link{ left:12px; }
.skip-link + .skip-link:focus{ top:56px; }
.skip-link + .skip-link + .skip-link:focus{ top:100px; }
:focus-visible{
outline:2px solid var(--red);
outline-offset:3px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible){ outline:none; }
.shell{ max-width:var(--shell-max); margin:0 auto; padding-inline:var(--gutter); }
/* =====================================================================
BUTTONS / CHIPS / TAGS
===================================================================== */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:13px 26px; font-weight:500; font-size:14px; letter-spacing:.01em;
border-radius:var(--radius-s); border:2px solid transparent; white-space:nowrap;
transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary{ background:var(--red); color:#fff; }
.btn--primary:hover{ background:var(--btn-hover, #2B2B30); border-color:var(--btn-hover, #2B2B30); color:#fff; } /* Calm dark grey, no glow, no lift. */
.btn--primary:active{ background:var(--btn-active, #1C1C20); }
.btn--primary:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.btn:disabled,
.btn[disabled]{
opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; pointer-events:none;
}
.btn--outline{
background:var(--paper-2); color:var(--ink);
border-color:var(--border-bottom);
}
.btn--outline:hover{
border-color:var(--ink); color:var(--ink);
background:var(--paper);
transform:translateY(-1px);
}
.btn--ghost-light{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn--ghost-light:hover{ background:#fff; color:var(--ink); }
.btn--block{ width:100%; }
.icon-btn{
width:40px; height:40px; display:flex; align-items:center; justify-content:center;
border-radius:var(--radius-s); border:1px solid var(--border-bottom); background:var(--paper-2);
transition:border-color .2s, background .2s;
}
.icon-btn:hover{ border-color:var(--ink); background:var(--paper); }
.tag{
display:inline-flex; align-items:center; padding:5px 12px; border-radius:2px;
background:var(--red); color:#fff; font-family:var(--sans); font-weight:800;
font-size:12px; letter-spacing:.07em; text-transform:uppercase; width:max-content;
}
.tag--sm{ font-size:10.5px; padding:4px 9px; }
.tag--news{ background:var(--c-news); }
.tag--national{ background:var(--c-national); }
.tag--region{ background:var(--c-region); }
.tag--world{ background:var(--c-world); }
.tag--crime{ background:var(--c-crime); }
.tag--sport{ background:var(--c-sport); }
.tag--magazine{ background:var(--c-magazine); }
.tag--business{ background:var(--c-business); }
.tag--scitech{ background:var(--c-scitech); }
.tag--lifestyle{ background:var(--c-lifestyle); color:#14110A; }
.tag--showbiz{ background:var(--c-showbiz); }
.tag--health{ background:var(--c-health); color:#14110A; }
.tag--parenting{ background:var(--c-parenting); color:#14110A; }
.tag--sponsor{ background:var(--ink-3); }
.social-ico{
width:20px; height:20px; display:flex; align-items:center; justify-content:center;
color:#8B8B8B; transition:color .2s, transform .2s;
}
.social-ico svg{ width:100%; height:100%; fill:currentColor; }
.social-ico:hover{ color:#fff; transform:translateY(-2px); }
/* =====================================================================
HEADER
===================================================================== */
.site-header{ position:sticky; top:0; z-index:80; }
.site-header.is-away{ transform:translateY(-100%); }
.brand-bar{
background:var(--header-bg); position:relative; z-index:2;
}
.brand-bar__inner{
display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
height:50px; padding-inline:var(--gutter);
}
.menu-toggle{
justify-self:start; grid-column:1; display:grid; place-items:center;
width:44px; height:44px; padding:0;
border:none; background:none; color:#fff; z-index:2;
}
.brand{ justify-self:center; display:flex; grid-column:2; z-index:1; }
.brand__logo{ height:var(--logo-h, 30px); width:auto; max-width:min(320px, 42vw); }
.brand-bar__actions{
justify-self:end; display:flex; align-items:center; gap:10px;
grid-column:3; z-index:2;
}
.brand-bar__premium{
display:inline-flex; align-items:center; gap:7px; height:40px; padding:0;
color:#fff; font-family:var(--sans); font-size:13px; font-weight:600;
letter-spacing:.02em; white-space:nowrap;
transition:opacity .15s;
}
.brand-bar__premium svg{ flex:none; display:block; }
.brand-bar__premium:hover{ opacity:.72; }
.icon-btn--ghost{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.icon-btn--ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
/* ---- Theme dropdown (brand bar) ---- */
.theme-dd{ position:relative; }
.theme-dd__current{ display:grid; place-items:center; width:19px; height:19px; }
.theme-dd__svg{ grid-area:1 / 1; opacity:0; transform:scale(.92); transition:opacity .18s, transform .18s; }
.theme-dd__current[data-theme-icon="light"] .theme-dd__svg--light,
.theme-dd__current[data-theme-icon="dark"] .theme-dd__svg--dark{
opacity:1; transform:scale(1);
}
.theme-dd__panel{
position:absolute; top:calc(100% + 12px); right:0; min-width:168px;
background:var(--paper-2); border:1px solid var(--border-bottom); border-radius:var(--radius-s);
box-shadow:0 20px 40px rgba(11,11,12,.22); padding:6px;
opacity:0; visibility:hidden; transform:translateY(-8px);
transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:95;
}
.theme-dd__panel.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.theme-dd__opt{
width:100%; display:flex; align-items:center; gap:10px;
border:none; background:transparent; color:var(--ink);
font:inherit; font-size:13px; font-weight:600; text-align:left;
padding:10px 12px; border-radius:var(--radius-s); cursor:pointer;
transition:background .15s, color .15s;
}
.theme-dd__opt svg{ flex:none; color:var(--muted); }
.theme-dd__opt:hover{ background:var(--paper); }
.theme-dd__opt.is-active,
.theme-dd__opt[aria-checked="true"]{
background:var(--paper); color:var(--ink);
}
.theme-dd__opt.is-active svg,
.theme-dd__opt[aria-checked="true"] svg{ color:var(--red); }
/* ---- notification bell + unread dot + alerts dropdown ---- */
.notify{ position:relative; }
.notify__btn{ position:relative; }
.notify__btn.is-unread::after{
content:''; position:absolute; top:7px; right:7px; width:7px; height:7px;
border-radius:999px; background:#FF9800; border:1.5px solid var(--red);
}
.notify__panel{
position:absolute; top:calc(100% + 14px); right:0; width:min(340px, calc(100vw - 24px));
background:var(--paper-2); border:1px solid var(--border-bottom); border-radius:var(--radius-s);
box-shadow:0 24px 48px rgba(11,11,12,.2); padding:18px;
opacity:0; visibility:hidden; transform:translateY(-8px);
transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:90;
}
.notify__panel.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.notify__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--border-bottom); }
.notify__head-start{ display:flex; align-items:center; gap:8px; min-width:0; }
.notify__head h3{ margin:0; font-family:var(--sans); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.notify__filter,
.notify__close{
border:none; background:none; color:var(--muted-light);
display:grid; place-items:center; flex:none;
width:28px; height:28px; padding:0;
border-radius:var(--radius-s);
transition:color .18s, background .18s;
}
.notify__filter:hover,
.notify__close:hover{ color:var(--red); background:var(--paper); }
.notify__filter svg,
.notify__close svg{ display:block; }
.notify__list li{ border-top:1px solid var(--border-bottom); }
.notify__list li:first-child{ border-top:none; }
.notify__list a{ display:block; padding:12px 2px; }
.notify__headline{ display:block; font-size:14px; line-height:1.35; font-weight:500; color:var(--ink); margin-bottom:4px; }
.notify__list .meta{ color:var(--muted-light); }
/* ---- Account dropdown ---- */
.account{ position:relative; }
.account__panel{
position:absolute; top:calc(100% + 14px); right:0; width:min(300px, calc(100vw - 24px));
background:var(--paper-2); border:1px solid var(--border-bottom); border-radius:var(--radius-s);
box-shadow:0 24px 48px rgba(11,11,12,.2); padding:0;
opacity:0; visibility:hidden; transform:translateY(-8px);
transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:95;
}
.account__panel.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
html.is-logged-in .account__view--guest{ display:none; }
html:not(.is-logged-in) .account__view--user{ display:none; }
.account__view--user{ padding:10px; }
.account__user{
display:flex; align-items:center; gap:12px;
padding:12px; margin-bottom:4px; border-radius:var(--radius-s);
background:var(--paper);
}
.account__avatar{
flex:none; width:40px; height:40px; border-radius:var(--radius-s);
display:grid; place-items:center; background:var(--ink); color:#fff;
}
.account__meta{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.account__name{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.2; }
.account__email{
font-size:12px; color:var(--muted); line-height:1.3;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.account__edit{
flex:none; width:36px; height:36px; margin-left:auto;
display:grid; place-items:center;
border-radius:var(--radius-s); color:var(--muted);
transition:background .15s, color .15s;
}
.account__edit:hover{ background:var(--paper-2); color:var(--ink); }
.account__edit:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.account__edit svg{ display:block; }
.account__menu{ list-style:none; margin:0; padding:4px 0; }
.account__menu a,
.account__logout{
display:flex; align-items:center; gap:12px; width:100%;
padding:11px 12px; border-radius:var(--radius-s);
font-size:14px; font-weight:500; color:var(--ink);
transition:background .15s, color .15s;
}
.account__menu a svg,
.account__logout svg{ flex:none; color:var(--muted); }
.account__menu a:hover{ background:var(--paper); }
.account__premium .premium-mark{ margin-left:auto; margin-right:0; }
.account__logout{
margin:4px 0 0; padding:11px 12px;
border:0; border-top:1px solid var(--border-bottom);
border-radius:0; background:transparent;
font:inherit; font-size:14px; font-weight:600; line-height:1.2;
color:var(--red); text-align:left; cursor:pointer;
appearance:none; -webkit-appearance:none;
}
.account__logout svg{ color:var(--red); }
.account__logout:hover{ background:rgba(237,28,36,.06); }
.account__panel--guest{ padding:14px 12px 12px; }
.account__guest{
margin:0 0 12px; padding:0 2px;
font-size:13px; font-weight:500; line-height:1.35; color:var(--muted);
}
.account__social{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
margin:0 0 12px;
}
.account__social-btn{
display:grid; place-items:center;
height:42px; border-radius:var(--radius-s);
border:1px solid transparent; transition:transform .15s, opacity .15s, box-shadow .15s;
}
.account__social-btn:hover{ opacity:.92; }
.account__social-btn:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.account__social-btn svg{ width:20px; height:20px; display:block; }
.account__social-btn--fb{ background:#1877F2; }
.account__social-btn--google{
background:#fff; border-color:var(--border-bottom);
box-shadow:inset 0 0 0 1px rgba(11,11,12,.04);
}
html[data-theme="dark"] .auth-social__btn--google{
background:var(--paper-2); border-color:var(--border-bottom);
}
.account__social-btn--apple{ background:#111; }
.account__social-hint{
margin:0 0 8px; padding:0 2px;
font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
color:var(--muted-light);
}
.account__signup{
display:block; margin-top:10px; text-align:center;
font-size:13px; font-weight:700; color:var(--red);
}
.account__panel--guest .btn{ padding:11px 18px; font-size:13.5px; }
/* Auth social row on premium login page */
.auth-social{
display:flex; flex-direction:column; gap:10px;
margin:0 0 14px;
}
.auth-social__btn{
display:flex; align-items:center; justify-content:center; gap:10px;
height:48px; padding:0 16px; border-radius:var(--radius-s);
border:1px solid var(--border-bottom); background:var(--paper-2);
font:inherit; font-size:14px; font-weight:600; color:var(--ink);
cursor:pointer; transition:background .15s, border-color .15s, transform .15s;
}
.auth-social__btn:hover{ background:var(--paper); border-color:var(--muted-light); }
.auth-social__btn:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.auth-social__btn svg,
.auth-social__btn img{ width:20px; height:20px; display:block; flex:none; }
.auth-social__btn--apple{ background:#111; color:#fff; border-color:#111; }
.auth-social__btn--apple:hover{ background:#000; border-color:#000; color:#fff; }
.auth-social__label{
margin:0 0 10px;
font-size:13px; font-weight:500; line-height:1.35; color:var(--muted);
}
.auth-divider{
display:flex; align-items:center; gap:12px;
margin:4px 0 14px;
font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:var(--muted-light);
}
.auth-divider::before,
.auth-divider::after{
content:""; flex:1; height:1px; background:var(--border-bottom);
}
/* Standalone login page */
.login-page{
min-height:calc(100vh - 120px);
display:flex; align-items:flex-start; justify-content:center;
padding:32px var(--gutter) 56px;
background:
radial-gradient(900px 420px at 50% -10%, rgba(237,28,36,.08), transparent 60%),
var(--paper);
}
.login-card{
width:min(760px, 100%);
background:var(--paper-2);
border:1px solid var(--border-bottom);
border-radius:var(--radius-m);
box-shadow:0 18px 48px rgba(11,11,12,.08);
padding:28px 28px 24px;
}
.login-card__logo{
display:flex; justify-content:center; margin-bottom:18px;
}
.login-card__logo img{ height:28px; width:auto; }
.login-card h1{
margin:0 0 8px; text-align:center;
font-family:var(--sans); font-size:22px; font-weight:700; letter-spacing:-.02em;
}
.login-card__dek{
margin:0 0 16px; text-align:center;
font-size:14px; line-height:1.45; color:var(--muted);
}
.login-card__benefits{
list-style:none; margin:0 0 20px; padding:10px 14px;
display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px 12px;
background:var(--paper); border-radius:var(--radius-s);
border:1px solid var(--border-bottom);
}
.login-card__benefits li{
position:relative; padding:2px 0 2px 16px;
font-size:12.5px; line-height:1.35; color:var(--ink-2);
white-space:nowrap;
}
.login-card__benefits li::before{
content:""; position:absolute; left:0; top:7px;
width:6px; height:6px; border-radius:50%; background:var(--red);
}
.login-card__split{
display:grid;
grid-template-columns:minmax(0, 1fr) auto minmax(0, 1.1fr);
gap:0 20px;
align-items:start;
}
.login-card__col-label{
margin:0 0 10px;
font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--muted-light);
}
.login-card__col--social .auth-social{ margin:0; }
.login-card__or{
display:flex; flex-direction:column; align-items:center; justify-content:center;
align-self:stretch; margin:0; gap:10px;
font-size:12px; font-weight:600; letter-spacing:.02em;
color:var(--muted-light);
}
.login-card__or::before,
.login-card__or::after{
content:""; flex:1; width:1px; background:var(--border-bottom);
}
.login-card .premium-field{ margin-bottom:12px; }
.login-card .btn--block{ margin-top:4px; }
.login-card__switch{
margin:18px 0 0; text-align:center;
font-size:13px; color:var(--muted);
}
.login-card__switch a{ color:var(--red); font-weight:700; }
.login-card__legal{
margin:12px 0 0; text-align:center;
font-size:11px; line-height:1.45; color:var(--muted-light);
}
.login-card__legal a{ color:var(--muted); text-decoration:underline; }
.login-card [data-auth-panel][hidden],
.login-card [data-auth-done][hidden]{ display:none !important; }
@media (max-width:720px){
.login-card__benefits{ grid-template-columns:1fr; }
.login-card__benefits li{ white-space:normal; }
.login-card__split{
grid-template-columns:1fr;
gap:4px 0;
}
.login-card__or{
flex-direction:row; align-self:auto; margin:8px 0 12px; gap:12px;
}
.login-card__or::before,
.login-card__or::after{
width:auto; flex:1; height:1px;
}
}
@media (max-width:520px){
.login-page{ padding:16px 14px 40px; min-height:0; }
.login-card{ padding:18px 14px 16px; border-radius:var(--radius-s); width:100%; }
.login-card h1{ font-size:20px; }
.login-card__dek{ font-size:13px; margin-bottom:12px; }
.auth-social__btn{ height:46px; font-size:13.5px; }
.login-card .premium-field input,
.login-card .premium-field{ font-size:16px; } /* avoid iOS zoom */
}
.search-panel{ max-height:0; overflow:hidden; background:var(--paper-2); border-bottom:1px solid transparent; transition:max-height .25s ease; }
.search-panel.is-open{ max-height:90px; border-bottom-color:var(--border-bottom); }
.search-panel__inner{ display:flex; align-items:center; gap:14px; padding:20px var(--gutter); color:var(--muted); }
.search-panel__inner input{ flex:1; border:none; background:none; font-size:19px; font-family:var(--serif); outline:none; color:var(--ink); }
.nav-bar{ background:var(--paper-2); border-bottom:1px solid var(--border-bottom); position:relative; }
.nav-bar__inner{ display:flex; align-items:center; justify-content:flex-start; gap:28px; height:48px; overflow-x:visible; scrollbar-width:none; }
.nav-bar__inner::-webkit-scrollbar{ display:none; }
.nav-bar__links{ display:flex; align-items:stretch; gap:0; flex:none; }
.nav-bar__utility{ display:flex; align-items:center; gap:18px; flex:none; margin-left:auto; padding-left:22px; border-left:1px solid var(--border-bottom); }
.nav-bar__utility a{ font-size:13px; font-weight:400; color:var(--muted); letter-spacing:.02em; white-space:nowrap; }
.nav-bar__utility a:hover{ color:var(--red); }
.nav-link{
position:relative; display:flex; align-items:center;
font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.02em;
color:var(--ink); white-space:nowrap; padding:0 12px; height:48px;
}
.nav-bar__links > .nav-link:first-child{ padding-left:0; }
.nav-link::after{ content:''; position:absolute; left:12px; right:12px; bottom:0; height:3px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .22s ease; }
.nav-bar__links > .nav-link:first-child::after{ left:0; }
.nav-link:hover::after, .nav-link.is-active::after, .nav-item.is-open .nav-link::after{ transform:scaleX(1); }
.nav-link.is-active{ color:var(--red); }
.nav-item.is-open .nav-link{ color:var(--red); }
.nav-link--news:hover, .nav-item.is-open .nav-link--news{ color:var(--c-news); }
.nav-link--national:hover, .nav-item.is-open .nav-link--national{ color:var(--c-national); }
.nav-link--region:hover, .nav-item.is-open .nav-link--region{ color:var(--c-region); }
.nav-link--world:hover, .nav-item.is-open .nav-link--world{ color:var(--c-world); }
.nav-link--crime:hover, .nav-item.is-open .nav-link--crime{ color:var(--c-crime); }
.nav-link--sport:hover, .nav-item.is-open .nav-link--sport{ color:var(--c-sport); }
.nav-link--magazine:hover, .nav-item.is-open .nav-link--magazine{ color:var(--c-magazine); }
.nav-link--business:hover, .nav-item.is-open .nav-link--business{ color:var(--c-business); }
.nav-link--scitech:hover, .nav-item.is-open .nav-link--scitech{ color:var(--c-scitech); }
.nav-link--lifestyle:hover, .nav-item.is-open .nav-link--lifestyle{ color:var(--c-lifestyle-ink); }
/* ---- Full-width mega menu (Kalea-style drop) ---- */
.nav-item{ position:static; }
.mega-panel{
position:absolute; left:0; right:0; top:100%;
background:var(--paper-2); border-bottom:1px solid var(--border-bottom);
box-shadow:0 28px 50px -20px rgba(11,11,12,.22);
opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
transition:opacity .28s cubic-bezier(.2,.7,.2,1), transform .28s cubic-bezier(.2,.7,.2,1), visibility .28s;
z-index:70; padding:0; border-radius:0;
}
/* Instant swap when moving Sport → Magazine — no fade-out/fade-in flicker. */
html.mega-switching .mega-panel{ transition:none !important; }
.nav-item.is-open .mega-panel,
.nav-item:focus-within .mega-panel{
opacity:1; visibility:visible; transform:none; pointer-events:auto;
}
.mega-panel__inner{
display:grid; grid-template-columns:1.2fr minmax(0,2.4fr);
gap:18px 24px; align-items:start; padding:22px 0 18px;
}
.mega-panel__lead{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.mega-panel__feature{ display:block; min-width:0; }
.mega-panel__feature-media{
position:relative; display:block; overflow:hidden; border-radius:var(--radius-s);
aspect-ratio:4/3; background:var(--ink); margin-bottom:10px;
}
.mega-panel__feature-media img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.mega-panel__feature:hover .mega-panel__feature-media img{ transform:scale(1.05); }
.mega-panel__feature-media .tag,
.mega-panel__card-media .tag{ position:absolute; z-index:2; top:10px; left:10px; }
.mega-panel__feature h3{
font-family:var(--display); font-size:clamp(17px,1.35vw,22px); line-height:1.18;
letter-spacing:-.02em; font-weight:800; color:var(--ink);
}
.mega-panel__feature:hover h3{ color:var(--mega-accent, var(--red)); } /* Section colour (set on .mega-panel). */
.mega-panel__feature .meta{ display:block; margin-top:8px; }
.mega-panel__grid{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px 18px; align-items:start; min-width:0;
}
.mega-panel__grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mega-panel__card{
display:flex; flex-direction:column; gap:10px; min-width:0;
}
.mega-panel__card-media{
position:relative; display:block; width:100%; overflow:hidden; border-radius:var(--radius-s);
aspect-ratio:4/3; background:var(--ink);
}
.mega-panel__card-media img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.mega-panel__card:hover .mega-panel__card-media img{ transform:scale(1.06); }
.mega-panel__card-body{ min-width:0; }
.mega-panel__card h4{
font-family:var(--sans); font-size:14px; line-height:1.28; font-weight:500; color:var(--ink);
}
.mega-panel__card:hover h4{ color:var(--ink-hover); }
.mega-panel__card .meta{ display:block; margin-top:5px; font-size:11px; }
.mega-panel__more{
display:inline-flex; align-items:center; gap:8px; align-self:start;
margin-top:2px; padding:0; border-top:none;
font-size:14px; font-weight:800; color:var(--red);
transition:gap .18s ease, color .18s ease, opacity .18s ease;
}
.mega-panel__more:hover{ gap:12px; opacity:.82; }
.mega-panel__more svg{ flex:none; }
.nav-item:has(.nav-link--news) .mega-panel__more{ color:var(--c-news); }
.nav-item:has(.nav-link--national) .mega-panel__more{ color:var(--c-national); }
.nav-item:has(.nav-link--region) .mega-panel__more{ color:var(--c-region); }
.nav-item:has(.nav-link--world) .mega-panel__more{ color:var(--c-world); }
.nav-item:has(.nav-link--crime) .mega-panel__more{ color:var(--c-crime); }
.nav-item:has(.nav-link--sport) .mega-panel__more{ color:var(--c-sport); }
.nav-item:has(.nav-link--magazine) .mega-panel__more{ color:var(--c-magazine); }
.nav-item:has(.nav-link--business) .mega-panel__more{ color:var(--c-business); }
.nav-item:has(.nav-link--scitech) .mega-panel__more{ color:var(--c-scitech); }
.nav-item:has(.nav-link--lifestyle) .mega-panel__more{ color:var(--c-lifestyle-ink); }
/* mobile nav drawer — left, Kalea-style */
.mobile-nav{
position:fixed; top:0; bottom:0; left:0; width:min(380px,88vw);
background:var(--paper-2); color:var(--ink); z-index:120;
display:flex; flex-direction:column;
transform:translateX(-100%); transition:transform .4s cubic-bezier(.2,.7,.2,1);
box-shadow:18px 0 40px rgba(11,11,12,.12);
}
.mobile-nav.is-open{ transform:none; }
.mobile-nav__top{
display:flex; align-items:center; justify-content:space-between;
padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.14); flex:none;
background:var(--header-bg); color:#fff;
}
.mobile-nav__top img{ height:22px; width:auto; }
.mobile-nav__close{
width:40px; height:40px; border:none; background:transparent; color:#fff;
display:grid; place-items:center; border-radius:999px;
}
.mobile-nav__close:hover{ background:rgba(255,255,255,.14); }
.mobile-nav__body{
overflow-y:auto; padding:14px 16px 24px; flex:1; min-height:0;
-webkit-overflow-scrolling:touch;
}
.mobile-nav__search{
width:100%; display:flex; align-items:center; gap:10px;
margin:0 0 14px; padding:12px 14px;
border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper); color:var(--muted);
font-family:var(--sans); font-size:14px; font-weight:600; text-align:left; cursor:pointer;
transition:border-color .18s, color .18s, background .18s;
}
.mobile-nav__search:hover{ border-color:var(--ink); color:var(--ink); background:var(--paper-2); }
.mobile-nav__search svg{ flex:none; width:17px; height:17px; }
.mobile-nav__utility{
display:flex; align-items:flex-end; justify-content:flex-start; gap:10px;
padding:2px 4px 12px; border-bottom:none;
}
.mobile-nav__premium{
display:inline-flex; align-items:center; gap:8px;
height:38px; padding:0 14px 0 12px;
border:1px solid var(--border-bottom); border-radius:999px;
background:var(--paper); color:var(--ink);
font-size:13px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
transition:border-color .18s, background .18s, color .18s;
}
.mobile-nav__premium svg{ flex:none; display:block; }
.mobile-nav__premium:hover{ color:var(--ink); border-color:var(--ink); background:var(--paper-2); }
.mobile-nav__premium.is-active{ color:var(--ink); border-color:var(--ink); }
.mobile-nav__icon{
position:relative; flex:none;
width:38px; height:38px; display:grid; place-items:center;
border:1px solid var(--border-bottom); border-radius:999px;
background:var(--paper); color:var(--ink);
}
.mobile-nav__icon:hover{ border-color:var(--ink); background:var(--paper-2); }
.mobile-nav__icon.notify__btn.is-unread::after{
top:6px; right:6px; border-color:var(--paper);
}
.mobile-nav__links{ display:flex; flex-direction:column; }
.mobile-nav__link,
.mobile-nav__row > .mobile-nav__link{
display:block; font-family:var(--sans); font-size:15px; font-weight:600;
padding:12px 4px; border-bottom:1px solid var(--border-bottom); color:var(--ink);
line-height:1.3; letter-spacing:-.01em;
}
.mobile-nav__link.is-active{ color:var(--red); font-weight:700; }
.mobile-nav__group{ border-bottom:1px solid var(--border-bottom); }
.mobile-nav__links > .mobile-nav__link:last-child,
.mobile-nav__links > .mobile-nav__group:last-child{ border-bottom:none; }
.mobile-nav__row{
display:flex; align-items:center; gap:2px; min-height:46px;
}
.mobile-nav__row > .mobile-nav__link{
flex:1; min-width:0; border-bottom:none; padding:12px 4px;
}
.mobile-nav__row > span.mobile-nav__link{ font-weight:500; }
.mobile-nav__acc{
flex:none; width:40px; height:40px; border:none; background:transparent;
color:var(--muted); display:grid; place-items:center; border-radius:var(--radius-s);
transition:color .18s, transform .22s;
}
.mobile-nav__acc:hover{ color:var(--ink); }
.mobile-nav__acc svg{ width:16px; height:16px; }
.mobile-nav__group.is-open .mobile-nav__acc{ color:var(--ink); transform:rotate(180deg); }
.mobile-nav__sub{
display:none; flex-direction:column; padding:0 4px 10px 12px;
}
.mobile-nav__group.is-open .mobile-nav__sub{ display:flex; }
.mobile-nav__sub a{
display:block; font-family:var(--sans); font-size:14px; font-weight:600;
padding:9px 6px; color:var(--muted); border:none; line-height:1.35;
}
.mobile-nav__sub a:hover,
.mobile-nav__sub a.is-active{ color:var(--red); }
.mobile-nav__sep{
height:1px; margin:12px 0; background:var(--border-bottom);
border:none;
}
.mobile-nav__brand{ display:flex; flex-direction:column; }
.mobile-nav__brand-label{
margin:0 0 4px; padding:0 4px;
font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--muted);
}
.mobile-nav__brand .mobile-nav__link:last-child{ border-bottom:none; }
.theme-health .mobile-nav__brand-label,
.theme-health .mobile-nav__brand .mobile-nav__link.is-active,
.theme-health .mobile-nav__brand .mobile-nav__link:hover{
color:var(--c-health-ink);
}
.theme-parenting .mobile-nav__brand-label,
.theme-parenting .mobile-nav__brand .mobile-nav__link.is-active,
.theme-parenting .mobile-nav__brand .mobile-nav__link:hover{
color:var(--c-parenting-ink);
}
html[data-theme="dark"] .theme-health .mobile-nav__brand-label,
html[data-theme="dark"] .theme-health .mobile-nav__brand .mobile-nav__link.is-active,
html[data-theme="dark"] .theme-health .mobile-nav__brand .mobile-nav__link:hover{
color:var(--c-health);
}
html[data-theme="dark"] .theme-parenting .mobile-nav__brand-label,
html[data-theme="dark"] .theme-parenting .mobile-nav__brand .mobile-nav__link.is-active,
html[data-theme="dark"] .theme-parenting .mobile-nav__brand .mobile-nav__link:hover{
color:var(--c-parenting);
}
.mobile-nav__links--sec .mobile-nav__link{
font-size:15px; font-weight:600; padding:12px 4px;
}
.mobile-nav__links--sec .mobile-nav__link:last-child{ border-bottom:none; }
.theme-switch{ display:grid; gap:8px; padding:0; }
.theme-switch__label{
font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
color:var(--muted-light);
}
.theme-switch__row{
display:inline-flex; align-items:center; gap:4px;
padding:3px; border-radius:999px; width:fit-content;
background:var(--paper); border:1px solid var(--border-bottom);
}
.theme-switch__btn{
width:36px; height:32px; border:none; border-radius:999px;
display:grid; place-items:center; background:transparent; color:var(--muted);
transition:background .18s, color .18s;
}
.theme-switch__btn:hover{ color:var(--ink); background:rgba(11,11,12,.04); }
html[data-theme="dark"] .theme-switch__btn:hover{ background:rgba(255,255,255,.06); }
.theme-switch__btn.is-active,
.theme-switch__btn[aria-pressed="true"]{
background:var(--paper-2); color:var(--ink);
box-shadow:0 1px 4px rgba(11,11,12,.12);
}
html[data-theme="dark"] .theme-switch__btn.is-active,
html[data-theme="dark"] .theme-switch__btn[aria-pressed="true"]{
box-shadow:0 1px 4px rgba(0,0,0,.45);
}
.mobile-nav__footer{
flex:none; padding:14px 16px; border-top:1px solid var(--border-bottom); background:var(--paper);
}
.mobile-nav__footer .btn{ padding:13px 18px; font-size:14px; }
.scrim{
position:fixed; inset:0; background:rgba(11,11,12,.48); opacity:0; visibility:hidden;
transition:opacity .3s ease, visibility .3s; z-index:110;
-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.scrim.is-open{ opacity:1; visibility:visible; }
html.is-locked,
body.is-locked{
overflow:hidden;
overflow-x:hidden;
overscroll-behavior:none;
}
body.is-locked .read-progress{ visibility:hidden; opacity:0; }
/* The scrollbar's reserved space (scrollbar-gutter) shows the root background: match full-screen overlays. */
html.is-locked:has(.srch.is-open){ background:var(--paper); }
html.is-locked:has(.shorts-viewer.is-open){ background:#0a0a0a; }
/* ---- Full-screen search overlay ---- */
.srch{
position:fixed; inset:0; z-index:130;
background:var(--paper);
display:flex; flex-direction:column;
opacity:0; visibility:hidden;
--ox:calc(100% - 96px); --oy:42px;
clip-path:circle(0% at var(--ox) var(--oy));
transition:clip-path .52s cubic-bezier(.2,.7,.2,1), opacity .3s ease, visibility .52s;
overscroll-behavior:contain;
}
.srch.is-open{ opacity:1; visibility:visible; clip-path:circle(150% at var(--ox) var(--oy)); }
@media (min-width:861px){
.srch.is-open{ top:50px; }
}
@media (prefers-reduced-motion:reduce){
.srch{ clip-path:none; transition:opacity .2s linear, visibility .2s; }
}
.srch-bar{
flex:none; background:var(--paper-2); border-bottom:1px solid var(--border-bottom);
padding:14px var(--gutter); box-shadow:0 8px 24px rgba(11,11,12,.06);
}
.srch-row{ display:flex; align-items:center; gap:12px; max-width:var(--shell-max); margin-inline:auto; min-width:0; }
.srch-field{
position:relative; flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px;
height:54px; padding:0 18px;
background:var(--paper); border:1px solid transparent; border-radius:999px;
transition:border-color .18s, background .18s;
}
.srch-field:focus-within{ background:var(--paper-2); border-color:var(--border-bottom); }
.srch-field > svg{ width:20px; height:20px; flex:none; color:var(--red); }
.srch-field input{
flex:1; min-width:0; border:0; background:none; outline:0;
font-size:17px; font-weight:500; color:var(--ink); font-family:inherit;
}
.srch-field input::placeholder{ color:var(--muted-light); }
.srch-field input::-webkit-search-cancel-button,
.srch-field input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }
.srch-clear{
width:28px; height:28px; flex:none; border-radius:50%; border:none;
display:none; place-items:center; background:var(--border-bottom); color:var(--ink); cursor:pointer;
}
.srch-field.has-value .srch-clear{ display:grid; }
.srch-close{
flex:none; display:inline-flex; align-items:center; gap:8px;
height:54px; padding:0 18px; border-radius:999px; border:none; background:transparent;
font-size:14px; font-weight:500; color:var(--ink); cursor:pointer;
}
.srch-close:hover{ background:var(--paper); }
.srch-close svg{ width:17px; height:17px; }
@media (max-width:560px){ .srch-close span{ display:none; } .srch-close{ padding:0 12px; } }
.srch-keys{ display:none; }
@media (min-width:901px){
.srch-bar{ padding:22px var(--gutter); }
.srch-field{ height:68px; padding:0 24px; gap:16px; }
.srch-field > svg{ width:24px; height:24px; }
.srch-field input{ font-size:22px; }
.srch-close{ height:68px; padding:0 24px; font-size:15px; }
.srch-keys{
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
max-width:var(--shell-max); margin:12px auto 0;
font-size:12px; color:var(--muted-light);
}
.srch-keys span{ display:inline-flex; align-items:center; gap:6px; }
.srch-keys kbd{
font:inherit; font-weight:500; color:var(--muted);
min-width:20px; height:20px; padding:0 5px;
display:inline-grid; place-items:center;
background:var(--paper-2); border:1px solid var(--border-bottom);
border-bottom-width:2px; border-radius:5px;
}
}
.srch-body{
flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
padding:clamp(18px,3vw,32px) var(--gutter) 60px;
}
.srch-in{ max-width:var(--shell-max); margin-inline:auto; }
.srch-h{
display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:0 0 12px;
}
.srch-h b{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.srch-h span{ font-size:12px; color:var(--muted-light); }
.srch-grp{ margin-bottom:clamp(22px,3vw,34px); }
.srch-hits{ display:grid; gap:2px; }
.srch-hit{
display:flex; align-items:center; gap:14px; min-width:0;
padding:10px 12px; border-radius:var(--radius-s);
transition:background .15s;
}
.srch-hit:hover, .srch-hit.is-sel{ background:var(--paper-2); }
.srch-hit-media{
width:88px; height:66px; flex:none; border-radius:var(--radius-s); overflow:hidden; background:var(--ink);
}
.srch-hit-media img{ width:100%; height:100%; object-fit:cover; }
.srch-hit-txt{ min-width:0; flex:1; }
.srch-hit-txt b{ display:block; font-size:15px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srch-hit-txt span{ display:block; font-size:12px; color:var(--muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srch-hit mark{ background:rgba(237,28,36,.14); color:var(--red-deep); border-radius:2px; padding:0 2px; }
.srch-empty{ text-align:center; padding:clamp(30px,7vw,64px) 0; }
.srch-empty svg{ width:38px; height:38px; color:var(--border-bottom); margin-inline:auto; margin-bottom:14px; }
.srch-empty b{ display:block; font-family:var(--display); font-size:22px; margin-bottom:8px; }
.srch-empty p{ margin:0 auto; max-width:38ch; font-size:14px; color:var(--muted); }
.srch-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px; }
.srch-chips button{
border:1px solid var(--border-bottom); background:var(--paper-2); border-radius:999px; padding:8px 14px;
font-size:13px; font-weight:500; color:var(--ink); cursor:pointer;
}
.srch-chips button:hover{ border-color:var(--red); color:var(--red); }
@media (max-width:1080px){
.mega-panel__inner{ grid-template-columns:1.1fr minmax(0,2.2fr); gap:14px 16px; padding:18px 0 14px; }
.mega-panel__grid{ gap:12px 14px; }
.mega-panel__card h4{ font-size:13px; }
}
/* =====================================================================
BREAKING TICKER
===================================================================== */
.breaking{ background: linear-gradient(90deg, #000000, #626262); }
.breaking__inner{ display:flex; align-items:center; gap:22px; height:46px; }
.live-tag{ flex:none; display:inline-flex; align-items:center; gap:8px; background: var(--red); color:#fff; font-weight:800; font-size:11.5px; letter-spacing:.08em; padding:6px 12px; border-radius:2px; }
.live-dot{ width:7px; height:7px; border-radius:999px; background:#fff; animation:pulse 1.6s ease-in-out infinite; }
/* Opacity only: runs on the graphics card, no repaint on every frame (slow phones). */
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.breaking__viewport{ flex:1; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); }
.breaking__track{ display:flex; gap:52px; white-space:nowrap; width:max-content; animation:scroll-left 34s linear infinite; }
.breaking__track li{ color:#fff; font-weight:600; font-size:14px; }
.breaking__track a{ color:inherit; text-decoration:none; }
.breaking__track a:hover{ text-decoration:underline; text-underline-offset:3px; }
@keyframes scroll-left{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.breaking:not([data-live="true"]){ display:none; }
/* =====================================================================
AD SLOTS
===================================================================== */
.ad-wrap{ padding:15px 0 15px; display:flex; justify-content:center; }
.shell.ad-wrap{
width:min(100%,var(--shell-max));
margin-inline:auto;
}
.ad-wrap--center{ padding:8px 0 36px; }
.ad-unit{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.ad-unit__label{ font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-light); }
.ad-slot{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
width:100%; background:repeating-linear-gradient(135deg, #EEEAE0, #EEEAE0 10px, #E7E2D6 10px, #E7E2D6 20px);
border:1px dashed #C9C2B0; color:var(--muted-light); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
}
.ad-slot__label{ font-size:10px; letter-spacing:.14em; }
.ad-slot__dims{ font-size:14px; color:var(--muted); font-weight:800; letter-spacing:.04em; }
.ad-slot--billboard{
width:min(100%,970px);
max-width:970px;
margin-inline:auto;
}
.ad-slot--billboard picture{ display:block; width:100%; }
.ad-slot--rectangle{ max-width:300px; height:250px; }
.ad-slot--skyscraper{ width:300px; height:600px; }
.ad-slot--intext{ max-width:728px; }
.ad-slot--filled{ border:none; background:none; display:block; }
.ad-slot--filled img{ width:100%; height:auto; display:block; }
/* After-hero MPU — mobile only (desktop uses top 970×250) */
.ad-wrap--after-hero{ display:none; }
@media (min-width:861px){
.ad-wrap--after-hero{ display:none !important; }
}
/* =====================================================================
SHARED STORY CARD (image + overlay headline)
===================================================================== */
.story-card{ position:relative; display:block; overflow:hidden; border-radius:var(--radius-s); background:var(--paper); }
.story-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.story-card:hover img{ transform:scale(1.06); }
.story-card__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,6,7,0) 32%, rgba(6,6,7,.58) 66%, rgba(6,6,7,.94) 100%); }
.story-card__scrim--full{ background:linear-gradient(180deg, rgba(6,6,7,.05) 20%, rgba(6,6,7,.62) 60%, rgba(6,6,7,.94) 100%); }
.story-card__body{ position:absolute; left:0; right:0; bottom:0; padding:30px; display:flex; flex-direction:column; gap:12px; }
.story-card__headline{ color:#fff; font-size:24px; line-height:1.18; font-weight:600; }
.meta{ color:#D8D4C9; font-size:13px; font-weight:500; }
.meta-comments{
display:inline-flex;
align-items:center;
gap:.28em;
margin-left:.15em;
vertical-align:-2px;
white-space:nowrap;
font-variant-numeric:tabular-nums;
line-height:1;
}
.meta-comments__icon{
display:inline-flex;
align-items:center;
line-height:0;
}
.meta-comments__icon svg{
width:12px;
height:12px;
display:block;
}
.meta-comments__n{
line-height:1;
font-size:inherit;
}
.meta-sep{
margin:0 .05em;
}
.meta-comments--auto{ color:inherit; }
.meta-comments--dark{ color:#1a1a1a; }
.meta-comments--white{ color:#fff; }
.dek{ color:#E5E1D6; font-size:16px; line-height:1.5; max-width:600px; }
/* =====================================================================
SECTION SCAFFOLDING
===================================================================== */
.section{ padding-block:0; }
.section-tint{ padding-block:64px; background:var(--paper); }
.section-dark{ padding-block:64px; background:var(--ink); }
.section-dark--sport{
position:relative; overflow:hidden; background:#143414;
}
.section-dark--sport > .shell{ position:relative; z-index:1; }
.sport-glow{
position:absolute; top:-260px; left:-180px; width:880px; height:720px; border-radius:50%;
pointer-events:none; z-index:0;
background:radial-gradient(closest-side, rgba(51,153,51,.32), rgba(51,153,51,0) 72%);
}
.sport-glow--br{
top:auto; left:auto; right:-280px; bottom:-320px;
width:1100px; height:900px;
background:radial-gradient(closest-side, rgba(51,153,51,.36), rgba(51,153,51,0) 74%);
}
/* Feature image as full-bleed blurred backdrop (same idea as .studio__bg). */
.sport-bg{
position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.sport-bg::after{
content:''; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, rgba(20,52,20,.55) 0%, rgba(20,52,20,.72) 45%, rgba(20,52,20,.88) 100%);
}
.sport-bg img,
.sport-bg .sport-bg__img{
position:absolute; inset:-8%;
width:116%; height:116%; max-width:none;
object-fit:cover; object-position:center;
filter:blur(12px) saturate(1.15);
transform:scale(1.05);
opacity:.95;
}
.section-dark--sport .eyebrow--light{ color:#5CD65C; }
.section-dark--sport .shead--light .shead__rule{ background:rgba(51,153,51,.35); }
.section-dark--sport .see-all--light{ color:#fff; }
.section-dark--sport .see-all--light:hover{ color:rgba(255,255,255,.72); }
.section-dark--scitech{
position:relative; overflow:hidden; background:#0A1520;
}
.section-dark--scitech > .shell{ position:relative; z-index:1; }
.scitech-glow{
position:absolute; top:-260px; left:-180px; width:880px; height:720px; border-radius:50%;
pointer-events:none; z-index:0;
background:radial-gradient(closest-side, rgba(5,155,231,.3), rgba(5,155,231,0) 72%);
}
.scitech-glow--br{
top:auto; left:auto; right:-280px; bottom:-320px;
width:1100px; height:900px;
background:radial-gradient(closest-side, rgba(5,155,231,.34), rgba(5,155,231,0) 74%);
}
.section-dark--scitech .eyebrow--light{ color:#5BBCF0; }
.section-dark--scitech .shead--light .shead__rule{ background:rgba(5,155,231,.45); }
.section-dark--scitech .see-all--light{ color:#9AD4F5; }
.section-dark--scitech .see-all--light:hover{ color:#fff; }
.section-dark--crime{
position:relative; overflow:hidden; background:#12090A;
}
.section-dark--crime > .shell{ position:relative; z-index:1; }
.crime-glow{
position:absolute; top:-260px; left:-180px; width:880px; height:720px; border-radius:50%;
pointer-events:none; z-index:0;
background:radial-gradient(closest-side, rgba(237,28,36,.28), rgba(237,28,36,0) 72%);
}
.crime-glow--br{
top:auto; left:auto; right:-280px; bottom:-320px;
width:1100px; height:900px;
background:radial-gradient(closest-side, rgba(237,28,36,.32), rgba(237,28,36,0) 74%);
}
.section-dark--crime .eyebrow--light{ color:#FF6B70; }
.section-dark--crime .shead--light .shead__rule{ background:rgba(237,28,36,.4); }
.section-dark--crime .see-all--light{ color:#F5A3A6; }
.section-dark--crime .see-all--light:hover{ color:#fff; }
.section-dark--crime .flat-card{ background:#1A0C0D; }
.section-dark--crime .flat-card::after,
.section-dark--crime .flat-card--alt::after,
.section-dark--crime .flat-card--alt2::after{
background:linear-gradient(180deg, rgba(18,9,10,.12) 18%, rgba(18,9,10,.5) 58%, rgba(18,9,10,.88) 100%);
}
.section-dark--crime .tag--crime,
.cat-lead__feature .tag--crime{ background:var(--red); }
/* =====================================================================
HEALTH — sub-brand theme
===================================================================== */
.brand-bar--health{ background:var(--c-health); }
.brand-bar--health .brand-bar__inner{ padding-left:64px; }
.brand-bar__mark{
position:absolute; left:0; top:0; z-index:3;
width:50px; height:100%;
display:grid; place-items:center;
background:var(--red);
transition:background .18s;
}
.brand-bar__mark img{ width:32px; height:auto; display:block; }
.brand-bar__mark:hover{ background:var(--black); }
.brand__logo--health{ height:40px; }
.nav-bar--health .nav-link:hover,
.nav-bar--health .nav-link.is-active{ color:var(--c-health-ink); }
.nav-bar--health .nav-bar__utility a:hover{ color:var(--c-health-ink); }
.section-dark--health{
position:relative; overflow:hidden; background:#00A897;
}
.section-dark--health > .shell{ position:relative; z-index:1; }
.health-glow{
position:absolute; top:-260px; left:-180px; width:880px; height:720px; border-radius:50%;
pointer-events:none; z-index:0;
background:radial-gradient(closest-side, rgba(0,198,178,.3), rgba(0,198,178,0) 72%);
}
.health-glow--br{
top:auto; left:auto; right:-280px; bottom:-320px;
width:1100px; height:900px;
background:radial-gradient(closest-side, rgba(0,198,178,.34), rgba(0,198,178,0) 74%);
}
.section-dark--health .eyebrow--light{ color:var(--c-health); }
.section-dark--health .shead--light .shead__rule{ background:rgba(0,198,178,.45); }
.section-dark--health .see-all--light{ color:#8FE6DC; }
.section-dark--health .see-all--light:hover{ color:#fff; }
.section-dark--health .flat-card{ background:#009688; }
.section-dark--health .flat-card::after,
.section-dark--health .flat-card--alt::after,
.section-dark--health .flat-card--alt2::after{
background:linear-gradient(180deg, rgba(0,168,151,.06) 18%, rgba(0,168,151,.28) 58%, rgba(0,168,151,.52) 100%);
}
.cat-subs.cat-subs--health a.is-active{ border-color:var(--c-health); background:var(--c-health); color:#03332E; }
.cat-subs.cat-subs--health a:hover{ border-color:var(--c-health); color:var(--c-health-ink); }
.cat-subs.cat-subs--health a.is-active:hover{ color:#03332E; }
/* Swap the house red accent for teal everywhere inside the sub-brand */
.theme-health .read-progress span{ background:linear-gradient(90deg,var(--c-health-ink),var(--c-health)); }
.theme-health .btn--primary{ background:var(--c-health-ink); }
.theme-health .btn--primary:hover{ background:var(--btn-hover, #2B2B30); }
.theme-health .article-sticky{ background:var(--c-health-ink); }
.theme-health .readers-say__title svg,
.theme-health .readers-say__more,
.theme-health .readers-say__cta,
.theme-health .article-trust__how{ color:var(--c-health-ink); }
.tag--health a{ color:inherit; }
html[data-theme="dark"] .kicker--health,
html[data-theme="dark"] .nav-bar--health .nav-link:hover,
html[data-theme="dark"] .nav-bar--health .nav-link.is-active,
html[data-theme="dark"] .cat-subs.cat-subs--health a:hover,
html[data-theme="dark"] .theme-health .readers-say__title svg,
html[data-theme="dark"] .theme-health .readers-say__more,
html[data-theme="dark"] .theme-health .readers-say__cta,
html[data-theme="dark"] .theme-health .article-trust__how{ color:var(--c-health); }
/* =====================================================================
PARENTING — sub-brand theme
===================================================================== */
.brand-bar--parenting{ background:var(--c-parenting); }
.brand-bar--parenting .brand-bar__inner{ padding-left:64px; }
.brand__logo--parenting{ height:34px; }
.nav-bar--parenting .nav-bar__inner{ gap:16px; }
.nav-bar--parenting .nav-link{
font-size:13px; padding:0 9px; letter-spacing:.01em;
}
.nav-bar--parenting .nav-link::after{ left:9px; right:9px; }
.nav-bar--parenting .nav-link:hover,
.nav-bar--parenting .nav-link.is-active{ color:var(--c-parenting-ink); }
.nav-bar--parenting .nav-bar__utility{ padding-left:16px; gap:12px; }
.nav-bar--parenting .nav-bar__utility a:hover{ color:var(--c-parenting-ink); }
.section-dark--parenting{
position:relative; overflow:hidden; background:#16586C;
}
.section-dark--parenting > .shell{ position:relative; z-index:1; }
.parenting-glow{
position:absolute; top:-260px; left:-180px; width:880px; height:720px; border-radius:50%;
pointer-events:none; z-index:0;
background:radial-gradient(closest-side, rgba(103,189,214,.32), rgba(103,189,214,0) 72%);
}
.parenting-glow--br{
top:auto; left:auto; right:-280px; bottom:-320px;
width:1100px; height:900px;
background:radial-gradient(closest-side, rgba(103,189,214,.36), rgba(103,189,214,0) 74%);
}
.section-dark--parenting .eyebrow--light{ color:var(--c-parenting); }
.section-dark--parenting .shead--light .shead__rule{ background:rgba(103,189,214,.45); }
.section-dark--parenting .see-all--light{ color:#A9DCEB; }
.section-dark--parenting .see-all--light:hover{ color:#fff; }
.section-dark--parenting .flat-card{ background:#1B6B82; }
.section-dark--parenting .flat-card::after,
.section-dark--parenting .flat-card--alt::after,
.section-dark--parenting .flat-card--alt2::after{
background:linear-gradient(180deg, rgba(22,88,108,.06) 18%, rgba(22,88,108,.28) 58%, rgba(22,88,108,.52) 100%);
}
.cat-subs.cat-subs--parenting a.is-active{ border-color:var(--c-parenting); background:var(--c-parenting); color:#06313F; }
.cat-subs.cat-subs--parenting a:hover{ border-color:var(--c-parenting); color:var(--c-parenting-ink); }
.cat-subs.cat-subs--parenting a.is-active:hover{ color:#06313F; }
.theme-parenting .read-progress span{ background:linear-gradient(90deg,var(--c-parenting-ink),var(--c-parenting)); }
.theme-parenting .btn--primary{ background:var(--c-parenting-ink); }
.theme-parenting .btn--primary:hover{ background:var(--btn-hover, #2B2B30); }
.theme-parenting .article-sticky{ background:var(--c-parenting-ink); }
.theme-parenting .readers-say__title svg,
.theme-parenting .readers-say__more,
.theme-parenting .readers-say__cta,
.theme-parenting .article-trust__how{ color:var(--c-parenting-ink); }
.tag--parenting a{ color:inherit; }
html[data-theme="dark"] .kicker--parenting,
html[data-theme="dark"] .nav-bar--parenting .nav-link:hover,
html[data-theme="dark"] .nav-bar--parenting .nav-link.is-active,
html[data-theme="dark"] .cat-subs.cat-subs--parenting a:hover,
html[data-theme="dark"] .theme-parenting .readers-say__title svg,
html[data-theme="dark"] .theme-parenting .readers-say__more,
html[data-theme="dark"] .theme-parenting .readers-say__cta,
html[data-theme="dark"] .theme-parenting .article-trust__how{ color:var(--c-parenting); }
/* =====================================================================
LIFESTYLE — category theme (amber)
===================================================================== */
.section-dark--lifestyle{
position:relative; overflow:hidden; background:#C48A18;
}
.section-dark--lifestyle > .shell{ position:relative; z-index:1; }
.lifestyle-glow{
position:absolute; top:-260px; left:-180px; width:880px; height:720px; border-radius:50%;
pointer-events:none; z-index:0;
background:radial-gradient(closest-side, rgba(243,176,50,.28), rgba(243,176,50,0) 72%);
}
.lifestyle-glow--br{
top:auto; left:auto; right:-280px; bottom:-320px;
width:1100px; height:900px;
background:radial-gradient(closest-side, rgba(243,176,50,.32), rgba(243,176,50,0) 74%);
}
.section-dark--lifestyle .eyebrow--light{ color:#F7D194; }
.section-dark--lifestyle .shead--light .shead__rule{ background:rgba(243,176,50,.45); }
.section-dark--lifestyle .see-all--light{ color:#F7D194; }
.section-dark--lifestyle .see-all--light:hover{ color:#fff; }
.section-dark--lifestyle .flat-card{ background:#A87412; }
.section-dark--lifestyle .flat-card::after,
.section-dark--lifestyle .flat-card--alt::after,
.section-dark--lifestyle .flat-card--alt2::after{
background:linear-gradient(180deg, rgba(196,138,24,.06) 18%, rgba(196,138,24,.28) 58%, rgba(196,138,24,.52) 100%);
}
.cat-subs.cat-subs--lifestyle a.is-active{ border-color:var(--c-lifestyle); background:var(--c-lifestyle); color:#14110A; }
.cat-subs.cat-subs--lifestyle a:hover{ border-color:var(--c-lifestyle); color:var(--c-lifestyle-ink); }
.cat-subs.cat-subs--lifestyle a.is-active:hover{ color:#3A2402; }
/* Sub-brand teasers that sit inside the Lifestyle hub */
.subbrand-strip{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;
margin:26px 0 4px;
}
.subbrand{
position:relative; display:flex; flex-direction:column; gap:14px;
padding:18px 20px 20px; border-radius:var(--radius-s);
background:var(--paper-2); border:1px solid var(--line);
}
.subbrand::before{
content:''; position:absolute; left:0; right:0; top:0; height:3px;
border-radius:var(--radius-s) var(--radius-s) 0 0;
background:var(--sb-accent, var(--red));
}
.subbrand--health{ --sb-accent:var(--c-health); }
.subbrand--parenting{ --sb-accent:var(--c-parenting); }
.subbrand__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.subbrand__logo{
display:inline-grid; place-items:center;
padding:7px 12px; border-radius:2px; background:var(--sb-accent);
}
.subbrand__logo img{ height:28px; width:auto; display:block; }
.subbrand__more{
font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.04em;
text-transform:uppercase; color:var(--muted); transition:color .18s;
}
.subbrand__more:hover{ color:var(--ink); }
.subbrand__list{ display:flex; flex-direction:column; }
.subbrand__list li{ border-top:1px solid var(--border-bottom); }
.subbrand__list li:first-child{ border-top:0; }
.subbrand__item{
display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px;
align-items:center; padding:11px 0;
}
.subbrand__item img{
width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-s); background:#eee;
}
.subbrand__item h3{
font-family:var(--sans); font-size:13.5px; line-height:1.3; font-weight:500; color:var(--ink);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
transition:color .18s;
}
.subbrand__item:hover h3{ color:var(--ink-hover); }
@media (max-width:860px){
.subbrand-strip{ grid-template-columns:1fr; gap:16px; }
}
.scitech-layout{ display:flex; flex-direction:column; gap:22px; }
.scitech-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);
grid-template-areas:
"a feat b e"
"c feat d f";
gap:18px; align-items:stretch;
}
.scitech-grid > .scitech-card:nth-child(1){ grid-area:a; }
.scitech-grid > .scitech-card--feat{ grid-area:feat; }
.scitech-grid > .scitech-card:nth-child(3){ grid-area:b; }
.scitech-grid > .scitech-card:nth-child(4){ grid-area:e; }
.scitech-grid > .scitech-card:nth-child(5){ grid-area:c; }
.scitech-grid > .scitech-card:nth-child(6){ grid-area:d; }
.scitech-grid > .scitech-card:nth-child(7){ grid-area:f; }
.scitech-grid > .scitech-card:nth-child(n+8){ display:none; }
.scitech-card{
display:flex; flex-direction:column; gap:10px; min-width:0; color:#fff;
}
.scitech-card__media{
position:relative; display:block; overflow:hidden; border-radius:var(--radius-s);
aspect-ratio:16/10; background:#111;
}
.scitech-card__media img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.scitech-card:hover .scitech-card__media img{ transform:scale(1.05); }
.scitech-card__stamp{
font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:var(--c-scitech);
}
.scitech-card h3{
font-family:var(--sans); font-size:15px; line-height:1.32; font-weight:500; color:#fff;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
transition:color .18s;
}
.scitech-card:hover h3{ color:#9AD4F5; }
.scitech-card--feat{ height:100%; }
.scitech-card--feat .scitech-card__media{
flex:1 1 0; min-height:220px; aspect-ratio:auto; height:auto; /* Takes the space left after the text, never the text's space. */
}
.scitech-card--feat h3,
.scitech-card--feat .scitech-card__stamp{ flex:none; }
.scitech-card--feat h3{
font-size:clamp(17px,1.45vw,22px); font-weight:600; -webkit-line-clamp:4;
}
.section__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:28px; gap:20px; flex-wrap:wrap; }
.section__title{ font-size:32px; font-weight:500; display:flex; align-items:center; gap:12px; }
.section__tabs{ display:flex; align-items:flex-end; gap:18px; }
.section__tab{
appearance:none; border:0; background:none;
position:relative;
padding:0 0 14px; margin:0 0 -15px;
font-family:var(--display); font-size:18px; font-weight:400; line-height:1;
color:var(--muted); cursor:pointer;
transition:color .15s;
}
.section__tab::after{
content:"";
position:absolute; left:0; right:0; bottom:-1px;
height:2px; background:transparent;
transition:background .15s;
}
.section__tab:hover{ color:var(--ink); }
.section__tab[aria-selected="true"]{ color:var(--ink); }
.section__tab[aria-selected="true"]::after{ background:var(--ink); }
.section__tab--premium{ display:inline-flex; align-items:center; }
.section__tab--premium .premium-mark{ margin:0; padding:4px 8px; font-size:11px; }
.section__title--light{ color:#fff; }
.section__dot{ width:14px; height:14px; border-radius:2px; display:inline-block; }
.section__dot--national{ background:var(--c-national); }
.section__dot--region{ background:var(--c-region); }
.section__dot--world{ background:var(--c-world); }
.section__dot--crime{ background:var(--c-crime); }
.section__dot--business{ background:var(--c-business); }
.section__dot--magazine{ background:var(--c-magazine); }
.section__dot--showbiz{ background:var(--c-showbiz); }
.section__dot--lifestyle{ background:var(--c-lifestyle); }
.section__dot--parenting{ background:var(--c-parenting); }
.see-all{ display:inline-flex; align-items:center; gap:7px; font-weight:500; font-size:14px; letter-spacing:.02em; transition:gap .2s, color .2s; }
.see-all:hover{ gap:13px; color:var(--red); }
.see-all--light{ color:#fff; }
.see-all--light:hover{ color:var(--red); }
/* =====================================================================
TOPIC ROW (trending topics strip)
===================================================================== */
.topic-row{ background:var(--paper-2); border-bottom:1px solid var(--border-bottom); }
.topic-row__inner{ display:flex; align-items:center; gap:10px; padding:10px var(--gutter); }
.topic-row__scroll{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
.topic-row__scroll::-webkit-scrollbar{ display:none; }
.topic-row__pill{ flex:none; background:var(--paper); color:var(--ink); font-size:12px; font-weight:800; letter-spacing:.03em; text-transform: uppercase; padding:6px 13px; border-radius:3px; white-space:nowrap; }
.topic-row__pill:hover {opacity: 0.8;}
.topic-row__link{ flex:none; font-size: 11px;
font-weight: 500;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--muted-light);
white-space: nowrap; }
.topic-row__link:hover{ color:var(--red); }
/* =====================================================================
DENSE LAYOUT — compact grid + sticky rail
===================================================================== */
.dense-layout{ display:grid; grid-template-columns:1fr 320px; gap:36px; align-items:start; }
.kicker{ display:block; width:max-content; font-size:11.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.kicker--news{ color:var(--c-news); }
.kicker--national{ color:var(--c-national); }
.kicker--region{ color:var(--c-region); }
.kicker--world{ color:var(--c-world); }
.kicker--crime{ color:var(--c-crime); }
.kicker--sport{ color:var(--c-sport); }
.kicker--magazine{ color:var(--c-magazine); }
.kicker--showbiz{ color:var(--c-showbiz); }
.kicker--business{ color:var(--c-business); }
.kicker--scitech{ color:var(--c-scitech); }
.kicker--lifestyle{ color:var(--c-lifestyle-ink); }
.kicker--health{ color:var(--c-health-ink); }
.kicker--parenting{ color:var(--c-parenting-ink); }
.kicker--sponsor{ color:var(--muted); }
.dense-card__meta{ display:flex; align-items:center; gap:10px; padding-top:2px; }
.dense-card__meta .meta{ font-size:11.5px; }
.engagement{ display:inline-flex; align-items:center; gap:4px; color:var(--muted-light); font-size:11.5px; font-weight:500; }
.engagement svg{ width:13px; height:13px; flex:none; }
/* headline prefix used when the story is a video, e.g. Video/ Headline…
*/
.headline-tag{ font-weight:800; }
.headline-tag--video{ color:var(--red); }
.headline-sep{ color:var(--muted-light); font-weight:400; margin:0 2px; }
/* video / gallery badge on a thumbnail — wrap the ![]()
in */
.thumb{ position:relative; display:block; }
.thumb img{ width:100%; height:100%; display:block; }
.thumb-badge{ position:absolute; left:8px; bottom:8px; width:26px; height:26px; border-radius:999px; display:flex; align-items:center; justify-content:center; }
.thumb-badge--video{ background:var(--red); color:#fff; }
.thumb-badge--video svg{ width:11px; height:11px; margin-left:1px; }
.thumb-badge--gallery{ background:rgba(11,11,12,.72); color:#fff; }
.thumb-badge--gallery svg{ width:13px; height:13px; }
/* ---- bento: mini-list + feature + sub-row, natural content heights ---- */
.bento{ display:grid; grid-template-columns:230px 1fr; gap:32px; align-items:start; }
.bento__list{ display:flex; flex-direction:column; }
.bento__list-item{ display:block; padding:20px 0; border-top:1px solid var(--border-bottom); }
.bento__list-item:first-child{ border-top:none; padding-top:0; }
.bento__list-item img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius-s); margin-bottom:10px; }
.bento__list-item .thumb{ width:100%; height:auto; aspect-ratio:16/10; border-radius:var(--radius-s); overflow:hidden; margin-bottom:10px; }
.bento__list-item .thumb img{ width:100%; height:100%; margin-bottom:0; }
.bento__list-item h3{ font-size:14px; line-height:1.3; font-weight:500; font-family:var(--sans); color:var(--ink); margin:6px 0; }
.bento__feature{ display:block; }
.bento__feature img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-s); margin-bottom:18px; }
.bento__feature h3{ font-size:27px; line-height:1.18; font-weight:500; margin:10px 0 8px; }
.bento__feature .dek{ color:var(--muted); font-size:15px; max-width:none; margin-bottom:10px; }
.bento__sub-row{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:26px; padding-top:24px; border-top:1px solid var(--border-bottom); align-items:start; }
.bento__sub-item{ display:flex; gap:12px; }
.bento__sub-item img{ width:64px; height:64px; object-fit:cover; border-radius:var(--radius-s); flex:none; }
.bento__sub-ltr{ width:64px; height:64px; border-radius:var(--radius-s); flex:none; color:#fff; font-family:var(--serif); font-weight:500; font-size:22px; display:flex; align-items:center; justify-content:center; }
.bento__sub-item h4{ font-size:14px; line-height:1.3; font-weight:500; font-family:var(--sans); color:var(--ink); margin:6px 0 4px; }
/* =====================================================================
FEATURED — hero (text-in-image) + mid list + latest rail + mini row
===================================================================== */
/* Shared row tracks: hero ↔ mid pair, sub-row ↔ last mid cover, aside spans both.
Three 1fr photo tracks + 20px gaps: col1 spans two tracks so each mini = mid. */
.featured{ display:grid; grid-template-columns:1fr 1fr 1fr 300px; grid-template-rows:auto auto; column-gap:20px; row-gap:20px; align-items:stretch; }
.video-badge, .gallery-badge{ position:absolute; z-index:2; bottom:16px; width:25px; height:25px; border-radius:999px; color:#fff; display:flex; align-items:center; justify-content:center; border:1px solid #fff; }
.video-badge{
right:10px; bottom:10px; left:auto;
width:auto; height:26px; min-width:0;
padding:0 7px 0 5px; gap:4px;
border:none; border-radius:4px;
background:rgba(6,6,7,.78);
font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.01em;
font-variant-numeric:tabular-nums; line-height:1;
}
.gallery-badge{ left:16px; }
.video-badge svg{ width:16px; height:16px; margin:0; flex:none; }
.gallery-badge svg{ width:13px; height:13px; margin-left:1px; }
.video-badge > span{ display:block; padding-top:0px; }
.engage-badge{
position:absolute; z-index:2; right:10px; bottom:10px; display:flex; align-items:center; gap:9px;
padding:5px 9px; border-radius:999px; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.engage-badge span{ display:inline-flex; align-items:center; gap:4px; color:#fff; font-size:11px; font-weight:500; }
.engage-badge svg{ width:13px; height:13px; flex:none; }
.engage-badge--hero{ right:48px; bottom:16px; }
.featured__hero .engage-badge--hero{ bottom:clamp(20px,2.3vw,36px); }
.story-card__meta-row{
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.story-card__meta-row .video-badge{
position:static; right:auto; bottom:auto; left:auto;
}
.featured__thumb .video-badge{
bottom:8px; right:8px; left:auto;
height:20px; padding:0 6px 0 4px; font-size:10px; gap:3px;
}
.featured__thumb .video-badge svg{ width:9px; height:9px; }
.featured__col1{ grid-column:1 / 3; grid-row:1 / -1; display:grid; grid-template-rows:subgrid; }
.featured__hero{ min-height:285px; }
.featured__headline{ color:#fff; font-size:26px; line-height:1.2; font-weight:500; }
.featured__sub{ color:#fff; font-size:14px; line-height:1.2; font-weight:500; }
.featured__sub-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.featured__thumb{ position:relative; display:block; width:100%; overflow:hidden; border-radius:var(--radius-s); }
.featured__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.featured a:hover .featured__thumb img{ transform:scale(1.06); }
.featured__mid{ grid-column:3; grid-row:1 / -1; display:grid; grid-template-rows:subgrid; }
.featured__item{ display:block; }
.featured__item .featured__thumb{ aspect-ratio:4/3; margin-bottom:10px; }
/* Same 4/3 frame as the other small covers — don't stretch these to the hero. */
.featured__midtop{ display:grid; gap:20px; min-height:0; }
.featured__midtop > .featured__item--cover{ display:block; min-height:0; }
.featured__midtop > .featured__item--cover .featured__thumb{
aspect-ratio:4/3; height:auto;
}
.featured__item .kicker{ margin-bottom:6px; }
.featured__item h3{ font-size:16px; line-height:1.32; font-weight:600; font-family:var(--sans); color:var(--ink); }
.featured__dek{ margin-top:6px; color:var(--muted); font-size:13px; line-height:1.4; font-weight:500; }
/* Overlay variant — text inside the photo, soft bottom scrim (hero-lite). */
.featured__item--cover .featured__thumb,
.featured__mini--cover .featured__thumb{ margin-bottom:0; }
.featured__cover-scrim{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(6,6,7,0) 42%, rgba(6,6,7,.55) 72%, rgba(6,6,7,.88) 100%);
}
.featured__cover-body{
position:absolute; left:0; right:0; bottom:0; z-index:2;
display:flex; flex-direction:column; align-items:flex-start; gap:8px;
padding:16px 14px 14px;
}
.featured__item--cover .featured__cover-body h3,
.featured__mini--cover .featured__cover-body h3{
color:#fff; font-size:15.5px; line-height:1.28; font-weight:700;
text-shadow:0 1px 8px rgba(6,6,7,.35);
}
.featured__item--cover .featured__dek{
margin-top:0; color:rgba(255,255,255,.82); font-size:12.5px; line-height:1.35;
}
.featured__item--cover .gallery-badge--lead,
.featured__mini--cover .gallery-badge--lead{ bottom:auto; top:12px; left:12px; }
.featured__item--cover .video-badge,
.featured__mini--cover .video-badge{ bottom:auto; top:12px; left:12px; right:auto; }
.featured__item--cover .engage-badge,
.featured__mini--cover .engage-badge{ bottom:auto; top:10px; right:10px; z-index:3; }
/* Premium already owns top-left — park gallery beside it, video on the opposite corner. */
.featured__item--cover:has(.premium-mark) .gallery-badge--lead,
.featured__mini--cover:has(.premium-mark) .gallery-badge--lead{
left:96px; right:auto; top:9px;
}
.featured__item--cover:has(.premium-mark) .video-badge,
.featured__mini--cover:has(.premium-mark) .video-badge{
left:auto; right:12px; top:12px; bottom:auto;
}
.featured__mini--cover .featured__cover-body{ padding:14px 12px 12px; gap:7px; }
.featured__mini--cover .featured__cover-body h3{ font-size:14px; }
.featured__aside-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border-bottom); }
.featured__aside-head h3{ font-family:var(--display); font-size:18px; font-weight:400; line-height:1; }
.featured__aside-head a{ display:flex; color:var(--muted-light); transition:color .18s; }
.featured__aside-head a:hover{ color:var(--red); }
.featured__aside{ grid-column:4; grid-row:1 / -1; display:flex; flex-direction:column; }
/* flex-basis 0 keeps the (deliberately overflowing) list out of the column's
intrinsic height, so it fills the leftover space and scrolls inside it. */
.featured__list{ flex:1 1 0; min-height:200px; max-height:440px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.featured__list::-webkit-scrollbar{ width:5px; }
.featured__list::-webkit-scrollbar-thumb{ background:var(--border-bottom); border-radius:999px; }
.featured__list li{ padding:13px 4px 13px 0; border-top:1px solid var(--border-bottom); }
.featured__list li:first-child{ border-top:none; padding-top:0; }
.featured__list-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:5px; }
.featured__list-meta .meta{ flex:none; }
.featured__list h4{
font-size:14px; line-height:1.32; font-weight:500; font-family:var(--sans); color:var(--ink);
transition:color .18s;
}
.featured__list a:hover h4{ color:var(--ink-hover); }
.featured__aside-ad{ flex:none; margin-top:20px; }
.featured__aside-ad .ad-slot--rectangle{ max-width:none; width:100%; height:auto; aspect-ratio:300/250; overflow:hidden; }
.featured__aside-ad .ad-slot--filled img{ width:100%; height:100%; object-fit:cover; }
.featured__col1 .featured__mini .featured__thumb{ aspect-ratio:4/3; margin-bottom:8px; }
.featured__more{ position:relative; z-index:0; margin-top:0;
padding:16px var(--gutter) 28px;
display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:20px; align-items:start;
}
.featured__more::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:var(--paper-2); z-index:-1; }
.featured__more-ad{
position:relative; z-index:0;
padding:20px 0; margin:15px 0 0;
}
.featured__more-ad::before{
content:'';
position:absolute; left:50%; top:0;
width:100vw; height:1px;
transform:translateX(-50%);
background:var(--border-bottom);
pointer-events:none;
}
.featured__more-ad::after{
content:'';
position:absolute; top:0; bottom:0; left:50%;
width:100vw; z-index:-1;
transform:translateX(-50%);
background:var(--paper);
pointer-events:none;
}
.featured__more .section__head{ margin-bottom:20px; }
.featured__more-aside .section__head{ justify-content:flex-start; }
.featured__row2{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.featured__row2[data-feed="news"] .feed-item--premium{ display:none; }
.featured__row2[data-feed="premium"] .feed-item--news{ display:none; }
.featured__row2 .featured__mini--lead{ grid-column:span 2; }
.featured__mini{ display:block; min-width:0; }
.featured__mini > .kicker{
width:auto; max-width:100%;
overflow-wrap:anywhere; word-break:break-word;
line-height:1.25;
}
.featured__row2 .featured__thumb{ aspect-ratio:4/3; margin-bottom:8px; }
.featured__row2 .featured__thumb img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.featured__row2 a:hover .featured__thumb img{ transform:scale(1.06); }
.featured__row2 .featured__thumb > .tag{ position:absolute; z-index:2; top:10px; left:10px; }
.featured__thumb-badges{
position:absolute; z-index:3; top:10px; left:10px;
display:flex; align-items:center; gap:6px; flex-wrap:wrap; max-width:calc(100% - 20px);
}
.featured__row2 .featured__thumb .featured__thumb-badges .tag,
.featured__thumb-badges .tag{ position:static; top:auto; left:auto; }
.featured__thumb-badges .premium-mark{
position:static; top:auto; left:auto; margin:0;
padding:4px 8px; box-shadow:0 2px 10px rgba(6,6,7,.35);
}
.featured__thumb-badges .video-badge,
.featured__thumb-badges .gallery-badge,
.featured__thumb-badges .gallery-badge--lead{
position:static; top:auto; left:auto; right:auto; bottom:auto;
}
.featured__thumb-badges .video-badge{
height:22px; padding:0 7px 0 5px; font-size:10px; gap:3px; flex:none;
}
.featured__thumb-badges .video-badge svg{ width:10px; height:10px; }
.featured__thumb-badges .gallery-badge,
.featured__thumb-badges .gallery-badge--lead{
width:22px; height:22px; flex:none;
}
.featured__thumb-badges .gallery-badge svg,
.featured__thumb-badges .gallery-badge--lead svg{
width:11px; height:11px; margin:0;
}
.featured__mini h4{ font-size:14px; line-height:1.3; font-weight:500; font-family:var(--sans); color:var(--ink); transition:color .18s; }
.featured__row2 .featured__mini{
display:flex; flex-direction:column;
}
.featured__row2 .featured__mini h4{
height:calc(13.5px * 1.3 * 3);
margin:0;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.featured__row2 a.featured__mini:hover h4{ color:var(--ink-hover); }
.featured__mini h3{ font-size:16px; line-height:1.32; font-weight:500; font-family:var(--sans); color:var(--ink);}
.featured__mini .meta{ display:block; margin-top:5px; }
.featured__row2 .featured__mini .meta{ margin-top:auto; padding-top:8px; }
.featured__row2 .featured__mini--lead .featured__thumb{ aspect-ratio:16/9; margin-bottom:0; }
.featured__row2 .featured__mini--lead .featured__cover-body{
padding:16px 16px 14px; gap:6px;
}
.featured__row2 .featured__mini--lead .featured__cover-body h4{
height:auto; margin:0;
color:#fff; font-size:clamp(16px,1.35vw,20px); line-height:1.25; font-weight:700;
-webkit-line-clamp:3;
text-shadow:0 1px 10px rgba(6,6,7,.45);
}
.featured__row2 .featured__mini--lead .featured__cover-body .meta{
margin:0; padding:0; color:rgba(255,255,255,.78);
}
.featured__row2 a.featured__mini--lead:hover .featured__cover-body h4{ color:#fff; }
.featured__row2 a.featured__mini--lead:hover .featured__cover-body .meta{ color:rgba(255,255,255,.78); }
#recPop.rec-pop{
position:fixed; left:20px; bottom:24px; z-index:100;
display:flex; align-items:stretch;
width:min(320px, calc(100vw - 32px));
height:84px;
padding:0 32px 0 0;
overflow:hidden;
border-radius:18px;
background:#fff;
box-shadow:0 10px 32px rgba(11,11,12,.18);
transform:translateX(calc(-100% - 28px));
visibility:hidden; pointer-events:none;
transition:transform .45s cubic-bezier(.2,.7,.2,1), visibility .45s;
}
#recPop.rec-pop.is-open{
transform:translateX(0);
visibility:visible; pointer-events:auto;
}
#recPop.rec-pop[hidden]{ display:flex !important; }
.rec-pop__link{
display:flex; align-items:stretch; gap:12px;
min-width:0; flex:1; color:inherit; text-decoration:none;
}
.rec-pop__media{
flex:none; width:84px; height:84px;
border-radius:0; overflow:hidden;
background:var(--paper-2);
}
.rec-pop__media img{
display:block; width:100%; height:100%; object-fit:cover; object-position:center;
}
.rec-pop__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; padding:10px 0; }
.rec-pop__kicker{
display:inline-flex; align-items:center; gap:5px;
font-size:11px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--muted);
}
.rec-pop__kicker svg{ flex:none; color:var(--gold-2); }
.rec-pop__title{
font-family:var(--sans); font-size:13.5px; font-weight:500; line-height:1.28;
color:var(--ink);
height:calc(13.5px * 1.28 * 2);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rec-pop__close{
position:absolute; top:8px; right:8px;
width:24px; height:24px; display:grid; place-items:center;
border:0; border-radius:50%; background:transparent;
color:var(--muted); cursor:pointer;
}
.rec-pop__close:hover{ color:var(--ink); background:var(--paper-2); }
html[data-theme="dark"] #recPop.rec-pop{ background:var(--paper-2); box-shadow:0 10px 32px rgba(0,0,0,.4); }
@media (max-width:860px){
#recPop.rec-pop{
left:12px; right:12px; width:auto;
bottom:calc(67px + env(safe-area-inset-bottom, 0px));
}
}
.featured__mini--paper{ display:flex; width:240px; }
.featured__mini--paper .paper-unit{ width:240px; }
.paper-cover{
display:block; width:240px; max-width:100%;
aspect-ratio:240 / 330; border-radius:var(--radius-s); overflow:hidden;
background:var(--paper); cursor:zoom-in;
}
.paper-cover img{
width:100%; height:100%; object-fit:contain; object-position:center top; display:block;
}
.paper-dialog{
position:fixed; inset:0; z-index:210; display:grid; place-items:center;
padding:20px; opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .28s ease, visibility .28s;
}
.paper-dialog.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.paper-dialog[hidden]{ display:none; }
.paper-dialog.is-open[hidden]{ display:grid; }
.paper-dialog__backdrop{
position:absolute; inset:0;
background:rgba(11,11,12,.15);
-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.paper-dialog__panel{
position:relative; z-index:1;
width:min(720px,100%);
max-height:min(94vh, 1100px);
display:flex; flex-direction:column;
background:var(--paper-2); border-radius:12px;
box-shadow:0 28px 80px rgba(11,11,12,.22);
overflow:hidden;
}
.paper-dialog__tools{
position:absolute; top:12px; right:12px; z-index:2;
display:flex; gap:8px;
}
.paper-dialog__tool{
width:40px; height:40px; display:grid; place-items:center;
border:1px solid var(--border-bottom); border-radius:999px;
background:var(--paper-2); color:var(--ink); cursor:pointer;
}
.paper-dialog__tool:hover,
.paper-dialog__tool[aria-pressed="true"]{ background:var(--paper); border-color:#cfc8ba; }
.paper-dialog__stage{
flex:1 1 auto; min-height:0; overflow:hidden;
display:grid; place-items:center;
padding:52px 20px 16px;
cursor:zoom-in;
background:var(--paper);
touch-action:manipulation;
overscroll-behavior:none;
}
.paper-dialog.is-zoomed .paper-dialog__stage{
cursor:grab;
touch-action:none;
}
.paper-dialog.is-zoomed .paper-dialog__stage.is-panning{ cursor:grabbing; }
.paper-dialog__img{
display:block; width:auto; max-width:100%; height:auto;
max-height:min(68vh, 820px);
transform-origin:center center;
will-change:transform;
user-select:none;
-webkit-user-drag:none;
}
.paper-dialog.is-zoomed .paper-dialog__img{
touch-action:none;
}
.paper-dialog__cta{
flex:none; display:flex; flex-direction:column; align-items:center; gap:14px;
padding:16px 20px 20px; text-align:center;
border-top:1px solid var(--border-bottom); background:var(--paper-2);
}
.paper-dialog__cta-text{
margin:0; font-family:var(--display); font-size:16px; line-height:1.3;
font-weight:500; color:var(--ink); letter-spacing:-.015em;
}
.paper-dialog__cta-text strong{ font-weight:800; }
.paper-dialog__cta-btn{ min-width:min(100%, 280px); text-transform:uppercase; letter-spacing:.06em; font-weight:800; font-size:13px; }
@media (max-width:860px){
.paper-dialog{ padding:12px; }
.paper-dialog__stage{ padding:48px 12px 12px; }
.paper-dialog__img{ max-height:min(58vh, 640px); }
}
/* Tip / news tip card under Home ad */
.tip-card{
margin-top:20px; width:240px; display:flex; align-items:flex-start; gap:12px;
padding:14px 14px; text-align:left; cursor:pointer;
border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background: var(--paper-2);
transition:border-color .2s, transform .2s, box-shadow .2s;
}
.tip-card:hover{ border-color:#d7d0c4; }
.tip-card__icon{
flex:none; width:36px; height:36px; border-radius:10px;
display:grid; place-items:center; background:var(--paper-2); color:var(--red); border:1px solid var(--border-bottom); border-radius:var(--radius-s);
}
.tip-card__icon svg{ width:17px; height:17px; }
.tip-card__body{ display:flex; flex-direction:column; gap:5px; min-width:0; flex:1; }
.tip-card__kicker{
font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red);
}
.tip-card__title{
font-family:var(--sans); font-size:14px; line-height:1.35; font-weight:600; color:var(--ink);
}
.tip-card__reward{
font-size:12px; line-height:1.3; color:var(--muted); font-weight:500;
}
.tip-card__reward strong{ color:var(--red); font-weight:800; }
.tip-card__go{
flex:none; align-self:center; color:var(--muted-light); transition:color .18s, transform .18s;
}
.tip-card:hover .tip-card__go{ color:var(--red); transform:translateX(2px); }
/* Tip dialog */
.tip-dialog{
position:fixed; inset:0; z-index:200; display:grid; place-items:center;
padding:24px; opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .28s ease, visibility .28s;
}
.tip-dialog.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.tip-dialog[hidden]{ display:none; }
.tip-dialog.is-open[hidden]{ display:grid; }
.tip-dialog__backdrop{
position:absolute; inset:0; background:rgba(11,11,12,.55);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.tip-dialog__panel{
position:relative; z-index:1; width:min(440px,100%);
background:var(--paper-2); border-radius:14px; padding:32px 28px 26px;
box-shadow:0 28px 80px rgba(11,11,12,.28);
transform:translateY(14px) scale(.98);
transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.tip-dialog.is-open .tip-dialog__panel{ transform:none; }
.tip-dialog__close{
position:absolute; top:14px; right:14px; width:36px; height:36px;
display:grid; place-items:center; border:1px solid var(--border-bottom);
border-radius:999px; background:var(--paper-2); color:var(--ink); cursor:pointer;
transition:background .18s, border-color .18s;
}
.tip-dialog__close:hover{ background:var(--paper); border-color:#cfc8ba; }
.tip-dialog__eyebrow{
margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.16em;
text-transform:uppercase; color:var(--red);
}
.tip-dialog__title{
margin:0 0 12px; font-family:var(--display); font-size:clamp(26px,3vw,34px);
font-weight:800; line-height:1.05; letter-spacing:-.03em; color:var(--ink);
}
.tip-dialog__lead{
margin:0 0 24px; font-size:15px; line-height:1.5; color:var(--muted); font-weight:500;
}
.tip-dialog__lead strong{ color:var(--red); font-weight:800; }
.tip-dialog__channels{ display:flex; flex-direction:column; gap:10px; }
.tip-channel{
display:flex; align-items:center; gap:14px; padding:14px 16px;
border:1px solid var(--border-bottom); border-radius:12px; background:var(--paper-2);
transition:border-color .18s, background .18s, transform .18s;
}
.tip-channel:hover{ border-color:#d7d0c4; background:var(--paper); transform:translateY(-1px); }
.tip-channel__ico{
flex:none; width:42px; height:42px; border-radius:11px;
display:grid; place-items:center; background:var(--ink); color:#fff;
}
.tip-channel__ico svg{ width:18px; height:18px; }
.tip-channel--wa .tip-channel__ico{ background:#25D366; }
.tip-channel__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tip-channel__txt b{ font-size:14px; font-weight:700; color:var(--ink); }
.tip-channel__txt span{ font-size:13px; color:var(--muted); font-weight:500; }
.tip-dialog__note{
margin:18px 0 0; font-size:12.5px; line-height:1.4; color:var(--muted-light); text-align:center;
}
.dense-rail{ position:sticky; top:112px; display:flex; flex-direction:column; gap:24px; }
.dense-rail__card{ background:var(--paper-2); border:1px solid var(--border-bottom); border-radius:var(--radius-s); padding:24px; }
.tabs{ display:flex; gap:20px; border-bottom:2px solid var(--border-bottom); margin-bottom:4px; }
.tabs__btn{ background:none; border:none; padding:10px 1px 14px; font-weight:800; font-size:14px; color:var(--muted); position:relative; white-space:nowrap; }
.tabs__btn::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--red); opacity:0; }
.tabs__btn.is-active{ color:var(--ink); }
.tabs__btn.is-active::after{ opacity:1; }
.trending-list{ margin-top:4px; }
.trending-list li a{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--border-bottom); }
.trending-list li:last-child a{ border-bottom:none; padding-bottom:0; }
.trending-list__num{ font-family:var(--serif); font-weight:500; font-size:26px; color:var(--muted-light); flex:none; width:32px; transition:color .2s; }
.trending-list li:first-child .trending-list__num{ color:var(--red); }
.trending-list__txt{ display:flex; flex-direction:column; gap:5px; }
.trending-list__txt .kicker{ font-size:11px; }
.trending-list__headline{ font-weight:500; font-size:14px; line-height:1.32; color:var(--ink); }
.trending-list li a:hover .trending-list__headline{ color:var(--red); }
.trending-list__txt .meta{ color:var(--muted-light); }
/* =====================================================================
MULTIMEDIA
===================================================================== */
.media-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
/* Photo cards with text on image + soft bottom scrim (hero-lite). */
.cover-card{ display:block; }
.cover-card__media{
position:relative; display:block; overflow:hidden;
border-radius:var(--radius-s); aspect-ratio:4/5; background:var(--paper-2);
}
.cover-card__media img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.cover-card:hover .cover-card__media img{ transform:scale(1.05); }
.cover-card__scrim{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(6,6,7,0) 42%, rgba(6,6,7,.55) 72%, rgba(6,6,7,.88) 100%);
}
.cover-card__media > .tag{
position:absolute; z-index:3; top:12px; left:12px;
color:#fff;
}
.cover-card__body > .tag{
position:relative; top:auto; left:auto; z-index:1;
max-width:100%;
color:#fff;
box-shadow:0 2px 10px rgba(6,6,7,.35);
}
.cover-card__media > .featured__thumb-badges{
top:12px; left:12px;
}
.cover-card__media > .featured__thumb-badges .tag,
.cover-card__media > .featured__thumb-badges .premium-mark{
height:24px;
box-sizing:border-box;
display:inline-flex;
align-items:center;
padding:0 9px;
font-size:10.5px;
font-weight:800;
letter-spacing:.07em;
line-height:1;
margin:0;
box-shadow:0 2px 10px rgba(6,6,7,.35);
color:#fff;
}
.cover-card__media > .featured__thumb-badges .premium-mark{
background:var(--black);
color:var(--white);
}
.vrail__thumb > .tag{
position:absolute; z-index:3; top:6px; left:6px;
color:#fff;
font-size:9.5px; padding:3px 7px;
}
.cover-card__body{
position:absolute; left:0; right:0; bottom:0; z-index:2;
display:flex; flex-direction:column; align-items:flex-start; gap:8px;
padding:18px 16px 16px;
}
.cover-card__body h3{
color:#fff; font-family:var(--sans); font-size:clamp(15px,1.25vw,17.5px);
line-height:1.28; font-weight:700;
text-shadow:0 1px 8px rgba(6,6,7,.35);
}
.cover-card:hover .cover-card__body h3{ color:#fff; }
.cover-card__dek{
margin:0;
color:rgba(255,255,255,.82);
font-family:var(--sans); font-size:13px; font-weight:500; line-height:1.35;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
text-shadow:0 1px 8px rgba(6,6,7,.35);
}
.cover-card__body .meta{ color:rgba(255,255,255,.78); }
.media-card{ min-height:340px; }
.play-btn{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:999px; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.7); backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center; padding-left:4px; transition:background .2s, transform .2s; }
.story-card:hover .play-btn{ background:var(--red); transform:translate(-50%,-50%) scale(1.08); border-color:var(--red); }
.media-card__badge{ position:absolute; top:16px; right:16px; background:rgba(6,6,7,.7); color:#fff; font-size:12px; font-weight:500; padding:5px 10px; border-radius:3px; }
.media-card__badge--gallery{ display:flex; align-items:center; gap:6px; letter-spacing:.04em; }
.media-card--live{ background:linear-gradient(160deg, var(--red-deep), #4a0509); border-radius:var(--radius-s); padding:28px; display:flex; flex-direction:column; gap:14px; justify-content:space-between; min-height:340px; }
.live-tag--card{ align-self:flex-start; }
.media-card--live__headline{ font-family:var(--serif); color:#fff; font-size:22px; font-weight:600; line-height:1.25; flex:1; }
.media-card--live .btn{ align-self:flex-start; }
/* =====================================================================
SPLIT GRID (feature + list) / TWO COL / STACK LIST
===================================================================== */
.split-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:stretch; }
.split-grid--rev{ grid-template-columns:1fr 1.3fr; }
.split-grid--rev .split-grid__list{ order:1; }
.split-grid--rev .split-grid__feature{ order:2; }
.split-grid__feature{ min-height:420px; }
.split-grid__feature .story-card__headline{ font-size:26px; }
.split-grid__list{ display:flex; flex-direction:column; }
.list-row{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--border-bottom); }
.list-row:last-child{ border-bottom:none; }
.list-row__tag{ flex:none; margin-top:2px; }
.list-row h4{ font-family:var(--sans); font-size:16px; font-weight:500; line-height:1.35; margin-bottom:4px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.stack-list{ display:flex; flex-direction:column; }
.stack-row{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--border-bottom); }
.stack-row:last-child{ border-bottom:none; }
.stack-row__idx{ font-family:var(--serif); font-weight:500; font-size:22px; color:var(--muted-light); flex:none; width:28px; }
.stack-row h4{ font-size:16px; font-weight:500; line-height:1.35; margin-bottom:4px; }
.stack-row:hover h4{ color:var(--red); }
/* =====================================================================
SPORT GRID (feature + flat cards)
===================================================================== */
.sport-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:22px; }
.sport-grid__feature{ min-height:400px; }
.sport-grid__feature .story-card__headline{ font-size:24px; }
.flat-card{ position:relative; border-radius:var(--radius-s); padding:26px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; min-height:400px; background:#0A1A0A; overflow:hidden; }
.flat-card--alt{ background:#0A1A0A; }
.flat-card--alt2{ background:#0A1A0A; }
.flat-card h3{ color:#fff; font-family:var(--sans); font-size:21px; font-weight:600; line-height:1.28; position:relative; }
.flat-card .meta{ position:relative; }
.flat-card__num{ position:absolute; top:0; right:14px; font-family:var(--serif); font-weight:500; font-size:110px; line-height:1; color:rgba(255,255,255,.14); }
/* =====================================================================
BUSINESS TICKER PANEL
===================================================================== */
.ticker-panel{ background:var(--ink); color:#fff; border-radius:var(--radius-s); padding:30px; display:flex; flex-direction:column; }
.ticker-panel__title{
font-family:var(--display); font-size:clamp(18px,1.6vw,21px); font-weight:500;
line-height:1; letter-spacing:-.03em; margin-bottom:18px;
}
.ticker-panel__row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line-dark); font-size:14px; font-weight:600; color:#D8D4C9; }
.ticker-panel__val{ color:#fff; font-weight:800; }
.ticker-panel__val--up{ color:#4ADE80; }
.shead__link{
display:inline-flex; align-items:center; gap:8px; color:inherit; text-decoration:none;
}
.shead__link svg{ opacity:.45; transition:opacity .18s, transform .18s; }
.shead__link:hover svg{ opacity:1; transform:translateX(2px); }
.market, .weboff{ padding-top:clamp(28px,3.2vw,44px); padding-bottom:clamp(28px,3.2vw,44px); }
.weboff{ margin-bottom:0; padding-bottom:clamp(40px,4.8vw,64px); }
.weboff .shead{ margin-bottom:clamp(22px,2.6vw,32px); align-items:flex-end; }
.weboff .shead__title{
font-size:18px; font-weight:700; letter-spacing:-.02em; line-height:1;
padding-bottom:6px;
}
.weboff .shead__rule{ margin-bottom:6px; }
/* Marketing — Showbiz-like grid + advertising aside */
.market__layout{
display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:28px; align-items:start;
}
.market__head{ margin-bottom:clamp(18px,2vw,24px); border-bottom-color:var(--red); }
.section__dot--market{ background:var(--red); }
.market__grid{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;
}
.market-card{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.market-card__media{
position:relative; display:block; overflow:hidden; border-radius:var(--radius-s);
aspect-ratio:4/3; background:#ddd;
}
.market-card__media img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.market-card:hover .market-card__media img{ transform:scale(1.05); }
.market-card__stamp{
font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:var(--red);
}
.market-card__title{
font-family:var(--sans); font-size:15px; line-height:1.32; font-weight:600; color:var(--ink);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
transition:color .18s;
}
.market-card:hover .market-card__title{ color:var(--ink-hover); }
.market__aside-head{ justify-content:flex-start; margin-bottom:14px; }
.ad-card{
position:relative; overflow:hidden; border-radius:var(--radius-s);
padding:22px 18px; display:flex; flex-direction:column; gap:14px;
background:var(--paper-2); border:1px solid var(--border-bottom);
}
.ad-card__eyebrow{
font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:var(--muted-light);
}
.ad-card__claim{
font-family:var(--display); font-size:clamp(22px,1.8vw,28px); line-height:1.05;
font-weight:800; letter-spacing:-.03em; color:var(--ink); margin:0;
}
.ad-card__lead{
font-size:13px; line-height:1.45; color:var(--muted); margin:0;
}
.ad-card__stats{
list-style:none; margin:0; padding:0;
display:flex; flex-direction:column; gap:10px;
border-top:1px solid var(--border-bottom); border-bottom:1px solid var(--border-bottom);
padding:12px 0;
}
.ad-card__stats li{ display:flex; flex-direction:column; gap:2px; }
.ad-card__stats strong{
font-family:var(--display); font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink);
}
.ad-card__stats span{ font-size:11.5px; color:var(--muted); line-height:1.3; }
.ad-card__list{
list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;
}
.ad-card__list li{
position:relative; padding-left:12px; font-size:12.5px; color:var(--ink-2); line-height:1.35;
}
.ad-card__list li::before{
content:''; position:absolute; left:0; top:.35em; width:5px; height:5px;
border-radius:50%; background:var(--red);
}
.ad-card__contact{ display:flex; flex-direction:column; gap:4px; }
.ad-card__contact a{
font-size:12.5px; font-weight:600; color:var(--ink); word-break:break-word;
}
.ad-card__contact a:hover{ color:var(--red); }
.ad-card__btn{
width:100%; margin-top:4px; text-transform:uppercase; letter-spacing:.06em;
font-weight:800; font-size:12.5px; text-align:center;
}
.web-slider{
position:relative;
container-type:inline-size;
container-name:web-slider;
}
.web-slider__nav{
position:absolute; z-index:3; left:0; right:0; top:0;
/* Match .promo-card__media (card width × 10/16) — use cqi so % is width-based */
height:calc(min(280px, max(200px, (100cqi - 54px) / 4)) * 10 / 16);
pointer-events:none;
}
.web-slider__btn{
pointer-events:auto; position:absolute; top:50%; width:36px; height:36px;
border-radius:var(--radius-s); border:1px solid var(--border-bottom);
background:var(--paper-2); color:var(--ink);
display:grid; place-items:center; box-shadow:0 2px 10px rgba(6,6,7,.08);
transition:background .18s, border-color .18s;
}
.web-slider__btn:hover{ background:var(--paper); border-color:var(--line); }
.web-slider__btn[data-web="prev"]{ left:0; transform:translate(-35%,-50%); }
.web-slider__btn[data-web="next"]{ right:0; transform:translate(35%,-50%); }
.web-slider__rail{
display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
padding:0; scrollbar-width:none; -ms-overflow-style:none;
}
.web-slider__rail::-webkit-scrollbar{ display:none; }
.promo-card{
position:relative;
flex:0 0 calc((100% - 54px) / 4); min-width:200px; max-width:280px;
display:block; scroll-snap-align:start;
}
.promo-card__media{
position:relative; display:block; overflow:hidden; border-radius:var(--radius-s);
aspect-ratio:16/10; background:#eee;
}
.promo-card__media img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.promo-card__media::after{
content:"";
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(6,6,7,.22) 0%, rgba(6,6,7,.06) 38%, rgba(6,6,7,.72) 100%);
}
.promo-card:hover .promo-card__media img{ transform:scale(1.05); }
.promo-card__stamp{
position:absolute; z-index:2; top:10px; left:10px;
margin:0; padding:4px 9px; border-radius:2px;
background:var(--red); color:#fff;
font-family:var(--sans); font-size:10.5px; font-weight:800;
letter-spacing:.07em; text-transform:uppercase;
}
.promo-card h3{
position:absolute; z-index:2; left:12px; right:12px; bottom:12px;
margin:0;
font-family:var(--sans); font-size:14px; line-height:1.28; font-weight:500; color:#fff;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
text-shadow:0 1px 8px rgba(6,6,7,.35);
}
.promo-card:hover h3{ color:#fff; }
/* =====================================================================
SPOTLIGHT (SCI-TECH) — legacy
===================================================================== */
.spotlight{ min-height:520px; }
.spotlight__headline{ color:#fff; font-size:42px; font-weight:500; line-height:1.12; max-width:760px; }
/* =====================================================================
COVER GRID (MAGAZINE) / OPINION CARD / PILL ROW (LIFESTYLE)
===================================================================== */
.cover-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.flat-card--magazine{ background:var(--c-magazine); }
.flat-card--magazin2{ background:#8C0F53; }
.opinion-card{ background:var(--paper-2); border:1px solid var(--border-bottom); border-left:4px solid var(--ink); border-radius:var(--radius-s); padding:30px; display:flex; flex-direction:column; gap:16px; min-height:400px; justify-content:center; }
.opinion-card__mark{ font-family:var(--serif); font-size:64px; line-height:1; color:var(--red); font-weight:500; }
.opinion-card__quote{ font-family:var(--serif); font-size:22px; line-height:1.4; font-weight:500; font-style:italic; }
.opinion-card__byline{ font-size:13px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
/* =====================================================================
NEWSLETTER CTA
===================================================================== */
.cta{ background:#1e1e1e; padding:96px 0; color-scheme:dark; }
.cta__inner{ max-width:720px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; }
.cta__title{ color:#fff; font-size:46px; font-weight:500; }
.cta__text{ color:#C9C5B9; font-size:17px; max-width:520px; }
.cta__form{ display:flex; gap:10px; width:100%; max-width:440px; }
.cta__form input{ flex:1; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#fff; border-radius:var(--radius-s); padding:15px 16px; font-size:15px; font-family:inherit; }
.cta__form input::placeholder{ color:#8B887F; }
.cta__form input:focus{ outline:2px solid var(--red); outline-offset:2px; }
.cta__badges{ display:flex; gap:16px; margin-top:6px; }
/* =====================================================================
FOOTER
===================================================================== */
.site-footer{ background:#000; padding:72px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:48px; padding-bottom:52px; border-bottom:1px solid var(--line-dark); }
.footer-brand__logo{ height:22px; margin-bottom:20px; }
.footer-brand p{ color:#8B887F; font-size:14px; line-height:1.6; max-width:280px; }
.footer-brand__social{ display:flex; gap:10px; margin-top:20px; }
.footer-col h3{ color:#6E6A61; font-family:var(--sans); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; }
.footer-col{ display:flex; flex-direction:column; gap:13px; }
.footer-col a{ color:#B9B5A9; font-size:14px; font-weight:600; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; align-items:flex-start; justify-content:space-between; padding-block:26px; flex-wrap:wrap; gap:12px; }
.footer-bottom span{ color:#8E897F; font-size:13px; line-height:1.55; max-width:42ch; }
.footer-bottom__links{ display:flex; gap:22px; }
.footer-bottom__links a{ color:#8E897F; font-size:13px; transition:color .2s; }
.footer-bottom__links a:hover{ color:#fff; }
/* =====================================================================
MOBILE TAB BAR
===================================================================== */
.mobile-tabbar{ display:none; }
/* =====================================================================
RESPONSIVE
===================================================================== */
@media (max-width:1280px){
:root{ --gutter:32px; }
.bento{ grid-template-columns:1fr; }
.bento__list{ flex-direction:row; gap:20px; margin-bottom:28px; padding-bottom:28px; border-bottom:1px solid var(--border-bottom); }
.bento__list-item{ flex-direction:column; border-top:none; padding:0; flex:1 1 0; }
.bento__list-item img{ width:100%; height:auto; aspect-ratio:4/3; }
.bento__list-item .thumb{ width:100%; height:auto; aspect-ratio:4/3; }
.bento__list-item .thumb img{ width:100%; height:100%; }
.sport-grid{ grid-template-columns:1fr 1fr; }
.media-grid{ grid-template-columns:1fr 1fr; }
.cover-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1240px){
.nav-bar--parenting .nav-bar__utility{ display:none; }
}
@media (max-width:1080px){
.nav-bar__utility{ display:none; }
.nav-bar__inner{ overflow-x:auto; }
.mega-panel{ display:none; }
.dense-layout{ grid-template-columns:1fr; }
.dense-rail{ position:static; }
.two-col{ grid-template-columns:1fr; gap:44px; }
.featured{ grid-template-columns:1fr 1fr; }
.featured__col1{ grid-column:1; }
.featured__mid{ grid-column:2; }
.featured__aside{ grid-column:1 / -1; grid-row:auto; display:block; }
.featured__aside .featured__list{ display:grid; grid-template-columns:1fr 1fr; gap:0 32px; min-height:0; max-height:none; overflow:visible; }
.featured__more{ grid-template-columns:1fr; padding-inline:var(--gutter); }
.featured__more-aside{ padding-inline:0; }
.featured__row2{ grid-template-columns:repeat(2,1fr); gap:20px; }
.featured__mini--paper{ width:100%; }
.featured__mini--paper .paper-unit{ width:100%; max-width:240px; }
.paper-cover{ width:100%; max-width:240px; height:auto; }
.tip-card{ width:100%; max-width:240px; }
}
@media (max-width:760px){
/* Single column shell; hero full-width, then a uniform 2×2 of cover cards. */
.featured{
display:grid; grid-template-columns:1fr 1fr; grid-template-rows:none;
gap:12px;
}
.featured__col1,
.featured__mid,
.featured__sub-row,
.featured__midtop{
display:contents;
}
.featured__hero{
grid-column:1 / -1;
}
/* Full-width after hero — don't trap in the 2-col cover grid */
.ad-wrap--after-hero{
grid-column:1 / -1;
}
.featured__mid > .featured__item--cover{
grid-column:1 / -1;
flex:none; min-height:0; display:block;
}
.featured__midtop > .featured__item--cover{
flex:none; min-height:0; display:block;
}
.featured__col1 .featured__mini--cover .featured__thumb,
.featured__mini--cover .featured__thumb,
.featured__midtop > .featured__item--cover .featured__thumb{
height:auto; aspect-ratio:1 / 1; min-height:0; margin-bottom:0;
}
.featured__mid > .featured__item--cover .featured__thumb{
height:auto; aspect-ratio:16/11; min-height:0;
}
.featured__aside .featured__list{ grid-template-columns:1fr; }
.featured__row2{ grid-template-columns:1fr 1fr; gap:12px; }
.featured__row2 .featured__mini--lead .featured__thumb{ aspect-ratio:16/9; }
.featured__headline{ font-size:21px; }
/* Tag lives in body — keep it clear of top chrome */
.featured__item--cover .featured__cover-body .tag,
.featured__mini--cover .featured__cover-body .tag{ position:relative; z-index:1; }
}
@media (max-width:860px){
:root{ --gutter:12px; }
html{ scroll-padding-top:52px; }
.ad-slot--billboard{ max-width:300px; }
.ad-wrap--desktop-leader{ display:none !important; }
.nav-bar{ display:none; }
.menu-toggle{ display:grid; }
.brand-bar__inner{ height:52px; }
.brand__logo{ height:var(--logo-h-m, 28px); }
.brand-bar--health .brand-bar__inner,
.brand-bar--parenting .brand-bar__inner{ padding-left:58px; }
.brand-bar__mark{ width:52px; }
.brand-bar__mark img{ width:28px; }
.brand__logo--health{ height:38px; }
.brand__logo--parenting{ height:30px; }
.theme-dd,
#searchToggle,
.brand-bar__actions .notify__btn{ display:none; }
.brand-bar__actions{ gap:6px; }
.brand-bar__actions .icon-btn{ width:44px; height:44px; }
.mobile-nav__search{ display:flex; }
.brand-bar__premium{ display:none; }
.site-header{ transition:transform .22s ease; }
.notify__panel,
.account__panel{
position:fixed; top:60px; left:12px; right:12px; width:auto; max-width:none;
max-height:min(70vh, 520px); overflow-y:auto; -webkit-overflow-scrolling:touch;
transform:translateY(-8px);
}
.notify__panel.is-open,
.account__panel.is-open{ transform:translateY(0); }
.notify__headline{ white-space:normal; overflow-wrap:anywhere; }
.dek{ display:none; }
.featured__aside{ display:none !important; }
.ad-slot--rectangle,
.ad-slot--rectangle.ad-slot--filled{
width:300px; max-width:300px; height:250px; margin-inline:auto;
aspect-ratio:auto;
}
.ad-slot--rectangle.ad-slot--filled img{
width:300px; height:250px; object-fit:cover; display:block;
}
.featured__aside-ad .ad-slot--rectangle,
.vaside .ad-slot--rectangle{
width:300px; max-width:300px; height:250px; aspect-ratio:auto;
}
.featured__mini--paper,
.featured__mini--paper .paper-unit{
width:min(240px, 100%); max-width:100%; margin-inline:auto;
}
.paper-cover{
width:100%; max-width:240px; height:auto; aspect-ratio:240 / 330;
}
.paper-cover img{
width:100%; height:100%; object-fit:contain; object-position:center top;
}
.tip-card{
width:100%; max-width:none; margin-top:16px;
box-sizing:border-box;
}
.section, .section-tint, .section-dark{ padding-block:44px; }
.section__title{ font-size:24px; }
/* Cover cards: keep headlines readable on small screens */
.featured__cover-scrim{
background:linear-gradient(180deg, rgba(6,6,7,.42) 0%, rgba(6,6,7,.18) 38%, rgba(6,6,7,.72) 68%, rgba(6,6,7,.96) 100%);
}
.featured__mini--cover .featured__dek,
.featured__midtop .featured__item--cover .featured__dek{ display:none; }
.featured__mid > .featured__item--cover .featured__dek{ display:block; }
.featured__cover-body{ padding:12px; gap:6px; }
.featured__item--cover .featured__cover-body h3,
.featured__mini--cover .featured__cover-body h3,
.featured__row2 .featured__mini--lead .featured__cover-body h4{
font-size:14px; line-height:1.25;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
text-shadow:0 1px 10px rgba(6,6,7,.55);
}
.featured__item--cover .engage-badge,
.featured__mini--cover .engage-badge{
top:8px; right:8px; padding:4px 7px; gap:6px;
}
.featured__item--cover .engage-badge span,
.featured__mini--cover .engage-badge span{ font-size:10px; }
.featured__item--cover .gallery-badge--lead,
.featured__mini--cover .gallery-badge--lead{
top:8px; left:8px; width:22px; height:22px;
}
/* Premium owns top-left; keep gallery next to it, not under engage */
.featured__item--cover:has(.premium-mark) .gallery-badge--lead,
.featured__mini--cover:has(.premium-mark) .gallery-badge--lead{
left:86px; right:auto; top:12px;
}
.featured__thumb > .premium-mark,
.cover-card__media > .premium-mark{ top:12px; left:8px; }
.bento__sub-row{ grid-template-columns:1fr; gap:18px; }
.bento__feature h3{ font-size:22px; }
.media-grid, .cover-grid, .sport-grid{ grid-template-columns:1fr; }
.split-grid, .split-grid--rev{ grid-template-columns:1fr; }
.split-grid--rev .split-grid__list, .split-grid--rev .split-grid__feature{ order:initial; }
.split-grid__feature{ min-height:0; aspect-ratio:4/3; }
.ad-slot--skyscraper{ width:100%; height:250px; }
.cta__title{ font-size:32px; }
.cta__form{ flex-direction:column; }
.footer-grid{ grid-template-columns:1fr 1fr; gap:36px 24px; }
.footer-brand{ grid-column:1 / -1; }
body{ padding-bottom:calc(57px + env(safe-area-inset-bottom, 0px)); }
.footer-bottom{ padding-block:20px 24px; }
.mobile-tabbar{
display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90;
height:auto; min-height:55px; padding-bottom:env(safe-area-inset-bottom, 0px);
background:rgba(11,11,12,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line-dark);
}
.mobile-tabbar a,
.mobile-tabbar button{
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
height:55px;
gap:3px; color:#B9B5A9; font-size:10.5px; font-weight:500;
background:none; border:0; padding:0; font-family:inherit; cursor:pointer;
}
.mobile-tabbar a.is-active,
.mobile-tabbar button.is-active{ color:#fff; }
.mobile-tabbar__cta{ color:var(--red) !important; }
.theme-health .mobile-tabbar__cta{ color:var(--c-health) !important; }
.theme-parenting .mobile-tabbar__cta{ color:var(--c-parenting) !important; }
}
@media (max-width:480px){
.bento__feature h3{ font-size:20px; }
.cover-grid, .sport-grid, .media-grid{ gap:16px; }
}
/* =====================================================================
=====================================================================
2027 ART DIRECTION LAYER
Display typography, editorial rhythm, and the signature sections:
News band · News Studio · Sport · Footer.
Everything below intentionally overrides the base layer above.
=====================================================================
===================================================================== */
:root{
/* Display voice leftovers from redesign layer */
--paper-deep: #EFE9DE;
--gold-1: #E5C158;
--gold-2: #B8860B;
--sport-navy: #0B1220;
}
/* ---------------------------------------------------------------------
Vertical rhythm — sections finally breathe
--------------------------------------------------------------------- */
.section{ padding-block:clamp(36px,4vw,30px) 0; }
main > .section:last-of-type{ padding-bottom:clamp(36px,4vw,60px); }
section.weboff{ padding-bottom:clamp(40px,4.8vw,64px); }
/* the lead grid sits tight under the leaderboard */
.ad-wrap{ padding:15px 0 15px; }
.ad-wrap--mid{
position:relative;
z-index:0;
display:flex;
flex-direction:column;
align-items:center;
padding:20px 0 20px;
}
.ad-wrap--mid .ad-unit{
width:auto;
max-width:100%;
}
/* Mobile after-hero — centered 300×250 MPU under hero */
@media (max-width:860px){
.ad-wrap.ad-wrap--after-hero{
display:flex !important;
justify-content:center;
grid-column:1 / -1;
padding:14px 0 10px;
}
.ad-wrap--after-hero .ad-slot--billboard{
width:300px;
max-width:300px;
}
}
.ad-wrap--mid::before{
content:'';
position:absolute; left:50%; top:0;
width:100vw; height:1px;
transform:translateX(-50%);
background:var(--border-bottom);
pointer-events:none;
}
.ad-wrap--bleed::after{
content:'';
position:absolute; top:0; bottom:0; left:50%;
width:100vw; z-index:-1;
transform:translateX(-50%);
background:var(--paper);
pointer-events:none;
}
.ad-wrap--footer{
position:relative;
padding:clamp(20px,3.6vw,20px) 0 clamp(20px,2.8vw,20px);
}
.ad-wrap--footer::before{
content:'';
position:absolute; left:50%; top:0;
width:100vw; height:1px;
transform:translateX(-50%);
background:var(--border-bottom);
pointer-events:none;
}
main > .section:first-of-type{ padding-top:0; }
/* ---------------------------------------------------------------------
Reading progress
--------------------------------------------------------------------- */
.read-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:200; pointer-events:none; }
.read-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--red),#FF7A45); }
/* ---------------------------------------------------------------------
Edition / weather strip inside the topic row
--------------------------------------------------------------------- */
.edition-cluster{
flex:none; margin-left:auto; padding-left:18px;
display:flex; align-items:center; gap:12px;
border-left:1px solid var(--border-bottom);
}
.edition{ display:flex; align-items:center; gap:14px; }
.edition__date{ font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-light); white-space:nowrap; }
.edition__weather{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--ink); white-space:nowrap; }
.edition__weather svg{ color:var(--red); }
.edition__weather b{ font-weight:800; }
.edition__weather:hover{ color:var(--red); }
/* Demo: live-dot switcher for breaking ticker */
.live-toggle{
appearance:none; border:0; background:transparent;
width:28px; height:28px; padding:0;
display:inline-flex; align-items:center; justify-content:center;
cursor:pointer; border-radius:999px;
flex:none;
}
.live-toggle:hover{ background:var(--paper); }
.live-toggle .live-dot{
width:8px; height:8px;
background:var(--muted-light);
animation:none;
opacity:.55;
}
.live-toggle.is-on .live-dot,
.live-toggle[aria-pressed="true"] .live-dot{
background:var(--red);
animation:pulse 1.6s ease-in-out infinite;
opacity:1;
}
/* ---------------------------------------------------------------------
Eyebrow / section heads / masthead strip
--------------------------------------------------------------------- */
.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-size:10.5px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:10px; }
.eyebrow::before{ content:''; width:20px; height:2px; background:currentColor; flex:none; }
.eyebrow--light{ color:#FF5E62; }
.eyebrow--live{ color:var(--muted); letter-spacing:.14em; }
.eyebrow--live::before{ display:none; }
.section__head{ align-items:flex-end; padding-bottom:14px; border-bottom:1px solid var(--border-bottom); margin-bottom:clamp(22px,2.4vw,32px); }
.featured__more .section__head{ margin-bottom:20px; }
.featured__more-aside .section__head{ justify-content:flex-start; margin-bottom:10px; padding-bottom:14px; }
.section__title{ font-family:var(--display); font-size:18px; font-weight:400; line-height:1; gap:13px; }
.section__dot{ width:5px; height:.78em; border-radius:1px; align-self:center; }
.section__dot--news{ background:var(--c-news); }
.section__dot--sport{ background:var(--c-sport); }
.section__dot--scitech{ background:var(--c-scitech); }
.section__dot--health{ background:var(--c-health); }
.section-dark .section__head, .section-tint .section__head{ border-bottom-color:rgba(255,255,255,.16); }
.section-tint .section__head{ border-bottom-color:var(--border-bottom); }
.shead{ display:flex; align-items:flex-end; gap:clamp(18px,2.4vw,34px); margin-bottom:clamp(26px,3vw,40px); }
.shead__title{ font-family:var(--display); font-size:clamp(30px,3.9vw,54px); font-weight:800; line-height:.94; letter-spacing:-.035em; }
.shead__title--light{ color:#fff; }
.shead__rule{ flex:1; height:1px; background:var(--border-bottom); margin-bottom:15px; min-width:20px; }
.shead--light .shead__rule{ background:rgba(255,255,255,.2); }
.shead .see-all{ flex:none; margin-bottom:11px; margin-left:auto; }
/* ---------------------------------------------------------------------
Display typography on the big editorial moments
--------------------------------------------------------------------- */
.story-card__headline{ font-family:var(--sans); font-size:clamp(18px,1.55vw,25px); line-height:1.18; letter-spacing:-.02em; font-weight:600; }
.split-grid__feature .story-card__headline,
.sport-grid__feature .story-card__headline{ font-size:clamp(20px,1.85vw,29px); }
.spotlight__headline{ font-family:var(--display); font-size:clamp(27px,3.9vw,54px); line-height:1.02; letter-spacing:-.038em; font-weight:800; }
.cta__title{ font-family:var(--display); font-size:clamp(30px,4vw,54px); letter-spacing:-.038em; line-height:1; font-weight:800; }
.flat-card h3{ font-family:var(--sans); font-size:clamp(16px,1.4vw,21px); line-height:1.22; letter-spacing:-.015em; font-weight:600; }
.flat-card__num{ font-family:var(--display); font-weight:800; letter-spacing:-.04em; }
.trending-list__num, .stack-row__idx{ font-family:var(--display); font-weight:800; letter-spacing:-.04em; }
/* ---------------------------------------------------------------------
Signature chips: listen + premium
--------------------------------------------------------------------- */
.listen-chip{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px 7px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.12); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.03em; white-space:nowrap; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s, color .2s, border-color .2s; }
.listen-chip svg{ width:14px; height:14px; flex:none; }
.story-card:hover .listen-chip{ background:#fff; color:var(--ink); border-color:#fff; }
.listen-chip--dark{ background:transparent; border-color:var(--border-bottom); color:var(--ink); }
.hero-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:0; }
.hero-foot__meta{ color:#CFCBC0; font-size:12px; font-weight:600; }
@media (max-width:860px){
.hero-foot{ flex-wrap:nowrap; gap:10px; align-items:center; }
.hero-foot__read{ display:none; }
}
.premium-mark{
display:inline-block; margin-right:7px; padding:2px 6px; border-radius:2px; vertical-align:1px;
background:var(--black); color:var(--white);
font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
}
html[data-theme="dark"] .premium-mark{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
/* Pinned inside the photo instead of running inline with a headline. */
.featured__thumb > .premium-mark,
.cover-card__media > .premium-mark{ position:absolute; z-index:3; top:12px; left:12px; margin-right:0;
padding:4px 8px; box-shadow:0 2px 10px rgba(6,6,7,.35); }
/* ---------------------------------------------------------------------
Hero — bigger, louder, editorial
--------------------------------------------------------------------- */
/* Follow the two stacked 4/3 mid cards instead of a vw min-height that made them taller. */
.featured__hero{ min-height:0; }
.featured__headline{
font-family:var(--display);
font-size:clamp(23px,2.5vw,30px);
line-height:1.05; letter-spacing:-.035em; font-weight:800;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}
.featured__headline.is-long{ font-size:clamp(20px,2.15vw,32px); }
.featured__headline.is-xlong{ font-size:clamp(18px,1.9vw,25px); line-height:1.08; }
.featured__headline.is-xxlong{ font-size:clamp(16px,1.7vw,24px); line-height:1.1; -webkit-line-clamp:5; }
.featured__sub{ font-size:clamp(13.5px,1vw,14px); line-height:1.42; color:#E7E3D8; max-width:58ch; }
.featured__hero .featured__sub{ max-width:none; } /* Same width as the headline above it. */
/* Hidden until JS confirms it fits — prevents flash-then-hide */
.featured__hero .featured__sub{ display:none !important; }
.featured__hero .featured__sub.is-shown{ display:block !important; }
.featured__sub[hidden]{ display:none !important; }
/* Off-screen measure only — never visible to the user */
.featured__hero .featured__sub.is-measuring{
display:-webkit-box !important;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
position:fixed;
visibility:hidden;
pointer-events:none;
left:0; right:auto;
top:0;
width:min(58ch, calc(100vw - 48px));
z-index:-1;
}
.featured__hero.has-xlong-title .featured__sub,
.featured__hero.has-xxlong-title .featured__sub{ display:none !important; }
.featured__hero .story-card__body{ padding:clamp(20px,2.3vw,36px); gap:10px; }
.featured__hero.has-xlong-title .story-card__body,
.featured__hero.has-xxlong-title .story-card__body{ gap:10px; }
.featured__hero .story-card__scrim{ background:linear-gradient(180deg, rgba(6,6,7,0) 22%, rgba(6,6,7,.52) 58%, rgba(6,6,7,.95) 100%); }
@media (max-width:760px){
/* Full-bleed hero: edge-to-edge, no radius, fixed 275px */
.featured__hero{
aspect-ratio:auto;
width:calc(100% + 2 * var(--gutter));
margin-inline:calc(-1 * var(--gutter));
height:275px;
min-height:275px;
max-height:275px;
border-radius:0;
}
.featured__hero > img{
position:absolute;
inset:0;
width:100%;
height:100%;
aspect-ratio:auto;
object-fit:cover;
display:block;
}
.featured__hero .featured__headline{ font-size:clamp(20px,5.6vw,24px); -webkit-line-clamp:3; }
.featured__hero .featured__headline.is-long{ font-size:clamp(17px,4.8vw,20px); }
.featured__hero .featured__headline.is-xlong{ font-size:clamp(15px,4.3vw,18px); -webkit-line-clamp:4; }
.featured__hero .featured__headline.is-xxlong{ font-size:clamp(14px,4vw,16px); -webkit-line-clamp:4; }
.featured__hero .featured__sub.is-shown{ font-size:13px; }
.featured__hero .featured__sub.is-measuring{ -webkit-line-clamp:2; }
.featured__hero .story-card__body{ padding:14px 14px 12px; gap:8px; }
}
/* =====================================================================
NEWS BAND — covers + rail + scroller
===================================================================== */
.vband{
position:relative; background:var(--paper-2); border-top:1px solid var(--border-bottom);
margin-top:0; padding:clamp(20px,2.4vw,32px) 0 clamp(36px,4vw,56px);
}
.vband__head{ margin-bottom:clamp(22px,2.4vw,32px); }
.vband__grid{
display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 300px;
gap:20px; align-items:stretch;
}
.vfeat{ display:flex; flex-direction:column; gap:20px; }
.vfeat .cover-card,
.vfeat .cover-card__media{ min-height:0; }
.vfeat .cover-card__media{ aspect-ratio:4/3; }
.vfeat .gallery-badge--lead,
.vfeat .video-badge{ z-index:3; }
.vfeat .gallery-badge--lead{ top:12px; left:12px; bottom:auto; right:auto; }
.vfeat .video-badge{ top:12px; right:12px; bottom:auto; left:auto; }
.vfeat .cover-card__media:has(.premium-mark) .gallery-badge--lead{ left:auto; right:12px; }
.vrail{
display:flex; flex-direction:column; min-width:0;
height:0; min-height:100%;
}
.vrail__item{
flex:1 1 0; display:grid; grid-template-columns:clamp(110px,28%,140px) minmax(0,1fr);
gap:14px; align-items:center; padding:14px 0; min-height:0;
border-top:1px solid var(--border-bottom);
}
.vrail__item:first-child{ border-top:none; padding-top:0; }
.vrail__item:last-child{ padding-bottom:0; }
.vrail__thumb{ position:relative; display:block; overflow:hidden; border-radius:var(--radius-s); aspect-ratio:12/10; background:var(--paper-2); }
.vrail__thumb img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.vrail__item:hover .vrail__thumb img{ transform:scale(1.06); }
.vrail__thumb .gallery-badge--lead,.vrail__thumb .video-badge{ bottom:6px; z-index:2;}
.vrail__thumb .gallery-badge--lead{ right:6px; top:auto; left:auto; width:20px; height:20px; }
.vrail__thumb .video-badge{ left:auto; right:6px; top:auto; height:20px; padding:0 6px 0 4px; font-size:10px; }
.vrail__thumb .gallery-badge--lead svg{ width:10px; height:10px; }
.vrail__thumb .video-badge svg{ width:9px; height:9px; }
.vrail__body h3{
font-family:var(--sans); font-size:15px; line-height:1.32; font-weight:500; color:var(--ink);
transition:color .18s;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.vrail__body .kicker{ display:block; margin-bottom:5px; }
.featured__mini > .kicker{
display:block; margin:0 0 6px;
}
.featured__row2 .featured__mini > .kicker{ margin-top:2px; }
.vrail__body .meta{ display:block; margin-top:6px; }
.vrail__item:hover .vrail__body h3{ color:var(--ink-hover); }
.vaside{
display:flex; flex-direction:column; min-width:0;
height:0; min-height:100%; align-self:stretch;
}
.vaside__rank{
flex:1 1 auto; min-height:0; list-style:none; margin:0; padding:0 4px 0 0;
display:flex; flex-direction:column;
overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
-webkit-overflow-scrolling:touch;
}
.vaside__rank::-webkit-scrollbar{ width:5px; }
.vaside__rank::-webkit-scrollbar-thumb{ background:var(--border-bottom); border-radius:999px; }
.vaside__rank li{ flex:none; display:flex; border-top:1px solid var(--border-bottom); }
.vaside__rank li:first-child{ border-top:none; }
.vaside__rank a{
flex:1; display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px;
align-items:flex-start; padding:14px 0;
}
.vaside__rank li:first-child a{ padding-top:0; }
.vaside__rank li:last-child a{ padding-bottom:4px; }
.vaside__num{
font-family:var(--display); font-weight:800; font-size:clamp(28px,2.4vw,36px);
line-height:.9; letter-spacing:-.04em; color:#C8C2B6; padding-top:2px;
}
.vaside__rank li:first-child .vaside__num{ color:var(--muted-light); }
.vaside__txt{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.vaside__txt .kicker{ font-size:11px; }
.vaside__rubric{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vaside__rubric .premium-mark{ margin-right:0; }
.vaside__txt h4,
.vaside__rank h4{
font-family:var(--sans); font-size:14px; line-height:1.32; font-weight:500; color:var(--ink);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
transition:color .18s;
}
.vaside__rank a:hover h4{ color:var(--ink-hover); }
.vaside .featured__aside-ad{ margin-top:18px; }
/* legacy gallery badge (still used in other sections) */
.gallery-badge--lead{ top:auto; left:16px; right:auto; bottom:16px; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
filter:drop-shadow(0 1px 3px rgba(6,6,7,.45)); }
.gallery-badge--lead svg{ margin:0; }
.featured__thumb > .gallery-badge,
.featured__thumb > .gallery-badge--lead{
top:8px; left:8px; right:auto; bottom:auto;
width:22px; height:22px;
}
.featured__thumb > .gallery-badge svg,
.featured__thumb > .gallery-badge--lead svg{
width:11px; height:11px; margin:0;
}
.live-dot--red{ background:var(--red); }
.meta--dark{ color:var(--muted-light); font-size:12px; font-weight:600; }
/* =====================================================================
STUDIO — video, galleries, shorts
===================================================================== */
.studio{ position:relative; overflow:hidden; background:#08080A; padding:clamp(48px,5.4vw,88px) 0; }
.studio__glow{ position:absolute; top:-260px; left:-180px; width:880px; height:720px; border-radius:50%; pointer-events:none;
background:radial-gradient(closest-side, rgba(237,28,36,.30), rgba(237,28,36,0) 72%); }
.studio__glow--br{
top:auto; left:auto; right:-280px; bottom:-320px;
width:1100px; height:900px;
background:radial-gradient(closest-side, rgba(237,28,36,.34), rgba(237,28,36,0) 74%);
}
/* Feature image as full-bleed blurred backdrop (replaces glow blobs when available). */
.studio__bg{
position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.studio__bg::after{
content:''; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.72) 45%, rgba(8,8,10,.88) 100%);
}
.studio__bg img,
.studio__bg .studio__bg-img{
position:absolute; inset:-8%;
width:116%; height:116%; max-width:none;
object-fit:cover; object-position:center;
filter:blur(12px) saturate(1.15);
transform:scale(1.05);
opacity:.95;
}
.studio__inner{ position:relative; z-index:1; }
.studio__head{
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
margin-bottom:clamp(22px,2.6vw,32px); padding-bottom:14px;
border-bottom:1px solid rgba(255,255,255,.14);
}
.studio__logo{ display:block; height:28px; width:auto; flex:none; }
.studio__head .section__title{ margin:0; }
.studio__head .see-all{ margin-left:auto; }
/* News TV horizontal slider */
.tv-slider{ position:relative; margin-bottom:clamp(28px,3.2vw,44px); }
.tv-slider__nav{
position:absolute; z-index:3; left:0; right:0; top:0;
height:calc(clamp(240px,22vw,300px) * 9 / 16);
pointer-events:none;
}
.tv-slider__btn{
pointer-events:auto; position:absolute; top:50%; width:40px; height:40px;
border-radius:var(--radius-s); border:1px solid rgba(255,255,255,.35);
background:rgba(255,255,255,.92); color:var(--ink);
display:grid; place-items:center; transition:background .18s, border-color .18s;
}
.tv-slider__btn:hover{ background:#fff; border-color:#fff; }
.tv-slider__btn[data-tv="prev"]{ left:0; transform:translate(-30%,-50%); }
.tv-slider__btn[data-tv="next"]{ right:0; transform:translate(30%,-50%); }
.tv-slider__rail{
display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
padding:0; scrollbar-width:none; -ms-overflow-style:none;
}
.tv-slider__rail::-webkit-scrollbar{ display:none; }
.tv-card{
flex:0 0 clamp(240px,22vw,300px); display:flex; flex-direction:column; gap:12px;
scroll-snap-align:start; min-width:0;
}
.tv-card__media{
position:relative; display:block; overflow:hidden; border-radius:var(--radius-s);
aspect-ratio:16/9; background:#111;
}
.tv-card__media > img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.tv-card:hover .tv-card__media > img{ transform:scale(1.05); }
.tv-card__play{
position:absolute; z-index:2; top:12px; left:12px; width:26px; height:26px; display:grid; place-items:center;
}
.tv-card__play img{ width:22px; height:22px; filter:brightness(0) invert(1); }
.tv-card__stamp{
font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:rgba(255,255,255,.55);
}
.tv-card__title{
font-family:var(--sans); color:#fff; font-size:15px; line-height:1.35; font-weight:500;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
transition:color .18s;
}
.tv-card:hover .tv-card__title{ color:rgba(255,255,255,.82); }
.studio__grid{ display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); gap:clamp(16px,1.9vw,26px); align-items:stretch; }
/* min-height rather than aspect-ratio: a stretched grid item with an aspect-ratio derives its
*width* from the row height and blows out of its column. */
.studio__feature{ position:relative; display:block; overflow:hidden; border-radius:var(--radius-s);
min-height:clamp(300px,33vw,480px); background:#000; }
.studio__feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.studio__feature:hover img{ transform:scale(1.04); }
.studio__feature-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,4,6,.28) 0%, rgba(4,4,6,.06) 38%, rgba(4,4,6,.88) 100%); }
.studio__feature-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; gap:12px; padding:clamp(20px,2.3vw,34px); }
.studio__meta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.studio__views{ display:inline-flex; align-items:center; gap:6px; color:#CFCBC0; font-size:12px; font-weight:500; }
.studio__views svg{ width:15px; height:15px; flex:none; }
.studio__feature-headline{ font-family:var(--display); color:#fff; font-size:clamp(20px,2.15vw,36px); line-height:1.06; letter-spacing:-.022em; font-weight:500; max-width:23ch; }
.studio__scrub{ display:block; height:3px; border-radius:999px; background:rgba(255,255,255,.24); overflow:hidden; margin-top:6px; }
.studio__scrub-fill{ display:block; height:100%; width:26%; background:var(--red); }
.studio__time-row{ display:flex; justify-content:space-between; color:#A8A49A; font-size:11.5px; font-weight:500; font-variant-numeric:tabular-nums; }
.play-btn--xl{ width:clamp(58px,5.4vw,88px); height:clamp(58px,5.4vw,88px); }
.studio__side{ display:grid; grid-template-rows:1.22fr 1fr; gap:clamp(16px,1.9vw,26px); min-height:0; }
.studio__gallery{ position:relative; display:block; overflow:hidden; border-radius:var(--radius-s); background:#000; min-height:170px; }
.studio__gallery img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.studio__gallery:hover img{ transform:scale(1.05); }
.studio__stack{ position:absolute; z-index:3; top:0; left:0; right:0; height:20px; pointer-events:none; }
.studio__stack::before, .studio__stack::after{ content:''; position:absolute; border-radius:0 0 5px 5px; }
.studio__count{ position:absolute; z-index:3; top:18px; right:16px; display:inline-flex; align-items:center; gap:7px;
padding:6px 12px; border-radius:999px; background:rgba(6,6,7,.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
color:#fff; font-size:12.5px; font-weight:800; }
.studio__gallery-body{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:clamp(18px,1.9vw,26px); }
.studio__gallery-body .eyebrow{ margin-bottom:8px; }
.studio__gallery-body h3{ font-family:var(--display); color:#fff; font-size:clamp(17px,1.45vw,23px); line-height:1.12; font-weight:500; letter-spacing:-.015em; }
.studio__live{ position:relative; overflow:hidden; border-radius:var(--radius-s); padding:clamp(20px,2vw,28px);
display:flex; flex-direction:column; justify-content:space-between; gap:16px;
background:linear-gradient(150deg, #C4121A 0%, #7C0A11 56%, #340408 100%); }
.studio__live::after{ content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(420px 220px at 88% 6%, rgba(255,255,255,.18), transparent 70%); }
.studio__live > *{ position:relative; z-index:1; }
.studio__live-headline{ font-family:var(--display); color:#fff; font-size:clamp(18px,1.6vw,26px); line-height:1.12; font-weight:500; letter-spacing:-.015em; }
.studio__live-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.studio__watching{ display:inline-flex; align-items:center; gap:7px; color:#FFD7D9; font-size:12.5px; font-weight:500; }
.studio__watching-dot{ width:7px; height:7px; border-radius:999px; background:#fff; animation:pulse 1.6s ease-in-out infinite; }
.btn--sm{ padding:9px 17px; font-size:12.5px; }
/* shorts rail */
.shorts{ margin-top:clamp(32px,3.6vw,54px); }
.shorts__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.shorts__title{ font-family:var(--display); color:#fff; font-size:clamp(20px,1.9vw,28px); font-weight:500; letter-spacing:-.015em; }
.shorts__title span{ color:var(--red); font-style:italic; }
.shorts__nav{ display:flex; gap:8px; }
.shorts__btn{ width:38px; height:38px; border-radius:999px; border:1px solid rgba(255,255,255,.26); background:transparent; color:#fff;
display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s, border-color .2s; }
.shorts__btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.shorts__rail{ display:flex; align-items:flex-start; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
padding-bottom:6px; scrollbar-width:none; -ms-overflow-style:none; }
.shorts__rail::-webkit-scrollbar{ display:none; }
.short{
position:relative; flex:0 0 clamp(148px,13.6vw,192px); aspect-ratio:9/16; border-radius:var(--radius-s);
overflow:hidden; background:#111; scroll-snap-align:start; border:0; padding:0; cursor:pointer; text-align:left; color:inherit;
}
.short video{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
pointer-events:none; user-select:none; transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.short:hover video{ transform:scale(1.04); }
.short__photo{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
pointer-events:none; user-select:none; transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.short:hover .short__photo{ transform:scale(1.04); }
.short__dur{
position:absolute; z-index:3; top:8px; right:8px; display:inline-flex; align-items:center; gap:4px;
padding:4px 7px; border-radius:4px; background:var(--red); color:#fff;
font-family:var(--sans); font-size:11px; font-weight:700; line-height:1;
}
.short__dur img{ width:12px; height:12px; filter:brightness(0) invert(1); }
.short__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,4,6,.2) 0%, rgba(4,4,6,0) 35%, rgba(4,4,6,.88) 100%); pointer-events:none; }
.short__body{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:12px 10px; display:flex; flex-direction:column; gap:7px; pointer-events:none; }
.short__body h4{
font-family:var(--sans); color:#fff; font-size:13px; line-height:1.28; font-weight:600;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Instagram-style shorts viewer */
.shorts-viewer{
position:fixed; inset:0; z-index:1200; background:#0a0a0a; color:#fff;
opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s, visibility .2s;
}
.shorts-viewer.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.shorts-viewer[hidden]{ display:none; }
.shorts-viewer.is-open[hidden]{ display:block; }
.shorts-viewer__mute,
.shorts-viewer__close{
position:absolute; z-index:4; top:max(14px, env(safe-area-inset-top));
width:42px; height:42px; border:0; background:transparent; color:#fff;
display:grid; place-items:center; cursor:pointer;
}
.shorts-viewer__mute{ left:max(10px, env(safe-area-inset-left)); }
.shorts-viewer__close{ right:max(10px, env(safe-area-inset-right)); }
.shorts-viewer__mute:hover,
.shorts-viewer__close:hover{ opacity:.75; }
.shorts-viewer__ico-mute,
.shorts-viewer__ico-unmute{ display:block; }
.shorts-viewer__ico-unmute{ display:none; }
.shorts-viewer.is-unmuted .shorts-viewer__ico-mute{ display:none; }
.shorts-viewer.is-unmuted .shorts-viewer__ico-unmute{ display:block; }
.shorts-viewer__track{
height:100%; overflow-y:auto; scroll-snap-type:y mandatory; scroll-behavior:smooth;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.shorts-viewer__track::-webkit-scrollbar{ display:none; }
.shorts-viewer__slide{
position:relative; height:100%; min-height:100%; scroll-snap-align:start; scroll-snap-stop:always;
display:grid; place-items:center; background:#0a0a0a;
}
.shorts-viewer__slide video,
.shorts-viewer__photo{
position:relative; z-index:1; width:100%; height:100%; max-height:100%; object-fit:cover; background:#000;
}
.shorts-viewer__photo{ background:transparent; }
/* Vertical short (video or photo): shown whole in a 9:16 box, a blurred copy of its picture behind. */
.shorts-viewer__slide--boxed{ overflow:hidden; }
.shorts-viewer__blur{
position:absolute; inset:-40px; z-index:0;
background-size:cover; background-position:center;
filter:blur(36px) saturate(1.2) brightness(.55); transform:translateZ(0);
pointer-events:none;
}
.shorts-viewer__frame{
position:relative; z-index:1;
height:min(calc(100% - 120px), calc((100vw - 24px) * 16 / 9)); aspect-ratio:9/16; max-width:calc(100% - 24px);
border-radius:16px; overflow:hidden; background:#111;
box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.shorts-viewer__story{ position:absolute; inset:0; z-index:1; width:100%; height:100%; border:0; background:transparent; }
.short__story{
position:absolute; top:10px; left:10px; z-index:2; padding:3px 8px; border-radius:99px;
background:rgba(255,255,255,.92); color:#111; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.shorts-viewer__frame .shorts-viewer__photo,
.shorts-viewer__frame video{ position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:cover; background:#000; }
.shorts-viewer__frame .shorts-viewer__caption{
bottom:0; padding:60px 18px 20px; font-size:clamp(17px,2.2vh,22px);
background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
}
/* Landscape video / photo: shown whole, with an "ambilight" glow of itself behind it. */
.shorts-viewer__slide--wide{ overflow:hidden; }
.shorts-viewer__slide--wide video,
.shorts-viewer__slide--wide .shorts-viewer__photo{
object-fit:contain; background:transparent; animation:none;
filter:drop-shadow(0 18px 60px rgba(0,0,0,.55));
}
.shorts-viewer__glow{
position:absolute; inset:-12%; z-index:0; width:124%; height:124%;
background-size:cover; background-position:center;
filter:blur(70px) saturate(1.5) brightness(.8); transform:translateZ(0);
pointer-events:none;
}
canvas.shorts-viewer__glow{ opacity:0; transition:opacity .8s ease; }
canvas.shorts-viewer__glow.is-live{ opacity:1; }
.shorts-viewer__caption{
position:absolute; z-index:2; left:0; right:0; bottom:max(52px, calc(env(safe-area-inset-bottom) + 40px));
padding:0 20px; font-family:var(--sans); font-size:clamp(18px,4.6vw,24px); font-weight:700; line-height:1.25;
text-shadow:0 1px 12px rgba(0,0,0,.55);
display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.shorts-viewer__caption--link{ color:#fff; text-decoration:none; -webkit-line-clamp:unset; display:block; }
.shorts-viewer__caption--link:hover{ color:#fff; }
.shorts-viewer__caption--link:hover .shorts-viewer__more{ background:#fff; color:#111; }
.shorts-viewer__more{
display:table; margin-top:10px; padding:6px 12px; border-radius:999px;
background:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
font-size:13px; font-weight:700; text-shadow:none; transition:background .15s, color .15s;
}
.shorts-viewer__next{
position:absolute; z-index:4; left:50%; bottom:max(12px, env(safe-area-inset-bottom));
transform:translateX(-50%); width:44px; height:44px; border:0; background:transparent; color:#fff;
display:grid; place-items:center; cursor:pointer;
}
.shorts-viewer__next:hover{ opacity:.75; }
/* =====================================================================
SHOWBIZ — 4-col grid + subscription aside
===================================================================== */
.showbiz{ padding-block:clamp(28px,3vw,40px) clamp(36px,4vw,56px); }
.showbiz__layout{
display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:28px; align-items:stretch;
}
.showbiz__main{ min-width:0; }
.showbiz__aside{
display:flex; flex-direction:column; min-height:0; align-self:stretch;
}
.showbiz__aside .sub-card{ flex:1 1 auto; min-height:0; }
.showbiz__head{ margin-bottom:clamp(18px,2vw,24px); border-bottom-color:var(--c-showbiz); }
.showbiz__grid{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;
}
.showbiz-card{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.showbiz-card__media{
position:relative; display:block; overflow:hidden; border-radius:var(--radius-s);
aspect-ratio:4/3; background:#ddd;
}
.showbiz-card__media img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.showbiz-card:hover .showbiz-card__media img{ transform:scale(1.05); }
.showbiz-card__media .gallery-badge--lead{
top:auto; bottom:10px; left:10px; right:auto;
}
.showbiz-card__stamp{
font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:var(--c-showbiz);
}
.showbiz-card__media .showbiz-card__stamp{
position:absolute; z-index:2; left:10px; top:10px;
display:inline-flex; align-items:center;
margin:0; padding:4px 9px; border-radius:2px;
font-family:var(--sans); font-size:10.5px; letter-spacing:.07em;
background:var(--c-showbiz); color:#fff;
text-shadow:none;
}
.showbiz-card__title{
font-family:var(--sans); font-size:15px; line-height:1.32; font-weight:500; color:var(--ink);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
transition:color .18s;
}
.showbiz-card:hover .showbiz-card__title{ color:var(--ink-hover); }
.showbiz-card--lead{ grid-column:span 2; gap:0; }
.showbiz-card--lead .showbiz-card__media{ aspect-ratio:16/9; }
.showbiz-card__scrim{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(6,6,7,0) 42%, rgba(6,6,7,.55) 72%, rgba(6,6,7,.88) 100%);
}
.showbiz-card__cover{
position:absolute; left:0; right:0; bottom:0; z-index:2;
padding:16px 16px 14px;
}
.showbiz-card--lead .showbiz-card__title{
color:#fff; font-size:clamp(16px,1.35vw,20px); line-height:1.25; font-weight:700;
text-shadow:0 1px 10px rgba(6,6,7,.45);
}
.showbiz-card--lead:hover .showbiz-card__title{ color:#fff; }
.showbiz-card--lead .gallery-badge--lead{
top:10px; right:10px; bottom:auto; left:auto;
}
.showbiz-card .meta{ display:block; margin-top:auto; color:var(--muted); }
.showbiz-card--lead .showbiz-card__cover .meta{
margin:6px 0 0; padding:0; color:rgba(255,255,255,.78);
}
.showbiz-card--lead:hover .showbiz-card__cover .meta{ color:rgba(255,255,255,.78); }
.showbiz__aside-head{ justify-content:flex-start; margin-bottom:14px; }
.sub-card{
position:relative; overflow:hidden; border-radius:var(--radius-s);
padding:28px 22px; display:flex; flex-direction:column;
align-items:center; justify-content:space-between; gap:24px; text-align:center;
background:var(--paper-2);
border:1px solid var(--border-bottom);
}
html[data-theme="dark"] .sub-card{
background:var(--paper-2);
border-color:var(--line);
}
html[data-theme="dark"] .sub-card__text{ color:var(--ink-2); }
html[data-theme="dark"] .sub-card__text strong{ color:#fff; }
.sub-card__logo{ height:28px; width:auto; }
.sub-card__text{
font-family:var(--display); font-size:clamp(18px,1.5vw,22px); line-height:1.25;
font-weight:500; color:var(--ink); letter-spacing:-.015em;
}
.sub-card__text strong{ font-weight:800; }
.sub-card__btn{ width:100%; text-transform:uppercase; letter-spacing:.06em; font-weight:800; font-size:13px; }
/* =====================================================================
LIFESTYLE + RECIPES
===================================================================== */
.life{ padding-block:clamp(28px,3vw,40px) clamp(36px,4vw,56px); background:var(--paper-2); }
.life.shell{ /* shell already pads; keep white band full-bleed via ::before */ }
.life{ position:relative; z-index:0; }
.life::before{
content:''; position:absolute; inset:0; left:50%; width:100vw; transform:translateX(-50%);
background:var(--paper-2); z-index:-1;
}
.life__layout{
display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,300px); gap:clamp(24px,3vw,40px);
align-items:start;
}
.life__head{
justify-content:space-between;
margin-bottom:16px;
padding-bottom:12px;
border-bottom-color:var(--c-lifestyle);
}
.life__recipes .life__head{ justify-content:flex-start; }
.life__top{
display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:20px; align-items:stretch;
}
.life-feat{
position:relative; display:block; overflow:hidden; border-radius:var(--radius-s);
height:100%; min-height:0; background:#111; align-self:stretch;
}
.life-feat img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.life-feat:hover img{ transform:scale(1.04); }
.life-feat__scrim{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(4,4,6,.12) 20%, rgba(4,4,6,.82) 100%);
}
.life-feat__body{
position:absolute; z-index:2; left:0; right:0; bottom:0;
display:flex; flex-direction:column; gap:8px; padding:clamp(16px,1.8vw,24px);
}
.life-feat__body h3{
font-family:var(--sans); color:#fff; font-size:clamp(17px,1.55vw,22px);
line-height:1.22; font-weight:700;
}
.life-feat__body .meta{ color:rgba(255,255,255,.78); }
.life-feat .life-stamp{
position:absolute; z-index:3; left:10px; top:10px;
display:inline-flex; align-items:center;
margin:0; padding:4px 9px; border-radius:2px;
font-family:var(--sans); font-size:10.5px; letter-spacing:.07em;
background:var(--c-lifestyle); color:#fff;
text-shadow:none;
}
.life__tops{
display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,auto);
gap:16px; align-content:stretch;
}
.life-card{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.life-card__media{
position:relative; display:block; overflow:hidden; border-radius:var(--radius-s);
aspect-ratio:4/3; background:#eee;
}
.life-card__media img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.life-card:hover .life-card__media img{ transform:scale(1.05); }
.life-card h3{
font-family:var(--sans); font-size:14px; line-height:1.3; font-weight:500; color:var(--ink);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
transition:color .18s;
}
.life-card:hover h3{ color:var(--ink-hover); }
.life-card .meta{ display:block; margin-top:auto; color:var(--muted); }
.life-stamp{
font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:var(--c-lifestyle-ink);
}
.life-card__media .life-stamp{
position:absolute; z-index:2; left:10px; top:10px;
display:inline-flex; align-items:center;
margin:0; padding:4px 9px; border-radius:2px;
font-family:var(--sans); font-size:10.5px; letter-spacing:.07em;
background:var(--c-lifestyle); color:#fff;
text-shadow:none;
}
.life__bottom{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;
margin-top:22px; padding-top:22px; border-top:1px solid var(--border-bottom);
}
.life-recipe-list{ display:flex; flex-direction:column; }
.life-recipe-list li{ border-bottom:1px solid var(--border-bottom); }
.life-recipe-list li:first-child{ border-top:1px solid var(--border-bottom); }
.life-recipe{
display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; align-items:center;
padding:14px 0; min-width:0;
}
.life-recipe__media{
position:relative; display:block; overflow:hidden; border-radius:var(--radius-s);
aspect-ratio:1; background:#eee;
}
.life-recipe__media img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.life-recipe:hover .life-recipe__media img{ transform:scale(1.06); }
.life-recipe__body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.life-recipe__body h4{
font-family:var(--sans); font-size:14px; line-height:1.3; font-weight:500; color:var(--ink);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
transition:color .18s;
}
.life-recipe:hover h4{ color:var(--ink-hover); }
/* =====================================================================
SPORT — photographic flat cards
===================================================================== */
.flat-card{
isolation:isolate;
background:#0A1A0A;
transform:translateZ(0);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.flat-card--alt{ background:#0A1A0A; }
.flat-card--alt2{ background:#0A1A0A; }
.flat-card__media{
position:absolute; inset:-1px; z-index:0; overflow:hidden;
border-radius:inherit;
}
.flat-card__media img{
display:block; width:100%; height:100%; object-fit:cover;
transform:translateZ(0) scale(1.02);
-webkit-backface-visibility:hidden; backface-visibility:hidden;
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.flat-card:hover .flat-card__media img{ transform:translateZ(0) scale(1.08); }
.flat-card::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(8,20,8,.12) 18%, rgba(8,20,8,.45) 58%, rgba(8,20,8,.82) 100%); }
.flat-card--alt::after{
background:linear-gradient(180deg, rgba(8,20,8,.12) 18%, rgba(8,20,8,.45) 58%, rgba(8,20,8,.82) 100%); }
.flat-card--alt2::after{
background:linear-gradient(180deg, rgba(8,20,8,.12) 18%, rgba(8,20,8,.45) 58%, rgba(8,20,8,.82) 100%); }
.flat-card__num{ z-index:2; color:rgba(255,255,255,.3); }
.flat-card h3, .flat-card .meta, .flat-card .tag{ z-index:2; position:relative; }
.flat-card:hover h3{ color:#fff; }
/* =====================================================================
RAIL TABS — "For you"
===================================================================== */
.tabs{ gap:16px; }
.tabs__btn--ai{ display:inline-flex; align-items:center; gap:5px; }
.tabs__btn--ai svg{ color:var(--red); flex:none; }
/* =====================================================================
FOOTER
===================================================================== */
.site-footer{ position:relative; overflow:hidden; padding:0; }
.footer-hero{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(28px,4vw,72px); align-items:start;
padding-top:clamp(46px,5vw,78px); padding-bottom:clamp(34px,3.6vw,52px); border-bottom:1px solid var(--line-dark); }
.footer-hero__logo{ height:35px; width:auto; margin-bottom:24px; }
.footer-hero__claim{ font-family:var(--display); color:#fff; font-size:clamp(25px,3.1vw,46px); line-height:1.1; font-weight:600; letter-spacing:-.022em; }
.footer-hero__claim em{ font-style:italic; color:var(--red); }
.footer-hero__label{ display:block; margin-bottom:15px; font-size:10.5px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:#6E6A61; }
.footer-hero__ctas{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-hero__note{ display:block; margin-top:16px; color:#57544D; font-size:12px; }
.tipline{ display:inline-flex; align-items:center; gap:9px; padding:11px 19px; border-radius:999px;
border:1px solid rgba(255,255,255,.18); color:#EDEAE2; font-size:14px; font-weight:500;
transition:background .2s, color .2s, border-color .2s, transform .2s; }
.tipline svg{ width:17px; height:17px; flex:none; }
.tipline--wa svg, .tipline--vb svg{ fill:currentColor; }
.tipline:hover{ transform:translateY(-2px); background:#fff; border-color:#fff; color:var(--ink); }
.tipline--wa:hover{ background:#25D366; border-color:#25D366; color:#04250F; }
.tipline--vb:hover{ background:#7360F2; border-color:#7360F2; color:#fff; }
.footer-grid{ padding-top:clamp(38px,4vw,54px); padding-bottom:clamp(34px,3.6vw,50px); border-bottom:none; }
.footer-brand p{ font-size:14px; line-height:1.65; }
.footer-brand__social{ gap:10px; flex-wrap:wrap; margin-top:22px; }
.site-footer .social-ico{ width:38px; height:38px; border-radius:999px; border:1px solid rgba(255,255,255,.16); color:#8B8B8B; }
.site-footer .social-ico svg{ width:16px; height:16px; }
.site-footer .social-ico:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-3px); }
.footer-col a{ width:max-content; max-width:100%; position:relative; }
.footer-col a::after{ content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1px; background:currentColor; transition:right .25s ease; }
.footer-col a:hover::after{ right:0; }
.footer-col__badge::after, .footer-print::after{ display:none; }
.footer-col__badge{ display:block; width:135px; }
.footer-col__badge img{ display:block; width:100%; height:40px; object-fit:fill; }
.footer-col--sections .footer-link--news:hover{ color:var(--c-news); }
.footer-col--sections .footer-link--national:hover{ color:var(--c-national); }
.footer-col--sections .footer-link--region:hover{ color:var(--c-region); }
.footer-col--sections .footer-link--world:hover{ color:var(--c-world); }
.footer-col--sections .footer-link--crime:hover{ color:#fff; }
.footer-col--sections .footer-link--sport:hover{ color:var(--c-sport); }
.footer-col--sections .footer-link--magazine:hover{ color:var(--c-magazine); }
.footer-col--sections .footer-link--business:hover{ color:var(--c-business); }
.footer-col--sections .footer-link--scitech:hover{ color:var(--c-scitech); }
.footer-col--sections .footer-link--lifestyle:hover{ color:var(--c-lifestyle-ink); }
.footer-col--sections .footer-link--health:hover{ color:var(--c-health-ink); }
.footer-col--sections .footer-link--parenting:hover{ color:var(--c-parenting-ink); }
.footer-print{ display:flex; align-items:center; gap:12px; margin-top:8px; padding:10px; border-radius:8px;
border:1px solid rgba(255,255,255,.12); transition:background .2s, border-color .2s; }
.footer-print img{ width:52px; height:52px; object-fit:cover; border-radius:var(--radius-s); flex:none; }
.footer-print span{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:#8B887F; font-weight:500; }
.footer-print b{ color:#fff; font-size:13px; font-weight:500; }
.footer-print:hover{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.3); }
.footer-mark{ position:relative; overflow:hidden; height:clamp(64px,10vw,158px); user-select:none; pointer-events:none; }
.footer-mark span{ position:absolute; left:50%; top:0; transform:translateX(-50%); white-space:nowrap;
font-family:var(--display); font-weight:500; font-size:clamp(120px,21vw,330px); line-height:.82; letter-spacing:.045em;
color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.14); }
.footer-bottom{ border-top:1px solid var(--line-dark); }
/* =====================================================================
RESPONSIVE — art direction layer
===================================================================== */
@media (max-width:1180px){
.vband__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 260px; }
}
@media (max-width:1080px){
.topic-row__inner{
flex-wrap:wrap;
row-gap:8px;
}
.edition-cluster{
display:flex;
order:-1;
flex:0 0 100%;
width:100%;
margin-left:0;
padding:0 0 8px;
border-left:0;
justify-content:flex-start;
gap:10px;
border-bottom:1px solid var(--border-bottom);
}
.edition{
display:flex;
flex:1;
min-width:0;
justify-content:space-between;
gap:10px;
}
.edition__date{
font-size:10.5px;
letter-spacing:.06em;
white-space:normal;
}
.topic-row__scroll{
flex:0 0 100%;
width:100%;
}
.vband__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.vaside{ grid-column:1 / -1; height:auto; min-height:0; }
.vrail{ height:auto; min-height:0; }
.vrail__item{ flex:none; min-height:0; }
.scitech-grid{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-areas:
"feat feat"
"a b"
"c d"
"e f";
}
.scitech-card--feat{ height:auto; }
.scitech-card--feat .scitech-card__media{
flex:none; height:auto; min-height:0; aspect-ratio:16/9;
}
.studio__grid{ grid-template-columns:minmax(0,1fr); }
.studio__side{ grid-template-rows:none; grid-template-columns:1fr 1fr; }
.studio__gallery{ min-height:230px; }
.showbiz__layout{ grid-template-columns:minmax(0,1fr); }
.showbiz__aside{ max-width:320px; }
.market__layout{ grid-template-columns:minmax(0,1fr); }
.market__aside{ max-width:320px; }
.life__layout{ grid-template-columns:minmax(0,1fr); }
.life__recipes{ max-width:420px; }
}
@media (max-width:860px){
.section{ padding-top:clamp(30px,5vw,44px); }
.showbiz{ padding-block:28px 36px; }
.life{ padding-block:28px 36px; }
.showbiz__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.showbiz__aside{ max-width:none; }
.market__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.market__aside{ max-width:none; }
.life__top{ grid-template-columns:minmax(0,1fr); }
.life__bottom{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.life__recipes{ max-width:none; }
.life-feat{
height:auto; min-height:0; aspect-ratio:16/10; align-self:stretch;
}
.studio__side{ grid-template-columns:minmax(0,1fr); }
.studio__gallery{ min-height:0; aspect-ratio:16/10; }
.footer-hero{ grid-template-columns:minmax(0,1fr); gap:34px; }
.footer-hero__claim{ max-width:100%; }
.footer-brand__social{ gap:9px; }
.footer-col:has(.footer-col__badge){
flex-flow:row wrap; align-items:center; gap:10px 12px;
}
.footer-col:has(.footer-col__badge) > h3,
.footer-col:has(.footer-col__badge) > .footer-print{
flex:1 1 100%;
}
.footer-col:has(.footer-col__badge) > .footer-col__badge{
flex:1 1 calc(50% - 6px); width:auto; max-width:none; min-width:0;
}
}
@media (max-width:760px){
.vband__grid{ grid-template-columns:minmax(0,1fr); gap:20px; }
.vrail{
height:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.vrail__item{
flex:none; min-height:auto;
display:flex; flex-direction:column; align-items:stretch;
grid-template-columns:none; gap:8px;
padding:0; border-top:none;
}
.vrail__item:first-child{ padding-top:0; }
.vrail__item:last-child{ padding-bottom:0; }
.vrail__thumb{ aspect-ratio:4/3; width:100%; background:var(--paper-2); }
.vrail__body h3{
font-size:13px; line-height:1.3;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vfeat{ gap:12px; }
.vfeat .cover-card__media{
aspect-ratio:16/10; min-height:0; background:var(--paper-2);
}
/* Most read: like desktop — ~5 visible, scroll for the rest */
.vaside__rank{
display:flex; flex-direction:column; flex-wrap:nowrap;
max-height:calc((12px * 2 + 11px * 1.2 + 5px + 14px * 1.32 * 2) * 5 - 12px);
overflow-y:auto; overflow-x:hidden; padding:0 2px 0 0;
scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.vaside__rank li{
flex:none; border-top:1px solid var(--border-bottom);
border-right:none; max-width:none; min-width:0;
}
.vaside__rank li:first-child{ border-top:none; }
.vaside__rank a{ padding:12px 0; }
.vaside__rank li:first-child a{ padding-top:0; }
.scitech-grid{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-areas:
"feat feat"
"a b"
"c d"
"e f";
gap:14px;
}
.scitech-card--feat{ height:auto; }
.scitech-card--feat .scitech-card__media{
flex:none; height:auto; min-height:0; aspect-ratio:16/10;
}
.scitech-card--feat h3{ font-size:17px; }
.scitech-card h3{ font-size:14px; }
.tv-slider__nav{ height:calc((100vw - 24px) * 9 / 16); }
.tv-slider__btn[data-tv="prev"]{ transform:translate(8px,-50%); }
.tv-slider__btn[data-tv="next"]{ transform:translate(-8px,-50%); }
.tv-slider__rail{ gap:0; }
.tv-card{ flex-basis:100%; max-width:none; }
.web-slider__nav{ height:calc(100cqi * 10 / 16); }
.web-slider__btn[data-web="prev"]{ transform:translate(8px,-50%); }
.web-slider__btn[data-web="next"]{ transform:translate(-8px,-50%); }
.web-slider__rail{ gap:0; }
.promo-card{ flex:0 0 100%; min-width:0; max-width:none; }
.promo-card__media::after{
background:linear-gradient(180deg, rgba(6,6,7,.28) 0%, rgba(6,6,7,.08) 36%, rgba(6,6,7,.82) 100%);
}
.promo-card__stamp{ top:8px; left:8px; }
.promo-card h3{ left:10px; right:10px; bottom:10px; font-size:15px; -webkit-line-clamp:2; }
.showbiz__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.showbiz-card__title{ font-size:14px; }
.showbiz-card--lead .showbiz-card__title{ font-size:16px; }
.market__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.market-card__title{ font-size:14px; -webkit-line-clamp:3; }
.life__tops,
.life__bottom{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
/* One continuous 2-col flow under the large feat — no orphan empty cell */
.life__main{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
}
.life__head{ grid-column:1 / -1; }
.life__top,
.life__tops,
.life__bottom{ display:contents; }
.life-feat{
grid-column:1 / -1; height:auto; min-height:0; aspect-ratio:16/10;
}
.life-feat__body h3{ font-size:18px; }
.short{ flex-basis:150px; }
.flat-card{ min-height:300px; }
.sport-grid__feature{ min-height:0; aspect-ratio:4/3; }
}
@media (max-width:480px){
.footer-mark{ height:56px; }
}
/* =====================================================================
ARTICLE PAGE — 3-col desktop, sticky rails, mobile collapse
===================================================================== */
.ad-wrap--article{ padding-block:16px 8px; }
.article-page{ padding-block:8px 48px; }
.article-layout{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:28px;
align-items:start;
margin-bottom:clamp(36px,5vw,64px);
}
.article-aside{ min-width:0; }
.article-main{
min-width:0; max-width:72ch;
background:var(--paper-2);
border:1px solid var(--border-bottom);
border-radius:var(--radius-s);
padding:clamp(20px,2.4vw,32px) clamp(18px,2.2vw,36px);
box-shadow:0 1px 2px rgba(11,11,12,.04), 0 4px 14px rgba(11,11,12,.035);
}
html[data-theme="dark"] .article-main{
box-shadow:0 1px 2px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.18);
}
.article-related{
grid-column:1 / -1;
background:var(--paper-2);
border:1px solid var(--border-bottom);
border-radius:var(--radius-s);
padding:clamp(18px,2vw,28px) clamp(16px,2vw,32px);
box-shadow:0 1px 2px rgba(11,11,12,.04), 0 4px 14px rgba(11,11,12,.035);
}
html[data-theme="dark"] .article-related{
box-shadow:0 1px 2px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.18);
}
/* ---- Author / stats card (right aside, above banner) ---- */
.article-aside__sticky{
display:flex; flex-direction:column; gap:22px;
}
.article-aside__sky{
display:flex; flex-direction:column; gap:22px;
margin-top:22px;
}
.article-aside__meta{
display:flex; flex-direction:column; gap:16px;
padding:18px 16px;
background:var(--paper-2);
border:1px solid var(--border-bottom);
border-radius:var(--radius-s);
box-shadow:0 1px 2px rgba(11,11,12,.04), 0 4px 14px rgba(11,11,12,.035);
}
html[data-theme="dark"] .article-aside__meta{
box-shadow:0 1px 2px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.18);
}
.article-author{ display:flex; align-items:center; gap:10px; }
.article-author__avatar{
width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none;
border:1px solid var(--border-bottom);
}
.article-author__by{
display:block; font-size:11px; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--muted);
}
.article-author__name{
display:block; font-family:var(--sans); font-size:14px; font-weight:700; color:var(--ink);
}
a.article-author__name:hover{ color:var(--red); }
.article-author__avatar-link{
flex:none; border-radius:50%; line-height:0;
}
.article-author__avatar-link:focus-visible{ outline-offset:4px; }
.article-author__time{
display:block; margin-top:3px; font-size:11.5px; font-weight:500; color:var(--muted); line-height:1.3;
}
.article-stats{
display:flex; gap:0; border:1px solid var(--border-bottom); border-radius:var(--radius-s); overflow:hidden;
}
.article-stat{
flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
padding:12px 8px; text-align:center; color:var(--ink);
}
.article-stat + .article-stat{ border-left:1px solid var(--border-bottom); }
.article-stat strong{ font-family:var(--display); font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.article-stat span{ font-size:10.5px; font-weight:600; color:var(--muted); letter-spacing:.02em; }
a.article-stat:hover strong{ color:var(--red); }
.article-share__btn{
width:40px; height:40px; display:grid; place-items:center;
border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper-2); color:var(--ink); transition:border-color .18s, color .18s, background .18s;
cursor:pointer; padding:0; font:inherit;
}
.article-share__btn svg{ width:16px; height:16px; }
.article-share__btn:hover{ color:var(--red); border-color:var(--red); }
/* ---- Sticky article title (under site header / nav) ---- */
.article-sticky{
position:fixed;
top:var(--article-sticky-top, 98px);
left:0; right:0; z-index:75;
background:var(--red);
border-bottom:1px solid rgba(0,0,0,.12);
box-shadow:0 4px 14px rgba(11,11,12,.18);
transform:translateY(calc(-100% - 8px));
transition:transform .28s cubic-bezier(.2,.7,.2,1), top .22s ease;
pointer-events:none;
color:#fff;
}
.article-sticky.is-visible{
transform:none; pointer-events:auto;
}
html:has(.site-header.is-away) .article-sticky{
top:0;
}
.article-sticky[hidden]{ display:block !important; }
.article-sticky__inner{
display:flex; align-items:center; gap:12px;
max-width:var(--shell-max); margin:0 auto;
padding:0 var(--gutter); height:52px; min-width:0;
}
.article-sticky__thumb{
flex:none;
width:40px; height:40px;
overflow:hidden;
background:rgba(0,0,0,.18);
}
.article-sticky__thumb img{
width:100%; height:100%;
object-fit:cover;
display:block;
}
.article-sticky__title{
flex:1; min-width:0; margin:0;
font-family:var(--sans); font-size:13.5px; font-weight:700; line-height:1.25;
color:#fff;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
line-clamp:2;
overflow:hidden;
}
.article-sticky__actions{
flex:none; gap:8px;
}
.article-sticky__actions .listen-chip{
border-color:rgba(255,255,255,.45);
background:rgba(255,255,255,.12);
color:#fff;
-webkit-backdrop-filter:none; backdrop-filter:none;
}
.article-sticky__actions .listen-chip:hover{
background:rgba(255,255,255,.22);
border-color:#fff; color:#fff;
}
.article-sticky__actions .article-share__btn{
width:34px; height:34px;
background:transparent;
border-color:rgba(255,255,255,.45);
color:#fff;
}
.article-sticky__actions .article-share__btn:hover{
border-color:#fff;
color:#fff;
background:rgba(255,255,255,.12);
}
html[data-theme="dark"] .article-sticky__actions .article-share__btn{
background:transparent;
color:#fff;
}
.article-sticky__comments{
flex:none; display:inline-flex; align-items:center; gap:6px;
padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.45);
color:#fff; font-size:12.5px; font-weight:700;
transition:border-color .18s, background .18s;
}
.article-sticky__comments:hover{
border-color:#fff;
background:rgba(255,255,255,.12);
}
.article-sticky__comments svg{ flex:none; }
.article-sticky__tools{
position:relative;
flex:none;
display:flex;
align-items:center;
gap:8px;
}
.article-sticky__more{
display:none;
flex:none; width:36px; height:36px; place-items:center;
border:0; background:transparent; color:#fff; cursor:pointer;
border-radius:var(--radius-s);
}
.article-sticky__more:hover,
.article-sticky__more[aria-expanded="true"]{ background:rgba(255,255,255,.12); }
.article-sticky__more-icon{ display:block; overflow:visible; }
.article-sticky__more .sticky-dot{
transform-box:fill-box;
transform-origin:center;
}
.article-sticky__more[aria-expanded="true"] .sticky-dot--1{
animation:sticky-dot-left 1.2s ease-in-out infinite;
}
.article-sticky__more[aria-expanded="true"] .sticky-dot--2{
animation:sticky-dot-right 1.2s .22s ease-in-out infinite;
}
.article-sticky__more[aria-expanded="true"] .sticky-dot--3{
animation:sticky-dot-left 1.2s .44s ease-in-out infinite;
}
@keyframes sticky-dot-left{
0%, 100%{ transform:translateX(0); }
40%{ transform:translateX(-4.5px); }
}
@keyframes sticky-dot-right{
0%, 100%{ transform:translateX(0); }
40%{ transform:translateX(4.5px); }
}
@media (prefers-reduced-motion:reduce){
.article-sticky__more[aria-expanded="true"] .sticky-dot{ animation:none !important; }
}
.article-sticky__panel{
display:flex;
align-items:center;
gap:8px;
}
@media (max-width:1080px){
.article-sticky__actions .listen-chip{ display:none; }
}
@media (max-width:860px){
.article-sticky{ top:var(--article-sticky-top, 60px); }
.article-sticky__inner{ gap:8px; height:52px; }
.article-sticky__thumb{ width:36px; height:36px; }
.article-sticky__title{ font-size:12.5px; line-height:1.22; }
.article-sticky__more{ display:grid; }
.article-sticky__tools{ position:static; }
.article-sticky__panel{
display:flex;
position:absolute;
left:var(--gutter);
right:var(--gutter);
top:calc(100% + 8px);
z-index:95;
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:8px;
width:auto;
min-width:0;
padding:10px 12px;
background:var(--paper-2);
border:1px solid var(--line);
border-radius:var(--radius-s);
box-shadow:0 16px 40px rgba(11,11,12,.18);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-8px);
transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.article-sticky__panel.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
.article-sticky__actions{
display:flex;
flex-direction:row;
align-items:center;
gap:6px;
flex:1;
min-width:0;
}
.article-sticky__actions .listen-chip{
display:inline-flex;
justify-content:center;
align-items:center;
gap:6px;
width:auto;
flex:none;
height:30px;
padding:0 6px 0 4px;
border:0;
border-radius:var(--radius-s);
background:transparent;
color:var(--ink);
font-size:12.5px;
font-weight:500;
white-space:nowrap;
}
.article-sticky__actions .listen-chip svg{
width:16px; height:16px; flex:none; color:var(--muted);
}
.article-sticky__actions .listen-chip:hover{
background:var(--paper);
border-color:transparent;
color:var(--ink);
}
.article-sticky__actions .listen-chip.is-playing{
border:0;
background:var(--paper);
color:var(--red);
}
.article-sticky__actions .listen-chip.is-playing svg{
color:var(--red);
}
.article-sticky__actions .article-share--bar{
display:flex;
flex-wrap:nowrap;
align-items:center;
justify-content:flex-start;
gap:5px;
padding:0;
margin:0;
border:0;
min-width:0;
}
.article-sticky__actions .article-share__btn{
width:30px; height:30px;
border:1.5px solid var(--ink);
border-radius:6px;
background:transparent;
color:var(--ink);
}
.article-sticky__actions .article-share__btn svg{
width:13px; height:13px;
}
.article-sticky__actions .article-share__btn:hover{
background:var(--paper);
border-color:var(--ink);
color:var(--ink);
}
.article-sticky__actions .article-share__btn.is-saved{
color:var(--red); border-color:var(--red);
}
.article-sticky__comments{
display:inline-flex;
justify-content:center;
align-items:center;
gap:5px;
width:auto;
flex:none;
height:30px;
margin:0;
padding:0 6px;
border:0;
border-radius:var(--radius-s);
background:transparent;
color:var(--ink);
font-size:12.5px;
font-weight:600;
}
.article-sticky__comments svg{ color:var(--muted); width:16px; height:16px; }
.article-sticky__comments:hover{
background:var(--paper);
border-color:transparent;
color:var(--ink);
}
.article-sticky__comments span{ display:inline; }
@media (max-width:400px){
.article-sticky__actions .listen-chip span{ display:none; }
.article-sticky__actions .listen-chip{ padding:0; width:30px; }
}
}
/* ---- Mid-article ad ---- */
.article-mid-ad{
display:flex; flex-direction:column; align-items:center; gap:16px;
margin:1.75em 0; padding:16px 12px;
border:1px solid var(--border-bottom);
background:var(--paper);
border-radius:var(--radius-s);
font-family:var(--sans);
}
.article-mid-ad__note{
margin:0;
font-family:var(--sans);
font-size:12px; font-weight:500; letter-spacing:0;
color:var(--muted); text-align:center;
line-height:1.3;
margin-bottom: 0px!important;
}
.article-mid-ad .ad-slot--rectangle{
margin:0 auto;
}
/* ---- Center column ---- */
.article-topbar{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:10px 16px; margin:0 0 14px;
padding:0 0 14px;
border-bottom:1px solid var(--border-bottom);
}
.article-crumb{
display:flex; flex-wrap:wrap; align-items:center; gap:8px;
margin:0; font-size:12px; font-weight:600; color:var(--muted); min-width:0;
}
.article-crumb a:hover{ color:var(--ink); }
.article-crumb .tag{
margin:0; padding:4px 10px; font-size:11px; line-height:1.2;
}
.article-live{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin:0 0 14px;
}
.article-live__badge{
display:inline-flex; align-items:center; justify-content:center;
padding:4px 8px; border-radius:2px;
background:var(--red); color:#fff;
font-family:var(--sans); font-size:11px; font-weight:800;
letter-spacing:.08em; text-transform:uppercase; line-height:1.2;
}
.article-live__text{
position:relative; display:inline-grid; align-items:center;
font-family:var(--sans); font-size:14px; font-weight:600;
color:var(--red); line-height:1.3; min-height:1.3em;
}
.article-live__abs,
.article-live__rel{
grid-area:1 / 1;
transition:opacity .35s ease, transform .35s ease;
}
.article-live__rel[hidden]{
display:block !important; opacity:0; visibility:hidden;
transform:translateY(4px); pointer-events:none;
}
.article-live.is-relative .article-live__abs{
opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none;
}
.article-live.is-relative .article-live__rel[hidden]{
opacity:1; visibility:visible; transform:none; pointer-events:auto;
}
/* ---- Live feed: pinned + posts ---- */
.live-feed{ margin:1.6em 0 2em; }
.live-pin{
padding:18px 18px 16px;
background:var(--paper);
border:1px solid var(--border-bottom);
border-radius:var(--radius-s);
}
.live-pin__label{
display:inline-flex; align-items:center; gap:6px;
margin:0 0 12px;
font-family:var(--sans); font-size:12.5px; font-weight:800;
letter-spacing:.02em; color:var(--ink);
}
.live-pin__label svg{ flex:none; color:var(--ink-2); }
.live-pin__meta,
.live-post__meta{
display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
margin:0 0 14px;
}
.live-pin__author,
.live-post__author{
display:flex; align-items:flex-start; gap:10px; min-width:0;
}
.live-pin__author img,
.live-post__author img{
width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none;
border:1px solid var(--border-bottom);
}
.live-pin__author p,
.live-post__author p{
margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;
font-family:var(--sans); font-size:14px; line-height:1.35; color:var(--muted);
}
.live-pin__author a,
.live-post__author a{
color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:2px;
}
.live-pin__author a:hover,
.live-post__author a:hover{ color:var(--red); }
.live-pin__author span,
.live-post__author span{ font-weight:500; }
.live-link-btn{
flex:none; width:34px; height:34px; display:grid; place-items:center;
border:1px solid var(--border-bottom); border-radius:50%;
background:var(--paper-2); color:var(--ink-2); cursor:pointer; padding:0;
transition:border-color .18s, color .18s, background .18s;
}
.live-link-btn:hover{ border-color:var(--red); color:var(--red); }
.live-pin__title{
margin:0 0 12px;
font-family:var(--serif); font-size:clamp(26px,3vw,34px);
font-weight:700; letter-spacing:-.02em; line-height:1.15; color:var(--ink);
}
.live-pin__body{ font-family:var(--serif); font-size:17px; line-height:1.55; color:var(--ink); }
.live-pin__body p{ margin:0 0 .9em; }
.live-pin__body p:last-child{ margin-bottom:0; }
.live-pin__more{
display:block; margin:16px auto 0; padding:9px 18px;
border:0; border-radius:4px; cursor:pointer;
background:rgba(11,11,12,.06); color:var(--ink);
font-family:var(--sans); font-size:14px; font-weight:700;
transition:background .18s;
}
.live-pin__more:hover{ background:rgba(11,11,12,.1); }
html[data-theme="dark"] .live-pin__more{ background:rgba(255,255,255,.08); }
html[data-theme="dark"] .live-pin__more:hover{ background:rgba(255,255,255,.12); }
.live-posts{
margin:0; padding:0; list-style:none;
border-top:1px solid var(--border-bottom);
}
.live-post{
padding:22px 0 4px;
border-bottom:1px solid var(--border-bottom);
}
.live-post:last-child{ border-bottom:0; }
.live-post__time{
display:block; margin:0 0 4px;
font-family:var(--sans); font-size:14px; font-weight:800;
color:var(--red); letter-spacing:-.01em;
}
.live-post__body{
margin:0 0 8px; padding-left:46px;
font-family:var(--serif); font-size:16.5px; line-height:1.55; color:var(--ink);
}
.live-post__body p{ margin:0 0 .75em; }
.live-post__body p:last-child{ margin-bottom:0; }
@media (max-width:600px){
.live-pin{ padding:14px 14px 12px; }
.live-post__body{ padding-left:0; }
.live-pin__author p,
.live-post__author p{ flex-direction:column; gap:2px; }
}
.article-title{
font-family:var(--display); font-size:clamp(28px,3.4vw,44px);
font-weight:800; line-height:1.08; letter-spacing:-.03em; color:var(--ink);
margin:0 0 14px;
}
.article-dek{
font-size:clamp(16px,1.35vw,19px); line-height:1.45; color:var(--ink-2);
font-weight:500; margin:0 0 18px; max-width:none; width:100%;
}
.article-byline-mobile{ display:none; }
.article-meta-bar__actions{
display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
.article-share--bar{ display:flex; align-items:center; gap:8px; }
.article-share--bar .article-share__btn{ width:36px; height:36px; }
.article-share__btn.is-saved{
color:var(--red); border-color:var(--red);
}
.article-share__btn.is-saved svg path{ fill:currentColor; stroke:currentColor; }
.article-head .listen-chip{
border-color:var(--border-bottom); background:var(--paper); color:var(--ink);
-webkit-backdrop-filter:none; backdrop-filter:none;
}
.article-head .listen-chip:hover{ border-color:var(--red); color:var(--red); }
.article-hero{
position:relative; margin:0 0 28px;
border-radius:var(--radius-s); overflow:hidden;
}
.article-hero__zoom{
display:block; width:100%; padding:0; border:0; margin:0;
background:transparent; cursor:zoom-in; position:relative; line-height:0;
overflow:hidden;
}
.article-hero img{
width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
border-radius:0; background:var(--paper-2); display:block;
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.article-hero__zoom:hover img,
.article-hero__zoom:focus-visible img{ transform:scale(1.04); }
.article-hero figcaption{
position:absolute; left:0; right:0; bottom:0; z-index:2;
margin:0; padding:48px 52px 14px 16px;
font-size:12.5px; line-height:1.4; font-weight:500;
color:#fff;
background:linear-gradient(to top, rgba(11,11,12,.78) 0%, rgba(11,11,12,.35) 55%, transparent 100%);
pointer-events:none;
}
.article-hero__expand{
position:absolute; right:12px; bottom:10px; z-index:3;
width:36px; height:36px; display:grid; place-items:center;
border-radius:50%;
background:rgba(11,11,12,.55); color:#fff;
pointer-events:none;
transition:opacity .2s ease, background .2s ease, transform .2s ease;
}
.article-hero__zoom:hover .article-hero__expand,
.article-hero__zoom:focus-visible .article-hero__expand{
background:rgba(11,11,12,.78); transform:scale(1.05);
}
@media (hover:hover) and (pointer:fine){
.article-hero__expand{ opacity:0; }
.article-hero:hover .article-hero__expand,
.article-hero:focus-within .article-hero__expand{ opacity:1; }
}
@media (hover:none), (pointer:coarse){
.article-hero__expand{ opacity:.92; }
}
/* Photo lightbox */
.photo-lightbox{
position:fixed; inset:0; z-index:240;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
padding:0;
background:#000;
overflow:hidden;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .22s ease, visibility .22s;
}
.photo-lightbox.is-open{
opacity:1; visibility:visible; pointer-events:auto;
}
.photo-lightbox__toolbar{
position:absolute;
top:max(10px, env(safe-area-inset-top));
right:max(10px, env(safe-area-inset-right));
z-index:3;
display:flex; align-items:center; gap:2px;
}
.photo-lightbox__tool{
width:40px; height:40px; display:grid; place-items:center;
border:0; border-radius:8px; cursor:pointer;
background:transparent; color:#fff;
transition:background .18s;
}
.photo-lightbox__tool:hover,
.photo-lightbox__tool[aria-pressed="true"]{ background:rgba(255,255,255,.14); }
.photo-lightbox__stage{
position:relative;
flex:1; width:100%; min-height:0;
display:grid; place-items:center;
padding:56px 20px 64px;
overflow:hidden;
cursor:zoom-in;
}
.photo-lightbox.is-zoomed .photo-lightbox__stage{ cursor:zoom-out; }
.photo-lightbox__img{
max-width:min(1100px, 94vw);
max-height:min(82vh, 860px);
width:auto; height:auto;
object-fit:contain;
display:block;
background:transparent;
transform:scale(1);
transform-origin:center center;
transition:transform .45s cubic-bezier(.2,.7,.2,1);
will-change:transform;
user-select:none;
-webkit-user-drag:none;
}
.photo-lightbox.is-closing .photo-lightbox__img{
transition:none;
}
.photo-lightbox.is-zoomed .photo-lightbox__img{
transform:scale(1.85);
}
.photo-lightbox__caption{
position:absolute;
left:16px; right:16px;
bottom:max(14px, env(safe-area-inset-bottom));
z-index:2;
margin:0; text-align:center;
font-family:var(--sans);
font-size:13px; line-height:1.4; font-weight:500;
color:rgba(255,255,255,.82);
pointer-events:none;
transition:opacity .25s ease;
}
.photo-lightbox.is-zoomed .photo-lightbox__caption{ opacity:.55; }
.photo-lightbox__nav{
position:absolute; top:46%; z-index:3; transform:translateY(-50%);
width:44px; height:44px; display:grid; place-items:center;
border:0; border-radius:50%; cursor:pointer;
background:rgba(255,255,255,.12); color:#fff;
transition:background .18s;
}
.photo-lightbox__nav:hover{ background:rgba(255,255,255,.22); }
.photo-lightbox__nav--prev{ left:max(12px, env(safe-area-inset-left)); }
.photo-lightbox__nav--next{ right:max(12px, env(safe-area-inset-right)); }
.photo-lightbox__thumbs{
position:absolute;
left:0; right:0;
bottom:max(42px, calc(env(safe-area-inset-bottom) + 34px));
z-index:3;
display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
padding:0 16px;
}
.photo-lightbox__thumb{
width:78px; height:48px; padding:0;
border:2px solid transparent; border-radius:6px;
overflow:hidden; cursor:pointer;
background:#1a1a1a; opacity:.7;
transition:opacity .18s, border-color .18s;
}
.photo-lightbox__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-lightbox__thumb:hover,
.photo-lightbox__thumb.is-active{ opacity:1; border-color:#fff; }
.photo-lightbox.has-set .photo-lightbox__stage{ padding:56px 72px 138px; }
.photo-lightbox.has-set .photo-lightbox__img{ max-height:min(68vh, 760px); }
.photo-lightbox.has-set .photo-lightbox__caption{
bottom:max(10px, env(safe-area-inset-bottom));
}
@media (max-width:860px){
.photo-lightbox__stage{ padding:52px 12px 58px; }
.photo-lightbox__img{ max-height:min(76vh, 720px); }
.photo-lightbox.is-zoomed .photo-lightbox__img{ transform:scale(2.1); }
.photo-lightbox__caption{ font-size:12px; }
.photo-lightbox__nav{ width:38px; height:38px; }
.photo-lightbox__thumb{ width:58px; height:38px; }
.photo-lightbox.has-set .photo-lightbox__stage{ padding:52px 48px 120px; }
.photo-lightbox.has-set .photo-lightbox__img{ max-height:min(58vh, 620px); }
}
.article-content{
font-family:var(--serif); font-size:clamp(17px,1.15vw,19px);
line-height:1.7; color:var(--ink);
}
.article-content p{ margin:0 0 1.15em; }
.article-lead{ font-size:1.08em; font-weight:600; }
.article-content blockquote{
margin:1.6em 0; padding:4px 0 4px 18px; border-left:3px solid var(--red);
}
.article-content blockquote p{ margin:0 0 .4em; font-style:italic; font-size:1.05em; }
.article-content blockquote cite{
display:block; font-family:var(--sans); font-style:normal;
font-size:13px; font-weight:600; color:var(--muted);
}
.article-inline-related-wrap{ margin:1.6em 0; }
.article-inline-related__label{
margin:0 0 8px;
font-family:var(--sans); font-size:12px; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.article-inline-related{
margin:0; border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper-2); overflow:hidden;
}
.article-inline-related a{
display:grid; grid-template-columns:110px minmax(0,1fr); gap:14px; align-items:center;
}
.article-inline-related__media{ display:block; aspect-ratio:1; overflow:hidden; background:var(--paper); }
.article-inline-related__media img{
width:100%; height:100%; object-fit:cover;
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.article-inline-related a:hover .article-inline-related__media img{ transform:scale(1.06); }
.article-inline-related__txt{ display:flex; flex-direction:column; gap:5px; padding:12px 14px 12px 0; min-width:0; }
.article-inline-related__txt .kicker{
padding:4px 9px; border-radius:2px;
font-family:var(--sans); font-weight:800;
font-size:10.5px; letter-spacing:.07em;
color:#fff;
}
/* White on the category color in every design style (styles recolor .kicker as plain text). */
.article-inline-related .article-inline-related__txt .kicker{ color:#fff; }
.article-inline-related__txt .kicker--news{ background:var(--c-news); }
.article-inline-related__txt .kicker--national{ background:var(--c-national); }
.article-inline-related__txt .kicker--region{ background:var(--c-region); }
.article-inline-related__txt .kicker--world{ background:var(--c-world); }
.article-inline-related__txt .kicker--crime{ background:var(--c-crime); }
.article-inline-related__txt .kicker--sport{ background:var(--c-sport); }
.article-inline-related__txt .kicker--magazine{ background:var(--c-magazine); }
.article-inline-related__txt .kicker--showbiz{ background:var(--c-showbiz); }
.article-inline-related__txt .kicker--business{ background:var(--c-business); }
.article-inline-related__txt .kicker--scitech{ background:var(--c-scitech); }
.article-inline-related__txt .kicker--lifestyle{ background:var(--c-lifestyle); }
.article-inline-related__txt .kicker--health{ background:var(--c-health); }
.article-inline-related__txt .kicker--parenting{ background:var(--c-parenting); }
.article-inline-related__txt b{
font-family:var(--display); font-size:15px; font-weight:700; line-height:1.25; letter-spacing:-.015em;
}
.article-inline-related__dek{
font-family:var(--sans); font-size:13px; font-weight:500; line-height:1.4;
color:var(--muted);
}
.article-inline-related a:hover b{ color:var(--red); }
.article-tags{
display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 16px; padding-top:8px;
}
.article-tags a{
padding:7px 12px; border:1px solid var(--border-bottom); border-radius:999px;
font-size:12.5px; font-weight:700; color:var(--ink-2); background:var(--paper-2);
transition:border-color .18s, color .18s;
}
.article-tags a:hover{ border-color:var(--red); color:var(--red); }
.google-pref{
display:flex; align-items:center; justify-content:center;
gap:10px;
margin:28px 0 32px;
padding:16px 20px;
border:1px solid var(--border-bottom);
border-radius:999px;
background:var(--paper-2);
color:var(--ink);
font-family:var(--sans);
font-size:14.5px;
font-weight:500;
line-height:1.35;
text-align:center;
transition:border-color .18s, background .18s, color .18s;
}
.google-pref img{
width:22px; height:22px; flex:none;
}
.google-pref:hover{
border-color:var(--ink);
color:var(--ink);
}
.google-pref:focus-visible{
outline:2px solid var(--red);
outline-offset:3px;
}
/* ---- Readers say (AI summary) ---- */
.readers-say{ margin:0 0 24px; }
.readers-say__title{
display:flex; align-items:center; gap:7px;
font-family:var(--display); font-size:18px; font-weight:700;
letter-spacing:-.015em; margin:0 0 12px;
}
.readers-say__title svg{ flex:none; color:var(--red); }
.readers-say__card{
padding:18px 18px 16px; border:1px solid var(--border-bottom);
border-radius:var(--radius-s); background:var(--paper-2);
}
.readers-say__summary{
font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:0 0 10px;
}
.readers-say__more{
display:inline; padding:0; border:0; background:none;
color:var(--red); font:inherit; font-weight:700; cursor:pointer;
}
.readers-say__note{
margin:0 0 14px; font-size:12px; line-height:1.4; color:var(--muted);
}
.readers-say__cta{
display:inline-flex; align-items:center; gap:6px;
font-size:13px; font-weight:800; color:var(--red);
}
.readers-say__cta:hover{ text-decoration:underline; }
.article-comments-cta{ margin:0; max-width:360px; }
.article-comments{
grid-column:1 / -1;
display:flex; flex-direction:column; gap:18px;
max-width:72ch;
background:var(--paper-2);
border:1px solid var(--border-bottom);
border-radius:var(--radius-s);
padding:clamp(18px,2vw,28px) clamp(16px,2vw,32px);
box-shadow:0 1px 2px rgba(11,11,12,.04), 0 4px 14px rgba(11,11,12,.035);
}
html[data-theme="dark"] .article-comments{
box-shadow:0 1px 2px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.18);
}
.article-comments__head{ display:flex; align-items:baseline; gap:10px; }
.article-comments__title{
font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:-.015em; margin:0;
}
.article-comments__title span{ color:var(--muted); font-weight:600; }
.article-comments__compose{
display:flex; flex-direction:column; gap:10px;
padding:14px; border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper);
}
.article-comments__compose textarea{
width:100%; min-height:84px; resize:vertical; border:1px solid var(--border-bottom);
border-radius:var(--radius-s); padding:12px 14px; font:inherit; font-size:14.5px;
line-height:1.45; color:var(--ink); background:var(--paper); outline:none;
}
.article-comments__compose textarea:focus{ border-color:var(--ink-3); }
.article-comments__compose-foot{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
}
.article-comments__hint{ font-size:12px; color:var(--muted); }
.article-comments__list{ display:flex; flex-direction:column; gap:0; }
.article-comment{
display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px;
padding:16px 0; border-top:1px solid var(--border-bottom);
}
.article-comment:first-child{ border-top:none; padding-top:4px; }
.article-comment__avatar{
width:40px; height:40px; border-radius:50%; object-fit:cover;
}
.article-comment__meta{
display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:6px;
}
.article-comment__meta b{ font-size:14px; font-weight:700; color:var(--ink); }
.article-comment__meta time{ font-size:12px; color:var(--muted); }
.article-comment__body p{
margin:0 0 8px; font-size:14.5px; line-height:1.5; color:var(--ink-2);
}
.article-comment__reply{
padding:0; border:0; background:none; color:var(--muted);
font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}
.article-comment__reply:hover{ color:var(--red); }
.article-comments .article-comments-cta{ max-width:none; margin-top:4px; }
.article-aside__title{
margin:0 0 12px; font-family:var(--display); font-size:16px;
font-weight:700; letter-spacing:-.01em;
}
.article-aside__block{ min-width:0; }
.article-aside .ad-unit{ display:flex; justify-content:center; }
.article-aside .ad-slot--rectangle{ width:100%; max-width:300px; }
.article-ad--sky{
width:100%; max-width:300px; height:auto; aspect-ratio:300/600;
overflow:hidden; border-radius:0;
}
.article-ad--sky img{ width:100%; height:100%; object-fit:cover; }
.article-rank{ display:flex; flex-direction:column; }
.article-rank li{ border-top:1px solid var(--border-bottom); }
.article-rank li:first-child{ border-top:none; }
.article-rank a{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:start; padding:10px 0; }
.article-rank__num{
font-family:var(--display); font-size:20px; font-weight:800;
letter-spacing:-.03em; color:var(--muted-light); line-height:1.1;
}
.article-rank__txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.article-rank__txt b{
font-family:var(--sans); font-size:14px; font-weight:500; line-height:1.35; color:var(--ink);
}
.article-rank a:hover .article-rank__txt b{ color: var(--ink-hover); }
.article-rank a:hover .article-rank__num{ color: var(--ink-hover); }
.foryou-card{
display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px;
align-items:center; padding:10px 0; border-top:1px solid var(--border-bottom);
}
.foryou-card:first-of-type{ border-top:none; padding-top:0; }
.foryou-card__media{
display:block; aspect-ratio:1; border-radius:var(--radius-s); overflow:hidden; background:var(--paper);
}
.foryou-card__media img{
width:100%; height:100%; object-fit:cover;
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.foryou-card:hover .foryou-card__media img{ transform:scale(1.06); }
.foryou-card__body{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.foryou-card__label{
display:inline-flex; align-items:center; gap:4px;
font-size:10.5px; font-weight:800; letter-spacing:.06em;
text-transform:uppercase; color:var(--c-magazine);
}
.foryou-card__body b{
font-family:var(--sans); font-size:14px; font-weight:700; line-height:1.35; color:var(--ink);
}
.foryou-card:hover b{ color:var(--red); }
.tip-card--aside{
width:100%; max-width:300px; margin:0; align-self:center;
}
/* ---- Related ---- */
.article-related__skel,
.skel-grid--4{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px;
}
.article-related__skel .skel-card--lead,
.skel-grid--4 .skel-card--lead{ grid-column:span 2; }
@media (max-width:1080px){
.article-related__skel,
.skel-grid--4{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.article-related__skel .skel-card--lead,
.skel-grid--4 .skel-card--lead{ grid-column:1 / -1; }
}
@media (max-width:760px){
.article-related__skel,
.skel-grid--4{ gap:12px; }
}
.article-related__grid{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
}
.article-related__card{ display:flex; flex-direction:column; gap:8px; min-width:0; position:relative; }
.article-related__media{
display:block; position:relative; aspect-ratio:16/10; border-radius:var(--radius-s);
overflow:hidden; background:var(--paper-2);
}
.article-related__media img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.article-related__card:hover .article-related__media img{ transform:scale(1.06); }
.article-related__media .kicker{
position:absolute; z-index:2; left:10px; top:10px; bottom:auto;
margin:0; padding:4px 9px; border-radius:2px;
font-family:var(--sans); font-weight:800; font-size:10.5px; letter-spacing:.07em;
color:#fff;
text-shadow:none;
-webkit-backdrop-filter:none; backdrop-filter:none;
}
.article-related__media .kicker--news{ background:var(--c-news); }
.article-related__media .kicker--national{ background:var(--c-national); }
.article-related__media .kicker--region{ background:var(--c-region); }
.article-related__media .kicker--world{ background:var(--c-world); }
.article-related__media .kicker--crime{ background:var(--c-crime); }
.article-related__media .kicker--sport{ background:var(--c-sport); }
.article-related__media .kicker--magazine{ background:var(--c-magazine); }
.article-related__media .kicker--showbiz{ background:var(--c-showbiz); }
.article-related__media .kicker--business{ background:var(--c-business); }
.article-related__media .kicker--scitech{ background:var(--c-scitech); }
.article-related__media .kicker--lifestyle{ background:var(--c-lifestyle); color:#3A2402; }
.article-related__media .kicker--parenting{ background:var(--c-parenting); color:#06313F; }
.article-related__card h3{
font-family:var(--display); font-size:14px; font-weight:500;
line-height:1.25; letter-spacing:-.015em;
color:var(--ink);
}
.article-related__card:hover h3{ color:var(--ink); }
.article-related__card--next{ outline:none; }
/* ---- Updated line ---- */
.article-updated{
display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
margin:10px 0 0; font-size:12.5px; font-weight:600; color:var(--muted);
}
.article-updated__label{
color:var(--red); font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:11px;
}
.article-updated a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }
.article-updated a:hover{ color:var(--red); }
.article-updated--aside{ margin-top:6px; font-size:11.5px; }
.article-author-link{ color:inherit; }
.article-author-link:hover b{ color:var(--red); }
/* ---- Body modules: factbox, embed, table, timeline, gallery ---- */
.article-module__title{
margin:0 0 12px;
font-family:var(--sans); font-size:13px; font-weight:800;
letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.article-factbox{
position:relative;
margin:.75em 0;
padding:0;
background:transparent;
border-radius:0;
}
.article-factbox__title{
margin:0 0 8px;
font-family:var(--serif);
font-size:clamp(17px,1.15vw,19px);
font-weight:800;
letter-spacing:.05em;
color:var(--ink);
line-height:1.3;
}
.article-factbox__list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.article-factbox__list li{
position:relative; padding-left:14px;
font-family:var(--serif);
font-size:clamp(17px,1.15vw,19px);
font-weight:inherit;
line-height:1.7;
color:inherit;
}
.article-factbox__list li::before{
content:""; position:absolute; left:0; top:.55em;
width:5px; height:5px; border-radius:50%; background:var(--red);
}
.article-content p:has(+ .article-factbox),
.feature-content p:has(+ .article-factbox){ margin-bottom:.55em; }
.article-content .article-factbox,
.feature-content .article-factbox{ margin:.55em 0 .9em; }
@media (max-width:860px){
.article-factbox{ margin:.55em 0 .8em; padding:0; }
.article-factbox__title{ margin-bottom:7px; }
.article-factbox__list{ gap:5px; }
.article-factbox__list li{ padding-left:13px; }
}
.article-embed{ margin:1.6em 0; }
.article-embed__frame{
position:relative; aspect-ratio:16/9; border-radius:var(--radius-s);
overflow:hidden; background:var(--ink);
}
.article-embed__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.article-embed__facade{
position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
aspect-ratio:16/9; border-radius:var(--radius-s); overflow:hidden; background:var(--ink);
}
.article-embed__facade img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .35s ease, filter .35s ease;
}
.article-embed__facade:hover img{ transform:scale(1.03); filter:brightness(.85); }
.article-embed__play{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:64px; height:64px; display:grid; place-items:center;
border-radius:50%; background:var(--red); color:#fff;
box-shadow:0 8px 24px rgba(11,11,12,.35);
transition:transform .2s ease, background .2s ease;
}
.article-embed__facade:hover .article-embed__play{ transform:translate(-50%,-50%) scale(1.06); background:var(--red-deep); }
.article-embed figcaption{
margin-top:8px; font-size:12.5px; color:var(--muted); line-height:1.4;
}
.article-embed figcaption a{ color:var(--red); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.article-table-wrap{
margin:1.6em 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper-2);
}
.article-table-wrap .article-module__title{ padding:14px 16px 0; }
.article-table{
width:100%; border-collapse:collapse; font-size:14px;
}
.article-table th,
.article-table td{
padding:11px 14px; text-align:left; border-top:1px solid var(--border-bottom);
vertical-align:top;
}
.article-table thead th{
border-top:0; font-size:11.5px; font-weight:800;
letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
background:var(--paper-2);
}
.article-table tbody tr:hover td{ background:rgba(237,28,36,.04); }
.article-timeline{ margin:1.8em 0; }
.article-timeline__list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0; }
.article-timeline__list li{
display:grid; grid-template-columns:56px minmax(0,1fr); gap:14px;
position:relative; padding:0 0 18px 0;
}
.article-timeline__list li:last-child{ padding-bottom:0; }
.article-timeline__list li::before{
content:""; position:absolute; left:56px; top:8px; bottom:-2px;
width:1px; background:var(--border-bottom);
}
.article-timeline__list li:last-child::before{ display:none; }
.article-timeline__list time{
font-size:12px; font-weight:800; color:var(--red); letter-spacing:.02em; padding-top:2px;
}
.article-timeline__list b{
display:block; font-size:14.5px; font-weight:700; margin-bottom:3px; color:var(--ink);
}
.article-timeline__list p{ margin:0; font-size:14px; line-height:1.45; color:var(--ink-2); }
.article-gallery{ margin:1.8em 0; }
.article-gallery__head{
display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px;
}
.article-gallery__head .article-module__title{ margin:0; }
.article-gallery__count{ margin:0; font-size:12.5px; font-weight:700; color:var(--muted); }
.article-gallery__stage{ position:relative; }
.article-gallery__track{
position:relative; aspect-ratio:16/10; border-radius:var(--radius-s);
overflow:hidden; background:var(--paper);
}
.article-gallery__slide{
position:absolute; inset:0; margin:0; opacity:0; visibility:hidden;
cursor:zoom-in;
transition:opacity .28s ease, visibility .28s;
}
.article-gallery__slide.is-active{ opacity:1; visibility:visible; position:relative; }
.article-gallery__slide img{
width:100%; height:100%; object-fit:cover; aspect-ratio:16/10;
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.article-gallery__track:hover .article-gallery__slide.is-active img{ transform:scale(1.05); }
.article-gallery__thumbs img{
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.article-gallery__thumbs button:hover img{ transform:scale(1.06); }
.article-gallery__slide figcaption{
position:absolute; left:0; right:0; bottom:0; margin:0;
padding:28px 52px 12px 14px; font-size:12.5px; color:#fff; line-height:1.35;
background:linear-gradient(transparent, rgba(11,11,12,.72));
pointer-events:none;
}
.article-gallery__expand{
position:absolute; right:12px; bottom:10px; z-index:3;
width:36px; height:36px; display:grid; place-items:center;
padding:0; border:0; cursor:zoom-in;
border-radius:50%;
background:rgba(11,11,12,.55); color:#fff;
transition:opacity .2s ease, background .2s ease, transform .2s ease;
}
.article-gallery__expand:hover,
.article-gallery__expand:focus-visible{
background:rgba(11,11,12,.78); transform:scale(1.05);
}
@media (hover:hover) and (pointer:fine){
.article-gallery__expand{ opacity:0; }
.article-gallery__track:hover .article-gallery__expand,
.article-gallery__track:focus-within .article-gallery__expand{ opacity:1; }
}
@media (hover:none), (pointer:coarse){
.article-gallery__expand{ opacity:.92; }
}
.article-gallery__nav{
position:absolute; top:50%; z-index:2; transform:translateY(-50%);
width:40px; height:40px; display:grid; place-items:center;
border:0; border-radius:50%; background:rgba(11,11,12,.55); color:#fff; cursor:pointer;
transition:background .18s;
}
.article-gallery__nav:hover{ background:rgba(11,11,12,.78); }
.article-gallery__nav--prev{ left:10px; }
.article-gallery__nav--next{ right:10px; }
.article-gallery__thumbs{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:10px;
}
.article-gallery__thumbs button{
padding:0; border:2px solid transparent; border-radius:var(--radius-s);
overflow:hidden; aspect-ratio:16/10; background:var(--paper); cursor:pointer;
opacity:.7; transition:opacity .18s, border-color .18s;
}
.article-gallery__thumbs button.is-active,
.article-gallery__thumbs button:hover{ opacity:1; border-color:var(--red); }
.article-gallery__thumbs img{ width:100%; height:100%; object-fit:cover; }
/* ---- Trust / corrections ---- */
.article-trust{
margin:8px 0 28px; padding:18px 18px 16px;
border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper);
}
.article-trust__row{
display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
margin-bottom:14px;
}
.article-trust__title{
margin:0; font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:-.015em;
}
.article-trust__how{
font-size:12.5px; font-weight:700; color:var(--red); text-decoration:underline; text-underline-offset:2px;
}
.article-trust__meta{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
margin:0 0 14px;
}
.article-trust__meta dt{
font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.article-trust__meta dd{ margin:3px 0 0; font-size:14px; font-weight:600; color:var(--ink); }
.article-trust__meta a:hover{ color:var(--red); }
.article-trust__details{
margin:0 0 14px; border-top:1px solid var(--border-bottom); padding-top:12px;
}
.article-trust__details summary{
cursor:pointer; font-size:14px; font-weight:700; color:var(--ink);
list-style:none;
}
.article-trust__details summary::-webkit-details-marker{ display:none; }
.article-trust__details summary::before{
content:"+ "; color:var(--red); font-weight:800;
}
.article-trust__details[open] summary::before{ content:"− "; }
.article-trust__details ul{ margin:10px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.article-trust__details li{ font-size:13px; line-height:1.45; color:var(--ink-2); }
.article-trust__details time{ font-weight:800; color:var(--ink); }
.article-trust__sources h3{
margin:0 0 8px; font-family:var(--sans); font-size:12px; font-weight:800;
letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
}
.article-trust__sources ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; }
.article-trust__sources li{ font-size:14px; color:var(--ink-2); padding-left:12px; position:relative; }
.article-trust__sources li::before{ content:"·"; position:absolute; left:0; color:var(--red); font-weight:800; }
.article-trust__note{ margin:14px 0 0; font-size:12.5px; color:var(--muted); }
.article-trust__note a{ color:var(--red); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
/* ---- Next story (phone continuation) ---- */
.article-next{
padding-block:clamp(28px,4vw,48px);
border-top:1px solid var(--border-bottom);
}
.article-next__eyebrow{
margin:0 0 12px; font-size:12px; font-weight:800;
letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.article-next__card{
display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; align-items:center;
padding:16px; border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper-2);
transition:border-color .18s;
}
.article-next__card:hover{ border-color:var(--red); }
.article-next__media{
display:block; aspect-ratio:16/10; border-radius:var(--radius-s); overflow:hidden; background:var(--paper);
}
.article-next__media img{
width:100%; height:100%; object-fit:cover;
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.article-next__card:hover .article-next__media img{ transform:scale(1.05); }
.article-next__body{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.article-next__body h2{
font-family:var(--display); font-size:clamp(18px,2.4vw,24px); font-weight:700;
letter-spacing:-.02em; line-height:1.2; margin:0;
}
.article-next__card:hover h2{ color:var(--red); }
.article-next__body p{ margin:0; font-size:14.5px; line-height:1.45; color:var(--ink-2); }
.article-next__cta{
margin-top:4px; font-size:13px; font-weight:800; color:var(--red);
}
/* ---- Infinite article stream ---- */
.article-stream{
display:flex; flex-direction:column; gap:0;
padding-bottom:clamp(28px,4vw,56px);
}
.article-stream__sentinel{
height:1px; width:100%; margin:0; padding:0; pointer-events:none;
}
.stream-ad{
width:100%;
display:block;
padding-block:clamp(28px,4vw,48px);
border-top:1px solid var(--border-bottom);
border-bottom:1px solid var(--border-bottom);
background:var(--paper);
margin-block:0;
box-sizing:border-box;
}
.stream-ad__inner{
display:flex; flex-direction:column; align-items:center; gap:10px;
}
.stream-ad__label{
margin:0; font-size:10.5px; font-weight:700; letter-spacing:.12em;
text-transform:uppercase; color:var(--muted);
}
.stream-ad__slot{
width:100%; max-width:970px; margin-inline:auto;
display:flex; justify-content:center;
}
.stream-ad__slot img,
.stream-ad__slot picture{
width:100%; max-width:970px; height:auto; display:block;
}
.article-continue-wrap{
padding-block:clamp(28px,4vw,48px);
}
.article-continue-row{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:14px;
width:100%;
max-width:var(--shell-max);
margin-inline:auto;
padding-block:clamp(18px,2.5vw,28px);
padding-inline:var(--gutter);
box-sizing:border-box;
align-items:stretch;
}
.article-continue-card{
min-width:0;
display:flex;
flex-direction:column;
gap:10px;
padding:12px;
background:var(--paper-2);
border:1px solid var(--border-bottom);
border-radius:var(--radius-s);
box-shadow:0 1px 2px rgba(11,11,12,.04), 0 4px 14px rgba(11,11,12,.035);
transition:border-color .18s, box-shadow .18s;
}
.article-continue-card__media{
display:block;
aspect-ratio:16/10;
border-radius:calc(var(--radius-s) - 2px);
overflow:hidden;
background:var(--paper);
}
.article-continue-card__media img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.article-continue-card:hover .article-continue-card__media img{ transform:scale(1.06); }
.article-continue-card__body{
display:flex; flex-direction:column; gap:8px; flex:1; min-width:0;
padding:2px 2px 4px;
}
.article-continue-card__top{
display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
}
.article-continue-card .article-continue__eyebrow{
margin:0; font-size:11px; font-weight:800;
letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.article-continue-card__title{
margin:0;
font-family:var(--display);
font-size:clamp(16px,1.25vw,19px);
font-weight:700;
line-height:1.22;
letter-spacing:-.018em;
}
.article-continue-card__title a{
color:inherit; text-decoration:none;
}
.article-continue-card__title a:hover{ color:var(--red); }
.article-continue-card__dek{
margin:0;
font-family:var(--sans);
font-size:14px;
font-weight:500;
line-height:1.4;
color:var(--muted);
display:-webkit-box;
-webkit-line-clamp:2;
line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
}
.article-continue-card__meta{
margin:0;
display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px;
font-size:12.5px; color:var(--muted); font-weight:500;
}
.article-continue-card__meta b{ color:var(--ink); font-weight:700; }
.article-continue-card__meta a:hover b{ color:var(--red); }
.article-continue-card .btn{
align-self:flex-start;
margin-top:auto;
}
.article-continue{
max-width:none; width:100%;
margin:0;
}
.article-continue .article-continue__eyebrow{
margin:0 0 12px; font-size:11.5px; font-weight:800;
letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.article-continue .article-title{
margin:0 0 14px;
}
.article-continue .article-title a{
color:inherit; text-decoration:none;
}
.article-continue .article-title a:hover{ color:var(--red); }
.article-continue .article-byline-mobile{
display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px;
margin:0 0 16px; font-size:13px; color:var(--muted); font-weight:500;
}
.article-continue .article-byline-mobile b{ color:var(--ink); font-weight:700; font-size:14px; }
.article-continue .article-byline-mobile a:hover b{ color:var(--red); }
.article-continue__more{
display:flex; justify-content:center; margin:28px 0 8px;
}
.article-continue__more .btn{ min-width:min(100%, 280px); }
.article-continue .article-hero figcaption{
/* reuse overlay caption from main hero */
}
.article-stream__end{
text-align:center; padding:28px var(--gutter); font-size:14px;
font-weight:700; color:var(--muted);
}
.article-stream__status{
text-align:center; padding:18px var(--gutter) 8px; margin:0;
font-size:13px; font-weight:700; color:var(--muted);
}
.article-stream.is-loading .article-stream__sentinel{
min-height:48px;
}
@media (max-width:860px){
.article-continue-row{ grid-template-columns:1fr; }
}
/* ---- Toast ---- */
.site-toast{
position:fixed; left:50%; bottom:28px; z-index:200;
transform:translateX(-50%) translateY(12px);
padding:12px 18px; border-radius:999px;
background:var(--ink); color:#fff;
font-size:14px; font-weight:700; letter-spacing:.01em;
text-align:center;
box-shadow:0 10px 28px rgba(11,11,12,.28);
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.site-toast.is-visible{
opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.listen-chip.is-playing{ border-color:var(--red); color:var(--red); }
@media (min-width:861px){
.article-sticky__actions .listen-chip.is-playing{
border-color:#fff; background:rgba(255,255,255,.22); color:#fff;
}
}
@media (max-width:860px){
.article-trust__meta{ grid-template-columns:1fr; gap:10px; }
.article-next__card{ grid-template-columns:1fr; gap:14px; padding:12px; }
.article-gallery__nav{ width:36px; height:36px; }
}
@media (min-width:861px){
.article-next{ max-width:720px; margin-inline:auto; }
}
/* ---- Desktop 2-col (≥1080): wide main + right aside ---- */
@media (min-width:1080px){
.article-layout{
grid-template-columns:minmax(0,1fr) 300px;
grid-template-rows:auto auto auto;
gap:36px 28px;
}
.article-head .article-updated{ display:none; }
.article-main{ grid-column:1; grid-row:1; max-width:none; }
.article-aside{
grid-column:2; grid-row:1;
align-self:stretch;
display:flex; flex-direction:column;
}
.article-aside__sticky{ position:static; }
.article-aside__sky{
position:sticky;
top:112px;
z-index:2;
}
body.article-sticky-on .article-aside__sky{
top:calc(112px + 52px);
}
.article-comments{ grid-column:1; grid-row:2; max-width:none; }
.article-related{ grid-column:1 / -1; grid-row:3; }
}
/* ---- Mid / tablet: main + aside ---- */
@media (min-width:861px) and (max-width:1079px){
.article-layout{
grid-template-columns:minmax(0,1fr) 260px;
grid-template-rows:auto auto auto;
gap:28px 24px;
}
.article-main{ grid-column:1; grid-row:1; max-width:none; }
.article-aside{
grid-column:2; grid-row:1;
align-self:stretch;
display:flex; flex-direction:column;
}
.article-aside__sticky{ position:static; }
.article-aside__sky{
position:sticky;
top:112px;
z-index:2;
}
body.article-sticky-on .article-aside__sky{
top:calc(112px + 52px);
}
.article-comments{ grid-column:1; grid-row:2; max-width:none; }
.article-related{ grid-column:1 / -1; grid-row:3; }
}
/* ---- Mobile (≤860) ---- */
@media (max-width:860px){
.article-page{ padding-block:0 72px; }
.ad-wrap--article{
padding-block:12px 10px;
padding-inline:0;
}
.article-page > .article-layout.shell{
padding-inline:0;
}
.article-layout{ gap:14px; }
.article-main{ max-width:none; }
.article-byline-mobile{
display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px;
margin:0 0 16px; font-size:13px; color:var(--muted); font-weight:500;
}
.article-byline-mobile b{ color:var(--ink); font-weight:700; font-size:14px; }
.article-main{
padding:20px 16px 26px;
border-radius:12px 12px 0 0;
border-left:none;
border-right:none;
}
.article-hero{ margin-inline:-16px; border-radius:0; }
.article-hero img{ border-radius:0; aspect-ratio:16/10; }
.article-hero figcaption{ padding:40px 48px 12px 16px; }
.article-inline-related a{
grid-template-columns:108px minmax(0,1fr);
gap:12px;
align-items:stretch;
}
.article-inline-related__media{
aspect-ratio:auto;
height:100%;
min-height:100%;
}
.article-inline-related__txt b{ font-size:14px; }
.article-aside__sticky{ gap:20px; }
.article-aside__meta{ display:none; }
.article-aside{
padding-inline:16px;
}
.article-ad--sky{
width:min(300px, 100%);
max-width:300px;
height:auto;
aspect-ratio:300 / 600;
margin-inline:auto;
}
.article-aside .ad-slot--skyscraper.article-ad--sky{
width:min(300px, 100%);
max-width:300px;
height:auto;
aspect-ratio:300 / 600;
}
.tip-card--aside{ max-width:none; align-self:stretch; }
.article-related__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.article-related__card h3{ font-size:14px; }
.article-comments,
.article-related,
.article-trust{
max-width:none;
border-radius:0;
border-left:none;
border-right:none;
padding-inline:16px;
}
.google-pref{
padding:14px 16px;
font-size:13.5px;
}
.article-comments-cta{ max-width:none; }
}
@media (max-width:480px){
.article-related__grid{ grid-template-columns:1fr; }
.article-title{ font-size:clamp(24px,7vw,30px); }
}
html[data-theme="dark"] .article-share__btn,
html[data-theme="dark"] .readers-say__card,
html[data-theme="dark"] .article-inline-related,
html[data-theme="dark"] .article-tags a,
html[data-theme="dark"] .google-pref,
html[data-theme="dark"] .article-head .listen-chip,
html[data-theme="dark"] .article-comments__compose{
background:var(--paper-2);
}
html[data-theme="dark"] .article-stats{
background:var(--paper);
}
@media (prefers-reduced-motion:reduce){
*, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
.article-sticky{ transition:none; }
.article-gallery__slide{ transition:none; }
.breaking__track{ animation:none; }
.site-toast,
.rec-pop{ transition:none; }
.site-header{ transition:none; }
.article-live__abs, .article-live__rel{ transition:none; }
}
html[data-theme="dark"] .article-table-wrap,
html[data-theme="dark"] .article-trust,
html[data-theme="dark"] .article-next__card,
html[data-theme="dark"] .live-pin{
background:var(--paper-2);
}
html[data-theme="dark"] .article-table thead th{ background:var(--paper); }
/* =====================================================================
FEATURE ARTICLE — dark intro + large hero (WaPo-style)
===================================================================== */
.feature-page{
position:relative;
padding-block:0 48px;
/* Hero width + height used so dark band stops ~2/3 down the image */
--feature-hero-w: min(1100px, calc(100vw - 2 * var(--gutter)));
--feature-hero-h: calc(var(--feature-hero-w) * 9 / 16);
--feature-dark-under: calc(var(--feature-hero-h) * 0.62);
}
.feature-masthead{
position:relative;
overflow:hidden;
background:#121212;
/* Dark continues only under the top ~62% of the hero (red-line cut) */
padding-bottom:var(--feature-dark-under);
}
/* Same pattern as .studio__glow — soft grey light on the dark masthead */
.feature-page__glow{
position:absolute;
top:-240px;
left:-180px;
width:820px;
height:680px;
border-radius:50%;
pointer-events:none;
z-index:0;
background:radial-gradient(closest-side, rgba(210,210,220,.32), rgba(210,210,220,0) 72%);
}
.feature-page__glow--br{
top:auto;
left:auto;
right:-240px;
bottom:-280px;
width:980px;
height:820px;
background:radial-gradient(closest-side, rgba(190,190,200,.26), rgba(190,190,200,0) 74%);
}
.feature-masthead > *:not(.feature-page__glow){
position:relative;
z-index:1;
}
.feature-hero{
position:relative;
z-index:2;
margin:0 auto;
/* Pull hero up into the dark band; bottom ~38% sits on paper */
margin-top:calc(-1 * var(--feature-dark-under));
max-width:var(--feature-hero-w);
border-radius:0;
overflow:visible;
background:transparent;
}
.feature-masthead__ad{
width:100%;
border-bottom:1px solid rgba(255,255,255,.14);
}
.ad-wrap--feature{
padding-block:16px;
}
.feature-intro{
background:transparent;
color:#fff;
padding:clamp(36px,5.5vw,72px) 0 clamp(28px,4vw,48px);
text-align:center;
}
.feature-intro__inner{
max-width:720px;
margin-inline:auto;
}
.feature-intro__rubric{
margin:0 0 18px;
display:flex;
justify-content:center;
align-items:center;
gap:8px;
}
.feature-intro__rubric .tag,
.feature-intro__rubric .premium-mark{
display:inline-flex; align-items:center;
margin:0; padding:5px 12px;
font-size:12px; font-weight:800; letter-spacing:.07em; line-height:1;
vertical-align:middle;
}
.feature-intro__rubric .premium-mark{ border:1px solid var(--white); }
.feature-intro__rubric .tag a{
color:inherit;
text-decoration:none;
}
.feature-intro__title{
margin:0 0 18px;
font-family:var(--serif);
font-size:clamp(28px,4.2vw,48px);
font-weight:700;
line-height:1.12;
letter-spacing:-.02em;
color:#fff;
text-wrap:balance;
}
.feature-intro__dek{
margin:0 auto 28px;
max-width:38em;
font-family:var(--serif);
font-size:clamp(16px,1.35vw,20px);
font-weight:400;
line-height:1.45;
color:rgba(255,255,255,.78);
text-wrap:pretty;
}
.feature-intro__meta{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:14px 22px;
font-family:var(--sans);
font-size:13px;
font-weight:500;
color:rgba(255,255,255,.55);
}
.feature-intro__meta time{ letter-spacing:.01em; }
.feature-intro__actions .listen-chip{
border-color:rgba(255,255,255,.4);
background:rgba(255,255,255,.1);
color:#fff;
}
.feature-intro__actions .listen-chip:hover{
background:rgba(255,255,255,.2);
border-color:#fff;
color:#fff;
}
.feature-intro__actions .listen-chip.is-playing{
border-color:var(--red);
color:#fff;
background:rgba(237,28,36,.25);
}
.feature-intro .article-share__btn{
width:36px; height:36px;
border:1px solid rgba(255,255,255,.35);
background:rgba(255,255,255,.08);
color:#fff;
}
.feature-intro .article-share__btn:hover{
border-color:#fff;
background:rgba(255,255,255,.18);
color:#fff;
}
.feature-intro__comments{
border-color:rgba(255,255,255,.45);
background:rgba(255,255,255,.08);
color:#fff;
height:36px;
padding:0 12px;
}
.feature-intro__comments svg{ color:#fff; }
.feature-intro__comments:hover{
border-color:#fff;
background:rgba(255,255,255,.18);
color:#fff;
}
.feature-hero__zoom{
display:block; width:100%; padding:0; border:0; margin:0;
background:transparent; cursor:zoom-in; position:relative; line-height:0;
overflow:hidden;
}
.feature-hero img{
width:100%; height:auto;
aspect-ratio:16/9;
object-fit:cover;
display:block;
background:#1a1a1a;
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.feature-hero__zoom:hover img,
.feature-hero__zoom:focus-visible img{ transform:scale(1.04); }
.feature-hero figcaption{
position:static;
margin:10px 0 0;
padding:0;
font-family:var(--sans);
font-size:12.5px; line-height:1.4; font-weight:500;
color:var(--muted);
background:none;
pointer-events:auto;
}
.feature-hero:not(.feature-hero--inline) figcaption{
position:absolute;
left:0; right:0;
bottom:0;
z-index:2;
margin:0;
padding:48px 52px 14px 16px;
color:#fff;
background:linear-gradient(to top, rgba(11,11,12,.78) 0%, rgba(11,11,12,.35) 55%, transparent 100%);
pointer-events:none;
}
.feature-hero__expand{
position:absolute; right:12px; bottom:10px; z-index:3;
width:36px; height:36px; display:grid; place-items:center;
border-radius:50%;
background:rgba(11,11,12,.55); color:#fff;
pointer-events:none;
transition:opacity .2s ease, background .2s ease, transform .2s ease;
}
.feature-hero__zoom:hover .feature-hero__expand,
.feature-hero__zoom:focus-visible .feature-hero__expand{
background:rgba(11,11,12,.78); transform:scale(1.05);
}
@media (hover:hover) and (pointer:fine){
.feature-hero__expand{ opacity:0; }
.feature-hero:hover .feature-hero__expand,
.feature-hero:focus-within .feature-hero__expand{ opacity:1; }
}
@media (hover:none), (pointer:coarse){
.feature-hero__expand{ opacity:.92; }
}
.feature-layout{
padding-top:clamp(36px,5vw,56px);
max-width:720px;
}
.feature-body{ min-width:0; }
.feature-byline{
display:flex; align-items:center; gap:14px;
margin:0 0 28px;
padding-bottom:22px;
border-bottom:1px solid var(--border-bottom);
}
.feature-byline__avatar{
flex:none; width:48px; height:48px; border-radius:50%; overflow:hidden;
background:var(--paper);
}
.feature-byline__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.feature-byline__name{
display:block;
font-family:var(--sans); font-size:15px; font-weight:700;
color:var(--ink); text-decoration:none;
}
.feature-byline__name:hover{ color:var(--red); }
.feature-byline__role{
margin:3px 0 0;
font-family:var(--sans); font-size:13px; font-weight:500;
color:var(--muted); line-height:1.35;
}
.feature-content{
font-family:var(--serif);
font-size:clamp(18.5px,1.35vw,21px);
line-height:1.72;
color:var(--ink);
}
.feature-content > p,
.feature-content .premium-locked p{ margin:0 0 1.15em; }
.feature-lead{
font-size:1.12em;
font-weight:600;
line-height:1.55;
}
.feature-content > h2,
.feature-content .premium-locked h2{
margin:1.6em 0 .65em;
font-family:var(--serif);
font-size:clamp(24px,2.15vw,28px);
font-weight:700;
line-height:1.25;
letter-spacing:-.015em;
}
.feature-hero--inline{
margin-top:1.75em;
margin-bottom:1.75em;
width:var(--feature-hero-w);
max-width:calc(100vw - 2 * var(--gutter));
margin-inline:calc(50% - min(var(--feature-hero-w), calc(100vw - 2 * var(--gutter))) / 2);
}
.feature-related{
margin-top:clamp(36px,5vw,56px);
}
/* ---- Premium paywall (feature demo) ---- */
.premium-gate{
position:relative;
z-index:4;
margin:0;
}
.premium-wall{
position:fixed; left:0; right:0; bottom:0;
z-index:190; width:100%;
padding:18px var(--gutter) max(16px, env(safe-area-inset-bottom));
background:var(--paper-2);
border:0;
border-top:1px solid var(--border-bottom);
border-radius:0;
box-shadow:0 -12px 32px rgba(11,11,12,.14);
font-family:var(--sans);
font-size:14px;
font-weight:400;
line-height:1.4;
letter-spacing:0;
color:var(--ink);
transform:translateY(110%);
visibility:hidden;
pointer-events:none;
transition:transform .45s cubic-bezier(.2,.7,.2,1), visibility .45s;
}
.premium-wall.is-open{
transform:translateY(0);
visibility:visible;
pointer-events:auto;
}
.premium-wall__inner{
position:relative;
width:min(420px, 100%);
margin:0 auto;
}
.premium-wall__stage{ display:grid; }
.premium-wall__panel{
grid-area:1 / 1;
visibility:hidden;
pointer-events:none;
}
.premium-wall__panel.is-active{
visibility:visible;
pointer-events:auto;
}
.premium-wall__close{
position:absolute; top:8px; right:8px;
width:32px; height:32px; display:grid; place-items:center;
border:0; border-radius:var(--radius-s); background:transparent;
color:var(--muted); cursor:pointer;
}
.premium-wall__close:hover{ color:var(--ink); background:var(--paper); }
.premium-wall__brand{
display:flex; align-items:center; gap:8px;
margin:0 0 10px;
}
.premium-wall__logo{
display:block;
height:22px; width:auto;
}
.premium-wall .premium-mark{ margin:0; }
.premium-wall h1.premium-wall__title,
.premium-wall h2.premium-wall__title{
margin:0 0 4px;
font-family:var(--display); font-size:20px; font-weight:800;
letter-spacing:-.02em; line-height:1.2; color:var(--ink);
}
.premium-wall p.premium-wall__dek{
margin:0 0 14px;
font-family:var(--sans); font-size:13px; font-weight:500;
line-height:1.4; color:var(--muted);
}
.premium-stepper{
display:grid; grid-template-columns:repeat(3,1fr);
margin:0 0 16px; padding:0; list-style:none;
position:relative;
}
.premium-stepper::before{
content:""; position:absolute; left:16%; right:16%; top:11px;
height:2px; background:var(--line); z-index:0;
}
.premium-stepper li{
position:relative; z-index:1;
display:flex; flex-direction:column; align-items:center; gap:6px;
font-family:var(--sans); font-size:11px; font-weight:700;
color:var(--muted); text-align:center;
}
.premium-stepper li span{
width:22px; height:22px; display:grid; place-items:center;
border-radius:50%; background:var(--paper-2);
border:2px solid var(--line); color:var(--muted);
font-size:11px;
}
.premium-stepper li.is-active{ color:var(--ink); }
.premium-stepper li.is-active span{
border-color:var(--red); background:var(--red); color:#fff;
}
.premium-stepper li.is-done{ color:var(--gold-2); }
.premium-stepper li.is-done span{
border-color:var(--gold-2);
background:linear-gradient(135deg,var(--gold-1),var(--gold-2));
color:#fff;
}
.premium-plans{ display:flex; flex-direction:column; gap:8px; margin:0 0 10px; }
.premium-plan{
display:flex; align-items:center; gap:10px;
padding:10px 12px;
border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper); cursor:pointer;
}
.premium-plan input{ accent-color:var(--red); margin:0; }
.premium-plan.is-selected{
border-color:var(--red);
background:var(--paper-2);
box-shadow:inset 0 0 0 1px var(--red);
}
.premium-plan__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.premium-plan__txt b{ font-size:13.5px; font-weight:700; color:var(--ink); }
.premium-plan__txt small{ font-size:12px; font-weight:500; color:var(--muted); }
.premium-plan__price{
font-family:var(--display); font-size:16px; font-weight:800;
letter-spacing:-.02em; color:var(--ink); white-space:nowrap;
}
.premium-plan__price em{ font-style:normal; font-size:11px; font-weight:600; color:var(--muted); }
.premium-terms{ display:flex; gap:8px; margin:0 0 12px; }
.premium-term{
flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
padding:7px 8px; border:1px solid var(--border-bottom); border-radius:999px;
background:var(--paper-2); font-size:12px; font-weight:700; cursor:pointer;
}
.premium-term input{ accent-color:var(--red); margin:0; }
.premium-term.is-selected{ border-color:var(--ink); }
.premium-term[hidden]{ display:none; }
.premium-term span{ color:var(--red); font-size:11px; }
.premium-wall .btn{ padding:11px 18px; font-size:13.5px; }
.premium-wall p.premium-wall__login,
.premium-wall p.premium-wall__done{
margin:10px 0 0; text-align:center;
font-size:12.5px; font-weight:500; color:var(--muted);
}
.premium-wall__login a{ color:var(--red); font-weight:700; }
.premium-wall p.premium-wall__note{
margin:8px 0 0; text-align:center;
font-size:12px; font-weight:500; line-height:1.35; color:var(--muted);
}
.premium-wall__note a{ color:var(--red); font-weight:700; }
.premium-wall p.premium-pay__sum{
margin:0 0 10px;
font-size:13px; font-weight:500; color:var(--muted);
}
.premium-pay__sum b{ color:var(--ink); font-weight:800; }
.premium-pay-methods{ display:flex; gap:8px; margin:0 0 10px; }
.premium-pay-method{
flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
padding:8px 8px; border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper); font-size:12.5px; font-weight:700; cursor:pointer;
}
.premium-pay-method input{ accent-color:var(--red); margin:0; }
.premium-pay-method.is-selected{
border-color:var(--red);
background:var(--paper-2);
box-shadow:inset 0 0 0 1px var(--red);
}
.premium-field{ display:flex; flex-direction:column; gap:5px; margin:0 0 10px; }
.premium-field span{ font-size:12px; font-weight:700; color:var(--ink); }
.premium-field input{
width:100%; padding:10px 12px;
border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper); color:var(--ink); font:inherit; font-size:14px;
}
.premium-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.premium-field input:focus{ outline:2px solid var(--red); outline-offset:1px; }
.premium-wall__back{
display:block; width:100%; margin-top:8px;
border:0; background:transparent; cursor:pointer;
font-size:12.5px; font-weight:700; color:var(--muted);
}
.premium-wall__back:hover{ color:var(--ink); }
.premium-locked{
position:relative;
max-height:220px;
overflow:hidden;
pointer-events:none;
user-select:none;
}
.premium-locked::after{
content:""; position:absolute; inset:auto 0 0; height:160px;
background:linear-gradient(180deg, rgba(245,241,234,0), var(--paper) 78%);
pointer-events:none;
}
html[data-theme="dark"] .premium-locked::after{
background:linear-gradient(180deg, rgba(11,11,12,0), var(--paper) 78%);
}
html.premium-revealed .premium-locked{
max-height:none; overflow:visible; pointer-events:auto; user-select:auto;
}
html.premium-revealed .premium-locked::after{ display:none; }
html.premium-revealed .premium-gate{ display:none; }
.premium-auth{
display:block;
min-height:0;
padding:0;
background:var(--paper);
}
.premium-offer{
position:relative;
overflow:hidden;
padding:48px 0 40px;
background:#0B0B0C;
border-bottom:1px solid rgba(255,255,255,.08);
isolation:isolate;
}
.premium-offer__fx{
position:absolute; inset:0;
width:100%; height:100%;
display:block; z-index:0;
touch-action:none;
pointer-events:auto;
}
.premium-offer__body{
position:relative; z-index:1;
pointer-events:none;
user-select:none;
}
.premium-offer__intro{
max-width:760px; margin-inline:auto; padding-bottom:32px; text-align:center;
}
.premium-offer__dek{ margin-inline:auto; }
.premium-offer__kicker{
display:flex; align-items:center; justify-content:center; gap:12px;
margin:0 0 18px;
font-family:var(--sans); font-size:18px; font-weight:800;
letter-spacing:.06em; text-transform:uppercase; color:#fff;
}
.premium-offer__kicker .premium-mark{
margin:0; padding:6px 10px; border-radius:3px;
font-size:14px; font-weight:700; letter-spacing:.12em; vertical-align:middle;
}
.premium-offer h1{
margin:0 0 12px;
font-family:var(--display); font-weight:800;
font-size:clamp(32px, 4.4vw, 56px);
line-height:1.05; letter-spacing:-.035em; color:#fff;
text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.premium-offer__dek{
margin:0;
font-size:clamp(16px, 1.4vw, 19px);
line-height:1.45; font-weight:500; color:rgba(255,255,255,.72); max-width:62ch;
}
.premium-usps{
display:grid;
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:16px;
padding-bottom:8px;
}
.premium-usp{
padding:20px 18px 18px;
background:rgba(255,255,255,.1);
border:0;
border-radius:var(--radius-s);
backdrop-filter:blur(14px) saturate(1.2);
-webkit-backdrop-filter:blur(14px) saturate(1.2);
pointer-events:auto;
}
html[data-theme="dark"] .premium-usp{
background:rgba(255,255,255,.08);
}
.premium-usp__ico{
width:40px; height:40px; margin:0;
display:grid; place-items:center;
flex:none;
border-radius:10px;
background:rgba(255,255,255,.12);
color:#fff;
border:0;
}
html[data-theme="dark"] .premium-usp__ico{
background:rgba(255,255,255,.1); color:#fff;
}
.premium-usp__head{
display:flex; align-items:center; gap:12px;
margin:0 0 10px;
}
.premium-usp h2{
margin:0;
font-family:var(--sans); font-size:15px; font-weight:800;
letter-spacing:-.01em; color:#fff;
line-height:1.25;
}
.premium-usp p{
margin:0;
font-size:13.5px; font-weight:500; line-height:1.4; color:rgba(255,255,255,.72);
}
@media (prefers-reduced-motion: reduce){
.premium-offer__fx{ display:none; }
.premium-offer__body{ pointer-events:auto; user-select:auto; }
}
.premium-join{
padding:48px 0 72px;
background:var(--paper-2);
}
.premium-join__grid{
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(320px, 420px);
gap:48px;
align-items:start;
}
.premium-join__offer h2{
margin:0 0 8px;
font-family:var(--display); font-size:clamp(26px, 3vw, 36px);
font-weight:800; letter-spacing:-.03em; line-height:1.15; color:var(--ink);
}
.premium-join__dek{
margin:0 0 22px;
font-size:16px; font-weight:500; line-height:1.45; color:var(--muted); max-width:46ch;
}
.premium-prices{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:12px;
margin:0 0 16px;
}
.premium-price{
position:relative;
display:flex; flex-direction:column; gap:4px;
padding:18px 18px 16px;
border:1px solid var(--border-bottom);
border-radius:var(--radius-s);
background:var(--paper);
cursor:pointer;
}
.premium-price input{ position:absolute; opacity:0; pointer-events:none; }
.premium-price.is-selected{
border-color:var(--red);
background:var(--paper-2);
box-shadow:inset 0 0 0 1px var(--red);
}
.premium-price__badge{
position:absolute; top:12px; right:12px;
padding:2px 7px; border-radius:999px;
background:var(--red); color:#fff;
font-size:11px; font-weight:800; letter-spacing:.02em;
}
.premium-price__label{
font-size:13px; font-weight:700; color:var(--muted);
}
.premium-price__sum{
font-family:var(--display); font-size:28px; font-weight:800;
letter-spacing:-.03em; line-height:1.1; color:var(--ink);
}
.premium-price__sum em{
font-style:normal; font-family:var(--sans);
font-size:13px; font-weight:700; color:var(--muted);
}
.premium-price__sub{
margin-top:4px;
font-size:13px; font-weight:500; color:var(--muted);
}
.premium-wall--page{
position:sticky; top:88px; inset:auto; z-index:1;
transform:none; visibility:visible; pointer-events:auto;
width:100%;
padding:28px 24px 24px;
border:1px solid var(--border-bottom);
border-radius:12px;
box-shadow:0 28px 80px rgba(11,11,12,.12);
transition:none;
}
.premium-wall--page .premium-wall__inner{ width:100%; }
.premium-wall--page .premium-wall__title[hidden],
.premium-wall--page .premium-wall__dek[hidden]{
display:none !important;
}
.premium-wall--page .premium-wall__dek{
margin:0 0 14px;
}
.premium-auth__stack{
display:grid;
align-items:start;
}
.premium-auth__stack > *{ grid-area:1 / 1; }
.premium-auth__stack > [hidden]{
display:block !important;
visibility:hidden;
pointer-events:none;
}
.premium-auth__form{ margin:0; }
.premium-auth__note{
margin:16px 0 0;
text-align:left;
font-size:13px; font-weight:500; line-height:1.4; color:var(--muted);
}
.premium-auth__note a{ color:var(--red); font-weight:700; }
.premium-wall a.premium-wall__back{
display:block; width:100%; margin-top:10px; text-align:center;
text-decoration:none;
}
.premium-term{ appearance:none; -webkit-appearance:none; font-family:inherit; color:inherit; }
@media (max-width:1200px){
.premium-usps{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:1080px){
.premium-usps{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:860px){
.premium-wall{ padding:16px 16px max(14px, env(safe-area-inset-bottom)); }
.premium-wall h1.premium-wall__title,
.premium-wall h2.premium-wall__title{ font-size:18px; }
.premium-offer{ padding:28px 0 24px; }
.premium-usps{ grid-template-columns:1fr; gap:10px; }
.premium-join{ padding:28px 0 88px; }
.premium-join__grid{ grid-template-columns:1fr; gap:28px; }
.premium-prices{ grid-template-columns:1fr; }
.premium-wall--page{ position:relative; top:auto; padding:22px 16px 18px; }
.premium-field-row{ grid-template-columns:1fr; }
.premium-field input{ font-size:16px; min-height:48px; }
.premium-offer h1{ font-size:clamp(26px,7vw,34px); }
}
.feature-page .article-comments{
margin-top:clamp(28px,4vw,44px);
}
.feature-page .article-comments[hidden]{ display:none !important; }
html.premium-revealed .feature-page .article-comments[hidden]{ display:flex !important; }
@media (max-width:860px){
.feature-page{
padding-block:0 72px;
--feature-hero-w:100vw;
--feature-hero-h:calc(var(--feature-hero-w) * 10 / 16);
--feature-dark-under:calc(var(--feature-hero-h) * 0.62);
}
.feature-intro{ padding:28px 0 20px; text-align:left; }
.feature-intro__inner{ max-width:none; }
.feature-intro__rubric{ justify-content:flex-start; }
.feature-intro__meta{ justify-content:flex-start; }
.feature-intro .article-sticky__comments.feature-intro__comments{
border:1px solid rgba(255,255,255,.45);
background:rgba(255,255,255,.08);
color:#fff;
height:36px;
padding:0 12px;
}
.feature-intro .article-sticky__comments.feature-intro__comments svg{ color:#fff; }
.feature-intro .article-sticky__comments.feature-intro__comments:hover{
border-color:#fff;
background:rgba(255,255,255,.18);
color:#fff;
}
.feature-hero{
max-width:none;
margin-inline:0;
border-radius:0;
}
.feature-hero--inline{
width:100vw;
max-width:100vw;
margin-inline:calc(50% - 50vw);
}
.feature-hero img{ aspect-ratio:16/10; }
.feature-hero:not(.feature-hero--inline) figcaption{ padding:40px 48px 12px 14px; }
.feature-hero--inline figcaption{ margin-top:8px; padding-inline:var(--gutter); }
.feature-layout{ max-width:none; padding-top:28px; }
}
html[data-theme="dark"] .feature-masthead{
background:#0B0B0C;
}
html[data-theme="dark"] .feature-page__glow{
background:radial-gradient(closest-side, rgba(230,230,240,.28), rgba(230,230,240,0) 72%);
}
html[data-theme="dark"] .feature-page__glow--br{
background:radial-gradient(closest-side, rgba(210,210,220,.22), rgba(210,210,220,0) 74%);
}
/* =====================================================================
CONTACT — landing (header/footer shared; body is new)
===================================================================== */
.contact-page{ padding-bottom:64px; }
.contact-page [id]{ scroll-margin-top:96px; }
@media (max-width:860px){
.contact-page [id]{ scroll-margin-top:64px; }
}
.contact-hero{
position:relative; overflow:hidden;
background:#0B0B0C;
color:#F2EFE8;
padding:clamp(48px,7vw,88px) 0 72px;
}
.contact-hero__bg{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover; object-position:center 22%;
opacity:.58;
pointer-events:none; user-select:none;
}
.contact-hero::after{
content:"";
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(11,11,12,.12) 0%, rgba(11,11,12,.42) 55%, #0B0B0C 100%);
pointer-events:none;
}
.contact-hero__inner{
position:relative; z-index:1;
display:grid; grid-template-columns:minmax(0,1.4fr) minmax(240px,.7fr);
gap:clamp(28px,5vw,64px); align-items:end;
}
.contact-hero__kicker,
.contact-hero__card-kicker{
margin:0 0 14px;
font-family:var(--sans); font-size:12px; font-weight:700;
letter-spacing:.16em; text-transform:uppercase; color:#E7A8A8;
}
.contact-hero h1{
margin:0 0 16px;
font-family:var(--display); font-weight:800;
font-size:clamp(34px,5.4vw,62px);
line-height:1.02; letter-spacing:-.035em;
}
.contact-hero__dek{
margin:0 0 28px;
font-size:clamp(16px,1.5vw,19px); line-height:1.5;
color:#C9C5B9; max-width:54ch;
}
.contact-hero__jumps{ display:flex; flex-wrap:wrap; gap:10px; }
.contact-hero__jumps a{
display:inline-flex; align-items:center;
padding:8px 14px; border-radius:999px;
border:1px solid rgba(255,255,255,.22);
font-size:13px; font-weight:600; color:#fff;
transition:background .18s, border-color .18s;
}
.contact-hero__jumps a:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.contact-hero__card{
padding:24px 22px 22px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.04);
border-radius:var(--radius-s);
}
.contact-hero__card-kicker{ margin-bottom:8px; }
.contact-hero__card-title{
margin:0 0 10px;
font-family:var(--display); font-weight:800;
font-size:22px; letter-spacing:-.03em;
}
.contact-hero__card p{ margin:0; font-size:15px; line-height:1.5; color:#C9C5B9; }
.contact-hero__card-note{ margin-top:14px !important; font-size:13px !important; }
.contact-hero__card a{
display:inline-block; margin-top:16px;
font-size:14px; font-weight:700; color:#fff;
border-bottom:1px solid var(--red);
}
.contact-quick{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px; margin-top:-36px; position:relative; z-index:1;
}
.contact-quick__card{
display:flex; flex-direction:column; gap:6px;
padding:20px 18px 18px;
background:var(--paper-2); border:1px solid var(--line);
border-radius:var(--radius-s); box-shadow:0 10px 28px rgba(6,6,7,.06);
transition:transform .18s, border-color .18s;
}
.contact-quick__card:hover{ transform:translateY(-2px); border-color:var(--red); }
.contact-quick__label{
font-size:11px; font-weight:700; letter-spacing:.12em;
text-transform:uppercase; color:var(--red);
}
.contact-quick__card strong{
font-family:var(--sans); font-size:16px; font-weight:700; color:var(--ink);
}
.contact-quick__card span:last-child{ font-size:13px; color:var(--muted); }
.contact-body{ padding-block:56px 8px; }
.contact-kicker{
margin:0 0 8px;
font-size:11px; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--red);
}
.contact-body h2{
margin:0 0 16px;
font-family:var(--display); font-weight:800;
font-size:clamp(26px,3vw,36px); letter-spacing:-.03em; line-height:1.1;
}
.contact-lede{
margin:0 0 24px; max-width:62ch;
font-size:17px; line-height:1.55; color:var(--muted);
}
.contact-history,
.contact-desks,
.contact-newsroom,
.contact-visit,
.contact-kits,
.contact-form{ margin-bottom:clamp(40px,6vw,72px); }
.contact-timeline{
--dot:9px;
--year:clamp(22px,2.4vw,34px);
display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
gap:0; padding:8px 0 0; margin:36px 0 0; list-style:none;
counter-reset:none;
}
.contact-timeline li{
position:relative;
padding:0 28px 0 0;
background:transparent; border:0;
}
.contact-timeline time{
display:block; margin:0 0 26px; padding-bottom:18px;
font-family:var(--display); font-weight:800;
font-size:var(--year);
letter-spacing:-.04em; line-height:1;
}
.contact-timeline li::before{
content:"";
position:absolute; left:4px; right:0;
top:calc(var(--year) + 14px);
height:1px; background:var(--line);
}
.contact-timeline li:last-child::before{ right:auto; width:0; }
.contact-timeline li::after{
content:"";
position:absolute; left:0;
top:calc(var(--year) + 10px);
width:var(--dot); height:var(--dot);
border-radius:50%;
background:var(--red);
box-shadow:0 0 0 4px var(--paper);
}
.contact-timeline p{
margin:0; max-width:26ch;
font-size:14px; line-height:1.5; color:var(--muted);
}
.contact-desks__grid{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.contact-desk{
padding:22px 20px 20px;
background:var(--paper-2); border:1px solid var(--line);
border-radius:var(--radius-s);
}
.contact-desk h3{
margin:0 0 8px;
font-family:var(--sans); font-size:17px; font-weight:700;
}
.contact-desk p{ margin:0 0 8px; font-size:14px; line-height:1.5; color:var(--muted); }
.contact-desk p:last-child{ margin-bottom:0; }
.contact-desk a{ color:var(--ink); font-weight:600; }
.contact-desk a:hover{ color:var(--red); }
.contact-desk__lines{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.contact-desk__lines li{
display:flex; justify-content:space-between; gap:12px;
font-size:14px; color:var(--muted);
}
.contact-newsroom__list{
display:grid; grid-template-columns:1fr 1fr;
gap:0; padding:0; margin:8px 0 0; list-style:none;
border-top:1px solid var(--line);
}
.contact-newsroom__list li{
display:flex; justify-content:space-between; align-items:baseline; gap:16px;
padding:16px 20px 16px 0;
border-bottom:1px solid var(--line);
}
.contact-newsroom__list li:nth-child(odd){ padding-right:32px; }
.contact-newsroom__list li:nth-child(even){ padding-left:32px; }
.contact-newsroom__list span{
font-size:16px; font-weight:600; color:var(--ink); line-height:1.35;
}
.contact-newsroom__list a{
flex:none;
font-family:var(--sans); font-size:15px; font-weight:600;
color:var(--ink); letter-spacing:-.01em; white-space:nowrap;
}
.contact-newsroom__list a:hover{ color:var(--red); }
.contact-visit{
display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
gap:24px; align-items:stretch;
}
.contact-visit__copy p{ font-size:16px; line-height:1.6; }
.contact-visit__meta{ margin-top:12px; font-size:13px; color:var(--muted); }
.contact-visit__maplink{
display:inline-block; margin-top:14px;
font-size:14px; font-weight:700; color:var(--red);
}
.contact-visit__map{
min-height:320px; border-radius:var(--radius-s); overflow:hidden;
border:1px solid var(--line); background:var(--paper-2);
}
.contact-visit__map iframe{ width:100%; height:100%; min-height:320px; border:0; }
.contact-kits__grid{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.contact-kit{
display:flex; flex-direction:column; gap:6px;
padding:22px 20px;
background:var(--paper-2); border:1px solid var(--line);
border-radius:var(--radius-s);
transition:border-color .18s, transform .18s;
}
.contact-kit:hover{ border-color:var(--red); transform:translateY(-2px); }
.contact-kit__kind{
font-size:11px; font-weight:700; letter-spacing:.12em;
text-transform:uppercase; color:var(--red);
}
.contact-kit strong{ font-size:18px; font-weight:700; }
.contact-kit span:last-child{ font-size:13px; color:var(--muted); }
.contact-form{
padding:clamp(24px,3vw,36px);
background:var(--paper-2); border:1px solid var(--line);
border-radius:var(--radius-s);
}
.contact-form__grid{
display:grid; grid-template-columns:1fr 1fr;
gap:16px; max-width:720px;
}
.contact-form__full{ grid-column:1 / -1; }
.contact-form label{
display:flex; flex-direction:column; gap:6px;
font-size:13px; font-weight:600; color:var(--muted);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
width:100%; padding:12px 14px;
border:1px solid var(--line); border-radius:var(--radius-s);
background:var(--paper); color:var(--ink);
font-family:inherit; font-size:15px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
outline:2px solid rgba(237,28,36,.35); outline-offset:1px; border-color:var(--red);
}
.contact-form__submit{
grid-column:1 / -1; justify-self:start;
padding:12px 22px; border:0; border-radius:var(--radius-s);
background:var(--red); color:#fff;
font-size:15px; font-weight:700; cursor:pointer;
}
.contact-form__submit:hover{ background:var(--btn-hover, #2B2B30); }
@media (max-width:1080px){
.contact-hero__inner,
.contact-quick,
.contact-desks__grid{ grid-template-columns:1fr 1fr; }
.contact-timeline{
grid-template-columns:repeat(3,minmax(0,1fr));
row-gap:40px;
}
.contact-timeline li:nth-child(3n)::before{ right:auto; width:0; }
}
@media (max-width:720px){
.contact-hero{ padding-bottom:36px; }
.contact-hero__inner,
.contact-quick,
.contact-desks__grid,
.contact-visit,
.contact-kits__grid,
.contact-form__grid,
.contact-newsroom__list,
.contact-timeline{ grid-template-columns:1fr; }
.contact-quick{ margin-top:24px; }
.contact-timeline{
--year:28px;
row-gap:0;
}
.contact-timeline li{
padding:0 0 28px 28px;
}
.contact-timeline li:nth-child(3n)::before{
left:calc(var(--dot) / 2 - .5px); right:auto; width:1px;
}
.contact-timeline time{
margin:0 0 8px; padding-bottom:0;
}
.contact-timeline li::before{
left:calc(var(--dot) / 2 - .5px);
right:auto;
top:0; bottom:0;
width:1px; height:auto;
}
.contact-timeline li:first-child::before{
top:calc(var(--year) / 2);
}
.contact-timeline li:last-child::before{
top:0; bottom:auto;
width:1px; height:calc(var(--year) / 2);
}
.contact-timeline li::after{
left:0;
top:calc(var(--year) / 2 - var(--dot) / 2);
}
.contact-newsroom__list li:nth-child(odd),
.contact-newsroom__list li:nth-child(even){ padding-left:0; padding-right:0; }
}
/* =====================================================================
PRIVACY POLICY — contact theme + sidebar TOC
===================================================================== */
.legal-hero{ padding-bottom:clamp(40px,6vw,64px); }
.legal-layout{
display:grid;
grid-template-columns:minmax(210px,.68fr) minmax(0,1.7fr);
gap:clamp(28px,4vw,56px);
padding-block:48px 8px;
align-items:start;
}
.legal-aside{ position:sticky; top:96px; }
.legal-toc{
display:flex; flex-direction:column;
margin:0 0 28px; padding:0 0 0 14px;
list-style:none;
border-left:1px solid var(--line);
}
.legal-toc a{
display:block;
padding:8px 0 8px 14px;
margin-left:-15px;
border-left:2px solid transparent;
font-size:14px; font-weight:600; line-height:1.35;
color:var(--muted);
}
.legal-toc a:hover,
.legal-toc a.is-active{
color:var(--ink);
border-left-color:var(--red);
}
.legal-related{
display:flex; flex-direction:column; gap:10px;
padding:20px 18px;
background:var(--paper-2);
border:1px solid var(--line);
border-radius:var(--radius-s);
}
.legal-related .contact-kicker{ margin-bottom:4px; }
.legal-related a{
font-size:15px; font-weight:600; color:var(--ink);
}
.legal-related a:hover{ color:var(--red); }
.legal-body{
padding:clamp(24px,3vw,40px);
background:var(--paper-2);
border:1px solid var(--line);
border-radius:var(--radius-s);
}
.legal-body__lede{
margin:0 0 8px;
max-width:68ch;
font-size:18px; line-height:1.6; color:var(--ink);
}
.legal-body section{
padding:28px 0 8px;
border-top:1px solid var(--line);
margin-top:28px;
}
.legal-body section:first-of-type{ margin-top:28px; }
.legal-body h2{
margin:0 0 14px;
font-family:var(--display); font-weight:800;
font-size:clamp(22px,2.6vw,30px);
letter-spacing:-.03em; line-height:1.15;
}
.legal-body p{
margin:0 0 14px;
max-width:68ch;
font-size:16px; line-height:1.7; color:var(--ink);
}
.legal-body p:last-child{ margin-bottom:0; }
.legal-body a{ color:var(--red); font-weight:600; }
.legal-body a:hover{ color:var(--red-deep); }
.legal-roles{
display:grid; grid-template-columns:1fr 1fr;
gap:0 32px; margin:4px 0 16px;
}
.legal-role{ margin:0; padding:16px 0; border-bottom:1px solid var(--line); }
.legal-role span{
display:block; margin-bottom:6px;
font-size:11px; font-weight:700; letter-spacing:.12em;
text-transform:uppercase; color:var(--red);
}
.legal-role strong{ font-size:18px; font-weight:700; letter-spacing:-.02em; }
.legal-board,
.legal-people{
display:grid; grid-template-columns:1fr 1fr;
gap:0; margin:8px 0 16px; padding:0;
list-style:none; border-top:1px solid var(--line);
}
.legal-board li,
.legal-people li{
padding:12px 0;
border-bottom:1px solid var(--line);
font-size:16px; font-weight:600;
}
.legal-board li:nth-child(odd),
.legal-people li:nth-child(odd){ padding-right:32px; }
.legal-board li:nth-child(even),
.legal-people li:nth-child(even){ padding-left:32px; }
.legal-board strong{ display:block; }
.legal-board span{
display:block; margin-top:2px;
font-size:13px; font-weight:500; color:var(--muted);
}
.legal-subhead{
margin:20px 0 8px;
font-size:11px; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--red);
}
.legal-press{
margin:8px 0 18px;
max-width:280px;
}
.legal-press__logo{
display:block; width:100%; height:auto;
}
[data-theme="dark"] .legal-press__logo{ filter:invert(1); }
@media (max-width:860px){
.legal-layout{ grid-template-columns:minmax(0,1fr); padding-top:32px; min-width:0; }
.legal-aside,
.legal-body{ position:static; min-width:0; max-width:100%; }
.legal-toc{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
gap:8px;
overflow-x:auto;
overflow-y:hidden;
overscroll-behavior-x:contain;
min-width:0;
margin:0 calc(-1 * var(--gutter)) 20px;
padding:0 0 12px var(--gutter);
border-left:0;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.legal-toc::after{
content:"";
flex:0 0 var(--gutter);
}
.legal-toc::-webkit-scrollbar{ display:none; }
.legal-toc a{
flex:none;
margin:0; padding:9px 14px;
border:1px solid var(--line);
border-radius:999px;
background:var(--paper-2);
white-space:nowrap;
line-height:1.2;
}
.legal-toc a:hover,
.legal-toc a.is-active{
border-color:var(--red);
color:var(--ink);
}
.legal-roles,
.legal-board,
.legal-people{ grid-template-columns:1fr; }
.legal-board li:nth-child(odd),
.legal-board li:nth-child(even),
.legal-people li:nth-child(odd),
.legal-people li:nth-child(even){ padding-left:0; padding-right:0; }
}
/* =====================================================================
CATEGORY — hub (news / sport / showbiz / sci-tech)
and leaf listing (news/national) when there are no further subs
===================================================================== */
body:has(.cat-page) .rec-pop,
body:has(.author-page) .rec-pop{ display:none !important; }
.cat-page{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
column-gap:28px;
row-gap:8px;
padding-block:24px 40px;
align-items:start;
}
.cat-page .ad-wrap{
width:100%;
max-width:100%;
margin-inline:0;
padding-inline:0;
}
.cat-page .ad-wrap--mid{ padding-block:24px; }
.cat-page .featured__thumb img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.cat-page a:hover .featured__thumb img{ transform:scale(1.06); }
.cat-main > .ad-wrap--mid{
width:100%;
max-width:100%;
}
.cat-main .ad-slot--billboard,
.cat-main .ad-slot--billboard picture,
.cat-main .ad-slot--filled img{
width:100%;
max-width:100%;
}
.cat-hero.section-dark{ padding-block:40px 52px; }
.cat-hero + .cat-page{ padding-block-start:16px; }
/* Lead story image — top-left, blurred, fades into the dark band on the right.
Desktop: mirror on the right (fade left) for an Ambilight-style wash. */
.cat-hero__bg{
position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.cat-hero__bg img,
.cat-hero__bg .cat-hero__bg-img{
position:absolute;
top:-12%;
width:min(78%, 980px); height:124%;
max-width:none;
object-fit:cover;
filter:blur(12px) saturate(1.15);
transform:scale(1.06);
opacity:.88;
}
.cat-hero__bg-img--left{
left:-6%;
object-position:left top;
-webkit-mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 38%, rgba(0,0,0,.28) 62%, transparent 88%);
mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 38%, rgba(0,0,0,.28) 62%, transparent 88%);
}
.cat-hero__bg-img--right{
display:none;
right:-6%; left:auto;
object-position:right top;
-webkit-mask-image:linear-gradient(270deg, #000 0%, rgba(0,0,0,.75) 38%, rgba(0,0,0,.28) 62%, transparent 88%);
mask-image:linear-gradient(270deg, #000 0%, rgba(0,0,0,.75) 38%, rgba(0,0,0,.28) 62%, transparent 88%);
}
.cat-hero__bg::after{
content:''; position:absolute; inset:0; z-index:1;
background:linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.06) 50%, rgba(0,0,0,.22) 100%);
}
@media (min-width:861px){
.cat-hero__bg-img--right{ display:block; }
.cat-hero__bg-img--left,
.cat-hero__bg-img--right{
width:min(52%, 720px);
}
}
.section-dark--scitech .flat-card{ background:#07141c; }
.section-dark--scitech .flat-card::after,
.section-dark--scitech .flat-card--alt::after,
.section-dark--scitech .flat-card--alt2::after{
background:linear-gradient(180deg, rgba(6,18,28,.12) 18%, rgba(6,18,28,.5) 58%, rgba(6,18,28,.86) 100%);
}
.cat-head{
display:flex; flex-direction:column; gap:16px;
grid-column:1 / -1;
margin:0;
min-width:0;
overflow:hidden;
}
.cat-head--chips{ gap:0; }
.cat-head__title{
margin:0;
font-family:var(--sans); font-weight:700;
font-size:clamp(26px,3.2vw,36px);
letter-spacing:-.02em; line-height:1.15;
}
/* Topic (tag) page header. */
.cat-head__eyebrow{
display:block; margin-bottom:6px;
font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red);
}
.cat-head__hash{ margin-right:.04em; color:var(--red); font-weight:800; }
.cat-head__meta{ margin:-6px 0 0; font-size:13px; font-weight:600; color:var(--muted); }
.cat-subs{
display:flex; flex-wrap:nowrap; gap:8px;
overflow-x:auto; overscroll-behavior-x:contain;
min-width:0; max-width:100%;
margin:0;
padding:0 0 4px;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.cat-subs::after{ content:""; flex:0 0 var(--gutter); }
.cat-subs::-webkit-scrollbar{ display:none; }
.cat-subs a{
flex:none;
padding:8px 14px;
border:1px solid var(--line);
border-radius:999px;
background:var(--paper-2);
font-size:13px; font-weight:600; line-height:1.2;
color:var(--muted); white-space:nowrap;
}
.cat-subs a:hover{ color:var(--ink); border-color:var(--ink); }
.cat-subs a.is-active{
color:var(--paper, #fff); background:var(--ink); border-color:var(--ink); /* Inverted in dark mode too. */
}
.cat-layout{ display:contents; }
.cat-main,
.cat-aside{ min-width:0; }
.cat-main{ grid-column:1; }
.cat-aside{
grid-column:2;
grid-row:2;
position:sticky; top:96px;
}
.cat-aside__ad{ margin-top:0; }
.cat-lead{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);
column-gap:16px;
row-gap:14px;
margin:0 0 20px;
align-items:stretch;
}
.cat-lead__feature{
position:relative;
display:block;
min-width:0;
min-height:100%;
color:inherit;
overflow:hidden;
border-radius:var(--radius-s);
}
.cat-lead__feature .featured__thumb{
position:absolute; inset:0;
aspect-ratio:auto; height:auto; margin:0; border-radius:inherit;
}
.cat-lead__feature .featured__thumb::after{
content:"";
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(6,6,7,.08) 28%, rgba(6,6,7,.42) 62%, rgba(6,6,7,.88) 100%);
}
.cat-lead__copy{
position:absolute; inset:0; z-index:2;
display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
padding:16px 14px 14px;
}
.cat-lead__copy .kicker,
.cat-lead__copy .tag{
position:absolute; top:10px; left:10px;
}
.cat-lead__feature h2{
margin:0;
font-family:var(--sans); font-weight:600;
font-size:clamp(20px,2.2vw,28px);
letter-spacing:-.03em; line-height:1.18;
color:#fff;
}
.cat-lead__feature:hover h2{ color:#fff; }
.cat-lead__feature .meta{ color:rgba(255,255,255,.78); }
.cat-lead__stack{
display:flex; flex-direction:column;
justify-content:space-between;
gap:14px;
min-height:0;
}
.cat-lead__stack a{
display:grid; grid-template-columns:108px minmax(0,1fr);
gap:12px; align-items:center;
padding:0;
}
.cat-lead__stack .featured__thumb{ aspect-ratio:4/3; margin:0; }
.cat-lead__stack h3{
margin:0;
font-family:var(--sans); font-weight:500;
font-size:16px; line-height:1.32;
}
.cat-lead__stack a:hover h3{ color:var(--ink-hover); }
.cat-block{ margin:0; padding:18px 0 8px; border-top:1px solid var(--line); scroll-margin-top:110px; }
.cat-block:first-child{ border-top:none; padding-top:0; }
.cat-block .section__head{ margin-bottom:18px; }
.cat-block .section__title a{
display:flex; align-items:center; gap:inherit;
color:inherit; text-decoration:none;
}
.cat-block .section__title a:hover{ color:var(--ink-hover); }
.cat-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px;
}
.cat-grid .featured__mini{
display:flex;
flex-direction:column;
}
.cat-grid .featured__mini > .kicker{
display:block; margin:0 0 6px;
width:auto; max-width:100%;
overflow-wrap:anywhere; word-break:break-word;
line-height:1.25;
}
.cat-grid .featured__mini .featured__thumb{ aspect-ratio:4/3; margin-bottom:8px; }
.cat-grid .featured__mini h3,
.cat-grid .featured__mini h4{
font-family:var(--sans); font-size:15px; line-height:1.32; font-weight:500;
color:var(--ink);
height:calc(15px * 1.32 * 3);
margin:0;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.cat-grid .featured__mini .meta{ margin-top:auto; padding-top:8px; }
.cat-grid .featured__mini:hover h3,
.cat-grid .featured__mini:hover h4{ color:var(--ink-hover); }
.cat-nl{
margin-top:20px;
padding:22px 20px;
background:var(--paper-2);
border:1px solid var(--line);
border-radius:var(--radius-s);
text-align:center;
}
.cat-nl svg{ display:block; margin:0 auto 10px; color:var(--ink); }
.cat-nl h3{
margin:0 0 8px;
font-family:var(--sans); font-size:22px; font-weight:700;
letter-spacing:-.03em; line-height:1.2;
}
.cat-nl p{
margin:0 0 14px;
font-size:14px; line-height:1.5; color:var(--muted);
}
.cat-nl form{ display:flex; flex-direction:column; gap:8px; }
.cat-nl input{
width:100%; height:42px; padding:0 12px;
border:1px solid var(--line); border-radius:var(--radius-s);
background:var(--paper); color:var(--ink); font:inherit; font-size:14px;
}
.cat-nl .btn{ width:100%; justify-content:center; }
.cat-nl .meta{ display:block; margin-top:10px; font-size:11px; }
.cat-feed{ display:flex; flex-direction:column; }
.cat-row{
display:grid; grid-template-columns:160px minmax(0,1fr);
gap:18px; align-items:center;
padding:16px 0;
border-top:1px solid var(--border-bottom);
}
.cat-row:first-child{ border-top:none; padding-top:0; }
.cat-row .featured__thumb{ aspect-ratio:16/10; margin:0; }
.cat-row h2{
margin:0;
font-family:var(--sans); font-weight:500;
font-size:clamp(18px,1.8vw,22px);
letter-spacing:-.025em; line-height:1.25;
}
.cat-row:hover h2{ color:var(--ink-hover); }
.cat-row .kicker{ margin-bottom:6px; }
.cat-row .meta{ display:block; margin-top:8px; color:var(--muted); }
.cat-row.is-more[hidden]{ display:none; }
.cat-more{
display:flex; justify-content:center;
margin:12px 0 8px; padding-top:8px;
}
.cat-more .btn{ min-width:180px; justify-content:center; }
.cat-aside .vaside{ height:auto; min-height:0; }
.cat-aside .vaside__rank{ overflow:visible; }
@media (max-width:1100px){
.cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cat-lead{ grid-template-columns:1fr; }
.cat-lead__feature .featured__thumb{
position:relative; inset:auto;
aspect-ratio:16/9; height:auto;
}
.cat-lead__stack{
display:grid; grid-template-columns:1fr 1fr;
gap:16px 20px;
height:auto; min-height:0;
}
}
@media (max-width:860px){
.cat-subs{
margin-inline:calc(-1 * var(--gutter));
padding-inline:var(--gutter);
max-width:none;
}
.cat-page{
grid-template-columns:minmax(0,1fr);
padding-block:20px 28px;
row-gap:8px;
}
.cat-head{ gap:12px; }
.cat-aside{ grid-column:1; grid-row:auto; position:static; }
.cat-lead{ margin-bottom:20px; }
.cat-lead__stack{ grid-template-columns:1fr; gap:12px; }
.cat-lead__stack a + a{ border-top:1px solid var(--border-bottom); padding-top:12px; }
.cat-lead__stack a{ grid-template-columns:96px minmax(0,1fr); gap:12px; }
.cat-grid{ grid-template-columns:1fr 1fr; gap:14px; }
.cat-grid .featured__mini h4{
font-size:14px;
height:calc(14px * 1.32 * 3);
}
.cat-block{ padding:16px 0 4px; scroll-margin-top:64px; }
.cat-row{ grid-template-columns:108px minmax(0,1fr); gap:12px; padding:14px 0; }
.cat-row h2{ font-size:17px; }
.cat-nl{ padding:18px 16px; }
}
/* =====================================================================
AUTHOR PAGE
===================================================================== */
.author-page{ padding-block:0 56px; }
.author-bar{
border-bottom:1px solid var(--border-bottom);
}
.author-crumbs{
display:flex; flex-wrap:wrap; align-items:center; gap:8px;
min-height:46px;
margin-block:0;
font-size:12px; font-weight:600; letter-spacing:.01em;
color:var(--muted);
}
.author-crumbs a{ color:var(--muted); }
.author-crumbs a:hover{ color:var(--ink); }
.author-crumbs [aria-current="page"]{ color:var(--ink); }
.author-hero{
display:grid; grid-template-columns:216px minmax(0,1fr) minmax(200px,240px);
gap:32px 40px; align-items:start;
padding:36px 0 40px;
border-bottom:1px solid var(--border-bottom);
}
.author-hero__photo{
width:216px; height:216px; border-radius:50%;
object-fit:cover; display:block; background:#e8e4dc;
box-shadow:0 0 0 6px var(--paper), 0 0 0 7px var(--line);
}
.author-hero__role{
margin:0 0 8px;
font-size:12px; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--muted);
}
.author-hero__name{
margin:0 0 14px;
font-family:var(--display); font-weight:700;
font-size:clamp(32px,4.2vw,48px);
letter-spacing:-.03em; line-height:1.05;
}
.author-hero__bio{
margin:0 0 12px; max-width:62ch;
font-family:var(--serif); font-size:18px; line-height:1.55; color:var(--ink-2);
}
.author-hero__bio + .author-hero__meta{ margin-top:16px; }
.author-hero__meta{
display:flex; flex-wrap:wrap; align-items:center; gap:10px 0;
max-width:62ch;
margin-bottom:0;
padding:10px 14px;
border:1px solid var(--border-bottom);
border-radius:var(--radius-s);
background:var(--paper-2);
font-size:13px; color:var(--ink-2);
}
.author-hero__meta > *{
display:inline-flex; align-items:center; gap:8px;
padding-inline:12px;
}
.author-hero__meta > * + *{ border-left:1px solid var(--border-bottom); }
.author-hero__meta svg{
width:15px; height:15px; flex:none; color:var(--muted);
}
.author-hero__meta a{ color:var(--ink); font-weight:600; }
.author-hero__meta a:hover,
.author-hero__meta a:hover svg{ color:var(--red); }
.author-contact{
justify-self:end;
width:100%;
max-width:240px;
padding-top:6px;
}
.author-contact__label{
margin:0 0 10px;
font-size:11px; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--muted);
}
.author-contact__mail{
display:inline-flex; align-items:center; gap:8px;
margin:0 0 16px;
font-size:14px; font-weight:600; color:var(--ink); word-break:break-all;
}
.author-contact__mail svg{ width:16px; height:16px; flex:none; }
.author-contact__mail:hover{ color:var(--red); }
.author-contact__social{ display:flex; flex-wrap:wrap; gap:8px; }
.author-contact__social a{
width:36px; height:36px; display:grid; place-items:center;
border:1px solid var(--border-bottom); border-radius:999px;
background:var(--paper-2); color:var(--ink);
transition:border-color .18s, color .18s, background .18s;
}
.author-contact__social a:hover{ color:var(--red); border-color:var(--red); }
.author-contact__social svg{ width:15px; height:15px; fill:currentColor; }
.author-feed{ padding-top:28px; }
.author-feed__head{
display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
margin:0 0 6px; padding-bottom:14px;
border-bottom:1px solid var(--border-bottom);
}
.author-feed__title{
margin:0;
font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.02em;
}
.author-feed__tabs{ margin:0; }
.author-feed__tabs .section__tab{
font-size:22px; font-weight:700; letter-spacing:-.02em;
text-decoration:none;
}
.author-feed__tabs .section__tab[aria-current="page"]{ color:var(--ink); }
.author-feed__tabs .section__tab[aria-current="page"]::after{ background:var(--ink); }
.author-feed__tabs .section__tab--premium{ font-size:18px; font-weight:400; letter-spacing:0; }
.author-feed__count{
margin:0 0 2px;
font-size:13px; font-weight:600; color:var(--muted);
flex:none;
}
.author-story.is-more[hidden]{ display:none; }
.author-more{
display:flex; justify-content:center;
margin:20px 0 8px; padding-top:12px;
}
.author-more[hidden]{ display:none; }
.author-more .btn{ min-width:200px; }
.author-more .btn[hidden]{ display:none; }
.author-story{
display:grid; grid-template-columns:240px minmax(0,1fr);
gap:22px; align-items:start;
padding:22px 0; border-bottom:1px solid var(--border-bottom);
color:inherit;
}
.author-story__media{
position:relative; display:block; overflow:hidden; border-radius:var(--radius-s);
aspect-ratio:16/10; background:#eee;
}
.author-story__media img{
width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.author-story:hover .author-story__media img{ transform:scale(1.04); }
.author-story__media > .video-badge{
position:absolute; z-index:3; bottom:10px; right:10px; left:auto; top:auto;
}
.author-story h2{
margin:8px 0 8px;
font-family:var(--sans); font-size:clamp(18px,1.6vw,22px);
font-weight:600; line-height:1.25; letter-spacing:-.02em; color:var(--ink);
}
.author-story:hover h2{ color:var(--ink-hover); }
.author-story__dek{
margin:0 0 10px; font-size:15px; line-height:1.45; color:var(--ink-2);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media (max-width:1020px){
.author-hero{ grid-template-columns:180px minmax(0,1fr); }
.author-hero__photo{ width:180px; height:180px; }
.author-contact{ grid-column:2; justify-self:start; max-width:none; padding-top:0; }
}
@media (max-width:860px){
.author-hero{
grid-template-columns:132px minmax(0,1fr);
padding:24px 0 28px; gap:16px 18px;
}
.author-hero__photo{ width:132px; height:132px; grid-column:1; grid-row:1; }
.author-contact{
grid-column:2; grid-row:1;
align-self:center; justify-self:start;
max-width:none; padding-top:0;
}
.author-contact__label{ display:none; }
.author-contact__mail{ margin:0 0 10px; font-size:13px; }
.author-contact__social a{ width:32px; height:32px; }
.author-hero__copy{ grid-column:1 / -1; grid-row:2; }
.author-hero__bio{ font-size:16.5px; }
.author-hero__meta{ padding:8px 10px; }
.author-hero__meta > *{ padding-inline:8px; }
.author-story{ grid-template-columns:120px minmax(0,1fr); gap:14px; padding:16px 0; }
.author-story h2{ font-size:16.5px; margin:4px 0 6px; }
.author-story__dek{ display:none; }
}
/* ---- My account (account hub) ---- */
.account-page{
background:
radial-gradient(720px 280px at 12% -8%, rgba(237,28,36,.07), transparent 55%),
radial-gradient(640px 260px at 92% 0%, rgba(11,11,12,.04), transparent 50%),
var(--paper);
padding:28px 0 72px;
min-height:60vh;
overflow-x:clip;
}
.account-page > .shell{
min-width:0;
max-width:var(--shell-max); /* 1280px — match site shell */
margin-inline:auto;
box-sizing:border-box;
}
.account-gate,
.account-hub{ display:none; }
html:not(.is-logged-in) .account-gate{ display:block; }
html.is-logged-in .account-hub{ display:block; }
.account-gate{
max-width:440px; margin:48px auto;
padding:28px 24px;
background:var(--paper-2);
border:1px solid var(--border-bottom);
border-radius:var(--radius-s);
text-align:center;
}
.account-gate h1{
margin:0 0 8px;
font-family:var(--sans); font-size:24px; font-weight:700; letter-spacing:-.02em;
}
.account-gate p{ margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.45; }
.account-gate .btn{ margin-bottom:10px; }
.account-gate__signup{ font-size:13px; font-weight:700; color:var(--red); }
.account-layout{
display:grid;
grid-template-columns:240px minmax(0,1fr);
gap:24px;
align-items:start;
min-width:0;
}
.account-side{
position:sticky; top:88px;
background:var(--paper-2);
border:1px solid var(--border-bottom);
border-radius:var(--radius-s);
padding:14px 12px;
}
.account-menu-toggle{ display:none; }
.account-side__panel{ display:block; }
.account-side__user{
display:flex; align-items:center; gap:12px;
padding:10px 10px 14px; margin-bottom:8px;
border-bottom:1px solid var(--border-bottom);
}
.account-side__avatar{
flex:none; width:44px; height:44px; border-radius:var(--radius-s);
display:grid; place-items:center; background:var(--ink); color:#fff;
overflow:hidden;
}
.account-side__mark{
width:26px; height:auto; display:block;
}
.account-side__avatar img.avatar{
width:100%; height:100%; object-fit:cover; display:block;
}
/* Light theme: ink avatar is dark → white mark */
.account-side__mark--on-light{ display:none; }
/* Dark theme: ink avatar is light → dark mark */
html[data-theme="dark"] .account-side__mark--on-dark{ display:none; }
html[data-theme="dark"] .account-side__mark--on-light{ display:block; }
.account-side__name{ display:block; font-size:14px; font-weight:700; color:var(--ink); line-height:1.2; }
.account-side__email{
display:block; font-size:12px; color:var(--muted); line-height:1.3;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px;
}
.account-nav{ display:flex; flex-direction:column; gap:2px; margin:0; padding:0; list-style:none; }
.account-nav a{
display:flex; align-items:center; gap:10px;
padding:11px 12px; border-radius:var(--radius-s);
font-size:14px; font-weight:500; color:var(--ink);
transition:background .15s, color .15s;
}
.account-nav a svg{ flex:none; color:var(--muted); }
.account-nav a:hover{ background:var(--paper); }
.account-nav a.is-active{
background:rgba(237,28,36,.08); color:var(--red); font-weight:700;
}
.account-nav a.is-active svg{ color:var(--red); }
.account-nav__foot{
margin-top:10px; padding-top:10px;
border-top:1px solid var(--border-bottom);
display:flex; flex-direction:column; gap:2px;
}
.account-nav__help,
.account-nav__logout{
display:flex; align-items:center; gap:10px; width:100%;
padding:11px 12px; border:0; border-radius:var(--radius-s);
background:transparent; font:inherit; font-size:14px; font-weight:600;
cursor:pointer; text-align:left;
}
.account-nav__help{ color:var(--ink); }
.account-nav__help svg{ color:var(--muted); }
.account-nav__help:hover{ background:var(--paper); }
.account-nav__logout{ color:var(--red); }
.account-nav__logout:hover{ background:rgba(237,28,36,.06); }
.account-nav__logout svg{ color:var(--red); }
/* Help modal */
.account-help{
position:fixed; inset:0; z-index:80;
display:grid; place-items:center; padding:20px;
}
.account-help[hidden]{ display:none !important; }
.account-help__backdrop{
position:absolute; inset:0; background:rgba(11,11,12,.45);
}
.account-help__panel{
position:relative; z-index:1;
width:min(420px, 100%);
padding:28px 24px 24px;
background:var(--paper-2);
border:1px solid var(--border-bottom);
border-radius:var(--radius-m);
box-shadow:0 24px 60px rgba(11,11,12,.2);
}
.account-help__close{
position:absolute; top:12px; right:12px;
width:36px; height:36px; border:0; border-radius:50%;
display:grid; place-items:center;
background:transparent; color:var(--muted); cursor:pointer;
}
.account-help__close:hover{ background:var(--paper); color:var(--ink); }
.account-help__panel h2{
margin:0 0 10px;
font-family:var(--sans); font-size:22px; font-weight:700; letter-spacing:-.02em;
}
.account-help__panel p{
margin:0 0 18px; font-size:14px; line-height:1.5; color:var(--muted);
}
.account-help__panel p a{ color:var(--red); font-weight:700; }
.account-main{ min-width:0; max-width:100%; }
.account-panel{ display:none; min-width:0; max-width:100%; }
.account-panel.is-active{ display:block; }
.account-panel[id],
#edit-profile{ scroll-margin-top:88px; }
@media (max-width:900px){
.account-panel[id],
#edit-profile{ scroll-margin-top:72px; }
}
.account-card{
background:var(--paper-2);
border:1px solid var(--border-bottom);
border-radius:var(--radius-s);
padding:22px 22px 24px;
box-shadow:0 10px 28px rgba(11,11,12,.04);
min-width:0; max-width:100%;
overflow:hidden;
}
.account-card + .account-card{ margin-top:16px; }
.account-card__eyebrow{
margin:0 0 6px;
font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--muted);
}
.account-card h1,
.account-card h2{
margin:0 0 8px;
font-family:var(--sans); font-weight:700; letter-spacing:-.02em; color:var(--ink);
}
.account-card h1{ font-size:clamp(22px,2.2vw,28px); }
.account-card h2{ font-size:18px; overflow-wrap:anywhere; }
.account-card__dek{
margin:0 0 20px; font-size:14px; line-height:1.45; color:var(--muted); max-width:52ch;
overflow-wrap:anywhere;
}
.account-card__dek--tight{ margin-bottom:0; }
/* Dashboard welcome + premium */
.account-welcome{
display:flex; align-items:center; justify-content:space-between; gap:16px;
margin:0 0 16px;
min-width:0; max-width:100%;
}
.account-welcome__greet{
margin:0;
font-family:var(--serif);
font-size:clamp(28px,3.2vw,36px);
font-weight:700; letter-spacing:-.02em; line-height:1.15;
color:var(--ink);
min-width:0;
}
.account-welcome .btn{ flex:none; white-space:nowrap; }
.account-welcome__edit{
background:#fff; color:var(--ink);
border-color:var(--border-bottom);
}
.account-welcome__edit:hover{
background:var(--paper); border-color:var(--muted-light);
transform:translateY(-1px); box-shadow:none;
}
html[data-theme="dark"] .account-welcome__edit{
background:var(--paper-2); color:var(--ink);
}
/* Dashboard home */
.account-dash .account-stats{ margin-top:0; }
.account-dash__top{
display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
margin-bottom:20px;
}
.account-dash__edit{ flex:none; white-space:nowrap; }
.account-dash__identity{
display:flex; align-items:center; gap:14px;
padding:14px 16px; margin-bottom:18px;
border-radius:var(--radius-s);
background:
linear-gradient(110deg, rgba(237,28,36,.08), rgba(237,28,36,.02) 42%, transparent 70%),
var(--paper);
border:1px solid var(--border-bottom);
}
.account-dash__avatar{
flex:none; width:56px; height:56px; border-radius:50%;
display:grid; place-items:center;
background:var(--ink); color:#fff;
}
.account-dash__who{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.account-dash__who strong{
font-size:16px; font-weight:700; color:var(--ink); line-height:1.2;
}
.account-dash__who span{
font-size:13px; color:var(--muted);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.account-dash__edit-link{
flex:none; font-size:13px; font-weight:700; color:var(--red);
}
.account-stats{
display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
margin:0;
}
.account-stat{
display:grid; gap:4px; padding:16px 14px;
border-radius:var(--radius-s);
border:1px solid var(--border-bottom);
background:var(--paper);
color:inherit; transition:border-color .15s, transform .15s, box-shadow .15s;
min-width:0;
}
.account-stat__label,
.account-stat__hint{
overflow-wrap:anywhere;
}
.account-stat:hover{
border-color:rgba(237,28,36,.35);
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(11,11,12,.06);
}
.account-stat__icon{
width:36px; height:36px; border-radius:10px;
display:grid; place-items:center; margin-bottom:6px;
}
.account-stat__icon--red{ background:rgba(237,28,36,.12); color:var(--red); }
.account-stat__icon--ink{ background:rgba(11,11,12,.08); color:var(--ink); }
.account-stat__icon--gold{ background:rgba(217,119,6,.14); color:#B45309; }
.account-stat__num{
font-family:var(--sans); font-size:28px; font-weight:800; letter-spacing:-.03em;
color:var(--ink); line-height:1;
}
.account-stat__label{ font-size:14px; font-weight:700; color:var(--ink); }
.account-stat__hint{ font-size:12px; color:var(--muted); }
.account-tiles{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;
}
.account-tile{
display:grid; gap:8px; align-content:start;
padding:18px 16px;
border-radius:var(--radius-s);
border:1px solid var(--border-bottom);
background:var(--paper);
color:inherit; transition:border-color .15s, transform .15s, box-shadow .15s;
}
.account-tile:hover{
border-color:rgba(237,28,36,.35);
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(11,11,12,.06);
}
.account-tile__icon{ color:var(--red); }
.account-tile__title{
font-family:var(--sans); font-size:14px; font-weight:700; color:var(--ink);
}
.account-tile__dek{ font-size:13px; line-height:1.4; color:var(--muted); }
/* Premium status */
.account-premium-card{
background:
linear-gradient(120deg, rgba(217,119,6,.14), rgba(237,28,36,.08) 45%, var(--paper-2) 78%);
overflow:hidden; min-width:0;
}
.account-premium-card__inner{
display:flex; align-items:center; justify-content:space-between; gap:18px;
min-width:0; flex-wrap:wrap;
}
.account-premium-card__inner > div:first-child{ min-width:0; flex:1 1 200px; }
.account-premium-card__plan{
display:inline-flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px;
padding:13px 26px;
border-radius:var(--radius-s);
background:#fff; color:var(--ink);
border:2px solid var(--border-bottom);
font-size:14px; font-weight:500; line-height:1.15;
white-space:normal;
box-sizing:border-box; max-width:100%;
}
.account-premium-card__cta-row{
display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; justify-content:flex-end;
min-width:0; max-width:100%;
}
.account-premium-card__actions{
display:flex; flex-direction:column; align-items:flex-end; gap:8px;
flex:1 1 auto; min-width:0; max-width:100%;
}
.account-premium-card__plan-label{
font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--muted);
}
.account-premium-card__cta-row .btn{
box-sizing:border-box;
}
html[data-theme="dark"] .account-premium-card__plan{
background:var(--paper-2); color:var(--ink);
}
.account-premium-card__manage{
font-size:12px; font-weight:700; color:var(--muted);
}
.account-premium-card__manage:hover{ color:var(--red); }
/* Premium subscription manage (Spotify-style) */
.account-sub-hero .account-card__dek{ margin-bottom:18px; }
.account-sub-status__top{
display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
margin-bottom:10px;
}
.account-sub-badge{
display:inline-flex; align-items:center;
padding:4px 10px; border-radius:999px;
font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.account-sub-badge--off{
background:rgba(11,11,12,.08); color:var(--muted);
}
.account-sub-badge--on{
background:rgba(5,150,105,.14); color:#047857;
}
.account-sub-status__plan{
font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-.02em;
}
.account-sub-status__copy{
margin:0 0 16px; font-size:14px; line-height:1.45; color:var(--muted); max-width:52ch;
}
.account-sub-facts{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;
margin:0 0 18px;
}
.account-sub-facts > div{
padding:14px 14px; border-radius:var(--radius-s);
border:1px solid var(--border-bottom); background:var(--paper);
min-width:0;
}
.account-sub-facts dt{
margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--muted);
}
.account-sub-facts dd{
margin:0; font-size:14px; font-weight:700; color:var(--ink); line-height:1.35;
overflow-wrap:anywhere;
}
.account-pay-history__head,
.account-pay-history__list > li{
display:grid;
grid-template-columns:110px minmax(0,1fr) 96px 64px;
gap:12px; align-items:center;
}
.account-pay-history__head{
padding:0 0 8px; margin-bottom:4px;
border-bottom:1px solid var(--border-bottom);
font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--muted);
}
.account-pay-history__list{ list-style:none; margin:0; padding:0; }
.account-pay-history__list > li{
padding:14px 0; border-bottom:1px solid var(--border-bottom);
}
.account-pay-history__list > li:last-child{ border-bottom:0; }
.account-pay-history__date{ font-size:13px; color:var(--muted); }
.account-pay-history__desc{ display:grid; gap:2px; min-width:0; }
.account-pay-history__desc strong{ font-size:14px; font-weight:700; color:var(--ink); }
.account-pay-history__desc span{ font-size:12px; color:var(--muted); }
.account-pay-history__amt{ font-size:14px; font-weight:700; color:var(--ink); text-align:right; }
.account-pay-history__link{ font-size:13px; font-weight:700; color:var(--red); text-align:right; }
@media (max-width:720px){
.account-sub-facts{ grid-template-columns:1fr; }
.account-pay-history__head{ display:none; }
.account-pay-history__list > li{
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:
"date amt"
"desc desc"
"link link";
gap:6px 12px;
}
.account-pay-history__date{ grid-area:date; }
.account-pay-history__desc{ grid-area:desc; }
.account-pay-history__amt{ grid-area:amt; }
.account-pay-history__link{ grid-area:link; text-align:left; }
}
html[data-theme="dark"] .account-sub-badge--on{
background:rgba(16,185,129,.18); color:#6EE7B7;
}
/* Comment reputation */
.account-rep{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;
margin:0 0 20px;
}
.account-rep__item{
display:grid; gap:2px; padding:14px 12px;
border-radius:var(--radius-s);
border:1px solid var(--border-bottom);
background:var(--paper); text-align:center;
}
.account-rep__num{
font-family:var(--sans); font-size:24px; font-weight:800; letter-spacing:-.03em;
color:var(--ink); line-height:1;
}
.account-rep__label{ font-size:12px; font-weight:600; color:var(--muted); }
/* Recently read */
.account-section-head{ margin-bottom:4px; min-width:0; }
.account-read{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;
min-width:0; max-width:100%;
}
.account-read__item{
display:grid; gap:8px; color:inherit;
padding:10px; border-radius:var(--radius-s);
border:1px solid var(--border-bottom); background:var(--paper);
transition:border-color .15s, transform .15s, box-shadow .15s;
min-width:0; max-width:100%;
}
.account-read__item:hover{
border-color:rgba(237,28,36,.35);
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(11,11,12,.06);
}
.account-read__thumb{
aspect-ratio:16/10; overflow:hidden; border-radius:8px; background:var(--paper-2);
min-width:0; max-width:100%;
}
.account-read__thumb img{
width:100%; height:100%; object-fit:cover; display:block; max-width:100%;
}
.account-read__meta{ font-size:11px; font-weight:600; color:var(--muted); overflow-wrap:anywhere; }
.account-read__title{
font-family:var(--sans); font-size:14px; font-weight:700; line-height:1.35; color:var(--ink);
overflow-wrap:anywhere;
}
/* Following + newsletters */
.account-prefs{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px;
min-width:0;
}
.account-prefs__col{ min-width:0; max-width:100%; }
.account-prefs__col .account-card__dek{ margin-bottom:14px; }
.account-follow{ display:flex; flex-wrap:wrap; gap:8px; max-width:100%; }
.account-news__row span{ display:grid; gap:2px; min-width:0; overflow-wrap:anywhere; }
.account-follow__chip{
height:36px; padding:0 14px; border-radius:999px;
border:1px solid var(--border-bottom); background:var(--paper);
font:inherit; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;
transition:background .15s, border-color .15s, color .15s;
}
.account-follow__chip:hover{ border-color:var(--muted-light); }
.account-follow__chip.is-on{
border-color:transparent; background:rgba(237,28,36,.1); color:var(--red);
}
.account-news{ list-style:none; margin:0; padding:0; }
.account-news li{ border-top:1px solid var(--border-bottom); }
.account-news li:first-child{ border-top:none; }
.account-news__row{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:12px 0; cursor:pointer;
}
.account-news__row span{ display:grid; gap:2px; min-width:0; overflow-wrap:anywhere; }
.account-news__row strong{ font-size:14px; font-weight:700; color:var(--ink); }
.account-news__row span span{ font-size:12px; color:var(--muted); font-weight:500; }
.account-news__row input[type="checkbox"]{
appearance:none; flex:none; width:42px; height:24px; margin:0;
border-radius:999px; border:1px solid var(--border-bottom);
background:var(--paper); position:relative; cursor:pointer;
transition:background .15s, border-color .15s;
}
.account-news__row input[type="checkbox"]::after{
content:""; position:absolute; top:2px; left:2px;
width:18px; height:18px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(11,11,12,.2);
transition:transform .15s;
}
.account-news__row input[type="checkbox"]:checked{
background:var(--red); border-color:var(--red);
}
.account-news__row input[type="checkbox"]:checked::after{ transform:translateX(18px); }
.account-news__row input[type="checkbox"]:focus-visible{
outline:2px solid var(--red); outline-offset:2px;
}
.account-field{
display:flex; flex-direction:column; gap:6px; margin:0 0 14px;
min-width:0; max-width:100%;
}
.account-field span{ font-size:12px; font-weight:700; color:var(--ink); }
.account-field input{
height:44px; padding:0 14px;
border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper); color:var(--ink); font:inherit; font-size:15px;
max-width:100%; box-sizing:border-box;
}
.account-field input:focus{ outline:2px solid var(--red); outline-offset:1px; }
.account-field__hint{ margin:0; font-size:12px; color:var(--muted); line-height:1.35; }
.account-field-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; min-width:0; }
.account-swatches{ display:flex; flex-wrap:wrap; gap:8px; max-width:100%; }
.account-swatch{
width:32px; height:32px; border-radius:50%; border:2px solid transparent;
cursor:pointer; padding:0;
}
.account-swatch.is-active{ border-color:var(--ink); box-shadow:0 0 0 2px var(--paper-2); }
.account-seg{
display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px;
}
.account-seg button{
height:44px; border-radius:var(--radius-s);
border:1px solid var(--border-bottom); background:var(--paper);
font:inherit; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer;
}
.account-seg button.is-active{
border-color:var(--red); background:rgba(237,28,36,.08); color:var(--red);
}
.account-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.account-empty{
text-align:center; padding:48px 20px 40px; color:var(--muted);
}
.account-empty svg{ margin:0 auto 14px; color:var(--muted-light); display:block; }
.account-empty h2{
margin:0 0 8px; font-family:var(--sans); font-size:20px; font-weight:700; color:var(--ink);
}
.account-empty p{ margin:0 auto; max-width:36ch; font-size:14px; line-height:1.45; }
.account-demo{
margin-top:8px; padding-top:22px;
border-top:1px dashed var(--border-bottom);
}
.account-demo__label{
margin:0 0 4px;
font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--red);
}
.account-demo__note{
margin:0 0 14px; font-size:12px; line-height:1.4; color:var(--muted);
}
.account-tools{
display:flex; flex-wrap:wrap; gap:10px; align-items:center;
margin:0 0 14px;
}
.account-tools__search{
flex:1 1 220px; min-width:0;
display:flex; align-items:center; gap:10px;
height:42px; padding:0 12px;
border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper); color:var(--muted);
}
.account-tools__search svg{ flex:none; }
.account-tools__search input{
flex:1; min-width:0; height:100%; border:0; background:transparent;
font:inherit; font-size:14px; color:var(--ink); outline:none;
}
.account-tools__sort{
flex:none;
}
.account-tools__sort select{
height:42px; padding:0 36px 0 12px;
border:1px solid var(--border-bottom); border-radius:var(--radius-s);
background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
font:inherit; font-size:13px; font-weight:600; color:var(--ink);
appearance:none; cursor:pointer;
}
.account-tools__empty{
margin:8px 0 0; padding:18px 12px; text-align:center;
font-size:13px; color:var(--muted);
border:1px dashed var(--border-bottom); border-radius:var(--radius-s);
}
.account-list{ list-style:none; margin:0; padding:0; }
.account-list li{ border-top:1px solid var(--border-bottom); }
.account-list li:first-child{ border-top:none; }
.account-list li[hidden]{ display:none !important; }
.account-comment,
.account-saved{
display:grid; gap:5px; padding:14px 0; color:inherit;
}
.account-comment{
grid-template-columns:minmax(0,1fr) auto 40px; gap:8px; align-items:center;
}
.account-comment__main{
display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px; align-items:start;
color:inherit; min-width:0;
}
.account-comment__thumb{
aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-s); background:var(--paper);
}
.account-comment__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.account-comment__body{ display:grid; gap:4px; min-width:0; }
.account-comment__main:hover .account-comment__story{ color:var(--ink-hover); }
.account-comment__likes{
display:inline-flex; align-items:center; gap:6px;
min-width:52px; padding:8px 10px;
border-radius:var(--radius-s);
background:var(--paper); border:1px solid var(--border-bottom);
font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap;
}
.account-comment__likes svg{ color:var(--muted); flex:none; }
.account-comment__delete{
flex:none; width:40px; height:40px; border:0; border-radius:var(--radius-s);
display:grid; place-items:center;
background:transparent; color:var(--muted-light); cursor:pointer;
transition:background .15s, color .15s;
}
.account-comment__delete:hover{
background:rgba(237,28,36,.08); color:var(--red);
}
.account-comment__delete:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.account-comment__meta,
.account-saved__meta{ font-size:12px; color:var(--muted); }
.account-comment__story{
font-family:var(--sans); font-size:13px; font-weight:600; line-height:1.35; color:var(--ink-2);
}
.account-comment p,
.account-saved h3{
margin:0; font-family:var(--sans); font-size:15px; font-weight:600; line-height:1.4; color:var(--ink);
}
.account-comment p{ font-weight:500; }
.account-saved{
grid-template-columns:minmax(0,1fr) 40px; gap:8px; align-items:center;
}
.account-saved__main{
display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:center;
color:inherit; min-width:0;
}
.account-saved__thumb{
aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-s); background:var(--paper);
}
.account-saved__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.account-saved__delete{
flex:none; width:40px; height:40px; border:0; border-radius:var(--radius-s);
display:grid; place-items:center;
background:transparent; color:var(--muted-light); cursor:pointer;
transition:background .15s, color .15s;
}
.account-saved__delete:hover{
background:rgba(237,28,36,.08); color:var(--red);
}
.account-saved__delete:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.account-saved__main:hover h3{ color:var(--ink-hover); }
.account-row{
display:grid; grid-template-columns:140px minmax(0,1fr);
gap:12px; align-items:center;
padding:12px 0; border-top:1px solid var(--border-bottom);
font-size:14px;
}
.account-row:first-of-type{ border-top:none; }
.account-row__label{ font-weight:700; color:var(--ink); }
.account-row__val{ color:var(--ink-2); min-width:0; }
.account-row__val a{ color:var(--red); font-weight:600; }
.account-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.account-pill{
display:inline-flex; align-items:center; gap:6px;
padding:6px 10px; border-radius:999px;
font-size:12px; font-weight:700;
background:var(--paper); border:1px solid var(--border-bottom); color:var(--muted);
}
.account-pill.is-on{ color:var(--ink); border-color:transparent; background:rgba(237,28,36,.08); color:var(--red); }
/* Connected accounts (NYT-style) */
.account-connect__group-label{
margin:22px 0 0;
padding-bottom:10px;
border-bottom:1px solid var(--border-bottom);
font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
color:var(--muted);
}
.account-connect{
list-style:none; margin:0; padding:0;
}
.account-connect__item{
display:grid;
grid-template-columns:40px minmax(0,1fr) auto;
gap:14px; align-items:center;
padding:16px 0;
border-bottom:1px solid var(--border-bottom);
}
.account-connect__item:last-child{ border-bottom:none; }
.account-connect__icon{
width:40px; height:40px; border-radius:50%;
display:grid; place-items:center;
background:var(--paper); border:1px solid var(--border-bottom);
}
.account-connect__icon img,
.account-connect__icon svg{ display:block; }
.account-connect__icon--apple{ background:#111; color:#fff; border-color:#111; }
.account-connect__copy{ display:grid; gap:3px; min-width:0; }
.account-connect__copy strong{
font-size:15px; font-weight:700; color:var(--ink);
}
.account-connect__copy span{
font-size:13px; line-height:1.4; color:var(--muted);
}
.account-connect__btn{
flex:none; height:36px; padding:0 16px;
border-radius:var(--radius-s); border:1px solid var(--ink);
background:var(--ink); color:#fff;
font:inherit; font-size:13px; font-weight:700; cursor:pointer;
white-space:nowrap;
}
.account-connect__btn:hover{ opacity:.92; }
.account-connect__btn--ghost{
background:transparent; color:var(--ink); border-color:var(--border-bottom);
}
.account-connect__btn--ghost:hover{
border-color:var(--red); color:var(--red); background:rgba(237,28,36,.05);
}
.account-connect__btn:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.account-danger{
margin-top:18px; padding-top:16px; border-top:1px solid var(--border-bottom);
}
.account-danger a, .account-danger button{
font-size:13px; font-weight:600; color:var(--muted);
background:none; border:0; padding:0; cursor:pointer; font:inherit;
}
.account-danger a:hover, .account-danger button:hover{ color:var(--red); }
@media (max-width:900px){
.account-page{ padding:12px 0 40px; overflow-x:clip; }
.account-page > .shell{ padding-inline:max(16px, var(--gutter)); min-width:0; max-width:var(--shell-max); box-sizing:border-box; }
.account-layout{ grid-template-columns:minmax(0,1fr); gap:12px; min-width:0; }
.account-main,
.account-panel.is-active,
#profile{ min-width:0; max-width:100%; overflow-x:clip; }
.account-side{
position:static; top:auto; z-index:auto;
padding:0;
border-radius:var(--radius-s);
border:1px solid var(--border-bottom);
margin:0 0 12px;
background:var(--paper-2);
box-shadow:none;
overflow:hidden;
}
.account-menu-toggle{
display:flex; flex-direction:column; align-items:stretch; gap:2px;
width:100%; padding:12px 14px;
border:0; background:var(--paper-2); color:var(--ink);
font:inherit; text-align:left; cursor:pointer;
min-height:56px;
}
.account-menu-toggle__meta{
font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--muted);
}
.account-menu-toggle__current{
display:flex; align-items:center; justify-content:space-between; gap:10px;
font-size:16px; font-weight:700; color:var(--ink); line-height:1.25;
}
.account-menu-toggle__chev{
flex:none; color:var(--muted);
transition:transform .2s ease;
}
.account-side.is-menu-open .account-menu-toggle__chev{ transform:rotate(180deg); }
.account-side.is-menu-open .account-menu-toggle{
border-bottom:1px solid var(--border-bottom);
}
.account-side__panel{
display:block;
max-height:0;
overflow:hidden;
opacity:0;
padding:0 8px;
transition:max-height .3s ease, opacity .2s ease, padding .2s ease;
}
.account-side.is-nav-jump .account-side__panel{
transition:none !important;
}
.account-side.is-menu-open .account-side__panel{
max-height:560px;
opacity:1;
padding:8px 8px 10px;
}
.account-side__user{
display:flex; padding:10px 8px 12px; margin-bottom:4px;
}
.account-nav{
flex-direction:column; flex-wrap:nowrap; gap:2px;
overflow:visible; padding:0;
scroll-snap-type:none;
}
.account-nav li{ flex:none; scroll-snap-align:unset; width:100%; }
.account-nav a{
white-space:normal; padding:12px 12px; font-size:14px; font-weight:500;
border:0; background:transparent; min-height:44px; width:100%;
}
.account-nav a.is-active{
border-color:transparent; background:rgba(237,28,36,.08);
}
.account-nav a svg{ display:block; }
.account-nav__foot{
display:block; margin-top:6px; padding-top:6px;
border-top:1px solid var(--border-bottom);
}
.account-nav__help{
width:100%; justify-content:flex-start; white-space:normal;
padding:12px; font-size:14px; min-height:44px;
border:0; border-radius:var(--radius-s);
background:transparent;
}
.account-nav__help svg{ display:block; }
.account-field-row{ grid-template-columns:1fr; }
.account-row{ grid-template-columns:1fr; gap:4px; padding:10px 0; }
.account-card{ padding:16px; border-radius:var(--radius-s); min-width:0; max-width:100%; box-sizing:border-box; overflow:hidden; }
.account-card + .account-card{ margin-top:12px; }
.account-card h1{ font-size:22px; }
.account-card h2{ font-size:17px; }
.account-card__dek{ margin-bottom:14px; max-width:none; font-size:13.5px; }
.account-welcome{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
gap:12px !important;
margin-bottom:14px;
}
.account-welcome__greet{ font-size:clamp(26px,7vw,32px); }
.account-welcome .btn,
.account-welcome__edit{
width:100% !important;
max-width:none !important;
margin:0 !important;
justify-content:center;
text-align:center;
min-height:48px;
padding:13px 18px;
}
.account-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; min-width:0; }
.account-stat{ padding:14px 12px; min-height:110px; min-width:0; box-sizing:border-box; }
.account-stat__num{ font-size:24px; }
.account-stat__label{ font-size:13px; }
.account-stat__hint{ font-size:11px; }
.account-rep{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.account-rep__item{ padding:12px 6px; }
.account-rep__num{ font-size:18px; }
.account-rep__label{ font-size:10px; line-height:1.25; }
.account-premium-card__inner{
flex-direction:column; align-items:stretch; gap:14px;
}
.account-premium-card__inner > div:first-child{ min-width:0; }
.account-premium-card__actions{
align-items:stretch; width:100%; max-width:100%;
}
.account-premium-card__cta-row{
display:flex; flex-direction:column; align-items:stretch; gap:8px;
width:100%;
}
.account-premium-card__plan,
.account-premium-card__cta-row .btn{
display:flex; width:100%; max-width:100%;
box-sizing:border-box;
justify-content:center; align-items:center; text-align:center;
min-height:48px; white-space:normal !important;
}
.account-premium-card__plan{
flex-direction:column; align-items:center; gap:2px;
padding:12px 14px;
}
.account-premium-card__manage{
text-align:center; display:block; padding:6px 0; width:100%;
}
.account-read{
grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; min-width:0;
}
.account-read__item{
display:grid; gap:8px; align-content:start;
padding:10px; border-radius:var(--radius-s);
border:1px solid var(--border-bottom); background:var(--paper);
grid-template-columns:unset; grid-template-areas:unset;
min-width:0; max-width:100%; box-sizing:border-box;
}
.account-read__item:hover{
border-color:rgba(237,28,36,.35);
transform:translateY(-1px);
box-shadow:0 8px 18px rgba(11,11,12,.06);
}
.account-read__item:last-child{ border-bottom:1px solid var(--border-bottom); padding-bottom:10px; }
.account-read__thumb{
grid-area:unset; aspect-ratio:16/10; border-radius:8px;
}
.account-read__meta{ grid-area:unset; font-size:10px; }
.account-read__title{ grid-area:unset; font-size:13px; line-height:1.3; }
.account-prefs{ grid-template-columns:1fr; gap:22px; }
.account-follow{ gap:8px; }
.account-follow__chip{ min-height:42px; padding:0 14px; font-size:13px; }
.account-swatch{ width:44px; height:44px; }
.account-seg button{ min-height:48px; }
.account-actions{ flex-direction:column; }
.account-actions .btn{ width:100%; justify-content:center; min-height:48px; }
.account-tools{ flex-direction:column; align-items:stretch; gap:8px; }
.account-tools__search{ flex-basis:auto; min-height:46px; }
.account-tools__sort select{ width:100%; min-height:46px; }
.account-comment{
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:
"main main"
"likes delete";
gap:10px 8px; align-items:center;
padding:14px 0;
}
.account-comment__main{
grid-area:main;
grid-template-columns:72px minmax(0,1fr); gap:10px;
}
.account-comment__likes{ grid-area:likes; justify-self:start; min-height:40px; }
.account-comment__delete{ grid-area:delete; justify-self:end; width:44px; height:44px; }
.account-comment p{ font-size:14px; }
.account-saved{
grid-template-columns:minmax(0,1fr) 44px;
padding:14px 0;
}
.account-saved__main{ grid-template-columns:72px minmax(0,1fr); gap:10px; }
.account-saved__delete{ width:44px; height:44px; }
.account-connect__item{
grid-template-columns:40px minmax(0,1fr);
gap:12px; padding:14px 0;
}
.account-connect__btn{
grid-column:1 / -1; width:100%; min-height:44px; margin-top:4px;
}
.account-help{ padding:16px; }
.account-help__panel{ padding:24px 18px 18px; width:min(100%, 420px); }
.account-gate{ margin:24px auto; padding:22px 16px; }
.account-field input{ font-size:16px; min-height:48px; }
.account-news__row{ gap:12px; padding:14px 0; }
.account-empty{ padding:32px 12px 28px; }
}
@media (max-width:560px){
.account-page{ padding:10px 0 36px; }
.account-stat{ min-height:0; padding:12px 10px; }
.account-stat__hint{ display:none; }
.account-welcome__greet{ font-size:28px; }
.account-card{ padding:14px; }
.account-read__title{ font-size:12.5px; }
.account-premium-card__plan{ padding:10px 12px; font-size:13px; }
.account-seg{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
/* ---- Mobile lead hero full-bleed + normal MPU under it ---- */
@media (max-width:860px){
.featured__hero{
grid-column:1 / -1;
width:calc(100% + 2 * var(--gutter)) !important;
margin-inline:calc(-1 * var(--gutter)) !important;
height:275px !important;
min-height:275px !important;
max-height:275px !important;
border-radius:0 !important;
}
.featured__hero > img{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
aspect-ratio:auto !important;
object-fit:cover;
}
.ad-wrap.ad-wrap--after-hero{
display:flex !important;
justify-content:center;
grid-column:1 / -1;
width:auto !important;
max-width:none;
margin:0 !important;
margin-inline:0 !important;
padding:14px 0 10px !important;
border-radius:0;
}
.ad-wrap--after-hero .ad-slot--billboard,
.ad-wrap--after-hero .ad-slot--billboard img{
width:300px !important;
max-width:300px !important;
height:auto !important;
min-height:0 !important;
border-radius:0;
}
.ad-wrap--after-hero .ad-slot--billboard img{
height:250px !important;
object-fit:cover;
}
/* Feed head: list | blocks toggle + see-all */
.section__head-actions{
display:flex;
align-items:center;
gap:10px;
margin-left:auto;
}
.view-toggle{
display:inline-flex;
align-items:center;
gap:1px;
padding:1px;
border:1px solid var(--border-bottom);
border-radius:6px;
background:var(--paper);
}
.view-toggle__btn{
appearance:none;
border:0;
background:transparent;
color:var(--muted);
width:28px;
height:26px;
display:grid;
place-items:center;
border-radius:5px;
cursor:pointer;
padding:0;
}
.view-toggle__btn.is-active{
background:var(--paper-2);
color:var(--ink);
}
.view-toggle__btn:focus-visible{
outline:2px solid var(--red);
outline-offset:1px;
}
/* Full-bleed lead covers + cover-cards (match hero) */
.featured__row2 .featured__mini--lead{
grid-column:1 / -1;
width:calc(100% + 2 * var(--gutter));
margin-inline:calc(-1 * var(--gutter));
border-radius:0;
}
.featured__row2 .featured__mini--lead .featured__thumb{
border-radius:0;
aspect-ratio:auto;
height:275px;
min-height:275px;
}
.vfeat .cover-card:first-child{
width:calc(100% + 2 * var(--gutter));
margin-inline:calc(-1 * var(--gutter));
}
.vfeat .cover-card:first-child .cover-card__media{
border-radius:0;
aspect-ratio:auto;
height:275px;
min-height:275px;
}
/* List view (default): Index-style rows under the lead */
html[data-feed-view="list"] .featured__row2{
grid-template-columns:1fr;
gap:0;
}
html[data-feed-view="list"] .featured__row2 .featured__mini:not(.featured__mini--lead){
display:grid;
grid-template-columns:92px minmax(0,1fr);
column-gap:12px;
row-gap:0;
align-items:center;
padding:12px 0;
border-bottom:1px solid var(--border-bottom);
}
html[data-feed-view="list"] .featured__row2 .featured__mini:not(.featured__mini--lead) .featured__thumb{
grid-row:1 / span 2;
width:92px;
aspect-ratio:1 / 1;
margin:0;
border-radius:var(--radius-s);
}
html[data-feed-view="list"] .featured__row2 .featured__mini:not(.featured__mini--lead) .featured__thumb > .tag,
html[data-feed-view="list"] .featured__row2 .featured__mini:not(.featured__mini--lead) .featured__thumb-badges{
display:none;
}
html[data-feed-view="list"] .featured__row2 .featured__mini:not(.featured__mini--lead) .featured__thumb > .gallery-badge,
html[data-feed-view="list"] .featured__row2 .featured__mini:not(.featured__mini--lead) .featured__thumb > .gallery-badge--lead{
top:6px; left:6px; right:auto; bottom:auto;
width:20px; height:20px;
}
html[data-feed-view="list"] .featured__row2 .featured__mini:not(.featured__mini--lead) .featured__thumb > .gallery-badge svg,
html[data-feed-view="list"] .featured__row2 .featured__mini:not(.featured__mini--lead) .featured__thumb > .gallery-badge--lead svg{
width:13px; height:13px; margin:0;
}
html[data-feed-view="list"] .featured__row2 .featured__mini:not(.featured__mini--lead) h4{
height:auto;
margin:0;
font-size:14.5px;
line-height:1.28;
font-weight:600;
-webkit-line-clamp:3;
}
html[data-feed-view="list"] .featured__row2 .featured__mini:not(.featured__mini--lead) .meta{
margin:4px 0 0;
padding:0;
font-size:12px;
}
html[data-feed-view="list"] .featured__row2 .featured__mini--lead{
margin-bottom:4px;
padding-bottom:0;
border-bottom:none;
}
/* vband list: first cover stays large; rest become compact rows */
html[data-feed-view="list"] .vfeat{
display:flex;
flex-direction:column;
gap:0;
}
html[data-feed-view="list"] .vfeat .cover-card:first-child{
margin-bottom:4px;
}
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child){
width:auto;
margin-inline:0;
padding:12px 0;
border-bottom:1px solid var(--border-bottom);
}
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__media{
display:grid;
grid-template-columns:92px minmax(0,1fr);
column-gap:12px;
align-items:center;
width:100%;
height:auto;
min-height:0;
aspect-ratio:auto;
border-radius:0;
background:transparent;
overflow:visible;
}
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__media > img{
position:relative;
inset:auto;
grid-column:1;
grid-row:1;
width:92px;
height:92px;
border-radius:var(--radius-s);
object-fit:cover;
}
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__scrim,
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__dek,
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .gallery-badge,
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .video-badge,
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .premium-mark{
display:none;
}
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body{
position:static;
grid-column:2;
grid-row:1;
padding:0;
gap:4px;
}
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body h3{
color:var(--ink);
font-size:14.5px;
line-height:1.28;
font-weight:600;
text-shadow:none;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__media > .tag,
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__media > .featured__thumb-badges{
top:6px; left:6px;
}
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__media > .tag,
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__media > .featured__thumb-badges .tag,
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__media > .featured__thumb-badges .premium-mark{
font-size:9px; height:20px; padding:0 6px;
}
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag{
position:relative; top:auto; left:auto;
margin:0 0 4px;
padding:0;
height:auto;
background:transparent;
box-shadow:none;
color:inherit;
font-size:11px; font-weight:800; letter-spacing:.02em;
text-transform:uppercase;
}
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--national{ color:var(--c-national); }
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--region{ color:var(--c-region); }
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--news{ color:var(--c-news); }
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--world{ color:var(--c-world); }
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--sport{ color:var(--c-sport); }
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--crime{ color:var(--c-crime); }
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--magazine{ color:var(--c-magazine); }
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--business{ color:var(--c-business); }
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--scitech{ color:var(--c-scitech); }
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--showbiz{ color:var(--c-showbiz); }
html[data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body .meta{
color:var(--muted);
font-size:12px;
}
html[data-feed-view="list"] .vrail{
display:flex;
flex-direction:column;
gap:0;
height:auto;
grid-template-columns:none;
}
html[data-feed-view="list"] .vrail__item{
display:grid;
grid-template-columns:92px minmax(0,1fr);
column-gap:12px;
align-items:center;
padding:12px 0;
border-top:none;
border-bottom:1px solid var(--border-bottom);
}
html[data-feed-view="list"] .vrail__thumb{
width:92px;
aspect-ratio:1 / 1;
border-radius:var(--radius-s);
}
html[data-feed-view="list"] .vrail__thumb > .tag{
top:4px; left:4px;
font-size:8.5px; padding:2px 5px;
}
html[data-feed-view="list"] .vrail__thumb .gallery-badge,
html[data-feed-view="list"] .vrail__thumb .video-badge{
display:none;
}
html[data-feed-view="list"] .vrail__body h3{
font-size:14.5px;
line-height:1.28;
font-weight:600;
}
/* ---- Site-wide list: Showbiz ---- */
html[data-feed-view="list"] .showbiz__grid{
grid-template-columns:1fr;
gap:0;
}
html[data-feed-view="list"] .showbiz-card--lead{
grid-column:1 / -1;
width:calc(100% + 2 * var(--gutter));
margin-inline:calc(-1 * var(--gutter));
margin-bottom:4px;
}
html[data-feed-view="list"] .showbiz-card--lead .showbiz-card__media{
border-radius:0;
aspect-ratio:auto;
height:275px;
}
html[data-feed-view="list"] .showbiz-card:not(.showbiz-card--lead){
display:grid;
grid-template-columns:92px minmax(0,1fr);
gap:0 12px;
align-items:center;
padding:12px 0;
border-bottom:1px solid var(--border-bottom);
}
html[data-feed-view="list"] .showbiz-card:not(.showbiz-card--lead) .showbiz-card__media{
grid-row:1 / span 3;
width:92px;
aspect-ratio:1 / 1;
border-radius:var(--radius-s);
}
html[data-feed-view="list"] .showbiz-card:not(.showbiz-card--lead) .showbiz-card__media .gallery-badge,
html[data-feed-view="list"] .showbiz-card:not(.showbiz-card--lead) .showbiz-card__stamp{
display:none;
}
html[data-feed-view="list"] .showbiz-card:not(.showbiz-card--lead) .showbiz-card__title{
margin:0;
font-size:14.5px;
line-height:1.28;
font-weight:600;
-webkit-line-clamp:3;
}
html[data-feed-view="list"] .showbiz-card:not(.showbiz-card--lead) .meta{
margin:4px 0 0;
font-size:12px;
}
/* ---- Site-wide list: Sport ---- */
html[data-feed-view="list"] .sport-grid{
display:flex;
flex-direction:column;
gap:0;
}
html[data-feed-view="list"] .sport-grid__feature{
width:calc(100% + 2 * var(--gutter));
margin-inline:calc(-1 * var(--gutter));
border-radius:0;
aspect-ratio:auto;
height:275px;
min-height:275px;
margin-bottom:4px;
}
html[data-feed-view="list"] .sport-grid .flat-card{
display:grid;
grid-template-columns:92px minmax(0,1fr);
column-gap:12px;
align-items:center;
min-height:0;
padding:12px 0;
border-radius:0;
background:transparent !important;
border-bottom:1px solid rgba(255,255,255,.14);
}
html[data-feed-view="list"] .sport-grid .flat-card::before,
html[data-feed-view="list"] .sport-grid .flat-card::after,
html[data-feed-view="list"] .sport-grid .flat-card__num{
display:none;
}
html[data-feed-view="list"] .sport-grid .flat-card__media{
position:relative;
inset:auto;
grid-column:1;
grid-row:1 / span 3;
width:92px;
height:92px;
aspect-ratio:1 / 1;
border-radius:var(--radius-s);
overflow:hidden;
}
html[data-feed-view="list"] .sport-grid .flat-card__media img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transform:none;
}
html[data-feed-view="list"] .sport-grid .flat-card .tag,
html[data-feed-view="list"] .sport-grid .flat-card h3,
html[data-feed-view="list"] .sport-grid .flat-card .meta{
position:relative;
grid-column:2;
}
html[data-feed-view="list"] .sport-grid .flat-card h3{
margin:0;
font-size:14.5px;
line-height:1.28;
font-weight:600;
}
html[data-feed-view="list"] .sport-grid .flat-card .meta{
margin:4px 0 0;
font-size:12px;
}
/* ---- Site-wide list: Lifestyle ---- */
html[data-feed-view="list"] .life__main{
display:flex;
flex-direction:column;
gap:0;
}
html[data-feed-view="list"] .life__head{
margin-bottom:0;
}
html[data-feed-view="list"] .life__top,
html[data-feed-view="list"] .life__tops,
html[data-feed-view="list"] .life__bottom{
display:flex;
flex-direction:column;
gap:0;
}
html[data-feed-view="list"] .life-feat{
width:calc(100% + 2 * var(--gutter));
margin-inline:calc(-1 * var(--gutter));
border-radius:0;
aspect-ratio:auto;
height:275px;
min-height:275px;
margin-bottom:4px;
}
html[data-feed-view="list"] .life-card{
display:grid;
grid-template-columns:92px minmax(0,1fr);
column-gap:0;
row-gap:0;
align-items:center;
padding:12px 0;
border-bottom:1px solid var(--border-bottom);
}
html[data-feed-view="list"] .life-card__media{
grid-column:1;
grid-row:1 / span 2;
justify-self:start;
width:92px;
max-width:92px;
height:92px;
min-height:92px;
aspect-ratio:1 / 1;
border-radius:var(--radius-s);
flex:none;
overflow:hidden;
}
html[data-feed-view="list"] .life-card .life-stamp{
display:none !important;
}
html[data-feed-view="list"] .life-card h3{
grid-column:2;
margin:0;
padding-left:12px;
font-size:14.5px;
line-height:1.28;
font-weight:600;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
}
html[data-feed-view="list"] .life-card .meta{
grid-column:2;
margin:4px 0 0;
padding-left:12px;
font-size:12px;
}
/* Recipes: match life-card list thumb size on mobile */
.life-recipe{
grid-template-columns:92px minmax(0,1fr);
gap:12px;
padding:12px 0;
}
.life-recipe__media{
width:92px;
max-width:92px;
height:92px;
min-height:92px;
aspect-ratio:1 / 1;
}
.life-recipe__body h4{
font-size:14.5px;
line-height:1.28;
font-weight:600;
-webkit-line-clamp:2;
}
/* Sci-Tech feat: title/stamp on image (mobile only; desktop unchanged) */
.scitech-card--feat{
position:relative;
display:block;
gap:0;
height:auto;
overflow:hidden;
}
.scitech-card--feat .scitech-card__media{
flex:none;
aspect-ratio:auto;
height:275px;
min-height:275px;
}
.scitech-card--feat .scitech-card__media::after{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:linear-gradient(180deg, rgba(6,6,7,0) 38%, rgba(6,6,7,.55) 70%, rgba(6,6,7,.9) 100%);
}
.scitech-card--feat .scitech-card__stamp{
position:absolute;
z-index:2;
left:12px;
top:12px;
display:inline-flex;
align-items:center;
margin:0;
padding:4px 9px;
border-radius:2px;
font-family:var(--sans);
font-size:10.5px;
letter-spacing:.07em;
background:var(--c-scitech);
color:#fff;
text-shadow:none;
}
.scitech-card--feat h3{
position:absolute;
z-index:2;
left:0;
right:0;
bottom:0;
margin:0;
padding:18px 14px 14px;
color:#fff;
font-size:17px;
line-height:1.25;
font-weight:700;
-webkit-line-clamp:3;
text-shadow:0 1px 10px rgba(6,6,7,.45);
}
.scitech-card--feat:hover h3{ color:#fff; }
/* ---- Site-wide list: Sci-Tech ---- */
html[data-feed-view="list"] .scitech-grid{
display:flex;
flex-direction:column;
gap:0;
grid-template-areas:none;
grid-template-columns:none;
}
html[data-feed-view="list"] .scitech-card--feat{
order:-1;
width:calc(100% + 2 * var(--gutter));
margin-inline:calc(-1 * var(--gutter));
margin-bottom:4px;
}
html[data-feed-view="list"] .scitech-card--feat .scitech-card__media{
border-radius:0;
aspect-ratio:auto;
height:275px;
min-height:275px;
}
html[data-feed-view="list"] .scitech-card:not(.scitech-card--feat){
display:grid;
grid-template-columns:92px minmax(0,1fr);
column-gap:0;
row-gap:0;
align-items:center;
padding:12px 0;
border-bottom:1px solid rgba(255,255,255,.14);
}
html[data-feed-view="list"] .scitech-card:not(.scitech-card--feat) .scitech-card__media{
grid-column:1;
grid-row:1;
justify-self:start;
width:92px;
max-width:92px;
aspect-ratio:1 / 1;
border-radius:var(--radius-s);
height:92px;
min-height:92px;
flex:none;
overflow:hidden;
}
html[data-feed-view="list"] .scitech-card:not(.scitech-card--feat) .scitech-card__stamp{
display:none !important;
}
html[data-feed-view="list"] .scitech-card:not(.scitech-card--feat) h3{
grid-column:2;
grid-row:1;
margin:0;
padding-left:12px;
font-size:14.5px;
line-height:1.28;
font-weight:600;
}
/* ---- Site-wide list: Marketing ---- */
html[data-feed-view="list"] .market__grid{
grid-template-columns:1fr;
gap:0;
}
html[data-feed-view="list"] .market-card{
display:grid;
grid-template-columns:92px minmax(0,1fr);
gap:0 12px;
align-items:center;
padding:12px 0;
border-bottom:1px solid var(--border-bottom);
}
html[data-feed-view="list"] .market-card__media{
grid-row:1 / span 2;
width:92px;
aspect-ratio:1 / 1;
border-radius:var(--radius-s);
}
html[data-feed-view="list"] .market-card__stamp{
display:none;
}
html[data-feed-view="list"] .market-card__title{
margin:0;
font-size:14.5px;
line-height:1.28;
font-weight:600;
-webkit-line-clamp:3;
}
/* ---- Site-wide list: category hub grids ---- */
html[data-feed-view="list"] .cat-grid{
grid-template-columns:1fr;
gap:0;
}
html[data-feed-view="list"] .cat-grid .featured__mini{
display:grid;
grid-template-columns:92px minmax(0,1fr);
column-gap:12px;
align-items:center;
padding:12px 0;
border-bottom:1px solid var(--border-bottom);
}
html[data-feed-view="list"] .cat-grid .featured__mini .featured__thumb{
grid-row:1 / span 2;
width:92px;
aspect-ratio:1 / 1;
margin:0;
border-radius:var(--radius-s);
}
html[data-feed-view="list"] .cat-grid .featured__mini .featured__thumb > .tag,
html[data-feed-view="list"] .cat-grid .featured__mini .featured__thumb-badges{
display:none;
}
html[data-feed-view="list"] .cat-grid .featured__mini h4{
height:auto;
margin:0;
font-size:14.5px;
line-height:1.28;
font-weight:600;
-webkit-line-clamp:3;
}
html[data-feed-view="list"] .cat-grid .featured__mini .meta{
margin:4px 0 0;
font-size:12px;
}
/* Blocks view: existing 2-col / stacked card grids */
html[data-feed-view="blocks"] .featured__row2{
grid-template-columns:1fr 1fr;
gap:12px;
}
html[data-feed-view="blocks"] .featured__row2 .featured__mini--lead{
grid-column:1 / -1;
margin-bottom:4px;
}
html[data-feed-view="blocks"] .vfeat .cover-card{
width:calc(100% + 2 * var(--gutter));
margin-inline:calc(-1 * var(--gutter));
}
html[data-feed-view="blocks"] .vfeat .cover-card .cover-card__media{
border-radius:0;
}
html[data-feed-view="blocks"] .vrail{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
html[data-feed-view="blocks"] .vrail__item{
display:flex;
flex-direction:column;
align-items:stretch;
gap:8px;
padding:0;
border-bottom:none;
}
html[data-feed-view="blocks"] .vrail__thumb{
width:100%;
aspect-ratio:4/3;
}
html[data-feed-view="blocks"] .showbiz__grid,
html[data-feed-view="blocks"] .market__grid,
html[data-feed-view="blocks"] .cat-grid{
grid-template-columns:1fr 1fr;
gap:14px;
}
html[data-feed-view="blocks"] .showbiz-card--lead{
grid-column:1 / -1;
}
html[data-feed-view="blocks"] .life__main{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
html[data-feed-view="blocks"] .life__head{ grid-column:1 / -1; }
html[data-feed-view="blocks"] .life__top,
html[data-feed-view="blocks"] .life__tops,
html[data-feed-view="blocks"] .life__bottom{ display:contents; }
html[data-feed-view="blocks"] .life-feat{ grid-column:1 / -1; }
html[data-feed-view="blocks"] .scitech-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-areas:
"feat feat"
"a b"
"c d"
"e f";
gap:14px;
}
}
@media (min-width:861px){
.view-toggle{ display:none !important; }
.section__head-actions{ display:contents; }
}
/* ---- Drawer product surface + article calm (mobile) ---- */
.mobile-nav__cta{
display:flex; flex-direction:column; align-items:stretch; gap:8px;
margin:0 0 16px; padding:16px 14px;
border-radius:var(--radius-s);
background:var(--red); color:#fff;
text-decoration:none;
}
.mobile-nav__cta strong{
font-family:var(--sans); font-size:16px; font-weight:700; line-height:1.25; letter-spacing:-.01em;
}
.mobile-nav__cta > span:not(.mobile-nav__cta-btn){
font-size:13px; font-weight:500; line-height:1.4; color:rgba(255,255,255,.88);
}
.mobile-nav__cta-btn{
display:inline-flex; align-items:center; justify-content:center;
margin-top:4px; padding:11px 14px;
border-radius:var(--radius-s);
background:#fff; color:var(--red);
font-family:var(--sans); font-size:14px; font-weight:700;
}
.mobile-nav__cta:hover{ color:#fff; }
.mobile-nav__cta:hover .mobile-nav__cta-btn{ background:#f3f3f3; }
.mobile-nav__utility{
display:flex; align-items:flex-end; justify-content:flex-start; gap:8px;
padding:0 0 14px; margin:0 0 6px;
border-bottom:1px solid var(--border-bottom);
}
.mobile-nav__utility .theme-switch{ margin-right:auto; }
.mobile-nav__utility .view-toggle{
flex:none;
align-self:flex-end;
height:38px;
padding:3px;
box-sizing:border-box;
}
.mobile-nav__utility .view-toggle__btn{
width:32px; height:32px;
}
.mobile-nav__utility .mobile-nav__icon{
align-self:flex-end;
width:38px; height:38px;
}
.mobile-nav__premium{ display:none !important; }
.mobile-nav__body{ padding:16px 16px 28px; }
.mobile-nav__link,
.mobile-nav__row > .mobile-nav__link{
font-size:16px; font-weight:600; padding:14px 2px; letter-spacing:-.015em;
}
.mobile-nav__row{ min-height:50px; }
.mobile-nav__row > span.mobile-nav__link{
font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.mobile-nav__acc{ width:44px; height:44px; }
.mobile-nav__acc svg{ width:18px; height:18px; }
.mobile-nav__sub{
padding:0 2px 12px 12px;
margin:0 0 2px;
border-left:2px solid var(--border-bottom);
}
.mobile-nav__sub a{
font-size:14px; font-weight:500; padding:9px 4px; color:var(--ink-2);
}
.mobile-nav__links--sec .mobile-nav__link{
font-size:14px; font-weight:600; color:var(--ink-2); padding:11px 2px;
}
.mobile-nav__sep{ margin:14px 0; }
@media (max-width:860px){
.article-content{
font-size:18.5px;
line-height:1.75;
}
.article-content p{ margin:0 0 1.25em; }
.article-inline-related-wrap{ margin:1.8em 0; }
.article-inline-related__label{
margin:0 0 10px;
font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:none; color:var(--ink);
}
.article-inline-related{
border:none; border-radius:0;
border-left:3px solid var(--red);
background:var(--paper-2);
}
.article-inline-related a{
display:block; grid-template-columns:none; gap:0;
padding:14px 14px 14px 16px;
}
.article-inline-related__media{ display:none; }
.article-inline-related__txt{
padding:0; gap:6px;
}
.article-inline-related__txt .kicker{ display:none; }
.article-inline-related__txt b{
font-family:var(--sans); font-size:16px; font-weight:700; line-height:1.3;
}
.article-inline-related__dek{ display:none; }
.article-share--bar{
gap:6px;
}
.article-share--bar .article-share__btn{
width:32px; height:32px;
border-radius:6px;
background:transparent;
border:1.5px solid var(--ink);
color:var(--ink);
}
.article-share--bar .article-share__btn svg{
width:14px; height:14px;
}
.article-share--bar .article-share__btn:hover{
background:var(--paper-2);
color:var(--ink);
border-color:var(--ink);
}
.article-share--bar .article-share__btn.is-saved{
color:var(--red); border-color:var(--red);
}
}
/* =====================================================================
WEATHER PAGE (vremenska-prognoza)
===================================================================== */
.wx-page{ padding-bottom:72px; }
.wx-hero{
position:relative;
overflow:hidden;
background:
radial-gradient(120% 80% at 10% -10%, rgba(237,28,36,.12), transparent 55%),
radial-gradient(90% 70% at 100% 0%, rgba(11,78,162,.10), transparent 50%),
linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
border-bottom:1px solid var(--border-bottom);
}
.wx-hero__glow{
display:none;
pointer-events:none;
position:absolute;
right:-8%;
top:50%;
width:min(58vw, 280px);
height:min(58vw, 280px);
color:var(--muted-light);
opacity:0;
transform:translate(40%, -50%);
z-index:0;
}
.wx-hero__glow svg{
width:100%;
height:100%;
display:block;
}
.wx-hero__inner{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.9fr);
gap:36px;
align-items:end;
padding:48px var(--gutter) 40px;
}
.wx-hero__kicker{
margin:0 0 10px;
font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:var(--red);
}
.wx-hero__copy h1{
margin:0 0 10px;
font-family:var(--serif);
font-size:clamp(36px, 5vw, 56px);
font-weight:700;
line-height:1.05;
letter-spacing:-.02em;
}
.wx-hero__dek{
margin:0;
max-width:36ch;
font-size:15px; line-height:1.55;
color:var(--muted);
}
.wx-now{
display:grid;
grid-template-columns:auto auto 1fr;
gap:18px 20px;
align-items:center;
padding:8px 0;
}
.wx-now__icon{
width:72px; height:72px;
color:var(--red);
}
.wx-now__icon svg{ width:100%; height:100%; display:block; }
.wx-now__temp{
font-family:var(--serif);
font-size:clamp(64px, 8vw, 92px);
font-weight:700;
line-height:.9;
letter-spacing:-.04em;
color:var(--ink);
}
.wx-now__temp span{ display:inline-block; }
.wx-now__temp sup{
font-size:.42em;
font-weight:600;
vertical-align:super;
margin-left:2px;
}
.wx-now__cond{
margin:0 0 8px;
font-size:18px; font-weight:600;
text-transform:lowercase;
color:var(--ink-2);
}
.wx-now__stats{
display:flex; flex-wrap:wrap; gap:10px 18px;
margin:0 0 8px;
font-size:13px; color:var(--muted);
}
.wx-now__stats b{ color:var(--ink); font-weight:700; }
.wx-now__updated{
margin:0;
font-size:12px; letter-spacing:.04em; text-transform:uppercase;
color:var(--muted-light);
}
.wx-body{ padding:28px var(--gutter) 0; }
.wx-cities{
display:flex; flex-wrap:wrap; gap:8px;
margin:0 0 32px;
}
.wx-chip{
appearance:none; border:1px solid var(--border-bottom);
background:var(--paper-2); color:var(--ink);
font:inherit; font-size:13px; font-weight:700;
letter-spacing:.02em;
padding:9px 14px;
border-radius:3px;
cursor:pointer;
transition:background .15s, color .15s, border-color .15s;
}
.wx-chip:hover{ border-color:var(--ink-hover); color:var(--ink-hover); }
.wx-chip.is-active{
background:var(--ink); color:var(--paper-2); border-color:var(--ink);
}
.wx-chip.is-active:hover{ color:var(--paper-2); }
.wx-section-head{
display:flex; align-items:baseline; justify-content:space-between; gap:16px;
margin:0 0 16px;
padding-bottom:10px;
border-bottom:1px solid var(--border-bottom);
}
.wx-section-head h2{
margin:0;
font-family:var(--serif);
font-size:22px; font-weight:700;
}
.wx-section-head p{
margin:0;
font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
color:var(--muted-light);
}
.wx-daily{ margin:0 0 40px; }
.wx-daily__grid{
display:grid;
grid-template-columns:repeat(7, minmax(0,1fr));
gap:0;
border:1px solid var(--border-bottom);
background:var(--paper-2);
}
.wx-day{
display:flex; flex-direction:column; align-items:center; gap:10px;
padding:18px 10px 16px;
text-align:center;
border-right:1px solid var(--border-bottom);
min-width:0;
}
.wx-day:last-child{ border-right:0; }
.wx-day__name{
font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:var(--muted);
}
.wx-day__icon{
width:28px; height:28px; color:var(--red);
}
.wx-day__icon svg{ width:100%; height:100%; display:block; }
.wx-day__temps{
display:flex; gap:8px; align-items:baseline;
font-size:14px; font-weight:700;
}
.wx-day__max{ color:var(--red); }
.wx-day__min{ color:#0B6E99; }
[data-theme="dark"] .wx-day__min{ color:#6eb8d8; }
.wx-trends{ margin:0 0 40px; }
.wx-trends__toggles{
display:flex; flex-wrap:wrap; gap:8px;
margin:0 0 14px;
padding:0;
background:transparent;
border-radius:0;
width:auto;
max-width:100%;
}
.wx-trends__tog{
appearance:none; border:1px solid var(--border-bottom);
background:var(--paper-2);
color:var(--ink);
font:inherit; font-size:13px; font-weight:700;
letter-spacing:.02em;
padding:9px 14px;
border-radius:3px;
cursor:pointer;
white-space:nowrap;
transition:background .15s, color .15s, border-color .15s;
}
.wx-trends__tog:hover{ border-color:var(--ink-hover); color:var(--ink-hover); }
.wx-trends__tog.is-active{
background:var(--ink);
color:var(--paper-2);
border-color:var(--ink);
}
.wx-trends__tog.is-active:hover{ color:var(--paper-2); }
.wx-trends__metric-label{
margin:0 0 10px;
font-size:15px; font-weight:700;
color:var(--ink-2);
}
.wx-trends__chart{
width:100%;
overflow-x:auto;
border:1px solid var(--border-bottom);
background:var(--paper-2);
-webkit-overflow-scrolling:touch;
}
.wx-trends__chart svg{
display:block;
width:100%;
min-width:720px;
height:auto;
}
.wx-trends__legend{
list-style:none; margin:12px 0 0; padding:0;
display:flex; flex-wrap:wrap; gap:14px 22px;
font-size:12px; color:var(--muted);
}
.wx-trends__legend li{ display:inline-flex; align-items:center; gap:8px; }
.wx-trends__leg{ display:inline-block; width:22px; height:10px; flex:none; }
.wx-trends__leg--line{
height:0; border-top:2.5px solid var(--ink);
position:relative;
}
.wx-trends__leg--line::after{
content:""; position:absolute; left:50%; top:50%;
width:7px; height:7px; border-radius:50%;
background:var(--ink); transform:translate(-50%,-50%);
}
.wx-trends__leg--band{ background:rgba(11,78,162,.16); }
.wx-trends__leg--avg{
height:0; border-top:2px dashed var(--muted-light);
}
[data-theme="dark"] .wx-trends__leg--band{ background:rgba(110,184,216,.22); }
.wx-hourly{ margin:0 0 28px; }
.wx-hourly__scroll{
display:flex; gap:0;
overflow-x:auto; scrollbar-width:thin;
border:1px solid var(--border-bottom);
background:var(--paper-2);
}
.wx-hour{
flex:none;
display:flex; flex-direction:column; align-items:center; gap:8px;
width:72px;
padding:16px 8px;
border-right:1px solid var(--border-bottom);
text-align:center;
}
.wx-hour__time{
font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--muted);
}
.wx-hour__icon{
width:22px; height:22px; color:var(--red);
}
.wx-hour__icon svg{ width:100%; height:100%; display:block; }
.wx-hour__temp{
font-size:15px; font-weight:800; color:var(--ink);
}
.wx-source{
margin:0;
font-size:12px; color:var(--muted-light);
}
.wx-source a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.wx-source a:hover{ color:var(--red); }
.wx-page.is-loading .wx-now,
.wx-page.is-loading .wx-daily__grid,
.wx-page.is-loading .wx-trends__chart,
.wx-page.is-loading .wx-hourly__scroll{ opacity:.55; transition:opacity .2s; }
@media (max-width:900px){
.wx-hero__glow{
display:block;
animation:wx-glow-in .9s cubic-bezier(.22,1,.36,1) .15s forwards;
}
@keyframes wx-glow-in{
from{ opacity:0; transform:translate(40%, -50%); }
to{ opacity:.1; transform:translate(0, -50%); }
}
@media (prefers-reduced-motion:reduce){
.wx-hero__glow{
animation:none;
opacity:.1;
transform:translate(0, -50%);
}
}
.wx-hero__inner{
grid-template-columns:1fr;
gap:28px;
padding:36px var(--gutter) 28px;
}
.wx-now{
grid-template-columns:auto 1fr;
grid-template-rows:auto auto;
}
.wx-now__icon{ grid-row:1 / span 2; align-self:center; width:56px; height:56px; }
.wx-now__temp{ grid-column:2; }
.wx-now__meta{ grid-column:2; }
.wx-daily__grid{
display:flex; overflow-x:auto; scrollbar-width:thin;
}
.wx-day{
flex:none; width:88px;
border-right:1px solid var(--border-bottom);
}
.wx-cities{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-bottom:24px; }
.wx-cities::-webkit-scrollbar{ display:none; }
.wx-chip{ flex:none; }
.wx-trends__toggles{
width:100%;
max-width:100%;
overflow-x:auto;
flex-wrap:nowrap;
scrollbar-width:none;
}
.wx-trends__toggles::-webkit-scrollbar{ display:none; }
}
/* =====================================================================
OBITUARIES
===================================================================== */
.obit-page{ padding-bottom:72px; background:var(--paper); }
.obit-hero{
border-bottom:1px solid var(--border-bottom);
background:
linear-gradient(180deg, rgba(11,11,12,.03), transparent 70%),
var(--paper-2);
}
.obit-hero__inner{
display:flex; align-items:flex-end; justify-content:space-between; gap:28px;
padding:42px var(--gutter) 32px;
}
.obit-hero__kicker{
margin:0 0 10px;
font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
color:var(--muted);
}
.obit-hero__copy h1{
margin:0 0 10px;
font-family:var(--serif);
font-size:clamp(34px, 5vw, 52px);
font-weight:700; line-height:1.05; letter-spacing:-.02em;
}
.obit-hero__dek{
margin:0; max-width:42ch;
font-size:15px; line-height:1.55; color:var(--muted);
}
.obit-hero__cta{
flex:none;
display:inline-flex; align-items:center; gap:10px;
padding:14px 18px;
border:1.5px solid var(--ink);
background:var(--ink); color:var(--paper-2);
font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
transition:background .15s, color .15s, border-color .15s;
}
.obit-hero__cta:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.obit-toolbar{
display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
padding:22px var(--gutter) 8px;
}
.obit-tabs{
display:flex; flex-wrap:wrap; gap:4px 18px;
border-bottom:1px solid var(--border-bottom);
width:100%;
max-width:520px;
}
.obit-tabs__btn{
appearance:none; border:0; background:transparent;
padding:10px 0 12px;
font:inherit; font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:var(--muted);
border-bottom:2px solid transparent;
margin-bottom:-1px;
cursor:pointer;
}
.obit-tabs__btn:hover{ color:var(--ink); }
.obit-tabs__btn.is-active{ color:var(--red); border-bottom-color:var(--red); }
.obit-toolbar__right{
display:flex; align-items:center; gap:16px; margin-left:auto;
}
.obit-date{
margin:0;
font-family:var(--serif);
font-size:clamp(22px, 3vw, 32px);
font-weight:700; letter-spacing:-.02em;
}
.obit-loc select{
appearance:none;
min-width:180px;
padding:10px 34px 10px 12px;
border:1px solid var(--border-bottom);
border-radius:3px;
background:var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
font:inherit; font-size:13px; color:var(--ink);
}
.obit-masonry{
column-count:3;
column-gap:18px;
padding:18px var(--gutter) 8px;
}
.obit-card{
break-inside:avoid;
display:flex; flex-direction:column; align-items:center;
gap:10px;
margin:0 0 18px;
padding:22px 18px 20px;
background:var(--paper-2);
border:1px solid var(--border-bottom);
text-align:center;
}
.obit-card[hidden]{ display:none; }
.obit-card__label{
margin:0;
font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:var(--red);
}
.obit-card__intro{
margin:0;
font-size:12.5px; line-height:1.45; color:var(--muted);
max-width:34ch;
}
.obit-card__photo{
margin:6px 0 2px;
width:118px;
}
.obit-card__photo img{
display:block; width:100%; height:auto;
aspect-ratio:3/4; object-fit:cover;
border-radius:2px;
filter:grayscale(.15);
}
.obit-card__name{
margin:4px 0 0;
font-family:var(--serif);
font-size:18px; font-weight:700; letter-spacing:.02em;
text-transform:uppercase; line-height:1.2;
}
.obit-card__dates{
margin:0;
font-size:12.5px; font-weight:600; color:var(--muted);
}
.obit-card__body{
margin:2px 0 0;
font-size:13.5px; line-height:1.55; color:var(--ink-2);
max-width:36ch;
}
.obit-card__sig{
margin:4px 0 0;
font-size:12px; line-height:1.45; font-weight:600; color:var(--ink);
max-width:36ch;
}
.obit-card__loc{
margin:6px 0 0;
font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--muted-light);
}
.obit-daynav{
display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
padding:8px var(--gutter) 4px;
}
.obit-daynav__btn{
appearance:none;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
min-width:162px; height:40px; padding:0 16px;
border:1px solid var(--border-bottom);
border-radius:3px;
background:var(--paper-2);
color:var(--ink);
font:inherit; font-size:13px; font-weight:700;
cursor:pointer;
transition:border-color .15s, color .15s, background .15s;
}
.obit-daynav__btn svg{ flex:none; }
.obit-daynav__btn:hover:not(:disabled){
border-color:var(--ink); color:var(--ink);
}
.obit-daynav__btn:disabled{
opacity:.4; cursor:not-allowed;
}
.obit-daynav__btn:focus-visible{
outline:2px solid var(--red); outline-offset:2px;
}
.obit-publish{
margin-top:28px;
padding:0 var(--gutter);
}
.obit-publish__inner{
display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
padding:28px 26px;
border:1px solid var(--border-bottom);
background:
radial-gradient(80% 120% at 100% 0%, rgba(237,28,36,.08), transparent 55%),
var(--paper-2);
}
.obit-publish__kicker{
margin:0 0 8px;
font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:var(--red);
}
.obit-publish__inner h2{
margin:0 0 8px;
font-family:var(--serif); font-size:28px; font-weight:700;
}
.obit-publish__inner p{
margin:0; max-width:48ch;
font-size:14.5px; line-height:1.5; color:var(--muted);
}
.obit-publish__actions{ display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:980px){
.obit-masonry{ column-count:2; }
}
@media (max-width:700px){
.obit-hero__inner{ flex-direction:column; align-items:flex-start; padding:32px var(--gutter) 24px; }
.obit-toolbar{ align-items:stretch; }
.obit-toolbar__right{ width:100%; justify-content:space-between; margin-left:0; }
.obit-masonry{ column-count:1; }
.obit-date{ font-size:22px; }
}
/* =====================================================================
OBITUARIES — PUBLISH WIZARD
===================================================================== */
.obit-submit{ padding-bottom:72px; background:var(--paper); }
.obit-submit__top{
width:100%;
border-bottom:1px solid var(--border-bottom);
}
.obit-submit__top-inner{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:12px 16px;
padding-block:16px 12px;
}
.obit-submit__back{
display:inline-flex; align-items:center; gap:8px;
width:max-content;
font-size:13px; font-weight:700; color:var(--muted);
justify-self:start;
}
.obit-submit__back:hover{ color:var(--red); }
.obit-steps{
display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;
grid-column:1 / -1;
justify-self:stretch;
}
@media (min-width:900px){
.obit-steps{
grid-column:2;
justify-self:center;
}
}
.obit-steps__item{
appearance:none; border:0; background:transparent;
display:inline-flex; align-items:center; gap:7px;
padding:6px 0;
font:inherit; font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
color:var(--muted-light);
cursor:pointer;
}
.obit-steps__item span{
width:20px; height:20px; border-radius:999px;
display:inline-flex; align-items:center; justify-content:center;
border:1px solid currentColor;
font-size:10px;
}
.obit-steps__item.is-active{ color:var(--red); }
.obit-steps__item.is-done{ color:var(--ink); }
.obit-steps__item:disabled{ cursor:default; opacity:.55; }
.obit-panel{ padding:24px var(--gutter) 0; }
.obit-panel[hidden]{ display:none !important; }
.obit-submit .article-main{
max-width:none;
width:100%;
}
.obit-submit .obit-pay__card{
border:0; background:transparent; padding:0;
}
.obit-panel__title{
margin:0 0 6px;
font-family:var(--serif); font-size:clamp(24px, 3.2vw, 32px); font-weight:700;
}
.obit-panel__dek{
margin:0 0 16px;
color:var(--muted);
font-size:14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.obit-formats{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:10px;
align-items:stretch;
width:100%;
min-height:520px;
}
.obit-formats__col{
display:flex; flex-direction:column; gap:8px;
min-height:0;
}
.obit-formats__col--full{ min-height:100%; }
.obit-formats__row{
display:flex; gap:8px;
min-height:0;
}
.obit-formats__row--h9{ flex:9 1 0; }
.obit-formats__row--h5{ flex:6 1 0; }
.obit-fmt--half{ flex:14 1 0; }
.obit-fmt--quarter{ flex:9 1 0; }
.obit-fmt--full{ flex:1 1 auto; height:100%; min-height:0; }
.obit-fmt{
appearance:none; border:1.5px solid var(--border-bottom);
background:var(--paper-2);
display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:4px;
padding:8px 6px;
box-sizing:border-box;
overflow:hidden;
cursor:pointer;
transition:border-color .15s, background .15s, box-shadow .15s;
flex:1 1 auto;
min-width:0; min-height:0;
width:100%;
position:relative;
border-radius: var(--radius-s);
}
.obit-fmt:hover{ border-color:var(--ink-hover); }
.obit-fmt.is-active{
border-color:var(--red);
background:var(--paper-2);
box-shadow:inset 0 0 0 1px var(--red);
}
.obit-fmt__box{
width:28px; height:28px; flex:0 0 auto;
background:linear-gradient(180deg, #d8d4cc, #c4bfb5);
border-radius:2px;
position:relative;
}
.obit-fmt__label{
font-size:12px; font-weight:700; letter-spacing:.02em;
color:var(--ink);
text-align:center;
line-height:1.15;
max-width:100%;
flex:0 0 auto;
}
.obit-fmt__price{
display:inline-block;
flex:0 0 auto;
padding:2px 6px;
border:1px solid var(--border-bottom);
background:var(--paper-2);
color:var(--ink-2);
font-size:12px; font-weight:500; letter-spacing:.02em;
white-space:nowrap;
line-height:1.25;
}
.obit-fmt.is-active .obit-fmt__price{
border-color:var(--red);
color:var(--red);
background:var(--paper);
}
/* Short rows: keep a compact icon so label + price still fit */
.obit-formats__row--h5 .obit-fmt__box,
.obit-fmt.obit-formats__row--h5 .obit-fmt__box{
width:22px; height:22px;
}
.obit-formats__row--h5 .obit-fmt,
.obit-fmt.obit-formats__row--h5{
gap:3px;
padding:6px;
}
.obit-nav{
display:flex; justify-content:space-between; align-items:center; gap:12px;
margin-top:28px; padding-bottom:8px;
}
.obit-nav--stack{ justify-content:flex-end; flex-wrap:wrap; }
.obit-pay-btn{ background:#1f8a3b; border-color:#1f8a3b; }
.obit-pay-btn:hover{ background:#176e2e; border-color:#176e2e; }
.obit-form{ display:flex; flex-direction:column; gap:18px; max-width:820px; }
.obit-form__error{
margin:0 0 16px;
padding:12px 14px;
border:1px solid var(--red);
background:color-mix(in srgb, var(--red) 8%, var(--paper-2));
color:var(--ink);
font-size:14px; font-weight:700; line-height:1.4;
}
.obit-form__error[hidden]{ display:none !important; }
.obit-field input.is-invalid,
.obit-field textarea.is-invalid,
.obit-field select.is-invalid{
border-color:var(--red);
background:color-mix(in srgb, var(--red) 5%, var(--paper-2));
}
.obit-form__grid{
display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;
}
.obit-form__grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.obit-field{ display:flex; flex-direction:column; gap:7px; }
.obit-label{
font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
color:var(--ink-2);
display:flex; justify-content:space-between; gap:10px;
}
.obit-label em{ color:var(--red); font-style:normal; }
.obit-count{ font-weight:600; color:var(--muted-light); text-transform:none; letter-spacing:0; }
.obit-field input[type="text"],
.obit-field input[type="tel"],
.obit-field input[type="email"],
.obit-field input[type="date"],
.obit-field input[type="number"],
.obit-field select,
.obit-field textarea,
.obit-preview__right input{
width:100%;
padding:11px 12px;
border:1px solid var(--border-bottom);
border-radius:3px;
background:var(--paper-2);
color:var(--ink);
font:inherit; font-size:14px;
}
.obit-field textarea{ resize:vertical; min-height:96px; }
.obit-seg{ display:flex; flex-wrap:wrap; gap:8px; }
.obit-seg__btn{
appearance:none;
border:1px solid var(--border-bottom);
background:var(--paper-2);
padding:10px 14px;
font:inherit; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
color:var(--ink); cursor:pointer;
}
.obit-seg__btn.is-active{ background:var(--ink); color:var(--paper-2); border-color:var(--ink); }
.obit-upload{ display:flex; gap:14px; align-items:flex-start; }
.obit-upload__box{
width:110px; height:110px;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
border:1px dashed var(--border-bottom);
background:var(--paper);
color:var(--muted);
font-size:12px; font-weight:700;
cursor:pointer;
}
.obit-upload__plus{ font-size:28px; line-height:1; color:var(--ink); }
.obit-upload__preview img{ width:110px; height:110px; object-fit:cover; border-radius:2px; display:block; }
.obit-radios{ display:flex; flex-direction:column; gap:8px; margin-top:10px; font-size:13.5px; color:var(--ink-2); }
.obit-radios label{ display:flex; gap:8px; align-items:flex-start; }
.obit-preview{
display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.9fr); gap:28px; align-items:start;
}
.obit-preview__right{
display:flex; flex-direction:column; gap:14px;
min-width:0;
}
.obit-card--preview{ max-width:420px; margin:0; }
.obit-side__title{
margin:0;
font-family:var(--serif); font-size:22px; font-weight:700;
}
.obit-price{ margin:0; }
.obit-price > div{
display:flex; justify-content:space-between; gap:12px;
padding:10px 0;
border-bottom:1px solid var(--border-bottom);
font-size:14px;
}
.obit-price dt{ color:var(--muted); }
.obit-price__total strong{ font-size:18px; }
.obit-side__req{ margin:4px 0 0; color:var(--red); font-size:13px; font-weight:700; }
.obit-side__note{ margin:4px 0 0; font-size:13px; color:var(--muted); line-height:1.45; }
.obit-side__stack{
display:flex; flex-direction:column; gap:10px;
}
.obit-side__stack .obit-field{ margin:0; }
.obit-preview__right input{
padding:12px 14px;
}
.obit-side__tips{
list-style:none; margin:4px 0 0; padding:0;
display:flex; flex-direction:column; gap:8px;
font-size:12.5px; line-height:1.45; color:var(--muted);
}
.obit-preview__right .obit-nav{ margin-top:8px; }
.obit-pay{ max-width:560px; margin:0 auto; }
.obit-pay__card{
padding:24px;
background:var(--paper-2);
border:1px solid var(--border-bottom);
}
.obit-pay__brand{
display:flex; justify-content:space-between; gap:12px;
margin:0 0 18px; padding-bottom:12px;
border-bottom:1px solid var(--border-bottom);
font-size:13px; font-weight:700;
}
.obit-pay__bank{ color:#f0c400; background:#111; padding:4px 8px; }
.obit-pay__meta{ margin:0 0 18px; }
.obit-pay__meta > div{
display:flex; justify-content:space-between; gap:12px;
padding:7px 0; font-size:13.5px;
border-bottom:1px solid var(--border-bottom);
}
.obit-pay__meta dt{ color:var(--muted); }
.obit-pay__submit{ width:100%; margin-top:8px; background:#f0c400; border-color:#f0c400; color:#111; }
.obit-pay__submit:hover{ background:#ddb400; border-color:#ddb400; color:#111; }
.obit-pay__warn{
margin:14px 0 0; padding:10px 12px;
background:var(--paper); border:1px solid var(--border-bottom);
font-size:12.5px; color:var(--muted); line-height:1.45;
}
.obit-pay__alt{ margin:14px 0 0; font-size:13px; color:var(--muted); text-align:center; }
.obit-link{
appearance:none; border:0; background:none; padding:0;
color:var(--red); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer;
}
.obit-pay__logos{
margin:16px 0 0;
display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 22px;
}
.obit-pay__logos img{
display:block;
height:28px; width:auto;
object-fit:contain;
}
.obit-pay__done{ text-align:center; padding:28px 10px; }
.obit-pay__done h2{ margin:0 0 10px; font-family:var(--serif); font-size:28px; }
.obit-pay__done p{ margin:0 0 18px; color:var(--muted); }
@media (max-width:980px){
.obit-formats{
grid-template-columns:1fr 1fr;
min-height:400px;
}
.obit-formats__col--full{ grid-column:1 / -1; min-height:180px; }
.obit-preview{ grid-template-columns:1fr; }
.obit-panel__dek{ white-space:normal; }
}
@media (max-width:700px){
.obit-submit__top-inner{
grid-template-columns:1fr;
}
.obit-formats{
grid-template-columns:1fr;
min-height:0;
gap:12px;
}
.obit-formats__col,
.obit-formats__col--left,
.obit-formats__col--mid,
.obit-formats__col--full{
min-height:0;
gap:10px;
}
.obit-formats__col--full{ grid-column:auto; }
/* Let tiles size to content instead of crushing short rows */
.obit-formats__row--h9,
.obit-formats__row--h5,
.obit-fmt.obit-formats__row--h9,
.obit-fmt.obit-formats__row--h5,
.obit-fmt--half,
.obit-fmt--quarter,
.obit-fmt--full{
flex:0 0 auto;
height:auto;
}
.obit-fmt{
padding:14px 10px;
gap:6px;
min-height:92px;
}
.obit-formats__row--h5 .obit-fmt,
.obit-fmt.obit-formats__row--h5{
padding:12px 10px;
min-height:84px;
}
.obit-formats__row--h5 .obit-fmt__box,
.obit-fmt.obit-formats__row--h5 .obit-fmt__box{
width:24px; height:24px;
}
.obit-fmt--full{ min-height:140px; }
.obit-form__grid,
.obit-form__grid--3{ grid-template-columns:1fr; }
.obit-steps{ gap:4px 12px; }
.obit-steps__item{ font-size:10.5px; }
}
/* Theme-aware logo pair: dark wordmark in light theme, light wordmark in dark theme */
.logo-theme--dark{ display:none; }
html[data-theme="dark"] .logo-theme--light{ display:none; }
html[data-theme="dark"] .logo-theme--dark{ display:block; }
/* =====================================================================
HEADER LAYOUT "Logo left, menu beside it" (News. — Header → Header layout; body.header-inline)
One bar: menu button, logo, section links, icons. The mega menus still span the full width
(the sticky header is their containing block). Narrower screens use the side menu.
===================================================================== */
@media (min-width:1101px){
.header-inline .site-header{
display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; column-gap:14px;
background:var(--header-bg); padding-inline:var(--gutter);
}
.header-inline .brand-bar,
.header-inline .brand-bar__inner{ display:contents; }
.header-inline .menu-toggle{ grid-column:1; grid-row:1; margin-left:-10px; }
.header-inline .brand{ grid-column:2; grid-row:1; justify-self:start; margin-right:10px; }
.header-inline .brand-bar__actions{ grid-column:4; grid-row:1; }
.header-inline .nav-bar{ grid-column:3; grid-row:1; position:static; min-width:0; background:transparent; border:0; }
/* More sections than fit: the row scrolls sideways (fading out at the edge) instead of running
under the icons. The mega menus are not clipped: their containing block is the header. */
.header-inline .nav-bar__inner{
max-width:none; margin:0; padding:0; height:62px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent);
mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
.header-inline .nav-bar__inner.is-end{ -webkit-mask-image:none; mask-image:none; }
.header-inline .nav-bar__utility{ display:none; }
.header-inline .nav-link{ height:62px; padding-inline:10px; color:#fff; }
.header-inline.header-light .nav-link{ color:var(--ink); }
.header-inline .nav-bar__links > .nav-link:first-child{ padding-left:10px; }
.header-inline .nav-bar__links > .nav-link:first-child::after{ left:10px; }
}
@media (max-width:1100px){
.header-inline .nav-bar{ display:none; }
.header-inline .brand-bar__inner{ grid-template-columns:auto 1fr auto; }
.header-inline .brand{ grid-column:2; justify-self:start; margin-left:6px; }
}
/* =====================================================================
NOTIFICATION BAR + EXTRA HEADER BUTTON (News. — Header; inc/header-extras.php)
===================================================================== */
.notice-bar{ background:var(--notice-bg, var(--red)); color:var(--notice-ink, #fff); font-family:var(--sans); }
.notice-bar[hidden]{ display:none; }
.notice-bar__inner{ display:flex; align-items:center; gap:14px; min-height:42px; padding-block:6px; }
.notice-bar__text{ margin:0; flex:1; min-width:0; font-size:13.5px; font-weight:600; line-height:1.35; }
.notice-bar__btn{
flex:none; display:inline-flex; align-items:center; height:30px; padding:0 16px; border-radius:99px;
background:#fff; color:#111; font-size:12.5px; font-weight:700; white-space:nowrap; transition:transform .15s, box-shadow .15s;
}
.notice-bar__btn:hover{ color:#111; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.18); }
.notice-bar__close{
flex:none; display:grid; place-items:center; width:30px; height:30px; margin-right:-6px; padding:0; border:0; border-radius:50%;
background:transparent; color:inherit; cursor:pointer; opacity:.8;
}
.notice-bar__close:hover{ opacity:1; background:rgba(255,255,255,.16); }
.notice-bar__close svg{ width:16px; height:16px; }
@media (max-width:600px){
.notice-bar__inner{ gap:10px; }
.notice-bar__text{ font-size:12.5px; }
.notice-bar__btn{ padding:0 12px; font-size:12px; }
}
.header-btn{
display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border:1px solid rgba(255,255,255,.4);
border-radius:99px; color:#fff; font-family:var(--sans); font-size:13px; font-weight:600; white-space:nowrap;
transition:background .15s, border-color .15s, opacity .15s;
}
.header-btn svg{ flex:none; width:17px; height:17px; }
.header-btn:hover{ color:#fff; border-color:#fff; background:rgba(255,255,255,.12); }
.header-btn--filled{ background:var(--red); border-color:var(--red); }
.header-btn--filled:hover{ background:var(--red-deep); border-color:var(--red-deep); }
.header-btn--light{ background:#fff; border-color:#fff; color:#111; }
.header-btn--light:hover{ background:rgba(255,255,255,.85); color:#111; }
.header-btn--text{ border-color:transparent; padding:0 4px; }
.header-btn--text:hover{ background:transparent; border-color:transparent; opacity:.72; }
html:not([data-theme="dark"]) .header-light .header-btn:not(.header-btn--filled){ color:var(--ink); border-color:rgba(0,0,0,.2); }
html:not([data-theme="dark"]) .header-light .header-btn.header-btn--light{ background:#fff; border-color:rgba(0,0,0,.2); color:var(--ink); }
html:not([data-theme="dark"]) .header-light .header-btn.header-btn--light:hover{ background:var(--paper-2); border-color:rgba(0,0,0,.32); color:var(--ink); }
@media (max-width:600px){
.header-btn:not(.header-btn--noicon){ width:36px; padding:0; justify-content:center; }
.header-btn:not(.header-btn--noicon) span{ display:none; }
.header-btn--noicon{ height:30px; padding:0 10px; font-size:12px; }
}
/* Optional phone logo (News. → Brand → Phone logo) */
.brand__set{ display:flex; }
.brand__set--mob{ display:none; }
@media (max-width:860px){
.brand__set--desk{ display:none; }
.brand__set--mob{ display:flex; }
}
/* =====================================================================
AD BLOCKER MESSAGE (News. → Ads → Ad blocker message; inc/header-extras.php + main.js)
===================================================================== */
.adblock-pop{
position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:16px;
background:rgba(10,10,12,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
opacity:0; transition:opacity .25s ease;
}
.adblock-pop[hidden]{ display:none; }
.adblock-pop.is-visible{ opacity:1; }
.adblock-pop__box{
position:relative; width:min(460px, 100%); padding:34px 30px 28px; border-radius:18px; text-align:center;
background:var(--adblock-bg, var(--red)); color:#fff; box-shadow:0 30px 80px rgba(0,0,0,.35);
transform:translateY(12px) scale(.98); transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.adblock-pop.is-visible .adblock-pop__box{ transform:none; }
.adblock-pop__icon{ display:inline-grid; place-items:center; margin-bottom:12px; opacity:.95; }
.adblock-pop__title{ margin:0 0 10px; font-family:var(--display); font-size:26px; font-weight:800; line-height:1.15; color:#fff; }
.adblock-pop__text{ margin:0 0 22px; font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.92); }
.adblock-pop__actions{ display:flex; flex-direction:column; gap:10px; }
.adblock-pop__btn{
display:flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:99px;
border:1.5px solid rgba(255,255,255,.7); background:transparent; color:#fff; font-family:var(--sans); font-size:14.5px; font-weight:700; cursor:pointer;
}
.adblock-pop__btn:hover{ color:#fff; background:rgba(255,255,255,.14); }
.adblock-pop__btn--main{ background:#fff; border-color:#fff; color:#111; }
.adblock-pop__btn--main:hover{ background:rgba(255,255,255,.88); color:#111; }
.adblock-pop__close{
position:absolute; top:12px; right:12px; display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:50%;
background:transparent; color:#fff; cursor:pointer; opacity:.85;
}
.adblock-pop__close:hover{ opacity:1; background:rgba(255,255,255,.16); }
html.adblock-lock, html.adblock-lock body{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){ .adblock-pop, .adblock-pop__box{ transition:none; } }
/* "Read also" with two to four stories (News. → Articles) */
.article-inline-related--list a{ grid-template-columns:84px minmax(0,1fr); }
.article-inline-related--list a + a{ border-top:1px solid var(--border-bottom); }
.article-inline-related--list .article-inline-related__txt{ padding-block:10px; }
.article-inline-related--list .article-inline-related__txt b{ font-size:14.5px; }
/* Listings: "Load more" / endless scroll (News. → Category pages & search; main.js) */
.paging-more{ display:flex; justify-content:center; margin:26px 0 10px; }
.paging-more[hidden]{ display:none; }
.paging-more .btn{ min-width:190px; justify-content:center; }
.paging-more.is-loading .btn{ opacity:.6; pointer-events:none; }
.paging-more.is-loading .btn::after{
content:""; width:14px; height:14px; margin-left:10px; border:2px solid currentColor; border-right-color:transparent;
border-radius:50%; animation:paging-spin .7s linear infinite;
}
@keyframes paging-spin{ to{ transform:rotate(360deg); } }
[data-paging] > .is-new{ animation:paging-in .35s ease both; }
@keyframes paging-in{ from{ opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion: reduce){ [data-paging] > .is-new{ animation:none; } }
/* =====================================================================
MARKETS BAR (News. → Header → Markets bar; template-parts/header/markets.php)
===================================================================== */
.markets{ background:var(--paper-2); border-bottom:1px solid var(--border-bottom); font-family:var(--sans); font-variant-numeric:tabular-nums; }
.markets__inner{ display:flex; align-items:center; gap:18px; min-height:40px; }
.markets__label{ flex:none; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.markets__list{ display:flex; gap:26px; flex:1; min-width:0; margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none; }
.markets__list::-webkit-scrollbar{ display:none; }
.markets__item{ flex:none; display:flex; align-items:baseline; gap:8px; font-size:13px; white-space:nowrap; }
.markets__name{ font-weight:700; color:var(--ink); }
.markets__val{ color:var(--ink-2, var(--ink)); }
.markets__chg{ font-size:12px; font-weight:700; }
.markets__chg span{ font-size:9px; margin-right:2px; }
.markets__chg--up{ color:#0F8A4B; }
.markets__chg--down{ color:#C62828; }
.markets__chg--flat{ color:var(--muted); }
html[data-theme="dark"] .markets__chg--up{ color:#3DDC84; }
html[data-theme="dark"] .markets__chg--down{ color:#FF6B6B; }
.markets__src{ flex:none; font-size:11px; color:var(--muted); }
/* Scrolling News. bar (Scrolling: slow / medium / fast). */
.markets__marquee{
flex:1; min-width:0; overflow:hidden;
-webkit-mask-image:linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
mask-image:linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.markets__list--scroll{ width:max-content; overflow:visible; flex:none; padding-right:26px; animation:scroll-left var(--markets-dur, 30s) linear infinite; }
.markets__marquee:hover .markets__list--scroll{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .markets__list--scroll{ animation:none; } }
/* TradingView data source: the ticker tape takes the list's place once loaded (58px tall). */
.markets--tv .markets__inner{ min-height:58px; } /* Same height before and after the widget: no layout shift. */
.markets__tv{ display:none; flex:1; min-width:0; }
.markets--tv.is-tv .markets__tv{
display:block; height:58px; overflow:hidden;
color-scheme:normal; /* Same scheme as the widget's page, else the browser paints the frame opaque (white in dark mode). */
-webkit-mask-image:linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
mask-image:linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); /* Tape fades in / out at the sides. */
}
.markets__tv iframe{ color-scheme:normal; }
.markets--tv.is-tv .markets__list, .markets--tv.is-tv .markets__src:not(.markets__src--tv){ display:none; }
.markets--tv:not(.is-tv) .markets__src--tv{ display:none; }
.markets__tv .tradingview-widget-container{ height:58px; transform:translateY(7px); } /* The tape sits high in its frame. */
.markets__src-short{ display:none; }
.markets__src a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:860px){
.markets__label, .markets__src{ display:none; }
.markets--tv.is-tv .markets__src--tv{ display:block; } /* The TradingView link must stay visible. */
.markets__src--tv .markets__src-long{ display:none; }
.markets__src--tv .markets__src-short{ display:inline; }
.markets__inner{ min-height:36px; }
.markets__list{ gap:20px; }
}
/* =====================================================================
SCORES BAR (News. → Header → Scores bar; template-parts/header/scores.php)
===================================================================== */
.scores{ background:var(--paper-2); border-bottom:1px solid var(--border-bottom); font-family:var(--sans); font-variant-numeric:tabular-nums; }
/* Both bars on: one row, the bars stacked in the same grid cell and rolling (main.js, [data-hbars]). */
.hbars{ position:relative; overflow:hidden; background:var(--paper-2); border-bottom:1px solid var(--border-bottom); }
.hbars__stack{ display:grid; }
.hbars__stack > .markets,
.hbars__stack > .scores{
grid-area:1 / 1; display:flex; align-items:center; border-bottom:0; background:transparent;
transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}
.hbars__stack > *{ width:100%; }
.hbars__stack > .scores{ transform:translateY(100%); opacity:0; visibility:hidden; }
.hbars.is-second .hbars__stack > .markets{ transform:translateY(-100%); opacity:0; visibility:hidden; }
.hbars.is-second .hbars__stack > .scores{ transform:none; opacity:1; visibility:visible; }
.hbars__stack > .markets, .hbars.is-second .hbars__stack > .scores{ transition-property:transform, opacity, visibility; }
.hbars__dots{
position:absolute; z-index:1; top:50%; transform:translateY(-50%); /* In the page gutter, right of the content. */
right:max(4px, calc((100% - var(--shell-max)) / 2 + var(--gutter) / 2 - 4px));
display:flex; flex-direction:column; gap:6px;
}
.hbars__dot{
width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
background:color-mix(in srgb, var(--ink) 25%, transparent);
}
.hbars__dot.is-active{ background:var(--ink); }
.hbars__dot:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
.hbars__stack > .markets, .hbars__stack > .scores{ transform:none !important; transition:opacity .3s ease, visibility .3s; }
}
.scores__inner{ display:flex; align-items:center; gap:16px; padding-block:8px; }
.scores__label{ flex:none; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl; transform:rotate(180deg); }
.scores__list{ display:flex; gap:8px; flex:1; min-width:0; margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none; }
.scores__list::-webkit-scrollbar{ display:none; }
.score{ display:flex; flex-direction:column; gap:3px; width:178px; padding:7px 10px 8px; border:1px solid var(--border-bottom); border-radius:var(--radius-s); background:var(--paper); color:var(--ink); }
a.score:hover{ border-color:var(--red); }
.score__meta{ display:flex; justify-content:space-between; gap:8px; font-size:10.5px; color:var(--muted); }
.score__comp{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.score__status{ flex:none; font-weight:700; text-transform:uppercase; }
.score--live .score__status{ color:#E0262F; }
.score--live .score__status::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:currentColor; vertical-align:1px; animation:score-pulse 1.6s ease-in-out infinite; }
@keyframes score-pulse{ 50%{ opacity:.3; } }
.score__row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; line-height:1.3; }
.score__team{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.score__goals{ flex:none; min-width:1.2em; text-align:right; font-weight:800; }
.score__row.is-lose{ color:var(--muted); font-weight:500; }
@media (max-width:860px){ .scores__label{ display:none; } .score{ width:160px; } }
@media (prefers-reduced-motion: reduce){ .score--live .score__status::before{ animation:none; } }
/* =====================================================================
READABLE TEXT ON CATEGORY COLORS (WCAG AA, 4.5:1)
Small text in a category color, and small labels with white text on it, use the color with a
quarter black mixed in (light mode). Large areas keep the bright color. Custom category colors
follow automatically (inc/colors.php copies the --business rules). :where() keeps the priority
of the original rules, so design styles (Pop, Business, …) keep their own label colors.
===================================================================== */
:where(html:not([data-theme="dark"])) .kicker--news{ color:color-mix(in srgb, var(--c-news) 75%, #000); }
:where(html:not([data-theme="dark"])) .kicker--national{ color:color-mix(in srgb, var(--c-national) 75%, #000); }
:where(html:not([data-theme="dark"])) .kicker--region{ color:color-mix(in srgb, var(--c-region) 75%, #000); }
:where(html:not([data-theme="dark"])) .kicker--world{ color:color-mix(in srgb, var(--c-world) 75%, #000); }
:where(html:not([data-theme="dark"])) .kicker--sport{ color:color-mix(in srgb, var(--c-sport) 75%, #000); }
:where(html:not([data-theme="dark"])) .kicker--magazine{ color:color-mix(in srgb, var(--c-magazine) 75%, #000); }
:where(html:not([data-theme="dark"])) .kicker--showbiz{ color:color-mix(in srgb, var(--c-showbiz) 75%, #000); }
:where(html:not([data-theme="dark"])) .kicker--business{ color:color-mix(in srgb, var(--c-business) 75%, #000); }
:where(html:not([data-theme="dark"])) .kicker--scitech{ color:color-mix(in srgb, var(--c-scitech) 75%, #000); }
:where(html) .tag--news{ background:color-mix(in srgb, var(--c-news) 75%, #000); }
:where(html) .tag--national{ background:color-mix(in srgb, var(--c-national) 75%, #000); }
:where(html) .tag--region{ background:color-mix(in srgb, var(--c-region) 75%, #000); }
:where(html) .tag--world{ background:color-mix(in srgb, var(--c-world) 75%, #000); }
:where(html) .tag--sport{ background:color-mix(in srgb, var(--c-sport) 75%, #000); }
:where(html) .tag--magazine{ background:color-mix(in srgb, var(--c-magazine) 75%, #000); }
:where(html) .tag--showbiz{ background:color-mix(in srgb, var(--c-showbiz) 75%, #000); }
:where(html) .tag--business{ background:color-mix(in srgb, var(--c-business) 75%, #000); }
:where(html) .tag--scitech{ background:color-mix(in srgb, var(--c-scitech) 75%, #000); }
:where(html:not([data-theme="dark"])) .headline-tag--video{ color:color-mix(in srgb, var(--red) 82%, #000); }
.scitech-card__stamp{ color:color-mix(in srgb, var(--c-scitech) 55%, #fff); }
.vaside__num{ color:#857F73; }
html[data-theme="dark"] .vaside__num{ color:#6F6B62; }
/* Bottom phone menu (dark bar): a lighter shade of the brand color. */
@media (max-width:860px){
.mobile-tabbar__cta{ color:color-mix(in srgb, var(--red) 60%, #fff) !important; }
}
/* The featured Sci-Tech label is a badge on the picture only in the phone layout (see the max-width:860px block). */
@media (max-width:860px){
.scitech-card--feat .scitech-card__stamp{ background:color-mix(in srgb, var(--c-scitech) 72%, #000); }
}
/* Footer claim on black: a lighter brand shade, so darker brand colors stay readable (Newspaper keeps its red). */
.footer-hero__claim em{ color:color-mix(in srgb, var(--red) 62%, #fff); }
.style-newspaper .footer-hero__claim em{ color:var(--red); }
.author-story .meta{ color:var(--muted); }
/* Dark mode: category colors as text get a lighter shade, labels keep the darker background (white text). */
:where(html[data-theme="dark"]) .kicker--news{ color:color-mix(in srgb, var(--c-news) 55%, #fff); }
:where(html[data-theme="dark"]) .kicker--national{ color:color-mix(in srgb, var(--c-national) 55%, #fff); }
:where(html[data-theme="dark"]) .kicker--region{ color:color-mix(in srgb, var(--c-region) 55%, #fff); }
:where(html[data-theme="dark"]) .kicker--world{ color:color-mix(in srgb, var(--c-world) 55%, #fff); }
:where(html[data-theme="dark"]) .kicker--sport{ color:color-mix(in srgb, var(--c-sport) 55%, #fff); }
:where(html[data-theme="dark"]) .kicker--magazine{ color:color-mix(in srgb, var(--c-magazine) 55%, #fff); }
:where(html[data-theme="dark"]) .kicker--showbiz{ color:color-mix(in srgb, var(--c-showbiz) 55%, #fff); }
:where(html[data-theme="dark"]) .kicker--business{ color:color-mix(in srgb, var(--c-business) 55%, #fff); }
:where(html[data-theme="dark"]) .kicker--scitech{ color:color-mix(in srgb, var(--c-scitech) 55%, #fff); }
html[data-theme="dark"][data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--news{ color:color-mix(in srgb, var(--c-news) 55%, #fff); }
html[data-theme="dark"][data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--national{ color:color-mix(in srgb, var(--c-national) 55%, #fff); }
html[data-theme="dark"][data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--region{ color:color-mix(in srgb, var(--c-region) 55%, #fff); }
html[data-theme="dark"][data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--world{ color:color-mix(in srgb, var(--c-world) 55%, #fff); }
html[data-theme="dark"][data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--sport{ color:color-mix(in srgb, var(--c-sport) 55%, #fff); }
html[data-theme="dark"][data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--magazine{ color:color-mix(in srgb, var(--c-magazine) 55%, #fff); }
html[data-theme="dark"][data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--showbiz{ color:color-mix(in srgb, var(--c-showbiz) 55%, #fff); }
html[data-theme="dark"][data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--business{ color:color-mix(in srgb, var(--c-business) 55%, #fff); }
html[data-theme="dark"][data-feed-view="list"] .vfeat .cover-card:not(:first-child) .cover-card__body > .tag.tag--scitech{ color:color-mix(in srgb, var(--c-scitech) 55%, #fff); }
:where(html[data-theme="dark"]) .headline-tag--video{ color:color-mix(in srgb, var(--red) 55%, #fff); }
/* Category colors in the menu (News. → Theme & Colors): the underline of a menu item in its category color, in every design style. */
body.nav-cat-colors .nav-link--news::after{ background:var(--c-news); box-shadow:none; }
body.nav-cat-colors .nav-link--national::after{ background:var(--c-national); box-shadow:none; }
body.nav-cat-colors .nav-link--region::after{ background:var(--c-region); box-shadow:none; }
body.nav-cat-colors .nav-link--world::after{ background:var(--c-world); box-shadow:none; }
body.nav-cat-colors .nav-link--crime::after{ background:var(--c-crime); box-shadow:none; }
body.nav-cat-colors .nav-link--sport::after{ background:var(--c-sport); box-shadow:none; }
body.nav-cat-colors .nav-link--magazine::after{ background:var(--c-magazine); box-shadow:none; }
body.nav-cat-colors .nav-link--showbiz::after{ background:var(--c-showbiz); box-shadow:none; }
body.nav-cat-colors .nav-link--business::after{ background:var(--c-business); box-shadow:none; }
body.nav-cat-colors .nav-link--scitech::after{ background:var(--c-scitech); box-shadow:none; }
body.nav-cat-colors .nav-link--lifestyle::after{ background:var(--c-lifestyle); box-shadow:none; }
body.nav-cat-colors .nav-link--health::after{ background:var(--c-health); box-shadow:none; }
body.nav-cat-colors .nav-link--parenting::after{ background:var(--c-parenting); box-shadow:none; }