/*
 * Mannlíf: Heimildin's pages (its templates and its stylesheet) in Mannlíf's typefaces and colours, as on mannlif.is
 * (the owner, 2026-10-24: "stakar greinar mega vera eins og hjá Heimildinni, nema bara í letri og litum Mannlífs"; the
 * same for every page but the front). On its host, after the site's stylesheet (templates/base.html, outlets_tags
 * outlet_stylesheet): the site's colour properties set again, and the --st-font-* properties the site's type
 * declarations fall back from (static/static_dirs/site/css/scss/variables.scss). Only type and colour here; Mannlíf's
 * own parts (its header, menu, footer, front, what's under an article) are drawn by parts.css (parts/parts.scss).
 *
 * Typefaces from Adobe Fonts kit svu6nen, linked by the page's head (outlets_tags.FONT_KITS): Lektorat Display
 * (variable: weight 200–900; its own width is mannlif.is's headlines' "wdth" 87) for headlines, Sentinel for text,
 * Franklin Gothic ATF (400 and 600) for the rest. Colours as mannlif.is's (its variables.scss: parts/scss/
 * variables.scss): its red, and a category's own colour in its articles and teasers (Fólk blue, Menning purple,
 * Skoðun orange, Sport green). :root matches in dark mode too, so the dark block sets them again.
 */

:root,
[data-theme="light"] {
  /* The family's one grey (STILHANDBOK.md): notes, chips, Mín síða, the article head's buttons. */
  --st-sp-surface: #f4f4f4;
  --st-font-headline: "lektorat-display-variable", "franklin-gothic-atf", sans-serif;
  --st-font-text: "sentinel", Georgia, serif;
  --st-font-sans: "franklin-gothic-atf", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --st-accent: hsl(345, 100%, 47%); --st-accent-h: 345; --st-accent-s: 100%; --st-accent-l: 47%;
  --st-accent-dark: hsl(345, 80%, 35%); --st-accent-dark-h: 345; --st-accent-dark-s: 80%; --st-accent-dark-l: 35%;
  --st-accent-light: hsl(345, 100%, 60%); --st-accent-light-h: 345; --st-accent-light-s: 100%; --st-accent-light-l: 60%;
  --st-cyan: hsl(202, 95%, 50%); --st-cyan-h: 202; --st-cyan-s: 95%; --st-cyan-l: 50%;
  --st-reader-circle: var(--st-yellow-100);
  --st-frettir: hsl(345, 100%, 47%); --st-frettir-h: 345; --st-frettir-s: 100%; --st-frettir-l: 47%;
  --st-rannsoknir: hsl(345, 100%, 47%); --st-rannsoknir-h: 345; --st-rannsoknir-s: 100%; --st-rannsoknir-l: 47%;
  --st-thekking: hsl(345, 100%, 47%); --st-thekking-h: 345; --st-thekking-s: 100%; --st-thekking-l: 47%;
  --st-lifid: hsl(345, 100%, 47%); --st-lifid-h: 345; --st-lifid-s: 100%; --st-lifid-l: 47%;
  --st-thaettir: hsl(345, 100%, 47%); --st-thaettir-h: 345; --st-thaettir-s: 100%; --st-thaettir-l: 47%;
  --st-folk: hsl(202, 95%, 50%); --st-folk-h: 202; --st-folk-s: 95%; --st-folk-l: 50%;
  --st-menning: hsl(260, 80%, 60%); --st-menning-h: 260; --st-menning-s: 80%; --st-menning-l: 60%;
  --st-umraeda: hsl(34, 100%, 49%); --st-umraeda-h: 34; --st-umraeda-s: 100%; --st-umraeda-l: 49%;
  --st-yellow: hsl(48, 100%, 50%); --st-yellow-h: 48; --st-yellow-s: 100%; --st-yellow-l: 50%;
  --st-green: hsl(150, 100%, 43%); --st-green-h: 150; --st-green-s: 100%; --st-green-l: 43%;
  --st-cta: hsl(345, 100%, 47%); --st-cta-h: 345; --st-cta-s: 100%; --st-cta-l: 47%;
  --st-black: hsl(0, 0%, 4%); --st-black-h: 0; --st-black-s: 0%; --st-black-l: 4%;
  --st-logo-color: hsl(345, 100%, 47%);
  --st-line-color: hsl(0, 0%, 60%);
  --st-line-color-light: hsl(0, 0%, 90%);
  --st-line-color-sharp: hsl(0, 0%, 4%);
  --st-vote-up: hsl(150, 100%, 33%); --st-vote-up-h: 150; --st-vote-up-s: 100%; --st-vote-up-l: 33%;
  --st-vote-down: hsl(345, 100%, 47%); --st-vote-down-h: 345; --st-vote-down-s: 100%; --st-vote-down-l: 47%;
}

