:root{
  --ink:#ece8df; --muted:#b4ada0; --rule:rgba(236,232,223,.18);
  --accent:#f0962a; --accent-ink:#1a1206;
  --panel:rgba(14,17,22,.82); --paper:#f3efe6; --paper-ink:#1d1d1b;
  --todo:#ffe17a; --todo-ink:#3b2f00;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#0b0d11;color:var(--ink);font:18px/1.65 Georgia,"Times New Roman",serif}
.bg{position:fixed;inset:0;z-index:-2;background:#0b0d11 url("bg-city.jpg") center 30%/cover no-repeat;opacity:1;will-change:opacity}
@media (max-width:800px){.bg{background-image:url("bg-city-768.jpg")}}
.veil{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,13,17,.15) 0%,rgba(11,13,17,.55) 55%,rgba(11,13,17,.9) 100%)}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:62rem;margin:0 auto;padding:1rem 1rem 0}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font:600 .8rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
.brand img{width:40px;height:40px}
.bar nav{white-space:nowrap}
.bar nav a{color:var(--muted);text-decoration:none;font:600 .78rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;margin-left:1.2rem}
.bar nav a:hover{color:var(--ink)}
.hero{min-height:88vh;display:flex;flex-direction:column;justify-content:flex-end;max-width:62rem;margin:0 auto;padding:4rem 1rem 3rem}
.hero.short{min-height:52vh}
.hero img.logo{width:96px;height:auto;margin-bottom:1.5rem}
h1{font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.08;margin:0 0 1rem;font-weight:700;max-width:16ch;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.lede{font-size:1.15rem;max-width:34rem;margin:0;text-shadow:0 1px 10px rgba(0,0,0,.7)}
main{max-width:62rem;margin:0 auto;padding:0 1rem 3rem}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:2rem 1.5rem;margin:0 0 1.5rem;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.25rem 2.5rem}
h2{font-size:1.02rem;margin:0 0 .35rem;font-weight:700;color:var(--ink)}
h2.k{font:600 .78rem/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem}
p{margin:0 0 1rem}
.cols p:last-child{margin-bottom:0}
.formcard{background:var(--paper);color:var(--paper-ink);border-radius:6px;padding:.25rem 0;min-height:12rem;overflow:hidden}
.formcard noscript{display:block;padding:.5rem 0 1rem;font-size:.95rem}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.5rem;align-items:start}
.note{color:var(--muted);font-size:.92rem}
footer{max-width:62rem;margin:0 auto;padding:1.5rem 1rem 3rem;color:var(--muted);font-size:.85rem;border-top:1px solid var(--rule)}
footer p{margin:0 0 .4rem}
.todo{background:var(--todo);color:var(--todo-ink);font:600 .82rem/1.4 ui-monospace,Menlo,Consolas,monospace;padding:.1rem .35rem;border-radius:3px}
@media (max-width:560px){.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.bar nav a{font-size:.72rem}body{font-size:17px}.panel{padding:1.5rem 1.1rem}.bar nav a{margin-left:.8rem}.hero{padding-top:3rem}}