/* ============================================================
   Research-paper detail — cream READING AREA only
   Loaded AFTER the Webflow/staging styles on paper pages.
   Restyles ONLY the reading card (.paper-content) to the
   Updates cream reading theme. The hero, page background,
   author sidebar, header and footer are left untouched.
   Scoped to body.paper-cream so it can never bleed elsewhere.
   ============================================================ */

body.paper-cream {
  --cream-bg:   #FAF6EE;   /* warm off-white reading surface */
  --ink:        #1C1B18;   /* warm near-black body text */
  --ink-soft:   #57544D;   /* captions */
  --rule:       #E7E0D2;   /* dividers */
  --accent:     #2F6BE0;   /* links */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
}

/* ---- Keep the site header pinned to the top while reading ----
   Fixed so it stays put. It stays TRANSPARENT over the hero image at the top
   (preserving that styling), and only gains a dark background once the hero
   has scrolled past (js/paper-reading.js adds .is-scrolled), so the white
   logo/hamburger stay legible over the cream reading area. */
body.paper-cream .global-header {
  position: fixed;
  transition: background-color .25s ease;
}
body.paper-cream .global-header.is-scrolled {
  background-color: var(--midnight-blue, #01182e);
}

/* ---- Reading card surface ---- */
body.paper-cream .paper-content {
  background-color: var(--cream-bg);
}

/* chapter headings */
body.paper-cream .research-paper-chapter-title {
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
}

/* serif reading body, matching the blog article-body */
body.paper-cream .rich-content.paper,
body.paper-cream .rich-content.paper p,
body.paper-cream .rich-content.paper li {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.7;
}
body.paper-cream .rich-content.paper a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
body.paper-cream .rich-content.paper figcaption { color: var(--ink-soft); }

/* additional-metadata strip (lives inside the reading card) */
body.paper-cream .research-paper-additional { border-top-color: var(--rule); }
body.paper-cream .research-paper-item,
body.paper-cream .research-paper-label,
body.paper-cream .resarch-paper-item-detail { color: var(--ink); }

/* guard: long tokens (DOIs, URLs) must wrap, never force a scrollbar */
body.paper-cream .rich-content.paper,
body.paper-cream .research-paper-chapter-title { overflow-wrap: break-word; }

/* ---- Tablet-portrait and below ----
   The base theme keeps the fixed 250px author sidebar until 479px, which
   squeezes the reading column (and spills long words off-screen) on an
   iPad in portrait. Stack to a single column here so the reading area
   takes the full width. */
@media (max-width: 991px) {
  /* hero: more air between date and title, less between title and authors */
  body.paper-cream .section.relative.pt-md .publish-date { margin-bottom: 1rem; }
  body.paper-cream .container.mb-xxl { margin-bottom: 2rem; }
  /* the hero image is a fixed 400px absolute layer; clip it to the (now
     shorter) hero so it can't spill over and cover the AUTHORS label */
  body.paper-cream .section.relative.pt-md { overflow: hidden; }

  /* Lift the stacked authors + reading area above the absolute hero image
     and back them with the page color, so the 400px image can never overlap
     or cover the AUTHORS label no matter how short the hero ends up. */
  body.paper-cream .paper-detail {
    flex-direction: column;
    position: relative;
    z-index: 2;
    background-color: #01182e;
  }
  body.paper-cream .paper-meta {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-bottom: 1.5rem;
  }
  body.paper-cream .paper-content {
    padding: 1.5rem 1.5rem 4rem;
    border-top-left-radius: 2rem;
  }
  /* keep author photos small when the sidebar spans full width —
     the base 2-column grid would otherwise blow them up to ~half the page */
  body.paper-cream .paper-meta .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 90px);
    justify-content: center;
    gap: 1rem 1.1rem;
  }
}