/* ============================================================
   character-pages.css — page-scoped styles for YALDY character pages.
   Extracted ONCE from the inline <style> of the V2 character template
   (joab/goliath/...). Generalized scope: .character-page--<name> → .cp
   (the .cp class lives on <html>, set by bake.mjs data.htmlClass).
   Loaded ONLY by /he|en/{joab,goliath,david-king,david-shepherd,
   tamar,philistines}.html (declared in each data/<slug>.json css[]).
   4-layer rule: design layer. Do not inline back into HTML.

   TWO VARIANTS, ONE TEMPLATE — switch a single class on <html>:
     cp--hero    → heroes  (Joab, David, Tamar...)  black + gold,
                   1-2 sections lean deep-blue. Art carries color.
     cp--villain → enemies (Goliath, Philistines...) black + danger-red,
                   same sections lean deep-red.
   Villain tokens below are the RED values the live villain pages
   actually render (the source hero pages carried a stale BRONZE
   .cp--villain block — dead code; the real villain pages went red).
   ============================================================ */

/* ---------- TOKENS ---------- */
.cp {
  --bg:        #070708;   /* pure near-black base                 */
  --bg-tint:   #080a10;   /* hero-variant section lean (deep blue) */
  --panel:     #131418;   /* the ONE lifted tier — cards/panels    */
  --panel-2:   #17181d;   /* card hover                            */
  --acc:       #d4af37;   /* chrome accent — gold                  */
  --acc-bright:#e8c94a;   /* links / values (Star-Wars yellow)     */
  --acc-soft:  rgba(212,175,55,0.30);
  --brand:     #f4d03f;   /* YALDY signature yellow — FIXED, never
                             varies by variant (brand identity)    */
  --tint-glow: rgba(58,110,165,0.05); /* whisper, art does the rest */
  --ink:       #f4f3ef;
  --soft:      rgba(244,243,239,0.60);
  --mute:      rgba(244,243,239,0.48);
  --line:      rgba(255,255,255,0.075);
  --line-2:    rgba(255,255,255,0.14);
  --notch:     20px;      /* angular clip signature                */
  --notch-sm:  10px;
  /* shared notch clip — defined once, referenced via var() on every notched element
     (cards/frame/.notch). var(--notch) resolves at the use site. */
  --notch-clip: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  --maxw:      1080px;
  --pad:       7%;
  background: var(--bg);
  color: var(--ink);
}
/* VILLAIN VARIANT — only these tokens change. Add cp--villain on <html>.
   RED values = what the live goliath/philistines pages render. */
.cp--villain {
  --bg-tint:   #100808;   /* black leaning red                     */
  --acc:       #c0392b;   /* cinematic danger red — eyebrows/kickers/rule */
  --acc-bright:#e0564a;   /* links / values — legible lighter red  */
  --acc-soft:  rgba(192,57,43,0.32);
  --tint-glow: rgba(176,32,32,0.10);   /* stronger red ambience    */
}

.cp * , .cp *::before , .cp *::after { box-sizing: border-box; }
.cp body { margin: 0; background: var(--bg); color: var(--ink); }
.cp img { display: block; max-width: 100%; }

/* clip signature — top square, both bottom corners cut */
.cp .notch {
  clip-path: var(--notch-clip);
}
@media (prefers-reduced-motion: reduce) { .cp .notch { clip-path: none; } }

.cp .cp-divider { display: none; }      /* whitespace separates, not lines */

/* shared section-rhythm: tinted sections = the hero "blue lean" */
.cp .cp-dossier,
.cp .cp-continuation {
  background:
    radial-gradient(ellipse at 50% 0%, var(--tint-glow) 0%, transparent 60%),
    var(--bg-tint);
}

/* ---------- 1 · HERO ---------- */
.cp .cp-hero {
  position: relative; width: 100%; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; isolation: isolate; background: var(--bg);
}
.cp .cp-hero__image { position: absolute; inset: 0; z-index: 0; }
.cp .cp-hero__image img {
  width: 100%; height: 100%; object-fit: cover;
  /* full-bleed cover crops portraits vertically; bias the focal point UP so the
     character's head/face is never cut off on wide desktop (was 55% center →
     head cropped). Per-character override (token): .cp-page-<slug> { --cp-focal: 55% 25% } */
  object-position: var(--cp-focal, 55% 18%);
}
.cp .cp-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(7,7,8,0.55) 0%, rgba(7,7,8,0.15) 32%,
    rgba(7,7,8,0.55) 66%, var(--bg) 100%);
}
.cp .cp-hero__letterbox {
  position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  background: var(--bg);
}
.cp .cp-hero__letterbox--top { top: 0; height: 46px; }
.cp .cp-hero__letterbox--top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent 8%, var(--acc) 50%, transparent 92%);
  opacity: 0.45;
}
.cp .cp-hero__letterbox--bottom { bottom: 0; height: 14px; }

