/* D5 LANDING-ONLY styles: the cream page background and the 1280px-and-up hero (two large tiles) plus the narrow-screen strip of FOUR thumbnails (Glen 10/18/26). Loaded ONLY on the landing page (6357), after d5-shared.css. Split out of the old d5.css 10/18/26 so the landing and Forge pages share ONE copy of everything else. */
html,body,body.asgard-store-chrome,body.asgard-store-chrome.cc{margin:0;background:#f3ece0!important;background-image:none!important;color:#2b1d12} body{font-family:var(--bd)}
/* Glen 10/17/26 (review 2026-10-17-gutters, option 2): at 1280px and up the "Made in The Rune Forge" panel sits in the dark centre as two large tiles (four pages of two,
   round page dots, same arrows); the headline block is 10% larger and the paragraph wraps to three lines. Narrower windows keep the original small strip under the button. */
@media (min-width:1280px){
.cc-r8 .t{max-width:none;padding-right:0}
.cc-r8 h1{font-size:calc(clamp(34px,4.1vw,54px)*1.1)}
.cc-r8 .l{font-size:18.7px;max-width:370px}
.cc-r8 .car{display:block;position:absolute;left:max(36%,540px);top:98px;margin:0;width:406px}
.cc-r8 .lb{text-align:center;font-size:12px;margin-bottom:10px}
.cc-r8 .trk{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"rail rail rail" "prev dots next";row-gap:18px;align-items:center}
.cc-r8 .trk b:first-child{grid-area:prev} .cc-r8 .trk b:last-child{grid-area:next}
.cc-r8 .rail{grid-area:rail;gap:22px;max-width:406px;padding:2px 0 6px}
.cc-r8 .rail a{flex:0 0 192px;scroll-snap-align:start}
.cc-r8 .rail img{flex:none;width:192px;height:192px;box-sizing:border-box;border-width:3px;border-radius:14px}
.cc-r8 .dots{grid-area:dots;display:flex;gap:8px;justify-content:center}
.cc-r8 .dots i{width:9px;height:9px;border-radius:50%;background:rgba(243,236,224,.28);cursor:pointer;transition:background .15s ease} .cc-r8 .dots i.on{background:var(--ac)}
}
/* Glen 10/18/26: below 1280px the small "Made in The Rune Forge" strip shows exactly FOUR thumbnails (it showed six, and more on tablets), with a gap-aware width so four fit between the arrows on phones too. The arrows page by however many fit (the page script), so they page by 4. */
@media (max-width:1279px){.cc-r8 .dots{display:none}.cc-r8 .rail{flex:1 1 0;min-width:0;max-width:312px}.cc-r8 .rail a{flex:0 0 calc((100% - 24px)/4)}.cc-r8 .rail img{flex:none;width:100%;height:auto;aspect-ratio:1/1;box-sizing:border-box}}

/* H2 hero loop (Glen 10/18/26): the video sits INSIDE .art, so the left-edge mask on .art applies to it too; it fades in on 'playing'
   over the still (its poster = the still). Hidden below 781px and for reduced motion; the script also skips those and Save-Data. */
.cc-r8 .art video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;opacity:0;transition:opacity .4s ease;pointer-events:none}
.cc-r8 .art.has-loop video{opacity:1}
@media (max-width:780px),(prefers-reduced-motion:reduce){.cc-r8 .art video{display:none}}

/* TEMPORARY-NOTICE 10/20/26 (Glen): "ordering disabled" notice under the hero button during soft launch. REMOVE THIS WHOLE BLOCK (to the END marker) together with the og-closed paragraph in build_landing.py when ordering opens. */
.cc-r8{height:600px}
.cc-r8 .og-closed{margin:16px 0 0;max-width:440px;padding:12px 16px 13px;border:2px solid var(--ac);border-radius:12px;background:rgba(217,178,90,.12);color:var(--fg);font:400 16px/1.42 var(--bd)}
.cc-r8 .og-closed strong{display:block;margin-bottom:3px;font-size:19px;line-height:1.25;color:var(--ac)}
@media (max-width:1279px){.cc-r8 .og-closed{max-width:min(440px,100%)}}
@media (max-width:760px){.cc-r8{height:auto}.cc-r8 .og-closed{max-width:none;font-size:15px}.cc-r8 .og-closed strong{font-size:17px}}
/* END TEMPORARY-NOTICE */