/* ============================================================
   Frontline refresh (Oct 2026). One paper, one ink, the logo's own
   red (#D93000) as the only accent, and the logo's ticket notch as the
   single shape language: hero panels, The Brief and the newsletter are
   tickets; labels keep their small notches. Loaded last, so it
   overrides styles.css and features.css.
   ============================================================ */
:root{
  --page:#F4EFE3;           /* reading ground */
  --red:#D93000;            /* logo red: fills, white text on top (4.8:1) */
  --red-ink:#B42900;        /* red for small text on paper (5.2:1) */
  --meta:#6b645b;           /* secondary text on paper (5.1:1) */
  --hair:rgba(19,18,17,.14);
  --perf:rgba(19,18,17,.26);
  --hdr:108px;              /* header height at the top of the page */
  --hdr-drop:48px;          /* how much of it slides away once pinned */
  --notch:22px;             /* hero seam notch radius */
}
.read-progress{background:var(--red)}

/* ---------- top chrome: only the header stays pinned ---------- */
.breaking-bar{position:relative;top:auto;background:var(--ink);color:var(--paper)}
.breaking-bar a,.breaking-bar i{margin-left:48px;white-space:nowrap}
.breaking-bar i{color:var(--red);font-style:normal}
.breaking-bar a:hover{text-decoration:underline;text-underline-offset:3px}
.topics-bar{position:relative;top:auto;background:var(--page);border-top:0;border-bottom:1px solid var(--hair)}
.topics-label{color:var(--red-ink)}
.topic-chip{border-color:var(--hair)}

.site-header{position:sticky;top:calc(var(--hdr-drop) * -1);height:var(--hdr);padding:14px 2.2vw;background:var(--page);border-bottom:1px solid var(--hair);transition:padding .3s cubic-bezier(.22,1,.36,1)}
.site-header.is-compact{padding-top:calc(var(--hdr-drop) + 10px);padding-bottom:10px}
.brand{height:80px;align-items:center}
.brand img{height:100%}
.brand .brand-mark{display:none;height:40px}
.site-header.is-compact .brand{height:40px}
.site-header.is-compact .brand-full{display:none}
.site-header.is-compact .brand-mark{display:block}
.site-header nav{gap:clamp(18px,2.4vw,40px);font:500 15px var(--sans);letter-spacing:-.005em}
.site-header nav a{padding:6px 0;border-bottom:2px solid transparent}
.site-header nav a:hover{color:var(--red-ink)}
.site-header nav a[aria-current="page"]{border-bottom-color:var(--red)}

.header-tools{height:auto;align-items:center;gap:4px}
.header-tools .subscribe-top,.header-tools > a.subscribe-top{height:40px;margin-left:8px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--paper);font:700 11.5px var(--mono);letter-spacing:.1em;gap:0}
.header-tools .subscribe-top:hover{background:var(--red)}
.header-tools .square-tool{display:flex;width:40px;height:40px;border-radius:50%;background:transparent;color:var(--ink)}
.header-tools .square-tool svg,.util-tools .icon-tool svg{width:20px;height:20px;fill:currentColor}
.util-tools{gap:4px;margin:0}
.util-tools .icon-tool,.util-tools .icon-tool[data-bell]{width:40px;height:40px;min-height:0;border:0;border-radius:50%;background:transparent;color:var(--ink)}
.util-tools .icon-tool[aria-pressed="true"]{background:transparent;color:var(--red)}
.header-tools .square-tool:hover,.util-tools .icon-tool:hover,.util-tools .icon-tool[data-bell]:hover{background:rgba(19,18,17,.07);border-color:transparent}
.util-tools .icon-tool .badge{top:2px;right:0;background:var(--red)}
.site-header.nav-open nav{top:100%;color:var(--paper)}

