/* ============================================================
   The Frontline News — added features (TOI / Times Now inspired)
   Uses the site's existing palette tokens from styles.css.
   ============================================================ */

/* ---------- header utility cluster ---------- */
/* Scoped with .util-tools so it beats styles.css's `.header-tools button`. */
.util-tools{display:flex;gap:6px;align-items:stretch;margin-right:2px}
.util-tools .icon-tool{display:grid;place-items:center;width:44px;min-height:100%;border:1px solid #d8d2c4;border-radius:7px;background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;position:relative;transition:background .15s,border-color .15s}
.util-tools .icon-tool[data-bell]{background:var(--signal);border-color:var(--signal);color:#fff}
.util-tools .icon-tool svg{display:block}
.util-tools .icon-tool:hover{background:#f1ece1;border-color:#c3bbaa}
.util-tools .icon-tool[data-bell]:hover{background:#a8331a;border-color:#a8331a}
.util-tools .icon-tool[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:#fff}
.util-tools .icon-tool .badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--signal);color:#fff;font:700 10px/17px "Space Mono",monospace;text-align:center}
.util-tools .icon-tool.acct .acct-initial{display:none;width:24px;height:24px;border-radius:50%;background:var(--ochre);color:var(--ink);place-items:center;font:700 12px "Space Mono",monospace}
.util-tools .icon-tool.acct.is-in svg{display:none}
.util-tools .icon-tool.acct.is-in .acct-initial{display:grid}
@media(max-width:760px){.util-tools .icon-tool{width:38px}.util-tools .acct{display:none}}
@media(max-width:430px){.util-tools [data-bell]{display:none}.util-tools{gap:4px}.util-tools .icon-tool{width:34px}}

/* ---------- trending topics bar ---------- */
.topics-bar{position:sticky;top:142px;z-index:20;display:flex;align-items:center;gap:10px;overflow-x:auto;padding:11px 2.1vw;background:#ededed;border-top:1px solid #dcd6c9;border-bottom:1px solid #dcd6c9;scrollbar-width:none}
.topics-bar::-webkit-scrollbar{display:none}
.topics-label{flex:none;font:700 10px "Space Mono",monospace;letter-spacing:.18em;color:var(--ochre)}
.topic-chip{flex:none;border:1px solid #0000002e;background:transparent;color:var(--ink);border-radius:30px;padding:6px 13px;font:11px "Space Mono",monospace;cursor:pointer;transition:background .15s,color .15s}
.topic-chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:760px){.topics-bar{top:118px}}

/* ---------- stories layout + most-read sidebar ---------- */
.stories-layout{display:grid;grid-template-columns:1fr 320px;gap:34px;align-items:start}
.stories-main{min-width:0}
.trending{position:sticky;top:158px;background:var(--paper);border:1px solid #2221;border-radius:14px;padding:22px 20px;box-shadow:0 0 0 1px #2220}
.trending-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:6px}
.trending-head h3{font:800 22px "Archivo Black","DM Sans",sans-serif;letter-spacing:-.02em}
.trending-head span{font:10px "Space Mono",monospace;letter-spacing:.14em;color:var(--signal)}
.trend-row{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid #e6ddcf;text-decoration:none;color:var(--ink)}
.trend-row:last-child{border-bottom:0}
.trend-row b{font:800 26px "Archivo Black","DM Sans",sans-serif;color:#d8ccb8;line-height:.9;min-width:34px}
.trend-row:hover b{color:var(--signal)}
.trend-row p{font-size:15px;line-height:1.28;font-weight:600;margin-bottom:5px}
.trend-row:hover p{text-decoration:underline;text-underline-offset:2px}
.trend-row small{font:10px "Space Mono",monospace;letter-spacing:.06em;color:#8a7a6e;text-transform:uppercase}
@media(max-width:1080px){.stories-layout{grid-template-columns:1fr}.trending{position:static;margin-top:26px}}

/* ---------- card save + meta ---------- */
.card-save{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(20,12,8,.55);color:#fff;font-size:17px;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(3px);transition:background .15s,transform .1s}
.card-save:hover{background:rgba(20,12,8,.8)}
.card-save.is-saved{background:var(--signal);color:#fff}
.card-save:active{transform:scale(.9)}
.card-meta{display:block;font:11px "Space Mono",monospace;letter-spacing:.08em;color:#8a7a6e;text-transform:uppercase;margin:-12px 0 16px}

/* ---------- rails (web stories + video) ---------- */
.webstories-section,.video-section{background:var(--white);padding:26px 2.2vw 60px}
.video-section{background:#efe7d8}
.rail-head{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:22px}
.rail-head span{font:700 10px "Space Mono",monospace;letter-spacing:.2em;color:var(--signal)}
.rail-head h2{font-size:clamp(30px,4vw,52px);line-height:.9;letter-spacing:-.04em}

/* web stories rail */
.webstories-rail{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.ws-card{flex:none;width:180px;height:300px;border-radius:16px;border:0;cursor:pointer;position:relative;overflow:hidden;background-size:cover;background-position:center;color:#fff;text-align:left;box-shadow:0 6px 18px rgba(40,26,16,.18)}
.ws-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.05) 35%,rgba(0,0,0,.82))}
.ws-cardtag{position:absolute;top:12px;left:12px;z-index:1;background:var(--signal);padding:4px 8px;font:700 9px "Space Mono",monospace;letter-spacing:.08em}
.ws-cardtitle{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;font-size:17px;font-weight:700;line-height:1.15}
.ws-card:hover{transform:translateY(-3px);transition:transform .15s}

/* web stories fullscreen player */
.ws-player{position:fixed;inset:0;z-index:200;background:#0c0a08;display:grid;place-items:center}
.ws-frame{position:relative;width:min(430px,100vw);height:min(100dvh,764px);overflow:hidden;border-radius:14px}
.ws-stage{position:relative;width:100%;height:100%;margin:0;overflow:hidden;cursor:pointer;background:#000;touch-action:none}
.ws-stage img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.ws-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 45%,rgba(0,0,0,.85))}
.ws-copy{position:absolute;left:22px;right:22px;bottom:40px;color:#fff}
.ws-copy .ws-cardtag{position:static;display:inline-block;margin-bottom:12px}
.ws-copy h2{font-size:30px;line-height:1.04;letter-spacing:-.03em;margin-bottom:12px}
.ws-copy p{font-size:15px;line-height:1.5;color:#eadfd2;margin-bottom:18px}
.ws-read{display:inline-block;background:#fff;color:var(--ink);padding:11px 18px;font:700 12px "Space Mono",monospace;text-decoration:none;border-radius:6px}
.ws-bars{position:absolute;top:12px;left:16px;right:16px;z-index:2;display:flex;gap:5px}
.ws-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.ws-bars i b{display:block;height:100%;width:0;background:#fff}
.ws-close{position:absolute;top:22px;right:14px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:24px;cursor:pointer}
.ws-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:28px;cursor:pointer}
.ws-prev{left:10px}.ws-next{right:10px}
@media(max-width:480px){.ws-nav{display:none}.ws-frame{width:100vw;height:100dvh;border-radius:0}}

/* video grid + mock player */
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.video-card{border:0;background:transparent;text-align:left;cursor:pointer;padding:0}
.vc-thumb{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background-size:cover;background-position:50% 20%;margin-bottom:12px}
.vc-thumb::after{content:"";position:absolute;inset:0;background:rgba(20,12,8,.15);transition:background .15s}
.video-card:hover .vc-thumb::after{background:rgba(20,12,8,.32)}
.vc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;font-size:18px;padding-left:3px}
.vc-dur{position:absolute;bottom:8px;right:8px;z-index:1;background:rgba(0,0,0,.75);color:#fff;padding:3px 7px;font:700 10px "Space Mono",monospace}
.video-card h3{font-size:17px;line-height:1.2;letter-spacing:-.02em;margin-bottom:5px}
.video-card small{font:10px "Space Mono",monospace;letter-spacing:.06em;color:#8a7a6e;text-transform:uppercase}
.video-modal{border:0;padding:0;width:min(880px,94vw);background:#000;border-radius:12px;overflow:hidden}
.video-modal::backdrop{background:rgba(12,8,6,.8)}
.vm-close{position:absolute;top:10px;right:12px;z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:24px;cursor:pointer}
.mock-player{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;display:grid;place-items:center}
.mock-player::after{content:"";position:absolute;inset:0;background:rgba(10,7,5,.45)}
.mock-player.playing::after{background:rgba(10,7,5,.15)}
.mp-play{position:relative;z-index:1;width:74px;height:74px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);font-size:24px;cursor:pointer;padding-left:4px}
.mp-bar{position:absolute;left:0;right:0;bottom:0;z-index:1;height:5px;background:rgba(255,255,255,.25)}
.mp-bar b{display:block;height:100%;width:0;background:var(--signal)}
.mp-meta{position:absolute;left:20px;bottom:18px;z-index:1;color:#fff}
.mp-meta .vc-tag{background:var(--signal);padding:4px 8px;font:700 9px "Space Mono",monospace;letter-spacing:.08em}
.mp-meta h3{font-size:20px;margin-top:10px;max-width:70%}
@media(max-width:900px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.video-grid{grid-template-columns:1fr}}

/* ---------- live market ticker ---------- */
.market-strip em{font-style:normal;font-weight:700}
.market-strip em.up{color:#8fd6a0}
.market-strip em.down{color:#f2a58c}
@keyframes mktflash{from{opacity:.35}to{opacity:1}}
.market-strip em.flash{animation:mktflash .45s ease-out}
#citySelect{background:transparent;border:0;color:inherit;font:inherit;font-weight:700;cursor:pointer;padding:2px 4px}
#citySelect option{color:#111}

/* ---------- breaking-alert banner ---------- */
.fln-alert{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:12px;max-width:min(560px,92vw);background:var(--ink);color:var(--paper);border-left:5px solid var(--signal);padding:14px 16px;border-radius:8px;box-shadow:0 12px 34px rgba(20,12,8,.4)}
.fln-alert b{font:700 10px "Space Mono",monospace;letter-spacing:.14em;color:var(--signal-lift);flex:none}
.fln-alert span{font-size:14px;line-height:1.35}
.fln-alert .x{margin-left:auto;flex:none;background:none;border:0;color:var(--paper);font-size:22px;cursor:pointer;line-height:1}

/* ---------- login dialog ---------- */
.fln-login{border:0;padding:0;width:min(420px,92vw);border-radius:14px;background:var(--paper)}
.fln-login::backdrop{background:rgba(12,8,6,.55)}
.login-card{padding:32px 30px 26px;position:relative}
.login-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center}
.login-x:hover{background:rgba(0,0,0,.07)}
.login-card h3{font-size:28px;letter-spacing:-.03em;margin-bottom:8px}
.login-card p{font-size:13.5px;line-height:1.5;color:#5a4a3e;margin-bottom:18px}
.login-card input{width:100%;border:0;border-bottom:2px solid var(--ink);background:transparent;padding:12px 2px;font-size:17px;outline:none;margin-bottom:22px}
.login-actions{display:flex;gap:10px;justify-content:flex-end}
.login-actions button{border:0;padding:12px 20px;font:700 12px "Space Mono",monospace;letter-spacing:.06em;cursor:pointer;border-radius:6px}
.login-actions .ghost{background:transparent;color:var(--ink)}
.login-actions .solid{background:var(--ink);color:var(--paper)}

/* ---------- lightbox ---------- */
.fln-lightbox{position:fixed;inset:0;z-index:210;margin:0;background:rgba(10,7,5,.92);display:grid;place-items:center;padding:5vw}
.fln-lightbox img{max-width:92vw;max-height:82vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.fln-lightbox figcaption{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#eadfd2;font:12px "Space Mono",monospace;padding:0 6vw}
.fln-lightbox .x{position:absolute;top:22px;right:24px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;cursor:pointer}

/* ---------- article: reading progress ---------- */
.read-progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--signal);z-index:60;transition:width .1s linear}

/* ---------- article: byline ---------- */
.byline{font:12px "Space Mono",monospace;letter-spacing:.06em;text-transform:uppercase;margin-top:14px;opacity:.85}

/* ---------- article aside: listen + share ---------- */
#pageListen{background:var(--ink);color:var(--paper);border:1px solid var(--ink);margin-top:10px;padding:12px;cursor:pointer;font:12px "Space Mono",monospace;letter-spacing:.04em}
#pageListen.playing{background:var(--signal);border-color:var(--signal);color:#fff}
#pageSave.is-saved{background:var(--signal);border-color:var(--signal);color:#fff}
.share-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.share-row .sh{display:grid;place-items:center;height:42px;margin:0;padding:0;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.share-row .sh svg{width:17px;height:17px;display:block}
.share-row .sh:hover{background:var(--ink);color:var(--paper)}
.share-row .wa:hover{background:#1fa35a;border-color:#1fa35a}
.share-row .li:hover{background:#0a66c2;border-color:#0a66c2}

/* ---------- article: live feed ---------- */
.live-feed{border:2px solid var(--signal);border-radius:12px;padding:20px 22px;margin-bottom:34px;background:#fff}
.live-head{display:flex;align-items:center;gap:12px;font:700 13px "Space Mono",monospace;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.live-dot{background:var(--signal);color:#fff;padding:3px 9px;font-size:10px;letter-spacing:.12em;position:relative}
.live-dot::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:6px;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.live-item{display:flex;gap:16px;padding:14px 0;border-top:1px solid #eadfce}
.live-item time{flex:none;width:88px;font:700 11px "Space Mono",monospace;color:var(--signal)}
.live-item p{font-size:15.5px;line-height:1.5}

/* ---------- article: gallery ---------- */
.gallery{margin:40px 0}
.gallery-head{font-size:22px;letter-spacing:-.02em;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:16px}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gallery-grid figure{margin:0;cursor:zoom-in}
.gallery-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;display:block}
.gallery-grid figcaption{font:10px "Space Mono",monospace;color:#8a7a6e;margin-top:6px;line-height:1.3}
@media(max-width:600px){.gallery-grid{grid-template-columns:1fr}}

/* ---------- article: next story ---------- */
.next-story{display:block;margin-top:40px;padding:24px 26px;background:var(--ink);color:var(--paper);border-radius:12px;text-decoration:none}
.next-story span{font:700 10px "Space Mono",monospace;letter-spacing:.18em;color:var(--ochre)}
.next-story b{display:block;font-size:26px;line-height:1.06;letter-spacing:-.03em;margin:8px 0 10px}
.next-story i{font:12px "Space Mono",monospace;font-style:normal;color:var(--haze)}
.next-story:hover b{text-decoration:underline;text-underline-offset:3px}

/* ---------- article: comments ---------- */
.comments{margin-top:46px;border-top:2px solid var(--ink);padding-top:26px}
.comments h3{font-size:24px;letter-spacing:-.02em;margin-bottom:18px;display:flex;align-items:baseline;gap:10px}
.comments h3 b{font:700 13px "Space Mono",monospace;color:#fff;background:var(--signal);padding:2px 9px}
#commentForm{display:grid;gap:10px;margin-bottom:26px}
#commentForm input,#commentForm textarea{border:1px solid #cdbda8;background:#fff;padding:12px 14px;font:inherit;font-size:15px;border-radius:8px;outline:none;resize:vertical}
#commentForm input:focus,#commentForm textarea:focus{border-color:var(--ink)}
#commentForm textarea{min-height:84px}
#commentForm button{justify-self:start;background:var(--ink);color:var(--paper);border:0;padding:12px 22px;font:700 12px "Space Mono",monospace;letter-spacing:.06em;cursor:pointer;border-radius:8px}
.comment{border-top:1px solid #e0d5c4;padding:16px 0}
.comment b{font-size:15px}
.comment time{font:10px "Space Mono",monospace;color:#8a7a6e;margin-left:10px;text-transform:uppercase}
.comment p{font-size:15px;line-height:1.5;margin-top:6px}
.no-comments{font-size:14px;color:#8a7a6e;font-style:italic}

/* ============================================================
   NIGHT MODE — darkens the light reading surfaces only;
   the branded colour panels already read well on dark.
   ============================================================ */
html[data-theme="night"] body{background:#120c09}
html[data-theme="night"] .stories-section,
html[data-theme="night"] .webstories-section,
html[data-theme="night"] .article-body,
html[data-theme="night"] .empty-state{background:#15100d;color:#efe7db}
html[data-theme="night"] .video-section{background:#0f0b08}
html[data-theme="night"] .section-intro,
html[data-theme="night"] .rail-head,
html[data-theme="night"] .gallery-head,
html[data-theme="night"] .comments{border-color:#4d3a2e}
html[data-theme="night"] .section-intro h2,
html[data-theme="night"] .section-intro p,
html[data-theme="night"] .rail-head h2,
html[data-theme="night"] .comments h3,
html[data-theme="night"] .standfirst,
html[data-theme="night"] .article-content,
html[data-theme="night"] .article-content #pageText p,
html[data-theme="night"] .video-card h3{color:#efe7db}
html[data-theme="night"] .story-card{background:#241c16;box-shadow:0 0 0 1px #ffffff12}
html[data-theme="night"] .story-card h3 a{color:#efe7db}
html[data-theme="night"] .trending{background:#241c16;border-color:#ffffff1a}
html[data-theme="night"] .trending-head{border-color:#efe7db}
html[data-theme="night"] .trending-head h3,
html[data-theme="night"] .trend-row{color:#efe7db}
html[data-theme="night"] .trend-row{border-color:#3a2d22}
html[data-theme="night"] .trend-row b{color:#5c4a38}
html[data-theme="night"] .filter-row button{color:#efe7db;border-color:#5c4a38}
html[data-theme="night"] .filter-row .active{background:var(--paper);color:var(--ink)}
html[data-theme="night"] .live-feed,
html[data-theme="night"] #commentForm input,
html[data-theme="night"] #commentForm textarea{background:#241c16;color:#efe7db}
html[data-theme="night"] .comment{border-color:#3a2d22}
html[data-theme="night"] .source-note{border-color:#5c4a38}
html[data-theme="night"] .card-meta,
html[data-theme="night"] .video-card small,
html[data-theme="night"] .trend-row small{color:#a8917d}
html[data-theme="night"] .topics-bar{background:var(--ink-deep);border-color:var(--rule)}
html[data-theme="night"] .topic-chip{color:var(--paper);border-color:rgba(243,235,214,.25)}
html[data-theme="night"] .topic-chip:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
html[data-theme="night"] .site-header{background:var(--ink);color:var(--paper);border-bottom-color:var(--rule)}
html[data-theme="night"] .header-tools button{background:#fff;color:var(--ink)}
html[data-theme="night"] .util-tools .icon-tool{border-color:rgba(243,235,214,.28);background:transparent;color:var(--paper)}
html[data-theme="night"] .util-tools .icon-tool[data-bell]{background:transparent;border-color:rgba(243,235,214,.28);color:var(--paper)}

/* ---------- editor's picks (in-focus news) — replaces Frontline TV ---------- */
.focus-section{background:#efe7d8;padding:34px 2.2vw 64px}
.video-card.news-card{display:block;text-decoration:none;color:var(--ink)}
.video-card.news-card:hover h3{text-decoration:underline;text-underline-offset:3px}
.focus-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:start;margin-top:22px}
.fl-card{display:block;background:#fff;border:1px solid #e2ddce;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .2s}
.fl-card:hover{box-shadow:0 12px 34px #00000018}
.fl-img{aspect-ratio:16/9;overflow:hidden}
.fl-img img{width:100%;height:100%;object-fit:cover;transition:.45s}
.fl-card:hover .fl-img img{transform:scale(1.04)}
.fl-copy{padding:26px 30px 30px}
.fl-cat{font:700 10px "Space Mono",monospace;letter-spacing:.16em;color:var(--signal);text-transform:uppercase}
.fl-copy h3{font-size:clamp(26px,2.9vw,42px);line-height:1.05;letter-spacing:-.03em;margin:12px 0 14px}
.fl-copy p{font-size:16px;line-height:1.55;color:#4a433a;max-width:640px;margin:0}
.fl-read{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font:11px "Space Mono",monospace;letter-spacing:.08em}
.fl-read b{font-size:19px}
.focus-list{list-style:none;margin:0;padding:0;background:#fff;border:1px solid #e2ddce;border-radius:16px}
.focus-list li{border-bottom:1px solid #ece5d5}
.focus-list li:last-child{border-bottom:0}
.focus-list a{display:flex;align-items:center;gap:16px;padding:17px 20px;text-decoration:none;color:var(--ink)}
.focus-list a:hover{background:#faf6ec}
.focus-list a b{font:800 25px "Archivo Black","DM Sans",sans-serif;color:#d8ccb8;line-height:.9;min-width:28px}
.focus-list a:hover b{color:var(--signal)}
.fli-copy{flex:1;min-width:0}
.fli-copy span{display:block;font:10px "Space Mono",monospace;letter-spacing:.06em;color:#8a7a6e;text-transform:uppercase;margin-bottom:5px}
.fli-copy h4{font-size:16.5px;line-height:1.24;font-weight:700;margin:0}
.focus-list a:hover h4{text-decoration:underline;text-underline-offset:2px}
.fli-thumb{flex:none;width:74px;height:56px;border-radius:8px;background:#e9e2d3 center/cover no-repeat}
@media(max-width:1080px){.focus-layout{grid-template-columns:1fr}}
@media(max-width:520px){.focus-list a{gap:12px;padding:15px}.fli-thumb{width:58px;height:46px}}
html[data-theme="night"] .focus-section{background:#0f0b08}
html[data-theme="night"] .fl-card,html[data-theme="night"] .focus-list{background:#241c16;border-color:#ffffff14}
html[data-theme="night"] .fl-copy h3,html[data-theme="night"] .fli-copy h4{color:#efe7db}
html[data-theme="night"] .fl-copy p{color:#c7bdae}
html[data-theme="night"] .focus-list li{border-color:#3a2d22}
html[data-theme="night"] .focus-list a:hover{background:#2c231b}
html[data-theme="night"] .focus-list a b{color:#5c4a38}
html[data-theme="night"] .fli-copy span{color:#a8917d}
html[data-theme="night"] .fli-thumb{background-color:#3a2d22}

/* ---------- the brief (poster digest) ---------- */
.brief-head{display:flex;justify-content:space-between;align-items:baseline;width:100%;font:700 10px "Space Mono",monospace;letter-spacing:.2em}
.brief-head time{font-weight:400;letter-spacing:.08em}
.coverage-cta .poster{width:min(1150px,100%)}
.brief-h2{display:flex;align-items:center;gap:18px;flex-wrap:wrap;width:100%;margin-top:16px;font-size:clamp(38px,4.4vw,62px);line-height:.95;letter-spacing:-.05em}
.brief-h2 span{flex:none;background:var(--ink);color:var(--paper);padding:9px 13px;font:700 11px "Space Mono",monospace;letter-spacing:.2em}
.brief-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;width:100%;margin:26px 0 2px}
.brief-col-label{display:block;font:700 10px "Space Mono",monospace;letter-spacing:.22em;border-bottom:2px solid var(--ink);padding-bottom:8px}
.brief-item{display:grid;grid-template-columns:1fr;gap:3px;padding:11px 0;border-bottom:1.5px solid rgba(19,18,17,.28);color:var(--ink)}
.brief-item time{font:400 10.5px "Space Mono",monospace;letter-spacing:.1em;white-space:nowrap}
.brief-item b{font-size:15px;line-height:1.3;letter-spacing:-.01em}
.brief-item:hover b{text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.brief-cols{grid-template-columns:1fr;gap:18px}.brief-col:nth-child(n+2){margin-top:6px}}

/* subscribe strip: fills the band under the brief */
.subscribe-strip{display:flex;align-items:center;gap:24px;background:var(--white);padding:16px 2.2vw;border-bottom:1px solid #e2ddce}
.subscribe-strip>span{flex:none;font:700 10px "Space Mono",monospace;letter-spacing:.2em;color:var(--signal)}
.subscribe-strip p{flex:1;min-width:0;font-size:14px;color:#6f675e;margin:0}
.subscribe-strip form{display:flex;flex:none;width:min(430px,48%);border-bottom:2px solid var(--ink)}
.subscribe-strip input{flex:1;min-width:0;border:0;background:none;padding:10px 0;font-size:15px;outline:0}
.subscribe-strip button{flex:none;border:0;background:var(--ink);color:#fff;padding:9px 16px;margin:0 0 6px 10px;font:700 11px "Space Mono",monospace;cursor:pointer}
@media(max-width:760px){.subscribe-strip{flex-wrap:wrap;gap:8px;padding:15px}.subscribe-strip p{flex:1 1 100%}.subscribe-strip form{width:100%}}
html[data-theme="night"] .tag-row span{color:#efe7db;border-color:rgba(239,231,219,.4)}

/* story mode text slides */
.ws-textscrim{position:absolute;inset:0;background:rgba(10,8,6,.78)}
.ws-textslide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:40px 34px;color:#f3ebd6}
.ws-textslide span{font:700 10px "Space Mono",monospace;letter-spacing:.22em}
.ws-textslide p{font-size:24px;line-height:1.42;font-weight:600;letter-spacing:-.01em;margin:0}
.ws-textslide.ws-long p{font-size:19px;line-height:1.5}
.ws-textslide small{font:11px "Space Mono",monospace;opacity:.75}
.ws-hint{font:10px "Space Mono",monospace;letter-spacing:.14em;opacity:.85}

/* FN ticket notches: the logo shape as the house label language */
.label-row>span,.article-label,.ws-cardtag,.brief-h2 span{
  -webkit-mask-image:radial-gradient(circle 5px at 0 50%,transparent 4px,#000 4.5px),radial-gradient(circle 5px at 100% 50%,transparent 4px,#000 4.5px);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle 5px at 0 50%,transparent 4px,#000 4.5px),radial-gradient(circle 5px at 100% 50%,transparent 4px,#000 4.5px);
  mask-composite:intersect;
  padding-left:15px;padding-right:15px;
}
