/* =====================================================================
   ARAGOST — World Subsite Design System
   Theme:  JGB-wordcraft-x-child  (parent: wordcraft-x)
   Path:   /assets/css/aragost.css
   Loaded: only on pages using an "Aragost ..." page template
           (see /inc/aragost-enqueue.php)

   All Aragost markup is namespaced inside .arg-scope so these styles
   never leak into the rest of the Jerry G. Books site.

   Component map (each block below = one Gutenberg pattern, see
   /inc/aragost-block-patterns.php):
     .arg-nav            → pattern: aragost/world-nav
     .arg-hero           → pattern: aragost/hero-world
     .arg-page-hero      → pattern: aragost/page-hero
     .arg-premise        → pattern: aragost/premise
     .arg-features       → pattern: aragost/feature-cards
     .arg-band           → pattern: aragost/mood-band
     .arg-updates        → pattern: aragost/updates
     .arg-cta            → pattern: aragost/footer-cta
     .arg-search         → pattern: aragost/search
     .arg-mainterms      → pattern: aragost/main-terms
     .arg-lexicon        → pattern: aragost/glossary-list
     .arg-related        → pattern: aragost/related-pages
     .arg-char-hero      → pattern: aragost/character-hero
     .arg-choir          → pattern: aragost/wound-choir   (Dee only)
     .arg-relic          → pattern: aragost/relic-box
   ===================================================================== */

/* ---- Fonts (also enqueued via PHP; @import kept as a safe fallback) -- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ---- 1. Tokens --------------------------------------------------- */
.arg-scope {
  --arg-mist:        #D8D5D0;
  --arg-pale-mist:   #EEEAE4;
  --arg-porcelain:   #F7F4EF;
  --arg-smoke:       #A8A5A1;
  --arg-charcoal:    #2B2B2B;
  --arg-black:       #050505;
  --arg-soft-black:  #141414;
  --arg-deep-red:    #7A1118;
  --arg-blood-red:   #5A090E;
  --arg-muted-red:   #9A2A31;
  --arg-bright-red:  #C9322B;   /* on dark backgrounds only */
  --arg-gold:        #B99A4A;

  --arg-ink:         #1A1A1A;   /* body copy */
  --arg-ink-soft:    #46423D;

  --arg-serif-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --arg-serif-body:    'EB Garamond', 'Hoefler Text', Georgia, serif;
  --arg-mono:          ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --arg-maxw:   1180px;
  --arg-readw:  780px;

  font-family: var(--arg-serif-body);
  color: var(--arg-ink);
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  line-height: 1.6;
}
.arg-scope *, .arg-scope *::before, .arg-scope *::after { box-sizing: border-box; }
.arg-scope ::selection { background: var(--arg-deep-red); color: var(--arg-porcelain); }
.arg-scope img { max-width: 100%; height: auto; }

/* The page canvas. Breaks out of the theme's constrained content column to a
   full-bleed width on ANY theme (no alignfull / theme.json needed), paints the
   misty background, and provides the token context. Apply .arg-scope.arg-page
   to the outermost group of a full page pattern. */
.arg-page {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;
  background: linear-gradient(180deg, #EAE6DF 0%, #DDD8D0 60%, #D5D0C8 100%);
}
/* Keep WordPress core-block flow margins from adding gaps BETWEEN our
   full-bleed sections. Inner element margins are intentional and preserved. */
.arg-page > * { margin-top: 0; margin-bottom: 0; }

/* ---- 2. Shared utilities ---------------------------------------- */
.arg-wrap   { max-width: var(--arg-maxw); margin: 0 auto; padding-left: 26px; padding-right: 26px; }
.arg-read   { max-width: var(--arg-readw); margin: 0 auto; padding-left: 26px; padding-right: 26px; }
.arg-narrow { max-width: 920px; margin: 0 auto; padding-left: 26px; padding-right: 26px; }

.arg-kicker {
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--arg-blood-red); font-weight: 600; margin: 0 0 16px;
}
.arg-kicker--gold { color: var(--arg-gold); }

.arg-label {
  font-family: var(--arg-serif-display);
  font-size: 15px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--arg-blood-red); font-weight: 600; margin: 0 0 18px;
}

/* Links: charcoal by default, deep red on hover (brief rule) */
.arg-scope a { color: var(--arg-charcoal); text-decoration: none; }
.arg-link {
  color: var(--arg-charcoal);
  border-bottom: 1px solid rgba(43,43,43,.35);
  transition: color .2s, border-color .2s;
}
.arg-link:hover { color: var(--arg-deep-red); border-color: var(--arg-deep-red); }

/* Ornamental divider */
.arg-ornament { display: block; margin: 0 auto 34px; }
.arg-rule { height: 1px; background: linear-gradient(90deg, var(--arg-gold), transparent); margin: 0 0 30px; border: 0; }
.arg-rule--center { background: linear-gradient(90deg, transparent, var(--arg-gold), transparent); width: 120px; margin: 0 auto; }

