/* =========================================================
   Eternal Tales unified card pattern
   Reference build: AC-v3/sandbox/aoos-text-card-060526.html v30
   LOCKED. See project_text_card_framing.md for the full pattern.
   Used by AOoS / BtM / VotF. TEotE diverges (parallax stage).

   Ported into v4 production 08.05.26 per
   project_v4_production_build_plan step 2. Replaces the per-section
   .aoos-card / .btm-card / .votf-card classes; the matching
   per-section CSS files become orphan-rule-only and are cleaned up
   in step 3 of the v4 plan.
   ========================================================= */

/* =========================================================
   Outer card glass.
   max-width caps at 900px so the composition reads as one unit
   on desktop rather than the image dominating the page column.
   --vp-aspect interpolates 0 at 320 viewport width to 1 at 1000,
   then locks at 1. Drives image aspect-ratio, image
   object-position, and title font-size as a single curve.
   v30: cream cap raised here from 77ch on .et-card__prose to
   100% so body padding is the only horizontal text constraint.
   ========================================================= */
.et-card {
  position: relative;
  max-width: clamp(280px, 92vw, 900px);
  margin: 0 auto;
  --vp-aspect: clamp(0, calc((100vw - 320px) / 680px), 1);
  /* 19.05.26 (pm): +5px top padding per user direction so title /
     breadcrumb / all content shifts down by 5px. Applies to all four
     cards (intro + AOoS + BtM + VotF). */
  padding: 5px 0 0;
  border-radius: var(--radius-lg);
  /* 18.05.26 (revised x5): the 3 tale cards (AOoS / BtM / VotF) are
     now FULLY white per user direction. The dark-glass top from the
     previous design is gone; only the .et-card--intro variant keeps
     dark glass (override below). Local CSS-var overrides flip the
     inherited dark-theme tokens from the data-theme="dark" section
     to light values so all descendant text reads as dark ink on the
     white page. */
  --bg:           #FFFFFF;
  --primary-text: #0F1419;
  --soft-text:    #5E7780;
  --quiet-text:   #7B8E94;
  background: var(--bg);
  color: var(--primary-text);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Grain on the whole card (was on .et-card__bottom::before; moved
   up so the paper texture covers the full white card surface). */
.et-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='3.5' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.30  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 400px 400px;
  opacity: 0.08;
}
/* Lift card content above the grain pseudo (replaces the
   .et-card__bottom > *:not(...) rule from the prior design). */
.et-card > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Breadcrumb scoped to the card header.
   Overrides shell.css's centred page-bc with a smaller fluid
   type that sits on the right of the card header. The pipe
   separator (|) is in the v30 sandbox HTML; shell.css's middle
   dot is being superseded across the v4 build (see plan step 4).
   ========================================================= */
.et-card .bc {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: clamp(11px, 0.55vw + 9px, 14px);
  letter-spacing: 0.02em;
  /* 18.05.26 (revised x6): bc inherits dark primary-text on the new
     white card. EXPLICITLY `text-shadow: none` to override shell.css's
     `.bc { text-shadow: 0 1px 6px rgba(0,0,0,0.85) }` (which sits at
     lower specificity but still applies if we just remove our own
     declaration). text-shadow is an inherited property so this also
     cascades to .bc__from / __to / __sep children. */
  color: var(--primary-text);
  text-shadow: none;
  white-space: nowrap;
  text-align: right;
}
/* 18.05.26: shell.css's .bc__from / .bc__to / .bc__sep rules have
   their own colour declarations (--quiet-text / --soft-text) which
   override the parent .bc colour via specificity ties + child color
   declarations. Re-assert white inside .et-card scope. */
.et-card .bc .bc__from,
.et-card .bc .bc__to,
.et-card .bc .bc__sep {
  color: var(--primary-text);
}

@media (max-width: 519.98px) {
  .et-card__header .bc {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .et-card__header .bc .bc__sep {
    display: none;
  }
}

/* =========================================================
   Header zone above the image.
   Title (left) and bc (right) sit on a shared vertical midline
   of the header zone. The header is part of the card's own
   glass extending above the image, not a separate layer.
   ========================================================= */
.et-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(14px, 2vw, 22px) clamp(20px, 4vw, 40px);
}

