/* Color X blog — site paletiyle, uzun metin için okunur tipografi. */
:root{--ink:#0f0f0f;--panel:#161616;--line:#2a2a2a;--cream:#efeae0;--muted:#a7a19a;
      --bordo:#8E2A38;--bordo2:#b53142;--dim:#6f6a62}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
     color:var(--cream);background:var(--ink);line-height:1.5}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:20;background:rgba(15,15,15,.82);
       backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px}
.brand img{height:24px;width:auto;display:block}
.right{display:flex;align-items:center;gap:14px}
.back{color:var(--muted);font-size:.9rem}
@media(max-width:640px){.back{font-size:.8rem}.right{gap:10px}}

/* ---- yazı ---- */
.post{max-width:760px;padding-top:44px;padding-bottom:70px}
.eyebrow{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bordo2);
         font-weight:800;margin-bottom:16px}
.post h1{font-size:clamp(2rem,5.2vw,3.1rem);line-height:1.06;font-weight:900;
         letter-spacing:-.02em;margin-bottom:18px;text-wrap:balance}
.standfirst{font-size:clamp(1.05rem,2.2vw,1.25rem);line-height:1.5;color:#cfc8bd;
            margin-bottom:18px}
.byline{color:var(--dim);font-size:.82rem;letter-spacing:.02em;
        padding-bottom:22px;border-bottom:1px solid var(--line)}
.toc{margin:26px 0 8px;padding:18px 22px;background:var(--panel);border:1px solid var(--line);
     border-radius:12px}
.toc-t{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
       margin-bottom:10px;font-weight:800}
.toc ol{margin:0;padding-left:20px;color:var(--muted);font-size:.93rem}
.toc li{margin:5px 0}
.toc a:hover{color:var(--cream)}

.body{font-size:1.06rem;line-height:1.75;color:#ddd6ca;margin-top:14px}
.body p{margin:0 0 18px}
.body h2{font-size:1.55rem;line-height:1.2;font-weight:900;color:var(--cream);
         margin:46px 0 16px;padding-top:20px;border-top:1px solid var(--line);
         letter-spacing:-.01em;scroll-margin-top:76px}
.body h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bordo2);
         font-weight:800;margin:30px 0 10px}
.body h4{font-size:1.12rem;font-weight:800;color:var(--cream);margin:26px 0 10px}
.body ul{margin:0 0 18px;padding-left:22px}
.body li{margin:6px 0}
.tw{overflow-x:auto;margin:22px 0 26px;border:1px solid var(--line);border-radius:12px}
.body table{border-collapse:collapse;width:100%;font-size:.9rem;background:var(--panel)}
.body th{text-align:left;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
         color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line);
         white-space:nowrap;font-weight:800}
.body td{padding:11px 14px;border-bottom:1px solid #202020;vertical-align:top;color:#d6cfc4}
.body tr:last-child td{border-bottom:0}
.foot-note{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
           color:var(--dim);font-size:.8rem;line-height:1.6}

/* ---- liste ---- */
.hero{padding:52px 0 10px;max-width:760px}
.hero h1{font-size:clamp(2.1rem,6vw,3.4rem);font-weight:900;letter-spacing:-.02em;
         line-height:1.04;margin-bottom:14px}
.hero p{color:var(--muted);font-size:1.02rem;line-height:1.6}
.posts{display:grid;gap:16px;padding:26px 0 60px;max-width:860px}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;
      padding:22px 24px;transition:border-color .15s,transform .15s}
.card:hover{border-color:#4a4a4a;transform:translateY(-1px)}
.card .tag{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
           color:var(--bordo2);font-weight:800}
.card h2{font-size:1.32rem;font-weight:800;margin:8px 0 8px;line-height:1.25}
.card p{color:var(--muted);font-size:.95rem;line-height:1.55}
.card .meta{color:var(--dim);font-size:.78rem;margin-top:12px}
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);
       font-size:.88rem;text-align:center}
footer a:hover{color:var(--cream)}