:root{
  --cream:#F6EDDA;
  --cream2:#EFE2C6;
  --brown:#3A2317;
  --brown2:#5A3A28;
  --orange:#E8722A;
  --mustard:#F2B134;
  --rust:#C2452D;
  --teal:#2D7D78;
  --olive:#7E8B2E;
  --line:rgba(58,35,23,.18);
  --groovy:'Shrikhand', 'Cooper Black', Georgia, serif;
  --ui:'Archivo', system-ui, sans-serif;
  --read:'Source Serif 4', Georgia, serif;
  --logo:var(--groovy);
}
*{box-sizing:border-box;margin:0;padding:0}
a{color:inherit;text-decoration:none}
body{background:var(--cream);color:var(--brown);font-family:var(--read);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.view{display:none}.view.on{display:block}

/* 70s stripes */
.stripes{height:24px;background:linear-gradient(to bottom,var(--mustard) 0 25%,var(--orange) 25% 50%,var(--rust) 50% 75%,var(--brown) 75% 100%)}
.stripes.thin{height:12px}

/* Header */
header.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:104px;gap:20px}
.logo{display:flex;align-items:baseline;line-height:1;cursor:pointer;white-space:nowrap}
.logo .a{font-family:var(--logo);font-size:42px;color:var(--brown);letter-spacing:-.005em}
.logo .q{font-family:var(--groovy);font-size:50px;color:var(--orange);margin-left:4px;display:inline-block;transform:rotate(10deg)}
nav.main ul{list-style:none;display:flex;gap:6px;flex-wrap:wrap}
nav.main a{display:block;font-family:var(--ui);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:11px 18px;border-radius:999px;border:2px solid transparent}
nav.main a:hover{border-color:var(--brown)}
nav.main a.on{background:var(--brown);color:var(--cream)}

.kicker{font-family:var(--ui);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.meta{font-family:var(--ui);font-size:13px;color:var(--brown2)}
.k-politics{color:var(--rust)}.k-culture{color:var(--teal)}.k-business{color:var(--olive)}

/* Hero */
.hero{position:relative;padding:70px 0 74px;overflow:hidden}
.hero .txt{position:relative;z-index:1;max-width:860px}
.hero h1{font-family:var(--groovy);font-weight:400;font-size:clamp(46px,6.2vw,86px);line-height:1.02;margin:18px 0 24px;color:var(--brown);text-shadow:4px 4px 0 var(--mustard)}
.hero h1 a:hover{color:var(--rust)}
.hero p.dek{font-size:21px;max-width:660px;color:var(--brown2)}
.btn{display:inline-block;margin-top:28px;font-family:var(--ui);font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;padding:16px 30px;background:var(--orange);color:var(--cream);border-radius:999px;box-shadow:4px 4px 0 var(--brown);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--brown)}
.sun{position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:520px;height:520px;z-index:0;opacity:.95}

/* Section trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:56px 0 64px;border-top:3px solid var(--brown)}
.col{background:var(--cream2);border-radius:22px;padding:0 26px 14px;overflow:hidden}
.col .bar{height:16px;margin:0 -26px 22px}
.col.politics .bar{background:repeating-linear-gradient(to bottom,var(--rust) 0 4px,transparent 4px 6px)}
.col.culture .bar{background:repeating-linear-gradient(to bottom,var(--teal) 0 4px,transparent 4px 6px)}
.col.business .bar{background:repeating-linear-gradient(to bottom,var(--olive) 0 4px,transparent 4px 6px)}
.colhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.colhead h2{font-family:var(--groovy);font-weight:400;font-size:30px;line-height:1.1}
.col.politics h2{color:var(--rust)}.col.culture h2{color:var(--teal)}.col.business h2{color:var(--olive)}
.colhead a{font-family:var(--ui);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;border-bottom:2px solid currentColor}
.card{padding:16px 0;border-top:1px solid var(--line)}
.card h3{font-family:var(--ui);font-weight:800;font-size:21px;line-height:1.22;letter-spacing:-.015em;margin:4px 0 6px}
.card h3 a:hover{color:var(--orange)}
.card p{font-size:15.5px;color:var(--brown2);line-height:1.5}

/* Recent */
.recent{padding:0 0 64px}
.recent h2.sec,.sechead h1{font-family:var(--groovy);font-weight:400}
.recent h2.sec{font-size:38px;margin-bottom:14px}
.rrow{display:grid;grid-template-columns:110px 1fr 180px;gap:28px;padding:22px 0;border-top:2px dotted var(--line);align-items:baseline}
.rrow h3{font-family:var(--ui);font-weight:800;font-size:24px;line-height:1.25;letter-spacing:-.015em}
.rrow h3 a:hover{color:var(--orange)}
.rrow .tag{text-align:right}

