/* ==========================================================================
   Two Americas — "Beneath the headline" spotlight section
   Scope: all classes prefixed ta-lp- per project CSS isolation convention.
   Enqueue alongside the rest of the TA-LP-001 landing page CSS.
   ==========================================================================

   NEW TOKENS — merge into the site's existing root variable block if not
   already present (do not create a second :root declaration):
     --ta-teal:   #1a4a4a;   // Medical / Science band
     --ta-bronze: #a67c32;   // Sport / Competition band
   These replace the previous accent collisions where 'sport' reused
   --ta-nc-green and 'medical' reused --ta-nc-gold.
   ========================================================================== */

.ta-lp-beneath-headline {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 56px 20px 100px !important;
    overflow: hidden;
    isolation: isolate;
    background: var(--ta-black, #0f0f0f);
}

/* Content inside the section is centered at 1120px — the section itself
   stays full-bleed so its dark background always reaches both edges of
   the viewport, no matter how wide the screen is. This is the same
   full-bleed-band / centered-inner-content pattern the Hero, Dual
   Timeline, and 250th Banner sections already use. */
.ta-lp-beneath-headline__intro,
.ta-lp-band-grid,
.ta-lp-local-band {
    max-width: 1120px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---- Parallax spotlight beams — full-bleed behind the section, hidden
   until scrolled into view, then fade in and drift ---- */

.ta-lp-bth-stage {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.ta-lp-beam {
    position: absolute;
    top: -15%;
    width: 320px;
    height: 150%;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--beam-color, var(--ta-gold, #b8962e)) 40%,
        transparent 78%);
    opacity: 0;
    filter: blur(6px);
    clip-path: polygon(46% 0%, 54% 0%, 100% 100%, 0% 100%);
    transform: rotate(var(--beam-tilt, 8deg));
    animation: taLpBeamDrift var(--beam-dur, 26s) ease-in-out infinite;
    animation-play-state: paused;
    transition: opacity 1.4s ease;
}

.ta-lp-bth-stage.is-in-view .ta-lp-beam {
    opacity: var(--beam-opacity, .13);
    animation-play-state: running;
}

.ta-lp-beam--1 { left: 6%;  --beam-color: var(--ta-gold, #b8962e);         --beam-tilt: 10deg; --beam-dur: 24s; }
.ta-lp-beam--2 { left: 21%; --beam-color: var(--ta-contribution, #1c3a6b); --beam-tilt: -6deg; --beam-dur: 30s; }
.ta-lp-beam--3 { left: 37%; --beam-color: var(--ta-persecution, #7a1c1c); --beam-tilt: 7deg;  --beam-dur: 22s; }
.ta-lp-beam--4 { left: 53%; --beam-color: var(--ta-bronze, #a67c32);      --beam-tilt: -9deg; --beam-dur: 28s; }
.ta-lp-beam--5 { left: 69%; --beam-color: var(--ta-teal, #1a4a4a);        --beam-tilt: 8deg;  --beam-dur: 25s; }
.ta-lp-beam--6 { left: 85%; --beam-color: var(--ta-gray, #3a3530);        --beam-tilt: -7deg; --beam-dur: 27s; }

@keyframes taLpBeamDrift {
    0%, 100% { transform: translateX(0) rotate(var(--beam-tilt, 8deg)); }
    50%      { transform: translateX(3.5%) rotate(calc(var(--beam-tilt, 8deg) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
    .ta-lp-beam { animation: none; transition: none; }
    .ta-lp-bth-stage.is-in-view .ta-lp-beam { opacity: .09; }
}

/* ---- Section intro (unchanged in position, now sits above the stage) ---- */

.ta-lp-beneath-headline__intro {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 44px;
    padding-top: 8px;
}

.ta-lp-beneath-headline .ta-lp-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ta-nc-gold, #8b6914) !important;
    font-weight: 600;
    margin: 0 0 14px;
}

.ta-lp-beneath-headline .ta-lp-divider {
    width: 48px;
    height: 2px;
    background: var(--ta-gold, #b8962e) !important;
    margin: 0 auto 18px;
    border-radius: 2px;
}

.ta-lp-beneath-headline .ta-lp-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--ta-off-white, #f2ede6) !important;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}

.ta-lp-beneath-headline .ta-lp-subtitle {
    font-size: 15.5px;
    color: var(--ta-off-white, #f2ede6) !important;
    opacity: 0.78;
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ==========================================================================
   Standard band cards (Education, Inventions, Service, Sport, Medical, Legal)
   3-across grid, headstone shape: arch at top, flat at bottom.
   ========================================================================== */

.ta-lp-band-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: 28px;
    margin-bottom: 80px !important;
}

@media (max-width: 900px) {
    .ta-lp-band-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
		margin-left: auto !important;
        margin-right: auto !important;
    }
}

.ta-lp-headstone-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(160deg, #1c1c1c 0%, #0a0a0a 100%);
    border: 1px solid var(--ta-gray-border, #d0c8be);
    border-radius: 10px;
    padding: 0 0 34px;
    overflow: hidden;
    min-height: 360px;
    box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .18);
    transition: transform .3s ease, box-shadow .3s ease;
}

.ta-lp-headstone-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 46px -20px rgba(0, 0, 0, .22);
}

.ta-lp-card-status {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 20px;
}

.ta-lp-card-status--active {
    background: rgba(26, 74, 26, 0.12);
    color: var(--ta-nc-green, #1a4a1a);
}

.ta-lp-card-status--queued {
    background: var(--ta-gray-border, #d0c8be);
    color: var(--ta-gray, #3a3530);
}

/* Photo medallions (headstone cards) */
.ta-lp-card-medallion {
    width: 100%;
    height: 180px;
    border-bottom: 3px solid var(--ta-lp-card-accent, var(--ta-gold, #b8962e));
    overflow: hidden;
    flex-shrink: 0;
}

.ta-lp-card-medallion img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ta-lp-card-eyebrow {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ta-lp-card-accent, var(--ta-gold, #b8962e));
    margin: 0 0 12px;
}

.ta-lp-card-headline {
    font-size: 18px;
    font-weight: 600;
    color: var(--ta-off-white, #f2ede6);
    margin: 0 0 10px;
    line-height: 1.35;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

.ta-lp-card-teaser {
    font-size: 13.5px;
    color: #c9c2b4;
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---- Learn more — outlined pill, fills white with black text on hover.
   Solid white text + heavier weight + no-wrap so the label is always
   legible against every band's accent color. ---- */

.ta-lp-learn-more-btn {
    appearance: none;
    display: inline-block;
    background: var(--ta-lp-card-accent, var(--ta-gold, #b8962e));
    color: #0a0a0a;
    font-weight: 700;
    border: 2px solid var(--ta-lp-card-accent, var(--ta-gold, #b8962e));
    border-radius: 999px;
    padding: 14px 36px;
    font-size: 15px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1;
    text-decoration: none;
    margin-top: auto;
    margin-bottom: 20px;
    transition: background-color .22s ease, border-color .22s ease, transform .18s ease;
}

.ta-lp-learn-more-btn:hover,
.ta-lp-learn-more-btn:focus-visible {
    background-color: #ffffff;
    color: #0a0a0a;
    border-color: #ffffff;
    transform: translateY(-1px);
}
.ta-lp-learn-more-btn:focus-visible {
    outline: 2px solid var(--ta-lp-card-accent, var(--ta-gold, #b8962e));
    outline-offset: 3px;
}

/* ---- Per-band unique texture, applied to the card background ---- */

.ta-lp-band--education {
    background-image: repeating-linear-gradient(to bottom,
        transparent 0 24px, rgba(184, 150, 46, .06) 24px 25px);
}

.ta-lp-band--inventions {
    background-image: radial-gradient(rgba(28, 58, 107, .28) 1px, transparent 1.4px);
    background-size: 20px 20px;
}

.ta-lp-band--service {
    box-shadow:
        0 -16px 40px -18px var(--ta-lp-card-accent, var(--ta-persecution, #7a1c1c)),
        0 22px 40px -22px rgba(0, 0, 0, .18),
        inset 0 0 0 1px rgba(122, 28, 28, .12);
}

.ta-lp-band--sport {
    background-image: repeating-linear-gradient(118deg,
        rgba(166, 124, 50, .07) 0 12px, transparent 12px 26px);
    transform: rotate(-1.2deg);
}
.ta-lp-band--sport:hover {
    transform: rotate(0deg) translateY(-5px);
}

.ta-lp-band--medical {
    background-image:
        radial-gradient(circle at 20% 26%, rgba(26, 74, 74, .18) 0, transparent 36%),
        radial-gradient(circle at 80% 74%, rgba(26, 74, 74, .14) 0, transparent 32%);
}

.ta-lp-band--legal {
    position: relative;
}
.ta-lp-band--legal::after {
    content: "";
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 1px;
    background: var(--ta-gray, #3a3530);
    opacity: .5;
}

/* ==========================================================================
   7th band: Closer to home — tombstone shape (flat top, rounded bottom),
   1-3 weighted cards. Column count adapts to however many levels are active.
   Sizing matched to the headstone cards above. Border is now a visible
   neutral outline (matching headstone cards) plus a colored top accent,
   instead of the near-invisible rgba(255,255,255,.08) it had before.
   ========================================================================== */

.ta-lp-local-band {
    position: relative;
    z-index: 1;
    border: 1px solid var(--ta-nc-green, #1a4a1a);
    border-radius: 12px;
    padding: 32px 22px 22px;
}

.ta-lp-local-header {
    text-align: center;
    margin-bottom: 40px;
}

.ta-lp-local-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--ta-off-white, #f2ede6) !important;
    margin: 0 0 10px;
}


.ta-lp-local-sub {
    font-size: 12.5px;
    color: var(--ta-off-white, #f2ede6) !important;
    opacity: .7;
    margin: 0;
}

.ta-lp-local-grid {
    display: grid;
    gap: 24px;
    justify-content: center;
}

.ta-lp-local-grid--1 { grid-template-columns: minmax(300px, 360px); }
.ta-lp-local-grid--2 { grid-template-columns: repeat(2, minmax(300px, 360px)); }
.ta-lp-local-grid--3 { grid-template-columns: repeat(3, minmax(300px, 360px)); }

@media (max-width: 900px) {
    .ta-lp-local-grid--2,
    .ta-lp-local-grid--3 {
        grid-template-columns: minmax(300px, 360px);
    }
}

.ta-lp-tombstone-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(160deg, #1a2a1a 0%, #0a120a 100%);
    border: 1px solid var(--ta-gray-border, #d0c8be);
    border-top: 4px solid var(--ta-lp-card-accent, var(--ta-nc-green, #1a4a1a));
    border-radius: 12px 12px 200px 200px;
    padding: 54px 32px 40px;
    min-height: 380px;
    width: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
}
.ta-lp-tombstone-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .22), 0 0 0 1px var(--ta-lp-card-accent, var(--ta-nc-green, #1a4a1a)) inset;
}
.ta-lp-tombstone-card .ta-lp-card-tag {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ta-lp-card-accent, var(--ta-nc-green, #1a4a1a));
    margin-bottom: 14px;
}
.ta-lp-tombstone-card .ta-lp-card-medallion {
    width: 54px;
    height: 54px;
    background: transparent;
    border-color: var(--ta-lp-card-accent, var(--ta-nc-green, #1a4a1a));
    color: var(--ta-lp-card-accent, var(--ta-nc-green, #1a4a1a));
    font-size: 18px;
    margin-top: 12px;
    margin-bottom: 20px;
}
.ta-lp-local-card--major .ta-lp-card-headline { font-size: 16px; }
.ta-lp-local-card--minor .ta-lp-card-headline { font-size: 14.5px; }
.ta-lp-tombstone-card .ta-lp-card-headline {
    color: var(--ta-off-white, #faf8f4);
    margin-bottom: 8px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}
.ta-lp-tombstone-card .ta-lp-card-teaser {
    color: #c9c2b4;
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 20px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
}
.ta-lp-card-eyebrow,
.ta-lp-card-headline,
.ta-lp-card-teaser {
    padding-left: 28px;
    padding-right: 28px;
}
.ta-lp-card-eyebrow { margin-top: 20px; }
.ta-lp-learn-more-btn { margin-bottom: 20px; }

/* Row 1 — red */
.ta-lp-band--education,
.ta-lp-band--inventions,
.ta-lp-band--service {
    background: linear-gradient(160deg, #7a1c1c 0%, #4a0f0f 100%);
}

/* Row 2 — black */
.ta-lp-band--sport,
.ta-lp-band--medical,
.ta-lp-band--legal {
    background: linear-gradient(160deg, #1a1a1a 0%, #000000 100%);
}

.ta-lp-band--service .ta-lp-card-eyebrow,
.ta-lp-band--service .ta-lp-learn-more-btn {
    color: var(--ta-gold, #b8962e);
    border-color: var(--ta-gold, #b8962e);
}
.ta-lp-band--service .ta-lp-card-medallion {
    border-bottom-color: var(--ta-gold, #b8962e);
}
/* ==========================================================================
   Two Americas — Luminaries Book
   All classes prefixed ta-lum- per project CSS isolation convention.
   ========================================================================== */

.ta-lum-book {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
    padding: 56px 20px 72px;
    background: var(--ta-black, #0f0f0f);
    font-family: Georgia, 'Times New Roman', serif;
    perspective: 2400px;
}

/* ---- Chapter tabs — styled like a book's tabbed edge ---- */

.ta-lum-toc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--ta-gold, #b8962e);
    padding-bottom: 20px;
}

.ta-lum-toc-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--ta-gray-border, #d0c8be);
    border-radius: 6px;
    color: var(--ta-off-white, #f2ede6);
    padding: 10px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.04em;
    transition: background-color .2s ease, border-color .2s ease;
}

.ta-lum-toc-num {
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--ta-gold, #b8962e);
    font-size: 13px;
}

.ta-lum-toc-btn:hover {
    border-color: var(--ta-gold, #b8962e);
}

.ta-lum-toc-btn.is-active {
    background: var(--ta-gold, #b8962e);
    color: #0a0a0a;
    border-color: var(--ta-gold, #b8962e);
}

.ta-lum-toc-btn.is-active .ta-lum-toc-num {
    color: #0a0a0a;
}

/* ---- Page container — hinge sits at the left edge ---- */

.ta-lum-pages {
    position: relative;
    min-height: 320px;
}

.ta-lum-page {
    display: none;
    transform-origin: left center;
    transform-style: preserve-3d;
}

.ta-lum-page.is-active {
    display: block;
}

@keyframes taLumFlipOut {
    0%   { transform: rotateY(0deg);   opacity: 1; }
    100% { transform: rotateY(-95deg); opacity: 0; }
}

@keyframes taLumFlipIn {
    0%   { transform: rotateY(95deg);  opacity: 0; }
    100% { transform: rotateY(0deg);   opacity: 1; }
}

.ta-lum-page.is-flipping-out {
    display: block;
    animation: taLumFlipOut .5s ease forwards;
}

.ta-lum-page.is-flipping-in {
    animation: taLumFlipIn .5s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .ta-lum-page.is-flipping-out,
    .ta-lum-page.is-flipping-in {
        animation: none;
    }
}

/* ---- Chapter heading — like a chapter's opening page ---- */

.ta-lum-chapter-head {
    text-align: center;
    margin-bottom: 36px;
}

.ta-lum-chapter-num {
    display: block;
    font-style: italic;
    font-size: 14px;
    color: var(--ta-gold, #b8962e);
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

.ta-lum-chapter-title {
    font-size: 30px;
    font-weight: 400;
    color: var(--ta-off-white, #f2ede6);
    margin: 0;
}

/* ---- Entry cards — flat rectangle, image banner top (no dome shapes) ---- */

.ta-lum-entry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 24px;
}

@media (max-width: 900px) {
    .ta-lum-entry-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }
}

.ta-lum-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #1c1c1c 0%, #0a0a0a 100%);
    border: 1px solid var(--ta-gray-border, #d0c8be);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.ta-lum-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
}

.ta-lum-card-image {
    width: 100%;
    height: 200px;
    border-bottom: 3px solid var(--ta-gold, #b8962e);
    overflow: hidden;
    flex-shrink: 0;
}

.ta-lum-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ta-lum-card-body {
    padding: 20px 24px 26px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.ta-lum-card-years {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ta-gold, #b8962e);
    margin: 0 0 8px;
}

.ta-lum-card-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--ta-off-white, #f2ede6);
    margin: 0 0 10px;
}

.ta-lum-card-achievement {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: #c9c2b4;
    margin: 0 0 18px;
}

.ta-lum-learn-more-btn {
    appearance: none;
    display: inline-block;
    background: var(--ta-gold, #b8962e);
    color: #0a0a0a;
    font-weight: 700;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    border: 2px solid var(--ta-gold, #b8962e);
    border-radius: 999px;
    padding: 10px 26px;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-decoration: none;
    margin-top: auto;
    transition: background-color .22s ease, color .22s ease;
}

.ta-lum-learn-more-btn:hover {
    background: #ffffff;
    border-color: #ffffff;
}

.ta-lum-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #888;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-style: italic;
    padding: 40px;
}