.home-page { overflow: clip; }
.home-page .home-maze-section { position: relative; }
.home-page .home-hero { padding-block: var(--space-6) var(--space-9); background: var(--color-ink-deep); }
.home-page .home-hero__shell { position: relative; min-height: 38.75rem; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; overflow: hidden; border-bottom: 1px solid var(--color-border-bronze); }
.home-page .home-hero__copy { position: relative; z-index: 2; width: min(100%, 42.5rem); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-8); color: var(--color-parchment-light); }
.home-page .home-hero__copy h1, .home-page .home-hero__copy p { margin: 0; }
.home-page .home-hero__copy .lead { max-width: 42rem; }
.home-page .home-hero__independence { max-width: 32.5rem; padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--color-bronze-oxidised); color: var(--color-stone-light); }
.home-page .home-hero__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; margin: 0; }
.home-page .home-hero__media::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(23 24 23 / 94%) 0%, rgb(23 24 23 / 68%) 43%, rgb(23 24 23 / 14%) 76%); content: ""; }
.home-page .home-hero__media img { width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 66% center; }
.home-page .home-play-badge { flex: 0 0 auto; min-height: 2.75rem; }
.home-page .home-maze-line { position: absolute; z-index: 3; pointer-events: none; overflow: visible; color: var(--color-bronze-oxidised); opacity: .72; }
.home-page .home-maze-line path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.home-page .home-maze-line circle { fill: var(--color-amber-candle); }
.home-page .home-maze-line--hero { right: 1.5rem; bottom: 1.5rem; width: 44%; }
.home-page .home-method__layout { position: relative; display: grid; grid-template-columns: 13.125rem minmax(0, 1fr); gap: var(--space-6) var(--space-7); }
.home-page .home-method__intro { grid-column: 2; width: min(100%, 40rem); min-width: 0; }
.home-page .home-method__intro .lead { margin-block-end: 0; }
.home-page .home-method__margin-note { grid-column: 1; grid-row: 2; width: 100%; min-width: 0; align-self: start; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border-light); font-size: var(--text-sm); line-height: var(--leading-small); }
.home-page .home-method__margin-note p { margin-block-end: 0; }
.home-page .home-method__cards { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); width: min(100%, 57.5rem); min-width: 0; }
.home-page .home-method__cards > article { min-width: 0; padding: var(--space-5); }
.home-page .home-method__cards h3, .home-page .home-method__cards p { margin: 0; }
.home-page .home-method__cards { align-items: stretch; }
.home-page .home-method__fact { background: color-mix(in srgb, var(--color-moss-muted) 38%, var(--color-charcoal-surface)); color: var(--color-parchment-light); border-inline-start: 2px solid var(--color-moss-muted); display: flex; flex-direction: column; gap: var(--space-3); }
.home-page .home-method__editorial { background: var(--color-parchment-light); color: var(--color-ink-deep); border-inline-start: 2px solid var(--color-bronze-oxidised); display: flex; flex-direction: column; gap: var(--space-3); }
.home-page .home-note-label { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; line-height: var(--leading-label); text-transform: uppercase; }
.home-page .home-note-label--fact { color: var(--color-parchment-light); }
.home-page .home-note-label--editorial { color: var(--color-bronze-oxidised); }
.home-page .home-inline-fact, .home-page .home-inline-editorial { display: inline; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.home-page .home-inline-fact { color: var(--color-moss-muted); }
.home-page .home-inline-editorial { color: #765a35; }
.home-page .home-exploration__grid { display: grid; grid-template-columns: minmax(0, 56%) minmax(26.25rem, 44%); gap: var(--space-7); align-items: start; }
.home-page .home-exploration__copy { grid-column: 1; width: min(100%, 42.5rem); min-width: 0; }
.home-page .home-exploration__copy p { max-width: 42.5rem; }
.home-page .home-exploration__media { grid-column: 2; grid-row: 1 / span 2; width: 100%; min-width: 0; margin: 0; }
.home-page .home-exploration__media img { width: 100%; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.home-page .home-exploration__quote { grid-column: 1; width: min(100%, 33.75rem); min-width: 0; margin: var(--space-5) 0 0; padding: var(--space-5); background: var(--color-parchment); color: var(--color-ink-deep); }
.home-page .home-exploration__quote p { margin: 0; }
.home-page .home-text-link { display: inline-block; margin-block-start: var(--space-3); font-weight: 700; }
.home-page .home-chamber__title { width: min(100%, 43.75rem); }
.home-page .home-full-media { width: 100%; min-width: 0; margin: var(--space-6) 0 var(--space-5); }
.home-page .home-full-media img { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.home-page .home-full-media figcaption { width: min(100%, 28.75rem); }
.home-page .home-chamber__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); width: 100%; min-width: 0; }
.home-page .home-chamber__note { min-width: 0; padding: var(--space-5) 0; border-block-start: 1px solid var(--color-border-dark); }
.home-page .home-chamber__note h3 { margin-block-end: var(--space-3); }
.home-page .home-chamber__note p:last-child { margin-block-end: 0; }
.home-page .home-chamber__note--maze::before { display: block; width: 5rem; height: 1.25rem; margin-block-end: var(--space-3); border-block-start: 1px solid var(--color-bronze-oxidised); border-inline-start: 1px solid var(--color-bronze-oxidised); content: ""; }
.home-page .home-chamber__note--light { padding-inline: var(--space-5); background: var(--color-parchment-light); color: var(--color-ink-deep); border-block-start: 0; }
.home-page .home-loop__intro { width: min(100%, 38.75rem); min-width: 0; }
.home-page .home-loop__blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); width: 100%; min-width: 0; margin-block-start: var(--space-6); }
.home-page .home-loop__block { min-width: 0; min-height: 100%; padding: var(--space-5); border: 1px solid var(--color-border-bronze); background: var(--color-charcoal-surface); display: flex; flex-direction: column; gap: var(--space-3); }
.home-page .home-loop__block h3, .home-page .home-loop__block p { margin: 0; }
.home-page .home-loop__block--light { background: var(--color-parchment); color: var(--color-ink-deep); }
.home-page .home-workshop__grid { display: grid; grid-template-columns: minmax(24.375rem, 42%) minmax(0, 58%); gap: var(--space-8); align-items: start; }
.home-page .home-workshop__media { grid-column: 1; width: 100%; min-width: 0; margin: 0; }
.home-page .home-workshop__media img { width: 100%; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.home-page .home-workshop__copy { grid-column: 2; width: min(100%, 41.25rem); min-width: 0; }
.home-page .home-workshop__boundary { width: min(100%, 31.25rem); min-width: 0; margin-block: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border-bronze); }
.home-page .home-workshop__boundary h3 { margin-block-end: var(--space-2); }
.home-page .home-workshop__boundary p { margin-block-end: 0; }
.home-page .home-arcane__copy { width: min(100%, 43.75rem); min-width: 0; }
.home-page .home-arcane__copy blockquote { width: min(100%, 31.25rem); margin-block: var(--space-5); }
.home-page .home-arcane__media { margin-block-start: var(--space-7); }
.home-page .home-offline { background-image: linear-gradient(90deg, var(--color-ink-deep) 0%, rgb(23 24 23 / 94%) 52%, rgb(23 24 23 / 73%) 100%), url('/src/media/moonshades-offline-solitary-hall.webp'); background-position: center, right center; background-repeat: no-repeat; background-size: cover; }
.home-page .home-offline__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.home-page .home-offline__intro { width: min(100%, 41.25rem); min-width: 0; }
.home-page .home-offline__intro .lead { margin-block-end: 0; }
.home-page .home-offline__fact { width: 26.25rem; min-width: 0; padding: var(--space-5); background: color-mix(in srgb, var(--color-moss-muted) 70%, var(--color-ink-deep)); color: var(--color-parchment-light); display: flex; flex-direction: column; gap: var(--space-3); }
.home-page .home-offline__fact h3, .home-page .home-offline__fact p, .home-page .home-offline__editorial h3, .home-page .home-offline__editorial p { margin: 0; }
.home-page .home-offline__editorial { width: min(100%, 38.75rem); min-width: 0; margin-inline-start: var(--space-7); padding: var(--space-5); background: var(--color-parchment); color: var(--color-ink-deep); display: flex; flex-direction: column; gap: var(--space-3); }
.home-page .home-offline__profiles { width: min(100%, 57.5rem); min-width: 0; margin-block-start: var(--space-3); }
.home-page .home-offline__profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); width: 100%; min-width: 0; margin-block: var(--space-5); }
.home-page .home-offline__profile-grid > div { min-width: 0; padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border-dark); }
.home-page .home-offline__profile-grid h4 { margin-block-end: var(--space-2); }
.home-page .home-offline__profile-grid p { margin-block-end: 0; }
.home-page .home-offline__media { display: none; }
.home-page .home-paths__intro { width: min(100%, 38.75rem); min-width: 0; }
.home-page .home-paths__intro .lead { margin-block-end: 0; }
.home-page .home-paths__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); width: min(100%, 57.5rem); min-width: 0; margin-block-start: var(--space-6); }
.home-page .home-paths__link { min-width: 0; min-height: 12rem; padding: var(--space-5); border: 1px solid var(--color-border-light); color: var(--color-ink-deep); text-decoration: none; display: flex; flex-direction: column; gap: var(--space-3); transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); }
.home-page .home-paths__link:hover { border-color: var(--color-amber-candle); background: var(--color-parchment-light); color: var(--color-ink-deep); }
.home-page .home-paths__link span { color: var(--color-bronze-oxidised); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; }
.home-page .home-paths__link h3, .home-page .home-paths__link p { margin: 0; }
.home-page .home-paths__link b { margin-block-start: auto; color: #6c512d; font-size: var(--text-sm); }
.home-page .home-closing__shell { position: relative; min-height: 25rem; }
.home-page .home-closing__copy { position: relative; z-index: 1; width: min(100%, 38.75rem); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.home-page .home-closing__copy h2, .home-page .home-closing__copy p { margin: 0; }
.home-page .home-closing__disclaimer { max-width: 34rem; color: var(--color-stone-grey); font-size: var(--text-sm); line-height: var(--leading-small); }
.home-page .home-maze-line--closing { right: 4%; bottom: 2rem; width: min(36%, 28rem); }
.home-page [data-maze-reveal] .home-maze-line path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.home-page [data-maze-reveal].is-maze-visible .home-maze-line path { animation: home-maze-draw 700ms ease-out forwards; }
@keyframes home-maze-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 61.25rem) {
.home-page .home-hero { padding-block: var(--space-7); }
.home-page .home-hero__shell { min-height: auto; display: flex; flex-direction: column; align-items: stretch; overflow: visible; border: 0; }
.home-page .home-hero__copy { width: 100%; padding: 0 0 var(--space-6); color: var(--color-parchment-light); }
.home-page .home-hero__media { position: relative; inset: auto; width: 100%; height: auto; }
.home-page .home-hero__media::after { display: none; }
.home-page .home-hero__media img { height: auto; aspect-ratio: 16 / 10; object-position: 63% center; }
.home-page .home-maze-line--hero { right: 1rem; bottom: 1rem; width: 45%; }
.home-page .home-method__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.home-page .home-method__intro, .home-page .home-method__margin-note, .home-page .home-method__cards { grid-column: 1; grid-row: auto; }
.home-page .home-method__margin-note { width: min(100%, 43.75rem); }
.home-page .home-exploration__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.home-page .home-exploration__copy, .home-page .home-exploration__media, .home-page .home-exploration__quote { grid-column: 1; grid-row: auto; }
.home-page .home-exploration__copy { width: min(100%, 42.5rem); }
.home-page .home-exploration__media { width: min(100% + (var(--container-padding) * 2), 100vw); margin-inline: calc(var(--container-padding) * -1); }
.home-page .home-exploration__media img { width: 100%; aspect-ratio: 4 / 5; }
.home-page .home-exploration__quote { margin: 0; }
.home-page .home-loop__blocks { grid-template-columns: minmax(0, 1fr); }
.home-page .home-workshop__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.home-page .home-workshop__media, .home-page .home-workshop__copy { grid-column: 1; }
.home-page .home-workshop__media { width: min(100% + (var(--container-padding) * 2), 100vw); margin-inline: calc(var(--container-padding) * -1); }
.home-page .home-workshop__media img { width: 100%; }
.home-page .home-workshop__copy { width: min(100%, 41.25rem); }
.home-page .home-offline { background-image: none; }
.home-page .home-offline__fact, .home-page .home-offline__editorial { width: min(100%, 38.75rem); margin-inline-start: 0; }
.home-page .home-offline__profile-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.home-page .home-offline__media { display: block; width: min(100% + (var(--container-padding) * 2), 100vw); min-width: 0; margin: var(--space-4) calc(var(--container-padding) * -1) 0; }
.home-page .home-offline__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
}
@media (max-width: 56.25rem) {
.home-page .home-chamber__notes { grid-template-columns: minmax(0, 1fr); gap: 0; }
.home-page .home-chamber__note { padding: var(--space-5) 0; }
.home-page .home-chamber__note--light { padding-inline: var(--space-5); }
}
@media (max-width: 47.5rem) {
.home-page .home-hero__copy { gap: var(--space-4); }
.home-page .home-hero__copy h1 { font-size: clamp(2.375rem, 10vw, 3rem); }
.home-page .home-hero__independence { padding-inline-start: var(--space-3); }
.home-page .home-method__cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.home-page .home-full-media { width: calc(100% + (var(--container-padding) * 2)); margin-inline: calc(var(--container-padding) * -1); }
.home-page .home-full-media img { aspect-ratio: 16 / 10; }
.home-page .home-full-media figcaption { padding-inline: var(--container-padding); }
.home-page .home-loop__blocks { margin-block-start: var(--space-5); gap: 0; }
.home-page .home-loop__block { border-width: 1px 0 0; padding-inline: 0; }
.home-page .home-loop__block--light { margin-inline: calc(var(--container-padding) * -1); padding-inline: var(--container-padding); border-width: 0; }
.home-page .home-arcane__media { margin-block-start: var(--space-6); }
.home-page .home-paths__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.home-page .home-paths__link { min-height: 0; padding: var(--space-4); }
.home-page .home-closing__shell { min-height: 0; }
.home-page .home-maze-line--closing { right: 0; bottom: .5rem; width: 42%; }
.home-page .home-maze-line--hero { width: 58%; }
}
@media (max-width: 28rem) {
.home-page .home-play-badge { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.home-page [data-maze-reveal] .home-maze-line path { stroke-dashoffset: 0; }
.home-page [data-maze-reveal].is-maze-visible .home-maze-line path { animation: none; }
}