:root {
    color-scheme: light;
    --navy: #1f3740;
    --cream: #e5dcd0;
    --teal: #4a6f70;
    --brick: #a85336;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--navy);
    background: var(--cream);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; display: flex; flex-direction: column; }
.hero { display: grid; grid-template-columns: 40% 60%; flex: 1; min-height: min(720px, calc(100svh - 82px)); }
.branding { padding: clamp(36px, 5vw, 90px) clamp(24px, 3vw, 64px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
h1 { margin: 0; width: min(100%, 390px); }
.logo { display: block; width: 100%; height: auto; }
.tagline { font-size: clamp(15px, 1.25vw, 20px); line-height: 1.65; max-width: 360px; margin: 22px 0 0; text-wrap: balance; }
.announcement { margin-top: clamp(36px, 5vw, 64px); }
.rule { display: block; width: 44px; height: 2px; background: var(--brick); margin: 0 auto 20px; }
.announcement p { font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; margin: 0; }
.artwork { overflow: hidden; background: var(--teal); }
.artwork img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 65% center; }
footer { min-height: 82px; padding: 24px clamp(24px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #203a4426; }
footer p, footer a { margin: 0; font-size: 12px; line-height: 1.6; }
a { color: var(--navy); text-underline-offset: 4px; }
a:hover { color: var(--brick); }
a:focus-visible { outline: 3px solid var(--teal); outline-offset: 5px; }
.videos { padding: 56px clamp(24px, 5vw, 80px); }
h2 { font-size: 24px; font-weight: 500; margin: 0 0 28px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px; }
.video { max-width: 520px; }
.video img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.video h3 { font-size: 18px; font-weight: 500; line-height: 1.5; }
.video time { font-size: 13px; }
@media (min-width: 1600px) { .hero { min-height: 800px; } }
@media (max-width: 760px) {
    .hero { grid-template-columns: 1fr; min-height: auto; flex: initial; }
    .branding { padding: 46px 24px 40px; }
    h1 { width: min(76vw, 310px); }
    .tagline { max-width: 310px; margin-top: 20px; font-size: 16px; }
    .announcement { margin-top: 30px; }
    .rule { margin-bottom: 16px; }
    .artwork img { height: auto; object-fit: initial; }
    footer { min-height: 74px; padding: 24px; justify-content: center; flex-wrap: wrap; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }