/* styles/layout.css — Page shell: header, navigation, footer, containers and grids.
   Extracted from the former single-file monolith. */

.container { width: min(var(--content-wide), 100% - var(--space-8)); margin-inline: auto; }

.container--narrow { width: min(var(--content-narrow), 100% - var(--space-8)); margin-inline: auto; }

.container--default { width: min(var(--content-default), 100% - var(--space-8)); margin-inline: auto; }

/* ─── HEADER / NAV ───────────────────────────────────────── */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding-block: var(--space-4);
      border-bottom: 1px solid transparent;
      transition: background var(--transition), border-color var(--transition), backdrop-filter var(--transition);
    }

.site-header.scrolled {
      background: rgba(10, 9, 8, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-color: var(--color-border);
    }

.nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-6);
    }

.nav-logo {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      line-height: 1;
    }

.nav-logo .wordmark {
      font-family: var(--font-display);
      font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.1rem);
      font-weight: 500;
      letter-spacing: 0.12em;
      color: var(--color-text);
      text-transform: uppercase;
    }

.nav-logo .sub-wordmark {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      letter-spacing: 0.25em;
      color: var(--color-gold);
      text-transform: uppercase;
      white-space: nowrap;
    }

.nav-links {
      display: flex;
      list-style: none;
      gap: var(--space-6);
      align-items: center;
    }

.nav-links a {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      transition: color var(--transition);
    }

.nav-links a:hover { color: var(--color-gold); }

.nav-links .nav-cta {
      font-size: var(--text-xs);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      padding: var(--space-2) var(--space-5);
      border: 1px solid var(--color-gold-dim);
      color: var(--color-gold);
      border-radius: 0;
      transition: background var(--transition), border-color var(--transition), color var(--transition);
    }

.nav-links .nav-cta:hover { background: var(--color-gold); color: var(--color-bg); border-color: var(--color-gold); }

.nav-menu-btn {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: var(--space-2);
      cursor: pointer;
    }

.nav-menu-btn span {
      display: block;
      width: 24px;
      height: 1px;
      background: var(--color-text);
      transition: transform var(--transition), opacity var(--transition);
    }

.nav-menu-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }

.nav-menu-btn.open span:nth-child(2) { opacity: 0; }

.nav-menu-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(10,9,8,0.98);
      z-index: 99;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-8);
    }

.mobile-nav.open { display: flex; }

.mobile-nav a {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 300;
      letter-spacing: 0.05em;
      color: var(--color-text);
      transition: color var(--transition);
    }

.mobile-nav a:hover { color: var(--color-gold); }

.mobile-nav .close-nav {
      position: absolute;
      top: var(--space-6);
      right: var(--space-6);
      font-size: var(--text-2xl);
      color: var(--color-text-muted);
    }

/* ─── SECTION DIVIDER ────────────────────────────────────── */
    .section-divider {
      display: flex;
      align-items: center;
      gap: var(--space-6);
      margin-bottom: var(--space-12);
    }

.section-divider::before, .section-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--color-border);
    }

.section-label {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--color-gold);
      white-space: nowrap;
    }

.section-heading {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: 300;
      line-height: 1.05;
      color: var(--color-text);
      margin-bottom: var(--space-6);
    }

.section-heading em { font-style: italic; color: var(--color-gold-light); }

.section-intro {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      line-height: 1.8;
      margin-bottom: var(--space-12);
    }

/* ─── FOOTER ─────────────────────────────────────────────── */
    .site-footer {
      background: var(--color-surface);
      border-top: 1px solid var(--color-border);
      padding-block: var(--space-12);
    }

/* ─── (old loader-bar / barSlide removed) ─── */

    

    .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.nav-logo-img { border-radius: 50%; display: block; width: 44px; height: 44px; object-fit: cover; flex-shrink: 0; }

.nav-logo-text { display: flex; flex-direction: column; }

@media (max-width: 480px) {
      .nav-logo-img { width: 36px; height: 36px; }
      .player-logo { padding: 0 var(--space-2) 0 var(--space-3); }
      .player-logo img { width: 30px; height: 30px; }
    }

/* ══ Phase 4 — The Elder King Latham's World ════════════════ */

    /* ── P1: Mobile Header Fix — full slogan, compact height ── */

    /* Tighten header padding across all sizes */
    .site-header { padding-block: var(--space-3); }

/* Section divider — more elegant */
    .section-divider {
      display: flex;
      align-items: center;
      gap: var(--space-5);
      margin-bottom: var(--space-12);
    }

.section-divider::before,
    .section-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(201,168,76,0.2), transparent);
    }

.section-label {
      font-family: var(--font-body);
      font-size: 0.6rem;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: var(--color-gold);
      padding: 0 var(--space-3);
      white-space: nowrap;
    }

/* ── Section divider — gold gradient lines ── */
    .section-divider::before,
    .section-divider::after {
      background: linear-gradient(to right, transparent, rgba(212,174,82,0.25), transparent) !important;
    }

/* ── Typography — warmer, more breathing room ── */
    .section-heading {
      line-height: 1.08;
      letter-spacing: -0.01em;
    }