:root{--blue:#1b3a6b;--ink:#222a35;--muted:#5d6877;--bg:#f7f8fa;--card:#fff;--line:#dde2e9;--accent:#b5472f}
*{box-sizing:border-box}
html{font-size:17px}
body{margin:0;font-family:Georgia,"Times New Roman",serif;color:var(--ink);background:var(--bg);line-height:1.7}
a{color:var(--blue)}
header.site{background:var(--blue);color:#fff}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;padding:1rem 1.25rem}
.brand{font-size:1.35rem;letter-spacing:.02em;color:#fff;text-decoration:none;font-weight:bold}
.brand small{display:block;font-weight:normal;font-size:.75rem;opacity:.8;letter-spacing:.08em;text-transform:uppercase}
nav a{color:#e8eefb;text-decoration:none;margin-right:1.1rem;font-family:system-ui,sans-serif;font-size:.9rem}
nav a:hover,nav a[aria-current]{color:#fff;border-bottom:2px solid #fff}
.wrap{max-width:60rem;margin:0 auto;padding:0 1.25rem}
.hero{background:linear-gradient(135deg,#e9eef7 0%,#f7f8fa 60%);border-bottom:1px solid var(--line);padding:3rem 0 2.5rem}
.hero h1{font-size:2.3rem;line-height:1.2;margin:0 0 .75rem;color:var(--blue)}
.hero p{max-width:40rem;color:var(--muted);margin:0}
main{padding:2rem 0 3rem}
h2{color:var(--blue);margin-top:2.2rem;border-bottom:1px solid var(--line);padding-bottom:.3rem}
h3{margin-bottom:.2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem;margin:1.5rem 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1.1rem 1.2rem}
.card h3{margin-top:0;font-size:1.1rem}
.card p{margin:.4rem 0 0;color:var(--muted);font-size:.95rem}
.tag{font-family:system-ui,sans-serif;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.timeline{list-style:none;padding:0;border-left:3px solid var(--blue);margin:1.5rem 0 1.5rem .5rem}
.timeline li{margin:0 0 1.2rem 1.2rem}
.timeline b{color:var(--blue)}
.swatch{height:9rem;border-radius:6px 6px 0 0;margin:-1.1rem -1.2rem .9rem}
.s1{background:linear-gradient(120deg,#1b3a6b,#6f8fc4)}
.s2{background:repeating-linear-gradient(45deg,#e9eef7 0 12px,#c9d5ea 12px 24px)}
.s3{background:linear-gradient(160deg,#2b3d34,#7fa38a)}
.s4{background:linear-gradient(120deg,#b5472f,#e5b9a8)}
blockquote{margin:1.5rem 0;padding:.2rem 1.2rem;border-left:3px solid var(--accent);color:var(--muted);font-style:italic}
footer.site{border-top:1px solid var(--line);padding:1.5rem 0;color:var(--muted);font-size:.85rem;font-family:system-ui,sans-serif}
@media(max-width:600px){html{font-size:16px}.hero h1{font-size:1.8rem}}