:root{--ink:#232323;--dark:#1E1E1E;--gold:#D4A52A;--white:#FFFFFF;--rise:0px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Jost",Arial,sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background:var(--white)}
img{display:block;max-width:100%}
a{color:var(--ink)}
.label{text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:500}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
header.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:20px 28px;color:var(--ink);mix-blend-mode:difference;color:#fff}
header.top a{text-decoration:none;color:inherit}
header.top nav a{margin-left:28px}
.brand{letter-spacing:.3em;text-transform:uppercase;font-weight:500;font-size:13px}
/* horizon field: white above, dark rising from the bottom as the page scrolls */
.field{position:fixed;left:0;right:0;bottom:0;height:var(--rise);background:var(--dark);z-index:0;pointer-events:none}
main{position:relative;z-index:1}
section{position:relative;min-height:100vh;display:flex;align-items:center}
.hero h1{font-weight:300;font-size:clamp(40px,7vw,96px);line-height:1.02;margin:0 0 28px;letter-spacing:-.01em}
.hero p{max-width:560px;font-size:19px}
.rule{width:64px;height:1px;background:var(--gold);margin:28px 0}
.photo{position:relative;min-height:90vh;color:#fff;background-size:cover;background-position:center}
.photo::before{content:"";position:absolute;inset:0;background:rgba(30,30,30,.62)}
.photo .wrap{position:relative;z-index:1;padding-top:14vh;padding-bottom:14vh}
.photo h2{font-weight:300;font-size:clamp(30px,4.2vw,56px);line-height:1.1;margin:0 0 20px;max-width:760px}
.photo p{max-width:620px;font-size:18px;color:#f1efe9}
.plane{background:rgba(255,255,255,.9);padding:44px;max-width:640px;margin-top:28px}
.dark{background:var(--dark);color:#f1efe9}
.dark .wrap{padding-top:16vh;padding-bottom:16vh}
.dark h2{font-weight:300;font-size:clamp(30px,4vw,52px);line-height:1.1;margin:0 0 20px}
.dark a{color:var(--gold)}
/* diagnostic */
#diagnostic .wrap{padding-top:14vh;padding-bottom:14vh}
#diagnostic h2{font-weight:300;font-size:clamp(30px,4vw,52px);margin:0 0 12px;line-height:1.1}
.q{border-top:1px solid rgba(35,35,35,.18);padding:26px 0}
.q h3{font-weight:400;font-size:20px;margin:0 0 14px}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opts button{font:inherit;font-size:16px;background:transparent;border:1px solid var(--ink);padding:10px 18px;cursor:pointer;color:var(--ink)}
.opts button[aria-pressed="true"]{background:var(--ink);color:#fff}
.opts button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#result{margin-top:34px;padding:36px;border-left:3px solid var(--gold);background:#f6f4ef;display:none}
#result h3{font-weight:400;font-size:24px;margin:0 0 12px}
#result p{margin:0 0 14px;max-width:640px}
.ghost{font:inherit;background:none;border:0;border-bottom:1px solid var(--ink);padding:0;cursor:pointer;font-size:17px}
/* library preview */
.lib-list{margin-top:36px;border-top:1px solid rgba(255,255,255,.2)}
.lib-list li{list-style:none;display:flex;justify-content:space-between;gap:24px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.lib-list ul{padding:0;margin:0}
.lib-list .tier{color:var(--gold);min-width:110px}
footer{background:var(--dark);color:#bdbab3;padding:56px 0;font-size:15px}
footer a{color:#fff}
.rings{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2}
.rings circle{fill:none;stroke:var(--gold);stroke-opacity:.35;stroke-width:1}
@media (max-width:720px){header.top nav{display:none}.plane{padding:26px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rings{display:none}}