/* About + subscribe */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:0 0 76px}
.panel{padding:42px;border-radius:26px}
.panel h2{font-family:var(--groovy);font-weight:400;font-size:34px;line-height:1.12;margin:10px 0 14px}
.panel p{margin-bottom:12px}
.about{background:var(--mustard)}
.about p{color:var(--brown)}
.about .kicker{color:var(--brown)}
.sub{background:var(--brown);color:var(--cream)}
.sub .kicker{color:var(--mustard)}
.sub p{color:#E5D6BA}
form.subf{display:flex;margin-top:22px;background:var(--cream);border-radius:999px;padding:5px}
form.subf input{flex:1;border:0;background:transparent;font-family:var(--ui);font-size:15px;padding:12px 16px;outline:none;color:var(--brown)}
form.subf button{border:0;border-radius:999px;background:var(--orange);color:var(--cream);font-family:var(--ui);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:0 24px;cursor:pointer}
form.subf button:hover{background:var(--rust)}
.ok{font-family:var(--ui);font-size:13.5px;margin-top:12px;min-height:20px;color:var(--mustard)}

/* Section page */
.sechead{margin-top:36px;border-radius:28px;padding:60px 56px 56px;position:relative;overflow:hidden;color:var(--cream)}
.sechead.politics{background:var(--rust)}.sechead.culture{background:var(--teal)}.sechead.business{background:var(--olive)}
.sechead .kicker{color:var(--cream);opacity:.85}
.sechead h1{font-size:clamp(54px,7.5vw,108px);line-height:1;margin:10px 0 16px;text-shadow:5px 5px 0 rgba(58,35,23,.35);position:relative;z-index:1}
.sechead p{font-size:21px;max-width:620px;position:relative;z-index:1}
.sechead .sun{right:-120px;width:460px;height:460px;opacity:.25}
.list{padding:28px 0 76px}

/* Post */
.post{max-width:740px;margin:0 auto;padding:64px 0 80px}
.post h1{font-family:var(--groovy);font-weight:400;font-size:clamp(40px,5.2vw,62px);line-height:1.06;margin:16px 0 20px;text-shadow:3px 3px 0 var(--mustard)}
.post .dek{font-size:22px;font-style:italic;color:var(--brown2);margin-bottom:26px}
.post .byline{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--brown2);padding:12px 0;border-top:3px solid var(--brown);border-bottom:1px solid var(--line);margin-bottom:34px;display:flex;justify-content:space-between}
.post .body p{font-size:20px;line-height:1.75;margin-bottom:22px}
.post .body p:first-child::first-letter{font-family:var(--groovy);float:left;font-size:84px;line-height:.85;padding:6px 12px 0 0;color:var(--orange)}
.still{margin-top:40px;padding:28px 32px;background:var(--mustard);border-radius:22px;box-shadow:6px 6px 0 var(--brown)}
.still .kicker{color:var(--brown)}
.still p{font-family:var(--ui);font-weight:800;font-size:23px;line-height:1.3;margin-top:8px}
.postnav{display:flex;justify-content:space-between;margin-top:48px}
.postnav a{font-family:var(--ui);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;background:var(--brown);color:var(--cream);padding:12px 20px;border-radius:999px}
.postnav a:hover{background:var(--orange)}

footer{background:var(--brown);color:var(--cream);font-family:var(--ui);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:34px;padding-bottom:44px}
footer .flogo{font-family:var(--logo);font-size:26px}
footer .flogo .q{color:var(--orange);font-family:var(--groovy)}
footer a:hover{color:var(--mustard)}


@media (max-width:900px){
  .wrap{padding:0 18px}
  header.top .wrap{flex-direction:column;padding-top:18px;padding-bottom:14px;min-height:0}
  .logo .a{font-size:34px!important}
  nav.main a{padding:8px 11px;font-size:11px}
  .sun{width:320px;height:320px;right:-140px;opacity:.35}
  .trio,.duo{grid-template-columns:1fr}
  .rrow{grid-template-columns:1fr;gap:6px}
  .rrow .tag{text-align:left}
  .sechead{padding:42px 26px}
  .panel{padding:30px}
}