/* ============================================================
   The Tee Family House — css/v3-body.css
   Version 3 "الفخمة" — styles every section after the hero.
   Reads tokens from css/v3-base.css only (--bg/--ink/--acc/--card*/
   --flip-*/--copper/...) so both themes stay correct with zero
   hardcoded colors here. Loaded after v3-base.css, before v3-hero.css
   is irrelevant to this file's cascade (different selectors).
   ============================================================ */

/* ---------- ALIAS ANCHORS ----------
   Old story pages + generator CTAs still link to index.html#donate,
   #family, #petition, #follow, #moment, #stories, #hero — the v1
   section ids from before the brain's swap to v3 as the main site.
   These spans give those hrefs a real #id to land on without renaming
   any of v3's own (v3-prefixed) section ids. `top: -90px` offsets the
   browser's native #hash scroll target upward by roughly the fixed
   floating nav's height (18px top + ~48px pill + clearance, per
   css/v3-hero.css's .v3nav), so the landed-on content clears the nav
   instead of sitting underneath it. `height: 0` plus `position:
   relative` (not `static`) means the offset never reserves space or
   shifts any sibling — the span has no footprint of its own. */
.v3 .anchor-alias { display: block; position: relative; top: -90px; height: 0; visibility: hidden; pointer-events: none; }

/* ---------- A · ABOUT — «بيان منتصف الليل» / The Midnight Manifesto ----------
   Full rebuild — the earlier polaroid/photo-deal collage concept is
   gone entirely (removed on explicit user order, not layered under
   this). A literal-dark cinematic band, independent of site theme —
   same reasoning as the .cine bands' light-theme fix: v3-base.css's
   light theme would otherwise flip this section's background to
   cream under text that must stay bone-colored, an invisible-text bug.
   --acc/--acc2 are re-pinned to their dark-theme values for the same
   reason the cine bands needed it (the eyebrow + numeral labels read
   var(--acc)/var(--mut), which DO change between themes). */
.v3-manifesto {
  position: relative; overflow: hidden;
  background: #0d0a0c; color: #f1e9dc;
  --acc: #ee7c2b; --acc-rgb: 238, 124, 43; --acc2: #f5a15c; --mut: #b7ac9d;
  padding-block: clamp(90px, 13vh, 150px);
  /* Exit seam: tucks under #v3-cards instead of a hard cut — rounded
     bottom + negative margin pulls the next section's top edge to
     overlap this band's last few px, so the transition reads as one
     composed move rather than two stacked boxes. */
  margin-block-end: -32px; border-radius: 0 0 32px 32px; z-index: 1;
}

.v3-manifesto__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.v3-manifesto__bg {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center 30%;
  /* Graded dark + slight cool per the brief — filter, not an opacity
     overlay alone, so the underlying photo genuinely reads as night
     rather than a bright photo with a dark sheet over it. */
  filter: brightness(0.45) saturate(0.9) hue-rotate(-6deg);
  transform-origin: center; /* initManifestoScrub scales this 1 → 1.05 on scroll (Ken Burns) */
}
.v3-manifesto__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(13, 10, 12, 0.35) 0%, rgba(13, 10, 12, 0.55) 45%, #0d0a0c 92%);
}

.v3-manifesto__content { position: relative; z-index: 1; max-inline-size: 62rem; }

/* Word-reveal target: js/v3-body.js's initManifesto rebuilds this
   element's content into one <span class="v3-manifesto__word"> per
   word (Arabic-safe — split on whitespace, never per-character) and
   scrubs each from 0.14 → 1 opacity as the visitor scrolls. Rest state
   (no JS, or a still-loading page) is the plain fallback sentence
   already sitting in the markup, fully legible at opacity 1. */
.v3-manifesto__text {
  font-family: var(--ff-s); font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 3.6rem); line-height: 1.5;
  margin-block: 20px 28px;
}
.v3-manifesto__word { opacity: 1; }

.v3-manifesto__sig {
  font-family: 'Caveat', cursive; font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--acc2); margin-block-end: clamp(48px, 7vh, 80px);
}

/* Radical stats: typographic art, not a running counter. Each digit
   string is filled by its own cat photo via background-clip:text; the
   @supports fallback covers the (now vanishingly rare, but real)
   browsers with neither the prefixed nor unprefixed property, where a
   transparent, backgroundless number would otherwise be invisible. */
