:root{--zc-background:#f2eee3;--zc-surface:#faf6eb;--zc-ink:#294540;--zc-muted:#66766a;--zc-accent:#47655a;--zc-accent-ink:#fffbed;--zc-border:#cbd0bf;--zc-soft:#e4e5d6;--zc-seal:#a15e47;--zc-gold:#aa8250}*{box-sizing:border-box}body{margin:0;color:var(--zc-ink);background:var(--zc-background);font:14px/1.65 system-ui,sans-serif}main{max-width:1320px;margin:auto;padding:24px 30px;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,.8fr);gap:25px 34px}header{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--zc-muted)}.eyebrow,.edition{font-size:9px;letter-spacing:.17em}.intro{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px}.edition{color:var(--zc-muted)}h1,h2,.intro p,.art-caption p{font-family:Georgia,serif;font-weight:400}h1{font-size:clamp(35px,4.4vw,58px);line-height:1.1;margin:10px 0 0}.intro p{font-size:16px;font-style:italic;margin:0;color:var(--zc-muted)}h2{font-size:30px;line-height:1.18;margin:12px 0 18px}.landscape{position:relative;aspect-ratio:1.25;min-height:380px;border:1px solid var(--zc-border);outline:1px solid var(--zc-border);outline-offset:5px;isolation:isolate;overflow:hidden;background:var(--zc-soft)}canvas{position:absolute;left:0;right:0;top:70px;width:100%;height:calc(100% - 70px)}.art-caption{position:absolute;top:24px;left:25px;pointer-events:none;color:var(--zc-ink)}.art-caption p{font-size:17px;margin:7px 0}.seal{position:absolute;right:22px;bottom:62px;border:1px solid var(--zc-seal);padding:5px 7px;line-height:1.15;font-size:9px;color:var(--zc-seal);transform:rotate(-4deg)}.distance{position:absolute;bottom:20px;left:25px;right:25px;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--zc-ink);font-variant-numeric:tabular-nums}.distance span+span{font-size:9px}.controls{align-self:center}.controls>p{font-size:12px;color:var(--zc-muted)}button{font:inherit;min-height:48px;border:1px solid var(--zc-border);border-radius:4px;padding:11px 14px;background:var(--zc-surface);color:var(--zc-ink);cursor:pointer;touch-action:manipulation}button:disabled{opacity:.5;cursor:default}button:focus-visible{outline:3px solid var(--zc-accent);outline-offset:4px}.primary{display:block;width:100%;margin:23px 0 10px;background:var(--zc-accent);color:var(--zc-accent-ink);min-height:64px;touch-action:none;font-weight:600;user-select:none}#hold[aria-pressed=true]{background:var(--zc-ink)}#auto{width:100%}.row{display:flex;gap:8px;margin-top:10px}.row button{flex:1;font-size:12px}.journey-track{height:2px;background:var(--zc-border);margin:23px 0 13px}#fill{height:100%;width:0;background:var(--zc-gold)}.kept{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-size:10px;color:var(--zc-muted)}.controls .note{font-size:10px;margin-top:17px}#status{min-height:22px;font-size:11px}footer{grid-column:1/-1;color:var(--zc-muted);font-size:9px;text-align:center;margin-top:5px}@media(max-width:680px){main{padding:20px 21px 28px;display:flex;flex-direction:column;gap:20px}header{font-size:8px}.intro{display:block}.intro p{margin-top:12px;font-size:14px}.edition{font-size:8px}h1{font-size:42px}.landscape{min-height:330px;aspect-ratio:1}.art-caption{top:18px;left:18px}.art-caption p{font-size:15px}.distance{left:18px;right:18px;font-size:9px}.distance span+span{font-size:8px}.controls{width:100%}h2{font-size:27px;margin:7px 0 12px}.primary{margin-top:15px}.controls .note{font-size:11px}footer{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* The valley is the page's illustrated sheet; controls sit beside its margin. */
body{background:radial-gradient(circle at 14% 8%,var(--zc-surface),transparent 42%),var(--zc-background)}
main{column-gap:clamp(28px,4vw,70px);row-gap:22px}
header{padding-bottom:13px;border-bottom:1px solid var(--zc-border);text-transform:uppercase}
.intro{align-items:end;padding:9px 0 2px}
.intro p{max-width:260px;border-left:1px solid var(--zc-border);padding-left:22px}
.landscape{min-height:490px;aspect-ratio:1.46;border:8px solid var(--zc-surface);outline:1px solid var(--zc-border);outline-offset:0;box-shadow:0 26px 60px color-mix(in srgb,var(--zc-ink) 13%,transparent),inset 0 0 0 1px var(--zc-border)}
.landscape::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--zc-surface) 67%,transparent),transparent 27%,transparent 70%,color-mix(in srgb,var(--zc-ink) 20%,transparent));z-index:1}
.landscape canvas{top:0;height:100%}
.art-caption,.distance,.seal{z-index:2}
.art-caption{top:22px;left:24px;padding:12px 18px 13px 0;border-bottom:1px solid color-mix(in srgb,var(--zc-ink) 30%,transparent)}
.art-caption p{font-size:clamp(17px,2vw,24px);line-height:1.2}
.distance{align-items:end;color:var(--zc-surface);text-shadow:0 1px 8px var(--zc-ink);letter-spacing:.1em}
.distance span:first-child{font:400 clamp(14px,1.5vw,19px)/1.1 Georgia,serif}
.seal{bottom:76px;background:color-mix(in srgb,var(--zc-surface) 75%,transparent)}
.controls{position:relative;padding:24px 0 14px;border-top:3px solid var(--zc-accent)}
.controls::before{content:"01 / THE FLIGHT";position:absolute;right:0;top:-22px;font-size:9px;letter-spacing:.18em;color:var(--zc-muted)}
.primary{border-radius:999px;box-shadow:0 11px 25px color-mix(in srgb,var(--zc-accent) 19%,transparent);transition:transform .2s,box-shadow .2s}
.primary:active{transform:scale(.985);box-shadow:0 4px 12px color-mix(in srgb,var(--zc-accent) 22%,transparent)}
#auto{border-radius:999px;background:transparent}
.journey-track{height:6px;border-radius:99px;overflow:hidden;background:var(--zc-soft)}
#fill{border-radius:inherit;transition:width .18s linear}
@media(max-width:680px){main{gap:19px;padding:18px 16px 28px}.intro{padding:0}.intro p{border-left:0;padding:0;max-width:none}.landscape{min-height:380px;aspect-ratio:1.04;border-width:5px}.art-caption{top:12px;left:14px;padding:8px 12px 8px 0}.distance{left:13px;right:13px;bottom:13px;flex-wrap:wrap}.seal{right:14px;bottom:57px}.controls{padding-top:19px}.primary{min-height:60px}}
@media(prefers-reduced-motion:reduce){.primary,#fill{transition:none!important}}
@media(max-width:680px){main{padding:12px 14px 20px;gap:12px}header{padding-bottom:5px}.intro p{font-size:12px;line-height:1.25;margin-top:4px}.intro p br{display:none}h1{font-size:35px;margin-top:3px}.landscape{height:300px;min-height:300px;aspect-ratio:auto}.art-caption p{font-size:14px}.controls{padding-top:11px}.controls::before{top:-18px;font-size:8px}.controls h2{font-size:22px;margin:4px 0 7px}.controls>p{margin:5px 0;font-size:11px}.primary{min-height:52px;margin:8px 0 7px}}
:root{--zc-scene-ink:#294540}
.landscape .art-caption{color:var(--zc-scene-ink)}
.landscape .art-caption .eyebrow{color:var(--zc-scene-ink)}
[data-motion=reduced] .primary,[data-motion=reduced] #fill{transition:none!important}

/* Round two: a horizon-sized flight, with a small pilot's log at its edge. */
:root{--zc-flight-sky:#e2dfcd;--zc-flight-ink:#2d4b48;--zc-flight-card:#f4eedb;--zc-flight-rail:#9f7955;--zc-flight-paper:#f3efe2}
body{background:linear-gradient(180deg,var(--zc-flight-sky),var(--zc-flight-paper) 72%)}
main{display:block;max-width:1320px;padding:17px 25px 30px}
header{padding:4px 0 10px}
.intro{display:flex;padding:13px 0 15px}
.intro h1{font-size:clamp(41px,5vw,65px);letter-spacing:-.065em}
.intro p{font-size:14px;color:var(--zc-flight-ink)}
.landscape{width:100%;height:clamp(490px,61vh,670px);min-height:0;aspect-ratio:auto;border:0;outline:0;background:var(--zc-flight-sky);box-shadow:0 23px 55px color-mix(in srgb,var(--zc-flight-ink) 18%,transparent)}
.landscape::before{content:"1000 LI\A 750\A 500\A 250\A 0";white-space:pre;position:absolute;z-index:3;top:26%;left:23px;color:var(--zc-scene-ink);font:9px/5.4 Arial,sans-serif;letter-spacing:.15em;border-left:1px solid color-mix(in srgb,var(--zc-scene-ink) 44%,transparent);padding-left:9px;pointer-events:none}
.landscape::after{background:linear-gradient(180deg,color-mix(in srgb,var(--zc-flight-sky) 53%,transparent),transparent 29%,transparent 69%,color-mix(in srgb,var(--zc-flight-ink) 32%,transparent))}
.landscape canvas{top:0;height:100%}
.art-caption{top:23px;left:31px;border:0;padding:0;color:var(--zc-scene-ink)}
.art-caption p{font-size:clamp(20px,2.4vw,30px);max-width:16ch}
.distance{left:31px;right:31px;bottom:25px;color:var(--zc-flight-card)}
.seal{right:31px;bottom:65px}
.controls{z-index:4;position:relative;width:min(390px,38%);margin:-240px 36px 0 auto;padding:23px 24px 18px;background:color-mix(in srgb,var(--zc-flight-card) 94%,transparent);border:1px solid color-mix(in srgb,var(--zc-flight-rail) 65%,transparent);box-shadow:0 17px 38px color-mix(in srgb,var(--zc-flight-ink) 20%,transparent);backdrop-filter:blur(7px)}
.controls::before{top:-19px;right:0;color:var(--zc-flight-ink)}
.controls h2{font-size:29px;color:var(--zc-flight-ink)}
.controls>p,.kept{color:var(--zc-flight-ink)}
.controls .primary{border-radius:2px;min-height:58px;box-shadow:none}
.controls #auto,.controls .row button{border-radius:2px}
.journey-track{background:var(--zc-flight-sky)}
footer{text-align:left;margin:38px 0 0}
@media(max-width:680px){main{padding:10px 13px 20px}.intro{display:block;padding:6px 0 8px}.intro h1{font-size:34px}.intro p{font-size:11px;max-width:none}.landscape{height:299px}.landscape::before{top:31%;left:8px;font-size:7px;line-height:4.2}.art-caption{top:13px;left:15px}.art-caption p{font-size:16px}.distance{left:14px;right:14px;bottom:11px}.seal{right:13px;bottom:42px}.controls{width:100%;margin:11px 0 0;padding:12px 15px 13px;box-shadow:none}.controls::before{display:none}.controls h2{font-size:21px}.controls .primary{min-height:48px}.controls .note{margin:9px 0 0}footer{margin:14px 0 0}}
body,header,.intro .edition,.intro h1,.controls .eyebrow,.controls .kept,.controls .note,footer{color:var(--zc-flight-ink)}
.controls #auto,.controls .row button{background:var(--zc-flight-card);color:var(--zc-flight-ink);border-color:var(--zc-flight-rail)}

/* Flight scales with the viewport; the pilot log scrolls without moving the horizon. */
html,body{height:100%;overflow:hidden}
main{height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:8px}
header,.intro,footer{flex:none}
.intro{padding:8px 0 10px}
.landscape{flex:1 1 0;height:auto;min-height:0}
.controls{flex:none;max-height:min(45dvh,360px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;margin-top:max(-240px,-33dvh)}
.controls:focus-visible{outline:2px solid var(--zc-flight-ink);outline-offset:-2px}
footer{margin:8px 0 0}
@media(max-width:680px){main{padding:6px 10px 5px}.intro{padding:3px 0 5px}.intro h1{font-size:clamp(27px,8vw,33px)}.intro p{margin-top:2px;line-height:1.15}.landscape{height:auto;min-height:0}.controls{flex:0 1 auto;width:100%;max-height:min(41dvh,300px);margin:6px 0 0;padding:8px 12px}.controls h2{font-size:19px}.controls .primary{min-height:44px;margin:5px 0}.controls .note{margin:5px 0 0}.row{margin-top:5px}footer{margin:3px 0 0}}
@media(min-width:681px) and (max-height:760px){.controls{max-height:min(56dvh,400px)}}