:root { --ink: #efe9dd; --muted: #aaa398; --night: #050505; --gold: #e9bc42; --line: #33332f; }
* { box-sizing: border-box; }
html { background: var(--night); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 73% 20%, #121212 0, #090909 28%, var(--night) 68%); font-family: "Bebas Neue", Impact, sans-serif; }
body::before { position: fixed; z-index: 0; inset: 0; content: ""; pointer-events: none; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px); background-size: 4rem 4rem; }
.loader { position: fixed; z-index: 10; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; background: var(--night); transition: opacity .65s ease, visibility .65s ease; }
.loader.is-gone { opacity: 0; visibility: hidden; }
.loader-brand { display: flex; align-items: center; justify-content: center; gap: clamp(.75rem, 2vw, 1.2rem); }
.loader-cat { width: clamp(2.5rem, 5vw, 3.5rem); height: clamp(2.5rem, 5vw, 3.5rem); object-fit: contain; }
.loader-mark { font: italic 600 clamp(2.6rem, 7vw, 5rem)/.8 "Cormorant Garamond", Georgia, serif; letter-spacing: -.035em; }
.loader-mark span { color: var(--gold); }
.loader-copy { margin: 0; color: var(--muted); font-size: .65rem; letter-spacing: .28em; text-transform: uppercase; }
.loader-line { width: min(18rem, 72vw); height: 1px; margin-top: .15rem; overflow: hidden; background: #32323b; }
.loader-line span { display: block; width: 100%; height: 100%; transform: translateX(-100%); background: var(--gold); animation: load 1s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes load { to { transform: translateX(0); } }
.page-header, main { position: relative; z-index: 1; width: min(76rem, calc(100% - 3rem)); margin-inline: auto; }
.page-header { display: flex; align-items: center; justify-content: space-between; padding-top: clamp(1.8rem, 5vw, 4rem); }
.logo { color: var(--ink); font: italic 600 clamp(2.1rem, 4.3vw, 4rem)/.7 "Cormorant Garamond", Georgia, serif; letter-spacing: -.035em; text-decoration: none; }
.logo span { color: var(--gold); }
.eyebrow, .kicker { margin: 0; color: var(--muted); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }
main { padding: clamp(5rem, 13vw, 10rem) 0 5rem; }
.intro { max-width: 42rem; }
.kicker { color: var(--gold); }
h1, h2 { margin: 0; font-weight: 400; }
h1 { margin-top: .4rem; font-size: clamp(4.4rem, 13vw, 10rem); line-height: .8; letter-spacing: .015em; }
.intro > p:last-child { max-width: 26rem; margin: 1.7rem 0 0; color: var(--muted); font: 1.05rem/1.45 "Cormorant Garamond", Georgia, serif; }
.commands-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); max-width: 56rem; margin-top: clamp(4rem, 9vw, 7rem); }
.command-category { padding-top: .8rem; border-top: 1px solid var(--line); }
h2 { display: flex; align-items: baseline; gap: .7rem; font-size: clamp(2.1rem, 4vw, 3.5rem); letter-spacing: .035em; }
h2 small { color: var(--gold); font-size: .37em; letter-spacing: .08em; }
ul { margin: 1.2rem 0 0; padding: 0; list-style: none; }
li { display: grid; grid-template-columns: minmax(5.75rem, .7fr) 1.35fr; gap: .8rem; align-items: center; min-height: 4.15rem; padding: .7rem 0; border-top: 1px solid #252523; }
code { color: var(--gold); font: 1.15rem/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .08em; }
li span { color: #d4cec3; font: 500 clamp(.86rem, 1.4vw, 1rem)/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
@media (max-width: 650px) { .page-header, main { width: min(100% - 2.8rem, 32rem); } main { padding-top: 5.5rem; } li { grid-template-columns: 6.25rem 1fr; min-height: 4.5rem; } }