/* The Ants RU - shared spacing and aligned section frames.
   Keep image/card padding separate from structural page gutters. */
:root{--page-max:1440px;--page-gutter:32px;--panel-space:32px;--block-gap:32px}
.atlas-site .wrap{max-width:var(--page-max);width:100%;margin-inline:auto;padding-inline:var(--page-gutter)}
.atlas-site header.site>.wrap{max-width:var(--page-max);padding-inline:var(--page-gutter)}
.atlas-site .wrap .wrap{width:100%;max-width:none;margin-inline:0;padding-inline:0}
.atlas-site :is(.home-hero,.atlas-catalog-hero){width:calc(100% - var(--page-gutter) * 2);max-width:calc(var(--page-max) - var(--page-gutter) * 2);margin-inline:auto}
.atlas-site :is(.home-hero,.atlas-catalog-hero)>.wrap{max-width:none;padding-inline:0}
/* A frame and its artwork have one boundary, not negative-width overlays. */
.atlas-site.home-page main>.wrap>:is(.forest-section,.home-toolbox,.home-community,.atlas-lineup-preview,#leadnow,.home-quick){width:100%;max-width:none;margin-inline:0;box-sizing:border-box}
.atlas-site.home-page main>.wrap>.forest-section{padding:var(--panel-space);border-radius:19px;margin-block:0 var(--block-gap)}
.atlas-site.home-page .forest-section:before{inset:0;border-radius:inherit}
.atlas-site.home-page .forest-section:after{top:0;left:24px;right:24px}
.atlas-site.home-page main>.wrap>.home-toolbox,
.atlas-site.home-page main>.wrap>.home-community{padding:var(--panel-space);margin-block:0 var(--block-gap);border-radius:19px}
.atlas-site.home-page main>.wrap>.atlas-lineup-preview{padding-inline:var(--panel-space);margin-block:0 var(--block-gap);border-radius:19px}
.atlas-site.home-page .atlas-lineup-preview>summary{padding-block:26px}
.atlas-site.home-page .home-quick.atlas-portals{margin-bottom:var(--block-gap)}
.atlas-site.home-page .atlas-section-head,
.atlas-site.home-page .home-section-head{gap:20px;margin-bottom:24px}
.atlas-site.home-page .champs>.lede{max-width:72ch;margin-block:0 24px}
.atlas-site.home-page #progress:empty{display:none}
.atlas-site.home-page #progress:not(:empty){padding:var(--panel-space);border:1px solid var(--atlas-line);border-radius:19px;margin:0 0 var(--block-gap)}
/* Feedback panel: the forest border is not a text boundary. */
.atlas-site footer.site-foot .foot-contact{padding:28px var(--panel-space);gap:28px;border:1px solid var(--atlas-line);border-radius:16px;margin-top:30px;box-sizing:border-box}
.atlas-site .foot-contact>div{min-width:0}
.atlas-site .foot-contact>div:first-child>span{margin:0 0 10px;line-height:1.6}
.atlas-site .foot-contact b{line-height:1.5;margin:0}
.atlas-site .foot-contact p{margin:9px 0 0;line-height:1.75}
.atlas-site .foot-social{gap:12px;flex-wrap:wrap}
.atlas-site .foot-social a{min-height:46px;padding:12px 17px;line-height:1.5;white-space:normal;text-align:center}
/* Text panels used on articles, schedules and utility pages. */
.atlas-site .box{padding:22px 24px;border:1px solid var(--atlas-line);border-radius:14px;line-height:1.75;box-sizing:border-box}
.atlas-site .box>:first-child{margin-top:0}
.atlas-site .box>:last-child{margin-bottom:0}
.atlas-site .box.berrybox{padding:24px;margin-block:20px 28px}
.atlas-site .wrap>section.band{padding:var(--panel-space);border:1px solid var(--atlas-line);border-radius:18px;margin-block:var(--block-gap)}
.atlas-site .band>.wrap{padding-inline:var(--page-gutter)}
.atlas-site .wrap>.band>.wrap{padding-inline:0}
.atlas-site .band h2{line-height:1.25;margin-top:0;margin-bottom:14px}
.atlas-site .band p{line-height:1.75}
.atlas-site .hero:not(.atlas-catalog-hero){padding-block:40px 30px;margin-bottom:24px}
.atlas-site .hero:not(.atlas-catalog-hero) h1{margin-bottom:16px}
.atlas-site .hero:not(.atlas-catalog-hero) .lede:last-child{margin-bottom:0}
/* Preserve narrow reading columns inside a wide editorial frame. */
.atlas-site .artwrap.article-layout{width:calc(100% - var(--page-gutter) * 2);max-width:calc(var(--page-max) - var(--page-gutter) * 2)}
.atlas-site .artwrap.article-layout>.paper{width:100%;max-width:none;margin-inline:0}
.atlas-site .paper.atlas-profile,
.atlas-site .paper.cm-page,
.atlas-site .paper.wc-page{width:calc(100% - var(--page-gutter) * 2);max-width:calc(var(--page-max) - var(--page-gutter) * 2)}
.atlas-site .article-layout>.paper.atlas-profile,
.atlas-site .article-layout>.paper.cm-page,
.atlas-site .article-layout>.paper.wc-page{width:100%;max-width:none}
.atlas-site .atlas-catalog-controls{padding:26px}
.atlas-site :is(.atlas-section-head,.home-section-head)>div{min-width:0}
.atlas-site .paper :is(h2,h3){scroll-margin-top:105px}
@media(max-width:1000px){
 :root{--page-gutter:24px;--panel-space:24px;--block-gap:28px}
 .atlas-site footer.site-foot .foot-contact{grid-template-columns:minmax(0,1fr);padding:24px;gap:22px}
 .atlas-site .foot-social{justify-content:flex-start}
}
@media(max-width:640px){
 :root{--page-gutter:16px;--panel-space:18px;--block-gap:24px}
 .atlas-site.home-page main>.wrap>.forest-section,
 .atlas-site.home-page main>.wrap>.home-toolbox,
 .atlas-site.home-page main>.wrap>.home-community{padding:22px var(--panel-space);border-radius:14px}
 .atlas-site.home-page main>.wrap>.atlas-lineup-preview{border-radius:14px}
 .atlas-site.home-page .forest-section:after{left:18px;right:18px}
 .atlas-site.home-page .atlas-section-head,
 .atlas-site.home-page .home-section-head{gap:14px;align-items:flex-start;margin-bottom:20px}
 .atlas-site.home-page .atlas-section-head h2,
 .atlas-site.home-page .home-section-head h2{font-size:28px;line-height:1.15;overflow-wrap:normal}
 .atlas-site.home-page .home-fresh .home-section-head{flex-wrap:wrap}
 .atlas-site.home-page .champs>.lede{margin-bottom:20px}
 .atlas-site.home-page .home-quick.atlas-portals{margin-block:18px var(--block-gap)}
 .atlas-site.home-page .atlas-lineup-preview>summary{padding-block:22px}
 .atlas-site footer.site-foot .foot-contact{padding:22px 18px;gap:21px;border-radius:13px;margin-top:24px}
 .atlas-site .foot-contact b{font-size:17px;line-height:1.45}
 .atlas-site .foot-contact p{font-size:12px;line-height:1.7}
 .atlas-site .foot-social{display:grid;grid-template-columns:1fr;width:100%;gap:10px}
 .atlas-site .foot-social a{width:100%;min-height:46px}
 .atlas-site .box,.atlas-site .box.berrybox{padding:19px 18px;border-radius:12px;line-height:1.75}
 .atlas-site .hero:not(.atlas-catalog-hero){padding-block:27px 25px;margin-bottom:22px}
 .atlas-site .hero:not(.atlas-catalog-hero) h1{margin-bottom:13px}
 .atlas-site .band{padding-block:26px}
 .atlas-site .wrap>section.band{padding:22px 18px}
 .atlas-site .atlas-catalog-controls{padding:19px 17px}
 .atlas-site .paper{width:calc(100% - var(--page-gutter) * 2);padding:24px 19px}
 .atlas-site .paper.atlas-profile,.atlas-site .paper.cm-page,.atlas-site .paper.wc-page{padding:24px 19px}
 .atlas-site .article-layout>.paper{width:100%}
 .atlas-site .atlas-filter-row{gap:16px 10px}
}
@media(max-width:359px){
 :root{--page-gutter:12px;--panel-space:16px}
 .atlas-site.home-page .atlas-section-head{flex-wrap:wrap}
 .atlas-site.home-page .atlas-section-head>a{display:flex;gap:8px;align-items:center;text-align:left;max-width:none}
 .atlas-site.home-page .atlas-section-head>a span{margin-top:0}
 .atlas-site.home-page .atlas-home-ants .an b,.atlas-site.home-page .atlas-wild-copy>h3{font-size:12px}
}

/* Readable information panels - 2026-09-25, layout QA 5.
   An opaque base under translucent gradients prevents the page artwork from
   showing through copy. Illustrated hero/section backgrounds stay untouched. */
.atlas-site :is(.tiernote,.advice,.box,.panel,.emptybox,.factbox,.progressbox,
 .note-box,.comparison-panel,.tierhelp,.tier-updates,.game-update-note,
 .abouttxt,.foot-contact){
 background-color:#10271b!important;
 border-color:rgba(218,187,102,.36);
}
.atlas-site :is(.paper,.squad-card){background-color:#0b2016!important}
.atlas-site :is(.tiernote,.advice){
 padding:24px 28px;
 margin:24px 0 32px;
 border:1px solid rgba(218,187,102,.38);
 border-radius:16px;
 background:linear-gradient(120deg,#142d20,#0c2117)!important;
 color:#cdd7c3;
 box-shadow:inset 0 1px 0 #f0d48612,0 0 20px #c59d2612,0 8px 22px #0004;
 line-height:1.8;
 font-size:14px;
}
.atlas-site .tiernote{max-width:none;columns:auto;column-count:1}
.atlas-site .tiernote a{color:#f4d083;text-underline-offset:3px}
.atlas-site .tiernote b{color:#f0ebd5}
.atlas-site .tier-explainer{
 display:grid;grid-template-columns:1.1fr 1fr;gap:28px;
}
.atlas-site .tier-explainer>div{min-width:0}
.atlas-site .tier-explainer>div+div{
 border-left:1px solid #cbb66d3d;padding-left:28px;
}
.atlas-site .tier-explainer h2{
 font:500 23px/1.3 var(--font-display);
 letter-spacing:0;color:#f3e6bf;margin:0 0 12px;
}
.atlas-site .tier-explainer p{margin:0;line-height:1.8;font-size:14px}
.atlas-site .tier-explainer p+p{margin-top:12px}
.atlas-site .advice:empty{display:none}
.atlas-site .advice .advhint{margin:0;color:#c4d2bc;line-height:1.8}
.atlas-site .advice>:first-child{margin-top:0}
.atlas-site .advice>:last-child{margin-bottom:0}
.atlas-site .tiernote+.advice{margin-top:28px}
.atlas-site .tier-updates{margin-block:24px}
.atlas-site .tier-updates .game-update-note{background-color:transparent!important}
/* Paragraph separation must work inside notes as well as in reading columns. */
.atlas-site .box>:is(p,ul,ol)+:is(p,ul,ol){margin-top:14px}
.atlas-site .box>:last-child{margin-bottom:0}
.atlas-site .box>:first-child{margin-top:0}
.atlas-site .gnote{background-color:#173321}
.atlas-site .gnote.gnote-warn{background-color:#342b16}
.atlas-site .gnote.gnote-stop{background-color:#342219}
.atlas-site .gnote p+p{margin-top:12px}
.atlas-site .gnote :is(p,ul,ol){line-height:1.75}
.atlas-site .helpbody{line-height:1.75}
.atlas-site .helprow{align-items:start}
.atlas-site .helprow p{margin-top:0;line-height:1.75}
.atlas-site .helpnote{line-height:1.75}
.atlas-site.tier-atlas .tierhelp{padding:0}
.atlas-site.tier-atlas .tierhelp .helpbody{margin-top:0;padding:8px 20px 22px}
.atlas-site.tier-atlas .tierhelp .helpbody>.helpnote:first-child{margin-top:0}
.atlas-site.tier-atlas .tierhelp .helpbody .helprow+.helprow{margin-top:16px}
/* A previous home-only negative margin leaked into other pages. */
.atlas-site .progressbox:not(:empty){margin-block:24px 32px}
.atlas-site.home-page #progress:not(:empty){margin-top:0}
/* Feedback has its own readable surface even above the illustrated footer. */
.atlas-site footer.site-foot .foot-contact{
 background:linear-gradient(115deg,#10271b,#0a1d14)!important;
 border-color:#c8ac625e;
 box-shadow:inset 0 1px 0 #f2d8880e,0 8px 22px #0003;
}
.atlas-site footer.site-foot .foot-contact b{color:#f0e9d0}
.atlas-site footer.site-foot .foot-contact p{color:#bdccb2}
@media(max-width:760px){
 .atlas-site :is(.tiernote,.advice){padding:21px 22px;margin-block:22px 28px}
 .atlas-site .tier-explainer{grid-template-columns:minmax(0,1fr);gap:21px}
 .atlas-site .tier-explainer>div+div{border-left:0;border-top:1px solid #cbb66d3d;padding:20px 0 0}
 .atlas-site .tiernote+.advice{margin-top:24px}
}
@media(max-width:640px){
 .atlas-site :is(.tiernote,.advice){padding:20px 18px;border-radius:13px;font-size:13px;line-height:1.8}
 .atlas-site .tier-explainer h2{font-size:22px;margin-bottom:11px}
 .atlas-site .tier-explainer p{font-size:13px}
 .atlas-site.tier-atlas .tierhelp .helpbody{padding:7px 16px 20px}
 .atlas-site .tier-updates{margin-block:22px}
 .atlas-site .advice .advhint{font-size:13px}
}

/* Standalone feedback/reaction boxes also sit above forest artwork. */
.atlas-site .thanks{background-color:#14271b!important;line-height:1.75}
.atlas-site nav.crumbs{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;line-height:1.65}
.atlas-site nav.crumbs>[aria-current="page"]{color:#c5cfb8}
/* Calculator controls and instructions need a surface, not the page forest. */
.atlas-site .cols>main{
 min-width:0;
 padding:26px;
 border:1px solid #cbb06a57;
 border-radius:18px;
 background:linear-gradient(145deg,#132c1f,#0b2117);
 box-shadow:inset 0 1px 0 #f0d68612,0 8px 26px #0004;
}
.atlas-site .cols>main .bar{gap:10px;margin-bottom:16px}
.atlas-site .cols>main .bar h2{line-height:1.5}
.atlas-site .cols>main :is(.hint,.starhint){color:#c2d0b8;line-height:1.75;margin-bottom:18px}
.atlas-site .cols>main .step>:first-child{min-width:0;overflow-wrap:anywhere}
@media(max-width:640px){
 .atlas-site .cols>main{padding:20px 16px;border-radius:14px}
 .atlas-site .cols>main .bar{gap:9px}
 .atlas-site .cols>main .bar h2{width:100%;margin-bottom:3px}
}
/* A catalog count is a label, not a standalone information card. */
.atlas-site #antcount.tiernote{background:none!important;box-shadow:none;border:0;margin:0;padding:0;line-height:1.6}

/* Article width alignment - 2026-09-25.
   Keep editorial follow-up sections on the exact same frame as the article
   and the global site content. */
.atlas-site .artwrap.article-layout,
.atlas-site .article-layout ~ .artmore,
.atlas-site .artmore.article-more,
.atlas-site main > .artmore {
  width: calc(100% - var(--page-gutter) * 2);
  max-width: calc(var(--page-max) - var(--page-gutter) * 2);
  margin-left: auto;
  margin-right: auto;
}
.atlas-site .article-layout > .article-community {
  width: 100%;
  max-width: none;
}
@media (max-width: 640px) {
  .atlas-site .artwrap.article-layout,
  .atlas-site .article-layout ~ .artmore,
  .atlas-site .artmore.article-more,
  .atlas-site main > .artmore {
    width: calc(100% - var(--page-gutter) * 2);
  }
}
