/* KAFD story site. Palette from kafd.sa (research/brand_palette.md): navy #0D1A3C, gold #C79E57, white, silver #D0D0CE,
   blue #008FCE, light background #EDEDF1, navy scale #243150 ... #E7E8EC. Type: Bebas Neue (titles), IBM Plex Sans (text),
   JetBrains Mono (figures and labels); IBM Plex Sans Arabic and Noto Sans SC on the Arabic and Chinese pages. */
:root {
  --navy: #0D1A3C; --navy-2: #243150; --navy-3: #3D4863; --navy-5: #6D768A; --navy-7: #9EA3B1; --navy-9: #CFD1D8; --navy-10: #E7E8EC;
  --gold: #C79E57; --gold-2: #D9BB89; --silver: #D0D0CE; --blue: #008FCE; --paper: #EDEDF1; --white: #FFFFFF;
  --l1: #00AEE6; --l4: #FED00B; --l6: #984B9D;
  --f-title: 'Bebas Neue', 'IBM Plex Sans', sans-serif; --f-text: 'IBM Plex Sans', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --gut: clamp(16px, 4vw, 48px);
}
.lang-ar { --f-title: 'IBM Plex Sans Arabic', sans-serif; --f-text: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; }
.lang-zh { --f-title: 'Noto Sans SC', sans-serif; --f-text: 'Noto Sans SC', 'IBM Plex Sans', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--navy); color: var(--white); font: 400 17px/1.65 var(--f-text); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--f-title); font-weight: 400; letter-spacing: .02em; line-height: 1.02; margin: 0 0 .5em; }
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-zh h1, .lang-zh h2, .lang-zh h3 { font-weight: 600; letter-spacing: 0; line-height: 1.25; }
h2 { font-size: clamp(34px, 5vw, 64px); }
.lang-ar h2, .lang-zh h2 { font-size: clamp(26px, 3.6vw, 44px); }
h3 { font-size: clamp(24px, 2.6vw, 34px); }
.lang-ar h3, .lang-zh h3 { font-size: clamp(19px, 2vw, 24px); }
p { margin: 0 0 1em; max-width: 72ch; }
.dim { color: var(--navy-7); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); }
.wrap.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.wrap.two.wide { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
@media (max-width: 900px) { .wrap.two, .wrap.two.wide { grid-template-columns: 1fr; } }

/* budotsmedia.com bar and local navigation */
.bm { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px var(--gut); background: #08112a; font: 400 18px/1 'Bebas Neue', sans-serif; letter-spacing: .08em; }
.bm a { text-decoration: none; color: var(--navy-9); }
.bm-brand { color: var(--white) !important; } .bm-brand span { color: var(--gold); }
.bm-links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.bm-links a[aria-current] { color: var(--gold); }
.local { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 8px var(--gut); background: rgba(13, 26, 60, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(199, 158, 87, .25); }
.local .home { font: 400 22px/1 'Bebas Neue', sans-serif; letter-spacing: .1em; background: var(--gold); color: var(--navy); padding: 6px 8px 4px; text-decoration: none; }
.local .links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.local .links a { white-space: nowrap; text-decoration: none; padding: 6px 10px; font-size: 14px; color: var(--navy-9); border-bottom: 2px solid transparent; }
.local .links a:hover, .local .links a[aria-current] { color: var(--white); border-color: var(--gold); }
.langs { display: flex; gap: 2px; }
.langs a { text-decoration: none; font-size: 13px; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .18); color: var(--navy-9); }
.langs a[aria-current] { background: var(--gold); color: var(--navy); border-color: var(--gold); }
@media (max-width: 760px) { .bm-links { display: none; } .local { flex-wrap: wrap; } .local .links { order: 3; flex-basis: 100%; } }

/* hero: the skyline fills the whole first screen; animated parts are never clipped by their tile */
.hero { position: relative; min-height: min(92vh, 980px); display: flex; align-items: flex-start; overflow: clip; }
.hero-vis { position: absolute; inset: 0; }
.skyline { width: 100%; height: 100%; display: block; overflow: visible; }
.skyline .sky { fill: url(#none); fill: var(--sky, #0D1A3C); }
.skyline.hero .sky { animation: dusk 36s ease-in-out infinite alternate; }
@keyframes dusk { 0% { fill: #3a3550; } 35% { fill: #1c2448; } 100% { fill: #0a1330; } }
.skyline .star { fill: #fff; opacity: .7; animation: tw 3.6s ease-in-out infinite; }
@keyframes tw { 50% { opacity: .15; } }
.skyline .city { fill: #17244a; }
.skyline .t .body { fill: hsl(226, 45%, calc(14% + var(--d) * 9%)); stroke: rgba(199, 158, 87, .22); stroke-width: .6; }
.skyline .wl { fill: #ffd9a0; opacity: .42; }
.skyline .win { opacity: .55; }
.skyline .avl { fill: #ff2a14; animation: avl 1.5s steps(1, end) infinite; filter: drop-shadow(0 0 3px #ff2a14); }
@keyframes avl { 0% { opacity: 1; } 33% { opacity: .08; } }
.skyline .viaduct, .skyline .pier { fill: #2c3a63; }
.skyline .train { animation: train 16s linear infinite; }
.skyline .train rect { fill: #dfe3e8; } .skyline .train .band { fill: var(--l1); }
@keyframes train { from { transform: translateX(var(--tx0)); } to { transform: translateX(var(--tx1)); } }
.skyline .palm path { fill: none; stroke: #0b1a12; stroke-width: 1.6; } .skyline .palm .fr { stroke: #10261a; stroke-width: 1.8; }
.skyline .ground { fill: #070d20; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(13, 26, 60, .92) 0%, rgba(13, 26, 60, .7) 38%, rgba(13, 26, 60, 0) 66%); }
.lang-ar .hero::after { background: linear-gradient(270deg, rgba(13, 26, 60, .92) 0%, rgba(13, 26, 60, .7) 38%, rgba(13, 26, 60, 0) 66%); }
@media (max-width: 760px) { .hero::after { background: linear-gradient(180deg, rgba(13, 26, 60, .9) 0%, rgba(13, 26, 60, .75) 60%, rgba(13, 26, 60, .2) 100%); } }
.hero-text { position: relative; z-index: 2; padding: clamp(28px, 7vh, 80px) var(--gut) 40px; max-width: 760px; }
.kicker { font: 500 13px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.kicker a { text-decoration: none; }
.hero h1 { font-size: clamp(54px, 9vw, 128px); line-height: .9; margin-bottom: 18px; }
.lang-ar .hero h1, .lang-zh .hero h1 { font-size: clamp(38px, 6vw, 76px); line-height: 1.15; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--navy-10); }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.btn { display: inline-block; text-decoration: none; padding: 12px 20px; font: 500 15px/1 var(--f-text); border: 1px solid transparent; transition: background .2s, color .2s; }
.btn.gold { background: var(--gold); color: var(--navy); } .btn.gold:hover { background: var(--gold-2); }
.btn.line { border-color: rgba(255, 255, 255, .5); color: var(--white); } .btn.line:hover { border-color: var(--gold); color: var(--gold); }
.btn.line.dark { border-color: var(--navy-5); color: var(--navy); }
.btn.navy { background: var(--navy); color: var(--white); } .btn.navy:hover { background: var(--navy-2); }

/* figures */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: rgba(199, 158, 87, .3); border-top: 1px solid rgba(199, 158, 87, .3); }
.fig { background: var(--navy); padding: 22px var(--gut) 24px; }
.fig b { display: block; font: 400 clamp(34px, 3.6vw, 48px)/1 'Bebas Neue', sans-serif; color: var(--gold); letter-spacing: .02em; }
.fig span { display: block; margin-top: 8px; font-size: 14px; color: var(--navy-9); line-height: 1.45; }

/* bands */
.band { padding: clamp(56px, 9vw, 120px) 0; position: relative; }
.band.light { background: var(--paper); color: var(--navy); }
.band.light .dim { color: var(--navy-5); }
.band.night { background: radial-gradient(ellipse at 70% 0%, #1b2a58 0%, #070d20 70%); }
.ticks { list-style: none; padding: 0; margin: 0 0 22px; }
.ticks li { padding: 6px 0 6px 22px; position: relative; border-bottom: 1px solid rgba(13, 26, 60, .12); }
.band:not(.light) .ticks li, .building .ticks li { border-color: rgba(255, 255, 255, .1); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 15px; width: 10px; height: 2px; background: var(--gold); }
.lang-ar .ticks li { padding: 6px 22px 6px 0; } .lang-ar .ticks li::before { left: auto; right: 0; }
.shots { display: grid; gap: 14px; }
.shot { margin: 0; position: relative; } .shot img { border: 1px solid rgba(13, 26, 60, .2); }
.shot figcaption { position: absolute; left: 10px; bottom: 10px; font: 500 12px/1 var(--f-mono); background: rgba(13, 26, 60, .85); color: var(--white); padding: 6px 8px; }

/* construction story */
.story { padding: clamp(56px, 9vw, 120px) 0 40px; }
.story .sub { color: var(--navy-9); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; max-width: 1400px; margin: 30px auto 0; padding: 0 var(--gut); }
.sticky { position: sticky; top: 64px; height: calc(100vh - 90px); max-height: 760px; align-self: start; border: 1px solid rgba(199, 158, 87, .25); background: #0a1330; overflow: hidden; }
.sticky .skyline { height: 100%; }
.yearbox { position: absolute; top: 14px; left: 18px; z-index: 2; font: 400 clamp(56px, 8vw, 110px)/1 'Bebas Neue', sans-serif; color: var(--gold); text-shadow: 0 2px 20px rgba(0, 0, 0, .5); }
.lang-ar .yearbox { left: auto; right: 18px; }
.skyline.build .sky { fill: #0a1330; }
.skyline.build .t .ghost { fill: none; stroke: rgba(199, 158, 87, .28); stroke-width: .8; stroke-dasharray: 4 3; transform: none !important; }
.skyline.build .t rect { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.004); transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.skyline.build .t.up rect { transform: scaleY(1); }
.skyline.build .t.unknown .body { fill: none; stroke: rgba(207, 209, 216, .35); stroke-dasharray: 3 3; }
.skyline.build .t.unknown.up .body { fill: hsl(226, 30%, calc(18% + var(--d) * 9%)); stroke: rgba(199, 158, 87, .2); stroke-dasharray: none; }
.skyline.build .t.unknown .win { display: none; } .skyline.build .t.unknown.up .win { display: inline; }
.skyline.build .t.unknown { transform: none; }
.skyline.build .t.unknown rect { transform: scaleY(1); }
.skyline.build .avl { opacity: 0; transition: opacity .6s; animation: none; } .skyline.build .avl.up { opacity: 1; animation: avl 1.5s steps(1, end) infinite; }
.chapters { padding: 10vh 0 30vh; }
.chapter { min-height: 70vh; padding: 28px 0; opacity: .35; transition: opacity .5s; }
.chapter.on { opacity: 1; }
.chapter .yr { font: 500 14px/1 var(--f-mono); color: var(--gold); letter-spacing: .12em; }
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .sticky { top: 52px; height: 42vh; z-index: 5; }
  .chapter { min-height: 55vh; background: linear-gradient(rgba(13, 26, 60, 0), var(--navy) 12%); }
}

/* masterplan */
.planbox { background: var(--navy); border: 1px solid rgba(13, 26, 60, .25); }
.plan { width: 100%; height: auto; display: block; overflow: visible; }
.plan .bg { fill: #0d1a3c; }
.plan .outline { fill: rgba(199, 158, 87, .06); stroke: rgba(199, 158, 87, .55); stroke-width: 3; stroke-dasharray: 10 8; }
.plan .b { stroke: rgba(13, 26, 60, .9); stroke-width: 1; }
.plan .l0 { fill: #3D4863; } .plan .l1 { fill: #565F77; } .plan .l2 { fill: #6D768A; } .plan .l3 { fill: #868D9D; } .plan .l4 { fill: #9EA3B1; }
.plan .l5 { fill: #B6BAC5; } .plan .l6 { fill: #CFD1D8; } .plan .l7, .plan .l8 { fill: #E7E8EC; }
.plan .link:hover { fill: var(--gold-2); cursor: pointer; }
.plan .hl { fill: var(--gold) !important; stroke: #fff; stroke-width: 2; }
.plan .sky { fill: none; stroke: var(--gold); stroke-width: 4; }
.plan .mono { fill: none; stroke: #2bb5a8; stroke-width: 4; stroke-dasharray: 12 8; }
.plan .metro { fill: none; stroke-width: 9; opacity: .95; }
.plan .heli circle { fill: #1f6f3f; stroke: #7dff9a; stroke-width: 3; } .plan .heli text { fill: #fff; font: 700 18px sans-serif; text-anchor: middle; }
.plan.small .sky, .plan.small .mono { stroke-width: 3; }
.legend { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 6px; font-size: 14px; }
.lg { display: inline-block; width: 22px; height: 6px; margin-inline-end: 8px; vertical-align: middle; }
.lg.t { background: linear-gradient(90deg, #3D4863, #E7E8EC); } .lg.s { background: var(--gold); } .lg.m { background: repeating-linear-gradient(90deg, #2bb5a8 0 6px, transparent 6px 10px); }
.lg.r { background: linear-gradient(90deg, var(--l1) 33%, var(--l4) 33% 66%, var(--l6) 66%); } .lg.h { background: #7dff9a; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px; background: rgba(199, 158, 87, .25); border: 1px solid rgba(199, 158, 87, .25); margin: 26px 0; }
.bc { background: var(--navy); padding: 18px 18px 20px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; min-height: 170px; transition: background .2s; }
.bc:hover { background: var(--navy-2); }
.bh { font: 400 44px/1 'Bebas Neue', sans-serif; color: var(--gold); } .bh small { font-size: 20px; }
.bn { font-weight: 600; font-size: 17px; line-height: 1.3; }
.ba { font-size: 13px; color: var(--navy-7); } .by { margin-top: auto; font: 12px/1 var(--f-mono); color: var(--navy-7); }

/* transport diagram */
.metro-diagram { width: 100%; height: auto; overflow: visible; }
.metro-diagram .st { fill: #fff; stroke: var(--navy); stroke-width: 3; } .metro-diagram .kafd { fill: var(--gold); stroke: var(--navy); stroke-width: 4; }
.metro-diagram .sn { font: 500 13px var(--f-text); text-anchor: middle; fill: var(--navy); }
.metro-diagram .ln { font: 700 15px var(--f-mono); text-anchor: middle; fill: #fff; }
.metro-diagram .tr { fill: #fff; stroke: var(--navy); stroke-width: 1.5; animation: mtr 9s ease-in-out infinite alternate; }
@keyframes mtr { from { transform: translateX(44px); } to { transform: translateX(600px); } }

/* after dark */
.avlsvg { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.avlsvg .skyn { fill: #0a1330; } .avlsvg .tw { fill: #1c2a55; } .avlsvg .tw2 { fill: #18244a; } .avlsvg .tw3 { fill: #142040; } .avlsvg .gnd { fill: #060b1c; }
.avlsvg .avl { fill: #ff2a14; animation: avl 1.5s steps(1, end) infinite; filter: drop-shadow(0 0 5px #ff2a14); }
.avlsvg .pad { fill: #2b3140; stroke: #f2f2f2; stroke-width: 1.5; } .avlsvg .tlof { fill: #45ff74; filter: drop-shadow(0 0 4px #45ff74); }
.avlsvg .padh { fill: #fff; font: 700 14px sans-serif; text-anchor: middle; }

/* chips, models, gallery, related */
.chips { list-style: none; padding: 0; margin: 20px 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-block; padding: 7px 12px; border: 1px solid rgba(13, 26, 60, .25); text-decoration: none; font-size: 14px; background: #fff; }
.chips a:hover { border-color: var(--gold); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 24px 0; }
.gallery figure { margin: 0; } .gallery img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.gallery figcaption { font: 11px/1.4 var(--f-mono); color: var(--navy-7); margin-top: 6px; }
.models { padding-inline-start: 20px; } .models li { margin: 6px 0; }
.rels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 24px; }
.rel { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: #fff; border-top: 3px solid var(--gold); text-decoration: none; color: var(--navy); transition: transform .2s; }
.rel:hover { transform: translateY(-3px); }
.rk { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; color: var(--navy-5); text-transform: uppercase; }
.rel b { font: 400 26px/1 'Bebas Neue', sans-serif; letter-spacing: .02em; } .lang-ar .rel b, .lang-zh .rel b { font: 600 19px/1.3 var(--f-text); }
.rel span:last-child { font-size: 14px; color: var(--navy-3); }
details { border-bottom: 1px solid rgba(255, 255, 255, .15); padding: 14px 0; }
details summary { cursor: pointer; font-weight: 600; font-size: 18px; } details p { margin-top: 10px; color: var(--navy-9); }
.srcs { columns: 3 220px; padding-inline-start: 18px; font-size: 14px; }

/* sub pages */
.sub { min-height: 60vh; }
.subhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; padding: 30px var(--gut) 40px; max-width: 1400px; margin: 0 auto; }
.subhero > svg, .subhero .locbox { width: 100%; max-height: 420px; }
.subhero .skyline.mini { height: 320px; }
.subhero h1 { font-size: clamp(40px, 6vw, 84px); }
.lang-ar .subhero h1, .lang-zh .subhero h1 { font-size: clamp(30px, 4.4vw, 54px); }
.subhero .alt { font-size: 20px; color: var(--gold-2); } .subhero .aka { color: var(--navy-7); font-size: 14px; }
@media (max-width: 900px) { .subhero { grid-template-columns: 1fr; } .subhero > svg, .subhero .locbox { order: 2; } }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(199, 158, 87, .25); border: 1px solid rgba(199, 158, 87, .25); margin: 0 0 28px; }
.facts div { background: var(--navy); padding: 14px 16px; }
.facts dt { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.facts dd { margin: 0; }
.building h2 { font-size: clamp(26px, 3vw, 38px); }
.tablewrap { overflow-x: auto; margin: 26px 0 60px; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
.data th { text-align: start; font: 500 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); padding: 10px; border-bottom: 1px solid var(--gold); }
.data td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); vertical-align: top; }
.data td.num { font-family: var(--f-mono); white-space: nowrap; }
.data a { color: var(--gold-2); }
.firms, .people { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: rgba(199, 158, 87, .25); margin: 10px 0 60px; }
.firms li, .people li { background: var(--navy); padding: 18px; } .firms h3, .people h3 { font-size: 24px; }
.lang-ar .firms h3, .lang-ar .people h3, .lang-zh .firms h3, .lang-zh .people h3 { font-size: 19px; }
.firms p, .people p { font-size: 14px; color: var(--navy-9); } .people .org { color: var(--gold-2); }
.tl { list-style: none; padding: 0; margin: 10px 0 60px; border-inline-start: 2px solid var(--gold); }
.tl li { padding: 6px 0 18px 22px; position: relative; } .lang-ar .tl li { padding: 6px 22px 18px 0; }
.tl li::before { content: ''; position: absolute; left: -7px; top: 12px; width: 12px; height: 12px; background: var(--navy); border: 2px solid var(--gold); }
.lang-ar .tl li::before { left: auto; right: -7px; }
.tl time { font: 500 14px/1 var(--f-mono); color: var(--gold); } .tl .src { font: 12px var(--f-mono); color: var(--navy-7); } .tl .src a { margin-inline-end: 10px; }
.pn { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 60px; } .pn a { color: var(--gold-2); text-decoration: none; }

.foot { padding: 40px var(--gut) 50px; background: #08112a; color: var(--navy-9); font-size: 14px; display: grid; gap: 14px; }
.foot .fl { display: flex; gap: 16px; flex-wrap: wrap; } .foot a { text-decoration: none; } .foot a:hover { color: var(--gold); }

/* reveal on scroll (only when the script runs) */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.cph { margin: 18px 0 0; } .cph img { border: 1px solid rgba(199, 158, 87, .25); } .cph figcaption, .gallery figcaption { font: 11px/1.45 var(--f-mono); color: var(--navy-7); margin-top: 6px; }
.cph a, .gallery a { color: inherit; }
.own { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; margin: 26px 0 34px; }
.ownvid { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid rgba(199, 158, 87, .3); }
.ownvid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .own { grid-template-columns: 1fr; } }
.vids { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 22px; }
.vid { margin: 0; } .vid video { width: 100%; height: auto; display: block; background: #000; border: 1px solid rgba(199, 158, 87, .3); }
.vid figcaption { font: 12px/1.5 var(--f-mono); color: var(--navy-9); margin-top: 6px; } .vid a { color: var(--gold-2); }
/* plans in sub-page headers fit their box (the plan is taller than wide) */
.subhero .locbox, .subhero > svg.plan { overflow: hidden; }
.subhero .locbox svg.plan, .subhero > svg.plan { width: 100%; height: min(440px, 60vh); }
.plan .hl { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(199, 158, 87, .9)); }
.planbox { overflow: hidden; }
@media (max-width: 760px) { .sticky { top: 98px; height: 34vh; } .yearbox { font-size: 52px; top: 8px; } }
.gallery.bl img { aspect-ratio: 16 / 9; }
.band.light .gallery figcaption { color: var(--navy-5); }