.v3-manifesto__numerals {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-block-start: 0;
}
.v3-numeral {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-inline: clamp(10px, 3vw, 30px);
  border-inline-start: 1px solid rgba(241, 233, 220, 0.15);
}
.v3-numeral:first-child { border-inline-start: none; }
.v3-numeral span {
  margin-block-start: 10px; color: rgba(241, 233, 220, 0.62);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}

.v3-numeral__num {
  font-family: var(--ff-d); font-weight: 800;
  font-size: clamp(4.5rem, 11vw, 9rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  background-size: cover; background-position: center 40%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .v3-numeral__num { background-image: none !important; color: #f1e9dc; }
}

@media (max-width: 700px) {
  .v3-manifesto__numerals { grid-template-columns: 1fr; row-gap: 28px; }
  .v3-numeral { border-inline-start: none; border-block-start: 1px solid rgba(241, 233, 220, 0.15); padding-block-start: 24px; }
  .v3-numeral:first-child { border-block-start: none; padding-block-start: 0; }
}

/* ---------- B · CARDS ---------- */
.v3-cards__title { font-size: clamp(2rem, 4vw, 3.2rem); margin-block: 16px 40px; max-width: 18ch; }
.v3-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.v3-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(26px, 3vw, 34px);
  min-block-size: 220px;
  display: flex; flex-direction: column; gap: 12px; justify-content: flex-end;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.v3-card:hover { transform: translateY(-6px); border-color: rgba(var(--acc-rgb), 0.5); box-shadow: 0 24px 50px -24px rgba(var(--acc-rgb), 0.4); }
.v3-card__num { font-family: var(--ff-d); font-weight: 700; color: var(--acc); font-size: 0.85rem; letter-spacing: 0.08em; }
.v3-card h3 { font-family: var(--ff-d); font-weight: 600; font-size: 1.15rem; }
.v3-card p { color: var(--mut); font-size: 0.92rem; line-height: 1.6; }

/* ---------- STORIES corridor ----------
   Base state below is the mobile/reduced-motion truth: a plain vertical
   stack with no positioning tricks. js/v3-body.js adds .is-pinned to
   #v3Corridor (and flips .v3-corridor__track to a flex row) only on
   desktop with motion allowed, driven by GSAP ScrollTrigger's own pin —
   never position:sticky, which v3-base.css's body overflow rules break. */
.v3-stories-section { padding-block-end: clamp(60px, 8vh, 100px); }
.v3-stories__title { font-size: clamp(2rem, 4vw, 3.2rem); margin-block: 16px 8px; }

/* Light-theme audit fix: a literal dark background (not var(--bg),
   which flips to cream in light theme) so the corridor stays
   cinematic-dark regardless of site theme — matching the reference
   site's own video sections, which never invert. The panels already
   carry their own literal dark backgrounds/text; this covers the
   inter-panel gaps in stacked mode and any edge outside them. */
.v3-corridor { position: relative; background: #080706; }
.v3-corridor__track { display: flex; flex-direction: column; gap: 16px; margin-block-start: 28px; }

.v3-panel {
  position: relative; inline-size: 100%;
  border-radius: 16px; overflow: hidden; background: #100e0c;
}

/* Ambient backdrop layer: a blurred, darkened duplicate of the same
   media filling the panel as pure color/atmosphere — cropping here is
   irrelevant (nothing recognizable survives a 32px blur), which is
   exactly why it, and not the real photo, is the one full-bleed layer. */
.v3-panel__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.v3-panel__backdrop {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center 22%;
  filter: blur(32px) brightness(0.45);
  transform: scale(1.12); /* covers the blur's own edge softening past the panel bounds */
}
.v3-panel__scrim {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top, rgba(8, 7, 6, 0.7) 0%, rgba(8, 7, 6, 0.25) 55%, transparent 85%);
}

/* Foreground content: the museum-canvas media (contained, never
   cropped) beside the text column. Mobile-first stack (row on desktop
   only — see the 900px breakpoint below), matching the brief's "build
   the stacked layout, enhance to the row" precedent from the corridor
   itself. */
.v3-panel__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(24px, 4vw, 48px);
  block-size: 100%; padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 48px);
  text-align: center;
}

