/*
 * News. — "Long-read" design style (long reads / opinion), News. — Theme & Colors → Design style.
 * Loaded after the base styles. Preset: warm paper, white header with a centred logo, deep red
 * accent, Newsreader for headlines and text, Libre Baskerville for article text. Typography first,
 * quiet lines, columnists with photos. Front-page top section: template-parts/home/featured-longread.php.
 */

.style-longread{
  --lr-accent: var(--red);
  --radius-s: 0px;
  --radius-m: 0px;
  --radius-l: 0px;
}
html:not([data-theme="dark"]) .style-longread{ --paper:#FBF8F1; --paper-2:#F3EEE3; --line:#E4DCCB; --border-bottom:#E4DCCB; --ink:#1D1A16; --muted:#6A6256; }
html[data-theme="dark"] .style-longread{ --paper:#14120F; --paper-2:#1C1915; --lr-accent:color-mix(in srgb, var(--red) 50%, #fff); }

/* ---- Type: serif everywhere ---- */
.style-longread h1, .style-longread h2, .style-longread h3,
.style-longread .featured__headline, .style-longread .story-card__headline, .style-longread .article-title,
.style-longread .feature-title, .style-longread .cover-card h3, .style-longread .showbiz-card__title{
  font-family:var(--display); font-weight:600; letter-spacing:-.01em;
}
.style-longread .article-title, .style-longread .feature-title{ font-weight:500; line-height:1.08; letter-spacing:-.02em; }
.style-longread .article-body p, .style-longread .feature-content p{ font-size:19.5px; line-height:1.78; }
.style-longread .article-body p.article-lead::first-letter{
  float:left; font-family:var(--display); font-size:4.4em; line-height:.84; padding:6px 10px 0 0; font-weight:600; color:var(--lr-accent);
}

/* ---- Header: paper, centred logo, quiet menu ---- */
.style-longread .brand-bar__inner{ height:72px; }
.style-longread .brand__logo{ height:var(--logo-h, 34px); }
.style-longread .nav-bar{ background:var(--paper); border-top:1px solid var(--border-bottom); border-bottom:3px double var(--border-bottom); }
.style-longread .nav-bar__inner{ justify-content:center; }
.style-longread .nav-bar__utility{ display:none; }
.style-longread .nav-link{ font-family:var(--display); font-size:16px; font-weight:500; font-style:italic; letter-spacing:0; padding-inline:14px; }
.style-longread .nav-link::after{ height:1px; background:currentColor; }
.style-longread .nav-link.is-active, .style-longread .nav-item.is-open .nav-link{ color:var(--lr-accent); }
.style-longread .breaking{ background:var(--paper); border-bottom:1px solid var(--border-bottom); }
.style-longread .breaking__track li{ color:var(--ink); font-family:var(--display); font-weight:500; font-size:15px; }
.style-longread .live-tag{ border-radius:0; background:var(--red); }
.style-longread .topic-row{ background:var(--paper); }

/* ---- Section heads: small caps over a double rule ---- */
.style-longread .section__dot{ display:none; }
.style-longread .section__head{ border-top:3px double var(--ink); border-bottom:0; padding-top:12px; }
.style-longread .section__title,
.style-longread .shead__title{ font-family:var(--sans); font-size:12.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.style-longread .see-all{ font-family:var(--display); font-style:italic; font-weight:500; font-size:15px; }

/* ---- Labels: plain accent text ---- */
.style-longread .tag{ background:transparent !important; color:var(--lr-accent) !important; padding:0; border-radius:0; letter-spacing:.14em; }
.style-longread .story-card .tag, .style-longread .featured__cover-body .tag{ color:#fff !important; }
.style-longread .kicker{ letter-spacing:.14em; color:var(--lr-accent); }
/* Labels on pictures: a small paper tab attached to the left edge of the photo (plain text would
   disappear on the image). */
.style-longread .mega-panel__feature-media .tag,
.style-longread .mega-panel__card-media .tag,
.style-longread .featured__thumb > .tag,
.style-longread .cover-card__media > .tag{
  left:0 !important; top:14px !important; padding:6px 11px 6px 10px !important;
  background:var(--paper) !important; color:var(--lr-accent) !important;
  font-size:10px; box-shadow:2px 2px 0 rgba(0,0,0,.12);
}
.style-longread .btn{ border-radius:0; }
.style-longread .btn--primary{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* =====================================================================
   FRONT PAGE TOP (featured-longread.php)
   ===================================================================== */
.lr-top{ padding-top:clamp(28px, 3.4vw, 52px); }
.lr-kicker{ display:block; font-family:var(--sans); font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--lr-accent, var(--red)); }
.lr-label{ margin:0 0 18px; padding-top:12px; border-top:3px double var(--ink); font-family:var(--sans); font-size:12.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }

.lr-lead{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(28px, 4.5vw, 72px); align-items:center; color:var(--ink); padding-bottom:clamp(36px, 4vw, 60px); }
.lr-lead__body{ display:flex; flex-direction:column; gap:18px; }
.lr-lead__title{ margin:0; font-family:var(--display); font-size:clamp(38px, 4.8vw, 72px); font-weight:500; line-height:1.03; letter-spacing:-.025em; }
.lr-lead:hover .lr-lead__title{ color:var(--lr-accent, var(--red)); }
.lr-lead__dek{ margin:0; max-width:46ch; font-family:var(--display); font-size:21px; font-style:italic; line-height:1.5; color:var(--muted); }
.lr-byline{ display:flex; align-items:center; gap:10px; font-family:var(--sans); font-size:13px; font-weight:700; color:var(--ink); }
.lr-byline img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.lr-dot{ color:var(--muted); }
.lr-lead__media{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--paper-2); }
.lr-lead__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.92); transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.lr-lead:hover .lr-lead__media img{ transform:scale(1.03); }
.lr-lead__media .live-badge{ position:absolute; top:14px; left:14px; z-index:2; }

.lr-voices__grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(18px, 2.4vw, 36px); }
.lr-voice{ display:flex; flex-direction:column; gap:8px; color:var(--ink); min-width:0; }
.lr-voice__photo{ width:64px; height:64px; border-radius:50%; object-fit:cover; filter:grayscale(1); transition:filter .3s; }
.lr-voice:hover .lr-voice__photo{ filter:none; }
.lr-voice__name{ font-family:var(--sans); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--lr-accent, var(--red)); }
.lr-voice__title{ margin:0; font-family:var(--display); font-size:20px; font-weight:500; font-style:italic; line-height:1.28; }
.lr-voice:hover .lr-voice__title{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }

