.homepage main { position: relative; padding-top: 0; }
.homepage [hidden] { display: none !important; }
.home-hero, .home-area { scroll-margin-top: 90px; }
#homeSubtitle { color: var(--muted); }
.home-worlds { --home-section-gap: 52px; max-width: 1180px; margin: auto; padding: 46px 28px 20px; display: grid; gap: var(--home-section-gap); }
.home-area { position: relative; min-width: 0; text-align: center; }
.home-area-heading { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 12px; }
.home-area-heading h2 { margin: 0; font: 400 25px/1.2 "Bungee", sans-serif; }
.home-section-icon { width: 30px; height: 30px; flex: none; object-fit: contain; }
span.home-section-icon { background: var(--accent-3); -webkit-mask: var(--section-icon) center/contain no-repeat; mask: var(--section-icon) center/contain no-repeat; }
#homeWorkshop .home-section-icon { background: rgb(181, 26, 0); }
.home-area-intro > p { margin: 0 auto 10px; max-width: 520px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.home-housing-pages { display: grid; width: min(100%, 1060px); margin: 24px auto 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-workshop-pages { width: min(calc(50% - 7px), 523px); grid-template-columns: minmax(0, 1fr); }
.home-housing-page { position: relative; isolation: isolate; display: flex; min-height: clamp(138px, 15vw, 184px); overflow: hidden; align-items: flex-end; padding: 22px; border: 1px solid var(--line); border-radius: 18px; color: var(--text); background: radial-gradient(circle at 78% 18%, rgba(var(--accent-3-rgb), .18), transparent 55%), rgba(17, 16, 22, .94); text-align: left; text-decoration: none; transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; }
.home-housing-page:hover, .home-housing-page:focus-visible { border-color: rgba(var(--home-button-rgb, 158, 91, 233), .72); box-shadow: 0 18px 42px rgba(0, 0, 0, .28), 0 0 24px rgba(var(--home-button-rgb, 158, 91, 233), .2); transform: translateY(-2px); }
.home-housing-page:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.home-housing-page-media { position: absolute; z-index: -1; inset: 0; overflow: hidden; opacity: .68; }
.home-housing-page-media::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 8, 13, .88), rgba(9, 8, 13, .54) 48%, rgba(9, 8, 13, .16)), linear-gradient(0deg, rgba(9, 8, 13, .58), transparent 72%); content: ""; pointer-events: none; }
.home-housing-page-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.16, 1, .3, 1); }
.home-housing-page:hover .home-housing-page-media img, .home-housing-page:focus-visible .home-housing-page-media img { transform: scale(1.025); }
.home-housing-page-copy { position: relative; z-index: 1; display: grid; gap: 5px; }
.home-housing-page-copy strong { font: 400 1.02rem/1.2 "Bungee", sans-serif; }
.home-housing-page-copy > span { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.home-section-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 17px; border: 1px solid rgba(var(--home-button-rgb, 158, 91, 233), .42); border-radius: 10px; color: var(--text); background: rgba(var(--home-button-rgb, 158, 91, 233), .14); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.home-section-action:hover, .home-section-action:focus-visible { border-color: rgba(var(--home-button-rgb, 158, 91, 233), .78); background: rgba(var(--home-button-rgb, 158, 91, 233), .28); }
.home-section-action-icon { width: 16px; height: 16px; flex: none; background: var(--home-button-colour, #9E5BE9); -webkit-mask: var(--home-button-icon) center/contain no-repeat; mask: var(--home-button-icon) center/contain no-repeat; }
.home-area .warband-carousel-arrow,
.home-area .room-carousel-arrow { border-color: rgba(var(--home-button-rgb, 158, 91, 233), .42); box-shadow: 0 12px 30px rgba(0, 0, 0, .34), 0 0 18px rgba(var(--home-button-rgb, 158, 91, 233), .16); }
.home-area .warband-carousel-arrow:hover,
.home-area .warband-carousel-arrow:focus-visible,
.home-area .room-carousel-arrow:hover,
.home-area .room-carousel-arrow:focus-visible { border-color: rgba(var(--home-button-rgb, 158, 91, 233), .82); background: rgba(var(--home-button-rgb, 158, 91, 233), .18); box-shadow: 0 12px 30px rgba(0, 0, 0, .34), 0 0 22px rgba(var(--home-button-rgb, 158, 91, 233), .3); }
#homeStatus { position: relative; margin: 28px; color: var(--muted); text-align: center; }
.home-skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 12px; transform: translateY(-160%); background: var(--panel); }
.home-skip-link:focus { transform: none; }
/* The hero defines the hat's scroll range. The wordmark and subtitle retain
   their normal document position while the hat keeps its approved parallax. */
@media (prefers-reduced-motion: no-preference) {
 #homeHero[data-parallax="native"] {
  view-timeline: --home-parallax block;
  view-timeline-inset: 0;
 }
 #homeHero[data-parallax="native"] .svg-light-scene {
  animation: home-hat-parallax auto linear both;
  animation-timeline: --home-parallax;
  animation-range: exit-crossing 0% exit-crossing 100%;
 }
}
@keyframes home-hat-parallax {
 from { translate: 0 0; }
 to { translate: 0 calc(var(--svg-panel-height) * .32); }
}
@media (max-width: 620px) {
    /* A taller portrait stage, with the existing hat and word
       sharing their anchor. The brim crops, but the artwork is never stretched.
       Small screens retain the approved minimum room above the composition. */
    #homeHero {
        --home-mobile-min-anchor: calc(clamp(182px, calc(49vw - 88px), 216px) + var(--home-subtitle-space));
        --svg-hat-width: 112vw;
        --home-mobile-stage-height: max(62svh, calc(var(--home-mobile-min-anchor) + var(--svg-hat-width) * .56));
        /* Extend only the bottom crop, keeping the approved hat/text positions.
           The hat is .658 widths tall, so its underside still extends below it. */
        --svg-panel-height: calc(var(--home-mobile-stage-height) + var(--svg-hat-width) * .045);
        --svg-hat-top: calc(var(--home-mobile-stage-height) - var(--svg-hat-width) * .56);
    }
    #homeHero #homeSubtitle {
        /* Centre the subtitle between the menu notch and the word's top.
           The copy is anchored at hat-top - 22px and shifted by half its height;
           25% below is a quarter of that height, independent of font sizing. */
        bottom: auto;
        top: calc((var(--global-header-height) + var(--site-menu-close-depth) - var(--svg-hat-top) + 22px) / 2 + 25%);
        transform: translateY(-50%);
    }
    #homeHero .home-brand-copy { width: calc(100% - 24px); }
    #homeHero .home-wordmark {
        --home-wordmark-fit-width: 1;
        /* Measured from the loaded letterforms on font readiness and resize.
           The fallback remains proportional while the font is loading. */
        font-size: var(--home-wordmark-fit-size, 25vw);
    }
    .home-worlds { --home-section-gap: 42px; padding: 30px 14px 0; }
    .home-area-heading { margin-bottom: 9px; gap: 9px; }
    .home-area-heading h2 { font-size: 22px; }
    .home-section-icon { width: 26px; height: 26px; }
    .home-area-intro > p { font-size: 12px; max-width: 290px; margin-bottom: 6px; }
    .home-housing-pages { margin-top: 18px; margin-bottom: 22px; grid-template-columns: 1fr; gap: 22px; }
    .home-workshop-pages { width: 100%; }
    .home-housing-page { min-height: 112px; padding: 14px; border-radius: 14px; }
    .home-housing-page-copy { gap: 3px; }
    .home-housing-page-copy strong { font-size: .82rem; }
    .home-housing-page-copy > span { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .home-housing-page,
    .home-housing-page-media img { transition-duration: 1ms; }
}