/* Shared "museum frame" chrome — a copper double-frame (an outer
   bronze/copper mat + an inset copper hairline) with stacked shadows
   for physical lift, reused by both the 5 rescue panels' contained
   media (sized via --media below) and the memorial panel's small
   framed card (sized by its own existing .v3-panel--memorial rule),
   so the whole corridor reads as one consistent frame language. */
.v3-panel__frame {
  position: relative; overflow: hidden;
  padding: 10px; border-radius: 6px;
  background: linear-gradient(155deg, #d9a441 0%, #8a5c1e 100%);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 26px 60px -18px rgba(0, 0, 0, 0.65), 0 12px 28px -12px rgba(0, 0, 0, 0.55);
}
.v3-panel__frame::before {
  content: ''; position: absolute; inset: 10px; z-index: 1;
  border-radius: 2px; pointer-events: none;
  outline: 1px solid rgba(255, 255, 255, 0.22); outline-offset: -4px;
}

/* Sizing for the 5 rescue panels' contained media specifically —
   object-fit:contain is the actual crop-safety net (height+auto-width
   already preserves aspect in the common case; this guards the rare
   case where max-inline-size clamps width below what height implies).
   Capped at ~1.15x its natural size is implicit: these are already
   near-native-resolution files (1125-1500px stills, 720p video), so a
   72vh/640px display height never asks for meaningful upscaling. */
.v3-panel__frame--media { display: inline-block; max-inline-size: 88vw; }
.v3-panel__media {
  display: block;
  block-size: min(72vh, 640px); inline-size: auto;
  object-fit: contain; background: #000;
}
/* Alternating resting tilt + alternating side, so the corridor
   zig-zags instead of every panel reading identically. */
.v3-panel--media-start .v3-panel__frame--media { transform: rotate(-1.5deg); }
.v3-panel--media-end .v3-panel__frame--media { transform: rotate(1.5deg); }

.v3-panel__body { position: relative; z-index: 1; color: #f6f2eb; max-inline-size: 46ch; }
.v3-panel__stamp {
  display: inline-flex; padding: 6px 16px; border-radius: 999px;
  background: rgba(246, 242, 235, 0.12); border: 1px solid rgba(246, 242, 235, 0.24);
  font-size: 0.76rem; letter-spacing: 0.06em; color: #f5a15c;
}
.v3-panel__name { font-family: var(--ff-s); font-style: italic; font-weight: 700; font-size: clamp(2.2rem, 6vw, 4.2rem); margin-block: 10px 14px; }
.v3-panel__line { max-width: 48ch; margin-inline: auto; font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.6; margin-block-end: 22px; color: #e8e1d4; }

@media (min-width: 900px) {
  /* Desktop pinned corridor: media beside text, alternating which
     side the frame sits on per panel so consecutive panels zig-zag
     as the visitor scrubs past them — the "walk past canvases" feel
     the corridor is named for. */
  .v3-panel__content { flex-direction: row; text-align: start; gap: clamp(40px, 6vw, 90px); }
  .v3-panel--media-end .v3-panel__content { flex-direction: row-reverse; }
  .v3-panel__frame--media { max-inline-size: 46vw; }
}

/* The memorial panel closes the corridor with a deliberately different
   anatomy: no photo bleed, a small framed card, and a centered layout
   instead of the media+text pair the five rescue panels share. Its
   frame reuses the shared .v3-panel__frame chrome above (same copper
   double-frame + shadows) at its own small, cover-cropped size — a
   deliberate exception, since this card is a keepsake photo, not a
   rescue-story canvas that must stay uncropped. */
.v3-panel--memorial {
  background: #060504;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding-block: 40px;
}
.v3-panel__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(217, 164, 65, 0.28), transparent 60%);
}
.v3-panel--memorial .v3-panel__frame {
  z-index: 1; inline-size: min(46%, 220px); aspect-ratio: 3 / 4;
}
.v3-panel--memorial .v3-panel__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.v3-panel__body--memorial { position: relative; inset: auto; z-index: 1; padding-block-start: 24px; display: flex; flex-direction: column; align-items: center; }
.v3-panel__stamp--memorial { background: rgba(217, 164, 65, 0.16); border-color: rgba(217, 164, 65, 0.4); color: var(--gold); }

.v3-corridor__meta {
  display: none; align-items: center; gap: 18px;
  margin-block-start: 18px;
}
.v3-corridor__progress { flex: 1 1 auto; block-size: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.v3-corridor__progress i { display: block; block-size: 100%; inline-size: 0%; background: var(--copper); }
.v3-corridor__count { color: var(--mut); font-size: 0.86rem; white-space: nowrap; }
.v3-corridor__count b { color: var(--acc); }

/* Desktop pinned corridor — applied only via JS, and only when motion
   is allowed, so this ruleset never fights the stacked baseline above. */
.v3-corridor.is-pinned { block-size: 100dvh; overflow: hidden; }
.v3-corridor.is-pinned .v3-corridor__track { flex-direction: row; flex-wrap: nowrap; block-size: 100%; margin-block-start: 0; gap: 0; will-change: transform; }
.v3-corridor.is-pinned .v3-panel { flex: 0 0 100%; min-block-size: unset; block-size: 100%; border-radius: 0; }
.v3-corridor.is-pinned .v3-panel--memorial { flex-basis: 130%; }

.v3-stories__more { text-align: center; margin-block-start: 44px; }

@media (max-width: 900px) {
  .v3-about__grid { grid-template-columns: 1fr; }
  .v3-about__side { order: -1; }
  .v3-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .v3-cards { grid-template-columns: 1fr; }
}

/* ---------- C/E · CINE bands ----------
   Full editorial composition (was: video + text, leaving a big void
   below a short column beside a tall portrait video). A huge outlined
   ghost word sits behind everything; the grid is an asymmetric 3-part
   layout (video / text+quote+stat / satellite photo); section padding
   is shrunk via .v3-cine-section so the band ends soon after its
   content instead of floating in oversized default .section padding. */
/* Light-theme audit fix: v3-base.css's `.v3 .cine` rule already forces
   light ink/mut text inside these bands regardless of theme, but never
   set a literal background — so in light theme the section fell back
   to var(--bg) (cream) under light text, a near-invisible combination.
   `background` here is a literal hex, independent of --bg, matching
   the reference site's video sections (always dark, in both themes).
   --acc/--acc2 are re-pinned to their dark-theme values too, since
   v3-base.css's light-theme override only touches --acc/--acc2 for
   normal (light-background) content — the pull-quote border and stat
   chip below both read those vars and would otherwise render in the
   light theme's muted "printed ink" tones against this dark band. */
.v3-cine-section {
  padding-block: clamp(48px, 7vh, 90px); position: relative; overflow: hidden;
  background: #080706;
  --acc: #ee7c2b; --acc-rgb: 238, 124, 43; --acc2: #f5a15c;
}

/* .oln already gives the transparent-fill + stroke look; this just
   overrides size/opacity/position for a background watermark role
   rather than .oln's usual inline foreground use. */
.v3-cine__ghost {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  font-size: 20vw; opacity: 0.06; white-space: nowrap;
  pointer-events: none; z-index: 0; margin: 0;
}

.v3-cine__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.85fr 1.05fr 0.7fr; align-items: center;
  gap: clamp(20px, 4vw, 40px);
}
.v3-cine__grid--rev { grid-template-columns: 0.7fr 1.05fr 0.85fr; }
.v3-cine__grid--rev .v3-cine__frame { order: 3; }
.v3-cine__grid--rev .v3-cine__satellite { order: 1; }

.v3-cine__title { font-size: clamp(1.7rem, 3.4vw, 2.7rem); margin-block-end: 18px; }
.v3-cine__frame {
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  border-radius: 16px;
  overflow: hidden;
  justify-self: center;
  max-inline-size: 300px;
  background: #000;
}
.v3-cine__video { inline-size: 100%; block-size: auto; max-block-size: 64vh; object-fit: contain; display: block; }

.v3-cine__text { display: flex; flex-direction: column; gap: 16px; }
.v3-cine__quote {
  margin: 0; padding-inline-start: 18px;
  border-inline-start: 3px solid var(--acc);
  font-family: var(--ff-s); font-style: italic; font-size: 1.5rem; line-height: 1.5;
  color: var(--ink);
}
.v3-cine__stat {
  display: inline-flex; align-self: flex-start;
  padding: 8px 18px; border-radius: 999px;
  background: rgba(var(--acc-rgb), 0.14); border: 1px solid rgba(var(--acc-rgb), 0.4);
  color: var(--acc2); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.02em;
}

/* Satellite media tile: a small "duotone-style" supporting photo card —
   a light desaturation + a copper-tinted overlay blended over the
   image, rather than the full-bleed treatment the main video gets. */
.v3-cine__satellite {
  position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); max-inline-size: 220px; justify-self: center;
}
.v3-cine__satellite img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: grayscale(0.4) contrast(1.08) saturate(0.85); display: block; }
.v3-cine__satellite::after {
  content: ''; position: absolute; inset: 0; background: var(--copper);
  mix-blend-mode: multiply; opacity: 0.24; pointer-events: none;
}
.v3-cine__satellite figcaption {
  position: absolute; inset-inline-start: 10px; inset-block-end: 10px; z-index: 1;
  color: #f6f2eb; font-family: var(--ff-d); font-weight: 600; font-size: 0.78rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

@media (max-width: 820px) {
  /* Mobile: video → quote → photo, tight stack — DOM order already
     matches (frame, text, satellite), so this only needs to cancel the
     desktop column order/count, never reorder anything itself. */
  .v3-cine__grid, .v3-cine__grid--rev { grid-template-columns: 1fr; gap: 22px; }
  .v3-cine__grid--rev .v3-cine__frame, .v3-cine__grid--rev .v3-cine__satellite { order: 0; }
  .v3-cine__ghost { font-size: 34vw; }
}

/* ---------- D · WORK gallery ---------- */
.v3-work__title { font-size: clamp(2rem, 4vw, 3.2rem); margin-block: 16px 36px; max-width: 20ch; }
.v3-gallery {
  columns: 4 220px; column-gap: 14px;
}
.v3-gitem {
  break-inside: avoid; margin-block-end: 14px;
  position: relative; border-radius: 10px; overflow: hidden;
  cursor: pointer;
}
.v3-gitem img { inline-size: 100%; block-size: auto; display: block; transition: transform 0.5s var(--ease); }
.v3-gitem:hover img { transform: scale(1.04); }
.v3-gitem figcaption {
  position: absolute; inset-inline-start: 10px; inset-block-end: 10px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--copper); color: #14110e;
  font-family: var(--ff-d); font-weight: 700; font-size: 0.76rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.v3-gitem:hover figcaption, .v3-gitem:focus-visible figcaption { opacity: 1; transform: translateY(0); }
.v3-gallery__more { text-align: center; margin-block-start: 40px; }

@media (max-width: 700px) { .v3-gallery { columns: 2 160px; } }

/* ---------- F · INSTAGRAM ghost text ---------- */
.v3-insta-section { position: relative; overflow: hidden; text-align: center; }
.v3-insta__ghost {
  font-family: var(--ff-d); font-weight: 800;
  font-size: clamp(3rem, 14vw, 11rem);
  line-height: 1; letter-spacing: -0.02em;
  white-space: nowrap;
  text-align: center;
  opacity: 0.5;
  pointer-events: none;
  margin-block-end: -0.15em;
  direction: ltr;
}
.v3-insta__inner { position: relative; z-index: 1; }
.v3-insta__tiles {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
  margin-block: 28px 32px;
}
.v3-insta__tiles img { inline-size: 84px; block-size: 84px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }

/* ---------- G · PROCESS steps ---------- */
.v3-process__title { font-size: clamp(2rem, 4vw, 3.2rem); margin-block: 16px 48px; max-width: 20ch; }
.v3-process { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-block-start: 8px; }
.v3-process__line {
  position: absolute; inset-inline: 0; top: 22px;
  block-size: 1px; background: var(--line);
}
.v3-process__line i {
  display: block; block-size: 100%; inline-size: 0%;
  background: var(--copper);
}
.v3-step { position: relative; padding-inline-start: 4px; }
.v3-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px; border-radius: 50%;
  background: var(--copper); color: #14110e;
  font-family: var(--ff-d); font-weight: 700; font-size: 0.95rem;
  margin-block-end: 16px;
}
.v3-step h3 { font-family: var(--ff-d); font-weight: 600; font-size: 1.08rem; margin-block-end: 8px; }
.v3-step p { color: var(--mut); font-size: 0.92rem; }
@media (max-width: 780px) {
  .v3-process { grid-template-columns: 1fr; gap: 28px; }
  .v3-process__line { display: none; }
}

