/* Bounded media contract. Load after site.css and inner.css.
   The full-width shell and fixed navigation are intentionally left untouched.
   Content frames contain the entire image; only decorative hero art may cover. */
.atlas-content{--media-group:1240px;min-width:0}
.atlas-content .home-sections,.atlas-content .inner-body,.atlas-content .reading-page,
.atlas-content .atlas-footer{width:100%;max-width:var(--media-group);margin-left:auto;margin-right:auto}
.atlas-content .home-sections{padding-left:16px;padding-right:16px}
.atlas-content .inner-body{padding-left:24px;padding-right:24px}

/* A frame's aspect ratio belongs to the frame, not to the card. An absolute
   contained image cannot enlarge the frame when a text overlay grows taller. */
.atlas-content :is(.category-art,.editorial-art,.journal-art,.child-art),
.atlas-inner :is(.inner-card-art,.inner-child-art,.inner-source-art,.inner-section-art,.inner-perk-art,.inner-principle-art){
 position:relative;inset:auto;display:block;width:min(100%,var(--media-width));
 height:auto;min-height:0;max-height:none;aspect-ratio:var(--media-ratio);
 align-self:start;justify-self:center;flex:none;margin-left:auto;margin-right:auto;overflow:hidden
}
.atlas-content :is(.category-art,.editorial-art,.journal-art,.child-art) img,
.atlas-inner :is(.inner-card-art,.inner-child-art,.inner-source-art,.inner-section-art,.inner-perk-art,.inner-principle-art) img{
 position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;
 max-width:100%;max-height:100%;object-fit:contain;object-position:center
}

/* Homepage: category 300 x 200; editorial 320 x 213.33. */
.atlas-content .category-grid{grid-template-columns:repeat(4,minmax(0,300px));justify-content:center;align-items:start}
.atlas-content .category-cell{width:100%;max-width:300px}
.atlas-content .category-tile{aspect-ratio:auto;grid-template-rows:minmax(max-content,auto);min-height:0}
.atlas-content .category-art{--media-width:300px;--media-ratio:3/2;grid-area:1/1}
.atlas-content .editorial-grid{grid-template-columns:repeat(3,minmax(0,320px));justify-content:center;align-items:start}
.atlas-content .editorial-card{width:100%;max-width:320px;justify-self:center;align-self:start}
.atlas-content .editorial-art{--media-width:320px;--media-ratio:3/2}
.atlas-content .editorial-copy{min-height:0}
.atlas-content .editorial-copy .circle-arrow{position:static;margin:12px 0 0 auto}
.atlas-content .editorial-copy p{padding-right:0}