.cp .cp-hero__content {
  position: relative; z-index: 3; max-width: 640px;
  padding: 0 var(--pad) 76px;
}
.cp .cp-hero__eyebrow {
  font-family: 'Oswald', sans-serif; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 5px; text-transform: uppercase; color: var(--acc);
  margin: 0 0 16px;
}
.cp .cp-hero__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.6rem, 14vw, 7.4rem);
  line-height: 0.84; letter-spacing: 2px; text-transform: uppercase;
  margin: 0 0 14px; color: var(--ink);
}
.cp .cp-hero__name-line { display: block; }
.cp .cp-hero__name-line--accent { color: var(--brand); }
.cp .cp-hero__epithet {
  font-family: 'Oswald', sans-serif; font-size: clamp(0.92rem, 3vw, 1.3rem);
  font-weight: 300; letter-spacing: 4px; text-transform: uppercase;
  color: var(--acc-bright); margin: 0 0 22px;
}
.cp .cp-hero__dek {
  font-family: 'Oswald', sans-serif; font-size: clamp(0.98rem, 2.4vw, 1.16rem);
  font-weight: 300; line-height: 1.7; color: var(--soft);
  max-width: 540px; margin: 0 0 30px;
}
.cp .cp-hero__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 13px 38px;
  border: 1px solid var(--acc); color: var(--acc); background: transparent;
  font-family: 'Oswald', sans-serif; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch-sm)),
    calc(100% - var(--notch-sm)) 100%, var(--notch-sm) 100%, 0 calc(100% - var(--notch-sm)));
  transition: background-color .25s ease, color .25s ease;
}
.cp .cp-hero__cta:hover,
.cp .cp-hero__cta:focus-visible {
  background: var(--acc); color: var(--bg);
}
.cp .cp-hero__verse {
  position: relative; z-index: 3; max-width: 100%;
  margin: 22px var(--pad) 0; padding: 0 0 4px;
}
.cp .cp-hero__verse-text {
  font-family: 'Frank Ruhl Libre', serif; font-size: 1.05rem;
  line-height: 1.65; color: var(--soft); margin: 0;
  border-inline-start: 2px solid var(--acc); padding-inline-start: 16px;
}
[dir="ltr"] .cp .cp-hero__verse-text { font-family: 'Open Sans', sans-serif; font-style: italic; }
.cp .cp-hero__verse-cite {
  font-family: 'Oswald', sans-serif; font-size: 0.66rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--mute);
  display: block; margin-top: 10px; padding-inline-start: 16px;
}

/* ---------- shared section frame ---------- */
.cp .cp-dossier,
.cp .cp-connections,
.cp .cp-facts,
.cp .cp-continuation { padding: 68px var(--pad) 74px; }
.cp .cp-dossier__inner { max-width: 720px; margin: 0 auto; }

.cp .cp-section-header { max-width: var(--maxw); margin: 0 auto 54px; }
.cp .cp-section-header__eyebrow {
  font-family: 'Oswald', sans-serif; font-size: 0.64rem; font-weight: 600;
  letter-spacing: 5px; text-transform: uppercase; color: var(--acc); margin: 0 0 12px;
}
.cp .cp-section-header__title {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
  line-height: 1; margin: 0 0 16px;
}
.cp .cp-section-header__title--small { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.cp .cp-section-header__rule {
  width: 54px; height: 2px; background: var(--acc); opacity: 0.85;
}

/* ---------- 2 · DOSSIER ---------- */
.cp .cp-dossier__label {
  font-family: 'Oswald', sans-serif; font-size: 0.64rem; font-weight: 600;
  letter-spacing: 5px; text-transform: uppercase; color: var(--acc); margin: 0 0 30px;
}
.cp .cp-dossier__para {
  font-family: 'Open Sans', sans-serif; font-size: 1.05rem; line-height: 2;
  font-weight: 300; color: var(--soft); margin: 0 0 24px;
}
[lang="he"] .cp .cp-dossier__para,
[dir="rtl"] .cp .cp-dossier__para { font-family: 'Heebo', sans-serif; }
.cp .cp-dossier__subhead {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 3px;
  text-transform: uppercase; color: var(--ink); text-align: center;
  margin: 44px 0 26px;
}
.cp .cp-dossier__para--punch {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: 2px; color: var(--acc); text-align: center;
  line-height: 1.3; margin-top: 32px;
}

/* ---------- 3 · CONNECTIONS ---------- */
.cp .cp-connections__grid {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  max-width: var(--maxw); margin: 0 auto; list-style: none; padding: 0;
}
.cp .cp-conn-card {
  position: relative; background: var(--panel);
  border: 1px solid var(--line); padding: 28px 26px 32px;
  clip-path: var(--notch-clip);
  transition: background-color .25s ease;
}
.cp .cp-conn-card:hover { background: var(--panel-2); }
.cp .cp-conn-card__name {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 1px;
  color: var(--ink); margin: 0 0 6px;
}
.cp .cp-conn-card__role {
  font-family: 'Oswald', sans-serif; font-size: 0.68rem; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--acc); margin: 0 0 14px;
}
.cp .cp-conn-card__text {
  font-family: 'Open Sans', sans-serif; font-size: 0.96rem; line-height: 1.85;
  font-weight: 300; color: var(--soft); margin: 0 0 14px;
}
[dir="rtl"] .cp .cp-conn-card__text { font-family: 'Heebo', sans-serif; }
.cp .cp-conn-card__cite {
  font-family: 'Oswald', sans-serif; font-size: 0.66rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--mute); margin: 0;
}
.cp .cp-conn-card__link {
  font-family: 'Oswald', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--acc-bright);
  text-decoration: none; border-bottom: 1px solid var(--acc-soft);
  padding-bottom: 3px; display: inline-flex; align-items: center; min-height: 44px;
  transition: border-color .2s ease;
}
.cp .cp-conn-card__link:hover,
.cp .cp-conn-card__link:focus-visible { border-bottom-color: var(--acc-bright); }

