@layer layout {
  /* ===================================================
     TGK Page Structure and Containers
     Version: 3.1, fully responsive consolidation (2026)

     Ownership:
     • This file owns content containers, readable columns, page flow and
       responsive page spacing.
     • site-header.css owns shared header composition; site-masthead.css owns
       masthead media composition; layout-grid.css owns card grid geometry;
       page files own route-specific presentation.

     Goals:
     • Preserve the existing public class contract
     • Separate page structure from readable content width
     • Keep landing-page presentation out of episode pages
     • Scale typography, spacing and media across all viewports
     • Keep page-level overrides easy and predictable
     =================================================== */

  :root {
    /* Sticky header height plus breathing room for anchored content. */
    --scroll-offset: 120px;

    /* Maximum width for general site content. */
    --content-max: 1100px;

    /* Shared responsive page gutters. */
    --page-gutter: var(--space-md, 1.5rem);

    /* Site watermark, kept behind content and separate from page artwork. */
    --site-watermark-opacity: 0.03;
    --site-watermark-size: min(58vw, 620px);
  }

  @media (min-width: 1024px) {
    :root {
      --content-max: 1240px;
    }
  }

  /* Tablet band (iPad portrait/landscape and similar): the content
     container otherwise inherits the desktop gutter, which reads as
     edge-to-edge on these widths. Give it more inset without touching
     the phone (<=768px) or desktop (>=1200px) gutters. */
  @media (min-width: 769px) and (max-width: 1199px) {
    :root {
      --page-gutter: 2.25rem;
    }
  }

  @media (max-width: 768px) {
    :root {
      --scroll-offset: 96px;
      --page-gutter: var(--space-sm, 1rem);
    }
  }

  @media (max-width: 420px) {
    :root {
      --scroll-offset: 84px;
      --page-gutter: 0.85rem;
    }
  }

  /* ===================================================
     Document foundation
     =================================================== */

  html {
    min-height: 100%;
    scroll-behavior: auto;
    scroll-padding-top: var(--scroll-offset);
    overflow-x: clip;
  }

  body {
    min-height: 100%;
    margin: 0;
    position: relative;
    isolation: isolate;
    color: var(--text-primary, #eaeaea);
    background: var(--bg-primary, #080808);
    overflow-wrap: break-word;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  img,
  picture,
  video,
  canvas {
    height: auto;
  }

  .template-base {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    color: var(--text-primary, #eaeaea);
    background: transparent;
  }

  /* ===================================================
     Background painter
     =================================================== */

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--bg-opacity, 1);
    background:
      var(--overlay-bg-gradient, var(--bg-gradient, none)),
      var(--overlay-img, none);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--site-watermark-opacity, 0.12);
    background-image: url("/static/assets/tgk-emblem-variations/tgk-watermark.7e66ce1c99.png");
    background-size: var(--site-watermark-size, min(58vw, 620px));
    background-position: center;
    background-repeat: no-repeat;
  }

  html[data-theme="dark"] {
    --site-watermark-opacity: 0.045;
  }

  html[data-theme="dark"] body::after {
    background-image: url("/static/assets/tgk-emblem-variations/tgk-watermark.7e66ce1c99.png");
    filter: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(520%) hue-rotate(2deg) brightness(96%) contrast(88%);
  }

  @media (max-width: 768px) {
    :root {
      --site-watermark-size: min(88vw, 420px);
    }
  }

  .site-header,
  .site-main,
  .site-footer {
    position: relative;
    z-index: 1;
  }

  /* ===================================================
     Core page structure
     =================================================== */

  .site-main {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding-block: var(--space-vs, 0.5rem);
    line-height: var(--font-base-line);
  }

  .content-container {
    width: 100%;
    min-width: 0;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
    line-height: inherit;
  }

  /* A nested content container should not acquire a second width limit. */
  .site-main .content-container .content-container {
    max-width: none;
    padding-inline: 0;
  }

  @media (max-width: 768px) {
    .site-main {
      padding-block: 0;
    }
  }

  /* Batch 4A: removed the confirmed-dead "Landing-page introductions"
     .page-intro rule family (base rule, child-combinator spacing,
     .page-title/.index-heading overrides, the body.home/.is-landing
     left-aligned variant, and its two dedicated @768px/@420px queries) —
     .page-intro has no live template, JS or built-output reference
     anywhere in the repository. The live .page-title and .index-heading
     implementations and their dedicated tokens are unaffected. */

  /* ===================================================
     Reusable section block
     =================================================== */

  :where(.section-block) {
    width: 100%;
    min-width: 0;
    margin: clamp(2rem, 5vw, var(--space-lg, 3rem)) 0;
    padding:
      clamp(1rem, 2.5vw, var(--space-md, 1.5rem))
      clamp(1.25rem, 4vw, var(--space-lg, 3rem));
  }

  /* Episode and part pages use the compact masthead. Their section blocks
     sit inside the shared content container already, so a second horizontal
     inset makes the reading column narrower than the landing-page column. */
  body:has(.site-masthead__breadcrumbs) .main-content .section-block {
    padding-inline: 0;
  }

  @media (max-width: 768px) {
    :where(.section-block) {
      margin-block: clamp(1.5rem, 6vw, 2.25rem);
      padding: var(--space-md, 1.5rem) 1.35rem;
    }

    /* Full-bleed section blocks belong to landing pages only. */
    :where(body.home, body.is-landing:not(.admin)) .section-block {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      border-radius: 0;
    }

    :where(body.home, body.is-landing:not(.admin)) .section-block p,
    :where(body.home, body.is-landing:not(.admin)) .section-block li,
    :where(body.home, body.is-landing:not(.admin)) .section-block .section-subtitle {
      line-height: var(--type-body-line, 1.85);
    }
  }

  @media (max-width: 420px) {
    :where(.section-block) {
      padding-inline: 1rem;
    }
  }

  /* ===================================================
     Charts
     =================================================== */

  .chart-wrapper {
    width: 100%;
    min-width: 0;
    height: clamp(360px, 42vw, 500px);
    max-height: 90vh;
    margin: clamp(1.75rem, 5vw, var(--space-lg, 3rem)) auto;
    overflow: hidden;
  }

  .chart-wrapper canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    outline: none;
  }

  .chart-caption {
    max-width: 70ch;
    margin: var(--space-md, 1.5rem) auto 0;
    color: var(--text-secondary);
    font-size: clamp(0.88rem, 1.4vw, var(--font-base-size));
    line-height: 1.55;
    text-align: center;
  }

  @media (max-width: 768px) {
    .chart-wrapper {
      height: clamp(280px, 75vw, 420px);
      margin-block: var(--space-md, 1.5rem);
    }
  }

  @media (max-width: 420px) {
    .chart-wrapper {
      height: 280px;
    }

    .chart-caption {
      font-size: var(--font-size-vs, 0.8rem);
      line-height: 1.5;
    }
  }

  /* ===================================================
     Section headings
     =================================================== */

  :where(.section-heading) {
    display: block;
    max-width: 100%;
    margin:
      clamp(2rem, 5vw, 4rem)
      0
      clamp(1rem, 2.5vw, 1.75rem);
    padding: 0;
    border: 0;

    color: var(--text-primary);
    text-align: left;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  /* Decorative pseudo-elements are retained for legacy variants. */
  :where(.section-heading)::before,
  :where(.section-heading)::after {
    content: "";
    display: none;
  }

  @media (max-width: 768px) {
    :where(.section-heading) {
      margin:
        clamp(1.5rem, 6vw, 2.5rem)
        0
        clamp(0.85rem, 4vw, 1.25rem);
      padding: 0;
    }
  }

  /* Editorial headings apply only to the home page and landing pages.
     Authentication status alone must never define page presentation.
     (This selector previously duplicated the base .section-heading rule
     above in full; that duplication was removed in Batch 2B.1 since every
     value was byte-identical to the base rule, which already applies to
     these same elements — only the pseudo-element suppression below is
     genuinely unique to this context.) */
  :where(
    body.home,
    body.is-landing:not(.admin):not(.community)
  )
    .main-content
    .section-heading::before,
  :where(
    body.home,
    body.is-landing:not(.admin):not(.community)
  )
    .main-content
    .section-heading::after {
    content: none;
  }

  /* Section-block headings share the compact editorial treatment used by the
     current landing-page section headers. This follows the landing overrides
     so the pattern is consistent on public and internal landing pages. */
  .main-content .section-block > .section-heading {
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
  }

  /* Long-form reading copy is eased back slightly from the full interface
     contrast. This keeps headings, cards and metadata crisp while reducing
     the perceived weight of dense editorial paragraphs. */
  .main-content .content-container > .section-block > :is(p, ul, ol) {
    color: color-mix(in srgb, var(--text-primary) 88%, var(--bg-primary));
  }

  /* ===================================================
     Editorial emphasis
     =================================================== */

  :where(.main-content, .legal-library) strong {
    color: var(--strong-text, var(--text-accent));
    font-family: var(--font-serif);
    font-weight: var(--type-weight-semibold, 600);
    letter-spacing: 0.3px;
  }

  /* ===================================================
     Threshold and supporting text
     Batch 4D: removed the confirmed-dead .welcome-text and .door-callout
     rules (base and both responsive tiers) — zero live template, JS or
     built-output reference for either selector (see the Batch 4C audit).
     =================================================== */

  :where(.section-subtitle) {
    max-width: 100%;
    margin: -0.5rem 0 var(--space-lg, 3rem);
    color: var(--text-primary);
    font-family: var(--type-body-font, var(--font-serif));
    font-size: clamp(0.95rem, 1.5vw, var(--font-size-sm, 1rem));
    font-weight: var(--type-weight-regular, 400);
    line-height: var(--type-body-line, var(--font-base-line));
    text-align: left;
    overflow-wrap: anywhere;
  }

  :where(.dossier-date-tagline) {
    max-width: 100%;
    margin: -0.5rem 0 var(--space-lg, 3rem);
    color: var(--text-accent);
    font-family: var(--type-body-font, var(--font-serif));
    font-size: clamp(0.95rem, 1.6vw, var(--font-size-md));
    font-weight: var(--type-weight-regular, 400);
    line-height: var(--type-body-line, var(--font-base-line));
    text-align: center;
    overflow-wrap: anywhere;
  }

  @media (max-width: 768px) {
    :where(.section-subtitle),
    :where(.dossier-date-tagline) {
      margin:
        -0.25rem
        0
        var(--space-md, 1.5rem);
      font-size: var(--type-lead-compact-size, clamp(0.95rem, 4vw, 1.05rem));
      line-height: var(--type-lead-compact-line, 1.6);
    }
  }

  /* ===================================================
     Page title block
     =================================================== */

  :where(.page-title-block) {
    width: 100%;
    max-width: 960px;
    margin: var(--space-md, 1.5rem) auto;
    padding-inline: var(--page-gutter);
    text-align: center;
  }

  :where(.page-title) {
    max-width: 100%;
    margin:
      clamp(1.5rem, 5vw, var(--space-lg, 3rem))
      0
      var(--space-md, 1.5rem);

    color: var(--text-accent);
    font-family: var(--page-title);
    font-size: var(--type-page-title-size-desktop, clamp(2rem, 4.5vw, var(--font-size-xl)));
    font-weight: var(--type-weight-bold, 700);
    line-height: var(--type-page-title-line, 1.1);
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  :where(.page-title)::after {
    content: "";
    display: block;
    width: clamp(48px, 8vw, 60px);
    height: 2px;
    margin: var(--space-sm, 1rem) auto 0;
    background: var(--highlight);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--shadow-glow);
  }

  @media (max-width: 768px) {
    :where(.page-title-block) {
      margin-block: var(--space-sm, 1rem);
    }

    :where(.page-title) {
      margin:
        var(--space-md, 1.5rem)
        0
        var(--space-sm, 1rem);
      font-size: var(--type-page-title-size, clamp(1.8rem, 8vw, 2.6rem));
      line-height: var(--type-page-title-line, 1.1);
    }

    :where(.page-title)::after {
      margin-top: 0.75rem;
    }
  }

  @media (max-width: 420px) {
    :where(.page-title) {
      font-size: clamp(1.55rem, 9vw, 2.1rem);
      line-height: 1.12;
    }
  }

  /* ===================================================
     Full-screen centring utility
     =================================================== */

  .centre-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--page-gutter);
  }

  @media (max-width: 600px) {
    .centre-wrapper {
      align-items: flex-start;
    }
  }

  /* ===================================================
     Footnotes
     =================================================== */

  :where(.footnote) {
    max-width: 100%;
    margin-top: 1rem;
    padding-left: 1rem;
    border-left:
      2px solid
      var(--accent-obsidian, var(--text-accent));

    color: var(--text-secondary);
    font-size: clamp(0.8rem, 1.3vw, 0.85rem);
    font-style: italic;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  @media (max-width: 600px) {
    :where(.footnote) {
      padding-left: 0.75rem;
      font-size: 0.8rem;
    }
  }

  /* ===================================================
     Accessibility
     =================================================== */

  .skip-link {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .skip-link:focus {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top));
    left: max(1rem, env(safe-area-inset-left));
    z-index: 9999;

    width: auto;
    max-width: calc(100vw - 2rem);
    height: auto;
    padding: 0.5rem 0.75rem;
    overflow: visible;

    color: var(--text-primary);
    background: var(--highlight);
    border:
      1px solid
      color-mix(
        in srgb,
        var(--text-accent) 45%,
        transparent
      );
    border-radius: 0.5rem;
    box-shadow:
      0 0 0 2px
      color-mix(
        in srgb,
        var(--bg-primary) 65%,
        transparent
      );

    line-height: 1.3;
    text-decoration: none;
  }

  /* ===================================================
     Legal library
     =================================================== */

  .legal-library {
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    color: var(--text-primary);
    line-height: 1.7;
  }

  .legal-library .section-subheading {
    max-width: 100%;
    margin-top: 2rem;
    color: var(--highlight);
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  /* Legal-policy section labels follow the standard page-heading face. */
  .legal-library-content .section-subheading {
    font-family: var(--page-title, "Cinzel Decorative", serif);
    letter-spacing: 0;
  }

  @media (max-width: 768px) {
    .legal-library {
      padding-inline: var(--page-gutter);
    }

    .legal-library .section-subheading {
      margin-top: 1.5rem;
    }
  }

  /* ===================================================
     Reduced motion and rendering safety
     =================================================== */

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
  
}