/* kettieballistics.com -- Kettie's look, shared by every page (4 Oct 2026) */
:root{--bg:#141416;--line:#33333a;--text:#ece9e4;--muted:#9a978f;--accent:#ff7214;--bone:#e9e2d6;color-scheme:dark}
*{box-sizing:border-box}
html{font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:rgba(20,20,22,.92)}
.brand{display:flex;align-items:center;gap:10px;color:var(--bone);text-decoration:none}
.brand img{width:32px;height:32px;border-radius:7px}
.brand b{font-weight:800;letter-spacing:.22em;font-size:1.05rem}
nav a{color:var(--text);text-decoration:none;padding:6px 10px;border-radius:6px} nav a:hover{background:#26262b}
.hero{position:relative;width:min(100%,calc(72vh*1672/941));margin:0 auto;aspect-ratio:1672/941;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);background:#0d0d0f url(/brand/brand-hero-800.jpg) center top/100% auto no-repeat}   /* the whole banner, never trimmed (20 Oct 2026: the new single-band landscape, 16:9; at most 72 % of the window high, centred, so a full-screen window still shows the text under it) */
@media (min-width:700px){.hero{background-image:url(/brand/brand-hero-1600.jpg)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,22,0) 92%,var(--bg) 100%)}
main{width:100%;max-width:640px;margin:0 auto;padding:8px 16px 24px;flex:1 0 auto;text-align:center}
h1{font-size:1.65rem;font-weight:800;margin:.4em 0 .2em}
h1::after{content:"";display:block;width:56px;height:3px;background:var(--accent);margin:12px auto 0;border-radius:2px}
p{color:#cfcac2} .muted{color:var(--muted);font-size:.92rem}
.button{display:inline-block;font-weight:700;color:#fff;background:linear-gradient(180deg,#ff7f26,#f06508);border-radius:8px;padding:11px 20px;margin:6px;text-decoration:none;box-shadow:0 2px 8px rgba(255,114,20,.25)}
.button:hover{filter:brightness(1.08)}
.secondary{background:transparent;color:var(--text);border:1px solid #4a4a52;box-shadow:none}
footer{border-top:1px solid var(--line);padding:18px 16px 26px;color:var(--muted);font-size:.82rem}
footer .in{max-width:640px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px}
footer a{color:var(--muted)}
.motto{letter-spacing:.2em;text-transform:uppercase;font-size:.7rem;color:#77746d}
.motto::before{content:"";display:inline-block;width:18px;height:2px;background:var(--accent);vertical-align:middle;margin-right:8px}
nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
nav a.on{color:var(--accent)}
.page{text-align:left}
.page h1::after{margin-left:0}
.page h2{font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:2em 0 .5em;padding-left:10px;border-left:3px solid var(--accent)}
.card{background:linear-gradient(180deg,#26262b,#202024);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:12px 0;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.card b{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#ff8a3d;margin-bottom:4px}
.card a{color:#ff8a3d;font-weight:600}
.ridge{height:110px;margin-bottom:-80px;background:url(/brand/brand-ridge.webp) center bottom/1400px auto no-repeat;opacity:.2;pointer-events:none}
@media (max-width:520px){header{padding:8px 12px} nav a{padding:6px 7px}}