/* ---- 3. Buttons -------------------------------------------------- */
.arg-btn {
  display: inline-block; cursor: pointer;
  font-family: var(--arg-serif-body); font-size: 16px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 15px 30px; border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.arg-btn--primary {
  color: var(--arg-porcelain); background: var(--arg-deep-red);
  border-color: var(--arg-muted-red);
  box-shadow: 0 10px 24px -10px rgba(90,9,14,.8);
}
.arg-btn--primary:hover { background: var(--arg-blood-red); color: var(--arg-porcelain); transform: translateY(-1px); }
.arg-btn--ghost { color: #201E1B; background: transparent; border-color: var(--arg-charcoal); }
.arg-btn--ghost:hover { color: var(--arg-deep-red); border-color: var(--arg-deep-red); }
.arg-btn--light { color: var(--arg-black); background: #E8E4DE; border-color: #E8E4DE; }
.arg-btn--light:hover { background: #fff; color: var(--arg-black); }
.arg-btn--ghost-dark { color: #EDE9E2; background: transparent; border-color: #4a4642; }
.arg-btn--ghost-dark:hover { color: var(--arg-bright-red); border-color: var(--arg-bright-red); }

/* ---- 4. Parent-site strip + World nav ---------------------------- */
.arg-parentstrip {
  background: #0A0A0A; color: #8A857E;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  text-align: center; padding: 9px 16px; border-bottom: 1px solid #1C1A18;
}
.arg-parentstrip a { color: #9A958E; }
.arg-parentstrip .arg-parentstrip__sep { color: #4a4642; margin: 0 10px; }
.arg-parentstrip .arg-parentstrip__here { color: var(--arg-gold); }

.arg-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(9,9,9,.97);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  backdrop-filter: saturate(120%) blur(2px);
  border-bottom: 1px solid #211F1C;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.arg-nav__inner {
  max-width: var(--arg-maxw); margin: 0 auto; padding: 0 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 64px; flex-wrap: wrap;
}
.arg-wordmark {
  display: flex; align-items: center; gap: 11px;
  background: none; border: 0; cursor: pointer; padding: 14px 0;
  text-decoration: none;
}
.arg-diamond { width: 9px; height: 9px; background: var(--arg-deep-red); transform: rotate(45deg); display: inline-block; box-shadow: 0 0 10px rgba(154,42,49,.7); }
.arg-wordmark__text {
  font-family: var(--arg-serif-display); font-weight: 600; font-size: 23px;
  letter-spacing: .42em; color: #F2EFE9; text-transform: uppercase; padding-left: 3px;
}
.arg-nav__links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 8px 0; }
.arg-nav__link {
  font-family: var(--arg-serif-body); font-size: 13.5px; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; cursor: pointer;
  background: none; border: 0; padding: 6px 1px; text-decoration: none;
  color: #C2BDB5; font-weight: 500;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.arg-nav__link:hover { color: #E7E2DA; }
.arg-nav__link.is-active { color: var(--arg-bright-red); font-weight: 600; border-bottom-color: var(--arg-deep-red); }

/* ---- 5. Heroes --------------------------------------------------- */
.arg-hero { position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 72% 18%, #C7C2BA 0%, #B3AEA6 38%, #2A2724 100%); }
.arg-hero__fog, .arg-page-hero__fog, .arg-char-hero__fog { position: absolute; inset: 0; pointer-events: none; }
.arg-hero__fog--a { opacity: .5; background: radial-gradient(60% 50% at 18% 30%, rgba(247,244,239,.6), transparent 60%); animation: argFog 26s ease-in-out infinite; }
.arg-hero__fog--b { opacity: .4; background: radial-gradient(55% 45% at 80% 70%, rgba(247,244,239,.5), transparent 65%); animation: argFog 34s ease-in-out infinite reverse; }
.arg-hero__vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -120px 120px -40px rgba(8,8,8,.85), inset 0 60px 80px -50px rgba(8,8,8,.5); }
.arg-hero__inner {
  position: relative; max-width: var(--arg-maxw); margin: 0 auto; padding: 0 26px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: end; min-height: 600px;
}
.arg-hero__copy { padding: 96px 0 90px; max-width: 580px; }
.arg-hero__title {
  margin: 0; font-family: var(--arg-serif-display); font-weight: 600;
  font-size: clamp(78px, 11vw, 148px); line-height: .86; color: var(--arg-deep-red);
  letter-spacing: .01em; text-shadow: 0 2px 1px rgba(255,255,255,.25);
}
.arg-hero__sub {
  margin: 26px 0 0; font-family: var(--arg-serif-display); font-style: italic; font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.32; color: #201E1B; max-width: 480px;
}
.arg-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 38px; }
.arg-hero__figure { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 600px; }
.arg-hero__figure::before { content: ""; position: absolute; bottom: 0; width: 78%; height: 80%; background: radial-gradient(50% 60% at 50% 70%, rgba(8,8,8,.55), transparent 70%); filter: blur(8px); }
.arg-hero__img { position: relative; max-height: 560px; width: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)) contrast(1.05) grayscale(.1); }

/* Compact dark hero (glossary / index) */
.arg-page-hero { position: relative; overflow: hidden; color: #EDE9E2;
  background: radial-gradient(110% 130% at 50% -10%, #2A2724 0%, #1A1714 40%, #0C0B0A 100%); }
.arg-page-hero__fog { opacity: .4; background: radial-gradient(50% 60% at 30% 10%, rgba(217,213,208,.18), transparent 60%); animation: argFog 30s ease-in-out infinite; }
.arg-page-hero__inner { position: relative; max-width: 880px; margin: 0 auto; padding: 78px 26px 64px; text-align: center; }
.arg-page-hero__title { font-family: var(--arg-serif-display); font-weight: 600; font-size: clamp(46px, 7vw, 82px); line-height: .98; margin: 0; color: #F3EFE8; }
.arg-page-hero__title em, .arg-accent-red { color: var(--arg-bright-red); font-style: inherit; }
.arg-page-hero__sub { font-family: var(--arg-serif-display); font-style: italic; font-size: clamp(20px, 2.4vw, 26px); color: #CFCAC2; margin: 22px auto 0; max-width: 600px; line-height: 1.4; }
.arg-page-hero__note { font-size: 17px; color: #A29D95; margin: 18px auto 0; max-width: 580px; line-height: 1.55; }

/* ---- 6. Landing sections ---------------------------------------- */
.arg-premise { max-width: 840px; margin: 0 auto; padding: 88px 26px 64px; text-align: center; }
.arg-premise__text { font-family: var(--arg-serif-display); font-size: clamp(26px, 3.2vw, 38px); line-height: 1.45; font-weight: 500; color: var(--arg-ink); margin: 0; }

.arg-features { max-width: var(--arg-maxw); margin: 0 auto; padding: 36px 26px 92px; }
.arg-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.arg-feature-card {
  display: block; text-align: left; background: var(--arg-porcelain);
  border: 1px solid #CFC9C0; padding: 28px 24px 26px; cursor: pointer; text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.arg-feature-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(20,12,10,.6); border-color: var(--arg-deep-red); }
.arg-feature-card__kicker { display: block; font-family: var(--arg-serif-display); font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--arg-muted-red); margin-bottom: 14px; }
.arg-feature-card__title { display: block; font-family: var(--arg-serif-display); font-size: 30px; font-weight: 600; color: #161616; line-height: 1.05; margin-bottom: 10px; }
.arg-feature-card__blurb { display: block; font-size: 16.5px; line-height: 1.5; color: #3A3632; }
.arg-feature-card__cta { display: inline-block; margin-top: 16px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--arg-charcoal); }

.arg-band { position: relative; background: #0C0C0C; color: #E8E4DE; overflow: hidden; }
.arg-band::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background: radial-gradient(70% 120% at 50% -20%, rgba(122,17,24,.35), transparent 60%); }
.arg-band__inner { position: relative; max-width: 900px; margin: 0 auto; padding: 96px 26px; text-align: center; }
.arg-band__quote { font-family: var(--arg-serif-display); font-style: italic; font-weight: 500; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.34; margin: 0; color: #F3EFE8; }
.arg-band__tags { margin-top: 40px; display: flex; gap: 34px; justify-content: center; flex-wrap: wrap; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: #8E8980; }
.arg-band__tags span.dot { color: #3A3632; }

.arg-updates { max-width: 980px; margin: 0 auto; padding: 88px 26px 60px; }
.arg-updates__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-bottom: 1px solid #C4BEB4; padding-bottom: 16px; margin-bottom: 8px; }
.arg-updates__title { font-family: var(--arg-serif-display); font-size: 34px; font-weight: 600; color: var(--arg-deep-red); margin: 0; }
.arg-updates__meta { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #6A655E; }
.arg-update { display: grid; grid-template-columns: 130px 1fr auto; gap: 22px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #CFC9C0; padding: 22px 4px; cursor: pointer; text-decoration: none; transition: background .2s; }
.arg-update:hover { background: rgba(122,17,24,.04); }
.arg-update__kind { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--arg-muted-red); padding-top: 5px; }
.arg-update__body { display: block; min-width: 0; }
.arg-update__title { display: block; font-family: var(--arg-serif-display); font-size: 25px; font-weight: 600; color: var(--arg-ink); line-height: 1.15; }
.arg-update__blurb { display: block; font-size: 16px; color: var(--arg-ink-soft); margin-top: 4px; line-height: 1.45; }
.arg-update__date { font-size: 13px; color: #6A655E; white-space: nowrap; padding-top: 6px; }

/* ---- 7. Footer CTA + dark interludes ---------------------------- */
.arg-cta { background: #0A0A0A; color: #EDE9E2; }
.arg-cta__inner { max-width: 820px; margin: 0 auto; padding: 90px 26px; text-align: center; }
.arg-cta__title { font-family: var(--arg-serif-display); font-weight: 600; font-size: clamp(36px, 5vw, 58px); line-height: 1.08; margin: 0 0 20px; color: #F3EFE8; }
.arg-cta__quote { font-family: var(--arg-serif-display); font-style: italic; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.3; margin: 0; color: #F3EFE8; }
.arg-cta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* ---- 8. Glossary -------------------------------------------------- */
.arg-search { margin: -30px auto 0; position: relative; z-index: 5; max-width: 620px; }
.arg-search__box { position: relative; display: flex; align-items: center; background: var(--arg-porcelain); border: 1px solid #C4BEB4; box-shadow: 0 22px 44px -26px rgba(12,8,6,.7); }
.arg-search__icon { margin-left: 18px; flex: none; }
.arg-search__input { flex: 1; border: 0; outline: none; background: transparent; font-family: var(--arg-serif-body); font-size: 19px; color: var(--arg-ink); padding: 16px 18px; }
.arg-search__input::placeholder { color: #8A857E; font-style: italic; }

.arg-mainterms { padding: 64px 0 8px; }
.arg-mainterms__intro { font-size: 16px; color: #56514B; margin: 0 0 26px; font-style: italic; font-family: var(--arg-serif-display); }
.arg-termgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.arg-term-box {
  position: relative; background: linear-gradient(165deg, #171513 0%, #0C0B0A 100%);
  border: 1px solid #2C2824; border-top: 2px solid var(--arg-deep-red);
  padding: 26px 26px 24px; color: #E8E4DE; box-shadow: 0 14px 30px -22px rgba(0,0,0,.9);
}
.arg-term-box__term { font-family: var(--arg-serif-display); font-variant: small-caps; letter-spacing: .05em; font-weight: 600; font-size: 28px; color: #D8463E; margin: 0 0 10px; }
.arg-term-box__def { font-size: 17px; line-height: 1.58; color: #CFCAC2; margin: 0; }

.arg-lexicon { padding: 54px 0 8px; }
.arg-entry { margin: 0 0 18px; font-size: 18.5px; line-height: 1.62; color: var(--arg-ink); max-width: 760px; }
.arg-entry__term { font-family: var(--arg-serif-display); font-variant: small-caps; letter-spacing: .04em; font-weight: 600; font-size: 22px; color: var(--arg-deep-red); }
.arg-entry__dot { color: var(--arg-deep-red); }

.arg-empty { padding: 70px 0; text-align: center; }
.arg-empty__title { font-family: var(--arg-serif-display); font-style: italic; font-size: 26px; color: #56514B; margin: 0; }
.arg-empty__hint { font-size: 16px; color: #7A756E; margin: 10px 0 0; }
.arg-is-hidden { display: none !important; }

.arg-related { padding: 40px 0 16px; }
.arg-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.arg-related-card { display: block; text-align: left; background: var(--arg-pale-mist); border: 1px solid #CFC9C0; padding: 20px; cursor: pointer; text-decoration: none; transition: border-color .2s, background .2s; }
.arg-related-card:hover { border-color: var(--arg-deep-red); background: var(--arg-porcelain); }
.arg-related-card__kind { display: block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--arg-muted-red); margin-bottom: 7px; }
.arg-related-card__title { display: block; font-family: var(--arg-serif-display); font-size: 24px; font-weight: 600; color: var(--arg-ink); }

/* ---- 9. Character page ------------------------------------------- */
.arg-char-hero { position: relative; overflow: hidden; color: #EDE9E2;
  background: radial-gradient(120% 100% at 28% 30%, #2C2825 0%, #16130F 45%, #090807 100%); }
.arg-char-hero__fog { opacity: .5; background: radial-gradient(40% 60% at 75% 30%, rgba(122,17,24,.4), transparent 60%); animation: argFog 32s ease-in-out infinite; }
.arg-char-hero__inner { position: relative; max-width: var(--arg-maxw); margin: 0 auto; padding: 0 26px; display: grid; grid-template-columns: 1fr .9fr; gap: 24px; align-items: center; min-height: 600px; }
.arg-char-hero__copy { padding: 84px 0; }
.arg-char-hero__name { font-family: var(--arg-serif-display); font-weight: 600; font-size: clamp(72px, 11vw, 150px); line-height: .84; margin: 0; color: #F3EFE8; }
.arg-char-hero__line { font-family: var(--arg-serif-display); font-style: italic; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.32; color: #D9D4CC; margin: 24px 0 0; max-width: 480px; }
.arg-char-hero__figure { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 600px; }
.arg-char-hero__figure::before { content: ""; position: absolute; bottom: 0; width: 80%; height: 78%; background: radial-gradient(50% 60% at 50% 75%, rgba(122,17,24,.28), transparent 70%); filter: blur(10px); }
.arg-char-hero__img { position: relative; max-height: 576px; width: auto; filter: drop-shadow(0 30px 44px rgba(0,0,0,.7)) contrast(1.06); }

.arg-char-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.arg-char-nav__link { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: #CFCAC2; background: rgba(255,255,255,.04); border: 1px solid #34302B; padding: 9px 15px; cursor: pointer; text-decoration: none; transition: border-color .2s, color .2s; }
.arg-char-nav__link:hover { border-color: var(--arg-bright-red); color: #F3EFE8; }

.arg-section { padding: 34px 0 18px; border-top: 1px solid #CFC9C0; }
.arg-section--lead { padding-top: 74px; border-top: 0; }
.arg-section--wide { padding-top: 48px; }
.arg-lead-quote { font-family: var(--arg-serif-display); font-size: clamp(24px, 3vw, 32px); font-style: italic; line-height: 1.45; color: var(--arg-ink); margin: 0; }
.arg-prose { font-size: 18.5px; line-height: 1.7; color: var(--arg-ink); margin: 26px 0 0; }
.arg-prose--tight { margin: 0; }

.arg-choir__intro { font-size: 18.5px; line-height: 1.7; color: var(--arg-ink); margin: 0 0 12px; }
.arg-choir__list { margin-top: 26px; display: flex; flex-direction: column; gap: 2px; }
.arg-spirit { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 20px 4px; border-bottom: 1px solid #DAD4CB; }
.arg-spirit__dot { display: block; width: 18px; height: 18px; border-radius: 50%; margin-top: 7px; border: 1px solid rgba(0,0,0,.25); }
.arg-spirit__body { display: block; min-width: 0; }
.arg-spirit__name { display: block; font-family: var(--arg-serif-display); font-size: 24px; font-weight: 600; color: #161616; line-height: 1.2; }
.arg-spirit__role { font-family: var(--arg-serif-body); font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--arg-muted-red); margin-left: 11px; white-space: nowrap; vertical-align: 1px; }
.arg-spirit__manifest { display: block; font-size: 17px; line-height: 1.58; color: #3A3632; margin-top: 7px; }

.arg-relic { background: linear-gradient(165deg, #171513, #0C0B0A); border: 1px solid #2C2824; border-left: 2px solid var(--arg-deep-red); padding: 28px 30px; color: #E8E4DE; }
.arg-relic__text { font-size: 18.5px; line-height: 1.66; margin: 0; color: #CFCAC2; }

.arg-relations__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.arg-relation-card { display: block; text-align: left; background: var(--arg-porcelain); border: 1px solid #CFC9C0; padding: 20px 22px; cursor: pointer; text-decoration: none; transition: border-color .2s; }
.arg-relation-card:hover { border-color: var(--arg-deep-red); }
.arg-relation-card__name { display: block; font-family: var(--arg-serif-display); font-size: 24px; font-weight: 600; color: var(--arg-ink); }
.arg-relation-card__note { display: block; font-size: 16px; color: var(--arg-ink-soft); margin-top: 5px; line-height: 1.45; }

.arg-appearance { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #CFC9C0; padding: 18px 4px; cursor: pointer; text-decoration: none; transition: background .2s; }
.arg-appearance:hover { background: rgba(122,17,24,.04); }
.arg-appearance__kind { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--arg-muted-red); padding-top: 4px; }
.arg-appearance__body { display: block; min-width: 0; }
.arg-appearance__title { display: block; font-family: var(--arg-serif-display); font-size: 23px; font-weight: 600; color: var(--arg-ink); }
.arg-appearance__note { display: block; font-size: 15.5px; color: #56514B; margin-top: 3px; }

.arg-gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.arg-gallery__item { aspect-ratio: 3/4; background: linear-gradient(160deg, #1A1714, #0C0B0A); border: 1px solid #2C2824; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.arg-gallery__item img { max-height: 96%; width: auto; filter: contrast(1.05); }
.arg-gallery__ph { aspect-ratio: 3/4; background: repeating-linear-gradient(45deg, #CDC7BE, #CDC7BE 10px, #C5BFB6 10px, #C5BFB6 20px); border: 1px solid #CFC9C0; display: flex; align-items: center; justify-content: center; }
.arg-gallery__ph span { font-family: var(--arg-mono); font-size: 12px; letter-spacing: .1em; color: #6A655E; text-align: center; padding: 0 12px; }

.arg-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.arg-section--actions { padding: 30px 0 78px; border-top: 0; }

/* ---- 10. Characters / archive index ----------------------------- */
.arg-index { max-width: 1100px; margin: 0 auto; padding: 64px 26px 88px; }
.arg-index__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.arg-card { display: block; text-align: left; background: var(--arg-porcelain); border: 1px solid #CFC9C0; padding: 0; cursor: pointer; overflow: hidden; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.arg-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(20,12,10,.7); border-color: var(--arg-deep-red); }
.arg-card__media { display: flex; aspect-ratio: 4/5; background: radial-gradient(80% 90% at 50% 20%, #2A2724, #0C0B0A); align-items: flex-end; justify-content: center; overflow: hidden; }
.arg-card__media img { max-height: 97%; width: auto; filter: contrast(1.05) drop-shadow(0 16px 22px rgba(0,0,0,.5)); }
.arg-card__body { display: block; padding: 22px 24px 26px; }
.arg-card__role { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--arg-muted-red); margin-bottom: 8px; }
.arg-card__name { display: block; font-family: var(--arg-serif-display); font-size: 34px; font-weight: 600; color: #161616; line-height: 1; margin-bottom: 8px; }
.arg-card__line { display: block; font-size: 16.5px; line-height: 1.5; color: #3A3632; }
.arg-card__cta { display: inline-block; margin-top: 14px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--arg-charcoal); }

/* ---- 11. Site footer -------------------------------------------- */
.arg-footer { background: #070707; color: #7C776F; border-top: 1px solid #1C1A18; }
.arg-footer__inner { max-width: var(--arg-maxw); margin: 0 auto; padding: 40px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.arg-footer__brand { display: flex; align-items: center; gap: 11px; }
.arg-footer__brand .arg-diamond { width: 8px; height: 8px; box-shadow: none; }
.arg-footer__brand span, .arg-footer__brand p { margin: 0; font-family: var(--arg-serif-display); font-size: 18px; letter-spacing: .34em; text-transform: uppercase; color: #C9C4BC; }
.arg-footer__note { margin: 0; font-size: 14px; letter-spacing: .04em; }
.arg-footer__note a { color: #A29D95; }

/* ---- 12. Motion + responsive ------------------------------------ */
@keyframes argFog {
  0%   { transform: translate3d(-3%, 0, 0) scale(1.05); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.1); }
  100% { transform: translate3d(-3%, 0, 0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .arg-hero__fog, .arg-page-hero__fog, .arg-char-hero__fog { animation: none; }
}

@media (max-width: 860px) {
  .arg-hero__inner { grid-template-columns: 1fr; }
  .arg-hero__copy { padding: 72px 0 36px; }
  .arg-hero__figure { min-height: 420px; }
  .arg-hero__img { max-height: 420px; }
  .arg-char-hero__inner { grid-template-columns: 1fr; }
  .arg-char-hero__copy { padding: 64px 0 24px; }
  .arg-char-hero__figure { min-height: 420px; }
  .arg-char-hero__img { max-height: 440px; }
  .arg-update { grid-template-columns: 1fr; gap: 4px; }
  .arg-update__date { padding-top: 0; }
  .arg-appearance { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 560px) {
  .arg-scope { font-size: 17px; }
  .arg-nav__inner { justify-content: center; }
  .arg-nav__links { justify-content: center; gap: 16px; }
  .arg-features__grid, .arg-termgrid, .arg-index__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   13. CORE-BLOCK COMPATIBILITY
   The patterns are built from core WordPress blocks, which wrap content in
   .wp-block-group / .wp-block-columns / .wp-block-heading / .wp-block-buttons.
   These rules let the Aragost classes sit cleanly on those wrappers.
   ===================================================================== */

/* Headings: strip the core heading's default margins; our classes set type. */
.arg-scope .wp-block-heading { margin-top: 0; margin-bottom: 0; }

/* Hero / character hero built with a core Columns block. */
.arg-hero__inner.wp-block-columns,
.arg-char-hero__inner.wp-block-columns {
  position: relative; z-index: 2;
  max-width: var(--arg-maxw); margin: 0 auto; padding: 0 26px;
  gap: 20px; align-items: center;
}
.arg-hero__inner.wp-block-columns { align-items: flex-end; }
.arg-hero__inner .wp-block-column, .arg-char-hero__inner .wp-block-column { min-width: 0; }
.arg-hero__copy.wp-block-column, .arg-char-hero__copy.wp-block-column { flex-basis: 56% !important; }
.arg-hero__figure.wp-block-column, .arg-char-hero__figure.wp-block-column { flex-basis: 44% !important; }

/* Core image wrapper inside the hero figure. */
.arg-hero__figure .wp-block-image,
.arg-char-hero__figure .wp-block-image { position: relative; margin: 0; }
.arg-hero__figure .wp-block-image img { max-height: 560px; width: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)) contrast(1.05) grayscale(.1); }
.arg-char-hero__figure .wp-block-image img { max-height: 576px; width: auto; filter: drop-shadow(0 30px 44px rgba(0,0,0,.7)) contrast(1.06); }

/* Feature / term / index grids hold core Group children. */
.arg-features__grid > *, .arg-termgrid > *, .arg-index__grid > *,
.arg-relations__grid > *, .arg-related__grid > * { margin: 0; }

/* Buttons block → our button skins. */
.arg-scope .wp-block-buttons { gap: 16px; margin: 0; }
.arg-scope .wp-block-button { margin: 0; }
.arg-scope .wp-block-button__link {
  font-family: var(--arg-serif-body); font-size: 16px; letter-spacing: .16em;
  text-transform: uppercase; padding: 15px 30px; border: 1px solid transparent;
  border-radius: 0; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.arg-btn--primary > .wp-block-button__link, a.arg-btn--primary { color: var(--arg-porcelain); background: var(--arg-deep-red); border-color: var(--arg-muted-red); box-shadow: 0 10px 24px -10px rgba(90,9,14,.8); }
.arg-btn--primary > .wp-block-button__link:hover, a.arg-btn--primary:hover { background: var(--arg-blood-red); color: var(--arg-porcelain); transform: translateY(-1px); }
.arg-btn--ghost > .wp-block-button__link, a.arg-btn--ghost { color: #201E1B; background: transparent; border-color: var(--arg-charcoal); }
.arg-btn--ghost > .wp-block-button__link:hover, a.arg-btn--ghost:hover { color: var(--arg-deep-red); border-color: var(--arg-deep-red); }
.arg-btn--light > .wp-block-button__link, a.arg-btn--light { color: var(--arg-black); background: #E8E4DE; border-color: #E8E4DE; }
.arg-btn--light > .wp-block-button__link:hover, a.arg-btn--light:hover { background: #fff; color: var(--arg-black); }
.arg-btn--ghost-dark > .wp-block-button__link, a.arg-btn--ghost-dark { color: #EDE9E2; background: transparent; border-color: #4a4642; }
.arg-btn--ghost-dark > .wp-block-button__link:hover, a.arg-btn--ghost-dark:hover { color: var(--arg-bright-red); border-color: var(--arg-bright-red); }

/* Glossary entry: term is a core <strong> (no fragile custom spans). */
.arg-entry strong { font-family: var(--arg-serif-display); font-variant: small-caps; letter-spacing: .04em; font-weight: 600; font-size: 22px; color: var(--arg-deep-red); }

/* Term box built from a core Group + heading + paragraph. */
.arg-term-box.wp-block-group { display: block; }

/* Wound Choir color-coding: a colored left edge + colored role label per
   spirit. Robust (no pseudo-elements), and reads clearly on the misty bg. */
.arg-spirit { position: relative; display: block; padding: 18px 4px 18px 22px; border-bottom: 1px solid #DAD4CB; border-left: 4px solid #9A958E; }
.arg-spirit--grief       { border-left-color: #8FA1AE; }
.arg-spirit--grief .arg-spirit__manifest strong       { color: #5F7180; }
.arg-spirit--wrath       { border-left-color: #C0392B; }
.arg-spirit--wrath .arg-spirit__manifest strong       { color: #B02A1E; }
.arg-spirit--calculation { border-left-color: #7E66B0; }
.arg-spirit--calculation .arg-spirit__manifest strong { color: #6A549B; }
.arg-spirit--hunger      { border-left-color: #6F8C3C; }
.arg-spirit--hunger .arg-spirit__manifest strong      { color: #5C7731; }
.arg-spirit--fear        { border-left-color: #8AA0AD; }
.arg-spirit--fear .arg-spirit__manifest strong        { color: #5E727E; }
.arg-spirit--vengeance   { border-left-color: #9A2A31; }
.arg-spirit--vengeance .arg-spirit__manifest strong   { color: #9A2A31; }

/* Wound Choir — canon manifestation colours (matches content slugs). Vivid
   left edge; the role label uses a slightly darker tone for readable contrast
   on the misty section background. */
.arg-spirit--witness   { border-left-color: #2F6BE0; }                 /* electric blue */
.arg-spirit--witness .arg-spirit__manifest strong   { color: #1E5BD0; }
.arg-spirit--judge     { border-left-color: #C79A3A; }                 /* muted gold / amber */
.arg-spirit--judge .arg-spirit__manifest strong     { color: #9A7421; }
.arg-spirit--blight    { border-left-color: #36B34A; }                 /* neon green */
.arg-spirit--blight .arg-spirit__manifest strong    { color: #2A8C3A; }
.arg-spirit--whisper   { border-left-color: #7E5BD0; }                 /* deep violet */
.arg-spirit--whisper .arg-spirit__manifest strong   { color: #6A45C0; }
.arg-spirit--quiet     { border-left-color: #6FB7C9; }                 /* pale cyan / ice */
.arg-spirit--quiet .arg-spirit__manifest strong     { color: #3F8597; }
.arg-spirit__name strong, .arg-spirit__manifest strong { color: var(--arg-muted-red); font-family: var(--arg-serif-body); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }

/* Nav + section bands break full width via the .arg-page canvas already;
   ensure their own backgrounds span edge-to-edge. */
.arg-nav, .arg-hero, .arg-char-hero, .arg-page-hero, .arg-band, .arg-cta, .arg-parentstrip, .arg-footer { width: 100%; }

/* Atmosphere via pseudo-elements (no decorative child blocks needed). */
.arg-hero { position: relative; box-shadow: inset 0 -120px 120px -40px rgba(8,8,8,.85), inset 0 60px 80px -50px rgba(8,8,8,.5); }
.arg-hero::before, .arg-hero::after,
.arg-char-hero::before, .arg-page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.arg-hero::before { opacity: .5; background: radial-gradient(60% 50% at 18% 30%, rgba(247,244,239,.6), transparent 60%); animation: argFog 26s ease-in-out infinite; }
.arg-hero::after  { opacity: .4; background: radial-gradient(55% 45% at 80% 70%, rgba(247,244,239,.5), transparent 65%); animation: argFog 34s ease-in-out infinite reverse; }
.arg-char-hero { position: relative; }
.arg-char-hero::before { opacity: .5; background: radial-gradient(40% 60% at 75% 30%, rgba(122,17,24,.4), transparent 60%); animation: argFog 32s ease-in-out infinite; }
.arg-page-hero { position: relative; }
.arg-page-hero::before { opacity: .4; background: radial-gradient(50% 60% at 30% 10%, rgba(217,213,208,.18), transparent 60%); animation: argFog 30s ease-in-out infinite; }
.arg-page-hero__inner, .arg-char-hero__inner.wp-block-columns, .arg-hero__inner.wp-block-columns { position: relative; z-index: 2; }
.arg-char-hero__figure .wp-block-image, .arg-hero__figure .wp-block-image { z-index: 2; }

/* =====================================================================
   14. PLUGIN ADDITIONS  (Aragost World plugin — lives inside JerryGBooks.net)
   Adds the .aragost-page wrapper, the left identity tag, the internal
   subnavigation, profile/related/video components, and the brief's
   contrast fixes. Everything stays scoped to the Aragost content area.
   ===================================================================== */

/* The plugin wraps every page in .aragost-page (alongside .arg-scope .arg-page).
   Mirror the token + canvas context here so the wrapper is self-sufficient. */
.aragost-page {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  overflow-x: clip;
  background: linear-gradient(180deg, #EAE6DF 0%, #DDD8D0 60%, #D5D0C8 100%);
  position: relative;
}

/* ---- Contrast fixes (per brief) --------------------------------- */
/* Inactive internal nav links: warm ivory, clearly readable on black.
   Scoped with .arg-scope to beat the base `.arg-scope a` color rule. */
.arg-scope .arg-nav__link { color: #E8E1D4; font-weight: 500; }
.arg-nav__link:hover { color: #F3EFE8; border-bottom-color: var(--arg-gold); }
.arg-nav__link.is-active { color: var(--arg-gold); border-bottom-color: var(--arg-gold); }
/* Ghosted "secondary" button on dark (the old "Meet the Dead" problem):
   brighter ivory text + readable antique-gold border. */
.arg-btn--ghost-dark { color: #F1ECE3; border-color: var(--arg-gold); }
.arg-btn--ghost-dark:hover { color: #fff; border-color: #D7B864; background: rgba(185,154,74,.12); }
/* Ghost on light: a touch darker border for definition. */
.arg-btn--ghost { color: #1A1A1A; border-color: #6E4B1E; }
.arg-btn--ghost:hover { color: var(--arg-deep-red); border-color: var(--arg-deep-red); }
/* Body copy floor on misty backgrounds. */
.arg-prose, .arg-premise__text, .arg-page-hero__note { color: #211F1C; }

/* ---- Left identity tag ------------------------------------------ */
/* Vertical page label pinned to the left edge of the Aragost content. */
.arg-idtag {
  position: absolute; top: 0; left: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 26px 12px; height: 100%; max-height: 520px;
  pointer-events: none;
}
.arg-idtag__diamond { width: 7px; height: 7px; background: var(--arg-deep-red); transform: rotate(45deg); flex: none; }
.arg-idtag__label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--arg-serif-body);
  font-size: 13px; letter-spacing: .42em; text-transform: uppercase;
  color: #CBB985; white-space: nowrap; font-weight: 600; flex: none;
}
.arg-idtag__rule { width: 1px; flex: 1; background: linear-gradient(to bottom, var(--arg-gold), transparent); min-height: 50px; }
@media (max-width: 1100px) { .arg-idtag { display: none; } }

/* ---- Internal subnavigation ------------------------------------- */
/* A high-contrast world nav bar that is PART OF THE PAGE CONTENT (not the
   global site header). Sticky under the JGB header. */
.arg-subnav {
  position: sticky; top: 0; z-index: 40; width: 100%;
  background: rgba(8,8,8,.97);
  -webkit-backdrop-filter: saturate(120%) blur(3px); backdrop-filter: saturate(120%) blur(3px);
  border-top: 1px solid #2A2622; border-bottom: 1px solid #211F1C;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.arg-subnav__inner {
  max-width: var(--arg-maxw); margin: 0 auto; padding: 0 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  min-height: 58px; flex-wrap: wrap;
}
.arg-subnav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 12px 0; }
.arg-subnav__brand .arg-diamond { width: 8px; height: 8px; background: var(--arg-deep-red); transform: rotate(45deg); box-shadow: 0 0 10px rgba(154,42,49,.7); }
.arg-subnav__brandtext { font-family: var(--arg-serif-display); font-weight: 600; font-size: 19px; letter-spacing: .38em; text-transform: uppercase; color: #F2EFE9; }
.arg-subnav__links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 8px 0; }
.arg-scope .arg-subnav__link {
  font-family: var(--arg-serif-body); font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
  color: #E8E1D4; font-weight: 500; text-decoration: none; white-space: nowrap;
  padding: 6px 1px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.arg-subnav__link:hover { color: #FBF8F2; border-bottom-color: var(--arg-gold); }
.arg-subnav__link.is-active { color: var(--arg-gold); font-weight: 600; border-bottom-color: var(--arg-gold); }

/* ---- Core-block version of the nav/footer (editable WP blocks) ----
   When the header/footer are built from core Group/Paragraph blocks (the
   "Aragost Header" / "Aragost Footer" patterns), links are ordinary anchors
   inside paragraphs. These rules make them look identical to the raw markup
   so the pattern is fully editable yet pixel-matched. */
.arg-subnav__brand p, .arg-subnav__links p, .arg-footer__inner p.arg-footer__note { margin: 0; }
.arg-subnav__links a {
  font-family: var(--arg-serif-body); font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
  color: #E8E1D4; font-weight: 500; text-decoration: none; white-space: nowrap;
  padding: 6px 1px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.arg-subnav__links a:hover { color: #FBF8F2; border-bottom-color: var(--arg-gold); }
.arg-subnav__links a.is-active, .arg-subnav__links .is-active a { color: var(--arg-gold); font-weight: 600; border-bottom-color: var(--arg-gold); }
.arg-subnav__brandtext, p.arg-subnav__brandtext { margin: 0; }

/* ---- Quick profile panel (character pages) ---------------------- */
.arg-profile { display: grid; grid-template-columns: 150px 1fr; gap: 2px 18px; margin: 0; }
.arg-profile__row { display: contents; }
.arg-profile dt, .arg-profile__k { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--arg-muted-red); padding: 12px 0 0; }
.arg-profile dd, .arg-profile__v { margin: 0; padding: 12px 0 12px; font-size: 18px; color: var(--arg-ink); border-bottom: 1px solid #D6D0C7; }

/* ---- Related links as chips ------------------------------------- */
.arg-chiprow { display: flex; flex-wrap: wrap; gap: 10px; }
.arg-scope .arg-chip {
  display: inline-block; font-family: var(--arg-serif-body); font-size: 14px; letter-spacing: .04em;
  text-decoration: none; color: #2A2622; background: #F7F4EF; border: 1px solid #C7BFB2;
  padding: 9px 16px; transition: border-color .2s, color .2s, background .2s;
}
.arg-scope .arg-chip:hover { color: var(--arg-deep-red); border-color: var(--arg-deep-red); background: #fff; }
.arg-scope .arg-chip--dark { background: rgba(255,255,255,.04); color: #ECE6DC; border-color: #3A352E; }
.arg-chip--dark:hover { color: #fff; border-color: var(--arg-gold); }

/* ---- Video grid -------------------------------------------------- */
.arg-videogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.arg-videocard { display: block; text-decoration: none; background: #F7F4EF; border: 1px solid #CFC9C0; overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; }
.arg-videocard:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(20,12,10,.6); border-color: var(--arg-deep-red); }
.arg-videocard__thumb { aspect-ratio: 16/9; background: radial-gradient(80% 90% at 50% 20%, #2A2724, #0C0B0A); display: flex; align-items: center; justify-content: center; position: relative; }
.arg-videocard__play { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(247,244,239,.5); display: flex; align-items: center; justify-content: center; color: #F7F4EF; font-size: 20px; }
.arg-videocard__meta { padding: 18px 20px 20px; }
.arg-videocard__kicker { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--arg-muted-red); margin-bottom: 7px; }
.arg-videocard__title { display: block; font-family: var(--arg-serif-display); font-size: 24px; font-weight: 600; color: #161616; line-height: 1.1; }

/* ---- Generic section heading lockup ----------------------------- */
.arg-sectionhead { max-width: var(--arg-maxw); margin: 0 auto; padding: 64px 26px 0; }
.arg-divider { max-width: var(--arg-maxw); margin: 0 auto; padding: 0 26px; }
.arg-divider hr { border: 0; height: 1px; background: linear-gradient(90deg, var(--arg-gold), transparent); margin: 28px 0 0; }

/* ---- Defensive core-block fallbacks ----------------------------- */
/* If a theme dequeues WordPress core block styles, these keep the Aragost
   buttons / columns / images laid out correctly. On a normal install they
   simply mirror core and are harmless. Scoped to .arg-scope only. */
.arg-scope .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.arg-scope .wp-block-button { display: inline-block; margin: 0; }
.arg-scope .wp-block-button__link { display: inline-block; white-space: nowrap; }
.arg-scope .wp-block-columns { display: flex; flex-wrap: wrap; gap: 20px; }
.arg-scope .wp-block-column { flex: 1 1 0; min-width: 0; }
.arg-scope .wp-block-image { margin: 0; }
.arg-scope .wp-block-image img { display: block; }
@media (max-width: 781px) {
  .arg-scope .wp-block-columns { flex-direction: column; }
  .arg-scope .wp-block-column { flex-basis: 100% !important; }
}

/* =====================================================================
   15. v1.1 — full-width template, high-contrast nav, character roster,
   coming-soon, and word-wrap fixes.
   ===================================================================== */

/* ---- Full-width template: strip theme content constraints ------- */
/* The World-Template-FullWidth page template renders content with no theme
   container. These rules guarantee the Aragost canvas truly fills the screen
   (no side borders that force words like "Gravetread" to wrap) regardless of
   the theme's default content width. */
.aragost-fullwidth-main { width: 100%; max-width: 100%; margin: 0; padding: 0; }
body.aragost-fullwidth .aragost-page,
.aragost-fullwidth-main .aragost-page { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
/* Long single-word hero titles never clip or wrap awkwardly. */
.arg-hero__title, .arg-char-hero__name, .arg-page-hero__title { overflow-wrap: normal; word-break: keep-all; hyphens: none; }

/* ---- High-contrast in-page navigation (brief) ------------------- */
.arg-char-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.arg-scope .arg-char-nav__link {
  font-family: var(--arg-serif-body); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: #0E0C0A; background: var(--arg-gold); border: 1px solid var(--arg-gold);
  padding: 10px 18px; text-decoration: none; font-weight: 600; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.arg-scope .arg-char-nav__link:hover { background: #D7B864; border-color: #D7B864; color: #0E0C0A; }
.arg-scope .arg-char-nav__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- Character selection roster --------------------------------- */
.arg-charcard__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.arg-charcard { margin: 0; }
.arg-charcard__link {
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
  background: var(--arg-porcelain); border: 1px solid #CFC9C0; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.arg-charcard__link:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -28px rgba(20,12,10,.75); border-color: var(--arg-deep-red); }
.arg-charcard__media { display: block; aspect-ratio: 4/5; background: radial-gradient(80% 90% at 50% 18%, #2A2724, #0C0B0A); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.arg-charcard__media img { max-height: 98%; width: auto; filter: contrast(1.05) drop-shadow(0 16px 22px rgba(0,0,0,.55)); }
.arg-charcard__body { display: block; padding: 22px 22px 24px; }
.arg-charcard__role { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--arg-muted-red); margin-bottom: 8px; }
.arg-charcard__name { display: block; font-family: var(--arg-serif-display); font-size: 32px; font-weight: 600; color: #161616; line-height: 1; margin-bottom: 9px; }
.arg-charcard__line { display: block; font-size: 16px; line-height: 1.5; color: #3A3632; }
.arg-charcard__cta { display: inline-block; margin-top: 14px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--arg-deep-red); font-weight: 600; }

/* ---- Coming Soon (videos) --------------------------------------- */
.arg-comingsoon {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: 70px 26px; background: linear-gradient(165deg, #171513 0%, #0C0B0A 100%);
  border: 1px solid #2C2824; border-top: 2px solid var(--arg-deep-red);
}
.arg-comingsoon__mark { color: var(--arg-deep-red); font-size: 22px; transform: rotate(0deg); }
.arg-comingsoon__title { font-family: var(--arg-serif-display); font-size: clamp(34px, 5vw, 52px); font-weight: 600; letter-spacing: .04em; color: #F3EFE8; }
.arg-comingsoon__sub { font-family: var(--arg-serif-display); font-style: italic; font-size: 20px; color: #CFCAC2; max-width: 460px; line-height: 1.45; }

/* =====================================================================
   16. v2.0 — CINEMATIC DESIGN LAYER
   Adds the wide cinematic panels, section-break ornaments, establishing
   bands, and editorial pacing the brief calls for — without disturbing the
   approved palette/mood. All scoped to .arg-scope.
   ===================================================================== */

/* ---- Section-break ornament (diamond + hairlines) --------------- */
.arg-break { display: flex; align-items: center; justify-content: center; gap: 18px; max-width: var(--arg-maxw); margin: 0 auto; padding: 8px 26px; }
.arg-break__line { height: 1px; flex: 1; max-width: 220px; background: linear-gradient(90deg, transparent, rgba(185,154,74,.55)); }
.arg-break__line--r { background: linear-gradient(90deg, rgba(185,154,74,.55), transparent); }
.arg-break__mark { width: 9px; height: 9px; background: var(--arg-deep-red); transform: rotate(45deg); box-shadow: 0 0 12px rgba(154,42,49,.5); flex: none; }
.arg-break--dark .arg-break__mark { box-shadow: 0 0 14px rgba(201,50,43,.6); }

/* ---- Cinematic 16:9 establishing panel (full-bleed image band) --- */
/* Use as a content asset between sections. Holds an <img> (object-fit cover)
   or a styled placeholder. Caption sits bottom-left over a gradient scrim. */
.arg-cine {
  position: relative; width: 100%; overflow: hidden;
  aspect-ratio: 21 / 9; min-height: 320px;
  background: radial-gradient(120% 140% at 50% 0%, #24211D 0%, #131110 45%, #070605 100%);
}
.arg-cine--portrait { aspect-ratio: 16 / 10; }
.arg-cine__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.05) brightness(.9); }
.arg-cine__scrim { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(8,8,8,.45) 0%, transparent 28%, transparent 52%, rgba(7,6,5,.82) 100%),
  radial-gradient(70% 90% at 18% 100%, rgba(122,17,24,.30), transparent 60%); }
.arg-cine__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 14px, transparent 14px 28px); }
.arg-cine__ph span { font-family: var(--arg-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #6E675D; border: 1px dashed #38322B; padding: 9px 16px; }
.arg-cine__cap { position: absolute; left: 0; right: 0; bottom: 0; max-width: var(--arg-maxw); margin: 0 auto; padding: 0 32px 30px; }
.arg-cine__kicker { display: block; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--arg-gold); margin-bottom: 10px; }
.arg-cine__title { display: block; font-family: var(--arg-serif-display); font-weight: 600; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.02; color: #F3EFE8; max-width: 760px; }
.arg-cine__sub { display: block; margin-top: 12px; font-family: var(--arg-serif-display); font-style: italic; font-size: clamp(17px, 2vw, 22px); color: #D7D1C8; max-width: 600px; }

/* ---- Establishing intro band (dark, full-bleed, centered lede) --- */
.arg-establish { position: relative; background: linear-gradient(180deg, #0C0B0A 0%, #141210 100%); color: #ECE6DC; overflow: hidden; }
.arg-establish::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(60% 80% at 50% -10%, rgba(122,17,24,.22), transparent 60%); }
.arg-establish__inner { position: relative; max-width: 900px; margin: 0 auto; padding: 84px 26px; text-align: center; }
.arg-establish__lede { font-family: var(--arg-serif-display); font-size: clamp(24px, 3vw, 36px); line-height: 1.4; font-weight: 500; margin: 0; color: #F1ECE3; }
.arg-establish__lede .arg-accent-red { color: var(--arg-bright-red); }

/* ---- Split editorial row (text + portrait/relic panel) ---------- */
.arg-split { max-width: var(--arg-maxw); margin: 0 auto; padding: 72px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.arg-split--reverse .arg-split__media { order: -1; }
.arg-split__media { position: relative; aspect-ratio: 4/5; background: radial-gradient(80% 90% at 50% 16%, #2A2724, #0C0B0A); border: 1px solid #2C2824; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.arg-split__media img { max-height: 99%; width: auto; filter: contrast(1.06) drop-shadow(0 20px 26px rgba(0,0,0,.6)); }
.arg-split__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 14px, transparent 14px 28px); }
.arg-split__ph span { font-family: var(--arg-mono); font-size: 12px; letter-spacing: .2em; color: #6E675D; border: 1px dashed #38322B; padding: 9px 15px; }
.arg-split__title { font-family: var(--arg-serif-display); font-weight: 600; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; color: var(--arg-ink); margin: 14px 0 0; }
.arg-split__body { font-size: 18.5px; line-height: 1.7; color: #211F1C; margin: 18px 0 0; }
@media (max-width: 860px) { .arg-split { grid-template-columns: 1fr; gap: 26px; } .arg-split--reverse .arg-split__media { order: 0; } }

/* ---- Contrast pass (final) -------------------------------------- */
/* Make the landing hero subtitle and premise sit at a confident contrast. */
.arg-hero__sub { color: #1B1916; }
.arg-page-hero__note { color: #C3BDB2; }
/* Primary CTA: a hair more presence on the misty hero. */
.arg-btn--primary { box-shadow: 0 12px 26px -10px rgba(90,9,14,.85); }
/* Ghost-on-light secondary button readability (brief: "Meet the Dead"). */
.arg-btn--ghost { color: #1A1A1A; border-color: #6E4B1E; font-weight: 500; }
.arg-btn--ghost:hover { color: var(--arg-deep-red); border-color: var(--arg-deep-red); background: rgba(122,17,24,.05); }

/* ---- Cinematic landing hero refinement -------------------------- */
/* Slightly deeper vignette + a faint gold horizon line for filmic depth. */
.arg-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(185,154,74,.4), transparent); z-index: 3; }

@media (max-width: 600px) {
  .arg-cine { aspect-ratio: 4/3; }
  .arg-cine__cap { padding: 0 22px 22px; }
  .arg-establish__inner { padding: 60px 22px; }
}