/* ═══════════════════════════════════════════════════════════════
   THE GRAMMAR PAGE — Premium aesthetic layer
   Scoped to .the-grammar-page body class.
   Extends overview.css — no base rule duplication.
   ═══════════════════════════════════════════════════════════════ */

/* ─ HERO ─────────────────────────────────────────────────────── */

.the-grammar-page .gateway-particles {
    display: none;
}

.the-grammar-page .gateway-hero {
    min-height: 80vh;
    background: linear-gradient(160deg, #06060c 0%, #0e0d14 40%, #171511 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.the-grammar-page .gateway-hero__label {
    font-family: var(--font-important);
    font-size: clamp(0.7rem, 1vw, 0.8rem);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--gold);
    opacity: 0.9;
}

.the-grammar-page .gateway-hero__title {
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    letter-spacing: 0.1em;
    color: var(--ivory);
    text-shadow: 0 0 60px var(--gold-30), 0 0 140px var(--gold-20), 0 0 240px var(--gold-08);
    margin-bottom: var(--spacing-md);
}

/* Lead subtitle — the core pitch */
.the-grammar-page .gateway-hero__subtitle:first-of-type {
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
    font-weight: 400;
    color: var(--gold);
    line-height: 1.75;
    max-width: 600px;
    margin-bottom: var(--spacing-sm);
}

/* Second subtitle — contextual follow-on */
.the-grammar-page .gateway-hero__subtitle {
    max-width: 600px;
    color: var(--ivory-80);
    line-height: 1.8;
    margin-bottom: var(--spacing-sm);
}

.the-grammar-page .gateway-hero__subtitle + .gateway-hero__subtitle {
    margin-top: 0;
}

.the-grammar-page .aum-banner {
    width: 100%;
    background: #000;
    line-height: 0;
}

.the-grammar-page .aum-banner img {
    display: block;
    width: 100%;
    max-height: 800px;
    object-fit: contain;
    object-position: center;
    opacity: 0.9;
}

/* ─ DARK SECTIONS — depth and glow ──────────────────────────── */

