:root { color-scheme: light; --paper:#FBF9F3; --ink:#25231F; --muted:#625D54; --line:#D8D1C5; --accent:#B5412E; --green:#506248; }
* { box-sizing:border-box; letter-spacing:0; }
html { scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.wrap { width:min(100% - 40px,800px); margin-inline:auto; }
header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-block:24px; border-bottom:1px solid var(--line); }
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; }
.wordmark { color:var(--ink); font-weight:750; font-size:20px; text-decoration:none; }
.wordmark span { color:var(--accent); }
h1,h2 { font-family:Georgia,"Times New Roman",serif; line-height:1.15; font-weight:600; }
h1 { font-size:52px; margin:10px 0 16px; }
h2 { font-size:30px; margin:0 0 16px; }
p { margin:0 0 16px; max-width:65ch; }
.intro { padding:44px 0 28px; }
.eyebrow { color:var(--green); font-size:12px; text-transform:uppercase; font-weight:750; margin:0 0 10px; }
.lead { font-size:24px; line-height:1.4; }
.platforms,.small,figcaption { color:var(--muted); font-size:14px; }
.overview { border-top:1px solid var(--line); padding:28px 0; }
figure { margin:24px 0 0; }
figure a { display:block; background:#EEEFEA; border:1px solid var(--line); }
img { display:block; width:100%; height:400px; object-fit:contain; }
figcaption { margin-top:10px; }
.support { border-top:2px solid var(--green); padding:30px 0 24px; }
.email { display:inline-block; font-weight:650; overflow-wrap:anywhere; padding:8px 0; margin:0 0 16px; }
footer { border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-block:22px; color:var(--muted); font-size:12px; }
.skip { position:absolute; top:-100px; left:16px; padding:10px 16px; background:white; z-index:2; }
.skip:focus { top:10px; }
@media (max-width:480px) { h1 { font-size:40px; } h2 { font-size:26px; } .intro { padding-top:30px; } img { height:340px; } }