/* Keep annotations clear of the card, with enough room for the rotated edges. */
header{padding-top:20px;padding-bottom:20px}
.intro{padding-top:46px;padding-bottom:40px;gap:6%;grid-template-columns:1.12fr 1fr}
.intro>div{min-width:0}
.intro h1{font-size:clamp(44px,4.8vw,68px);line-height:1.09;margin-top:12px;margin-bottom:28px}
.intro .lede{font-size:18px;line-height:1.7}
.intro-art{padding:14px 0 54px}
.note{font-size:27px;line-height:1.25;margin:0 8px 36px 24px;transform:rotate(-3deg);transform-origin:left center}
.system{transform:rotate(1.5deg);padding:30px 30px 36px}
.system h2{font-size:28px;line-height:1.3;margin-top:24px;margin-bottom:26px}
.flow-node{min-width:0;gap:14px;align-items:center}
.flow-node>span{flex-shrink:0}
.stamp{width:126px;height:126px;right:-6px;bottom:0;padding:18px;font-size:11px;line-height:1.3;letter-spacing:.2px;transform:rotate(6deg);border-width:5px}
.intro .tiny{max-width:420px;line-height:1.65}
@media(max-width:980px){
 .intro{grid-template-columns:1fr;max-width:760px;gap:30px;padding-top:34px}
 .intro h1{font-size:clamp(40px,7.8vw,62px)}
 .intro-art{width:100%;max-width:520px;margin:0 auto;padding-top:8px}
 .note{margin-bottom:34px}
}
@media(max-width:600px){
 header{padding-top:16px;padding-bottom:16px}
 .intro{padding-top:28px;padding-bottom:30px;gap:26px}
 .intro h1{font-size:clamp(34px,9.3vw,48px);letter-spacing:-1.8px;line-height:1.1;margin-bottom:22px}
 .intro .lede{font-size:16px;line-height:1.7}
 .intro-art{width:96%;margin-top:4px;padding-bottom:58px}
 .note{font-size:24px;max-width:25ch;margin-left:12px;margin-bottom:28px}
 .system{padding:25px 20px 34px;transform:rotate(1deg)}
 .system h2{font-size:25px}
 .flow-row{gap:8px}
 .flow-num{width:20px;flex-shrink:0}
 .flow-node{font-size:13px;line-height:1.45;padding:12px}
 .stamp{width:120px;height:120px;right:-4px;bottom:0;font-size:10.5px}
}