/* The desktop retains its ruled first screen; its seal gets a little more presence. */
.hero-copy .brand-seal{width:clamp(200px,25vw,340px)}
/* Mobile uses a compact masthead and independent, lighter oval links. */
@media(max-width:760px){
 .hero{padding-top:25px;padding-bottom:30px;gap:28px}
 .hero-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mark seal" "title title" "welcome welcome";align-items:start}
 .hero-copy .eyebrow{grid-area:mark;align-self:center;margin:0}
 .hero-copy .brand-seal{grid-area:seal;position:static;justify-self:end;display:block;width:132px;height:auto;transform:rotate(-8deg)}
 .hero h1{grid-area:title;margin-top:20px}
 .hero .manifesto.welcome.qiuyu-reveal{grid-area:welcome;margin-top:24px}
 .channel-index-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0}
 .channel-tile{min-height:50px;gap:8px;padding:12px 11px;border:1px solid rgba(0,0,0,.4);border-radius:999px;font-size:13px;line-height:1.3}
 .channel-tile img{width:19px;height:19px}
 .channel-tile .channel-name{min-width:0}
 .channel-tile .channel-arrow{position:static;margin-left:auto;font-size:13px;flex:0 0 auto}
 .channel-tile:focus-visible{outline-offset:3px;outline-width:1px}
 html[data-language=qiu] .channel-tile .channel-name{font-size:12px;white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:360px){
 .hero-copy .brand-seal{width:120px}
 .channel-index-panel{gap:9px}
 .channel-tile{font-size:12px;gap:7px;padding-inline:10px;min-height:48px}
 .channel-tile img{width:18px;height:18px}
 .channel-tile .channel-arrow{font-size:12px}
}