/* =========================================================
   ARTICLE — article pages such as jerboasite.html (loaded after base.css)
   1. Title block
   2. Figures (grey → colour when scrolled to)
   3. Footnotes (sidenotes on desktop, inline notes below 1121px)
   4. Print / "Download" PDF
   ========================================================= */


/* 1. Title block
   ========================================================= */
/* Unlike section titles, the article title follows the "+" / "−" text size. */
.article-page .content h1 {
  padding: 15px 0;
  font-size: calc(var(--size-meta) * var(--text-scale));
  line-height: var(--leading);
}

.article-page .article-quote {
  padding-right: 7.5vw;
  padding-left: 7.5vw;
}

/* Underlined links (text, standfirst, notes) lose their underline and blur
   on hover, as on the home page. Note numbers are not underlined: unchanged. */
.article-page #column-left a:not(.footnote-ref):not(.backlink):not(.pdf-cover):hover,
.article-page .sidenotes a:hover {
  text-decoration: none;
  filter: blur(1px);
}


/* 2. Figures
   article.js wraps each image in .article-image-stack with a colour copy
   on top, faded in while the figure crosses the top of the column.
   ========================================================= */
.article-figure {
  display: table;
  margin: 30px auto;
  background: var(--bg);
}

.article-image-stack {
  position: relative;
  display: inline-block;
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  background: var(--bg);
}

.article-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 80vh;
}

.article-img-base {
  filter: grayscale(100%);
  mix-blend-mode: multiply;
}

.article-img-color {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: grayscale(0%);
  mix-blend-mode: normal;
  transition: opacity 0.7s ease;
}

.article-image-stack.is-color .article-img-color {
  opacity: 1;
}


.article-figure figcaption {
  display: table-caption;
  caption-side: bottom;
  margin-top: 6px;
  font-size: calc(var(--size-note) * var(--text-scale));
  line-height: var(--leading);
}

/* The first figure spans the full column width, unless it is a vertical
   image (class "is-portrait"), shown like the others. */
#column-left > .article-figure:first-of-type:not(.is-portrait) {
  display: block;
  width: 100%;
  margin: 30px 0;
}

#column-left > .article-figure:first-of-type:not(.is-portrait) .article-image-stack,
#column-left > .article-figure:first-of-type:not(.is-portrait) .article-img {
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
}

#column-left > .article-figure:first-of-type:not(.is-portrait) figcaption {
  display: block;
}


/* Embedded media (Library pages): video 16:9, sound player, PDF viewer */
.article-media {
  margin: 30px 0;
}

.article-media iframe,
.article-media audio {
  display: block;
  width: 100%;
  border: 0;
}

.article-video iframe { aspect-ratio: 16 / 9; }
.article-audio iframe { height: 166px; }

/* PDF: its first page as a cover (js/pdf-viewer.js), with the drop shadow of
   the book covers, shrinking on hover; a click opens the PDF in a new tab. */
.pdf-cover {
  display: flex;
  justify-content: center;
  text-decoration: none;
}

/* --ratio (width / height of the page) is set by js/pdf-viewer.js. */
.pdf-page {
  display: block;
  width: min(100%, calc((100vh - var(--nav-row-height) - var(--footer-height) - 30px) * var(--ratio)));
  height: auto;
  aspect-ratio: var(--ratio);
  background: #fff;
  filter: grayscale(100%);
  box-shadow: var(--shadow);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.4s ease, filter var(--colour-fade);
}

.pdf-page.is-drawn {
  opacity: 1;
}

.pdf-cover:hover .pdf-page,
.pdf-cover:focus-visible .pdf-page {
  filter: grayscale(0%);
  mix-blend-mode: normal;
}

.pdf-cover:focus-visible {
  outline: none;
}

/* "Open the PDF ↗" only if the pages cannot be shown. */
.pdf-fallback {
  display: none;
}

.article-pdf.is-failed .pdf-fallback {
  display: block;
}

.article-media figcaption {
  margin-top: 6px;
  font-size: calc(var(--size-note) * var(--text-scale));
  line-height: var(--leading);
}


