/* ═══════════════════════════════════════════════════════════════
   PAGE-HERO: DARK BANNER
   terraforms.css has .page-hero.banner--teal and .page-hero.banner--purple
   but no --dark variant, so the base cream background wins without this.
   ═══════════════════════════════════════════════════════════════ */

.page-hero.banner--dark {
    background: var(--banner-dark);
}
.page-hero.banner--dark .page-hero__label {
    color: var(--gold-pale);
}
.page-hero.banner--dark .page-hero__title {
    color: var(--gold);
}
.page-hero.banner--dark .page-hero__subtitle {
    color: var(--linen-90);
}
.page-hero.banner--dark .page-hero__subtitle strong {
    color: var(--cream);
}


/* ═══════════════════════════════════════════════════════════════
   DARK CARD LEGIBILITY
   Global rule: strong { color: var(--black) } kills readability
   inside the dark teacher-full-card. Override here at higher specificity.
   ═══════════════════════════════════════════════════════════════ */

.teacher-full-card strong,
.teacher-full-card .teacher-full-card__details strong {
    color: var(--gold-pale);
}


/* ═══════════════════════════════════════════════════════════════
   THESIS-CONTENT ALIGNMENT
   Global rule uses margin: 0 auto which centres the narrow block,
   creating a left-edge gap vs section headings. Left-align on these pages.
   ═══════════════════════════════════════════════════════════════ */

.teachers-grid-section .thesis-content,
.tf-section .thesis-content {
    max-width: var(--max-width-narrow);
    margin-left: 0;
    margin-right: 0;
}


/* ═══════════════════════════════════════════════════════════════
   FAILURE-WHY LABEL COLOUR
   [class*="-card"] p { color: var(--deep-earth) } at specificity (0,1,1)
   overrides .failure-why { color: var(--burgundy) } at (0,1,0).
   Raise specificity to (0,2,0) to restore the intended burgundy label.
   ═══════════════════════════════════════════════════════════════ */

.failure-card .failure-why {
    color: var(--burgundy);
}


/* TF Card Variant: Definition */
.tf-card--definition {
    padding: var(--card-padding-lg);
    background: rgba(196, 168, 85, 0.04);
    border: 1px solid rgba(196, 168, 85, 0.25);
    border-top: 2px solid var(--gold);
}

.tf-card--definition .tf-card__title {
    font-size: var(--text-xl);
    margin-bottom: var(--spacing-sm);
}

.tf-card--definition .tf-card__text {
    max-width: var(--measure);
}

/* TF Card Variant: Stat */
.tf-card--stat {
    /* text-align removed for left justification */
}

/* TF Card Variant: Action */
.tf-card--action {
    background: var(--cream-deep);
    border-top-color: var(--burgundy);
}

.tf-card--action:hover {
    background: var(--cream-warm);
}

/* TF Card Variant: Teacher — Dark charcoal laden in gold */
.tf-card--teacher {
    padding: 2.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    overflow: hidden;
    min-height: 260px;
    background: linear-gradient(180deg, var(--charcoal) 0%, var(--black) 100%);
    border: 1px solid var(--gold);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tf-card--teacher:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px var(--gold-30), 0 0 0 1px var(--gold);
    border-color: var(--gold-pale);
}

.tf-card--teacher::before {
    height: 5px;
    opacity: 1;
    background: var(--gold);
}

/* Icon — Large centered symbol */
.tf-card--teacher .tf-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    align-self: center;
    margin-bottom: var(--spacing-sm-plus);
    border: 2px solid var(--gold);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-normal);
    color: var(--gold);
    background: var(--gold-10);
    transition: all 0.4s ease;
}

.tf-card--teacher:hover .tf-card__icon {
    transform: scale(1.08);
    box-shadow: 0 0 24px var(--gold-40);
    background: var(--gold-20);
}

/* Title — Prominent, gold for emphasis */
.tf-card--teacher .tf-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-normal);
    letter-spacing: var(--tracking-wide);
    color: var(--gold);
    margin-bottom: 1.25rem;
}

/* Description — Brief explanation */
.tf-card--teacher .tf-card__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-relaxed);
    color: var(--linen-90);
    margin-bottom: 1.25rem;
    flex-grow: 1;
    /* text-align removed for left justification */
}

/* Text — Essence word at bottom */
.tf-card--teacher .tf-card__text {
    font-family: var(--font-important);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--gold);
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gold-30);
    width: 100%;
    /* text-align removed for left justification */
}

