/* ==========================================================================
   reports-v11.css: the reports index (/reports/), a shelf of report covers.

   Load order: the full subpage stack (see /Assets/site-v11.css header),
   /Assets/hub-v11.css, then THIS FILE. Colours come from the v11 tokens;
   the only literals are shadow tints and the page-edge paper tones, which
   have no token.

   Anatomy (the whole page is night; the reports sit on one light glass card
   so the dark covers stand off the sky and the text reads as on cream):
     header.page-hero.hub-hero.rp-hero    night hero: crumbs, h1, bold lede
     section.rp-shelf (night run)
       .rp-glass                          light frosted card
         ol.rp-list > li.rp-item
           a.rp-card                      title, meta line, then the report
             .rp-frame > .rp-book         the report as a 3D object, tilted
                           .rp-cover      front: cover image + hover veil
                           .rp-edge       right side: the page block
                           .rp-new        "New" sticker on the newest report
           p.rp-note                      the description, touch screens only
           p.rp-links                     PDF and dataset links (outside the card)
         .rp-more                         related insight papers, same card
     section#cta + footer                 the standard diagnostic band, on the same
                                          night sky so the run has no transition band

   Hover and keyboard focus turn the report to face the reader, blur the
   cover and lift the description over it. Touch screens have no hover, so
   there the description reads under the report instead.
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- hero: the standard night sky, shorter, centred over the shelf ---- */
.rp-hero { min-height: clamp(300px, 38svh, 400px); }
.rp-hero .page-hero-inner { text-align: center; }
.rp-hero .crumbs { justify-content: center; font-size: 13px; }
.rp-hero .crumbs [aria-current] { color: var(--aeolus-text-on-dark-faint); }
.page-hero.rp-hero h1 {
  max-width: 24ch;
  margin: clamp(1.1rem, 2vw, 1.6rem) auto 0;
  font-weight: 400;
  line-height: 1.06;
  text-wrap: balance;
}
/* The lede is one short bold statement. Bold sits on the paragraph itself:
   v11.css strips bold from <strong> inside paragraphs. */
.rp-hero .rp-lede {
  margin: clamp(1rem, 1.8vw, 1.4rem) auto 0;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--aeolus-text-on-dark);
}

/* The diagnostic band sits on the same night sky as the shelf (no melt), so
   its constellation fades in rather than starting on a hard top edge. */
.rp-cta-bg .bg-sky {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
}

/* ---- the shelf: a night run holding one light glass card ---- */
.rp-shelf { padding: clamp(0.5rem, 1.5vw, 1.5rem) var(--pad) clamp(2.5rem, 5vw, 4rem); }
.rp-glass {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(2.2rem, 4vw, 3.4rem) clamp(1.4rem, 4vw, 3.4rem) clamp(2.6rem, 4.5vw, 3.8rem);
  border-radius: var(--aeolus-radius-card, 20px);
  background: linear-gradient(160deg, rgba(248, 245, 239, 0.94) 0%, rgba(238, 232, 220, 0.88) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 50px 100px -40px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(243, 208, 106, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* light-surface inks inside the card, whatever the dark section sets */
  --sv-ink: var(--aeolus-text-on-light);
  --sv-body: var(--aeolus-text-on-light-body);
  --sv-label: var(--aeolus-text-on-light-label);
  color: var(--sv-ink);
  overflow: visible;
}
/* glass sheen: a soft highlight across the top-left, like light on frosted glass */
.rp-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 32%),
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%);
}
.rp-glass > .rp-list { position: relative; }
/* the dark section's link colours (gold on night) would wash out on the card */
.rp-shelf .rp-glass .rp-links a { color: var(--aeolus-text-on-light-body); border-bottom-color: rgba(26, 25, 22, 0.28); }
.rp-shelf .rp-glass .rp-links a:hover { color: var(--aeolus-ink); border-bottom-color: var(--aeolus-ink); }

/* ---- the shelf ---- */
.rp-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  justify-content: center;
  gap: 3.5rem clamp(3.5rem, 8vw, 7rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}
.rp-item { min-width: 0; }

.rp-card { display: block; color: var(--sv-ink); text-decoration: none; }
.rp-card:focus-visible { outline: none; }

/* Title above the report: one weight, natural wrap. Two lines are reserved
   and the text sits on the lower one, so the meta lines and the reports
   line up across the row whatever each title's length. */
main .rp-title {
  display: flex;
  align-items: flex-end;
  min-height: 2.3em;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.45rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--aeolus-ls-display);
  color: var(--sv-ink);
  text-wrap: balance;
}
.rp-meta {
  margin: 0.55rem 0 1.6rem;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sv-label);
}

/* ---- the report as an object: a front cover and a page block, turned
   so the page edge shows on the right, standing on a soft floor shadow ---- */
.rp-frame { position: relative; perspective: 1500px; }
.rp-frame::after {
  content: "";
  position: absolute;
  left: 4%;
  right: -6%;
  bottom: -26px;
  height: 46px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(26, 25, 22, 0.34), rgba(26, 25, 22, 0));
  filter: blur(4px);
  transition: transform 0.7s var(--ease-spring), opacity 0.7s ease;
}
.rp-book {
  position: relative;
  aspect-ratio: 880 / 1244;
  transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(2deg);
  transform-origin: 40% 50%;
  transition: transform 0.8s var(--ease-spring);
}
.rp-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px 4px 4px 2px;
  background: var(--aeolus-night-950);
  box-shadow:
    0 1px 2px rgba(26, 25, 22, 0.25),
    0 18px 30px -10px rgba(26, 25, 22, 0.4),
    0 40px 70px -30px rgba(26, 25, 22, 0.55);
  transition: box-shadow 0.8s var(--ease-spring);
}
/* binding and sheen: a lit fold near the spine, a soft highlight across */
.rp-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 1.6%, rgba(0, 0, 0, 0.32) 2.4%, rgba(0, 0, 0, 0) 6%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 38%);
}
.rp-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.55s ease, transform 0.9s var(--ease-spring);
}
/* the page block: 18px deep, paper tone with page lines */
.rp-edge {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 100%;
  width: 18px;
  transform-origin: left center;
  transform: rotateY(90deg);
  background:
    repeating-linear-gradient(90deg, #efe9de 0 1px, #ddd5c6 1px 2px),
    #e8e1d4;
  box-shadow: inset 6px 0 8px -4px rgba(26, 25, 22, 0.35);
}

/* "New" sticker: a gold die-cut disc on the newest report's corner. It sits
   inside the 3D book (raised off the cover) so it turns and lifts with it. */
.rp-new {
  position: absolute;
  top: -20px;
  right: -24px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FCEBB0 0%, var(--aeolus-gold-400) 46%, var(--aeolus-gold-600) 100%);
  box-shadow: 0 0 0 4px #fff, 0 12px 20px -8px rgba(26, 25, 22, 0.5);
  color: var(--aeolus-ink);
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  transform: translateZ(24px) rotate(12deg);
  pointer-events: none;
}

/* ---- the description, over the cover ---- */
.rp-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.2rem;
  background: rgba(6, 9, 15, 0.62);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.rp-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--aeolus-text-on-dark-body-strong);
}
.rp-facts {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aeolus-text-on-dark-faint);
}
.rp-go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--v11-cta-radius, 5px);
  background: var(--aeolus-gold-400);
  color: var(--aeolus-text-on-gold);
  font-weight: 600;
  font-size: 0.9rem;
}
.rp-go .arrow { display: inline-block; transition: transform 0.35s var(--ease-spring); }