/* ---------- hero: the lead story is a ticket, tear line between copy and photo ---------- */
.lead-section,.article-hero{padding:calc(var(--notch) + 4px);gap:0}
.lead-image{border-radius:6px 0 0 6px;min-height:clamp(440px,40vw,600px)}
.lead-image img{filter:none}
.article-image{border-radius:0 6px 6px 0}
.lead-copy,.article-title-panel{position:relative;background-color:var(--paper);background-repeat:no-repeat;background-size:2px 100%}
.lead-copy{border-radius:0 6px 6px 0;background-image:repeating-linear-gradient(to bottom,var(--perf) 0 6px,transparent 6px 13px);background-position:left top}
.article-title-panel{border-radius:6px 0 0 6px;background-image:repeating-linear-gradient(to bottom,var(--perf) 0 6px,transparent 6px 13px);background-position:right top}
/* the two notches are ink discs centred on the seam, top and bottom */
.lead-copy::before,.lead-copy::after,.article-title-panel::before,.article-title-panel::after{content:"";position:absolute;z-index:2;width:calc(var(--notch) * 2);height:calc(var(--notch) * 2);border-radius:50%;background:var(--ink)}
.lead-copy::before,.lead-copy::after{left:calc(var(--notch) * -1)}
.article-title-panel::before,.article-title-panel::after{right:calc(var(--notch) * -1)}
.lead-copy::before,.article-title-panel::before{top:calc(var(--notch) * -1)}
.lead-copy::after,.article-title-panel::after{bottom:calc(var(--notch) * -1)}

