/* ==========================================================================
   The reader and the paywall
   --------------------------------------------------------------------------
   Note there is no `.blurred` or `.locked-text` rule here, and that is
   deliberate. Locked pages are never sent to the browser, so there is nothing
   to blur, fade or overlay — the paywall is a panel that stands in place of
   content that does not exist on this side of the network.
   ========================================================================== */

.reader-shell { max-width: 46rem; margin-inline: auto; }

.reader-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: .9rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line);
}
.reader-head a { text-decoration: none; }
.reader-head a:hover { text-decoration: underline; }

/* A page. Set wider and looser than the marketing copy — this is meant to be
   read for minutes, not scanned for seconds. */
.leaf { font-size: 1.06rem; line-height: 1.8; }
.leaf h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.leaf p { margin-bottom: 1.3rem; }
.leaf p:last-of-type { margin-bottom: 0; }

.reader-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.reader-nav .btn { min-width: 9rem; }

/* --- Contents ------------------------------------------------------------- */
.toc-wrap { margin-top: 1.5rem; }
.toc-wrap summary {
  cursor: pointer; font-weight: 600; font-size: .93rem; color: var(--ink-soft);
  padding: .5rem 0; list-style-position: inside;
}
.toc-wrap summary:hover { color: var(--ink); }
.toc { display: grid; gap: .15rem; margin-top: .6rem; }

.toc-item {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: .5rem .7rem; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: .92rem; text-align: left; color: var(--ink); cursor: pointer;
}
.toc-item:hover { background: var(--bg-tint); }
.toc-item.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 650; }
.toc-item.locked { color: var(--ink-faint); }
.toc-item svg { width: 14px; height: 14px; margin-left: auto; flex: none; }
.toc-n {
  flex: none; width: 1.8rem; font-variant-numeric: tabular-nums;
  color: var(--ink-faint); font-size: .85rem;
}
.toc-item.on .toc-n { color: var(--brand); }
.toc-h { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- The paywall ---------------------------------------------------------- */
.paywall {
  text-align: center; padding: clamp(2rem, 6vw, 3.5rem) clamp(1.2rem, 4vw, 2.5rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 60%);
  box-shadow: var(--shadow);
}
.paywall-mark {
  width: 58px; height: 58px; border-radius: 50%; background: var(--brand-soft);
  color: var(--brand); display: grid; place-items: center; margin: 0 auto 1.2rem;
}
.paywall-mark svg { width: 26px; height: 26px; }
.paywall h2 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin-bottom: .5rem; }
.paywall > p { max-width: 46ch; margin-inline: auto; }

.paywall-list {
  list-style: none; padding: 0; margin: 1.6rem auto 0; max-width: 26rem;
  display: grid; gap: .55rem; text-align: left;
}
.paywall-list li {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .95rem; color: var(--ink-soft);
}
.paywall-list li::before {
  content: '✓'; color: var(--ok); font-weight: 800; flex: none;
}

/* --- The "read a sample" button on a product card ------------------------- */
.read-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; font-weight: 600; color: var(--brand); text-decoration: none;
}
.read-link:hover { text-decoration: underline; }
.read-link svg { width: 15px; height: 15px; }

.preview-note {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--brand-soft); color: var(--brand-dark);
  border-radius: 999px; padding: .25rem .8rem;
  font-size: .78rem; font-weight: 700;
}

/* The card body is a flex column, which stretches an inline-flex child to
   full width unless it is told not to. */
.product-body .preview-note { align-self: flex-start; }

/* ==========================================================================
   Brand assets
   --------------------------------------------------------------------------
   The banner and the wordmark are uploaded by the Academy through the portal,
   so everything here has to degrade cleanly when they are absent.
   ========================================================================== */

/* The uploaded flyer, shown exactly as supplied: never cropped, never
   letterboxed, never covered with text. It is a finished piece of design and
   overlaying it would only fight it. */
.banner-band { background: linear-gradient(168deg, var(--brand-dark) 0%, var(--brand) 100%); padding: 0; }
.banner-band .wrap { padding: clamp(1rem, 3vw, 2rem) 0; }
.banner-art {
  display: block; margin-inline: auto;
  width: auto; max-width: 100%;
  /* Capped so an unexpectedly tall or square file cannot fill the whole
     viewport. object-fit is not used and no dimension is forced: the picture
     keeps its own aspect ratio and is never cropped. */
  max-height: min(78vh, 780px);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
}

/* The wordmark as artwork. Height is set in em so it tracks whatever font-size
   its container already had, and the text it replaces stays in the DOM. */
.wordmark-art { display: block; width: auto; height: 1.15em; }
.wordmark-swapped { display: inline-flex; align-items: center; }
.footer-brand .wordmark-swapped .wordmark-art { filter: brightness(0) invert(1); }

/* --- Clickable subject arrows on the flyer -------------------------------- */
/* The image is inside a positioned box so hotspots can sit on top of it. The
   box shrink-wraps the picture, so percentage coordinates land on the artwork
   and not on whitespace beside it. */
.banner-map { position: relative; display: inline-block; line-height: 0; }

.banner-hotspot {
  position: absolute;
  display: block;
  border-radius: 8px;
  /* Invisible by default — the artwork already shows what these are. The
     highlight appears on hover and focus, which is where a visitor needs the
     confirmation that a thing is clickable. */
  background: transparent;
  outline: 2px solid transparent;
  transition: background .14s, outline-color .14s;
}
.banner-hotspot:hover {
  background: rgba(255, 255, 255, .28);
  outline-color: rgba(255, 255, 255, .85);
}
/* Keyboard users get a stronger marker: they cannot hover to find these, so the
   focus ring has to be unmistakable. */
.banner-hotspot:focus-visible {
  background: rgba(255, 255, 255, .3);
  outline: 3px solid var(--brand-dark);
  outline-offset: 1px;
}

/* Add `banner-debug` to the container to see where the hotspots actually land.
   Kept in the stylesheet because the coordinates are measured by eye against
   the artwork, and they will need re-checking whenever the flyer changes. */
.banner-map.banner-debug .banner-hotspot {
  background: rgba(255, 0, 0, .28);
  outline: 2px solid #f00;
}

/* Hotspots only carry navigation when the artwork is rendered large enough for
   the arrows to be a real tap target. banner-map.js sets `map-active`. */
.banner-map:not(.map-active) .banner-hotspot {
  pointer-events: none;
  display: none;
}

/* On a narrow screen the picture is marketing and the chips below it are the
   navigation. The flyer's duplicated headline and contact block are hidden so
   the page does not say everything twice. */
.banner-subjects { margin-top: 1.2rem; }
.banner-subjects h2 {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: #0d3b52; margin: 0 0 .7rem; text-align: center;
}

/* On touch screens the chips are the only way to reach a programme, so they
   get a proper target. 44px is the usual minimum for a fingertip; the default
   chip padding lands around 26px, which is a miss waiting to happen. */
@media (max-width: 640px) {
  .banner-subjects .chip {
    min-height: 44px;
    padding: .8rem 1rem;
    font-size: .92rem;
  }
  .banner-subjects .chip-grid { gap: .55rem; }
}

/* The frame wraps only the picture, so hotspot percentages measure against the
   artwork and nothing else. */
.banner-frame { position: relative; display: inline-block; line-height: 0; max-width: 100%; }
.banner-band .wrap { text-align: center; }

/* When the hotspots are live they are the navigation, so the chip list is
   hidden rather than shown twice. It stays in the document — only the display
   changes — so it is still there for anything reading the page. */
.banner-band:has(.banner-map.map-active) .banner-subjects { display: none; }