* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --ink:#111; --muted:#666; --line:#e8e8e8; --soft:#f5f5f5; --orange:#f04e00; --pale:#fff3ee; }
body { color:var(--ink); font:16px/1.75 Inter,Arial,sans-serif; }
nav { display:flex; align-items:center; justify-content:space-between; height:92px; padding:0 3%; border-bottom:1px solid var(--line); }
.logo { display:inline-flex; align-items:center; gap:.5rem; color:var(--ink); text-decoration:none; }
.logo-mark { display:block; width:82px; height:auto; }
.logo-word { color:var(--ink); font-size:1.85rem; font-weight:600; letter-spacing:.2em; }
.nav-link { color:var(--orange); font-size:.9rem; font-weight:600; text-decoration:none; }
header { padding:76px 5% 54px; background:var(--soft); border-bottom:1px solid var(--line); }
.header-inner, article { max-width:760px; margin:auto; }
.cat { color:var(--orange); font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin-top:12px; font-size:clamp(2rem,5vw,3.15rem); line-height:1.1; letter-spacing:-.045em; }
.dek { margin-top:18px; color:var(--muted); font-size:1.08rem; }
.meta { margin-top:20px; color:#888; font-size:.8rem; }
article { padding:56px 20px 84px; }
h2 { margin:34px 0 10px; font-size:1.45rem; line-height:1.3; letter-spacing:-.02em; }
p { margin:0 0 17px; color:#3f3f3f; }
article a { color:var(--orange); font-weight:600; text-decoration:none; }
article a:hover { text-decoration:underline; }
ul { margin:0 0 18px 20px; color:#3f3f3f; } li { margin:8px 0; }
.related { margin-top:34px; padding:20px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.related h2 { margin:0 0 10px; font-size:1.05rem; }
.related ul { margin-bottom:0; }
.callout { margin-top:40px; padding:24px; border:1px solid #fecdb3; border-radius:10px; background:var(--pale); }
.callout h2 { margin:0 0 8px; font-size:1.2rem; }.callout p { margin-bottom:14px; }
.button { display:inline-block; padding:10px 16px; border-radius:6px; color:white; background:var(--orange); font-size:.88rem; font-weight:700; text-decoration:none; }
.site-footer { padding:3.5rem 5% 2rem; border-top:1px solid var(--line); background:#fff; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; max-width:1100px; margin:auto; }
.footer-brand .logo { display:inline-flex; margin-bottom:.6rem; }
.footer-brand .logo-mark { width:38px; }
.footer-brand .logo-word { font-size:.92rem; }
.footer-brand p { max-width:240px; color:#444; font-size:.95rem; line-height:1.6; }
.footer-col h5 { margin-bottom:1rem; font-size:.95rem; }
.footer-col ul { display:flex; flex-direction:column; gap:.5rem; margin:0; list-style:none; }
.footer-col li { margin:0; }
.footer-col a { color:#444; font-size:.95rem; font-weight:400; text-decoration:none; }
.footer-col a:hover { color:var(--ink); }
.footer-bottom { max-width:1100px; margin:2.5rem auto 0; padding-top:1.5rem; border-top:1px solid var(--line); color:#444; font-size:.9rem; }
@media (max-width:900px) { nav { height:72px; padding:0 5%; } nav .logo-mark { width:54px; } nav .logo-word { font-size:1.2rem; letter-spacing:.16em; } }
@media (max-width:700px) { .footer-grid { grid-template-columns:1fr 1fr; } .site-footer { padding:3rem 1.25rem 1.5rem; } }