/* Sniðmát sagaeskju (#11022): its stylesheet on the article pages (news_tags.snidmat_styles), in place of the CSS
   stored with it in the admin. That CSS as of 2026-11-10, in Heimildin's colours and faces (README.md), without
   the rules nothing on its articles matches any more, and without its own white header and full-width header
   row: the site's header, as on other pages (below). */

.header-ad {
	display: none;
}

/* The page is drawn with a cover layout's classes (feature-overlay: its text's grid, as since 2023), but has no cover
   under the site's header: the header as on other pages, on the page's ground with the dark logo, not see-through
   with a white one (it was white on white). */
body.layout-feature-overlay #header,
body.layout-feature-overlay:not(.header-is-fixed):not(.menu-is-active):not(.modal-is-active) #header.header--compact {
    background: var(--st-bg);
    color: var(--st-text-color);
}

body.layout-feature-overlay #header .header__logo svg,
body.layout-feature-overlay:not(.header-is-fixed):not(.menu-is-active):not(.modal-is-active) #header.header--compact .header__logo svg {
    fill: var(--st-logo-color);
    filter: none;
}

body.layout-feature-overlay #header .header__btns,
body.layout-feature-overlay #header:not(.header--compact) #menu_btn,
body.layout-feature-overlay:not(.header-is-fixed):not(.menu-is-active):not(.modal-is-active) #header.header--compact .header__btns {
    color: var(--st-text-color);
}

body.layout-feature-overlay:not(.header-is-fixed):not(.menu-is-active):not(.modal-is-active) #header.header--compact .header__btns svg {
    filter: none;
}

body.layout-feature-overlay:not(.header-is-fixed):not(.menu-is-active):not(.modal-is-active) #header.header--compact .header__subscribe {
    --st-text-color: inherit;
    --st-text-color-light: inherit;
}

.eskja-headline {
    font-family: "tiemposheadline_web", serif;
    font-weight: 700;
    line-height: 1.1;
    font-size: 2.25rem;
    letter-spacing: -.0125em;
    margin-top: 10rem;
}

@media only screen and (min-width: 576px) {
  .eskja-headline {
          font-size: 3rem;
          margin-top: 4rem;
      }
}

@media only screen and (min-width: 992px) {
  .eskja-headline {
          font-size: 5rem;
      }
}

.eskja-subhead {
    font-family: var(--st-font-text, "tiempostext_web", Georgia, serif);
    letter-spacing: -.0125em;
    font-size: 1.125rem;
    line-height: 1.25;
    max-width: 660px;
    margin: 2rem auto 0;
}

@media only screen and (min-width: 992px) {
  .eskja-subhead {
          font-size: 1.4rem;
      }
}

.eskja-meta {
    font-size: 1rem;
    margin-bottom: 2rem;
}

.eskja-meta:before {
    content: "";
    height: 5px;
    width: 60px;
    margin: 0 0 1rem 0;
    background: var(--st-black);
    display: block;
}

.eskja-byline {

}

.eskja-byline a:hover {
    text-decoration: underline;
}

.eskja-journalist a {
    font-weight: 700;
}

.eskja-credits {
    margin-top: .5em;
    font-size: .875rem;
    color: var(--st-text-color-light);
}

.eskja-pubdate {
    margin-top: 2rem;
}

.eskja-slide {
    min-height: 100vh;
    width: 100%;
    position: relative;
    transition: opacity 0.25s;
    margin: 0 auto;
    margin-bottom: 2.5rem;
}

.eskja-intro {
    min-height: 100vh;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (min-width: 992px) {
  .eskja-intro {
          margin-bottom: 50vh;
      }
}

.eskja-quote {
    top: 10rem;
    z-index: 20;
    max-width: 600px;
    margin: 0 auto;
    margin-top: 1em;
}

.eskja-quote p {
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 800;
    font-family: "tiemposheadline_web", serif;
    letter-spacing: -.0125em;
}

.eskja-quote footer {
    font-size: .875rem;
    font-weight: 700;
}

@media only screen and (min-width: 992px) {
  .eskja-quote {
          margin-top: 0;
      }
  .eskja-quote p {
          font-size: 2.5rem;
      }
  .eskja-quote footer {
          font-size: 1.125rem;
      }
  .eskja-body {
          margin-top: 75vh;
      }
}

.eskja-body .article__body__text > p, .eskja-body .article__body__text > h1, .eskja-body .article__body__text > h2, .eskja-body .article__body__text > h3, .eskja-body .article__body__text > h4, .eskja-body .position-block .inline-wrap, .eskja-body .position-block-small .inline-wrap, .eskja-body .article__body__extras, .eskja-body .body-width {
    margin-left: auto;
    margin-right: auto;
}

.eskja-body .eskja-slide {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

@media only screen and (min-width: 992px) {
  .eskja-body .eskja-slide {
          margin-top: 50vh;
          margin-bottom: 50vh;
      }
}

.eskja-image {
    overflow: hidden;
    transition: opacity ease 250ms;
}

@media only screen and (min-width: 992px) {
  .eskja-image {
          opacity: 0;
          pointer-events: none;
          position: fixed;
          z-index: 100;
          left: 0;
          top: 0;
          width: 50%;
      }
}

@media only screen and (min-width: 992px) {
  .eskja-intro-container {
          transition: opacity ease 250ms;
          pointer-events: none;
          opacity: 0;
      }
  .eskja-slide.eskja-current .eskja-image, .eskja-slide.eskja-current .eskja-intro-container, .eskja-slide.eskja-current .eskja-quote {
          opacity: 1;
          pointer-events: all;
      }
}

.eskja-image img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

.eskja-slide-text-container { }

@media only screen and (min-width: 992px) {
  .eskja-slide-text-container {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          width: 50%;
      }
}

.eskja-slide-text {
   display: flex;
   align-items: center;
   justify-items: center;
   height: 100%;
}

/* The reading time and the translations ("Um … mínútna lestur", "Read in English") in the text's column, as the byline
   over them: the site puts them first in the article's body, which this page's own grid doesn't narrow, so they sat at
   the screen's left edge. The column's widths are the site's ($body_width, $body_width_xl from $full-width). */
.eskja-body > .longread-meta,
.eskja-body > .vt {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1390px) {
    .eskja-body > .longread-meta,
    .eskja-body > .vt {
        max-width: 730px;
    }
}