[data-theme="dark"] {
  --st-accent: hsl(345, 100%, 50%); --st-accent-h: 345; --st-accent-s: 100%; --st-accent-l: 50%;
  --st-accent-dark: hsl(345, 80%, 40%); --st-accent-dark-h: 345; --st-accent-dark-s: 80%; --st-accent-dark-l: 40%;
  --st-accent-light: hsl(345, 100%, 62%); --st-accent-light-h: 345; --st-accent-light-s: 100%; --st-accent-light-l: 62%;
  --st-cyan: hsl(202, 95%, 61%); --st-cyan-h: 202; --st-cyan-s: 95%; --st-cyan-l: 61%;
  --st-reader-circle: var(--st-yellow-200);
  --st-frettir: hsl(345, 100%, 50%); --st-frettir-h: 345; --st-frettir-s: 100%; --st-frettir-l: 50%;
  --st-rannsoknir: hsl(345, 100%, 50%); --st-rannsoknir-h: 345; --st-rannsoknir-s: 100%; --st-rannsoknir-l: 50%;
  --st-thekking: hsl(345, 100%, 50%); --st-thekking-h: 345; --st-thekking-s: 100%; --st-thekking-l: 50%;
  --st-lifid: hsl(345, 100%, 50%); --st-lifid-h: 345; --st-lifid-s: 100%; --st-lifid-l: 50%;
  --st-thaettir: hsl(345, 100%, 50%); --st-thaettir-h: 345; --st-thaettir-s: 100%; --st-thaettir-l: 50%;
  --st-folk: hsl(202, 95%, 61%); --st-folk-h: 202; --st-folk-s: 95%; --st-folk-l: 61%;
  --st-menning: hsl(260, 80%, 65%); --st-menning-h: 260; --st-menning-s: 80%; --st-menning-l: 65%;
  --st-umraeda: hsl(34, 100%, 49%); --st-umraeda-h: 34; --st-umraeda-s: 100%; --st-umraeda-l: 49%;
  --st-cta: hsl(345, 100%, 50%); --st-cta-h: 345; --st-cta-s: 100%; --st-cta-l: 50%;
  --st-black: hsl(0, 0%, 4%); --st-black-h: 0; --st-black-s: 0%; --st-black-l: 4%;
  --st-bg: hsl(0, 0%, 4%); --st-bg-h: 0; --st-bg-s: 0%; --st-bg-l: 4%;
  --st-text-color: hsl(0, 0%, 95%);
  --st-logo-color: hsl(345, 100%, 50%);
  --st-line-color: hsl(0, 0%, 32%);
  --st-line-color-light: hsl(0, 0%, 15%);
  --st-line-color-sharp: hsl(0, 0%, 100%);
  --st-vote-up: hsl(150, 100%, 43%); --st-vote-up-h: 150; --st-vote-up-s: 100%; --st-vote-up-l: 43%;
  --st-vote-down: hsl(345, 100%, 60%); --st-vote-down-h: 345; --st-vote-down-s: 100%; --st-vote-down-l: 60%;
}

