/* Existing moyau shapes and palette; only relationships change. */
#moyau-home {
    --page-inset: clamp(24px, 5vw, 88px);
    --ochre: #C49A28;
    --mist: #8EA7B5;
    --paper: #FAF6EE;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    isolation: isolate;
    padding-top: 0;
}
#moyau-home .skip-link { z-index: 30; }
.home-main { width: 100%; }
.playground { position: relative; --stage-height: max(740px, 100svh); height: var(--stage-height); }
.scene-sticky { position: relative; height: var(--stage-height); overflow: hidden; overflow: clip; }
.has-scroll-motion .playground { height: calc(var(--stage-height) + 125svh); }
.has-scroll-motion .scene-sticky { position: sticky; top: 0; }
.scene-canvas { position: absolute; inset: calc(var(--header-height) + 4px) 0 100px; container-type: size; }
.scene-words, .scene-shapes { position: absolute; inset: 0; }
.scene-words { z-index: 2; pointer-events: none; }
.scene-title { position: absolute; top: 35%; left: 28%; margin: 0; font-size: clamp(32px, min(6.1vw, 12.5cqh), 104px); font-weight: 400; line-height: 1.6; letter-spacing: -.065em; color: var(--orange); }
.scene-title span { display: block; width: max-content; white-space: nowrap; }
.has-scroll-motion .scene-title { paint-order: stroke fill; -webkit-text-stroke: 3px var(--background); }
.has-scroll-motion .fragment { paint-order: stroke fill; -webkit-text-stroke: 2px var(--background); }
.scene-title span:first-child { margin-left: .8em; }
.fragment { position: absolute; margin: 0; white-space: nowrap; font-weight: 400; line-height: 1.8; letter-spacing: .09em; }
.fragment-one { top: 17%; left: 16%; font-size: clamp(17px, 1.65vw, 25px); transform: rotate(-5deg); }
.fragment-two { top: 24%; right: 9%; font-size: 17px; writing-mode: vertical-rl; letter-spacing: .2em; transform: rotate(5deg); }
.fragment-three { top: 88%; left: 53%; font-size: clamp(14px, 1.2vw, 19px); transform: rotate(-3deg); }
.motif-slot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--unit) * var(--size)); aspect-ratio: 1; transform-origin: 0 0; }
.motif { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; margin: 0; padding: 0; border: 0; background: none; transform: translate(-50%, -50%) rotate(calc(var(--angle) * 1deg)); transform-origin: center; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.motif:disabled { cursor: default; }
.motif img, .motif > span { display: block; width: 100%; height: 100%; pointer-events: none; }
.motif-square .motif > span { background: var(--blue); border-radius: 2.6667%; }
.motif img { object-fit: contain; }
.motif:focus-visible { outline: 2px solid var(--text); outline-offset: 10px; border-radius: 4px; }
.motif-circle .motif::after, .motif-square .motif::after { content: ""; position: absolute; inset: -12px; }
.motif.is-dragging { cursor: grabbing; z-index: 3; }
.scene-shapes { z-index: 1; --unit: clamp(130px, 14.5vw, 245px); }
.motif-ochre { --x: 60; --y: 16; --size: .79; --angle: -90; }
.motif-blue { --x: 77; --y: 30; --size: 1.3; --angle: 87; }
.motif-orange { --x: 16; --y: 66; --size: 1.02; --angle: -12; }
.motif-mist { --x: 34; --y: 89; --size: .57; --angle: 180; }
.motif-square { --x: 42; --y: 89; --size: .31; --angle: -6; }
.motif-circle { --x: 90; --y: 77; --size: .34; --angle: 0; }
.scene-footnote { position: absolute; bottom: 32px; left: var(--page-inset); right: var(--page-inset); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 16px; font-size: 12px; }
.play-help { margin: 0; opacity: 0; }
.is-interactive .play-help { opacity: .76; }
.scroll-note { justify-self: center; display: flex; gap: 25px; align-items: center; text-decoration: none; min-height: 44px; letter-spacing: .09em; }
.scroll-note span { font-size: 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#moyau-home .site-footer { padding: 20px var(--page-inset) 35px; font-size: 12px; }
@media (min-width: 1800px) { .scene-canvas { max-width: 1800px; width: 100%; margin: auto; } }
@media (max-width: 700px) {
    .playground { --stage-height: max(690px, 100svh); }
    .scene-canvas { inset: calc(var(--header-height) + 14px) 0 112px; }
    .scene-shapes { --unit: clamp(95px, 27vw, 170px); }
    .scene-title { left: 9%; top: 37%; font-size: clamp(32px, 8.4vw, 58px); line-height: 1.75; letter-spacing: -.07em; }
    .scene-title span:first-child { margin-left: 1.2em; }
    .fragment-one { top: 5%; left: 12%; font-size: 15px; }
    .fragment-two { top: 83%; right: 15%; font-size: 13px; writing-mode: horizontal-tb; letter-spacing: .08em; transform: rotate(-5deg); }
    .fragment-three { display: none; }
    .motif-ochre { --x: 53; --y: 16; --size: .62; --angle: -90; }
    .motif-blue { --x: 82; --y: 24; --size: .88; --angle: 87; }
    .motif-orange { --x: 18; --y: 76; --size: .84; --angle: -12; }
    .motif-mist, .motif-square { display: none; }
    .motif-circle { --x: 74; --y: 94; --size: .27; }
    .scene-footnote { bottom: 30px; grid-template-columns: 1fr 1fr; row-gap: 2px; }
    .play-help { grid-column: 1; font-size: 12px; }
    .scroll-note { grid-column: 2; grid-row: 1 / 3; justify-self: end; gap: 14px; }
    #moyau-home .site-footer { gap: 12px; font-size: 12px; }
}
@media (max-height: 550px) and (min-width: 701px) { .playground { --stage-height: max(650px, 100svh); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }