/*
 * Heimilisblaðið: Heimildin's layouts in its own colours and typefaces (the owner's decision,
 * 2026-10-07). On its host, after the site's stylesheet (templates/base.html, outlets_tags
 * outlet_stylesheet): the site's colour properties set again, and the --h-font-* properties the
 * site's type declarations fall back from (static/static_dirs/site/css/scss/variables.scss).
 * Feature (Commercial Type) is licensed for heimilisbladid.is; Field Gothic and Factoria use
 * Adobe kit bhm2zeh, linked by the shared page head. :root matches in dark mode too, so the dark block sets everything again.
 */

@font-face { font-family: "Feature Display Web"; src: url("fonts/FeatureDisplay-Medium-Web.woff2") format("woff2"), url("fonts/FeatureDisplay-Medium-Web.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Feature Text Web"; src: url("fonts/FeatureText-Regular-Web.woff2") format("woff2"), url("fonts/FeatureText-Regular-Web.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Feature Text Web"; src: url("fonts/FeatureText-RegularItalic-Web.woff2") format("woff2"), url("fonts/FeatureText-RegularItalic-Web.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Feature Text Web"; src: url("fonts/FeatureText-Bold-Web.woff2") format("woff2"), url("fonts/FeatureText-Bold-Web.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Feature Text Web"; src: url("fonts/FeatureText-BoldItalic-Web.woff2") format("woff2"), url("fonts/FeatureText-BoldItalic-Web.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }

:root,
[data-theme="light"] {
  --h-font-headline: "Feature Text Web", serif;
  --h-font-text: "Feature Text Web", serif;
  --h-font-sans: "field-gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --h-red: hsl(174, 100%, 28%); --h-red-h: 174; --h-red-s: 100%; --h-red-l: 28%;
  --h-cyan: hsl(174, 100%, 28%); --h-cyan-h: 174; --h-cyan-s: 100%; --h-cyan-l: 28%;
  --h-frettir: hsl(174, 100%, 28%); --h-frettir-h: 174; --h-frettir-s: 100%; --h-frettir-l: 28%;
  --h-folk: hsl(174, 100%, 28%); --h-folk-h: 174; --h-folk-s: 100%; --h-folk-l: 28%;
  --h-rannsoknir: hsl(174, 100%, 28%); --h-rannsoknir-h: 174; --h-rannsoknir-s: 100%; --h-rannsoknir-l: 28%;
  --h-umraeda: hsl(174, 100%, 28%); --h-umraeda-h: 174; --h-umraeda-s: 100%; --h-umraeda-l: 28%;
  --h-menning: hsl(174, 100%, 28%); --h-menning-h: 174; --h-menning-s: 100%; --h-menning-l: 28%;
  --h-thekking: hsl(174, 100%, 28%); --h-thekking-h: 174; --h-thekking-s: 100%; --h-thekking-l: 28%;
  --h-lifid: hsl(174, 100%, 28%); --h-lifid-h: 174; --h-lifid-s: 100%; --h-lifid-l: 28%;
  --h-thaettir: hsl(174, 100%, 28%); --h-thaettir-h: 174; --h-thaettir-s: 100%; --h-thaettir-l: 28%;
  --h-darkred: hsl(174, 100%, 22%); --h-darkred-h: 174; --h-darkred-s: 100%; --h-darkred-l: 22%;
  --h-lightred: hsl(174, 100%, 36%); --h-lightred-h: 174; --h-lightred-s: 100%; --h-lightred-l: 36%;
  --h-bg: hsl(60, 20%, 94%); --h-bg-h: 60; --h-bg-s: 20%; --h-bg-l: 94%;
  --h-offwhite: hsl(60, 15%, 88%); --h-offwhite-h: 60; --h-offwhite-s: 15%; --h-offwhite-l: 88%;
  --h-logo-color: hsl(174, 100%, 28%);
  --h-vote-up: hsl(174, 100%, 28%); --h-vote-up-h: 174; --h-vote-up-s: 100%; --h-vote-up-l: 28%;
  --h-vote-down: hsl(8, 47%, 40%); --h-vote-down-h: 8; --h-vote-down-s: 47%; --h-vote-down-l: 40%;
  --h-vote-up-hover-bg: hsl(174, 37%, 87%);
  --h-vote-up-active-bg: hsl(174, 37%, 82%);
}

[data-theme="dark"] {
  --h-red: hsl(174, 75%, 38%); --h-red-h: 174; --h-red-s: 75%; --h-red-l: 38%;
  --h-cyan: hsl(174, 75%, 38%); --h-cyan-h: 174; --h-cyan-s: 75%; --h-cyan-l: 38%;
  --h-frettir: hsl(174, 75%, 38%); --h-frettir-h: 174; --h-frettir-s: 75%; --h-frettir-l: 38%;
  --h-folk: hsl(174, 75%, 38%); --h-folk-h: 174; --h-folk-s: 75%; --h-folk-l: 38%;
  --h-rannsoknir: hsl(174, 75%, 38%); --h-rannsoknir-h: 174; --h-rannsoknir-s: 75%; --h-rannsoknir-l: 38%;
  --h-umraeda: hsl(174, 75%, 38%); --h-umraeda-h: 174; --h-umraeda-s: 75%; --h-umraeda-l: 38%;
  --h-menning: hsl(174, 75%, 38%); --h-menning-h: 174; --h-menning-s: 75%; --h-menning-l: 38%;
  --h-thekking: hsl(174, 75%, 38%); --h-thekking-h: 174; --h-thekking-s: 75%; --h-thekking-l: 38%;
  --h-lifid: hsl(174, 75%, 38%); --h-lifid-h: 174; --h-lifid-s: 75%; --h-lifid-l: 38%;
  --h-thaettir: hsl(174, 75%, 38%); --h-thaettir-h: 174; --h-thaettir-s: 75%; --h-thaettir-l: 38%;
  --h-darkred: hsl(174, 80%, 30%); --h-darkred-h: 174; --h-darkred-s: 80%; --h-darkred-l: 30%;
  --h-lightred: hsl(174, 70%, 46%); --h-lightred-h: 174; --h-lightred-s: 70%; --h-lightred-l: 46%;
  --h-bg: hsl(0, 0%, 4%); --h-bg-h: 0; --h-bg-s: 0%; --h-bg-l: 4%;
  --h-offwhite: hsl(0, 0%, 90%); --h-offwhite-h: 0; --h-offwhite-s: 0%; --h-offwhite-l: 90%;
  --h-bg-light: hsl(0, 0%, 10%);
  --h-text-color: hsl(60, 20%, 94%);
  --h-logo-color: hsl(60, 20%, 94%);
  --h-vote-up: hsl(174, 75%, 38%); --h-vote-up-h: 174; --h-vote-up-s: 75%; --h-vote-up-l: 38%;
  --h-vote-down: hsl(8, 64%, 64%); --h-vote-down-h: 8; --h-vote-down-s: 64%; --h-vote-down-l: 64%;
  --h-vote-up-hover-bg: hsl(174, 55%, 20%);
  --h-vote-up-active-bg: hsl(174, 55%, 16%);
  --h-vote-selected-text: hsl(0, 0%, 4%);
}

/* The shared stylesheet owns sizes, layout and interactions. */
/* Use the real Bold/Bold Italic faces, including in the shared Medium variants. */
.article .article__headline,
.article-item .article-item__headline {
  font-weight: 700;
  font-synthesis: none;
  font-kerning: normal;
}

/* A little tighter tracking for display sizes; small teaser titles keep theirs. */
.article__headline,
.article-item--large .article-item__headline,
.article-item--xlarge .article-item__headline,
.article-item--topstory .article-item__headline,
.article-item--topstory-center .article-item__headline,
.article-item--topstory-left .article-item__headline,
.article-item--topstory-right .article-item__headline {
  letter-spacing: -0.01em;
}
.article__label__category,
.article__label__topic,
.article-item__label__category,
.article-item__label__topic,
.label { font-family: "factoria", "field-gothic", serif; }