/* A category's own colour in its articles and teasers, where Heimildin's pages have their red, as on mannlif.is
   (its --section-color). */
.article.article__section--folk,
.article-item.article-item__folk {
  --st-accent: var(--st-folk); --st-accent-h: var(--st-folk-h); --st-accent-s: var(--st-folk-s); --st-accent-l: var(--st-folk-l);
}
.article.article__section--menning,
.article-item.article-item__menning {
  --st-accent: var(--st-menning); --st-accent-h: var(--st-menning-h); --st-accent-s: var(--st-menning-s); --st-accent-l: var(--st-menning-l);
}
.article.article__section--skodun,
.article-item.article-item__skodun {
  --st-accent: var(--st-umraeda); --st-accent-h: var(--st-umraeda-h); --st-accent-s: var(--st-umraeda-s); --st-accent-l: var(--st-umraeda-l);
}
.article.article__section--sport,
.article-item.article-item__sport {
  --st-accent: var(--st-green); --st-accent-h: var(--st-green-h); --st-accent-s: var(--st-green-s); --st-accent-l: var(--st-green-l);
}

/* Skoðun's pieces on mannlif.is's warm ground, its greys and rules warm too (where Heimildin's opinion pieces,
   .article__section--umraeda, have theirs: article.scss). */
.article.article__section--skodun {
  --st-bg-light: hsl(34, 40%, 90%);
  --st-g-100: hsl(34, 40%, 90%);
  --st-g-200: hsl(34, 40%, 85%);
  --st-g-300: hsl(34, 25%, 75%);
  --st-g-400: hsl(34, 10%, 60%);
  --st-grey: hsl(34, 10%, 50%);
  --st-g-600: hsl(34, 10%, 40%);
  --st-g-700: hsl(34, 10%, 30%);
  --st-g-800: hsl(34, 10%, 20%);
  --st-g-900: hsl(34, 10%, 10%);
  --st-line-color: hsl(34, 10%, 60%);
  --st-line-color-light: hsl(34, 40%, 85%);
  background: hsl(34, 50%, 94%);
}
[data-theme="dark"] .article.article__section--skodun {
  --st-bg-light: hsl(34, 10%, 10%);
  --st-g-100: hsl(34, 10%, 5%);
  --st-g-200: hsl(34, 10%, 10%);
  --st-g-300: hsl(34, 10%, 20%);
  --st-g-400: hsl(34, 10%, 30%);
  --st-grey: hsl(34, 10%, 46%);
  --st-g-600: hsl(34, 10%, 60%);
  --st-g-700: hsl(34, 20%, 70%);
  --st-g-800: hsl(34, 30%, 80%);
  --st-g-900: hsl(34, 40%, 85%);
  --st-line-color: hsl(34, 10%, 30%);
  --st-line-color-light: hsl(34, 10%, 10%);
  background: hsl(34, 50%, 10%);
}

/* Headlines in Lektorat, bold (its own width is mannlif.is's); a writer's (a column, Skoðun) in Sentinel bold, and
   Slúður's teasers in Sentinel italic, as on mannlif.is. */
.article.article__section--skodun .article__headline,
.article.article__authored .article__headline,
.article-item.article-item__authored .article-item__headline,
.article-item.article-item--opinion .article-item__headline {
  font-family: var(--st-font-text);
  font-style: normal;
  font-weight: 700;
}
.article-item.article-item__sludur .article-item__headline {
  font-family: var(--st-font-text);
  font-style: italic;
  font-weight: 400;
}

/* An article's headline and subhead in mannlif.is's sizes (its articles.scss: the headline 30px on phones, 40px on
   tablets, 44px, 52px on wide screens; the subhead 20px, 22px, 24px), not Heimildin's smaller ones (the owner,
   2026-10-24: "leturstærðir í fyrirsögn og inngangi hafa minnkað"). Mynd til hliðar keeps its own beside its picture
   from 992px (article.scss: mannlif.is's Feature C's). The steps are the site's (its lg, 992px, and its full width,
   1390px). */
