@font-face{font-family:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/oswald-var.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('fonts/jetbrainsmono-var.woff2') format('woff2')}

:root{
  --bg:#0f1012; --bg2:#15171a; --panel:#191c20; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.15);
  --tx:#e9eaec; --tx2:#c2c6cb; --mu:#8f959c; --mu2:#666c73;
  --red:#e01b24; --red2:#ff2733;
  --disp:'Oswald',Impact,sans-serif;
  --ui:'Barlow',system-ui,sans-serif;
  --read:Georgia,'Iowan Old Style','Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1100px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--ui);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;margin:0;letter-spacing:.005em}
p{margin:0}
::selection{background:var(--red);color:#fff}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}

/* header */
.hdr{border-bottom:1px solid var(--line);background:rgba(15,16,18,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:sticky;top:0;z-index:40}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 26px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:baseline;gap:9px;font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.14em;text-transform:uppercase}
.brand .tag{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--red);border:1px solid rgba(224,27,36,.45);padding:3px 7px;text-transform:uppercase}
.hdr nav{display:flex;align-items:center;gap:22px}
.hdr nav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mu)}
.hdr nav a:hover{color:var(--tx)}
.hdr nav a.main{color:#fff;background:var(--red);border:1px solid var(--red);padding:9px 15px;letter-spacing:.12em}
.hdr nav a.main:hover{background:var(--red2);color:#fff}

/* intro */
.intro{border-bottom:1px solid var(--line);background:var(--bg2)}
.intro-in{max-width:var(--wrap);margin:0 auto;padding:64px 26px 60px}
.kick{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.intro h1{font-size:clamp(34px,5.2vw,58px);line-height:1.02;margin-bottom:20px;text-wrap:balance}
.intro p{font-size:19px;line-height:1.6;color:var(--tx2);max-width:660px;font-family:var(--read)}
.intro .note{margin-top:26px;padding:16px 20px;border-left:2px solid var(--red);background:rgba(224,27,36,.06);font-size:15px;color:var(--tx2);max-width:660px}
.intro .note a{color:var(--red);border-bottom:1px solid rgba(224,27,36,.5)}
.intro .note a:hover{color:var(--red2)}

/* article list */
.list{padding:56px 0 80px}
.list h2.sec-h{font-size:15px;letter-spacing:.2em;color:var(--mu);font-weight:600;margin-bottom:28px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.posts{display:flex;flex-direction:column;gap:0}
.post{display:grid;grid-template-columns:96px 1fr;gap:26px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start;transition:opacity .18s}
.post:hover{opacity:.92}
.post .thumb{width:96px;aspect-ratio:1/1.55;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.post .thumb img{width:100%;height:100%;object-fit:cover}
.post .meta{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2);margin-bottom:9px;display:flex;gap:14px;flex-wrap:wrap}
.post .meta .cat{color:var(--red)}
.post h3{font-size:23px;line-height:1.18;margin-bottom:10px;letter-spacing:.02em}
.post:hover h3{color:var(--red)}
.post p{font-size:16px;line-height:1.6;color:var(--mu);font-family:var(--read)}
.post .more{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}

/* article page */
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu2);padding:26px 0 0}
.crumb a{color:var(--mu2)}
.crumb a:hover{color:var(--tx)}
.crumb span{margin:0 8px;color:var(--line2)}
.art{max-width:720px;margin:0 auto;padding:0 26px}
.art-head{padding:30px 0 34px;border-bottom:1px solid var(--line);margin-bottom:38px}
.art-head .meta{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2);margin-bottom:16px;display:flex;gap:14px;flex-wrap:wrap}
.art-head .meta .cat{color:var(--red)}
.art-head h1{font-size:clamp(30px,4.6vw,46px);line-height:1.06;margin-bottom:18px;text-wrap:balance}
.art-head .stand{font-size:19px;line-height:1.55;color:var(--tx2);font-family:var(--read);font-style:italic}
.art-body{font-family:var(--read);font-size:18px;line-height:1.75;color:var(--tx2)}
.art-body p{margin-bottom:22px}
.art-body h2{font-family:var(--disp);font-size:24px;line-height:1.2;color:var(--tx);margin:40px 0 16px;letter-spacing:.03em}
.art-body strong{color:var(--tx);font-weight:600}
.art-body em{color:var(--tx)}
.art-body a{color:var(--red);border-bottom:1px solid rgba(224,27,36,.45)}
.art-body a:hover{color:var(--red2)}
.art-body blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:2px solid var(--red);font-size:21px;line-height:1.4;color:var(--tx);font-style:italic}
.art-body ul{margin:0 0 22px;padding-left:22px}
.art-body li{margin-bottom:10px}

