:root { --accent:#155a4b; --paper:#f6f3ec; --wash:#e1e9df; --ink:#182a25; --muted:#4d625b; --line:#d1d9d2; }
[data-brand="sidelinekit"] { --accent:#a63412; --paper:#faf5ec; --wash:#f1e0c8; --ink:#292a20; --muted:#626251; --line:#ddd8ca; }
[data-brand="sunset"] { --accent:#743bbe; --paper:#fbf8fd; --wash:#ede3f7; --ink:#211b29; --muted:#625c69; --line:#e5dfeb; }
[data-brand="reign"] { --accent:#235e53; --paper:#fffefd; --wash:#b9e4dc; --ink:#30313e; --muted:#5b5d69; --line:#d7e2df; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.7 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.wrap { width:min(1120px,calc(100% - 64px)); margin-inline:auto; }
.header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:25px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:13px; color:var(--ink); text-decoration:none; font-size:21px; font-weight:750; line-height:1.3; }
.brand small { display:block; font-size:12px; font-weight:500; color:var(--muted); margin-top:4px; }
.mark { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; background:var(--accent); color:#fff; border-radius:6px; font-size:18px; letter-spacing:-1px; }
nav { display:flex; flex-wrap:wrap; gap:10px 24px; }
nav a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; color:var(--muted); text-decoration:none; }
nav a[aria-current="page"] { color:var(--accent); text-decoration:underline; font-weight:700; }
.draft { padding:12px 0; background:var(--wash); font-size:13px; }
.draft p { margin:0; }
.hero { display:grid; grid-template-columns:1.55fr 1fr; align-items:center; gap:70px; padding-block:75px 65px; }
.eyebrow { text-transform:uppercase; letter-spacing:2px; color:var(--accent); font-size:12px; font-weight:750; margin:0 0 20px; }
h1 { font-size:clamp(38px,4.5vw,62px); line-height:1.06; letter-spacing:-2.3px; margin:0 0 26px; text-wrap:balance; }
.lead { font-size:19px; color:var(--muted); margin:0; max-width:620px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; min-height:46px; background:var(--accent); color:#fff; text-decoration:none; border-radius:4px; font-size:14px; font-weight:650; }
.button.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.identity { display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:1; padding:30px; border-radius:5px 70px 5px 5px; background:var(--wash); border:1px solid var(--line); overflow:hidden; }
.identity-word { font-weight:800; font-size:clamp(84px,12vw,145px); line-height:1.1; letter-spacing:-10px; color:var(--accent); }
.identity-caption { font-size:12px; letter-spacing:2px; text-transform:uppercase; border-top:1px solid var(--accent); padding-top:18px; color:var(--ink); }
.reading { margin-bottom:70px; }
.hero.compact { grid-template-columns:1fr; padding-block:40px; }
.hero.compact h1 { font-size:clamp(34px,4vw,46px); letter-spacing:-1.3px; margin-bottom:18px; }
.hero.compact .lead { font-size:17px; }
.section { display:grid; grid-template-columns:240px minmax(0,1fr); gap:50px; border-top:1px solid var(--line); padding-block:32px; }
h2 { font-size:22px; letter-spacing:-.6px; line-height:1.35; margin:0; }
.section p { margin:0 0 16px; max-width:750px; }
.section p:last-child { margin-bottom:0; }
.section ul { margin:0; padding-left:20px; }
.section li { padding-bottom:10px; }
.links { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:18px; }
.links a { min-height:44px; display:inline-flex; align-items:center; }
.footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding-block:24px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.skip { position:absolute; top:-100px; left:20px; padding:12px; background:var(--paper); z-index:2; }
.skip:focus { top:10px; }
@media(max-width:800px) { .header { flex-wrap:wrap; } .hero { gap:30px; grid-template-columns:1.7fr 1fr; padding-block:45px; } .identity { padding:20px; } .section { grid-template-columns:180px minmax(0,1fr); gap:28px; } }
@media(max-width:580px) { .wrap { width:calc(100% - 36px); } .hero,.section { grid-template-columns:1fr; } .hero { gap:24px; padding-block:36px; } .identity { aspect-ratio:auto; min-height:160px; } .identity-word { font-size:74px; letter-spacing:-5px; } .identity-caption { margin-top:20px; } .section { gap:16px; padding-block:26px; } nav { gap:6px 18px; } h1 { letter-spacing:-1.4px; } .lead { font-size:18px; } }