/* Teacher Color Modifiers — Signature accent on top bar, gold icons unified */
.tf-card--floor::before { background: var(--floor-primary); }
.tf-card--cold::before { background: var(--cold-primary); }
.tf-card--heat::before { background: var(--heat-primary); }
.tf-card--dark::before { background: var(--dark-primary); }
.tf-card--sun::before { background: var(--sun-primary); }
.tf-card--silence::before { background: var(--silence-primary); }
.tf-card--hunger::before { background: var(--hunger-deep); }

/* ═══════════════════════════════════════════════════════════════
   TF-GRID — UNIFIED GRID SYSTEM
   ═══════════════════════════════════════════════════════════════ */

.tf-grid--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
}

.tf-grid--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
}

.tf-grid--4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
}

/* tf-grid--7: Teachers grid — 3 columns (was 7) for substantial cards */
.tf-grid--7 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap-lg);
}
/* Last row with single item (7th) spans center */
.tf-grid--7 > *:nth-child(7) {
    grid-column: 2 / 3;
}

/* Grid Responsive — Container Queries */
/* NOTE: @container rules replace the @media rules below.
   The @media rules are commented out pending visual verification. */

@container (max-width: 900px) {
    .tf-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@container (max-width: 640px) {
    .tf-grid--7 { grid-template-columns: repeat(2, 1fr); }
    .tf-grid--7 > *:nth-child(7) { grid-column: 1 / -1; }
    .tf-grid--4 { grid-template-columns: 1fr; }
    .tf-grid--3 { grid-template-columns: 1fr; }
    .tf-grid--2 { grid-template-columns: 1fr; }
    .tf-card--teacher { padding: 1.5rem 1.25rem; }
}

@container (max-width: 380px) {
    .tf-grid--7 { grid-template-columns: 1fr; }
    .tf-grid--7 > *:nth-child(7) { grid-column: auto; }
}

/* REPLACED BY CONTAINER QUERY ABOVE */
/*
@media (max-width: 1024px) {
    .tf-grid--7 { grid-template-columns: repeat(3, 1fr); }
    .tf-grid--7 > *:nth-child(7) { grid-column: 2 / 3; }
    .tf-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .tf-grid--7 { grid-template-columns: repeat(2, 1fr); }
    .tf-grid--7 > *:nth-child(7) { grid-column: 1 / -1; }
    .tf-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .tf-grid--3 { grid-template-columns: 1fr; }
    .tf-grid--2 { grid-template-columns: 1fr; }
    .tf-card--teacher { padding: 1.5rem 1.25rem; }
}
*/
}

.teacher-hero__tag {
    font-family: var(--font-important);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-ultra);
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    background: var(--white-50);
    border: 1px solid var(--gold-25);
    color: var(--earth);
    backdrop-filter: blur(4px);
}

.teacher-hero__tag--primary {
    background: var(--gold-15);
    border-color: var(--gold-40);
    color: var(--gold-deep);
}

/* Circulation Type Indicator */
.teacher-hero__circulation {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--gold-20);
}

.teacher-hero__circulation-item {
    /* text-align removed for left justification */
}

.teacher-hero__circulation-label {
    font-family: var(--font-important);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-ultra);
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: var(--spacing-2xs);
}

.teacher-hero__circulation-value {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--earth);
}

/* Decorative separator line with symbol */
.teacher-hero__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
}

.teacher-hero__divider::before,
.teacher-hero__divider::after {
    content: '';
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.teacher-hero__divider-symbol {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--gold);
    opacity: 0.8;
}

/* Enhanced essence subtitle */
.teacher-hero__essence {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-style: normal;
    color: var(--earth);
    margin-bottom: var(--spacing-sm);
    opacity: 0.9;
}

/* Order indicator */
.teacher-hero__order {
    font-family: var(--font-important);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-ultra);
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--spacing-sm);
    opacity: 0.8;
}

/* Teacher-specific hero variations */
/* ─────────────────────────────────────────────────────────────────
   TEACHER HERO VARIANTS — Using the Seven Teachers Color Logic
   Each hero reflects the essence of its teacher through color.
   ───────────────────────────────────────────────────────────────── */