/* book box */
.bookbox{margin:44px 0;border:1px solid var(--line2);background:var(--panel);padding:26px;display:grid;grid-template-columns:110px 1fr;gap:24px;align-items:start}
.bookbox .cov{width:110px;aspect-ratio:1/1.55;overflow:hidden;border:1px solid var(--line)}
.bookbox .cov img{width:100%;height:100%;object-fit:cover}
.bookbox .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.bookbox b{display:block;font-family:var(--disp);font-weight:600;font-size:21px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.bookbox p{font-family:var(--ui);font-size:15px;line-height:1.55;color:var(--mu);margin-bottom:16px}
.bookbox .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bookbox .btn{display:inline-block;font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.11em;text-transform:uppercase;background:var(--red);color:#fff;padding:12px 20px;border:1px solid var(--red)}
.bookbox .btn:hover{background:var(--red2);color:#fff}
.bookbox .btn2{display:inline-block;font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--tx);padding:12px 20px;border:1px solid var(--line2)}
.bookbox .btn2:hover{border-color:var(--tx)}
.bookbox .ad{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mu2);margin-top:12px}

/* main-site callout */
.callout{margin:48px 0 8px;border:1px solid rgba(224,27,36,.4);background:linear-gradient(90deg,rgba(224,27,36,.11),rgba(224,27,36,.04));padding:26px 28px}
.callout .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:9px}
.callout b{display:block;font-family:var(--disp);font-weight:600;font-size:20px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:9px}
.callout p{font-family:var(--ui);font-size:15.5px;line-height:1.55;color:var(--tx2);margin-bottom:16px}
.callout a.btn{display:inline-block;font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.11em;text-transform:uppercase;background:var(--red);color:#fff;padding:13px 22px;border:1px solid var(--red)}
.callout a.btn:hover{background:var(--red2);color:#fff}

/* related */
.related{max-width:720px;margin:0 auto;padding:52px 26px 90px}
.related h2{font-size:15px;letter-spacing:.2em;color:var(--mu);font-weight:600;margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.rel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.rel{border:1px solid var(--line);background:var(--panel);padding:18px 20px;transition:border-color .18s}
.rel:hover{border-color:var(--line2)}
.rel .c{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.rel b{font-family:var(--disp);font-weight:600;font-size:17px;line-height:1.2;text-transform:uppercase;letter-spacing:.02em;display:block}
.rel:hover b{color:var(--red)}

/* footer */
footer{border-top:1px solid var(--line);background:var(--bg2)}
.ft{max-width:var(--wrap);margin:0 auto;padding:42px 26px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ft .b{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.16em;text-transform:uppercase}
.ft nav{display:flex;gap:22px;flex-wrap:wrap}
.ft nav a{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}
.ft nav a:hover{color:var(--tx)}
.ft .c{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mu2)}

@media (max-width:720px){
  .hdr nav a:not(.main){display:none}
  .post{grid-template-columns:70px 1fr;gap:18px}
  .post .thumb{width:70px}
  .bookbox{grid-template-columns:1fr;gap:18px}
  .bookbox .cov{width:96px}
  .rel-grid{grid-template-columns:1fr}
  .ft{justify-content:center;text-align:center}
  .art-body{font-size:17px}
}