:root {
    color-scheme: light;
    --ink: #151821;
    --secondary: #535c6c;
    --blue: #1b559f;
    --gutter: clamp(20px, 4.6vw, 68px);
    font: 100%/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: #fff;
}

* { box-sizing: border-box; }
body, h1, h2, p, figure { margin: 0; }
.page { max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
a { color: var(--blue); text-underline-offset: .21em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid #4184da; outline-offset: 4px; }
.skip { position: absolute; z-index: 3; inset: .4rem auto auto var(--gutter); padding: .5rem 1rem; background: white; transform: translateY(-140%); }
.skip:focus { transform: none; }

.app-heading { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); padding-block: clamp(28px, 3.4vw, 52px); }
.app-icon, .home-link img { display: block; border-radius: 23%; }
.app-icon { width: clamp(76px, 8.4vw, 112px); height: auto; }
.app-heading h1 { font-size: clamp(2.1rem, 3.5vw, 3.25rem); font-weight: 700; line-height: 1.03; letter-spacing: -.052em; }
.subtitle { margin-top: .28rem; color: var(--secondary); font-size: clamp(1rem, 1.45vw, 1.25rem); }
.publisher { display: inline-block; margin-top: .18rem; font-size: .86rem; font-weight: 600; text-decoration: none; }
.publisher:hover, .home-link:hover { text-decoration: underline; }
.status { margin-left: auto; color: var(--secondary); font-size: .88rem; }

.feature {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    min-height: clamp(415px, 37vw, 525px);
    padding: clamp(36px, 4.6vw, 70px);
    border-radius: 24px;
    background: #142438;
    color: #fff;
}
.coast { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 61% 67%; }
.feature-copy h2 { font-size: clamp(3rem, 5vw, 5.1rem); font-weight: 680; letter-spacing: -.058em; line-height: .99; }
.feature-copy p { max-width: 33ch; margin-top: 1.1rem; font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.5; text-wrap: pretty; }
.wheel { justify-self: end; width: min(100%, 325px); text-align: center; }
.wheel img { display: block; width: 100%; height: auto; border-radius: 50%; box-shadow: 0 10px 32px #111a2b45; }
.wheel figcaption { display: inline-block; margin-top: .85rem; padding: .2rem .7rem; border-radius: 1rem; background: #122032d9; color: #fff; font-size: .8rem; font-variant-numeric: tabular-nums; }

footer { margin-top: clamp(36px, 4.6vw, 70px); background: #f4f5f7; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr .6fr; gap: 20px; padding-block: 1.65rem 1.45rem; }
.footer-grid h2 { margin-bottom: .38rem; font-weight: 650; font-size: .86rem; }
.footer-grid p, .footer-grid a, .copyright { font-size: .83rem; }
.footer-grid p, .copyright { color: var(--secondary); }
.footer-grid nav a { display: table; }
.footer-grid nav a + a { margin-top: .1rem; }
.copyright { padding-bottom: 1.4rem; }
body:has(.reading) { min-height: 100svh; display: flex; flex-direction: column; }
body:has(.reading) > .page, body:has(.reading) > footer { width: 100%; }
body:has(.reading) > footer { margin-top: auto; }
.subhead { padding-block: 1.5rem; }
.home-link { display: inline-flex; align-items: center; gap: .65rem; font-size: 1.45rem; font-weight: 650; letter-spacing: -.045em; color: inherit; text-decoration: none; }
.reading { width: min(100%, 46rem); margin: 1.5rem auto 3.5rem; padding-inline: var(--gutter); }
.reading h1 { margin-bottom: .25em; font-size: clamp(2.4rem, 4.5vw, 3.75rem); letter-spacing: -.05em; line-height: 1.12; }
.reading h2 { margin-block: 1.4em .3em; font-size: 1.25rem; letter-spacing: -.02em; }
.reading address { margin-bottom: .7rem; font-style: normal; }
.reading p + p { margin-top: .7rem; }
.date { color: var(--secondary); font-size: .88rem; }

@media (max-width: 720px) {
    .app-heading { display: grid; grid-template-columns: auto 1fr; gap: .3rem 16px; }
    .app-icon { grid-row: span 2; }
    .status { grid-column: 2; margin: 0; font-size: .8rem; }
    .app-heading h1 { font-size: 2.2rem; }
    .subtitle { margin-top: .15rem; }
    .publisher { margin: 0; }
    .feature { grid-template-columns: 1fr; gap: 1.4rem; padding: 26px 24px; border-radius: 18px; }
    .coast { object-position: 53% center; }
    .feature-copy h2 { font-size: clamp(2.5rem, 8vw, 3.8rem); }
    .feature-copy p { max-width: 31ch; margin-top: .7rem; }
    .wheel { width: min(100%, 240px); justify-self: center; }
    .wheel img { width: min(100%, 55vw); margin-inline: auto; }
    .wheel figcaption { margin-top: .55rem; }
    .footer-grid { grid-template-columns: 1.7fr 1fr; gap: 1.2rem; }
    .footer-grid section:first-child { grid-column: 1 / -1; }
}