/* FLOOR — Terracotta earth tones */
.teacher-hero--floor {
    background: linear-gradient(180deg,
        #F2E6DC 0%,           /* Pale terracotta */
        #E8D5C5 40%,          /* Warm clay */
        #DCC4B0 100%);        /* Deep earth */
}
.teacher-hero--floor::before {
    background: radial-gradient(ellipse 80% 60% at 50% 35%, var(--floor-glow), transparent);
}
.teacher-hero--floor .teacher-hero__icon {
    color: var(--floor-primary);
    text-shadow: 0 0 80px var(--floor-glow);
}
.teacher-hero--floor .teacher-hero__descriptor {
    color: var(--floor-deep);
}

/* COLD — Steel blue, ice tones */
.teacher-hero--cold {
    background: linear-gradient(180deg,
        #EEF2F5 0%,           /* Pale ice */
        #E4EAEF 40%,          /* Cold mist */
        #D8E2EA 100%);        /* Deep frost */
}
.teacher-hero--cold::before {
    background: radial-gradient(ellipse 60% 40% at 50% 35%, var(--cold-glow), transparent);
}
.teacher-hero--cold .teacher-hero__icon {
    color: var(--cold-primary);
    text-shadow: 0 0 60px var(--cold-glow);
}
.teacher-hero--cold .teacher-hero__descriptor {
    color: var(--cold-deep);
}

/* HEAT — Ember warmth, surrendering red */
.teacher-hero--heat {
    background: linear-gradient(180deg,
        #F5EBE4 0%,           /* Warm cream */
        #F0E4DA 40%,          /* Flushed */
        #E8DAD0 100%);        /* Deep warmth */
}
.teacher-hero--heat::before {
    background: radial-gradient(ellipse 70% 50% at 50% 30%, var(--heat-glow), transparent);
}
.teacher-hero--heat .teacher-hero__icon {
    color: var(--heat-primary);
    text-shadow: 0 0 60px var(--heat-glow);
}
.teacher-hero--heat .teacher-hero__descriptor {
    color: var(--heat-deep);
}

/* DARK — Deep indigo-black, interiority */
.teacher-hero--dark {
    background: linear-gradient(180deg,
        var(--dark-primary) 0%,   /* Deep indigo */
        #252B3A 50%,              /* Blue-black */
        var(--dark-deep) 100%);   /* Deepest night */
}
.teacher-hero--dark::before {
    background: radial-gradient(ellipse 60% 40% at 50% 40%, var(--dark-glow), transparent);
}
.teacher-hero--dark .teacher-hero__icon {
    color: var(--dark-pale);
    text-shadow: 0 0 80px rgba(90, 100, 130, 0.4);
}
.teacher-hero--dark .teacher-hero__title {
    color: var(--cream);
}
.teacher-hero--dark .teacher-hero__descriptor {
    color: var(--silence-pale);
}
.teacher-hero--dark .teacher-hero__tagline {
    color: var(--stone);
}

/* SUN — Amber orange, vital fire */
.teacher-hero--sun {
    background: linear-gradient(180deg,
        #FFF8ED 0%,           /* Dawn light */
        #FFF2DC 40%,          /* Golden hour */
        #FFEACC 100%);        /* Amber glow */
}
.teacher-hero--sun::before {
    background: radial-gradient(ellipse 80% 60% at 50% 30%, var(--sun-glow), transparent);
}
.teacher-hero--sun .teacher-hero__icon {
    color: var(--sun-primary);
    text-shadow: 0 0 80px var(--sun-glow);
}
.teacher-hero--sun .teacher-hero__descriptor {
    color: var(--sun-deep);
}

/* SILENCE — Steel blue, presence */
.teacher-hero--silence {
    background: linear-gradient(180deg,
        #E8EEF2 0%,           /* Pale steel */
        #D8E2EA 40%,          /* Cool mist */
        #C8D6E0 100%);        /* Deep steel */
}
.teacher-hero--silence::before {
    background: radial-gradient(ellipse 70% 50% at 50% 35%, var(--silence-glow), transparent);
}
.teacher-hero--silence .teacher-hero__icon {
    color: var(--silence-primary);
    text-shadow: 0 0 80px var(--silence-glow);
}
.teacher-hero--silence .teacher-hero__descriptor {
    color: var(--silence-deep);
}

/* HUNGER — Pale gold clarity */
.teacher-hero--hunger {
    background: linear-gradient(180deg,
        var(--ivory) 0%,          /* Pure clarity */
        #FAF7EF 40%,              /* Light gold mist */
        var(--cream) 100%);
}
.teacher-hero--hunger::before {
    background: radial-gradient(ellipse 60% 40% at 50% 40%, var(--hunger-glow), transparent);
}
.teacher-hero--hunger .teacher-hero__icon {
    color: var(--hunger-deep);
    text-shadow: 0 0 60px var(--hunger-glow);
}
.teacher-hero--hunger .teacher-hero__descriptor {
    color: var(--hunger-deep);
}

/* EIGHTH/WITNESS — Deep violet, integration tones */
.teacher-hero--eighth {
    background: linear-gradient(180deg,
        #F5F2F8 0%,           /* Pale violet mist */
        #EDE8F2 40%,          /* Soft lavender */
        #E5DEF0 100%);        /* Deep integration */
}
.teacher-hero--eighth::before {
    background: radial-gradient(ellipse 70% 50% at 50% 40%, var(--eighth-glow), transparent);
}
.teacher-hero--eighth .teacher-hero__icon {
    color: var(--eighth-primary);
    text-shadow: 0 0 80px var(--eighth-glow);
}
.teacher-hero--eighth .teacher-hero__descriptor {
    color: var(--eighth-deep);
}

/* ─────────────────────────────────────────────────────────────────
   TEACHER PRINCIPLE
   ───────────────────────────────────────────────────────────────── */
.teacher-principle {
    background: var(--ivory);
    padding: var(--spacing-xxl) var(--spacing-md);
    position: relative;
}

/* .teacher-principle::before gold line removed */

.principle-block {
    max-width: 800px;
    margin: 0 auto;
}

.principle-statement {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-normal);
    color: var(--earth);
    line-height: var(--leading-relaxed);
    margin: 0;
    text-align: left;
}

.principle-burst {
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
    font-weight: var(--weight-normal);
    color: var(--earth);
    line-height: 1.6;
    margin: 1.5rem 0;
}

/* Deeper Teaching Transition — Link to Mother */
.mechanism-content--transition {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm-plus);
    border-top: 1px solid var(--gold-30);
}

.mechanism-content--transition p {
    font-style: normal;
    color: var(--earth);
}

.mother-link {
    color: var(--gold-deep);
    display: inline-block;
    margin-top: 0.75rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mother-link:hover {
    color: var(--gold);
}

/* ─────────────────────────────────────────────────────────────────
   TEACHER TEACHING
   ───────────────────────────────────────────────────────────────── */
.teacher-teaching {
    background: var(--cream-warm);
    padding: var(--spacing-xxl) var(--spacing-md);
}
.teacher-teaching .container {
    max-width: var(--max-width-narrow);
}
.teacher-teaching .section-title {
    margin-bottom: var(--spacing-xl);
}

.teaching-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: var(--max-width);
    margin: 0 auto;
}

@media (max-width: 768px) { .teaching-grid { grid-template-columns: 1fr; } }

.teaching-card {
    background: var(--ivory);
    padding: 3rem;
    position: relative;
    border: none;
    border-top: 2px solid var(--gold);
    box-shadow: 0 2px 15px var(--black-03);
    transition: all 0.35s ease;
}

.teaching-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px var(--black-05);
    border-color: var(--gold-25);
}

.teaching-card h3 {
    font-family: var(--font-important);
    font-size: clamp(1.15rem, 2vw, 1.563rem);
    font-weight: var(--weight-medium);
    color: var(--black);
    margin-bottom: var(--spacing-sm);
    line-height: var(--leading-snug);
}

.teaching-card p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--earth);
    line-height: var(--leading-loose);
    margin-bottom: var(--spacing-sm);
    text-align: left;
}

.teaching-card p:last-child {
    margin-bottom: 0.75em;
}

.teaching-card .teaching-insight {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-style: normal;
    font-weight: var(--weight-normal);
    color: var(--gold-deep);
    padding-top: var(--spacing-sm-plus);
    border-top: 1px solid var(--gold-15);
    margin-top: 1.75rem;
    line-height: var(--leading-normal);
}

/* ─────────────────────────────────────────────────────────────────
   TEACHER EVIDENCE
   ───────────────────────────────────────────────────────────────── */
.teacher-evidence {
    background: var(--cream-deep);
    padding: var(--spacing-xxl) var(--spacing-md);
}
.teacher-evidence .container {
    max-width: var(--max-width-narrow);
}
.teacher-evidence .section-title {
    margin-bottom: var(--spacing-xl);
}

.teacher-evidence .evidence-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    max-width: var(--max-width-narrow);
    margin: 0 auto var(--spacing-xl);
}

