/*
 * News. — "Magazine" design style (News. — Colors → Design style).
 * Loaded after the base styles. Pair with a serif headline font (e.g. Playfair Display),
 * a white header color and a warm brand color. Pure CSS on top of the design — no markup changes.
 */

.style-magazine{
  --radius-s: 2px;
  --mag-rule: 1px solid var(--ink);
}
/* White pages (the beige paper tone belongs to the newspaper look). */
html:not([data-theme="dark"]) .style-magazine{ --paper:#FFFFFF; --paper-2:#FAF9F6; }

/* Headlines: serif display, no tight tracking. */
.style-magazine h1, .style-magazine h2, .style-magazine h3,
.style-magazine .featured__headline, .style-magazine .story-card__headline,
.style-magazine .article-title, .style-magazine .feature-title,
.style-magazine .cover-card h3, .style-magazine .showbiz-card__title,
.style-magazine .studio__feature-headline, .style-magazine .cat-lead__copy h2{
  font-family:var(--display); letter-spacing:-.005em;
}
.style-magazine .featured__headline{ font-weight:700; }

/* Section heads: small caps label over a thin black rule, instead of colored dots. */
.style-magazine .section__dot{ display:none; }
.style-magazine .section__head{ border-bottom:var(--mag-rule); padding-bottom:10px; }
.style-magazine .section__title,
.style-magazine .shead__title{
  font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.style-magazine .cat-head__title,
.style-magazine .cat-hero h1{ font-family:var(--display); font-weight:700; letter-spacing:-.01em; }

/* Labels: black editorial tags, kickers in small caps. */
.style-magazine .tag{ border-radius:0; background:var(--ink) !important; color:var(--paper,#fff) !important; letter-spacing:.14em; font-size:10.5px; padding:5px 9px; }
.style-magazine .kicker{ letter-spacing:.14em; font-size:10.5px; }
.style-magazine .premium-mark{ border-radius:0; }

/* Navigation: white, thin rules, understated active state. */
.style-magazine .nav-bar{ background:var(--paper,#fff); border-bottom:var(--mag-rule); }
.style-magazine .nav-link{ font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.style-magazine .topic-row{ background:var(--paper,#fff); }

/* Cards and images: square corners, more air. */
.style-magazine .story-card, .style-magazine .cover-card, .style-magazine .featured__mini,
.style-magazine .featured__thumb, .style-magazine .showbiz-card__media, .style-magazine .scitech-card__media,
.style-magazine .tv-card__media, .style-magazine .studio__feature, .style-magazine .studio__gallery,
.style-magazine .cat-lead__feature .featured__thumb{ border-radius:0; }
.style-magazine .section{ padding-block:clamp(36px, 4vw, 60px); }

/* Buttons: black, square. */
.style-magazine .btn{ border-radius:0; letter-spacing:.06em; }
.style-magazine .btn--primary{ background:var(--ink); border-color:var(--ink); color:var(--paper,#fff); }
.style-magazine .btn--primary:hover{ background:#3A3A3E; border-color:#3A3A3E; }

/* Article: magazine reading column. */
.style-magazine .article-body p, .style-magazine .feature-content p{ font-size:19px; line-height:1.72; }
.style-magazine .article-body p.article-lead::first-letter{
  float:left; font-family:var(--display); font-size:4.2em; line-height:.86; padding:6px 10px 0 0; font-weight:700;
}

/* Dark mode: rules and tags follow the ink color. */
html[data-theme="dark"] .style-magazine .tag{ background:#EDEAE3 !important; color:#111 !important; }