/* San Andreas promotional-site composition: illustrated chapters, black
   gutters, paper titles and geographic reveals. Existing camera CSS retained. */
.sa-home{background:#080909;color:#e5e0d6}
.sa-home .hero{min-height:0;padding:40px 28px 32px;text-align:left}
.sa-home .hero-inner{max-width:1264px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1fr);align-items:center;gap:12px 40px}
.sa-home .hero-logo{max-width:490px;margin:0;grid-row:1/3}
.sa-home .hero-status{justify-self:start;margin:0}
.sa-home .hero-inner .flex{justify-content:flex-start}
.sa-home .hero-bg{opacity:.09}.sa-home .hero-glow{display:none}
.sa-portals{max-width:1264px;margin:0 auto 70px;padding:0 28px;display:grid;grid-template-columns:1.05fr 1fr 1fr;grid-template-rows:230px 230px;gap:12px}
.sa-portals>header{grid-column:1;grid-row:1;background:#d7cfb9;color:#151611;padding:26px;clip-path:polygon(0 0,100% 2%,96% 100%,0 95%)}
.sa-portals h2{font:clamp(28px,3.2vw,42px)/1 Pricedown,Impact,sans-serif;margin:12px 0}
.sa-portals header p{font:12px/1.6 monospace;margin:0;max-width:36ch}
.sa-panel{position:relative;overflow:hidden;background:#252820;display:block;color:#fff;text-decoration:none;isolation:isolate;min-width:0;border-bottom:4px solid #b6aa83}
.sa-world{grid-column:2;grid-row:1/3;clip-path:polygon(3% 0,100% 0,97% 97%,0 100%)}
.sa-life{grid-column:3;grid-row:1/3;clip-path:polygon(0 2%,97% 0,100% 100%,3% 98%)}
.sa-download{grid-column:1;grid-row:2;clip-path:polygon(0 0,96% 3%,100% 100%,0 97%)}
.sa-panel img{width:100%;height:100%;object-fit:cover;filter:saturate(.65) contrast(1.12);transition:transform .35s,opacity .3s}
.sa-panel:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 25%,#080909ed);pointer-events:none}
.sa-panel-copy{position:absolute;bottom:25px;left:22px;right:16px;z-index:2;display:grid;gap:8px}
.sa-panel-copy strong{font:clamp(30px,4vw,52px)/1 Pricedown,Impact,sans-serif;color:#fff4d4}
.sa-panel-copy small,.sa-panel-copy>span{font:11px/1.5 monospace}.sa-panel-copy small{color:#ffc54b;text-transform:uppercase}
.sa-map-preview{position:absolute;inset:0;background:#373a27 var(--portal-map) center/cover;opacity:0;transition:opacity .25s}
.sa-world:hover .sa-map-preview,.sa-world:focus-visible .sa-map-preview{opacity:1}
.sa-panel:hover img,.sa-panel:focus-visible img{transform:scale(1.04)}
.sa-panel:focus-visible{outline:4px solid #ffc54b;outline-offset:-5px}
.sa-home .world-directory,.sa-home .features,.sa-home .valkyrie-mods{max-width:1264px;margin:65px auto;padding:28px;border-top:2px solid #75694c;scroll-margin-top:20px}
.sa-home .directory-heading{display:grid;grid-template-columns:1fr 1fr;gap:5px 25px}.sa-home .directory-heading h2{grid-column:1;grid-row:2;margin:5px 0 20px}.sa-home .directory-heading>p:last-child{grid-column:2;grid-row:2;align-self:center}
.sa-home .faction-kicker{box-shadow:none;transform:none;background:#c7b992;color:#14140f}
.sa-home .roster-section>summary{background:#25271f;border-left-color:#c5b58b;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.sa-home .features>h2{font:900 clamp(32px,5vw,66px)/.95 Pricedown,Impact,sans-serif;color:#eee6d7;margin:0 0 25px;-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:0 6px 0 rgba(0,0,0,.85)}
.sa-home .features>.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px}
.sa-home .features .feature{grid-column:auto!important;height:340px!important;clip-path:none;border-bottom:3px solid #9c8d66}
.sa-home .features .feature:first-child{grid-column:1/-1!important}
.sa-home .features .feature-body{background:linear-gradient(90deg,#080909f2,#08090990);max-width:100%;height:100%;box-sizing:border-box}
.sa-home .valkyrie-mods .mods-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.sa-home .valkyrie-mods details.mod-card{min-height:0;background:#20231e;clip-path:none;border-top:3px solid #aa9566;padding:0 22px}
.sa-home .valkyrie-mods details.mod-card[open]{padding-bottom:22px}
.sa-home footer{border-top:1px solid #75694c;padding-top:30px}
@media(max-width:760px){.sa-home .hero-inner{display:block}.sa-home .hero-logo{max-width:380px;margin:0 0 20px}.sa-portals{grid-template-columns:1fr 1fr;grid-template-rows:auto 300px 220px;padding:0 16px}.sa-portals>header{grid-column:1/-1;grid-row:1}.sa-world{grid-column:1;grid-row:2}.sa-life{grid-column:2;grid-row:2}.sa-download{grid-column:1/-1;grid-row:3}.sa-home .directory-heading{display:block}.sa-home .features>.grid,.sa-home .valkyrie-mods .mods-grid{grid-template-columns:1fr!important}.sa-home .world-directory,.sa-home .features,.sa-home .valkyrie-mods{padding:18px 14px;margin:35px auto}.page-nav{gap:4px 14px!important}.sa-panel-copy{left:14px}.sa-panel-copy strong{font-size:32px}}
@media(prefers-reduced-motion:reduce){.sa-panel img,.sa-map-preview{transition:none}.sa-panel:hover img{transform:none}}

/* Single illustrated entrance; content opens as a chapter, with URL history. */
.sa-home [hidden]{display:none!important}
.sa-at-start .hero{padding:18px 28px;background:none}
.sa-at-start .hero-logo{max-width:270px}
.sa-at-start .hero-inner{grid-template-columns:1fr 2fr}
.sa-at-start .hero-bg{display:none}
.sa-at-start .sa-portals{position:relative;display:block;height:clamp(420px,65vh,680px);max-width:1150px;padding:0;margin:0 auto 28px;isolation:isolate;overflow:hidden;
 background:#151919 url('/assets/backgrounds/dashboard.webp') center/cover no-repeat;
 clip-path:polygon(2% 0,98% 2%,100% 96%,0 100%);border:5px solid #070808}
.sa-at-start .sa-portals:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#080909b0,transparent 65%),linear-gradient(0deg,#080909c0,transparent 70%);z-index:-1}
.sa-at-start .sa-portals>header{position:absolute;left:5%;top:7%;width:42%;padding:0;background:none;color:#fff4d8;clip-path:none;text-shadow:2px 3px #000}
.sa-at-start .sa-portals h2{font-size:clamp(38px,5vw,68px)}
.sa-at-start .sa-portals header p{font:12px/1.6 monospace}
.sa-at-start .sa-panel{position:absolute;width:27%;height:94px;min-height:0;bottom:13%;border:0;overflow:visible;background:#111c;clip-path:polygon(4% 0,100% 0,96% 100%,0 94%);transition:background .2s,transform .2s}
.sa-at-start .sa-world{left:5%}.sa-at-start .sa-life{left:36%}.sa-at-start .sa-download{left:67%}
.sa-at-start .sa-panel>img,.sa-at-start .sa-panel:after{display:none}
.sa-at-start .sa-panel-copy{inset:12px 18px;gap:4px}
.sa-at-start .sa-panel-copy strong{font-size:32px}
.sa-at-start .sa-panel-copy>span{font-size:10px}
.sa-at-start .sa-panel:hover,.sa-at-start .sa-panel:focus-visible{background:#443b20;transform:translateY(-5px)}
.sa-at-start .sa-map-preview{display:none}
.sa-at-start .sa-portals:has(.sa-world:hover),.sa-at-start .sa-portals:has(.sa-world:focus-visible){background-image:var(--portal-map);background-size:cover}
.sa-scene-news{position:absolute;right:7%;bottom:5%;font:12px monospace;color:#ffe1a0;text-decoration:none;padding:8px}
.sa-home .world-directory,.sa-home .features,.sa-home .valkyrie-mods{margin-top:22px}
.sa-at-start footer{padding-top:12px}
@media(max-width:760px){.sa-at-start .hero-inner{display:block}.sa-at-start .hero-logo{max-width:210px}.sa-at-start .sa-portals{height:610px;margin:0 12px 20px}.sa-at-start .sa-portals>header{width:85%;top:5%}.sa-at-start .sa-panel{width:87%;height:78px;left:6%}.sa-at-start .sa-world{bottom:37%}.sa-at-start .sa-life{bottom:23%}.sa-at-start .sa-download{bottom:9%}.sa-at-start .sa-panel-copy strong{font-size:26px}.sa-scene-news{bottom:1%}}
@media(prefers-reduced-motion:reduce){.sa-at-start .sa-panel{transition:none}.sa-at-start .sa-panel:hover{transform:none}}

/* One page, three folds. The bar is the same slab the rosters inside the page
   already use to open and close themselves - dark panel, black edge, Pricedown
   name, gold cross - so the page has one way of folding rather than two. */
.sa-fold{display:block;max-width:1320px;margin:16px auto 0;padding:0 28px;scroll-margin-top:16px}
.sa-scenes{display:block;padding-bottom:clamp(40px,7vh,90px)}
.sa-fold-bar{display:flex;width:100%;align-items:center;gap:18px;padding:20px 24px;background:#151019;border:2px solid #070709;color:#f2ede5;font:28px/1 Pricedown,Impact,sans-serif;text-align:left;cursor:pointer}
.sa-fold-bar:hover,.sa-fold-bar:focus-visible{color:#f5a31a}
.sa-fold-bar:focus-visible{outline:2px solid #ffb800;outline-offset:-4px}
.sa-fold-note{margin-left:auto;padding:3px 0 3px 12px;border-left:1px solid rgba(245,163,26,.55);color:#b9b0c0;font:11px monospace;letter-spacing:.1em;text-transform:uppercase}
.sa-fold-mark{font:24px/1 monospace;color:#f5a31a;transition:transform .2s ease}
.sa-fold:not(.is-folded) .sa-fold-mark{transform:rotate(45deg)}
/* minmax(0,...) rather than a bare fr: `0fr` means `minmax(auto,0fr)`, and
   that automatic minimum is the item's min-content size, so a closed fold
   never actually reached zero. min-height:0 on the child covers its content
   but not its margins, which is why Explore held 95px open - 38px of heading
   plus 22 and 35 of margin - and Rules held 40. The margins are zeroed here
   for the same reason. */
.sa-fold-body{display:grid;grid-template-rows:minmax(0,1fr);opacity:1;transition:grid-template-rows .38s cubic-bezier(.22,.61,.36,1),opacity .3s ease .06s}
.sa-fold-body>*{min-height:0;min-width:0}
.sa-fold.is-folded .sa-fold-body{grid-template-rows:minmax(0,0fr);opacity:0;overflow:hidden;transition:grid-template-rows .32s cubic-bezier(.4,0,.6,1),opacity .18s ease}
.sa-fold.is-folded .sa-fold-body>*{margin-top:0;margin-bottom:0}
/* One box for every fold's contents.
   Each section was written for the old stacked page, where it centred itself
   in the viewport with a max-width and a margin of its own. Inside a fold
   that left four different insets - the About kicker at 149, Explore at 264,
   In Development at 81, Rules at 224 - against a bar whose own text starts
   at 105. Here they are all the fold's width, with one inset that matches
   the bar, and one rhythm top and bottom. */
/* .sa-home in front so this matches the two-class specificity the section
   rules above use; being later in the file then settles the tie. */
.sa-home .sa-fold-body>*{width:auto;max-width:none;margin:0;padding:26px 24px 40px;border-top:0}
/* In Development holds two sections of its own, which carried the same
   centring and would otherwise inset a second time inside the first. */
.sa-home .sa-fold-body>*>.valkyrie-mods{
 width:auto;max-width:none;margin:0 0 40px;padding:0;border-top:0}
@media(max-width:760px){.sa-home .sa-fold-body>*{padding:18px 14px 28px}}
.sa-fold-bar{transition:color .18s ease,border-color .18s ease,background .18s ease}
.sa-fold-bar:hover .sa-fold-name{transform:translateX(3px)}
.sa-fold-name{display:inline-block;transition:transform .18s ease}
.sa-fold-body>*{margin-top:0}
@media(max-width:760px){.sa-fold{padding:0 14px}.sa-fold-bar{padding:18px 14px;font-size:24px;gap:12px}.sa-fold-note{display:none}}
@media(prefers-reduced-motion:reduce){.sa-fold-mark{transition:none}}

/* One scale across the three sections, which were written separately and met
   for the first time on this page. Size and spacing only: the kickers sit on
   backgrounds of their own - a gold sticker here, a paper slab there - so
   their colour is theirs to set, and forcing one grey on all of them put pale
   text on pale backgrounds. The headings keep their own treatment for the same
   reason: the outline belongs to the one that was drawn with it. */
.sa-fold-body .case-kicker,.sa-fold-body .mods-kicker,.sa-fold-body .faction-kicker{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px}
.sa-fold-body .features>h2,.sa-fold-body .valkyrie-mods>h2,.sa-fold-body .directory-heading h2{
  font-size:clamp(26px,3vw,36px)!important;line-height:1!important;margin:0 0 1.4rem!important}
.sa-fold-body .info-lead{font-size:15px;line-height:1.6}
.sa-fold-body .info-body p,.sa-fold-body .info-body li,
.sa-fold-body .mod-description{font-size:14px;line-height:1.65}
.sa-fold-body .info-body h3{
  font-size:20px;line-height:1.15;margin:1.6rem 0 .6rem}
/* The film stands in the artwork own place, so it needs no stage of its own.
   The skip is taken out of the flow for the same reason: an item in the column
   would push the glass off the spot the artwork occupies. The wordmark and the
   notice stay put and are only faded, so nothing moves when the film clears. */
/* One cell holding both, so the film sits on the artwork rather than
   beside it in the column. */
.sa-glass{position:relative;display:grid;grid-template-areas:'glass'}
.sa-glass>.sa-fragments,.sa-glass>.sa-intro-art{grid-area:glass}
/* The film and the artwork sit in the same cell, so the soft edge the mask
   gives the shards was letting the picture underneath show as a bright line
   along every crack. The artwork is kept out of the paint while the film
   runs - not out of the layout, so nothing moves when it comes back. */
.sa-intro-playing .sa-glass>.sa-fragments{visibility:hidden}
.sa-intro-art{z-index:2;object-fit:cover;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:opacity .45s ease}
.sa-intro-art.is-leaving{opacity:0;pointer-events:none}
/* Out instantly, back in gently. The fade belongs to the film ending, not
   to it starting: the notice was painted, then faded away under the film
   on every load, because the transition ran in both directions. */
.site-disclaimer{transition:opacity .3s ease}
.sa-intro-playing .site-disclaimer{opacity:0;transition:none}
.sa-intro-skip{position:absolute;right:1%;bottom:4%;z-index:4;border:0;background:none;color:#fff;font:16px/1 Anton,Impact,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.82;padding:4px 2px;cursor:pointer}
.sa-intro-skip:hover,.sa-intro-skip:focus-visible{opacity:1;color:#f5a31a}
@media(max-width:700px){.sa-intro-skip{font-size:14px}}
@media(prefers-reduced-motion:reduce){.sa-intro-art{transition:none}}

/* The entrance keeps its own street switch and the small stagger on the
   things inside a fold. Everything else that moves is in the shared sheet. */
/* Shown only when the browser has refused to make a noise, which is the one
   case where the entrance waits. The film holds on its first frame behind it. */
.sa-enter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;border:3px solid #000;background:#f5a31a;color:#12100c;font:28px/1 Pricedown,Impact,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:14px 38px;box-shadow:5px 5px #000;cursor:pointer;clip-path:polygon(6px 0,100% 3px,calc(100% - 7px) 100%,0 calc(100% - 4px))}
.sa-enter:hover,.sa-enter:focus-visible{background:#ffc334;transform:translate(-50%,-50%) translateY(-2px)}
.sa-gated .sa-intro-skip{display:none}
.sa-street{position:absolute;left:1%;bottom:4%;z-index:4;border:0;background:none;color:#fff;font:12px/1 Anton,Impact,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.62;padding:6px 4px;cursor:pointer}
.sa-street:hover,.sa-street:focus-visible,.sa-street[aria-pressed='true']{opacity:1;color:#f5a31a}
.sa-fold-body .info-body p.arrives{transition-delay:.05s}
.sa-fold-body .mod-card.arrives:nth-child(2n){transition-delay:.06s}
.sa-fold-body .mod-card.arrives:nth-child(3n){transition-delay:.1s}
@media(prefers-reduced-motion:reduce){.sa-fold-body,.sa-fold.is-folded .sa-fold-body,.sa-fold-name{transition:none}.sa-fold-bar:hover .sa-fold-name{transform:none}}

/* Artwork entrance: deliberately no banner, dashboard or stacked calls to action. */
.sa-home.sa-at-start{background:#000}
.sa-at-start .page-header{position:absolute;inset:25px auto auto 3%;padding:0;border:0;background:none;box-shadow:none;z-index:3}
.sa-at-start .page-header-inner{min-height:0;padding:0}
.sa-at-start .page-nav{display:none}
.sa-at-start .sa-portals{height:auto;min-height:100svh;max-width:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;border:0;clip-path:none;overflow:visible}
.sa-at-start .sa-portals:before{display:none}
.sa-fragments,.sa-intro-art{display:block;width:min(94vw,1060px,96.4vh);height:auto;aspect-ratio:86/66;overflow:visible;margin:20px 0 35px}
.sa-clip-piece{transform:translate(0,0);transition:transform 1s ease}
/* Masks rather than clip paths: a clip path is applied at whole-pixel
   resolution, so every shard edge came out stepped. A mask is sampled and
   the same edges antialias. */
.sa-fragments:has(.sa-region-sf:hover,.sa-region-sf:focus) #sa-mask-sf .sa-clip-piece,
.sa-fragments:has(.sa-region-ls:hover,.sa-region-ls:focus) #sa-mask-ls .sa-clip-piece,
.sa-fragments:has(.sa-region-lv:hover,.sa-region-lv:focus) #sa-mask-lv .sa-clip-piece,
.sa-region:hover .sa-clip-piece,.sa-region:focus .sa-clip-piece{transform:translate(var(--dx),var(--dy))}
/* The long fade belongs to the cross-fade itself and nothing else. Left on
   the layer permanently it was also the speed the picture came back at after
   a hover, and for that second the half-transparent top layer showed the one
   underneath it. */
.sa-wallpaper{transition:opacity .25s ease}
.sa-wallpaper-front.is-crossfading{transition:opacity 1.1s ease}
.sa-wallpaper-front.is-arriving{opacity:0;transition:none}
/* The shards that answer the pointer; the picture behind them is drawn only. */
.sa-region-hit{fill:none}
.sa-region-map{opacity:0;transition:opacity .25s ease}
.sa-region:hover .sa-region-map,.sa-region:focus .sa-region-map{opacity:1}
/* The map used to replace the picture rather than sit over it. It does not
   reach every corner of the canvas, so with the wallpaper still behind it the
   uncovered part of a hovered shard showed the wallpaper through. */
.sa-region:hover .sa-wallpaper,.sa-region:focus .sa-wallpaper{opacity:0}
.sa-region .sa-destination-label{pointer-events:none;opacity:0;transition:opacity .18s ease}
.sa-region:hover .sa-destination-label,.sa-region:focus .sa-destination-label{opacity:1}
.sa-destination-label polygon{fill:#e8ae25;stroke:#18130b;stroke-width:2}
.sa-destination-label text{fill:#15120b;font:18px Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:1px}
.sa-region:focus{outline:none}.sa-region:focus-visible g{filter:drop-shadow(0 0 4px #ffc334)}
.sa-explore-hint{font:10px monospace;color:#a89f8d;margin:0 0 30px;letter-spacing:.1em}
.sa-art-credit{display:block;font:8.5px/1.3 system-ui,sans-serif;color:rgba(255,255,255,.42);white-space:nowrap;margin:18px 0 0;max-width:94vw;overflow:hidden;text-overflow:clip}
.sa-art-credit a{color:inherit;text-decoration:underline}
.sa-at-start footer{display:none}
.sa-city{width:min(900px,90vw);padding:50px 0 15px;animation:sa-city-in .65s ease}
.sa-city-open .sa-fragments,.sa-city-open .sa-explore-hint{display:none}
.sa-city h2{font:30px Pricedown,Impact,sans-serif;color:#eee8d5;text-align:center;margin:0 0 12px}
.sa-at-start .sa-city h2{font-size:30px}
.sa-city .sa-hotspot{display:block;z-index:2;opacity:1}
.sa-city-back{font:12px monospace;color:#f5b91f;text-decoration:none}
.sa-city-paper{position:relative;width:fit-content;margin:auto;max-width:100%}
.sa-city-paper>img{display:block;max-width:100%;height:60vh;object-fit:contain;width:auto}
.sa-hotspot{position:absolute;width:20px;height:20px;background:#b71913;border:2px solid #e5d6a3;transform:rotate(-8deg);box-shadow:0 0 0 4px #0004}
.sa-hotspot span{position:absolute;top:24px;left:-30px;white-space:nowrap;padding:8px 12px;background:#e6d29d;color:#111;font:12px monospace;opacity:0;transform:translateY(5px);transition:.2s;pointer-events:none;z-index:2}
.sa-hotspot:hover span,.sa-hotspot:focus-visible span{opacity:1;transform:none}
@keyframes sa-city-in{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none}}
@media(max-width:600px){.sa-fragments{margin:55px 0 15px}.sa-at-start .page-header{top:15px}.sa-city-paper>img{height:auto;max-height:60vh}.sa-city{padding-top:75px}.sa-hotspot span{font-size:10px;left:-55px}.sa-explore-hint{margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){.sa-region g,.sa-region-map,.sa-wallpaper-front,.sa-hotspot span{transition:none}.sa-city{animation:none}}

/* SP-RP is the platform. Retain the site's irregular GTA paper shapes. */
.sa-home .hero{padding:58px 28px 28px;text-align:left}
.sa-home .hero-bg{opacity:.16}
.hero-inner.community-overview,.sa-home .hero-inner.community-overview{max-width:1264px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:46px 58px;align-items:center}
.community-overview *{box-sizing:border-box}
.community-kicker{display:inline-block;margin:0 0 22px;padding:7px 16px;background:#f5a31a;color:#16100a;clip-path:polygon(3% 5%,100% 0,97% 100%,0 92%);font:400 11px/1.5 Anton,Impact,sans-serif;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-2deg)}
.community-copy h1{margin:0 0 22px;line-height:.85}
.community-copy h1 .brand-pill{width:min(100%,490px);height:auto;filter:drop-shadow(5px 7px #000)}
.community-scope{margin:0 0 20px;color:#eee6d7;font:900 clamp(24px,3vw,38px)/1.1 Pricedown,Impact,sans-serif;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.community-lead{max-width:43ch;margin:0 0 28px;color:#c8c0cc;font:400 16px/1.75 'Public Sans',system-ui,sans-serif}
.community-links{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:24px;font:400 12px/1.5 'Public Sans',system-ui,sans-serif}
.community-links a{color:#bbb0c6;text-decoration:none}.community-links a:hover{color:#f5a31a}
.community-feature{display:block;position:relative;min-width:0;border:0;background:#201529;color:inherit;text-decoration:none;clip-path:polygon(3% 0,93% 3%,100% 14%,98% 87%,90% 100%,0 96%,1% 49%);transform:rotate(1deg);filter:drop-shadow(8px 10px #000)}
.community-feature>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#101316;clip-path:polygon(0 0,100% 0,100% 92%,83% 100%,0 94%)}
.community-feature-copy{padding:20px 36px 40px;background:linear-gradient(112deg,#30213d,transparent 65%)}
.community-feature-copy .community-kicker{margin-bottom:14px;background:#9b86c0;transform:rotate(-1deg)}
.community-feature h2{margin:0 0 12px;color:#eee6d7;font:900 36px/1.05 Pricedown,Impact,sans-serif;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.community-feature p{margin:0;color:#d0c4da;font:400 13px/1.6 'Public Sans',system-ui,sans-serif}
.community-feature-link{display:block;margin-top:18px;color:#f5a31a;font:400 13px/1.4 Anton,Impact,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.community-feature:hover{filter:drop-shadow(8px 10px #000) brightness(1.12)}
.community-overview a:focus-visible{outline:3px solid #f5a31a;outline-offset:-6px}
.sa-fold-bar{padding:24px 32px;border:0;clip-path:polygon(0 8%,94% 0,100% 23%,99% 90%,2% 100%);background:#211529}
.sa-fold:nth-child(even) .sa-fold-bar{clip-path:polygon(1% 0,100% 7%,98% 95%,7% 100%,0 77%);background:#291c32}
.sa-home .features .feature{clip-path:polygon(1% 0,96% 2%,100% 10%,98% 94%,92% 100%,0 96%);border:0}
.sa-home .valkyrie-mods details.mod-card{clip-path:polygon(1% 0,94% 2%,100% 9%,98% 92%,89% 100%,0 95%);border:0;padding:5px 28px 10px;background:#24192c}
.sa-home .valkyrie-mods details.mod-card[open]{padding-bottom:36px}
.sa-home .mod-download{clip-path:polygon(3% 0,100% 4%,97% 100%,0 91%);border:0;padding:14px 20px}
.sa-home .feature-tags li{clip-path:polygon(5% 0,100% 4%,96% 100%,0 89%);border:0}
.sa-home .nav-donate,.sa-home .foot-drip{clip-path:polygon(4% 0,100% 6%,96% 100%,0 90%);border:0;box-shadow:none}
.sa-home .foot-drip{background:#24192c;padding:8px 12px}

/* Server owns its world, rules and development content. */
.sa-home .community-server>.features{width:auto;max-width:none;margin:0 0 36px;padding:0;border:0}
.server-detail{margin:18px 0 0;scroll-margin-top:20px}
.server-detail>summary{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid #47354f;color:#eee6d7;cursor:pointer;list-style:none}
.server-detail>summary::-webkit-details-marker{display:none}
.server-detail>summary>span:first-child{padding:8px 18px;background:#30203b;clip-path:polygon(3% 0,100% 6%,97% 100%,0 91%);font:900 24px/1 Pricedown,Impact,sans-serif}
.server-detail>summary small{color:#b9b0c0;font:400 12px/1.5 'Public Sans',system-ui,sans-serif}
.server-detail-mark{margin-left:auto;color:#f5a31a;font:24px/1 monospace}
.server-detail[open]>summary .server-detail-mark{transform:rotate(45deg)}
.server-detail>summary:hover>span:first-child{color:#f5a31a}
.server-detail>summary:focus-visible{outline:2px solid #f5a31a;outline-offset:4px}
.sa-home .server-detail>.world-directory,.sa-home .server-detail>.sprp-rules-section{width:auto;max-width:none;margin:0;padding:28px 0 16px;border:0}
@media(max-width:900px){.sa-home .hero{padding-top:38px}.hero-inner.community-overview,.sa-home .hero-inner.community-overview{gap:32px}.community-lead{font-size:14px}.community-pack-note{align-items:flex-start;flex-direction:column;gap:24px}}
@media(max-width:640px){.sa-home .hero{padding:30px 18px 20px}.hero-inner.community-overview,.sa-home .hero-inner.community-overview{grid-template-columns:minmax(0,1fr);gap:32px}.community-copy h1 .wordmark{font-size:clamp(88px,24vw,140px)}.community-scope{font-size:28px}.community-kicker{margin-bottom:20px;font-size:10px}.community-feature-copy{padding:20px 26px 38px}.community-links{gap:12px 20px}.sa-fold-bar{padding:24px 25px;font-size:25px}.server-detail>summary{gap:12px}.server-detail>summary small{font-size:11px}.server-detail>summary>span:first-child{font-size:22px;padding:8px 12px}}