/* 19.05.26: when the header is immediately followed by a subtitle,
   pull the title down by tightening the header's bottom padding so
   the subtitle reads as a sibling of the title rather than as a new
   block separated by header rhythm. Subtitle itself keeps
   padding-top: 0 (see .et-card__subtitle). */
.et-card__header:has(+ .et-card__subtitle) {
  padding-bottom: clamp(4px, 0.6vw, 8px);
}

.et-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  /* 19.05.26 (pm): title size 20% smaller per user (was
     calc(26px + 16px * var(--vp-aspect))) and colour flipped to
     primary-text (dark ink on the white card body, was soft-text). */
  font-size: calc(21px + 13px * var(--vp-aspect));
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--primary-text);
  text-align: left;
}

/* v30: heading wrapper - allows title + series-line to stack on
   the left of the header while bc remains on the right. BtM uses
   this; AOoS / VotF can omit and place title directly. */
.et-card__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* v30: series-line under the title (BtM uses for "Seven Stories
   from the Deep Past of Ireland"). */
.et-card__series-line {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(12px, 0.4vw + 11px, 15px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  /* 18.05.26: series-line flipped to primary-text (white on dark
     theme). Sits on the dark glass top of the card. */
  color: var(--primary-text);
  text-align: left;
}

/* Left-aligned italic tagline (19.05.26 revised x2): sits directly
   under the title with a one line-height gap, indented to the same
   left edge as the title (so it visually reads as a sub-headline
   under the h2 rather than a standalone centred line). Font-size
   reverted to the original size; the +20% bump from the morning
   was retired per user. */
.et-card__subtitle {
  margin: 0;
  padding: 0 clamp(20px, 4vw, 40px) clamp(16px, 2vw, 28px);
  font-family: var(--font-display);
  /* 18.05.26 (pm): italic removed per user. The subtitle now reads
     as a roman display line under the title, not as a stylised
     tag-line. */
  font-style: normal;
  font-weight: 500;
  font-size: clamp(14px, 1.6vw, 20px);
  line-height: 1.4;
  color: var(--soft-text);
  text-align: left;
}

/* 19.05.26 (pm): BtM subtitle drops the bottom padding entirely
   per user direction - the standard clamp(16px, 2vw, 28px) was
   reading as an extra line-break between the subtitle and the
   intro body prose below. AOoS + VotF retain the default since
   the gap below their subtitles wasn't flagged. */
.btm__subtitle {
  padding-bottom: 0;
}

/* =========================================================
   Image stage.
   aspect-ratio interpolates 3:4 portrait at 320 to 3:2
   landscape at 1000+ via --vp-aspect; object-position pans
   from right anchor at 320 (book-cover composition) to centre
   at 1000+ (full landscape revealed). Source artwork should
   be the full landscape master so cropping is non-destructive.
   ========================================================= */
.et-card__media {
  margin: 0;
  position: relative;
  width: 100%;
  /* Stepped fallback first (used by browsers that can't parse calc()
     inside aspect-ratio, e.g. Honor / Huawei stock browser). The
     calc() form below overrides this on capable browsers and gives
     the smooth 320 -> 1000 transition. */
  aspect-ratio: 3 / 4;
  aspect-ratio: calc(0.75 + 0.75 * var(--vp-aspect));
  overflow: hidden;
  border-radius: 0;
  /* 18.05.26 (revised x3): background flipped to transparent. The
     earlier "black band" between image and white-bottom was caused
     by margin-collapse on the .btm-eras ul (a first-child margin-top
     escaping out of .et-card__bottom and revealing the .et-card's
     own dark-glass background); that fix moved the 12px clearance
     to padding-top on the ul instead. With the band root cause
     addressed, the figure no longer needs a defensive white
     background, and transparent lets VotF's intentional gaps
     between the main image and the 4-image stack show the card's
     glass effect (dark .et-card backdrop-filter + chamber behind)
     instead of a hard white panel. box-shadow: var(--shadow-lift)
     stays removed (it projected onto the white bottom as a hard
     band when the bottom flipped from cream to pure white). */
  background: transparent;
  /* Safety net: even if aspect-ratio fails entirely, the figure can
     never stretch taller than the viewport. Prevents the extreme
     y-axis stretch reported on Android Honor (10.05.26). */
  max-height: 100vh;
}
@media (min-width: 576px) {
  .et-card__media {
    aspect-ratio: 1 / 1;
    aspect-ratio: calc(0.75 + 0.75 * var(--vp-aspect));
  }
}
@media (min-width: 768px) {
  .et-card__media {
    aspect-ratio: 5 / 4;
    aspect-ratio: calc(0.75 + 0.75 * var(--vp-aspect));
  }
}
@media (min-width: 1000px) {
  .et-card__media {
    aspect-ratio: 3 / 2;
    aspect-ratio: calc(0.75 + 0.75 * var(--vp-aspect));
  }
}

/* 09.05.26: <picture> defaults to display: inline in every UA, which
   leaves no block-level containing block for the img's height: 100%
   to resolve against. At narrow viewports the img falls back to its
   intrinsic aspect and renders shorter than the figure, producing a
   navy gap below the image (and pushing BtM era icons below the
   image's visible bottom). Forcing picture to display: block + 100%
   width + 100% height gives the img a definite-height parent so its
   height: 100% resolves against the figure's aspect-ratio-derived
   height. The v30 sandbox already had this fix scoped to
   .et-card--votf .votf-stack picture; this generalises it. */
.et-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.et-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Stepped object-position fallback (right-anchored at narrow,
     centred at desktop). Calc form below overrides on capable
     browsers for smooth pan from right anchor to centre. */
  object-position: 100% center;
  object-position: calc(100% - 50% * var(--vp-aspect)) center;
}
@media (min-width: 1000px) {
  .et-card__image {
    object-position: 50% center;
    object-position: calc(100% - 50% * var(--vp-aspect)) center;
  }
}

/* =========================================================
   Meta row + credit.
   Sits below the image, centred. Underline on links is a 1px
   border-bottom rather than text-decoration so vertical rhythm
   is preserved.
   ========================================================= */
/* Artist credit (18.05.26 revised x6): flipped to top-left and
   inset to match the body prose's left padding so the credit
   left-edge aligns with the body text boundary below it. nowrap
   removed - the VotF combined credit needs to wrap on narrow
   viewports. */
.et-card__meta {
  position: absolute;
  top: 12px;
  left: clamp(24px, 4.2vw, 46px);
  right: clamp(24px, 4.2vw, 46px);
  margin: 0;
  padding: 0;
  z-index: 2;
}

.et-card__credit {
  margin: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(11px, 0.3vw + 10px, 12px);
  line-height: 1.5;
  color: var(--quiet-text);
  text-align: left;
}

.et-card__credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(190, 183, 170, 0.25);
  transition: color 150ms ease, border-color 150ms ease;
}
.et-card__credit a:hover {
  color: var(--accent-tint);
  border-bottom-color: var(--accent);
}