.teacher-evidence .evidence-card {
    background: var(--ivory);
    padding: 2.5rem 3rem;
    border: 1px solid var(--gold-15);
    border-top: 3px solid var(--gold);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}

.teacher-evidence .evidence-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px var(--gold-12);
    border-color: var(--gold);
}

.teacher-evidence .evidence-stat {
    font-family: var(--font-important);
    font-size: var(--text-3xl);
    font-weight: var(--weight-light);
    color: var(--burgundy);
    display: block;
    margin-bottom: var(--spacing-sm);
    line-height: var(--leading-tight);
}

.teacher-evidence .evidence-card-content {
    /* Content flows naturally */
}

.teacher-evidence .evidence-title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--black);
    display: block;
    margin-bottom: 0.75rem;
    line-height: var(--leading-normal);
}

.teacher-evidence .evidence-desc {
    font-size: var(--text-base);
    color: var(--earth);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--spacing-sm);
}

.teacher-evidence .evidence-card cite {
    font-size: var(--text-xs);
    font-style: normal;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--gold-deep);
}

/* Alternative: If no wrapper div, use flexbox fallback */
.teacher-evidence .evidence-card:not(:has(.evidence-card-content)) {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    text-align: left;
    padding: var(--spacing-lg);
}

.teacher-evidence .evidence-card:not(:has(.evidence-card-content)) .evidence-stat {
    font-size: var(--text-2xl);
    padding: 0;
    background: none;
    border: none;
    justify-content: flex-start;
    margin-bottom: 0.75rem;
}