/* ---------- 4 · FACTS (Star-Wars data table) + DEPTH ---------- */
.cp .cp-info-row {
  max-width: 720px; margin: 0 auto 64px; padding: 0;
}
.cp .cp-info-row__item {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px;
  align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.cp .cp-info-row__item:first-child { border-top: 1px solid var(--line); }
.cp .cp-info-row__label {
  font-family: 'Oswald', sans-serif; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink); margin: 0;
}
.cp .cp-info-row__value {
  font-family: 'Oswald', sans-serif; font-size: 0.98rem; font-weight: 400;
  letter-spacing: 0.5px; color: var(--acc-bright); margin: 0;
}

.cp .cp-depth-grid {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  max-width: var(--maxw); margin: 0 auto;
}
/* single depth card → don't stretch to half-width on desktop (villain pages) */
.cp .cp-depth-grid:has(> .cp-depth-card:only-child) {
  grid-template-columns: 1fr; max-width: 720px;
}
.cp .cp-depth-card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  padding: 36px 30px 40px;
  clip-path: var(--notch-clip);
}
.cp .cp-depth-card__kicker {
  font-family: 'Oswald', sans-serif; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: var(--acc); margin: 0 0 12px;
}
.cp .cp-depth-card__title {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.7rem, 4vw, 2.2rem);
  letter-spacing: 2px; color: var(--ink); line-height: 1.05; margin: 0 0 18px;
}
.cp .cp-depth-card__text {
  font-family: 'Open Sans', sans-serif; font-size: 1rem; line-height: 1.95;
  font-weight: 300; color: var(--soft); margin: 0;
}
[dir="rtl"] .cp .cp-depth-card__text { font-family: 'Heebo', sans-serif; }
.cp .cp-depth-card__sealed {
  font-family: 'Oswald', sans-serif; font-style: italic; font-size: 0.96rem;
  letter-spacing: 0.5px; color: var(--acc); display: block; margin-top: 16px;
}

/* ---------- 5 · CONTINUATION ---------- */
.cp .cp-cliff {
  text-align: center; max-width: 860px; margin: 0 auto; padding-bottom: 70px;
}
.cp .cp-cliff__text {
  font-family: 'Oswald', sans-serif; font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 300; line-height: 1.85; color: var(--ink);
  margin: 0 auto 18px; max-width: 760px;
}
.cp .cp-cliff__sub {
  font-family: 'Oswald', sans-serif; font-size: 0.96rem; letter-spacing: 0.5px;
  color: var(--mute); margin: 0 auto; max-width: 560px;
}
.cp .cp-artifacts { padding-top: 30px; }
.cp .cp-artifacts__grid {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  max-width: 840px; margin: 0 auto;
}
.cp .cp-art-card {
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column;
  clip-path: var(--notch-clip);
  transition: background-color .25s ease;
}
.cp .cp-art-card:hover { background: var(--panel-2); }
.cp .cp-art-card__media { display: block; width: 100%; height: 210px; overflow: hidden; }
.cp .cp-art-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cp .cp-art-card__body { padding: 24px 24px 28px; }
.cp .cp-art-card__name {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: 1px;
  color: var(--ink); margin: 0 0 10px;
}
.cp .cp-art-card__line {
  font-family: 'Open Sans', sans-serif; font-size: 0.94rem; line-height: 1.7;
  font-weight: 300; color: var(--soft); margin: 0 0 12px;
}
[dir="rtl"] .cp .cp-art-card__line { font-family: 'Heebo', sans-serif; }
.cp .cp-art-card__age {
  font-family: 'Oswald', sans-serif; font-size: 0.66rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--mute); margin: 0 0 14px;
}
.cp .cp-art-card__cta {
  font-family: 'Oswald', sans-serif; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--acc-bright);
  text-decoration: none; border-bottom: 1px solid var(--acc-soft);
  padding-bottom: 3px; display: inline-flex; align-items: center; min-height: 44px;
  transition: border-color .2s ease;
}
.cp .cp-art-card__cta:hover,
.cp .cp-art-card__cta:focus-visible { border-bottom-color: var(--acc-bright); }