/* =========================================================
   Body panel (verse + prose).
   v30: horizontal padding pulled in close to header bounds so
   the prose reads at almost the same horizontal extent as the
   title (left) and bc (right), with only a slight indent.
   .et-card__prose max-width is 100% so body padding is the only
   horizontal constraint (was 77ch pre-v30).
   .et-card__verse retained for any future use; current canon
   does not use it (AOoS verse opener removed at v30).
   ========================================================= */
.et-card__body {
  padding: clamp(12px, 1.6vw, 20px) clamp(24px, 4.2vw, 46px) clamp(18px, 2.4vw, 32px);
  /* 18.05.26: body / verse / prose flipped to primary-text. Resolves
     to white on the dark glass top (dark theme), and to #0F1419
     (darker) inside .et-card__bottom (which sets its own local
     light-theme token overrides). One rule covers both surfaces. */
  color: var(--primary-text);
}

.et-card__verse {
  margin: 0 auto clamp(12px, 1.4vw, 20px);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(14px, 0.25vw + 13px, 16px);
  line-height: 1.6;
  color: var(--primary-text);
  max-width: 68ch;
}
.et-card__verse p { margin: 0; }

.et-card__prose {
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: clamp(14px, 0.2vw + 13px, 15px);
  line-height: 1.7;
  color: var(--primary-text);
  max-width: 100%;
}
.et-card__prose p { margin: 0 0 var(--s-3); }
.et-card__prose p:last-child { margin-bottom: 0; }
.et-card__prose em { font-style: italic; }

/* Historical / biological underpinning paragraph (18.05.26): sits at
   the end of each tale-card body. Smaller serif italic in soft-text
   so it reads as evidential context separate from the narrative
   prose above. Top border picks up the body-bottom rhythm without
   needing a horizontal rule. */