.evidence-highlight {
    padding: 2.5rem 3rem;
    background: linear-gradient(135deg, var(--gold-08), var(--gold-03));
    border-left: 4px solid var(--gold);
    margin-bottom: var(--spacing-lg);
}

.evidence-highlight h3 {
    font-family: var(--font-important);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--gold-deep);
    margin-bottom: var(--spacing-sm);
    line-height: var(--leading-normal);
}

.evidence-highlight p {
    font-size: var(--text-base);
    color: var(--earth);
    line-height: var(--leading-loose);
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   TEACHER MECHANISM
   ───────────────────────────────────────────────────────────────── */
.teacher-mechanism {
    background: var(--ivory);
    padding: var(--spacing-xxl) var(--spacing-md);
}

/* Teacher Physics — Variant of mechanism for physical explanations */
.teacher-physics {
    background: var(--cream-warm);
    padding: var(--spacing-xxl) var(--spacing-md);
}
.teacher-physics .container {
    max-width: var(--max-width-narrow);
}
.teacher-physics .section-title {
    margin-bottom: var(--spacing-xl);
}
.teacher-mechanism .container {
    max-width: var(--max-width-narrow);
}
.teacher-mechanism .section-title {
    margin-bottom: var(--spacing-xl);
}

/* Teacher Mechanism — Per-teacher gradient backgrounds */
.teacher-mechanism--floor { background: linear-gradient(180deg, var(--floor-mechanism-start) 0%, var(--ivory) 100%); }
.teacher-mechanism--cold { background: linear-gradient(180deg, var(--cold-mechanism-start) 0%, var(--ivory) 100%); }
.teacher-mechanism--heat { background: linear-gradient(180deg, var(--heat-mechanism-start) 0%, var(--ivory) 100%); }
.teacher-mechanism--dark { background: linear-gradient(180deg, var(--dark-mechanism-start) 0%, var(--ivory) 100%); }
.teacher-mechanism--sun { background: linear-gradient(180deg, var(--sun-mechanism-start) 0%, var(--ivory) 100%); }
.teacher-mechanism--silence { background: linear-gradient(180deg, var(--silence-mechanism-start) 0%, var(--ivory) 100%); }
.teacher-mechanism--hunger { background: linear-gradient(180deg, var(--hunger-mechanism-start) 0%, var(--ivory) 100%); }

.mechanism-content {
    margin-bottom: var(--spacing-xl);
    padding: 2.5rem 3rem;
    background: var(--cream);
    border-left: 4px solid var(--gold);
    position: relative;
}

.mechanism-content:last-child {
    margin-bottom: 0;
}

.mechanism-content h3 {
    font-family: var(--font-important);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--black);
    margin-bottom: 1.25rem;
    line-height: var(--leading-snug);
}

.mechanism-content p {
    font-size: var(--text-base);
    color: var(--earth);
    line-height: var(--leading-loose);
    margin-bottom: 1.25rem;
}

.mechanism-content p:last-child {
    margin-bottom: 0.75em;
}

/* Mechanism Research — Variant with heading for subsections */
.mechanism-research {
    margin-bottom: var(--spacing-xl);
    padding: 2.5rem 3rem;
    background: var(--cream);
    border-left: 4px solid var(--gold);
    position: relative;
}

.mechanism-research:last-child {
    margin-bottom: 0;
}

.mechanism-research h3 {
    font-family: var(--font-important);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--black);
    margin-bottom: 1.25rem;
    line-height: var(--leading-snug);
}

.mechanism-research p {
    font-size: var(--text-base);
    color: var(--earth);
    line-height: var(--leading-loose);
    margin-bottom: 1.25rem;
}

.mechanism-research p:last-child {
    margin-bottom: 0.75em;
}

/* ─────────────────────────────────────────────────────────────────
   TEACHER PRACTICE
   ───────────────────────────────────────────────────────────────── */
