/* Adapted from the approved site-proposal-2026-11-10/r3.css: preserve the approved composition and interaction. Production routes, accessibility and language changes stay here. */



.hero-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
html:not([data-dir="sumi"]) .hero { padding-top: clamp(48px, 8vw, 112px); }
@media (min-width: 900px) { html:not([data-dir="sumi"]) .hero-grid { grid-template-columns: 7fr 5fr; } }
.hero-vis { position: relative; min-height: 320px; aspect-ratio: 1 / 1; width: 100%; }
@media (max-width: 899px) { .hero-vis { aspect-ratio: auto; height: 340px; } }
.hero-vis canvas, .os-vis canvas, .dec-vis canvas, .ma-vis canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }


.os-vis { position: relative; height: clamp(200px, 22vw, 300px); margin-top: var(--space-5); }
.loop-band { position: relative; height: var(--space-8); margin-bottom: calc(-1 * var(--space-5)); }
.steps li { transition: border-color var(--dur-base) var(--ease); }
.steps li.is-on { border-top-color: var(--foreground); box-shadow: inset 0 2px 0 var(--foreground); }
.steps li.is-on .n { color: var(--foreground); }


.decide-head { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .decide-head { grid-template-columns: 6fr 6fr; } }
.dec-vis { position: relative; height: clamp(220px, 24vw, 320px); }
.decide [role="listitem"] { cursor: default; transition: background var(--dur-base) var(--ease); outline-offset: -3px; }
.decide [role="listitem"]:focus-visible { outline: var(--focus-w) solid var(--ring); }
.decide [role="listitem"].is-on .n { color: var(--foreground); }
.decide [role="listitem"].is-on .w { box-shadow: inset 0 -2px 0 var(--foreground); }
html[data-dir="sumi"] .decide [role="listitem"] { min-height: 128px; }

html[data-dir="sumi"] .decide .is-build { background: color-mix(in srgb, var(--rikyu-stone) 72%, transparent); }


.ma-vis { position: relative; height: 260px; margin-top: var(--space-5); }


.case-wrap { position: relative; }
.case-vis { position: absolute; inset: 0; pointer-events: none; }
html[data-dir="map"] .case-shape li { border-left-color: transparent; position: relative; z-index: 1; }


#paper { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 900ms var(--ease); }
#paper.on { opacity: 1; }
html[data-dir="sumi"] body { background: transparent; }
html[data-dir="sumi"] { background: var(--background); }
html[data-dir="sumi"] .sec { border-top-color: color-mix(in srgb, var(--rikyu-stone) 80%, transparent); }


.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-svg text { font-family: var(--font-mono); font-size: 12px; fill: var(--foreground); }
.map-svg .lbl-muted { fill: var(--muted-foreground); }
.map-svg .edge { stroke: var(--rikyu-nezumi); stroke-width: 1; fill: none; }
.map-svg .edge.on { stroke: var(--foreground); stroke-width: 1.5; }
.map-svg .node { fill: var(--background); stroke: var(--foreground); stroke-width: 1; }
.map-svg .node.sabi { fill: var(--rikyu-sabi); stroke: none; }
.map-svg .block { fill: var(--foreground); }
.map-svg .ghost { fill: none; stroke: var(--rikyu-nezumi); stroke-dasharray: 3 4; }
.map-svg .rule { stroke: var(--rikyu-stone); }



@media (prefers-reduced-motion: reduce) { .steps li, .decide [role="listitem"] { transition: none; } }


html[data-dir="sumi"] .hero-copy { width: fit-content; max-width: 100%; margin-inline: auto; }
html[data-dir="sumi"] .hero { padding: clamp(120px, 16vw, 210px) 0 clamp(120px, 14vw, 190px); }
html[data-dir="sumi"] .close-copy { width: fit-content; max-width: 100%; margin-inline: auto; }
html[data-dir="sumi"] #contact { padding: clamp(120px, 14vw, 200px) 0; }


@media (min-width: 900px) { html:not([data-dir="sumi"]) .hero .display { font-size: clamp(44px, 4.9vw, 72px); } }
@media (max-width: 600px) {  }