/* ---------- G2 · GUIDE — sitemap grid ----------
   Deliberately theme-aware rather than a literal-dark stage like
   .v3-manifesto/.v3-foot: the card background/text use --card1/--ink/
   --mut, which v3-base.css already redefines under
   html[data-theme='light'], so this section can sit between v3-process
   (also theme-aware) and v3-donate (a literal-flip section) without a
   second hardcoded palette to keep in sync. */
.v3-guide__title { font-size: clamp(2rem, 4vw, 3.2rem); margin-block: 16px 12px; max-width: 20ch; }
.v3-guide__lede { color: var(--mut); max-width: 46ch; margin-block-end: 40px; }

.v3-guide__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.v3-guide__card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--card1);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(26px, 3vw, 34px);
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.v3-guide__card:hover, .v3-guide__card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(var(--acc-rgb), 0.5);
  box-shadow: 0 24px 50px -24px rgba(var(--acc-rgb), 0.4);
}
.v3-guide__card:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* Ghost numeral: ambient corner mark, not meant to compete with the
   card's title/body — kept out of the reading flow with aria-hidden
   in the markup and very low opacity here. */
.v3-guide__num {
  position: absolute; top: 14px; inset-inline-end: 18px;
  font-family: var(--ff-d); font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1;
  color: var(--ink); opacity: 0.07;
  pointer-events: none;
}

