/* ============================================================
   Brand theme additions — Provenance / Substrate / Atelier
   ============================================================
   Loaded after shell.css. Mirrors the per-brand overrides used
   by Broadside / Vector / Ledger, and handles Substrate's
   dark-mode contrast inversions.
   ============================================================ */

/* ============================================================
   PROVENANCE — conservative-traditional
   Serif everywhere, italic ledes, ornament accents on headings.
   ============================================================ */
[data-brand="provenance"] body { font-family: var(--brand-body-font); }
[data-brand="provenance"] .kicker {
  font-family: var(--brand-body-font);
  font-style: italic;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--text-xs);
}
[data-brand="provenance"] .eyebrow,
[data-brand="provenance"] .sidebar__title,
[data-brand="provenance"] .section-header__title,
[data-brand="provenance"] .hero-card__title,
[data-brand="provenance"] .story__title,
[data-brand="provenance"] .feature-card__title,
[data-brand="provenance"] .notis-list__title,
[data-brand="provenance"] .card__body h4,
[data-brand="provenance"] .prevnext__title,
[data-brand="provenance"] .pullquote__text {
  font-family: var(--brand-display-font);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.005em;
}
[data-brand="provenance"] .article__title { line-height: 1.02; }
[data-brand="provenance"] .article__lede,
[data-brand="provenance"] .hero-card__lede,
[data-brand="provenance"] .feature-card__lede,
[data-brand="provenance"] .story__excerpt {
  font-family: var(--brand-serif-font);
  font-style: italic;
  font-weight: 400;
}
[data-brand="provenance"] .article__body {
  font-family: var(--brand-body-font);
  font-size: var(--text-lg);
  line-height: 1.7;
}
[data-brand="provenance"] .article__body > p:first-of-type::first-letter {
  color: var(--brand-primary);
  font-size: 4.5em;
  font-style: italic;
  margin-top: 0.04em;
}
[data-brand="provenance"] .article__h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.12;
}
[data-brand="provenance"] .article__h2::before {
  background: var(--brand-accent);
  height: 1px;
  width: 96px;
  top: 8px;
}
[data-brand="provenance"] .section-header { border-top: 1px solid var(--brand-primary); }
[data-brand="provenance"] .pullquote {
  background: transparent;
  border-left-width: 2px;
  font-style: italic;
}
[data-brand="provenance"] .pullquote__text { font-style: italic; }
[data-brand="provenance"] .logo-mark {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
[data-brand="provenance"] .logo-word { font-style: italic; }
[data-brand="provenance"] .masthead__nav a {
  font-family: var(--brand-body-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--text-xs);
}
[data-brand="provenance"] .iconbtn,
[data-brand="provenance"] .filter-bar__chip,
[data-brand="provenance"] .tag {
  font-family: var(--brand-body-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
[data-brand="provenance"] .footer .logo-mark { background: var(--brand-accent); color: var(--brand-on-primary); }

/* ============================================================
   SUBSTRATE — modern dark mode
   Dark surfaces, neon cyan primary, sans-serif throughout,
   mono for data & kickers. Inverts the "ink-as-bg" pattern.
   ============================================================ */
[data-brand="substrate"] {
  color: var(--brand-ink);
}
[data-brand="substrate"] .kicker {
  color: var(--brand-primary);
  font-family: var(--font-mono);
  letter-spacing: 0.22em;
}
[data-brand="substrate"] .byline { color: var(--brand-muted); }

/* All sans typography */
[data-brand="substrate"] .hero-card__title,
[data-brand="substrate"] .story__title,
[data-brand="substrate"] .feature-card__title,
[data-brand="substrate"] .article__title,
[data-brand="substrate"] .article__h2,
[data-brand="substrate"] .pullquote__text,
[data-brand="substrate"] .section-header__title,
[data-brand="substrate"] .page-head__title,
[data-brand="substrate"] .notis-page__title,
[data-brand="substrate"] .notis-list__title,
[data-brand="substrate"] .prevnext__title,
[data-brand="substrate"] .card__body h4,
[data-brand="substrate"] .topic__label {
  font-family: var(--brand-display-font);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.02em;
}
[data-brand="substrate"] .article__lede,
[data-brand="substrate"] .hero-card__lede,
[data-brand="substrate"] .feature-card__lede,
[data-brand="substrate"] .story__excerpt,
[data-brand="substrate"] .page-head__lede,
[data-brand="substrate"] .notis-page__body p:not(:first-child),
[data-brand="substrate"] .ai-disclosure p {
  font-family: var(--brand-body-font);
  font-style: normal;
  font-weight: 400;
  /* Brighter than --brand-muted so secondary copy reads on dark bg.
     ~74% lightness vs muted's ~56%. */
  color: #C5C7CF;
}
[data-brand="substrate"] .article__body {
  font-family: var(--brand-body-font);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--brand-ink);
}
[data-brand="substrate"] .article__body > p:first-of-type::first-letter {
  color: var(--brand-primary);
  font-family: var(--brand-display-font);
  font-weight: 700;
  font-size: 4em;
}
[data-brand="substrate"] .article__h2::before {
  background: var(--brand-primary);
  box-shadow: 0 0 12px var(--brand-primary);
}
[data-brand="substrate"] .notis-page__body { font-family: var(--brand-body-font); }

/* Dark-mode surface inversions — anywhere we used brand-ink
   as a contrast background, swap to surface so it stays
   readable in dark mode. */
[data-brand="substrate"] .masthead { background: var(--brand-paper); border-bottom-color: var(--brand-line); }
/* masthead strip now uses the brand invert tokens (see article.css) */
[data-brand="substrate"] .masthead__strip a { color: var(--brand-invert-muted); }
[data-brand="substrate"] .masthead__cta {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  opacity: 1 !important;
}
[data-brand="substrate"] .masthead__menu,
[data-brand="substrate"] .masthead__search { color: var(--brand-ink); }
[data-brand="substrate"] .masthead__nav { border-top-color: var(--brand-line); }
[data-brand="substrate"] .masthead__nav a { color: var(--brand-ink); font-weight: 600; text-transform: none; letter-spacing: -0.005em; font-size: var(--text-sm); }
[data-brand="substrate"] .masthead__nav a:hover { color: var(--brand-primary); }
[data-brand="substrate"] .masthead__nav a.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

[data-brand="substrate"] .logo-mark { background: var(--brand-primary); color: var(--brand-on-primary); }
[data-brand="substrate"] .logo-word { letter-spacing: -0.04em; font-weight: 700; }

/* ticker now uses the brand invert tokens (see shell.css); only the
   magenta hover is brand-specific here */
[data-brand="substrate"] .ticker__item { font-family: var(--brand-body-font); font-weight: 500; }
[data-brand="substrate"] .ticker__item:hover { color: var(--brand-accent); }

[data-brand="substrate"] .section-header { border-top-color: var(--brand-primary); }
[data-brand="substrate"] .section-header__title .accent,
[data-brand="substrate"] .sidebar__title .accent { color: var(--brand-primary); }

[data-brand="substrate"] .page-head { border-bottom-color: var(--brand-primary); }
[data-brand="substrate"] .page-head__title .count { color: var(--brand-primary); }

[data-brand="substrate"] .sidebar__section { border-top-color: var(--brand-primary); }
[data-brand="substrate"] .sidebar__title { color: var(--brand-ink); }

[data-brand="substrate"] .topic,
[data-brand="substrate"] .feature-card,
[data-brand="substrate"] .card,
[data-brand="substrate"] .iconbtn,
[data-brand="substrate"] .tag,
[data-brand="substrate"] .factbox {
  background: var(--brand-surface);
  border-color: var(--brand-line);
  color: var(--brand-ink);
}
[data-brand="substrate"] .factbox { border-color: var(--brand-primary); border-width: 1px; }
[data-brand="substrate"] .factbox__head {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
[data-brand="substrate"] .factbox__icon { color: var(--brand-on-primary); }
[data-brand="substrate"] .factbox li { border-bottom-color: var(--brand-line); }
[data-brand="substrate"] .factbox li strong { color: var(--brand-primary); }

[data-brand="substrate"] .topic:hover { border-color: var(--brand-primary); }
[data-brand="substrate"] .card:hover { border-color: var(--brand-primary); }

/* Substrate är mörkbladigt: dess platshållare är den upphöjda ytan, inte pappret. Färgen på
   linjerna ärvs från --section som alla andra. */
[data-brand="substrate"] .story__art { background: var(--brand-surface); }
[data-brand="substrate"] .feature-card__art { background: var(--brand-surface); color: var(--brand-primary); }
[data-brand="substrate"] .hero-card__art { background: var(--brand-surface); color: var(--brand-primary); }

/* SVG art rects that use brand-ink as background fill flip to surface
   so the artwork stays on a dark panel (not a light one) in dark mode. */
[data-brand="substrate"] .article__hero svg rect[fill*="brand-ink"],
[data-brand="substrate"] .hero-card__art svg rect[fill*="brand-ink"],
[data-brand="substrate"] .feature-card__art svg rect[fill*="brand-ink"],
[data-brand="substrate"] .story__art svg rect[fill*="brand-ink"],
[data-brand="substrate"] .card__art svg rect[fill*="brand-ink"] { fill: var(--brand-surface); }

/* Surface-fill rects already use brand-surface which is dark in dark mode — leave as is */

/* Strokes/fills intended as the "light foreground" (brand-paper) flip to
   brand-ink (which is the light text color in dark mode). */
[data-brand="substrate"] .article__hero svg [stroke*="brand-paper"],
[data-brand="substrate"] .hero-card__art svg [stroke*="brand-paper"],
[data-brand="substrate"] .feature-card__art svg [stroke*="brand-paper"],
[data-brand="substrate"] .story__art svg [stroke*="brand-paper"],
[data-brand="substrate"] .card__art svg [stroke*="brand-paper"] { stroke: var(--brand-ink); }

[data-brand="substrate"] .article__hero svg [fill*="brand-paper"]:not(rect[fill*="brand-ink"]),
[data-brand="substrate"] .hero-card__art svg [fill*="brand-paper"],
[data-brand="substrate"] .feature-card__art svg [fill*="brand-paper"],
[data-brand="substrate"] .story__art svg [fill*="brand-paper"],
[data-brand="substrate"] .card__art svg [fill*="brand-paper"] { fill: var(--brand-ink); }

/* Inline style="color: var(--brand-paper)" — the <g style="..."> wrapper
   that flows currentColor down to its child shapes. */
[data-brand="substrate"] .article__hero svg [style*="brand-paper"],
[data-brand="substrate"] .hero-card__art svg [style*="brand-paper"],
[data-brand="substrate"] .feature-card__art svg [style*="brand-paper"],
[data-brand="substrate"] .story__art svg [style*="brand-paper"],
[data-brand="substrate"] .card__art svg [style*="brand-paper"] { color: var(--brand-ink); }

/* <text fill="var(--brand-paper)"> in the data-vis hero on fördjupning */
[data-brand="substrate"] .article__hero svg text[fill*="brand-paper"] { fill: var(--brand-ink); }

[data-brand="substrate"] .iconbtn { color: var(--brand-ink); }
[data-brand="substrate"] .iconbtn--primary {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border-color: var(--brand-primary);
}
[data-brand="substrate"] .iconbtn--primary:hover { background: var(--brand-accent); border-color: var(--brand-accent); }

[data-brand="substrate"] .filter-bar { border-top-color: var(--brand-line); border-bottom-color: var(--brand-line); }
[data-brand="substrate"] .filter-bar__chip { color: var(--brand-ink); border-color: var(--brand-line); background: transparent; }
[data-brand="substrate"] .filter-bar__chip.is-active {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border-color: var(--brand-primary);
}
[data-brand="substrate"] .filter-bar__chip:hover { border-color: var(--brand-primary); }

[data-brand="substrate"] .pagination a,
[data-brand="substrate"] .pagination span {
  background: var(--brand-surface);
  border-color: var(--brand-line);
  color: var(--brand-ink);
}
[data-brand="substrate"] .pagination .is-active {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border-color: var(--brand-primary);
}
[data-brand="substrate"] .pagination .ellipsis { background: transparent; border-color: transparent; color: var(--brand-muted); }

[data-brand="substrate"] .tag { color: var(--brand-ink); }
[data-brand="substrate"] .tag--accent {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border-color: var(--brand-primary);
}
[data-brand="substrate"] .tag--accent .count { color: var(--brand-on-primary); opacity: 0.8; }
[data-brand="substrate"] .tag:hover { border-color: var(--brand-primary); }

[data-brand="substrate"] .prevnext { border-top-color: var(--brand-primary); border-bottom-color: var(--brand-line); }
[data-brand="substrate"] .prevnext > a { border-left-color: var(--brand-line); }
[data-brand="substrate"] .prevnext > a:first-child { border-right-color: var(--brand-line); }

[data-brand="substrate"] .pullquote {
  background: var(--brand-surface);
  border-left-color: var(--brand-primary);
}
[data-brand="substrate"] .ai-disclosure { background: var(--brand-surface); border-color: var(--brand-line); }
[data-brand="substrate"] .ai-disclosure p { color: var(--brand-muted); }

[data-brand="substrate"] .toc__list li { border-left-color: var(--brand-line); }
[data-brand="substrate"] .toc__list li.is-active { border-left-color: var(--brand-primary); }
[data-brand="substrate"] .toc__list a { color: var(--brand-muted); }
[data-brand="substrate"] .toc__list li.is-active a { color: var(--brand-ink); }
[data-brand="substrate"] .toc__list a:hover { color: var(--brand-primary); }

[data-brand="substrate"] .reading-progress { background: var(--brand-primary); box-shadow: 0 0 14px var(--brand-primary); }

/* footer now uses the brand invert tokens (see article.css). The logo
   mark stays the signal color. */
[data-brand="substrate"] .footer .logo-mark { background: var(--brand-primary); color: var(--brand-on-primary); }

[data-brand="substrate"] .video__frame { background: var(--brand-surface); }
[data-brand="substrate"] .video__play { background: var(--brand-primary); color: var(--brand-on-primary); box-shadow: 0 8px 32px rgba(0,229,209,0.3); }

[data-brand="substrate"] .article__caption,
[data-brand="substrate"] figcaption {
  color: var(--brand-ink);
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
}

[data-brand="substrate"] .demo-frame { background: var(--brand-surface); border-color: var(--brand-line); }
[data-brand="substrate"] pre { background: var(--brand-surface) !important; color: var(--brand-ink) !important; border: 1px solid var(--brand-line); }

[data-brand="substrate"] .avatar { background: var(--brand-primary); color: var(--brand-on-primary); }
[data-brand="substrate"] .badge--breaking { background: var(--brand-accent); color: var(--brand-on-primary); }
[data-brand="substrate"] .badge--premium { background: var(--brand-primary); color: var(--brand-on-primary); }
[data-brand="substrate"] .ticker__label { background: var(--brand-primary); color: var(--brand-on-primary); }
[data-brand="substrate"] .ticker__label::after { background: var(--brand-primary); }

/* ============================================================
   ATELIER — aspirational lifestyle
   Generous, serif, cream and deep teal with gold accents.
   Larger margins, more white space, italic ledes.
   ============================================================ */
[data-brand="atelier"] {
  --gutter: clamp(1.5rem, 6vw, 5rem);
}
[data-brand="atelier"] body { font-family: var(--brand-body-font); font-size: var(--text-base); }
[data-brand="atelier"] .kicker {
  font-family: var(--brand-body-font);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--brand-accent);
  text-transform: uppercase;
  font-size: var(--text-xs);
}
[data-brand="atelier"] .hero-card__title,
[data-brand="atelier"] .story__title,
[data-brand="atelier"] .feature-card__title,
[data-brand="atelier"] .article__title,
[data-brand="atelier"] .article__h2,
[data-brand="atelier"] .pullquote__text,
[data-brand="atelier"] .section-header__title,
[data-brand="atelier"] .page-head__title,
[data-brand="atelier"] .notis-page__title,
[data-brand="atelier"] .notis-list__title,
[data-brand="atelier"] .prevnext__title,
[data-brand="atelier"] .card__body h4,
[data-brand="atelier"] .topic__label {
  font-family: var(--brand-display-font);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
[data-brand="atelier"] .article__title { font-size: clamp(2rem, 4.8vw, 4rem); line-height: 1.02; }
[data-brand="atelier"] .article__lede,
[data-brand="atelier"] .hero-card__lede,
[data-brand="atelier"] .feature-card__lede,
[data-brand="atelier"] .story__excerpt {
  font-family: var(--brand-serif-font);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-800);
}
[data-brand="atelier"] .article__body {
  font-family: var(--brand-body-font);
  font-size: var(--text-lg);
  line-height: 1.75;
}
[data-brand="atelier"] .article__body > p:first-of-type::first-letter {
  color: var(--brand-accent);
  font-family: var(--brand-display-font);
  font-weight: 600;
  font-size: 4.5em;
  font-style: italic;
}
[data-brand="atelier"] .article__h2 { font-size: var(--text-2xl); font-weight: 500; }
[data-brand="atelier"] .article__h2::before {
  background: var(--brand-accent);
  height: 1px;
  width: 48px;
  top: 12px;
}
[data-brand="atelier"] .section-header { border-top-color: var(--brand-accent); border-top-width: 1px; }
[data-brand="atelier"] .pullquote {
  background: transparent;
  border-left: 0;
  border-top: 1px solid var(--brand-accent);
  border-bottom: 1px solid var(--brand-accent);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
[data-brand="atelier"] .pullquote__text { font-style: italic; }
[data-brand="atelier"] .pullquote__mark { display: none; }
[data-brand="atelier"] .pullquote__cite { font-family: var(--brand-body-font); font-style: italic; }
[data-brand="atelier"] .logo-mark {
  background: transparent;
  color: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
}
[data-brand="atelier"] .logo-word { font-style: italic; font-weight: 500; letter-spacing: -0.02em; }
[data-brand="atelier"] .masthead__nav a {
  font-family: var(--brand-body-font);
  font-weight: 500;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--text-xs);
}
[data-brand="atelier"] .masthead__nav a.is-active { border-bottom-color: var(--brand-accent); color: var(--brand-accent); }
[data-brand="atelier"] .iconbtn,
[data-brand="atelier"] .filter-bar__chip,
[data-brand="atelier"] .tag {
  font-family: var(--brand-body-font);
  font-weight: 500;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
[data-brand="atelier"] .iconbtn--primary {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border-color: var(--brand-primary);
}
/* footer uses the teal invert tokens; keep Atelier's ghost logo mark
   and italic section heads */
[data-brand="atelier"] .footer .logo-mark { background: transparent; color: var(--brand-invert-accent); border-color: var(--brand-invert-accent); }
[data-brand="atelier"] .footer__cols h5 { color: var(--brand-invert-accent); font-style: italic; }
[data-brand="atelier"] .ticker__label { background: var(--brand-primary); color: var(--brand-on-primary); }
[data-brand="atelier"] .ticker__label::after { background: var(--brand-primary); }
[data-brand="atelier"] .ticker__time { color: var(--brand-accent); }

/* ============================================================
   Shared additions used by all the new brands
   ============================================================ */
.logo-mark--block { /* used by vector (formerly vector) */ }