/* ---------- IMAGE INTEGRATION — grey Star-Wars frame + notch cut ----------
   .cp-frame = reusable template image slot. Per character: swap src only. */
.cp .cp-frame {
  position: relative; margin: 0 auto; padding: 0; background: transparent;
}
.cp .cp-frame__img {
  display: block; width: 100%; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: center 16%;
  border: 1px solid rgba(255,255,255,0.14);
  clip-path: var(--notch-clip);
}
.cp .cp-frame--wide .cp-frame__img {
  aspect-ratio: 16 / 9; object-position: center 18%;
}
.cp .cp-frame__cap { padding: 18px 18px 4px; }
.cp .cp-frame__line {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.35rem, 4.4vw, 2.1rem);
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink);
  line-height: 1.12; margin: 0;
}
.cp .cp-frame__cite {
  font-family: 'Oswald', sans-serif; font-size: 0.64rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--acc); margin: 10px 0 0;
}
.cp .cp-dossier__media { margin: 0 0 42px; }
.cp .cp-feature {
  padding: 70px var(--pad) 10px; background: var(--bg);
}
.cp .cp-feature .cp-frame { max-width: var(--maxw); }

/* ---------- COMING-SOON placeholder (render pending; path still _TODO) ----------
   Intentional teaser, NOT a broken image. Inherits the register tokens, so hero
   pages read gold and villain pages read red with zero per-page CSS. */
.cp .cp-soon {
  display: grid; place-items: center; text-align: center; isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 32%, var(--tint-glow) 0%, transparent 70%),
    linear-gradient(157deg, var(--panel-2) 0%, var(--bg) 72%);
}
/* hero variant: fills the absolute inset:0 slot. frame variant: keeps the
   aspect-ratio + notch + border it inherits from .cp-frame__img (compound
   selector beats .cp-frame__img{display:block}). */
.cp .cp-hero__image.cp-soon { display: grid; }
.cp .cp-frame__img.cp-soon { display: grid; height: auto; }
.cp .cp-soon__inner { display: grid; gap: 18px; justify-items: center; padding: 8% 1.5rem; }
.cp .cp-soon__silhouette {
  width: clamp(56px, 12vw, 104px); height: auto; color: var(--acc); opacity: 0.42;
}
.cp .cp-soon__badge {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(0.66rem, 1.7vw, 0.86rem); font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase; color: var(--acc-bright);
  border: 1px solid var(--acc-soft); padding: 0.7em 1.5em;
  background: rgba(7,7,8,0.40);
}

/* ---------- DESKTOP UPGRADES (mobile-first) ---------- */
@media (min-width: 768px) {
  .cp .cp-dossier,
  .cp .cp-connections,
  .cp .cp-facts,
  .cp .cp-continuation { padding: 92px 6% 100px; }
  .cp .cp-hero__content { padding-bottom: 104px; }
  .cp .cp-hero__verse { margin-top: 26px; }
  .cp .cp-connections__grid,
  .cp .cp-depth-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .cp .cp-artifacts__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .cp .cp-art-card__media { height: 230px; }
  .cp .cp-feature { padding: 90px 6% 10px; }
  .cp .cp-dossier__media { margin-bottom: 52px; }
}
@media (min-width: 1100px) {
  .cp .cp-hero__verse {
    position: absolute; bottom: 104px; inset-inline-end: 6%;
    max-width: 400px; margin: 0;
  }
}

/* ---------- a11y ---------- */
/* villain-variant accent override on the global *:focus-visible (gold→red on .cp pages).
   The base focus-visible outline + the sr-only utility (.sr-only) + the reduced-motion
   duration reset all come from the global u.min.css — not re-declared here. */
.cp a:focus-visible,
.cp button:focus-visible {
  outline: 2px solid var(--acc-bright); outline-offset: 3px;
}
