@layer layout {
  /* ===================================================
     TGK Site Header System
     Version: 4.0, Responsive Consolidation (2026)

     Scope:
     • Conventional page and episode headers
     • Full-screen home, pillar and series heroes
     • Media-first episode banners
     • Header hierarchy, taglines and metadata
     • Path navigation and mobile back control
     • Responsive portrait and landscape behaviour

     Ownership:
     • This file owns the shared header shell, conventional non-media
       hierarchy typography, metadata, path navigation, seals, wordmarks and
       legacy body.hero-full composition.
     • site-masthead.css owns compact masthead geometry, hero-media geometry,
       scrim variants, home hero overlay composition and masthead responsive
       behaviour.
     • hero-structure.css and hero-typography.css own reusable primitives,
       not page or route composition.
     • Pillar and page styles may set scoped visual variants, but must not
       redefine shared masthead structure or media geometry.

     Source-order contract:
     Keep the sections below in their present order. Compact mastheads,
     media-first headers and responsive rules intentionally share selectors.
     • Theme files provide colour and surface tokens
     • This file controls structure, spacing and typography
     • Hero-media headers and non-media headers remain separate
     • No late declutter overrides or hidden hierarchy levels
     =================================================== */

  /* ===================================================
     Local header tokens
     =================================================== */

  :root {
    --header-content-max: var(--content-max, 1240px);
    --header-gutter: var(--page-gutter, clamp(1rem, 3vw, 2rem));
    --header-rule:
      color-mix(
        in srgb,
        var(--text-accent, #d4af37) 34%,
        transparent
      );
    --header-surface:
      linear-gradient(
        180deg,
        color-mix(
          in srgb,
          var(--bg-primary, #080808) 98%,
          transparent
        ),
        color-mix(
          in srgb,
          var(--bg-secondary, #111111) 92%,
          transparent
        )
      );
    --header-shadow:
      0 12px 32px
      color-mix(
        in srgb,
        var(--bg-primary, #080808) 62%,
        transparent
      );
    --header-title-shadow:
      0 1px 0
      color-mix(
        in srgb,
        var(--highlight, #d4af37) 25%,
        transparent
      ),
      0 5px 16px
      color-mix(
        in srgb,
        var(--shadow-glow, rgba(212, 175, 55, 0.25)) 42%,
        transparent
      );
    --hero-overlay-text: #f2e6cf;
    --hero-overlay-subtext: #f2e6cf;
    --hero-overlay-rule: #d4b06a;
    --hero-overlay-cta-text: #f2e6cf;
    --hero-overlay-cta-border: rgba(216, 181, 111, 0.72);
    --hero-overlay-cta-border-strong: rgba(232, 205, 145, 0.95);
    --hero-overlay-cta-inner-border: rgba(242, 230, 207, 0.18);
    --hero-overlay-cta-inner-shadow:
      inset 0 0 18px rgba(216, 181, 111, 0.08);
    --hero-overlay-shadow-title:
      0 1px 0 rgba(255, 255, 255, 0.05),
      0 2px 8px rgba(0, 0, 0, 0.45);
    --hero-overlay-shadow-copy: 0 2px 10px rgba(0, 0, 0, 0.55);
    --hero-overlay-default:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-primary, #080808) 62%, transparent) 0%,
        color-mix(in srgb, var(--bg-primary, #080808) 28%, transparent) 42%,
        color-mix(in srgb, var(--bg-primary, #080808) 52%, transparent) 100%
      );
    --hero-overlay-bright:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-primary, #080808) 82%, transparent) 0%,
        color-mix(in srgb, var(--bg-primary, #080808) 52%, transparent) 48%,
        color-mix(in srgb, var(--bg-primary, #080808) 68%, transparent) 100%
      );
    --hero-overlay-left-dark:
      linear-gradient(
        90deg,
        color-mix(in srgb, var(--bg-primary, #080808) 86%, transparent) 0%,
        color-mix(in srgb, var(--bg-primary, #080808) 66%, transparent) 42%,
        color-mix(in srgb, var(--bg-primary, #080808) 12%, transparent) 100%
      );
    --hero-overlay-right-dark:
      linear-gradient(
        270deg,
        color-mix(in srgb, var(--bg-primary, #080808) 86%, transparent) 0%,
        color-mix(in srgb, var(--bg-primary, #080808) 66%, transparent) 42%,
        color-mix(in srgb, var(--bg-primary, #080808) 12%, transparent) 100%
      );
    --hero-overlay-bottom-dark:
      linear-gradient(
        0deg,
        color-mix(in srgb, var(--bg-primary, #080808) 86%, transparent) 0%,
        color-mix(in srgb, var(--bg-primary, #080808) 54%, transparent) 46%,
        color-mix(in srgb, var(--bg-primary, #080808) 10%, transparent) 100%
      );
    --hero-overlay-full-dark:
      color-mix(in srgb, var(--bg-primary, #080808) 64%, transparent);
    --hero-overlay-minimal:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-primary, #080808) 34%, transparent) 0%,
        color-mix(in srgb, var(--bg-primary, #080808) 12%, transparent) 50%,
        color-mix(in srgb, var(--bg-primary, #080808) 28%, transparent) 100%
      );
  }

  /* ===================================================
     Ownership: shared header foundations
     =================================================== */

  :where(
    .site-header,
    .site-header *
  ) {
    box-sizing: border-box;
  }

  :where(.site-brand, .main-tagline, .main-tagline-page) {
    background:
      linear-gradient(
        90deg,
        transparent,
        var(--highlight, var(--text-accent)),
        transparent
      );
    -webkit-background-clip: text;
    background-clip: text;
  }

  .site-brand {
    margin: 0 0 var(--space-md, 1.5rem);
    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.4rem);
    line-height: 1.2;
    letter-spacing: var(--type-tracking-eyebrow, 0.12em);
    text-align: center;
    text-transform: uppercase;
    opacity: 0.78;
  }

  /* ===================================================
     Ownership: shared header shell
     =================================================== */

  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header, 3000);
    isolation: isolate;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    background: var(--header-surface);
    border-bottom: 1px solid var(--header-rule);
    box-shadow: var(--header-shadow);

    color: var(--text-primary);
    text-align: center;
  }

  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
      radial-gradient(
        110% 72% at 50% -28%,
        color-mix(
          in srgb,
          var(--highlight) 18%,
          transparent
        ),
        transparent 62%
      );
  }

  .site-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

    height: 1px;
    pointer-events: none;

    background:
      linear-gradient(
        90deg,
        transparent,
        color-mix(
          in srgb,
          var(--text-accent) 46%,
          transparent
        ),
        var(--highlight),
        color-mix(
          in srgb,
          var(--text-accent) 46%,
          transparent
        ),
        transparent
      );
    opacity: 0.62;
  }

  .site-header.pageed,
  .site-header.paged {
    box-shadow:
      0 10px 30px
      color-mix(
        in srgb,
        var(--bg-primary) 58%,
        transparent
      );
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .site-header .header-inner,
  .site-header .header-main {
    width: 100%;
    min-width: 0;
    max-width: var(--header-content-max);
    margin-inline: auto;
  }

  /* ===================================================
     Ownership: conventional hierarchy typography
     =================================================== */

  .site-title,
  .pillar-title,
  .gate-title,
  .series-title,
  .season-title,
  .episode-title,
  .part-title,
  .hero-title {
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .site-header.minimal:not(.with-hero-media) .site-title {
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: var(--type-site-title-size, clamp(0.68rem, 1vw, 0.82rem));
    font-weight: var(--type-weight-semibold, 600);
    line-height: 1.25;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .site-header.minimal:not(.with-hero-media) .pillar-title {
    color: var(--text-secondary);
    opacity: 0.86;
  }

  .site-header.minimal:not(.with-hero-media) .gate-title {
    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3vw, 2.2rem);
    font-weight: var(--type-weight-bold, 700);
    line-height: var(--type-heading-line, 1.08);
    letter-spacing: var(--type-eyebrow-tracking-subtle, 0.08em);
    text-transform: uppercase;
    text-shadow: var(--header-title-shadow);
  }

  .site-header.minimal:not(.with-hero-media) .series-title {
    color: var(--text-accent);
    opacity: 0.92;
  }

  .site-header.minimal:not(.with-hero-media) .season-title {
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: var(--type-season-title-size, clamp(0.88rem, 1.5vw, 1.08rem));
    font-weight: var(--type-weight-semibold, 600);
    line-height: var(--type-eyebrow-line-compact, 1.3);
    letter-spacing: var(--type-eyebrow-tracking-minimal, 0.07em);
    text-transform: none;
    opacity: 0.88;
  }

  .site-header.minimal:not(.with-hero-media) .episode-title {
    color: var(--text-primary);
    font-family: var(--page-title);
    font-size: var(--type-episode-title-size, clamp(1.55rem, 3.6vw, 2.8rem));
    font-weight: var(--type-weight-bold, 700);
    line-height: var(--type-hero-title-line, 1.06);
    letter-spacing: var(--type-hero-title-tracking, 0.025em);
    text-transform: none;
    text-shadow: var(--header-title-shadow);
  }

  .site-header.minimal:not(.with-hero-media) .part-title {
    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: var(--type-part-title-size, clamp(1rem, 1.9vw, 1.35rem));
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: var(--type-tracking-heading, 0.04em);
    text-transform: none;
  }

  .site-header.minimal:not(.with-hero-media) .hero-overlay-top {
    display: grid;
    justify-items: center;

    width: 100%;
  }

  /* Unified mastheads use one explicit rhythm between breadcrumbs and the
     eyebrow/title block. The grid's browser default `normal` gap is larger
     and varies from the editorial masthead spacing. */
  .site-header.minimal.with-masthead-image .header-main {
    display: grid;
    gap: 0;
    row-gap: 0;
  }

  .site-header.minimal:not(.with-hero-media) .hero-title {
    color: var(--text-primary);
  }

  .site-header.minimal:not(.with-hero-media) .hero-subtitle {
    margin:
      clamp(0.4rem, 1.4vw, 0.8rem)
      auto
      0;

    color: var(--text-secondary);
  }

  .site-header.minimal:not(.with-hero-media) .page-tagline,
  .site-header.minimal:not(.with-hero-media) .home-tagline {
    width: min(100%, 52ch);
    margin:
      clamp(0.4rem, 1.4vw, 0.8rem)
      auto
      0;

    color: var(--text-secondary);
    font-family: var(--font-serif, "Libre Baskerville", serif);
    font-size: var(--type-hero-copy-size, clamp(0.98rem, 1.6vw, 1.18rem));
    font-style: italic;
    font-weight: var(--type-weight-regular, 400);
    line-height: var(--type-hero-copy-line, 1.55);
    letter-spacing: var(--type-hero-copy-tracking, 0.01em);
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  /* ===================================================
     Ownership: header metadata and compact-masthead bylines
     =================================================== */

  .page-meta.inline,
  .page-meta.header-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    max-width: 100%;
    margin-top: var(--space-xs, 0.5rem);
    gap: 0.35rem 0.55rem;

    color: var(--text-secondary);
    font-family: var(--font-serif, "Libre Baskerville", serif);
    font-size: var(--type-metadata-size, clamp(0.76rem, 1.2vw, 0.9rem));
    line-height: var(--type-metadata-line, 1.45);
    letter-spacing: 0.015em;
    text-align: center;
    opacity: 0.9;
  }

  .page-meta.header-inline .page-author {
    color: var(--text-accent);
    font-weight: var(--type-weight-semibold, 600);
  }

  .page-meta.header-inline .page-date {
    margin: 0;
    color: var(--text-muted, var(--text-secondary));
    font-style: italic;
  }

  .page-meta.header-inline .meta-sep {
    opacity: 0.5;
  }

  /* Left-align the author/published byline on pages using the compact
     masthead, flush with the article body content below it. Scoped to
     body:has() so pages not yet using the compact masthead keep the
     existing centered byline. */
  body:has(.site-masthead__breadcrumbs) .page-meta.header-inline.page-tabs-meta {
    justify-content: flex-start;
    text-align: left;
    margin-left: 0;
  }

  /* Markdown and Nunjucks pages emit the byline with different wrappers.
     Direct metadata items need the same visible clearance as the legacy
     paragraph-wrapped bylines. */
  body:has(.site-masthead__breadcrumbs) .page-meta.header-inline.page-tabs-meta:has(> .page-author) {
    margin-top: 1.6rem;
  }

  .page-meta.header-inline.page-tabs-meta .page-author + .meta-sep {
    display: none;
  }

  /* ===================================================
     Ownership: legacy breadcrumb suppression
     =================================================== */

  .breadcrumbs,
  .breadcrumb-slot,
  .breadcrumb-compact,
  .breadcrumb-item,
  .breadcrumb-sep,
  .crumbs {
    display: none !important;
  }

  /* ===================================================
     Ownership: header path navigation
     =================================================== */

  .site-header .header-path-actions {
    position: absolute;
    top: max(
      clamp(0.7rem, 1.8vw, 1.2rem),
      env(safe-area-inset-top)
    );
    right: max(
      clamp(0.7rem, 1.8vw, 1.2rem),
      env(safe-area-inset-right)
    );
    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
  }

  .site-header .header-path-back,
  .site-header .header-path-back-mobile,
  .site-header .header-path-forward {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    max-width: min(72vw, 24rem);
    min-height: 2.35rem;
    padding: 0.4rem 0.75rem;

    overflow: hidden;

    color: var(--text-accent);
    background:
      color-mix(
        in srgb,
        var(--bg-primary) 72%,
        transparent
      );
    border:
      1px solid
      color-mix(
        in srgb,
        var(--text-accent) 38%,
        transparent
      );
    border-radius: 999px;

    font-family: var(--font-serif, "Libre Baskerville", serif);
    font-size: clamp(0.78rem, 1.4vw, 0.92rem);
    line-height: 1.2;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;

    box-shadow:
      0 5px 16px
      color-mix(
        in srgb,
        var(--bg-primary) 44%,
        transparent
      );
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    transition:
      color 0.2s ease,
      border-color 0.2s ease,
      background-color 0.2s ease;
  }

  .site-header .header-path-back::before {
    content: "\2190";
    line-height: var(--type-badge-line, 1);
  }

  .site-header .header-path-forward::before {
    content: "\2192";
    line-height: var(--type-badge-line, 1);
  }

  .site-header .header-path-back-mobile {
    display: none;
  }

  .site-header .header-path-back-mobile::before {
    content: none;
  }

  .site-header .header-path-forward {
    display: none !important;
  }

  .site-header .header-path-back:hover,
  .site-header .header-path-back:focus-visible,
  .site-header .header-path-back-mobile:hover,
  .site-header .header-path-back-mobile:focus-visible,
  .site-header .header-path-forward:hover,
  .site-header .header-path-forward:focus-visible {
    color: var(--highlight);
    border-color:
      color-mix(
        in srgb,
        var(--highlight) 58%,
        transparent
      );
  }

  .site-header .header-path-back:focus-visible,
  .site-header .header-path-back-mobile:focus-visible,
  .site-header .header-path-forward:focus-visible {
    outline: 2px solid var(--highlight);
    outline-offset: 3px;
  }

  /* ===================================================
     Ownership: header seals and wordmarks
     =================================================== */

  .site-header .header-seal {
    display: flex;
    align-items: center;
    justify-content: center;

    margin:
      var(--space-xs, 0.5rem)
      auto;
  }

  .site-header .header-seal img {
    display: block;
    width: clamp(5rem, 10vw, 8rem);
    height: auto;

    filter:
      drop-shadow(
        0 6px 14px
        color-mix(
          in srgb,
          var(--shadow-glow) 56%,
          transparent
        )
      );
  }

  .site-header .home-lockup,
  .site-header .pillar-lockup {
    padding: 0;
    text-align: center;
  }

  .site-header .home-logo {
    display: flex;
    justify-content: center;
    margin:
      var(--space-sm, 1rem)
      auto
      var(--space-xs, 0.5rem);
  }

  .site-header .series-wordmark {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: var(--space-xs, 0.5rem);
  }

  .site-header .series-wordmark img {
    display: block;
    width: clamp(20rem, 62vw, 48.75rem);
    max-width: 100%;
    height: auto;
    margin:
      0
      auto
      calc(var(--space-2xs, 0.25rem) * 0.75);

    filter:
      drop-shadow(
        0 7px 15px
        color-mix(
          in srgb,
          var(--shadow-glow) 58%,
          transparent
        )
      );

    transition:
      filter 0.25s ease,
      transform 0.25s ease;

    animation:
      tgk-wordmark-float
      8s
      ease-in-out
      infinite;
  }

  .site-header .series-wordmark:hover img {
    transform: translateY(-2px) scale(1.01);
  }

  .site-header .wordmark-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  @keyframes tgk-wordmark-float {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-1px);
    }
  }

  @supports (-webkit-touch-callout: none) {
    .site-header .series-wordmark img {
      display: none !important;
    }

    .site-header .wordmark-text {
      position: static !important;

      display: inline-block !important;

      width: auto !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
      clip: auto !important;
      border: 0 !important;

      color: var(--text-accent);
      font-family: var(--font-display);
      font-size: clamp(1.1rem, 3.5vw, 2rem);
      font-weight: var(--type-weight-bold, 700);
      line-height: var(--type-ui-control-line, 1.1);
      letter-spacing: var(--type-pillar-title-tracking, 0.18em);
      text-transform: uppercase;
      text-shadow: var(--header-title-shadow);
    }
  }

  /* ===================================================
     Ownership: landing lockup typography
     =================================================== */

  .main-logo {
    margin:
      1rem
      0
      0.5rem;

    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, var(--font-size-logo, 2rem));
    line-height: 1.05;
    letter-spacing: var(--type-breadcrumb-tracking-masthead, 0.06em);
    text-align: center;
    text-transform: uppercase;
    text-shadow: var(--header-title-shadow);
  }

  .main-tagline {
    width: min(100%, 44ch);
    margin:
      0
      auto
      var(--space-lg, 3rem);

    color: var(--text-accent);
    font-family: var(--font-serif, "Libre Baskerville", serif);
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-style: italic;
    line-height: var(--type-hero-copy-line, 1.55);
    text-align: center;
    opacity: 0.88;
  }

  .main-logo-page {
    margin:
      1rem
      0
      0.5rem;

    color: var(--text-accent);
    font-family: var(--font-serif, "Libre Baskerville", serif);
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: var(--type-breadcrumb-tracking-masthead, 0.06em);
    text-align: center;
    text-transform: uppercase;
  }

  .main-tagline-page {
    margin:
      0
      0
      var(--space-lg, 3rem);

    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, var(--font-size-logo, 2rem));
    line-height: var(--type-panel-heading-line, 1.15);
    text-align: center;
    opacity: 0.86;
  }

  .site-header .home-title {
    margin:
      0
      0
      var(--space-xs, 0.5rem);

    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.8vw, 1.9rem);
    font-weight: 650;
    line-height: var(--type-heading-line, 1.08);
    letter-spacing: var(--type-pillar-title-tracking, 0.18em);
    text-transform: uppercase;
    text-shadow: var(--header-title-shadow);
  }

  .site-header .home-tagline {
    width: min(100%, 42ch);
    margin:
      clamp(0.7rem, 2vw, 1.2rem)
      auto
      clamp(1rem, 2.6vw, 1.6rem);

    color: var(--strong-text, var(--text-accent));
    font-family: var(--font-serif, "Libre Baskerville", serif);
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    font-style: italic;
    font-weight: var(--type-weight-semibold, 600);
    line-height: var(--type-hero-copy-line, 1.55);
    letter-spacing: 0.012em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .page-tagline {
    width: min(100%, 52ch);
    margin:
      var(--space-md, 1.5rem)
      auto;

    color: var(--text-secondary);
    font-family: var(--font-serif, "Libre Baskerville", serif);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-style: italic;
    line-height: var(--type-copy-line, 1.6);
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
    opacity: 0.92;
  }

  /* ===================================================
     Ownership: supporting header elements
     =================================================== */

  .header-link {
    position: relative;
    z-index: 3;

    padding:
      var(--space-sm, 1rem)
      var(--space-md, 1.5rem);

    background: none;
    line-height: 1.2;
    text-align: center;
  }

  .header-link:hover {
    text-decoration: underline;
  }

  .hero-header {
    position: relative;
    min-height: 32vh;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .highlight {
    color: var(--highlight);
    font-weight: var(--type-weight-bold, 700);
  }

  .sub-heading {
    margin:
      var(--space-lg, 3rem)
      0
      var(--space-sm, 1rem);

    color: var(--text-accent);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    line-height: 1.25;
  }

  .index-tagline {
    width: min(100%, 60ch);
    margin:
      0
      auto
      var(--space-sm, 1rem);

    color: var(--text-muted, var(--text-secondary));
    font-family: var(--font-serif, "Libre Baskerville", serif);
    font-size: clamp(0.82rem, 1.3vw, 0.95rem);
    line-height: var(--type-copy-line, 1.6);
    letter-spacing: var(--type-tracking-heading, 0.04em);
    text-align: center;
    opacity: 0.9;
  }

  .index-heading {
    width: min(100%, 72ch);
    margin:
      var(--space-sm, 1rem)
      auto
      var(--space-lg, 3rem);

    color: var(--text-accent);
    font-family: var(--font-serif, "Libre Baskerville", serif);
    font-size: var(--type-index-heading-size, clamp(0.95rem, 1.6vw, 1.35rem));
    font-style: italic;
    font-weight: var(--type-weight-regular, 400);
    line-height: var(--type-index-heading-line, 1.7);
    letter-spacing: 0.015em;
    text-align: center;
    text-shadow:
      0 0 6px
      color-mix(
        in srgb,
        var(--shadow-glow) 42%,
        transparent
      );
  }

  .index-hero,
  .pillar-header,
  .teachings-index-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    gap: var(--space-sm, 1rem);

    margin:
      var(--space-md, 1.5rem)
      0;
    padding:
      var(--space-sm, 1rem)
      0
      var(--space-xs, 0.5rem);
  }

  /* ===================================================
     Ownership: full-screen landing composition
     =================================================== */

  body.hero-full .site-header.minimal {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    height: 100vh;
    height: 100svh;
    height: 100dvh;

    margin: 0;
    padding: 0;

    overflow: hidden;
  }

  body.hero-full .site-header.minimal .header-main {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
  }

  body.hero-full .site-header .header-seal img {
    width: clamp(11rem, 36vw, 32rem);
    max-height: none;
  }

  body.hero-full .site-header .series-wordmark img {
    width: clamp(18rem, 60vw, 48rem);
    max-height: 17vh;
  }

  /* ===================================================
     Ownership: tablet responsive composition
     =================================================== */

  @media (max-width: 1024px) {
    .site-header.minimal:not(.with-hero-media):not(:has(.site-masthead__breadcrumbs)) {
      padding-top: clamp(1.25rem, 4vw, 1.8rem);
    }
  }

  /* ===================================================
     Ownership: mobile responsive composition
     =================================================== */

  @media (max-width: 768px) {
    :root {
      --header-gutter: 1rem;
    }

    .site-header {
      position: relative;
    }

    .site-header.minimal:not(.with-hero-media)
    .site-title {
      font-size: var(--type-form-requirement-size, 0.66rem);
      letter-spacing: 0.17em;
    }

    .site-header.minimal:not(.with-hero-media)
    .season-title {
      font-size: clamp(0.8rem, 3.4vw, 0.95rem);
    }

    .site-header.minimal:not(.with-hero-media)
    .episode-title {
      font-size: var(--type-hero-title-size-compact-mobile, clamp(1.35rem, 7vw, 2rem));
      line-height: var(--type-hero-title-line-compact-mobile, 1.08);
    }

    .site-header.minimal:not(.with-hero-media)
    .part-title {
      font-size: clamp(0.92rem, 4.2vw, 1.12rem);
    }

    .site-header.minimal:not(.with-hero-media)
    :where(.page-tagline, .home-tagline) {
      width: min(100%, 42ch);
      font-size: var(--type-hero-copy-size-mobile, clamp(0.95rem, 4vw, 1.08rem));
      line-height: var(--type-hero-copy-line-mobile, 1.5);
    }

    .site-header .header-path-actions {
      top: max(0.65rem, env(safe-area-inset-top));
      right: max(0.65rem, env(safe-area-inset-right));
    }

    .site-header .header-path-back {
      display: none !important;
    }

    .site-header .header-path-back-mobile {
      display: inline-flex;

      width: 2.65rem;
      height: 2.65rem;
      min-height: 0;
      padding: 0;

      font-size: var(--font-size-nav, 1.1rem);
    }

    .site-header:not(.with-hero-media)
    .header-path-actions {
      position: static;

      flex-flow: row wrap;
      align-items: center;
      justify-content: center;

      width: 100%;
      margin-top: 0.5rem;
    }

    .site-header:not(.with-hero-media)
    :where(
      .header-path-back,
      .header-path-back-mobile,
      .header-path-forward
    ) {
      max-width: min(46vw, 11rem);
    }

    body.hero-full .site-header.minimal {
      min-height: 100svh;
      height: 100svh;
    }

    body.hero-full .site-header .header-seal img {
      width: clamp(10rem, 58vw, 22rem);
    }

    body.hero-full .site-header .series-wordmark img {
      width: min(88vw, 34rem);
      max-height: 15vh;
    }
  }

  /* ===================================================
     Ownership: narrow-mobile responsive composition
     =================================================== */

  @media (max-width: 420px) {
    .site-header.minimal:not(.with-hero-media) {
      padding-inline: 0.85rem;
    }

    .site-header.minimal:not(.with-hero-media)
    .site-title {
      font-size: 0.62rem;
    }

    .site-header.minimal:not(.with-hero-media)
    .season-title {
      font-size: var(--type-eyebrow-size-emphasis, 0.78rem);
    }

    .site-header.minimal:not(.with-hero-media)
    .episode-title {
      font-size: var(--type-hero-title-size-compact-narrow, clamp(1.2rem, 7.2vw, 1.7rem));
    }

    .site-header.minimal:not(.with-hero-media)
    .part-title {
      font-size: var(--type-card-desc-size-compact, 0.9rem);
    }

    .site-header.minimal:not(.with-hero-media)
    :where(.page-tagline, .home-tagline) {
      font-size: var(--type-hero-copy-size-narrow, 0.92rem);
      line-height: var(--type-hero-copy-line-narrow, 1.48);
    }

    .page-meta.inline,
    .page-meta.header-inline {
      font-size: var(--type-eyebrow-size, 0.74rem);
    }
  }

  /* ===================================================
     Ownership: landscape-phone responsive composition
     =================================================== */

  @media (max-height: 540px) and (orientation: landscape) {
    body.hero-full .site-header.minimal {
      min-height: 100dvh;
      height: 100dvh;
    }

    body.hero-full .site-header .header-seal img {
      width: clamp(8rem, 30vw, 18rem);
    }

    body.hero-full .site-header .series-wordmark img {
      width: min(48vw, 22rem);
      max-height: 20vh;
    }
  }

  /* ===================================================
     Ownership: reduced-motion behaviour
     =================================================== */

  @media (prefers-reduced-motion: reduce) {
    .site-header .series-wordmark img {
      animation: none;
    }

    .site-header .series-wordmark img,
    .site-header .header-path-back,
    .site-header .header-path-back-mobile,
    .site-header .header-path-forward {
      transition: none;
    }

    .site-header .series-wordmark:hover img {
      transform: none;
    }
  }
}