.lr-more{ margin-top:clamp(40px, 5vw, 64px); }
.lr-list{ list-style:none; margin:0; padding:0; counter-reset:lr; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 clamp(24px, 4vw, 56px); }
.lr-list li{ counter-increment:lr; border-bottom:1px solid var(--border-bottom); }
.lr-list a{ display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:12px; row-gap:6px; padding:18px 0; color:var(--ink); }
.lr-list a::before{ content:counter(lr); grid-row:1 / span 3; font-family:var(--display); font-size:36px; font-weight:500; line-height:1; color:var(--lr-accent, var(--red)); }
.lr-list__title{ margin:0; font-family:var(--display); font-size:21px; font-weight:600; line-height:1.25; }
.lr-list a:hover .lr-list__title{ color:var(--lr-accent, var(--red)); }
.lr-list__meta{ font-family:var(--sans); font-size:12.5px; color:var(--muted); }
.lr-top .ad-wrap{ margin-top:36px; }

@media (max-width:1100px){
  .lr-voices__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:860px){
  .lr-lead{ grid-template-columns:minmax(0,1fr); }
  .lr-lead__media{ order:-1; aspect-ratio:4/3; }
  .lr-list{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  .lr-voices__grid{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .lr-voice{ display:grid; grid-template-columns:56px minmax(0,1fr); grid-template-rows:auto auto; column-gap:14px; row-gap:4px; }
  .lr-voice__photo{ width:56px; height:56px; grid-row:1 / span 2; }
}
@media (prefers-reduced-motion: reduce){ .lr-lead__media img{ transition:none; } }