.et-card__underpinning {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(94, 119, 128, 0.18);
  font-style: italic;
  font-size: 0.9em;
  line-height: 1.55;
  color: var(--soft-text);
}

/* Release line (18.05.26 pm v2): moved out of the body content and
   under the icon row per user. Sits inside .et-card__release,
   below the .et-card__formats list, centred horizontally to read
   as a single end-statement under the format icons. */
.et-card__releasing {
  margin: clamp(10px, 1.2vw, 16px) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(11px, 0.3vw + 10px, 13px);
  line-height: 1.4;
  color: var(--soft-text);
  letter-spacing: 0.01em;
}


/* =========================================================
   BtM modifiers
   Visibility-toggle pattern: era-stage figures, captions, body
   paragraphs, and format markers are stacked into single grid
   cells and toggled visible/hidden by data-era on the card root.
   Card height stays constant when the era changes.
   The .btm-glass-sheen SVG filter referenced by the era icons
   is defined inline once in the page body.
   ========================================================= */
.et-card--btm .btm-stage__figure {
  margin: 0;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease;
}
.et-card--btm[data-era="1"] .btm-stage__figure[data-era="1"],
.et-card--btm[data-era="2"] .btm-stage__figure[data-era="2"],
.et-card--btm[data-era="3"] .btm-stage__figure[data-era="3"] {
  opacity: 1;
}
.et-card--btm .btm-stage__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 18.05.26: object-position anchored at top so the bottom of the
     artwork (which can render as a dark band at certain viewport
     aspect ratios where the natural image bottom edge is darker
     scratched-texture content - previously masked by the
     box-shadow: var(--shadow-lift) drop, now stripped) gets cropped
     out by object-fit: cover instead of butting against the white
     bottom block as a hard dark line. Composition still reads well
     since the focal content (cave entrance, mammoth scene, etc.)
     sits in the upper-middle of each era's artwork. */
  object-position: 50% 0%;
}
/* WFOB source images re-cropped to 1.41 aspect (matching Cave +
   Womb-Lake) on 18.05.26 - originals archived to
   archive/wfob-originals-180526/. The 1.06 scale hack that
   previously compensated for the source aspect mismatch is no
   longer needed: all three era images now have the same aspect
   in source and crop the same way in the card + lightbox. */

/* Era dots (19.05.26): restored to overlay position on the image
   after a one-day below-image stint (18.05.26 pm v3). Sits inside
   .et-card__media; absolute-positioned, centred near the bottom of
   the figure. Light fill + drop shadow so dots read against varied
   image content. Gap bumped from the prior overlay 8px to 12px per
   user direction ("space them apart slightly"). Dot size held at
   the post-relocation 10px (smaller than the original 14px overlay,
   but the user shrunk them in the below-image state and that smaller
   scale carries over). */
.et-card--btm .btm-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.et-card--btm .btm-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color 160ms ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  -webkit-tap-highlight-color: transparent;
}
.et-card--btm .btm-dot[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.95);
}
.et-card--btm .btm-dot:hover,
.et-card--btm .btm-dot:focus-visible {
  background: rgba(255, 255, 255, 0.95);
}
.et-card--btm .btm-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Era bar (revised): now only carries the caption. Centred bar
   under the image with the active-era caption sitting in its grid
   stack. */
.btm-era-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(8px, 1.2vw, 14px) clamp(20px, 4vw, 56px) clamp(8px, 1.2vw, 14px);
}

.et-card--btm .btm-captions {
  display: grid;
  width: 100%;
  text-align: center;
}
.et-card--btm .btm-caption {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-serif);
  color: var(--primary-text);
  visibility: hidden;
}
.et-card--btm[data-era="1"] .btm-caption[data-era="1"],
.et-card--btm[data-era="2"] .btm-caption[data-era="2"],
.et-card--btm[data-era="3"] .btm-caption[data-era="3"] {
  visibility: visible;
}
.et-card--btm .btm-caption__primary {
  display: block;
  font-size: clamp(15px, 0.4vw + 13px, 19px);
  line-height: 1.25;
}
.et-card--btm .btm-caption__sep {
  opacity: 0.5;
  margin: 0 6px;
}
.et-card--btm .btm-caption__title {
  font-style: italic;
}
.et-card--btm .btm-caption__location {
  display: block;
  font-style: italic;
  /* 19.05.26: +15% on previous clamp(11px, 0.25vw + 10px, 13px). */
  font-size: clamp(13px, 0.29vw + 12px, 15px);
  color: var(--soft-text);
  margin-top: 3px;
}