.lead-copy h1,.lead-copy .label-row time,.article-title-panel h1,.article-title-panel .back-button{color:var(--ink)}
.lead-copy p,.article-title-panel p{color:#3d3832}
.lead-copy .label-row time{color:#6b645b}
.lead-copy h1{font-size:clamp(34px,3.3vw,56px);line-height:1.02;letter-spacing:-.045em}
.lead-copy .label-row>span,.article-title-panel .article-label{background:var(--red);color:#fff}
.lead-copy .outline-action{color:var(--ink)}
.lead-copy .outline-action:hover b{background:var(--ink);color:var(--paper)}
.article-title-panel .byline{color:#6b645b;opacity:1}

/* ---------- The Brief: the terracotta poster is a ticket too ---------- */
.poster{clip-path:none;border-radius:6px;
  -webkit-mask-image:radial-gradient(circle 24px at 0 50%,transparent 23px,#000 23.5px),radial-gradient(circle 24px at 100% 50%,transparent 23px,#000 23.5px);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle 24px at 0 50%,transparent 23px,#000 23.5px),radial-gradient(circle 24px at 100% 50%,transparent 23px,#000 23.5px);
  mask-composite:intersect}
.coverage-cta{padding:clamp(48px,6vw,88px) 4vw}

/* ---------- reading ground ---------- */
.subscribe-strip,.stories-section,.webstories-section,.newsletter-section,.related-section,.article-body{background:var(--page)}
.subscribe-strip{border-bottom:1px solid var(--hair)}
.subscribe-strip>span,.rail-head span{color:var(--red-ink)}
.section-intro,.rail-head{border-bottom-width:1px}

/* ---------- story cards: image, headline, one meta line ---------- */
.story-grid{gap:48px 28px}
.story-card,.related-grid .story-card{position:relative;background:transparent;border-radius:0;box-shadow:none;min-height:0;overflow:visible}
.card-image,.related-grid .card-image{height:auto;aspect-ratio:3/2;border-radius:4px}
.card-copy{padding:18px 0 0}
.card-copy h3{font-size:clamp(21px,1.65vw,27px);line-height:1.14;letter-spacing:-.03em;margin:0 0 12px}
.card-copy h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card-copy h3 a:hover{text-decoration:none}
.story-card:hover h3 a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.card-save{z-index:2}
.card-meta{margin:0;font:11.5px var(--mono);letter-spacing:.06em;color:var(--meta)}
.card-meta b{color:var(--red-ink);font-weight:700}
.load-button{border-width:1px}

/* ---------- rails ---------- */
.webstories-section{padding-top:12px}
.ws-card{border-radius:8px}
.ws-cardtag{background:var(--red)}
.focus-section{background:var(--ink);color:var(--paper);padding-top:56px}
.focus-section .rail-head{border-color:rgba(243,235,214,.22)}
.focus-section .rail-head span{color:var(--signal-lift)}
.focus-section .video-card.news-card{color:var(--paper)}
.focus-section .video-card small{color:#a59d92}
.vc-thumb{border-radius:4px}

/* ---------- newsletter: the full-size FN ticket ---------- */
.newsletter-section{display:block;padding:clamp(48px,6vw,96px) 2.2vw}
.nl-ticket{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:end;padding:clamp(44px,5vw,80px) clamp(48px,7vw,110px);border-radius:6px;background:var(--red);color:#fff;
  -webkit-mask-image:radial-gradient(circle 30px at 0 50%,transparent 29px,#000 29.5px),radial-gradient(circle 30px at 100% 50%,transparent 29px,#000 29.5px);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle 30px at 0 50%,transparent 29px,#000 29.5px),radial-gradient(circle 30px at 100% 50%,transparent 29px,#000 29.5px);
  mask-composite:intersect}
.nl-ticket h2{color:#fff}
.nl-ticket form>div{border-bottom-color:#fff}
.nl-ticket input{color:#fff}
.nl-ticket input::placeholder{color:rgba(255,255,255,.78)}
.nl-ticket button{background:#fff;color:var(--red-ink);font:700 11.5px var(--mono);letter-spacing:.08em;cursor:pointer}
.nl-ticket button:hover{background:var(--ink);color:#fff}

/* ---------- article ---------- */
.article-body{grid-template-columns:180px minmax(0,680px);gap:72px;padding:72px 6vw 88px}
.article-content>div p{font-size:19px;line-height:1.7;color:#1f1c19;margin:0 0 1.15em}
.article-body aside{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:22px;font-size:13px}
.meta-pair>span{display:block;font:10px var(--mono);letter-spacing:.14em;color:var(--meta);margin-bottom:6px}
.meta-pair time,.meta-pair b{font-size:13px}
.aside-actions{display:grid;gap:8px}
.article-body aside .aside-actions button{margin:0;padding:11px 12px;border:1px solid var(--hair);border-radius:4px;background:transparent;font:11px var(--mono);letter-spacing:.06em;text-align:left;cursor:pointer}
.article-body aside .aside-actions button:hover{border-color:var(--ink)}
.article-body aside #pageListen{margin:0;background:var(--ink);border-color:var(--ink);color:var(--paper)}
.article-body aside #pageListen.playing,.article-body aside #pageSave.is-saved{background:var(--red);border-color:var(--red);color:#fff}
.share-row .sh{border-color:var(--hair);border-radius:4px}
.next-story{border-radius:6px}
.next-story span{color:var(--signal-lift)}
.related-section{border-top:1px solid var(--hair)}
.comments{border-top-width:1px}
.comments h3 b{background:var(--red)}

/* ---------- footer: the curtain reveals the FN mark ---------- */
.reveal-word img{display:block;height:clamp(64px,10vw,150px);width:auto}

/* ---------- phones ---------- */
@media(max-width:760px){
  :root{--hdr:64px;--hdr-drop:0px;--notch:12px}
  .site-header{padding:10px 12px}
  .site-header.is-compact{padding:10px 12px}
  .brand{height:40px}
  .brand .brand-full{display:none}
  .brand .brand-mark{display:block}
  .header-tools .square-tool,.util-tools .icon-tool,.util-tools .icon-tool[data-bell]{width:38px;height:38px}
  .lead-section,.article-hero{padding:var(--notch)}
  .lead-image{min-height:300px;border-radius:6px 6px 0 0}
  .article-image{min-height:280px;border-radius:0 0 6px 6px}
  /* stacked: the seam turns horizontal, notches move to its two ends */
  .lead-copy{border-radius:0 0 6px 6px;background-image:repeating-linear-gradient(to right,var(--perf) 0 6px,transparent 6px 13px);background-size:100% 2px;background-position:left top}
  .article-title-panel{border-radius:6px 6px 0 0;background-image:repeating-linear-gradient(to right,var(--perf) 0 6px,transparent 6px 13px);background-size:100% 2px;background-position:left bottom}
  .lead-copy::before{top:calc(var(--notch) * -1);left:calc(var(--notch) * -1)}
  .lead-copy::after{top:calc(var(--notch) * -1);bottom:auto;left:auto;right:calc(var(--notch) * -1)}
  .article-title-panel::before{top:auto;bottom:calc(var(--notch) * -1);right:auto;left:calc(var(--notch) * -1)}
  .article-title-panel::after{bottom:calc(var(--notch) * -1);right:calc(var(--notch) * -1)}
  .lead-copy h1{font-size:34px}
  /* The Brief: two headlines per column on a phone so the stories are not four screens down */
  .brief-col a.brief-item:nth-of-type(n+3){display:none}
  .poster{-webkit-mask-image:radial-gradient(circle 16px at 0 50%,transparent 15px,#000 15.5px),radial-gradient(circle 16px at 100% 50%,transparent 15px,#000 15.5px);mask-image:radial-gradient(circle 16px at 0 50%,transparent 15px,#000 15.5px),radial-gradient(circle 16px at 100% 50%,transparent 15px,#000 15.5px)}
  .story-grid{gap:40px}
  .newsletter-section{padding:40px 12px}
  .nl-ticket{grid-template-columns:1fr;gap:28px;padding:44px 34px;
    -webkit-mask-image:radial-gradient(circle 18px at 0 50%,transparent 17px,#000 17.5px),radial-gradient(circle 18px at 100% 50%,transparent 17px,#000 17.5px);
    mask-image:radial-gradient(circle 18px at 0 50%,transparent 17px,#000 17.5px),radial-gradient(circle 18px at 100% 50%,transparent 17px,#000 17.5px)}
  .article-body{grid-template-columns:1fr;gap:36px;padding:44px 20px 64px}
  .article-body aside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
  .aside-actions{grid-column:1 / -1;grid-template-columns:repeat(3,1fr)}
  .article-body aside .aside-actions button{text-align:center;padding:11px 6px}
  .share-pair{grid-column:1 / -1}
  .article-content>div p{font-size:18px}
}

/* ---------- night ---------- */
html[data-theme="night"]{--page:#141312;--hair:rgba(243,235,214,.16);--meta:#a59d92;--red-ink:#ff7a52}
html[data-theme="night"] .site-header,
html[data-theme="night"] .topics-bar,
html[data-theme="night"] .subscribe-strip,
html[data-theme="night"] .stories-section,
html[data-theme="night"] .webstories-section,
html[data-theme="night"] .newsletter-section,
html[data-theme="night"] .related-section,
html[data-theme="night"] .article-body,
html[data-theme="night"] .empty-state{background:var(--page);color:#efe7db}
html[data-theme="night"] .site-header nav a,
html[data-theme="night"] .header-tools .square-tool,
html[data-theme="night"] .util-tools .icon-tool,
html[data-theme="night"] .util-tools .icon-tool[data-bell]{background:transparent;color:var(--paper)}
html[data-theme="night"] .header-tools .subscribe-top{background:var(--paper);color:var(--ink)}
html[data-theme="night"] .story-card{background:transparent;box-shadow:none}
html[data-theme="night"] .related-section h2,
html[data-theme="night"] .article-body aside,
html[data-theme="night"] .article-content>div p{color:#efe7db}
html[data-theme="night"] .article-body aside .aside-actions button{color:#efe7db}
html[data-theme="night"] .focus-section{background:#0b0a09}
html[data-theme="night"] .subscribe-strip p{color:#a59d92}
html[data-theme="night"] .subscribe-strip form{border-color:var(--paper)}
html[data-theme="night"] .subscribe-strip input{color:var(--paper)}
html[data-theme="night"] .subscribe-strip button{background:var(--paper);color:var(--ink)}
html[data-theme="night"] .share-row .sh{color:var(--paper);border-color:var(--hair)}
html[data-theme="night"] .article-body aside #pageListen{background:var(--paper);border-color:var(--paper);color:var(--ink)}