*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--white:#fff;--black:#0a0a0a;--red:#dc2626;--gray:#737373;--line:#e5e5e5;--bg:#fafafa}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:Arial,Helvetica,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--black);line-height:1.5}

/* diagonal header band */
.band{
  background:var(--black);color:var(--white);padding:.55rem 0;
  transform:skewY(-1deg);margin-bottom:-.5rem
}
.band .inner{transform:skewY(1deg);max-width:1100px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase}
.band a{color:var(--white);text-decoration:none;opacity:.7}.band a:hover{opacity:1}

/* massive type masthead */
.mega-head{max-width:1100px;margin:0 auto;padding:2.5rem 2rem 1rem;border-bottom:4px solid var(--black)}
.mega-head .row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem}
.mega-head .logo-block{display:flex;align-items:center;gap:1rem}
.mega-head img{width:56px;height:56px}
.mega-head h1{font-size:clamp(3rem,10vw,6rem);font-weight:900;line-height:.85;letter-spacing:-.04em;text-transform:uppercase}
.mega-head .issue{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);text-align:right}

/* vertical rule navigation */
.rule-nav{max-width:1100px;margin:0 auto;padding:1rem 2rem;display:flex;border-bottom:1px solid var(--line)}
.rule-nav a{
  text-decoration:none;color:var(--black);font-weight:700;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.6rem 1.5rem;
  border-right:1px solid var(--line);transition:background .15s
}
.rule-nav a:first-child{border-left:1px solid var(--line)}
.rule-nav a:hover,.rule-nav a.on{background:var(--black);color:var(--white)}
.rule-nav a.dl{background:var(--red);color:var(--white)!important;border-color:var(--red)}
.rule-nav a.dl:hover{background:#b91c1c}

.wrap{max-width:1100px;margin:0 auto;padding:0 2rem 4rem}

.crumb{padding:1.25rem 0;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.crumb a{color:var(--gray);text-decoration:none}.crumb a:hover{color:var(--red)}

/* hero: giant number + red bar */
.type-hero{padding:4rem 0 3rem;position:relative}
.type-hero .num{font-size:clamp(8rem,25vw,14rem);font-weight:900;line-height:.75;color:var(--line);position:absolute;right:0;top:0;z-index:0;user-select:none}
.type-hero .content{position:relative;z-index:1;max-width:620px}
.type-hero h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;text-transform:uppercase;line-height:1;margin-bottom:1.25rem}
.type-hero h2 span{display:block;width:80px;height:8px;background:var(--red);margin-bottom:1rem}
.type-hero p{font-size:1.05rem;color:var(--gray);margin-bottom:2rem;max-width:480px}
.type-hero .btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:2.5rem}
.btn-red,.btn-out{
  display:inline-block;padding:1rem 2rem;font-weight:900;font-size:.85rem;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:3px solid var(--black)
}
.btn-red{background:var(--red);color:var(--white)!important;border-color:var(--red)}
.btn-red:hover{background:#b91c1c}
.btn-out{background:var(--white);color:var(--black)!important}
.btn-out:hover{background:var(--black);color:var(--white)!important}
.type-hero .hero-img{border:3px solid var(--black);margin-top:1rem}

/* numbered sections */
.num-section{margin:4rem 0;display:grid;grid-template-columns:80px 1fr;gap:1.5rem;align-items:start}
.num-section .n{font-size:3.5rem;font-weight:900;color:var(--line);line-height:1}
.num-section h3{font-size:1.5rem;font-weight:900;text-transform:uppercase;margin-bottom:.5rem}
.num-section p{color:var(--gray);font-size:.95rem}
.num-section img{border:2px solid var(--black);margin-top:1rem}

/* strict 3-column grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--black);margin:3rem 0}
.grid-3 .cell{padding:1.75rem 1.5rem;border-right:2px solid var(--black)}
.grid-3 .cell:last-child{border-right:0}
.grid-3 h4{font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.75rem}
.grid-3 p{font-size:.88rem;color:var(--gray)}

/* pull quote */
.pull-quote{
  margin:3rem 0;padding:2rem 0;border-top:4px solid var(--red);border-bottom:4px solid var(--black);
  font-size:clamp(1.3rem,3vw,1.8rem);font-weight:900;text-transform:uppercase;line-height:1.2
}

/* download table brutal */
.dl-brutal{width:100%;border-collapse:collapse;margin:2rem 0;border:3px solid var(--black)}
.dl-brutal th,.dl-brutal td{border:2px solid var(--black);padding:1.25rem 1rem;text-align:left;vertical-align:top}
.dl-brutal th{background:var(--black);color:var(--white);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase}
.dl-brutal td{font-size:.9rem}
.dl-brutal a.btn-red{padding:.5rem 1rem;font-size:.7rem;display:inline-block}

/* article prose */
.article{padding:2rem 0;max-width:680px}
.article h2{font-size:1.4rem;font-weight:900;text-transform:uppercase;margin:2rem 0 .75rem;padding-left:1rem;border-left:6px solid var(--red)}
.article p,.article li{color:var(--gray);margin-bottom:.8rem;font-size:.95rem}
.article ul,.article ol{padding-left:1.25rem}
.article code{font-family:Consolas,monospace;background:var(--line);padding:.1rem .3rem;font-size:.88rem}
.article figure{margin:1.5rem 0;border:2px solid var(--black)}
.article figcaption{padding:.5rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);border-top:2px solid var(--black)}

/* news list with huge dates */
.news-big{margin:2rem 0}
.news-big article{display:grid;grid-template-columns:100px 140px 1fr;gap:1.5rem;padding:1.5rem 0;border-bottom:2px solid var(--line);align-items:start}
.news-big .date{font-size:2rem;font-weight:900;line-height:1;color:var(--line)}
.news-big img{width:140px;border:2px solid var(--black)}
.news-big h3{font-size:1.1rem;font-weight:900;text-transform:uppercase;margin-bottom:.35rem}
.news-big h3 a{color:var(--black);text-decoration:none}.news-big h3 a:hover{color:var(--red)}
.news-big p{font-size:.85rem;color:var(--gray)}

.cta-bar{background:var(--black);color:var(--white);padding:3rem 2rem;margin:3rem 0;text-align:center}
.cta-bar h2{font-size:2rem;font-weight:900;text-transform:uppercase;margin-bottom:.5rem}
.cta-bar p{opacity:.7;margin-bottom:1.5rem;font-size:.95rem}

.foot{padding:2rem;border-top:4px solid var(--black);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.foot a{color:var(--gray);text-decoration:none;margin-right:1rem}.foot a:hover{color:var(--red)}

@media(max-width:800px){
  .grid-3{grid-template-columns:1fr}
  .grid-3 .cell{border-right:0;border-bottom:2px solid var(--black)}
  .news-big article{grid-template-columns:1fr}
  .news-big .date{font-size:1.2rem}
  .rule-nav{flex-wrap:wrap}
  .num-section{grid-template-columns:1fr}
  .num-section .n{font-size:2rem}
}

.footer-friends,.friend-links{margin-bottom:.65rem;font-size:.82rem}
.footer-friends a,.friend-links a{color:inherit;opacity:.85}
.footer-friends a:hover,.friend-links a:hover{opacity:1}