.teacher-practice {
    background: var(--cream-warm);
    padding: var(--spacing-xxl) var(--spacing-md);
}
.teacher-practice .container {
    max-width: var(--max-width-narrow);
}
.teacher-practice .section-title {
    margin-bottom: var(--spacing-xl);
}

.practice-protocol {
    background: var(--ivory);
    padding: 2.5rem 3rem;
    border: 1px solid var(--gold-15);
    position: relative;
    margin-bottom: var(--spacing-lg);
}

.practice-protocol::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--gold), var(--gold-pale));
}

.practice-protocol:last-child {
    margin-bottom: 0;
}

.practice-protocol h3 {
    font-family: var(--font-important);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--black);
    margin-bottom: var(--spacing-sm-plus);
    padding-left: var(--spacing-sm);
    line-height: var(--leading-snug);
}

.protocol-list {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: var(--spacing-sm);
}

.protocol-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: var(--spacing-sm);
    font-size: var(--text-base);
    color: var(--earth);
    line-height: var(--leading-relaxed);
}

.protocol-list li:last-child {
    margin-bottom: 0;
}

.protocol-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: var(--weight-semibold);
}

/* ─────────────────────────────────────────────────────────────────
   PRACTICES PAGE — Category and Method Styling
   ───────────────────────────────────────────────────────────────── */

.practices-intro {
    padding: var(--spacing-xl) 0;  /* Horizontal padding handled by .container */
    background: var(--ivory);
}

.practices-intro .intro-block {
    max-width: var(--max-width-narrow);
    margin: 0 auto;
    text-align: left;
}

.practices-intro .intro-block h2 {
    font-family: var(--font-important);
    font-size: clamp(1.4rem, 3vw, 1.75rem);
    font-weight: var(--weight-medium);
    color: var(--black);
    margin-bottom: var(--spacing-md);
}

.practices-intro .intro-block p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--earth);
    margin: 0;
}

.practice-categories {
    padding: var(--spacing-xl) 0;
    background: var(--cream);
}

/* Practice category is now a full-width section, NOT a card */
.practice-category {
    margin: 0 0 var(--spacing-xl);
    background: transparent;
    border: none;
}

.practice-category:last-child {
    margin-bottom: 0;
}

/* Header is full-width edge-to-edge */
.practice-category__header {
    padding: var(--spacing-md) var(--page-padding);
    background: var(--black);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.practice-category__header h2 {
    font-family: var(--font-important);
    font-size: clamp(1.3rem, 2.5vw, 1.5rem);
    font-weight: var(--weight-medium);
    color: var(--ivory);
    margin: 0;
}

.mechanism-tag {
    font-family: var(--font-important);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--gold);
    padding: 0.4rem 0.8rem;
    background: var(--gold-15);
}

/* Content has comfortable reading width, not card padding */
.practice-category__content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--page-padding);
}

.practice-intro {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--earth);
    margin-bottom: var(--spacing-lg);
    text-align: left;
    max-width: none;
}

.practice-methods {
    display: grid;
    gap: var(--spacing-md);
}

.practice-method {
    padding: var(--spacing-sm-plus);
    background: var(--cream);
    border-left: 3px solid var(--gold);
}

.practice-method h3 {
    font-family: var(--font-important);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: var(--black);
    margin-bottom: 0.75rem;
    text-align: left;
    line-height: var(--leading-snug);
}

.practice-method p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--earth);
    margin-bottom: 0;
    text-align: left;
}

.practice-method .practice-protocol-mini {
    margin-top: 0.75rem;
}

.practice-protocol-mini {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--earth);
    padding: 0.75rem 1rem;
    background: var(--ivory);
    border-left: 2px solid var(--gold-pale);
}

.practice-protocol-mini strong {
    font-family: var(--font-important);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--gold-deep);
}

.practice-evidence {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--cream-deep);
}

.practice-evidence h4 {
    font-family: var(--font-important);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: var(--spacing-sm);
}

.practice-evidence p {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--earth);
    font-style: normal;
    margin: 0;
}