.the-grammar-page .gateway-section--dark {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.the-grammar-page .gateway-section--dark::before {
    content: '';
    position: absolute;
    top: -25%;
    left: -10%;
    width: 50%;
    height: 75%;
    background: radial-gradient(ellipse, var(--gold-05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.the-grammar-page .gateway-section--dark .gateway-container {
    position: relative;
    z-index: 1;
}

/* Body text in dark sections: softer than headings for hierarchy */
.the-grammar-page .gateway-section--dark .gateway-section__text {
    color: var(--ivory-85);
}

/* ─ CREAM SECTIONS — warm gradient ──────────────────────────── */

.the-grammar-page .gateway-section--cream {
    background: linear-gradient(150deg, var(--cream) 0%, var(--alabaster) 55%, var(--cream-warm) 100%);
}

/* ─ SECTION HEADER ───────────────────────────────────────────── */

.the-grammar-page .gateway-section__label {
    font-family: var(--font-important);
    font-size: clamp(0.7rem, 1.1vw, 0.8rem);
    letter-spacing: 0.16em;
    margin-bottom: var(--spacing-sm);
    opacity: 0.85;
}

.the-grammar-page .gateway-section--cream .gateway-section__label {
    color: var(--gold-deep);
}

.the-grammar-page .gateway-section--dark .gateway-section__label {
    color: var(--gold);
}

.the-grammar-page .gateway-section__title {
    max-width: 680px;
    margin-bottom: var(--spacing-lg);
    text-wrap: balance;
}

.the-grammar-page .gateway-section--cream .gateway-section__title {
    color: var(--charcoal);
}

/* Why 3 title scaled down — long sentence needs restraint vs. card scale */
.the-grammar-page .gateway-section--why3 .gateway-section__title {
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    margin-bottom: var(--spacing-md);
}

/* ─ PROCESS TITLE — tighter tracking, gold dots ─────────────── */

.the-grammar-page .gateway-section--process .gateway-section__title {
    letter-spacing: 0.1em;
}

.the-grammar-page .aum-dot {
    color: var(--gold);
}

.the-grammar-page .gateway-section--cream .aum-dot {
    color: var(--gold-deep);
}

/* ─ WIDE CARD SECTIONS — wider container for card readability ─── */

.the-grammar-page .gateway-section--why3 .gateway-container,
.the-grammar-page .gateway-section--process .gateway-container,
.the-grammar-page .gateway-section--clients .gateway-container {
    max-width: var(--max-width-wide);
}

/* ─ ARCHETYPE CARDS ──────────────────────────────────────────── */

.the-grammar-page .gateway-archetype {
    padding: var(--spacing-md) var(--spacing-sm-plus);
    transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* Formula — process section: Cinzel display, leads the card */
.the-grammar-page .gateway-section--cream .gateway-archetype__formula {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    letter-spacing: 0.06em;
    text-transform: none;
    font-weight: 400;
    color: var(--gold-deep);
    margin-bottom: var(--spacing-xs-plus);
    display: block;
}

/* Formula — clients section: small label above the name */
.the-grammar-page .gateway-section--dark .gateway-archetype__formula {
    font-family: var(--font-important);
    font-size: clamp(0.65rem, 0.9vw, 0.75rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--spacing-xs-plus);
    display: block;
}

/* Name — process section: sub-processes as secondary label */
.the-grammar-page .gateway-section--cream .gateway-archetype__name {
    font-family: var(--font-important);
    font-size: clamp(0.65rem, 0.85vw, 0.75rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--earth);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
    font-weight: 600;
    word-break: keep-all;
}

/* Name — clients section: the main identifier, Cinzel */
.the-grammar-page .gateway-section--dark .gateway-archetype__name {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    margin-bottom: var(--spacing-xs-plus);
    line-height: var(--leading-snug);
}

/* Dark cards */
.the-grammar-page .gateway-section--dark .gateway-archetype {
    background: var(--white-03);
    border-left-color: var(--gold-30);
    border-top: 1px solid var(--gold-20);
    box-shadow: 0 4px 32px var(--black-20);
}

.the-grammar-page .gateway-section--dark .gateway-archetype:hover {
    border-left-color: var(--gold);
    border-top-color: var(--gold-30);
    background: var(--white-05);
    transform: translateX(4px);
    box-shadow: 0 8px 48px var(--black-30);
}

/* Cream cards */
.the-grammar-page .gateway-section--cream .gateway-archetype {
    background: var(--ivory);
    border-left-color: rgba(122, 101, 32, 0.3);
    border-top: 2px solid rgba(122, 101, 32, 0.2);
    box-shadow: 0 3px 24px var(--black-08);
}

.the-grammar-page .gateway-section--cream .gateway-archetype:hover {
    border-left-color: var(--gold-deep);
    border-top-color: rgba(122, 101, 32, 0.5);
    background: var(--ivory);
    transform: translateX(4px);
    box-shadow: 0 6px 32px var(--black-15);
}

/* Process card body text: slightly lighter than sub-process labels for 3-level hierarchy */
.the-grammar-page .gateway-section--cream .gateway-archetype__text {
    color: var(--earth-light);
}

/* ─ SOURCE CARDS (Why 3) ─────────────────────────────────────── */

.the-grammar-page .gateway-source {
    padding: var(--spacing-md);
    background: var(--ivory);
    border-left: none;
    border-top: 2px solid rgba(122, 101, 32, 0.3);
    box-shadow: 0 3px 20px var(--black-08);
    transition: border-top-color 0.3s ease, box-shadow 0.3s ease;
}

.the-grammar-page .gateway-source:hover {
    border-top-color: var(--gold-deep);
    box-shadow: 0 6px 32px var(--black-15);
}

.the-grammar-page .gateway-source__name {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--gold-deep);
    margin-bottom: var(--spacing-sm);
    display: block;
}

.the-grammar-page .gateway-source__finding {
    display: block;
    color: var(--earth);
    line-height: 1.85;
    font-size: var(--text-sm);
}

/* ─ BURST ────────────────────────────────────────────────────── */

.the-grammar-page .gateway-burst {
    border-left-width: 4px;
    border-left-color: var(--gold);
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-md-plus);
    margin: var(--spacing-xl) 0;
    max-width: 660px;
    text-wrap: balance;
}

/* AUM section — opening paragraph is lead size */
.the-grammar-page .gateway-section--aum .gateway-section__text:first-of-type {
    font-size: var(--text-md);
    color: var(--ivory-80);
}

/* ─ AUM SOMATIC BLOCK ────────────────────────────────────────── */

.the-grammar-page .aum-somatic {
    border-left: 3px solid var(--gold);
    padding: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    max-width: 620px;
}

.the-grammar-page .aum-somatic__entry {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0 var(--spacing-sm);
    align-items: start;
    margin-bottom: var(--spacing-md);
}

.the-grammar-page .aum-somatic__entry:last-child {
    margin-bottom: 0;
}

.the-grammar-page .aum-somatic__letter {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 400;
    color: var(--gold);
    line-height: 1;
    letter-spacing: 0.06em;
    padding-top: 0.1em;
}

.the-grammar-page .aum-somatic__text {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    color: var(--ivory-85);
    line-height: 1.75;
    padding-top: 0.5em;
}

/* ─ FINAL CLOSE ──────────────────────────────────────────────── */

.the-grammar-page .gateway-final {
    border-top: 1px solid var(--gold-20);
    background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 100%);
}

.the-grammar-page .gateway-final__etymology::before {
    content: '';
    display: block;
    width: 36px;
    height: 1px;
    background: var(--gold);
    margin-bottom: var(--spacing-md);
    opacity: 0.7;
}

.the-grammar-page .gateway-final__etymology {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    font-weight: 400;
    line-height: 1.35;
    color: var(--gold);
    letter-spacing: 0.06em;
    margin-bottom: var(--spacing-md-plus);
    max-width: 780px;
    text-wrap: balance;
}

.the-grammar-page .gateway-final__text {
    max-width: 580px;
    color: var(--ivory-70);
    font-size: var(--text-base);
    line-height: 1.9;
    margin-bottom: 0;
}

/* ─ RESPONSIVE ───────────────────────────────────────────────── */

@media (max-width: 768px) {
    .the-grammar-page .gateway-archetype {
        padding: var(--spacing-md);
    }

    .the-grammar-page .gateway-source {
        padding: var(--spacing-md) var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    }

    .the-grammar-page .gateway-burst {
        margin: var(--spacing-lg) 0;
    }

    .the-grammar-page .gateway-section--aum .gateway-burst {
        padding-left: var(--spacing-md);
    }

    .the-grammar-page .gateway-final__etymology {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }

    .the-grammar-page .gateway-section--why3 .gateway-section__title {
        font-size: clamp(1.2rem, 4vw, 1.5rem);
    }
}