.v3-guide__card h3 { position: relative; font-family: var(--ff-d); font-weight: 600; font-size: 1.15rem; margin-block-end: 10px; }
.v3-guide__card p { position: relative; color: var(--mut); font-size: 0.95rem; line-height: 1.8; margin-block-end: 18px; }

/* Direction-aware arrow glyph: content flips with dir instead of a
   transform, so it stays a crisp glyph (not mirrored) in both RTL and
   LTR while still pointing the reading-forward way. */
.v3-guide__arrow { position: relative; display: inline-block; color: var(--acc); font-size: 1.1rem; }
.v3-guide__arrow::before { content: '←'; }
html[dir='ltr'] .v3-guide__arrow::before { content: '→'; }

@media (max-width: 900px) {
  .v3-guide__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .v3-guide__grid { grid-template-columns: 1fr; }
}
html.reduce-motion .v3-guide__card { transition: none; }
html.reduce-motion .v3-guide__card:hover, html.reduce-motion .v3-guide__card:focus-visible { transform: none; }

/* ---------- H · DONATE flip panel ----------
   Inverts on purpose: --flip-bg/--flip-ink are cream-on-dark-theme and
   dark-on-light-theme, so this section always reads as the visual
   "flip" divider regardless of which theme the visitor is in. */
.v3-flip {
  background: var(--flip-bg); color: var(--flip-ink);
  border-radius: clamp(20px, 3vw, 40px);
  margin-inline: clamp(10px, 2vw, 24px);
}
.v3-flip .container { text-align: center; }
.v3-flip__title { font-size: clamp(2.1rem, 4.6vw, 3.8rem); max-width: 18ch; margin-inline: auto; }
.v3-flip__title em { color: var(--flip-acc); }
.v3-flip__lede { color: var(--flip-mut); margin-inline: auto; margin-block: 18px 40px; }