/* Practice Cards — Mobile Responsive (prevent text crushing) */
@media (max-width: 768px) {
    .practice-category__content {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .practice-method {
        padding: var(--spacing-sm);
        border-left-width: 2px;
    }

    .practice-protocol-mini {
        padding: 0.75rem 1rem;
        border-left-width: 2px;
        font-size: var(--text-base);  /* Ensure 16px minimum on mobile */
    }

    .practice-intro {
        margin-bottom: var(--spacing-md);
    }

    .practice-evidence {
        margin-top: var(--spacing-md);
    }

    .practice-evidence p {
        font-size: var(--text-base);  /* Ensure 16px minimum on mobile */
    }
}

@media (max-width: 480px) {
    .practice-category__content {
        padding: var(--spacing-sm);
    }

    .practice-method {
        padding: var(--spacing-sm);  /* Keep at 1rem (16px), not 0.75rem (12px) */
    }

    .practice-protocol-mini {
        padding: 0.75rem 1rem;  /* Comfortable padding, not crushed */
        margin-top: var(--spacing-xs);
    }
}

/* Daily Schedule Section */
.daily-schedule {
    padding: var(--spacing-xl) 0;  /* Horizontal padding handled by .container */
    background: var(--cream-warm);
}
.daily-schedule .container {
    max-width: var(--max-width);
}

/* Schedule Grid — 2-column layout for spacious daily timing cards */
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}
@media (max-width: 768px) { .schedule-grid { grid-template-columns: 1fr; } }

/* Schedule Item — Spacious card with gold accent */
.schedule-item {
    background: var(--ivory);
    padding: 1.75rem 2rem;
    border-left: 4px solid var(--gold);
    border-top: 1px solid var(--gold-15);
    border-right: 1px solid var(--gold-15);
    border-bottom: 1px solid var(--gold-15);
    text-align: left;
}

.schedule-time {
    font-family: var(--font-important);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--gold-deep);
    display: block;
    margin-bottom: 0.75rem;
}

.schedule-item h4 {
    font-family: var(--font-important);
    font-size: 1.1rem;
    font-weight: var(--weight-semibold);
    color: var(--black);
    margin-bottom: 0.75rem;
    line-height: var(--leading-snug);
}

.schedule-item p {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--earth);
    margin: 0;
}

.schedule-note {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(114, 47, 55, 0.05);
    border-left: 3px solid var(--burgundy);
    text-align: left;
}

.schedule-note p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--earth);
    margin: 0;
}

.schedule-note strong {
    color: var(--burgundy);
}

/* Schedule — Mobile Responsive */
@media (max-width: 768px) {
    .schedule-item {
        padding: 1.25rem 1rem;  /* Reduce side padding from 2rem to 1rem */
    }

    .schedule-item p {
        font-size: var(--text-base);  /* Ensure 16px minimum on mobile */
    }

    .schedule-note {
        padding: var(--spacing-sm);  /* Tighter padding on mobile */
    }
}

@media (max-width: 480px) {
    .schedule-item {
        padding: var(--spacing-sm);  /* Even tighter on small screens */
        border-left-width: 3px;
    }

    .schedule-note {
        padding: var(--spacing-sm);
        border-left-width: 2px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   TEACHER INTEGRATION
   ───────────────────────────────────────────────────────────────── */
.teacher-integration {
    background: var(--cream-deep);
    padding: var(--spacing-xxl) var(--spacing-md);
}

.teacher-integration .section-title {
    margin-bottom: var(--spacing-xl);
}

.integration-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: var(--max-width);
    margin: 0 auto;
}

@media (max-width: 768px) { .integration-grid { grid-template-columns: 1fr; } }

.integration-card {
    background: var(--ivory);
    padding: 3rem;
    text-align: left;
    border: 1px solid var(--gold-15);
    border-left: 3px solid var(--gold);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.integration-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px var(--gold-10);
    border-color: var(--gold);
}

.integration-icon {
    font-family: var(--font-body);
    font-size: var(--text-2xl);
    font-weight: var(--weight-light);
    font-style: normal;
    color: var(--gold);
    display: block;
    margin-bottom: 1.25rem;
    letter-spacing: var(--tracking-ultra);
}

.integration-card h4 {
    font-family: var(--font-important);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: var(--black);
    margin-bottom: var(--spacing-sm);
    line-height: var(--leading-normal);
}

.integration-card p {
    font-size: var(--text-base);
    color: var(--earth);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   TEACHER CAUTIONS
   ───────────────────────────────────────────────────────────────── */
.teacher-cautions {
    background: linear-gradient(135deg, rgba(114, 47, 55, 0.03), var(--ivory));
    padding: var(--spacing-xxl) var(--spacing-md);
    position: relative;
}

.teacher-cautions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--burgundy);
}

.teacher-cautions .container {
    max-width: var(--max-width-narrow);
}
.teacher-cautions .section-title {
    margin-bottom: var(--spacing-xl);
}

.caution {
    background: var(--cream);
    padding: 2rem 2.5rem;
    margin-bottom: var(--spacing-md);
    border-left: 4px solid var(--burgundy);
}

.caution:last-child {
    margin-bottom: 0;
}

.caution h4 {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--burgundy);
    margin-bottom: 0.75rem;
    line-height: var(--leading-normal);
}

