:root {
    color-scheme: dark;
    --deep: #05171d;
    --surface: #0c252c;
    --line: #24454a;
    --white: #f4f9f2;
    --muted: #b4cbca;
    --mint: #9debd6;
    --width: 1160px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--deep);
    color: var(--white);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; }
img, video { display: block; max-width: 100%; }
a { color: var(--mint); text-underline-offset: .22em; }
a:hover { color: white; }
a:focus-visible, summary:focus-visible, video:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
button, summary { cursor: pointer; }
.wrap { width: min(var(--width), calc(100% - 3rem)); margin-inline: auto; }
.skip { position: absolute; top: .5rem; left: .5rem; z-index: 3; transform: translateY(-160%); padding: .5rem 1rem; background: var(--deep); }
.skip:focus { transform: none; }
.site-header { border-bottom: 1px solid var(--line); background: #071b22; }
.header-inner, .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-block: 1.15rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--white); text-decoration: none; font-weight: 700; }
.brand img { width: 2rem; height: 2rem; }
nav { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1.35rem; }
nav a { color: var(--muted); text-decoration: none; font-size: .95rem; }
nav a[aria-current="page"] { color: var(--mint); text-decoration: underline; }
.hero { position: relative; isolation: isolate; background: #0b303a; min-height: 570px; display: grid; align-items: center; }
.hero img, .hero::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero img { object-fit: cover; object-position: center 48%; z-index: -2; }
.hero::after { content: ""; z-index: -1; background: linear-gradient(90deg, #031319 3%, #031319ed 23%, #0313198c 52%, #03131900 87%), linear-gradient(0deg, #0313198c, transparent 32%); }
.hero-content { padding-block: 4.5rem; }
.hero p:not(.eyebrow) { max-width: 32ch; font-size: clamp(1.06rem, 2vw, 1.24rem); color: #e0efeb; }
.eyebrow { margin: 0 0 .75rem; font-size: .78rem; color: var(--mint); font-weight: 750; text-transform: uppercase; letter-spacing: .18em; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; line-height: 1.06; font-weight: 500; }
h1 { font-size: clamp(2.9rem, 8vw, 6.1rem); margin: 0; letter-spacing: -.052em; }
h1 span { display: block; color: var(--mint); }
h2 { font-size: clamp(1.8rem, 4vw, 3.15rem); margin: 0 0 .8rem; letter-spacing: -.035em; }
h3 { font-size: 1.12rem; line-height: 1.3; margin: 0 0 .4rem; }
p { margin: 0 0 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.65rem; }
.button { display: inline-block; padding: .67rem 1.12rem; border-radius: .4rem; background: var(--mint); border: 1px solid var(--mint); color: #072721; font-weight: 700; text-decoration: none; }
.button:hover { background: #d1f9ec; color: #072721; }
.button.secondary { color: var(--white); background: #102a32; border-color: #527779; }
.button.secondary:hover { background: #21434b; }
.section { padding-block: clamp(2.8rem, 7vw, 5.5rem); }
.band { background: #081e25; border-block: 1px solid var(--line); }
.split { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: center; gap: clamp(1.3rem, 5vw, 4.25rem); }
.split p:not(.eyebrow), .intro > p:not(.eyebrow), .muted, figcaption { color: var(--muted); }
.frame { overflow: hidden; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); }
.frame img, video { width: 100%; height: auto; }
figure { margin: 0; }
figcaption { padding: .8rem 1rem; font-size: .92rem; }
.video-frame video { aspect-ratio: 16 / 9; background: #01090d; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1.55rem; }
.feature { padding-top: 1rem; border-top: 1px solid #46726f; }
.feature p { color: var(--muted); margin: 0; }
.intro { padding-block: clamp(2.7rem, 7vw, 5rem) 1.75rem; }
.intro h1 { font-size: clamp(2.7rem, 7vw, 5.1rem); margin-bottom: .8rem; }
.intro p { max-width: 64ch; }
.body-section { padding-bottom: clamp(3rem, 7vw, 5rem); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.gallery a { display: block; }
.gallery a:focus-visible { outline-offset: -4px; }
.reading { max-width: 74ch; }
.reading h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 1.75rem; }
.reading h2:first-child { margin-top: 0; }
.reading li { margin: .4rem 0; }
.reading a { overflow-wrap: anywhere; }
.callout { padding: 1.15rem 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: .55rem; }
.callout > :last-child { margin-bottom: 0; }
details { border-bottom: 1px solid var(--line); padding: .85rem 0; }
summary { font-weight: 700; }
details p { padding-top: .6rem; margin: 0; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.footer-inner { align-items: baseline; }

@media (max-width: 720px) {
    .wrap { width: calc(100% - 2rem); }
    .header-inner, .footer-inner { align-items: flex-start; flex-direction: column; }
    .hero { min-height: 510px; align-items: end; }
    .hero img { object-position: 62% center; }
    .hero::after { background: linear-gradient(0deg, #031319 0%, #031319eb 27%, #0313198c 62%, #03131922 100%); }
    .hero-content { padding-block: 4.5rem 2.5rem; }
    .split, .features, .gallery { grid-template-columns: minmax(0, 1fr); }
}