.v3-flip__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; text-align: start; }
.v3-flip__card {
  background: var(--flip-card); border: 1px solid var(--flip-line);
  border-radius: 14px; padding: clamp(22px, 3vw, 30px);
}
.v3-flip__card h3 { font-family: var(--ff-d); font-weight: 600; font-size: 1.1rem; margin-block-end: 6px; }
.v3-flip__sub { color: var(--flip-mut); font-size: 0.88rem; margin-block-end: 14px; }
.v3-flip__number { font-family: var(--ff-d); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.03em; color: var(--flip-acc); margin-block-end: 8px; }
.v3-flip__note { color: var(--flip-mut); font-size: 0.82rem; margin-block-end: 16px; }
.v3-copy {
  position: relative; display: inline-flex; align-items: center;
  padding: 11px 22px; border-radius: 999px;
  background: var(--flip-ink); color: var(--flip-bg);
  font-weight: 600; font-size: 0.88rem;
  transition: transform 0.2s var(--ease);
}
.v3-copy:active { transform: scale(0.96); }
.v3-copy .v3-copy__done { display: none; }
.v3-copy.is-copied span:not(.v3-copy__done) { display: none; }
.v3-copy.is-copied .v3-copy__done { display: inline; }
.v3-copy__fallback { position: absolute; opacity: 0; pointer-events: none; inline-size: 1px; block-size: 1px; }
.v3-flip__wa { display: block; margin-block-start: 14px; font-size: 0.84rem; color: var(--flip-acc); text-decoration: underline; }