.caution p {
    font-size: var(--text-base);
    color: var(--earth);
    line-height: var(--leading-loose);
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   TEACHER QUOTE
   ───────────────────────────────────────────────────────────────── */
.teacher-quote {
    background: var(--black);
    padding: var(--spacing-xxl) var(--spacing-md);
    position: relative;
}
.teacher-quote .container {
    max-width: var(--max-width-narrow);
}

.teacher-quote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.quote-block {
    max-width: var(--max-width-narrow);
    text-align: left;
    position: relative;
}

.quote-block::before {
    content: '';
    display: none;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
}

.quote-block p {
    font-family: var(--font-body);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: var(--weight-normal);
    color: var(--cream);
    line-height: var(--leading-relaxed);
    margin: 0;
    position: relative;
    z-index: 1;
    letter-spacing: var(--tracking-tight);
}

/* ─────────────────────────────────────────────────────────────────
   TEACHER FLOW — Transition to next teacher in sequence
   ───────────────────────────────────────────────────────────────── */
.teacher-flow {
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: left;
    background: var(--black);
    border-top: 1px solid var(--gold-15);
}
.teacher-flow__text {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--ivory);
    max-width: var(--max-width);
    margin: 0 0 var(--spacing-sm);
    line-height: var(--leading-relaxed);
}
.teacher-flow__link {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--gold);
    text-decoration: none;
    letter-spacing: var(--tracking-wide);
    transition: color 0.2s;
}
.teacher-flow__link:hover {
    color: var(--ivory);
}

/* ─────────────────────────────────────────────────────────────────
   TEACHER NAV SECTION — Dark charcoal cards with gold accents
   ───────────────────────────────────────────────────────────────── */
.teacher-nav-section {
    background: linear-gradient(180deg, var(--charcoal) 0%, var(--black) 100%);
    padding: var(--spacing-xxl) var(--spacing-md);
}

.teacher-nav-section .section-title {
    color: var(--gold);
    margin-bottom: var(--spacing-xl);
}

/* Override the earlier .teachers-icons-grid for nav section */
.teacher-nav-section .teachers-icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--spacing-sm);
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .teacher-nav-section .teachers-icons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

.teacher-nav-section .teacher-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* text-align removed for left justification */
    padding: 1.75rem 1.25rem;
    background: rgba(255, 254, 249, 0.03);
    text-decoration: none;
    border: 1px solid var(--gold-25);
    border-top: 3px solid var(--gold);
    transition: all 0.3s ease;
}

.teacher-nav-section .teacher-icon:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px var(--gold-20);
    border-color: var(--gold);
    background: var(--gold-08);
}

.teacher-nav-section .teacher-icon--active {
    background: var(--gold);
    border-color: var(--gold);
}

.teacher-nav-section .teacher-icon--active .icon-letter,
.teacher-nav-section .teacher-icon--active .icon-name {
    color: var(--black);
}

.teacher-nav-section .teacher-icon--active .icon-descriptor {
    color: var(--black-80);
}

.teacher-nav-section .icon-letter {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--weight-normal);
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.75rem;
}

.teacher-nav-section .icon-name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--ivory);
    margin-bottom: 0.35rem;
    letter-spacing: var(--tracking-normal);
}

.teacher-nav-section .icon-descriptor {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-ultra);
    text-transform: uppercase;
    color: var(--gold);
}

/* Keep earlier definition for other contexts */
.icon-letter {
    font-family: var(--font-body);
    font-size: var(--text-2xl);
    font-weight: var(--weight-light);
    font-style: normal;
    color: var(--gold);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.icon-name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--black);
    margin-bottom: var(--spacing-2xs);
}

/* ═══════════════════════════════════════════════════════════════
   TEACHER NAVIGATION — Individual teacher pages
   ═══════════════════════════════════════════════════════════════ */

.teacher-navigation {
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--gold-15);
    background: var(--ivory);
}

.teacher-icons {
    display: flex;
    gap: 0;
}

.teacher-icons .teacher-icon {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-xs);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid transparent;
    transition: border-color var(--dur-gentle) ease, background var(--dur-moderate) ease;
}

.teacher-icons .teacher-icon:hover {
    background: var(--gold-05);
    border-bottom-color: var(--gold);
    transform: none;
    box-shadow: none;
}

.teacher-icons .teacher-icon--active {
    border-bottom-color: var(--gold);
    background: var(--gold-08);
}

.teacher-icon__label {
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--gold-deep);
    line-height: 1;
}

.teacher-icons .teacher-icon--active .teacher-icon__label {
    color: var(--gold);
}