/* Library/related 320 x 213.33. Journal lead 720 x 405; other stories 352 x 198. */
.atlas-inner .inner-library-grid{grid-template-columns:repeat(3,minmax(0,320px));justify-content:center;align-items:start}
.atlas-inner .inner-related-grid{grid-template-columns:repeat(2,minmax(0,320px));justify-content:center;align-items:start}
.atlas-inner :is(.inner-library-grid,.inner-related-grid)>.inner-card{width:100%;max-width:320px;justify-self:center}
.atlas-inner :is(.inner-library-grid,.inner-related-grid) .inner-card-art{--media-width:320px;--media-ratio:3/2}
.atlas-inner :is(.inner-library-grid,.inner-related-grid,.inner-journal-lead,.inner-story-list) .inner-card-main{
 display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(max-content,auto);
 height:auto;min-height:0;aspect-ratio:auto
}
.atlas-inner :is(.inner-library-grid,.inner-related-grid,.inner-journal-lead,.inner-story-list) .inner-card-art{
 grid-area:1/1;position:relative;inset:auto;height:auto;aspect-ratio:var(--media-ratio)
}
.atlas-inner :is(.inner-library-grid,.inner-related-grid,.inner-journal-lead,.inner-story-list) .inner-card-art img{
 position:absolute;width:100%;height:100%;object-fit:contain
}
.atlas-inner :is(.inner-library-grid,.inner-related-grid,.inner-journal-lead,.inner-story-list) .inner-card-copy{
 grid-area:1/1;align-self:end;min-width:0;padding:56px 16px 16px;overflow-wrap:anywhere
}
.atlas-inner :is(.inner-library-grid,.inner-related-grid,.inner-journal-lead,.inner-story-list) .inner-card-copy p{padding-right:0}
.atlas-inner :is(.inner-library-grid,.inner-related-grid,.inner-journal-lead,.inner-story-list) .inner-card-arrow{position:static;margin-top:12px;width:30px;height:30px}
.atlas-inner .inner-journal-lead{display:grid;grid-template-columns:minmax(0,720px) minmax(0,352px);grid-template-rows:auto auto;gap:16px;justify-content:center;align-items:start}
.atlas-inner .inner-journal-lead>.inner-lead-card{grid-column:1;grid-row:1/3;width:100%;max-width:720px}
.atlas-inner .inner-journal-lead>.inner-support-card{grid-column:2;width:100%;max-width:352px;justify-self:center}
.atlas-inner .inner-journal-lead .inner-lead-card .inner-card-art{--media-width:720px;--media-ratio:16/9}
.atlas-inner :is(.inner-support-card,.inner-story-row) .inner-card-art{--media-width:352px;--media-ratio:16/9}
.atlas-inner .inner-journal-lead .inner-lead-card h2{font-size:clamp(26px,2.6vw,40px)}
.atlas-inner .inner-journal-lead .inner-support-card h2,.atlas-inner .inner-story-row .inner-card-copy h2{font-size:clamp(21px,1.8vw,27px)}
.atlas-inner .inner-story-list{display:grid;grid-template-columns:repeat(3,minmax(0,352px));gap:16px;justify-content:center;align-items:start}
.atlas-inner .inner-story-list>.inner-story-row{width:100%;max-width:352px;justify-self:center}

/* Supporting roles have their own caps, never borrowed from hero dimensions. */
.atlas-content .journal-item>a{grid-template-columns:84px minmax(0,1fr);align-items:start}
.atlas-content .journal-art{--media-width:84px;--media-ratio:3/4}
.atlas-content .child-item.has-art,.atlas-inner .inner-child.has-art{grid-template-columns:56px minmax(0,1fr)}
.atlas-content .child-art,.atlas-inner .inner-child-art{--media-width:56px;--media-ratio:1}
.atlas-inner .inner-source.has-art{display:grid;grid-template-columns:65px minmax(0,1fr);align-items:start}
.atlas-inner .inner-source-art{--media-width:65px;--media-ratio:13/17;margin-bottom:0}
.atlas-inner .inner-section-art{--media-width:560px;--media-ratio:3/2}
.atlas-inner .inner-perk-art{--media-width:560px;--media-ratio:16/9}
.atlas-inner .inner-perk-card{width:100%;max-width:560px;justify-self:center}
.atlas-inner .inner-principle{display:flex;flex-direction:column;max-width:360px;width:100%;justify-self:center}
.atlas-inner .inner-principle-number{flex-shrink:0;white-space:nowrap}
.atlas-inner .inner-principle-copy>div{min-width:0;overflow-wrap:anywhere}
.atlas-inner .inner-principle-art{--media-width:360px;--media-ratio:3/2}
.atlas-content :is(.inner-prose,.reading-page) img{position:static;width:auto;height:auto;max-width:min(100%,960px);max-height:720px;object-fit:contain}
.atlas-content :is(.inner-prose,.reading-page) figure{max-width:100%}
.atlas-shell .brand-logo{width:auto;height:auto;max-width:min(100%,180px);max-height:70px;object-fit:contain}
.atlas-shell img.avatar{width:48px;height:48px;max-width:48px;max-height:48px;object-fit:contain}

/* Hero containers grow with text; their decorative image layer has a separate cap.
   Home 1240 x 380 (smaller configured heights respected), collections 1240 x 240,
   game/article/about/perks 1240 x 420, reader 1240 x 320, access 1240 x 480. */
