
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 60px;border-bottom:3px solid var(--bone)}
.top .lg{font-family:K;font-size:52px;line-height:1}.top .lg .sp{--cut:44%;--sh:-6px}
.top nav{display:flex;gap:22px;font-family:K;font-size:26px;color:var(--fog)}.top nav .on{color:var(--ochre)}
.hd{position:relative;max-width:1320px;margin:50px auto 0;padding:0 60px;display:grid;grid-template-columns:1fr 420px;gap:50px;align-items:end}
.hd .kick{display:flex;gap:14px;align-items:center}
.hd h1{font-family:K;font-weight:400;margin-top:18px}
.hd h1 .sp{display:block;width:fit-content;font-size:170px;--cut:39%;--sh:-18px;--bot:var(--teal)}
.hd .dek{font-family:S;font-size:26px;line-height:1.35;margin-top:22px;max-width:30ch}
.meta{margin-top:18px;color:var(--fog);font-size:15px}
.art{position:relative;height:460px;border:4px solid var(--bone);background:var(--teal);overflow:hidden;transform:rotate(1.2deg);box-shadow:-10px 10px 0 var(--rust)}
.art .b{position:absolute;inset:50% 0 0 0;background:#4c7771;transform:translateX(-26px);border-top:2px dashed var(--bone)}
.body{max-width:1320px;margin:70px auto 0;padding:0 60px;display:grid;grid-template-columns:300px 1fr 300px;gap:56px}
.txt{font-size:20px;line-height:1.75;color:#e6ddcb}
.txt p{margin-bottom:22px}
.nodrop{font-family:K;font-size:118px;float:right;line-height:.8;margin:6px 0 0 12px;color:var(--ochre)}
.txt h2{font-family:K;font-weight:400;font-size:66px;line-height:.95;margin:40px 0 14px}
.txt h2 .sp{--cut:40%;--bot:var(--ochre);--sh:-10px}
.pull{position:relative;margin:44px -40px 44px -120px;padding:34px 40px;background:var(--bone);color:var(--ink);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--mauve);transform:rotate(-1.2deg)}
.pull .sp{font-family:K;font-size:70px;line-height:1.08;display:block;width:fit-content;--cut:40%;--top:var(--ink);--bot:var(--rustL);--sh:-12px}
.pull small{display:block;font-size:14px;margin-top:10px}
.side{font-size:15px;line-height:1.55}
.box{border:3px solid var(--bone);padding:22px;margin-bottom:26px;position:relative}
.box h4{font-family:K;font-size:38px;font-weight:400;line-height:1;margin-bottom:10px;color:var(--ochre)}
.box ul{list-style:none}.box li{padding:8px 0;border-top:1px dashed rgba(238,229,211,.3)}
.not{background:var(--rust);border-color:var(--ink);color:var(--bone);box-shadow:6px 6px 0 var(--ink);transform:rotate(-1deg)}
.not h4{color:var(--bone)}
.src li{font-size:14px;color:var(--fog);direction:ltr;text-align:left}
.helpw{max-width:1200px;margin:60px auto 0}
.next{max-width:1200px;margin:50px auto 60px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.next a{border:4px solid var(--ink);padding:22px;color:var(--ink);box-shadow:6px 6px 0 var(--ink);font-family:K;font-size:38px;line-height:1}
.next a span{display:block;font-family:H;font-size:14px;margin-bottom:8px}
.progress{height:6px;background:linear-gradient(270deg,var(--ochre) 38%,transparent 38%)}

.comic{margin-top:70px}
.comic .ch{display:grid;grid-template-columns:auto 1fr;gap:10px 30px;align-items:end}
.comic .ch .tag{grid-column:1/-1;justify-self:start}
.comic .ch h2 .sp{font-size:110px;--bot:var(--ochre)}
.comic .ch p{font-family:S;font-size:22px;line-height:1.35;max-width:40ch;padding-bottom:16px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.cp{position:relative;aspect-ratio:300/300;border:5px solid var(--ink);box-shadow:7px 7px 0 var(--ink);overflow:hidden;background:var(--bone)}
.cp:nth-child(odd){transform:rotate(-1deg)}.cp:nth-child(even){transform:rotate(1deg)}
.cp svg{position:absolute;inset:0 0 auto 0;width:100%;height:86%;display:block}
.cp .cap{position:absolute;bottom:0;right:0;left:0;height:14%;background:var(--bone);color:var(--ink);border-top:4px solid var(--ink);font-family:S;font-size:15px;display:flex;align-items:center;gap:10px;padding:0 12px}
.cp .cap i{font-style:normal;font-family:K;font-size:28px;color:var(--rust)}
.b{position:absolute;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:8px 12px;font-family:S;font-size:16px;line-height:1.3;max-width:75%}
.b::after{content:"";position:absolute;bottom:-12px;right:26px;border:10px solid transparent;border-top-color:var(--ink);border-bottom:0}
.b.r{background:var(--fog)}.b.r::after{right:auto;left:26px}
.b.t{border-style:dashed;border-radius:30px}.b.t::after{display:none}
.b.a{background:var(--ochre);border-radius:4px;font-size:17px;text-align:center;max-width:none;transform:rotate(-2deg)}.b.a::after{right:50%}
.moral{margin-top:22px;font-size:15px;color:var(--fog)}
@media(max-width:600px){.comic{margin-top:50px}.comic .ch{grid-template-columns:1fr}.comic .ch h2 .sp{font-size:76px}.comic .ch p{font-size:18px}.strip{grid-template-columns:1fr;gap:22px}.cp .cap{font-size:15px}.b{font-size:17px}}
.acomic{margin:36px 0 40px}.acomic .cp{aspect-ratio:300/260;transform:rotate(-1deg)}.acomic .cap{font-size:16px}.acomic .b{font-size:19px}@media(max-width:600px){body{overflow-x:clip}.top{padding:12px 14px!important;flex-wrap:wrap}.top nav{display:none}.top .lg{font-size:36px}
.hd{grid-template-columns:1fr;padding:0 14px;margin-top:20px;gap:24px}.hd h1 .sp{font-size:72px;--sh:-8px}.hd .dek{font-size:19px}
.art{height:300px}.art .stick{font-size:14px}.body{grid-template-columns:1fr;padding:0 14px;margin-top:30px;gap:20px}
.side:first-child{order:2}.txt{font-size:17px}.txt h2{font-size:46px}.nodrop{font-size:80px}.pull{margin:30px 0}.pull .sp{font-size:40px}
.helpw,.next{margin-right:14px;margin-left:14px}.next{grid-template-columns:1fr}.next a{font-size:28px}.acomic .b{font-size:14px}.acomic .cap{font-size:14px}.src li,.meta,small{font-size:14px!important}}