/* 18.05.26: per-era body content (story prose + underpinning) is
   now grouped under a div[data-era] wrapper so both paragraphs swap
   together on era change. Previously each era was a single <p
   data-era="N">; restructured so the underpinning paragraph can sit
   beneath the story prose within the same era stack. */
.et-card--btm .btm-body-b {
  display: grid;
}
.et-card--btm .btm-body-b > div[data-era] {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  visibility: hidden;
}
.et-card--btm[data-era="1"] .btm-body-b > div[data-era="1"],
.et-card--btm[data-era="2"] .btm-body-b > div[data-era="2"],
.et-card--btm[data-era="3"] .btm-body-b > div[data-era="3"] {
  visibility: visible;
}
.et-card--btm .btm-body-b > div > p {
  margin: 0 0 var(--s-3);
}
.et-card--btm .btm-body-b > div > p:last-child {
  margin-bottom: 0;
}

/* v30: per-era animation status anchored to the bottom of the
   card content via grid-stack (separate from .btm-body-b so it
   does not drift with variable-length era prose). */
.btm-era-format-slot {
  display: grid;
  margin-top: clamp(14px, 2vw, 22px);
}
.btm-era-format {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(11px, 0.3vw + 10px, 13px);
  line-height: 1.4;
  color: var(--quiet-text);
  letter-spacing: 0.01em;
  visibility: hidden;
}
.et-card--btm[data-era="1"] .btm-era-format[data-era="1"],
.et-card--btm[data-era="2"] .btm-era-format[data-era="2"],
.et-card--btm[data-era="3"] .btm-era-format[data-era="3"] {
  visibility: visible;
}

/* WFOB (era 2) format slot: YouTube link variant. Restored to its
   original position inside the body prose (19.05.26 pm v2). The
   mammoth + womb-lake "in production" status texts removed earlier
   stay removed; the slot now carries only the era 2 link. */
.btm-era-format--link {
  font-style: normal;
}
.btm-era-format--link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(94, 119, 128, 0.35);
  transition: color 150ms ease, border-color 150ms ease;
}
.btm-era-format--link a:hover,
.btm-era-format--link a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.btm-era-format__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .btm-era-format--link a { transition: none; }
}


/* =========================================================
   VotF modifiers
   Source artwork is portrait (4093x5787, ~5:7); the card holds
   that aspect at every viewport, overriding the 0.75->1.5 curve.
   Two-column row at 768+ (main image + 4-thumbnail vertical
   stack); reflows to main + 2x2 grid below 768.
   ========================================================= */
.et-card--votf .et-card__media {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /* 18.05.26 (pm): gap reduced ~25% per user (was 6-10, now 5-8). */
  gap: clamp(5px, 0.6vw, 8px);
  aspect-ratio: auto;
}
.et-card--votf .votf-main {
  flex: 1 1 0;
  margin: 0;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  position: relative;
  /* Safety net for browsers where aspect-ratio fails (10.05.26). */
  max-height: 100vh;
}
.et-card--votf .votf-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
}
.et-card--votf .votf-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 18.05.26 (pm): stack width bumped 24% -> 27% per user so the
     animal tiles read slightly larger. Internal gap reduced ~25%
     to match the figure gap above. */
  flex: 0 0 27%;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.6vw, 8px);
}
.et-card--votf .votf-stack li {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
  background: #1a1617;
  min-height: 0;
}
.et-card--votf .votf-stack picture {
  display: block;
  width: 100%;
  height: 100%;
}
.et-card--votf .votf-stack img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
}

/* Hover swap: blue narrator (default) fades to alt colour. Same
   crop, same dimensions. Disabled under prefers-reduced-motion. */
.et-card--votf .votf-stack__alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.et-card--votf .votf-stack li:hover .votf-stack__alt,
.et-card--votf .votf-stack li:focus-within .votf-stack__alt {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .et-card--votf .votf-stack__alt {
    transition: none;
  }
}

/* (BtM era-bar narrow-viewport stack rule removed 18.05.26 - era
   selector now overlays the image; bar only holds the caption.) */