.atlas-content .hero{width:100%;max-width:1240px;height:auto;min-height:0;margin:0 auto;overflow:visible;padding:88px 28px 26px}
.atlas-content .hero-art{inset:0 0 auto;height:min(calc(var(--hero-height,354) * 1px),380px);max-height:100%;overflow:hidden}
.atlas-content .hero-art:after{background:linear-gradient(90deg,#020a11c9,#020a1166 58%,transparent),linear-gradient(0deg,#020a11,transparent 25%)}
.atlas-content .hero-copy{position:relative;inset:auto;width:100%;max-width:58%;overflow-wrap:anywhere}
.atlas-content .hero h1{font-size:clamp(30px,3.3vw,48px);line-height:1.08}
.atlas-content .hero-copy>p{font-size:16px;line-height:1.5}
.atlas-content .hero-kicker{white-space:normal;flex-wrap:wrap;font-size:9px;letter-spacing:2px;margin-top:20px;gap:16px}
.atlas-inner{--hero-art-cap:420px}
.atlas-inner:is(.inner-library,.inner-journal){--hero-art-cap:240px}
.atlas-inner.inner-reader{--hero-art-cap:320px}
.atlas-inner.inner-access{--hero-art-cap:480px}
.atlas-inner .inner-hero{
 display:block;position:relative;width:100%;max-width:1240px;margin:0 auto;
 height:auto;min-height:0;padding:88px 28px 26px;overflow:visible;background:none
}
.atlas-inner .inner-hero-art,.atlas-inner .inner-hero:after{inset:0 0 auto;height:100%;max-height:var(--hero-art-cap);overflow:hidden}
.atlas-inner .inner-hero:after{background:linear-gradient(90deg,#020a11ed,#020a1199 60%,#020a1130),linear-gradient(0deg,#020a11,transparent 25%)}
.atlas-inner .inner-hero-art img{width:100%;height:100%;object-fit:cover}
.atlas-inner .inner-hero .inner-hero-copy{max-width:60%;margin:0;overflow-wrap:anywhere}
.atlas-inner .inner-hero h1{font-size:clamp(30px,3.3vw,48px);line-height:1.08;letter-spacing:-1px}
.atlas-inner .inner-hero .inner-subtitle{font-size:clamp(20px,2vw,26px);line-height:1.25;margin-top:12px}
.atlas-inner .inner-hero .inner-intro{font-size:16px;line-height:1.5;margin-top:12px;max-width:52ch}
.atlas-inner .inner-breadcrumb{margin-bottom:12px}
.atlas-inner .inner-hero-copy>.inner-button{margin-top:18px}
.atlas-inner .inner-byline{margin-top:18px}
.atlas-inner:is(.inner-library,.inner-journal) .inner-hero{padding-bottom:20px}
.atlas-inner:is(.inner-library,.inner-journal) .inner-hero h1{font-size:clamp(28px,2.8vw,38px)}
.atlas-inner:is(.inner-library,.inner-journal) .inner-hero .inner-hero-copy{max-width:85%}
.atlas-inner.inner-article .inner-body{margin-top:0}
.atlas-inner.inner-access .inner-access-stage{width:100%;max-width:1240px;margin:0 auto;min-height:0;padding:88px 28px 30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:28px;align-items:start}
.atlas-inner.inner-access .inner-access-stage>.inner-hero{position:static;isolation:auto;width:100%;max-width:none;margin:0;padding:0;min-height:0}
.atlas-inner.inner-access .inner-access-stage .inner-hero-copy{max-width:100%;margin:0}
.atlas-inner.inner-access .inner-access-form-wrap{max-width:440px;margin:0;padding:0}

@media(min-width:701px){
 .atlas-content>.atlas-topbar{width:calc(100% - 48px);max-width:1192px;left:50%;right:auto;transform:translateX(-50%)}
}
@media(max-width:1100px){
 .atlas-inner .inner-journal-lead{grid-template-columns:minmax(0,720px);grid-template-rows:auto;justify-items:center}
 .atlas-inner .inner-journal-lead>.inner-lead-card,.atlas-inner .inner-journal-lead>.inner-support-card{grid-column:1;grid-row:auto}
 .atlas-inner .inner-story-list{grid-template-columns:minmax(0,352px)}
 .atlas-inner .inner-library-grid{grid-template-columns:repeat(2,minmax(0,320px))}
 .atlas-inner.inner-access .inner-access-stage{grid-template-columns:minmax(0,1fr);gap:24px}
 .atlas-inner.inner-access .inner-access-form-wrap{justify-self:center}
 .atlas-inner .inner-hero .inner-hero-copy{max-width:75%}
}
@media(max-width:700px){
 .atlas-content .home-sections{padding-left:8px;padding-right:8px}
 .atlas-content .inner-body{padding-left:16px;padding-right:16px}
 .atlas-content .editorial-grid{align-items:center}
 .atlas-content .editorial-card{align-self:center}
 .atlas-content .journal-item>a{grid-template-columns:66px minmax(0,1fr) 20px}
 .atlas-content .journal-art{--media-width:66px;--media-ratio:11/12}
 .atlas-content .child-item.has-art,.atlas-inner .inner-child.has-art{grid-template-columns:40px minmax(0,1fr)}
 .atlas-content .child-art,.atlas-inner .inner-child-art{--media-width:40px}
 .atlas-inner .inner-source.has-art{grid-template-columns:68px minmax(0,1fr)}
 .atlas-inner .inner-source-art{--media-width:68px;--media-ratio:17/20}
 .atlas-shell .brand-logo{max-height:36px}
 .atlas-content .hero{padding:22px 16px 24px}
 .atlas-content .hero-art{height:min(var(--mobile-hero-height,180px),220px)}
 .atlas-content .hero-copy{max-width:100%}
 .atlas-content .hero h1{font-size:28px}
 .atlas-content .hero-copy>p{font-size:13px;max-width:36ch}
 .atlas-content .hero-kicker{font-size:8px;letter-spacing:1px;gap:10px;margin-top:16px}
 .atlas-inner{--hero-art-cap:320px}
 .atlas-inner:is(.inner-library,.inner-journal){--hero-art-cap:180px}
 .atlas-inner.inner-reader{--hero-art-cap:260px}
 .atlas-inner.inner-access{--hero-art-cap:320px}
 .atlas-inner .inner-hero,.atlas-inner:is(.inner-library,.inner-journal) .inner-hero{padding:24px 16px;min-height:0}
 .atlas-inner .inner-hero .inner-hero-copy,.atlas-inner:is(.inner-library,.inner-journal) .inner-hero .inner-hero-copy{max-width:100%}
 .atlas-inner .inner-hero h1,.atlas-inner:is(.inner-library,.inner-journal) .inner-hero h1{font-size:30px;line-height:1.12}
 .atlas-inner .inner-hero .inner-intro{font-size:14px}
 .atlas-inner .inner-hero .inner-subtitle{font-size:21px}
 .atlas-inner.inner-access .inner-access-stage{display:block;padding:0 0 24px}
 .atlas-inner.inner-access .inner-access-stage>.inner-hero{position:relative;isolation:isolate;padding:24px 16px}
 .atlas-inner.inner-access .inner-access-form-wrap{width:calc(100% - 32px);margin:0 auto}
 .atlas-inner .inner-journal-lead .inner-lead-card h2{font-size:28px}
 .atlas-inner .inner-journal-lead .inner-support-card h2,.atlas-inner .inner-story-row .inner-card-copy h2{font-size:23px}
 .atlas-inner :is(.inner-library-grid,.inner-related-grid) .inner-card-copy{padding:44px 10px 12px}
}
@media(max-width:360px){
 .atlas-inner .inner-library-grid,.atlas-inner .inner-related-grid{grid-template-columns:minmax(0,320px)}
 .atlas-inner .inner-hero h1,.atlas-inner:is(.inner-library,.inner-journal) .inner-hero h1{font-size:27px}
 .atlas-inner .inner-hero .inner-breadcrumb{gap:6px}
}
