/* Design 4: Aerial. Cinematic photo-led chapters on a dark stage. */
.v4 { background: #070e10; }
.ae { background: #070e10; position: relative; }
.ae .breadcrumb { color: #aab8ba; flex-wrap: wrap; }
.ae .breadcrumb a { color: var(--teal-deep); }
.ae .breadcrumb span[aria-current] { color: #fff; font-weight: 600; }
.ae .breadcrumb span[aria-hidden] { color: #8ea1a3; opacity: .6; }

/* hero */
.ae-hero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; padding: 34px 0 52px; overflow: hidden; isolation: isolate; }
.ae-hero-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 14, 16, .55) 0%, rgba(7, 14, 16, .15) 38%, rgba(7, 14, 16, .88) 82%, #070e10 100%), url('/assets/img/jfk/jfk-hero-sunset-2400.webp') center 40% / cover no-repeat; }
.ae-hero-in { width: 100%; }
.ae-kick { margin: 36px 0 10px; font: 500 13px 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-bright); }
.ae-hero h1 { font-size: clamp(46px, 9vw, 112px); line-height: .96; letter-spacing: -.02em; color: #fff; margin: 0 0 18px; max-width: 12ch; }
.ae-dek { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; color: #d9e3e4; max-width: 50ch; margin: 0 0 28px; }
.ae-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; max-width: 980px; }
.ae-chips > div { border-top: 2px solid var(--gold-bright); padding-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.ae-chips b { font: 600 clamp(26px, 3.4vw, 40px)/1 'Fraunces', serif; color: #fff; }
.ae-chips span { font-size: 13.5px; color: #b9c6c7; line-height: 1.35; }
@media (max-width: 760px) { .ae-chips { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; } .ae-hero { min-height: 86vh; } }
.ae-cr { margin: 0; font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, .72); }
.ae-cr a { color: #fff; text-decoration: underline; }
.ae-cr-hero { position: absolute; right: 28px; bottom: 16px; max-width: 46ch; text-align: right; }
@media (max-width: 760px) { .ae-cr-hero { left: 20px; right: 20px; text-align: left; } }

.ae .units { margin-top: 4px; }

/* lede */
.ae-lede { padding: 56px 0 30px; }
.ae-lede-in { max-width: 820px; margin: 0 auto; }
.ae-lede-in p { font: 500 clamp(20px, 2.6vw, 28px)/1.5 'Fraunces', serif; color: #e5ecec; margin: 0 0 .9em; }
.ae-lede-in p:first-child::first-letter { font-size: 3.4em; float: left; line-height: .85; padding: 6px 12px 0 0; color: var(--gold-bright); font-weight: 700; }
.ae-lede-in p:not(:first-child) { color: #aebdbf; font-size: clamp(17px, 2vw, 21px); font-family: 'Public Sans', sans-serif; font-weight: 400; line-height: 1.65; }

/* chapter banners */
.ae-ch { position: relative; scroll-margin-top: 0; }
.ae-banner { position: relative; min-height: clamp(300px, 52vh, 520px); display: flex; align-items: flex-end; padding: 0 0 120px; background: linear-gradient(180deg, rgba(7, 14, 16, .35), rgba(7, 14, 16, .1) 40%, #070e10 100%), var(--img) var(--pos, center) / cover no-repeat; }
@media (min-width: 960px) and (hover: hover) { .ae-banner { background-attachment: scroll, fixed; } }
.ae-banner .container { width: 100%; }
.ae-n { margin: 0 0 8px; font: 600 13px 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright); }
.ae-banner h2, .ae-plainhead h2 { font-size: clamp(38px, 6.4vw, 78px); line-height: 1; color: #fff; margin: 0; letter-spacing: -.016em; max-width: 16ch; }
.ae-sub { margin: 14px 0 0; font-size: clamp(16px, 1.9vw, 20px); line-height: 1.5; color: #d2dddf; max-width: 56ch; }
.ae-banner .ae-cr { position: absolute; right: 28px; bottom: 96px; max-width: 46ch; text-align: right; }
@media (max-width: 760px) { .ae-banner { padding-bottom: 96px; } .ae-banner .ae-cr { left: 20px; right: 20px; bottom: 74px; text-align: left; } }
.ae-plainhead { padding: 76px 0 28px; border-top: 1px solid #16282c; }
.ae-body { position: relative; z-index: 1; padding-bottom: 80px; }
.ae-banner + .ae-body { margin-top: -78px; }
.ae-plainhead + .ae-body { margin-top: 0; }

/* prose */
.ae-prose { max-width: 760px; margin-bottom: 8px; }
.ae-prose p { font-size: clamp(17px, 1.9vw, 19.5px); line-height: 1.7; color: #c9d5d6; margin: 0 0 1.1em; }
.ae-h3 { font: 600 clamp(28px, 4vw, 46px)/1.08 'Fraunces', serif; color: #fff; margin: 70px 0 14px; letter-spacing: -.01em; }
.ae-lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: #e5ecec; max-width: 62ch; margin: 0 0 20px; }
.ae-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 26px 0 30px; padding: 22px 0; border-top: 1px solid #263d41; border-bottom: 1px solid #263d41; }
.ae-big-n { margin: 0; font: 600 clamp(48px, 9vw, 104px)/.95 'Fraunces', serif; color: var(--gold-bright); letter-spacing: -.02em; }
.ae-big-t { margin: 0; font-size: clamp(17px, 2vw, 21px); line-height: 1.45; color: #d9e3e4; max-width: 34ch; }
.ae-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
@media (max-width: 960px) { .ae-two { grid-template-columns: minmax(0, 1fr); } }
.ae-body > .fig, .ae-body > .pick { margin-bottom: 16px; }
.ae .fig { backdrop-filter: blur(8px); }
.ae .mpanel { background: rgba(13, 25, 28, .86); border-color: var(--line); backdrop-filter: blur(8px); }
.ae .mp-name { color: #fff; }
.ae .mp-line { color: var(--gold-bright); }
.ae .mp-copy p { color: #c9d5d6; }
.ae .mp-tiles > div { background: #101d20; border: 1px solid var(--line); }
.ae .mp-tiles dd { color: var(--gold-bright); }
.ae .mp-tiles dt { color: #8ea1a3; }
.ae .rc-v { font-family: 'Fraunces', serif; }
.ae .seg-b { font-size: 13.5px; }

/* chapter rail */
.ae-rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 60; }
.ae-rail ol { list-style: none; margin: 0; padding: 0; border: 0; display: grid; gap: 4px; }
.ae-rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 5px 0; margin: 0; border: 0; background: none; }
.ae-rail a i { width: 9px; height: 9px; border-radius: 50%; background: #3b5256; transition: transform .15s, background .15s; flex: none; }
.ae-rail a span { font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(7, 14, 16, .9); border: 1px solid #263d41; padding: 4px 8px; border-radius: 4px; opacity: 0; transform: translateX(6px); transition: opacity .15s, transform .15s; pointer-events: none; white-space: nowrap; order: -1; }
.ae-rail a:hover span, .ae-rail a.on span { opacity: 1; transform: none; }
.ae-rail a.on i { background: var(--gold-bright); transform: scale(1.5); }
.ae-rail a:hover i { background: #8ea1a3; }
@media (max-width: 1200px) { .ae-rail { display: none; } }