@media (max-width: 767.98px) {
  .et-card--votf .et-card__media {
    flex-direction: column;
    /* 11.05.26: disable the 100vh Honor safety net for VotF when the
       media stacks. votf-main at 5/7 aspect plus the 2x2 votf-stack
       grid easily total >100vh on short viewports (landscape phone,
       short browser windows); the base .et-card__media max-height
       was clamping the column and overflow:hidden was clipping the
       bottom row of profile tiles. */
    max-height: none;
  }
  .et-card--votf .votf-main {
    flex: 0 0 auto;
    width: 100%;
  }
  .et-card--votf .votf-stack {
    flex: 0 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(6px, 1.6vw, 12px);
  }
  .et-card--votf .votf-stack li {
    flex: none;
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
}


/* =========================================================
   Bottom block: cream lighter glass + ink-on-paper text.
   Wraps credit + (BtM era-bar) + body so the lower half of the
   card reads as printed paper against the upper dark glass.
   AOoS / BtM / VotF all opt in via the .et-card__bottom sibling.
   Subtle two-layer text-shadow simulates ink absorption + press.
   ========================================================= */
/* 18.05.26 (revised x8): .et-card is now fully white; bottom block
   inherits the white bg + light-theme tokens from .et-card. This
   rule just keeps it positioned (for the absolute credit child)
   and sets a small padding-top to reserve room for the absolute
   credit on AOoS/VotF where body prose would horizontally overlap
   the credit otherwise. BtM overrides padding-top below for the
   3-line push-down per user. */
.et-card .et-card__bottom {
  position: relative;
  padding-top: clamp(32px, 4vw, 44px);
  /* 18.05.26 (pm): padding-bottom bumped from 10px to clamp(22-32px)
     per user so the releasing line (now sitting under the format
     icons) has clear breathing space between itself and the bottom
     edge of the card. */
  padding-bottom: clamp(22px, 2.6vw, 32px);
}
/* BtM: 18.05.26 (revised) - gap between credit and caption stack
   tightened back to default per user direction. The earlier ~3 line
   push-down has been retired now that the credit sits top-left and
   no longer competes with the centred caption stack for horizontal
   space. */
.et-card--btm .et-card__bottom {
  padding-top: clamp(32px, 4vw, 44px);
}
.et-card .et-card__bottom .et-card__credit a {
  color: inherit;
  border-bottom-color: rgba(94, 119, 128, 0.35);
}
.et-card .et-card__bottom .et-card__credit a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .et-card__credit a { transition: none; }
}


/* =========================================================
   Release row (19.05.26 pm)
   Format icons + release date, anchored at the bottom of the
   .et-card__bottom block. Left padding matches body prose so
   the icons sit under the left boundary of the body text. The
   .et-card__bottom carries padding-bottom: 10px so the icon
   row sits exactly 10px above the card's outer edge.

   Gap above the row: the preceding .et-card__body already has
   padding-bottom of clamp(18px, 2.4vw, 32px) which keeps the
   last body line well clear of the icons (min(10px, ~2 line-
   heights) constraint always satisfied at desktop and narrow).
   ========================================================= */
.et-card__release {
  padding: 0 clamp(24px, 4.2vw, 46px);
  /* Belt-and-braces guarantee on the gap-from-body-text rule
     even at viewport sizes where body padding-bottom clamps
     to its minimum. */
  margin-top: clamp(10px, 1.2vw, 16px);
}

/* 18.05.26 (pm): release row restructured to icon + date pairs per
   user. Each .et-card__format is a vertical stack (icon on top,
   release date below). Pairs sit in a flex row with wrap, gap
   between pairs. */