@media (hover: hover) {
  .rp-card:hover .rp-book,
  .rp-card:focus-visible .rp-book { transform: rotateY(-3deg) translateY(-8px) scale(1.03); }
  .rp-card:hover .rp-cover,
  .rp-card:focus-visible .rp-cover {
    box-shadow:
      0 1px 2px rgba(26, 25, 22, 0.25),
      0 28px 40px -14px rgba(26, 25, 22, 0.45),
      0 60px 90px -36px rgba(26, 25, 22, 0.6);
  }
  .rp-card:hover .rp-frame::after,
  .rp-card:focus-visible .rp-frame::after { transform: scale(0.92); opacity: 0.75; }
  .rp-card:hover .rp-cover img,
  .rp-card:focus-visible .rp-cover img { filter: blur(6px) brightness(0.7); transform: scale(1.06); }
  .rp-card:hover .rp-veil,
  .rp-card:focus-visible .rp-veil { opacity: 1; }
  .rp-card:hover .rp-go .arrow { transform: translateX(3px); }
  .rp-card:focus-visible .rp-cover { outline: 2px solid var(--aeolus-bronze); outline-offset: 5px; }
}

/* Touch: no hover, so no veil; the description reads under the report. */
.rp-note { display: none; }
@media (hover: none) {
  .rp-veil { display: none; }
  .rp-note {
    display: block;
    margin: 2.4rem 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sv-body);
  }
}

.rp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  margin: 2.6rem 0 0;
  font-size: 0.9rem;
}
.rp-links a {
  color: var(--sv-body);
  border-bottom: 1px solid var(--aeolus-hairline-on-light);
  padding-bottom: 2px;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.rp-links a:hover { color: var(--sv-ink); border-color: var(--sv-ink); }

/* ---- related insight papers: the same glass card, below the reports ---- */
.rp-more {
  position: relative;
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-top: clamp(2rem, 3.5vw, 2.6rem);
  border-top: 1px solid rgba(26, 25, 22, 0.16);
}
.rp-more-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
main .rp-glass .rp-more-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--aeolus-ls-display);
  color: var(--aeolus-ink);
}
.rp-shelf .rp-glass .rp-more-all {
  flex: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--aeolus-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 25, 22, 0.28);
  padding-bottom: 2px;
}
.rp-shelf .rp-glass .rp-more-all:hover { border-bottom-color: var(--aeolus-ink); }
.rp-more-all .arrow { display: inline-block; transition: transform 0.35s var(--ease-spring); }
.rp-more-all:hover .arrow { transform: translateX(3px); }
.rp-more-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.6rem, 4vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rp-more-list li { border-top: 1px solid rgba(26, 25, 22, 0.12); }
.rp-shelf .rp-glass .rp-more-link {
  position: relative;
  display: block;
  padding: 1.1rem 0 1.25rem;
  color: var(--aeolus-ink);
  text-decoration: none;
}
/* a gold tick on the rule that runs the width on hover, as on the hub's pillars */
.rp-more-link::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2rem;
  height: 1px;
  background: var(--aeolus-gold-600);
  transition: width 0.6s var(--ease-spring);
}
.rp-more-link:hover::before,
.rp-more-link:focus-visible::before { width: 100%; }
.rp-more-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--aeolus-ink);
  text-wrap: balance;
  transition: color 0.2s ease;
}
.rp-more-link:hover .rp-more-name { color: var(--aeolus-bronze); }
.rp-more-dek {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--aeolus-text-on-light-body);
}
.rp-more-meta {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aeolus-text-on-light-label);
}

@media (max-width: 700px) {
  .rp-glass { padding: 2rem 1.25rem 2.4rem; }
  .rp-more-list { grid-template-columns: 1fr; }
  .rp-list { grid-template-columns: minmax(0, 260px); gap: 4rem; }
  main .rp-title { display: block; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-book, .rp-cover, .rp-cover img, .rp-veil, .rp-frame::after { transition: none; }
  .rp-card:hover .rp-book, .rp-card:focus-visible .rp-book { transform: rotateY(-20deg) rotateX(2deg); }
  .rp-card:hover .rp-cover img, .rp-card:focus-visible .rp-cover img { transform: none; }
}