.v3-flip__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; color: var(--flip-mut); font-size: 0.86rem; margin-block-start: 26px; }

.v3-flip__paypal { margin-block-start: 46px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.v3-flip__paypal p { color: var(--flip-mut); max-width: 46ch; }

.v3-flip__petition { margin-block-start: 44px; padding-block-start: 36px; border-top: 1px solid var(--flip-line); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.v3-flip__petition-count { display: flex; align-items: baseline; gap: 8px; font-size: 1.1rem; }
.v3-flip__petition-count b { color: var(--flip-acc); font-size: 1.5rem; }

@media (max-width: 700px) { .v3-flip__cards { grid-template-columns: 1fr; } }

/* ---------- FOOTER ---------- */
.v3-foot { position: relative; background: var(--dark); color: #f6f2eb; overflow: hidden; padding-block-start: 40px; }
.v3-foot__marquee { overflow: hidden; border-block-end: 1px solid rgba(246, 242, 235, 0.1); padding-block: 22px; }
.v3-foot__track {
  display: flex; white-space: nowrap; width: max-content;
  font-family: var(--ff-d); font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  color: transparent; -webkit-text-stroke: 1px rgba(246, 242, 235, 0.5);
  animation: v3-marquee 50s linear infinite;
}
.v3-foot__track span { padding-inline-end: 0.4em; }
@keyframes v3-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html.reduce-motion .v3-foot__track { animation: none; }

.v3-foot__in { padding-block: 40px 34px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.v3-foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.v3-foot__nav a { color: #cfc6b8; font-size: 0.9rem; transition: color 0.25s var(--ease); }
.v3-foot__nav a:hover { color: var(--acc2); }
.v3-foot__credit { color: #8f8577; font-size: 0.82rem; max-width: 60ch; }
.v3-foot__love { color: #cfc6b8; font-size: 0.86rem; }

/* ---------- LIGHTBOX (works gallery) ---------- */
.v3-lb {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.v3-lb.is-open { opacity: 1; pointer-events: auto; }
.v3-lb__bg { position: absolute; inset: 0; background: rgba(8, 7, 6, 0.92); backdrop-filter: blur(6px); }
.v3-lb__stage { position: relative; max-inline-size: min(90vw, 640px); max-block-size: 86vh; text-align: center; z-index: 1; }
.v3-lb__img { max-inline-size: 100%; max-block-size: 78vh; border-radius: 12px; margin-inline: auto; object-fit: contain; }
.v3-lb__cap { color: #f6f2eb; margin-block-start: 16px; font-family: var(--ff-d); font-weight: 600; letter-spacing: 0.03em; }
.v3-lb__count { position: absolute; top: 24px; inset-inline-start: 50%; transform: translateX(-50%); color: #cfc6b8; z-index: 1; font-size: 0.86rem; }
.v3-lb__x { position: absolute; top: 20px; inset-inline-end: 24px; color: #f6f2eb; font-size: 1.3rem; z-index: 1; padding: 8px; }
.v3-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #f6f2eb; font-size: 2.2rem; padding: 10px 16px; z-index: 1;
  transition: color 0.25s var(--ease);
}
.v3-lb__nav:hover { color: var(--acc); }
.v3-lb__nav--p { inset-inline-start: clamp(10px, 3vw, 40px); }
.v3-lb__nav--n { inset-inline-end: clamp(10px, 3vw, 40px); }