@media (max-width: 767.98px) {
  .article .article__headline {
    font-size: 1.875rem;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .article .article__headline {
    font-size: 2.5rem;
  }
}
@media (min-width: 992px) {
  .article:not(.article__layout-feature-side) .article__headline {
    font-size: 2.75rem;
  }
}
@media (min-width: 1390px) {
  .article:not(.article__layout-feature-side) .article__headline {
    font-size: 3.25rem;
  }
}
.article .article__subhead {
  font-size: 1.25rem;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .article .article__subhead {
    font-size: 1.375rem;
  }
}
@media (min-width: 1390px) {
  .article .article__subhead {
    font-size: 1.5rem;
  }
}

/* An article's text in mannlif.is's sizes from tablets up (its articles.scss: 22px on tablets, 24px from 992px; the
   owner, 2026-10-24: "change the body text size, at least on desktop"). Sentinel is small for its size (its x-height
   45% of it, Heimildin's Tiempos 53%): at the site's 18–20px it read smaller than Heimildin's text and its lines ran
   64–74 characters; at these, 46–60, as on mannlif.is. On phones 19px (the owner, 2026-10-24, of the measurements of
   phone text across outlets: Sentinel at 18px read the smallest of them, smaller than mannlif.is's 20px, whose lines
   run only 32–35 characters): 38–44 characters a line. */
.article__body__text > p,
.article__body__text > ul,
.article__body__text > ol,
.article__body__text .hidden-content > p,
.article__body__text .hidden-content > ul,
.article__body__text .hidden-content > ol {
  font-size: 1.1875em;
}
@media (min-width: 768px) {
  .article__body__text > p,
  .article__body__text > ul,
  .article__body__text > ol,
  .article__body__text .hidden-content > p,
  .article__body__text .hidden-content > ul,
  .article__body__text .hidden-content > ol {
    font-size: 1.375em;
  }
}
@media (min-width: 992px) {
  .article__body__text > p,
  .article__body__text > ul,
  .article__body__text > ol,
  .article__body__text .hidden-content > p,
  .article__body__text .hidden-content > ul,
  .article__body__text .hidden-content > ol {
    font-size: 1.5em;
  }
}

/* A Kynning article's headline in Franklin Gothic, lighter than the news's bold Lektorat, as on its teasers
   (parts/_snati_parts.scss; the owner, 2026-10-25): advertisers' content reads as other than the news. */
.article.article__section--kynning .article__headline {
  font-family: var(--st-font-sans);
  font-variation-settings: normal;
  font-weight: 400;
  letter-spacing: -.01em;
}

/* A category over a headline in capitals and in its category's colour, as on mannlif.is (the owner, 2026-10-24: "eiga
   að vera áfram í lit og í hástöfum, eins og á mannlif.is", on teasers and over an article's headline): Lektorat narrow
   and bold, tracked out; on a teaser over a picture and over an article's cover in its colour too, as there. A list's
   (the most read) keeps the site's: mannlif.is's lists had theirs in plain type. */
.article-item .article-item__label__category,
.article-item .article-item__opinion__category,
.article-item.article-item__theme--cover .article-item__label__category {
  font-family: var(--st-font-headline);
  font-variation-settings: "wdth" 80, "wght" 700;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .125em;
  color: var(--st-accent);
}
.article-list__banner .article-item .article-item__label__category,
.article-list__list .article-item .article-item__label__category {
  font-family: var(--st-font-sans);
  font-variation-settings: normal;
  text-transform: none;
  letter-spacing: normal;
}
.article .article__label__category,
.article .article__label__category:visited,
.article.article__layout-feature-overlay .article__label__category,
.article.article__layout-feature-overlay .article__label__category:visited,
.article.article--dark-cover .article__label__category {
  font-family: var(--st-font-headline);
  font-variation-settings: "wdth" 87, "wght" 700;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--st-accent);
}