/* 3. Footnotes
   The .footnotes list is the source; article.js copies it into the
   .sidenotes column (desktop) or opens notes inline (tablet/mobile).
   ========================================================= */
.footnotes,
.sidenotes {
  display: none;
}

.footnotes {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fg);
  font-size: calc(var(--size-note) * var(--text-scale));
}

.footnotes ol {
  padding-left: 1.5rem;
}

.footnotes li {
  margin-bottom: 0.75rem;
}

.footnote-ref {
  display: inline-block;
  position: relative;
  top: -0.45em;
  font-size: 65%;
  line-height: 0;
  text-decoration: none !important;
}

.backlink {
  display: inline-block;
  margin-left: 0.3rem;
  text-decoration: none !important;
}

.inline-footnote {
  display: inline;
  margin-left: 0.25em;
  font-size: 68.75%;
  line-height: var(--leading);
}

.inline-footnote::before,
.inline-footnote::after {
  content: " ";
}

@media screen and (min-width: 1121px) {
  #content-article {
    display: flex;
    align-items: flex-start;
  }

  .content .column#column-left {
    order: 1;
    width: 70%;
    padding-right: 15px;
    padding-left: var(--desktop-gutter);
  }

  .sidenotes {
    display: block;
    position: relative;
    order: 2;
    width: 30%;
    padding-right: var(--desktop-gutter);
    padding-left: 15px;
  }

  .sidenotes ol {
    position: relative;
    list-style: none;
  }

  .sidenote-item {
    position: absolute;
    right: 0;
    left: 0;
    display: block;
    font-size: calc(var(--size-note) * var(--text-scale));
    line-height: var(--leading);
    cursor: default;
  }

  .sidenote-number,
  .sidenote-text {
    display: block;
  }

  .sidenote-number {
    margin: 0 0 0.25em;
    line-height: var(--leading);
    cursor: default;
  }

  .footnote-ref {
    cursor: default;
  }
}

@media screen and (max-width: 1120px) {
  .footnote-ref {
    cursor: pointer;
  }
}


/* 4. Print / "Download" PDF
   Running header (author, publication) is injected by article.js.
   ========================================================= */
@media print {
  @page {
    size: A4;
    margin: 19mm 17mm 18mm;
  }

  html,
  body,
  .article-page,
  #home,
  #content-article,
  #column-left {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
    color: #000 !important;
  }

  .article-page #desktop-nav,
  .article-page #mobile-nav,
  .article-page .mobile-menu,
  .article-page .events,
  .article-page .newsletter,
  .article-page .mobile-newsletter-footer,
  .article-page .sidenotes,
  .article-page .backlink,
  .article-page .article-media iframe,
  .article-page .article-media audio,
  .inline-footnote {
    display: none !important;
  }

  .article-page #content-article {
    display: block !important;
    float: none !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .article-page .content .column#column-left {
    display: block !important;
    float: none !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .article-page #column-left p {
    font-size: 11pt !important;
    line-height: 1.35 !important;
  }

  .article-page #column-left h1 {
    padding-top: 0 !important;
    font-size: 18pt !important;
  }

  .article-page #column-left h2 {
    font-size: 12pt !important;
  }

  .article-page .article-figure,
  .article-page .article-image-stack,
  .article-page .article-figure img {
    background: #fff !important;
    mix-blend-mode: normal !important;
  }

  /* Images are printed in colour: no grey filter, no colour copy on top. */
  .article-page .article-img {
    filter: none !important;
  }

  .article-page .article-img-color {
    display: none !important;
  }

  .article-page .article-figure {
    max-width: 100%;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .article-page .article-img {
    max-width: 100% !important;
    max-height: 170mm !important;
  }

  .article-page figcaption {
    font-size: 8pt !important;
    line-height: 1.25 !important;
  }

  .article-page .footnotes {
    display: block !important;
    border-top: 1px solid black;
    font-size: 8pt !important;
  }

  .article-page a {
    color: #000 !important;
    text-decoration: none !important;
  }
}