* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --ink:#1a1a2e; --muted:#6b7280; --bg:#fafaf7; --card:#ffffff; --line:#ececec; --brand:#5b4bff; --brand2:#ff8a5b; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background:var(--bg); color:var(--ink); line-height:1.65; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1120px; margin:0 auto; padding:0 22px; }
/* header */
header.site { position:sticky; top:0; z-index:50; background:rgba(250,250,247,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink); }
.brand .dot { color:var(--brand2); }
.nav-actions { display:flex; align-items:center; gap:10px; }
.nav-btn { display:inline-block; padding:9px 16px; border-radius:99px; font-size:14px; font-weight:600; border:1px solid var(--line); color:var(--ink); background:#fff; transition:.15s; }
.nav-btn:hover { border-color:#c9c9d6; }
.btn { display:inline-block; background:var(--brand); color:#fff; padding:9px 16px; border-radius:99px; font-size:14px; font-weight:600; }
.btn:hover { opacity:.92; }
/* hero */
.hero { padding:64px 0 40px; text-align:center; }
.hero h1 { font-size:46px; line-height:1.1; letter-spacing:-.03em; font-weight:800; max-width:760px; margin:0 auto 16px; }
.hero p { color:var(--muted); font-size:18px; max-width:560px; margin:0 auto 26px; }
/* filters */
.filters { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:8px 0 30px; }
.chip { border:1px solid var(--line); background:#fff; color:var(--muted); padding:7px 15px; border-radius:99px; font-size:13.5px; font-weight:600; cursor:pointer; transition:.15s; }
.chip:hover { border-color:#c9c9d6; }
.chip.active { background:var(--ink); color:#fff; border-color:var(--ink); }
/* grid */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-bottom:60px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:.18s; display:flex; flex-direction:column; }
.card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(20,20,40,.08); }
.card .thumb { aspect-ratio:16/10; background:#eee; overflow:hidden; }
.card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.card .body { padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tag { align-self:flex-start; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:6px; color:#fff; }
.card h3 { font-size:17px; line-height:1.35; font-weight:700; letter-spacing:-.01em; }
.card .ex { color:var(--muted); font-size:14px; flex:1; }
.card .meta { font-size:12.5px; color:#9aa0aa; }
/* article */
article.post { max-width:760px; margin:0 auto; padding:40px 22px 70px; }
.crumb { font-size:13px; color:var(--muted); margin-bottom:18px; }
.crumb a:hover { color:var(--ink); }
.post .cover { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:18px; margin:18px 0 26px; background:#eee; }
.post h1 { font-size:38px; line-height:1.15; letter-spacing:-.025em; font-weight:800; }
.post .meta { color:var(--muted); font-size:14px; margin:14px 0 26px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.post .meta .tag { position:static; }
.post p { font-size:17px; margin:0 0 20px; }
.post h2 { font-size:24px; margin:34px 0 12px; letter-spacing:-.02em; }
.cta { background:linear-gradient(120deg,#f3f1ff,#fff3ec); border:1px solid #e8e3ff; border-radius:16px; padding:24px; margin:36px 0; text-align:center; }
.cta h3 { font-size:19px; margin-bottom:8px; }
.cta p { font-size:14.5px; color:var(--muted); margin-bottom:16px; }
.rel { margin-top:50px; border-top:1px solid var(--line); padding-top:28px; }
.tagrow { display:flex; flex-wrap:wrap; gap:12px; }
.rel h4 { font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:16px; }
.rel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rel-card { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.rel-card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.rel-card .rb { padding:11px 13px; }
.rel-card h5 { font-size:14px; font-weight:700; line-height:1.3; }
footer.site { border-top:1px solid var(--line); padding:34px 0; color:var(--muted); font-size:13.5px; text-align:center; }
@media(max-width:820px){ .grid{grid-template-columns:repeat(2,1fr);} .rel-grid{grid-template-columns:1fr;} .hero h1{font-size:34px;} }
@media(max-width:540px){ .grid{grid-template-columns:1fr;} .nav-btn{padding:7px 12px; font-size:13px;} .brand{font-size:18px;} }