.et-card__formats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 22px);
  align-items: flex-start;
}
.et-card__format {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.et-card__format-icon {
  display: block;
  width: clamp(18px, 2vw, 24px);
  height: clamp(18px, 2vw, 24px);
  color: var(--primary-text);
}
.et-card__format-date {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(10px, 0.25vw + 9px, 11px);
  line-height: 1.3;
  color: var(--quiet-text);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: center;
}

/* Legacy: kept in case any HTML still references it; current
   markup uses .et-card__format-date per icon instead. */
.et-card__release-date {
  margin: clamp(6px, 0.8vw, 10px) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(11px, 0.3vw + 10px, 13px);
  line-height: 1.4;
  color: var(--quiet-text);
  letter-spacing: 0.02em;
}

/* Intro card variant: no .et-card__bottom wrapper to carry the
   bottom clearance, so apply it directly to the release row.
   The intro is dark-glass throughout, so the format icons inherit
   the white --primary-text via the .et-card--intro token override.
   19.05.26 (pm): bumped from 10px to ~one body-line-height + 10
   per user (line-break added between icon row and card outer
   bottom). */
.et-card--intro .et-card__release {
  padding-bottom: clamp(28px, 3vw, 36px);
}


/* =========================================================
   Intro variant (v4-v3d, 08.05.26)
   Image-less, dark-glass throughout. The five-paragraph ET-voice
   introduction that previously sat inside the chamber pin
   (.our-stories__body) was unscrollable because the pin is
   position: fixed; on squat desktop viewports the last paragraphs
   clipped. The intro card moves the body into normal scroll flow
   under the .et-card pattern. No .et-card__media (no image), no
   .et-card__bottom (no cream paper treatment, dark glass continues
   throughout); the body sits directly inside the article on the
   card's own glass.
   Header carries title only (no bc) since this card IS Eternal
   Tales; nothing in the hierarchy sits above it except Our Stories
   itself. Body padding-top is bumped because there's no .et-card__meta
   row above it to provide breathing room from the header.
   ========================================================= */
.et-card--intro .et-card__body {
  padding-top: clamp(28px, 3vw, 44px);
}

/* 18.05.26 (revised x7): .et-card base is now WHITE (the 3 tale
   cards are white-paper throughout). The intro card needs to revert
   to dark glass per "the first slide should be the glass effect".
   Local CSS-var overrides flip the tokens back to dark-theme values
   so descendant text reads as white-on-glass. Grain pseudo hidden
   too (paper texture doesn't belong on glass). */
.et-card--intro {
  --bg:           #16181A;
  /* 21.05.26 r22: warm off-white in line with the dark-theme token
     change. Pure #FFFFFF reserved for accents/highlights. */
  --primary-text: #F2EBD9;
  --soft-text:    #A7B6BA;
  --quiet-text:   #76878C;
  /* 21.05.26 r2: glass restored per Caoimhín. The fully-transparent
     20.05.26 treatment is reverted to the original dark-glass +
     backdrop blur so the prose has a legible plate behind it on the
     chamber image. */
  background: rgba(14, 11, 12, 0.70);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
}
.et-card--intro::before {
  display: none;
}


/* The intro card is shorter than the image-bearing tale cards (no
   image to inflate height). Without this override, the global .section
   min-height: 100vh leaves a tall empty space below the intro card
   before #an-oath-on-stone begins, making the visual gap between
   #eternal-tales and #an-oath-on-stone larger than the gaps between
   the tale cards (AOoS / BtM / VotF, whose images push their card
   heights to roughly fill 100vh). min-height: auto sizes this section
   to its content plus the standard .section padding (nav-height + s-6
   top, s-9 bottom), so the gap reduces to the standard inter-section
   padding gap, matching what the user sees between the tale cards. */
.section--et-intro {
  min-height: auto;
}

/* 19.05.26: at narrow heights (mobile + small tablet portrait), the
   five-paragraph intro plus standard section padding overflows the
   800px viewport, forcing a scroll while the chamber logo is still
   in view. Tighten the typography + body padding + section padding
   so the whole card reads in a single viewport at 800px height.
   Desktop tall (>=801) keeps its breathing room. */
@media (max-height: 800px) {
  .section--et-intro {
    /* Reduce the standard .section vertical padding which would
       otherwise consume ~170px above + below the card. */
    padding-top: calc(var(--nav-height) + 8px);
    padding-bottom: var(--s-5);
  }
  .et-card--intro .et-card__body {
    padding-top: clamp(14px, 1.6vw, 22px);
    padding-bottom: clamp(14px, 1.6vw, 22px);
  }
  /* 22.05.26: intro prose font-size / line-height shrink REMOVED per user
     so the Eternal Tales (intro) body text matches the tale cards
     (AOoS / BtM / VotF) at every viewport. It previously dropped to
     clamp(12px, 0.3vw + 11px, 14px) / 1.5 here to fit the five-paragraph
     intro inside a single 800px-tall viewport; it now inherits the base
     .et-card__prose clamp(14px, 0.2vw + 13px, 15px) / 1.7. The body
     padding and para-margin compaction (kept below) offset some of the
     height gain; on short viewports the intro may now need a small scroll. */
  .et-card--intro .et-card__prose p {
    margin-bottom: var(--s-2);
  }
}