/* =========================================================
   DIMENSION P. — Web Design & 3D Studio by Period
   Layout concept: a measured drawing space. Hairline grid, axis
   coordinates in the margins, asymmetric left-weighted type,
   one luminous 3D object as the only loud element.
   ========================================================= */
:root {
  /* color — deliberately single dark theme (cinematic studio) */
  --ink: #09090C;          /* ground */
  --ink-2: #111017;        /* raised surface */
  --ink-3: #1A1823;        /* control surface */
  --line: rgba(226, 222, 244, .12);
  --line-2: rgba(226, 222, 244, .22);
  --fg: #ECEAF4;           /* text */
  --mute: #9B96AE;         /* secondary text */
  --lav: #B5A8EA;          /* accent: logo's lavender glass */
  --lav-deep: #6F62B5;
  --gold: #CDB27C;         /* Period gold, hairlines & prices only */
  --ok: #8FD3B6;
  --warn: #E7B868;
  --err: #EC8C8C;
  /* type */
  --f-display: "Unbounded", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --f-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* scale */
  --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.25rem;
  --t-xl: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  --t-2xl: clamp(2.2rem, 1.2rem + 4.2vw, 4.4rem);
  --t-3xl: clamp(2.6rem, 1rem + 6.4vw, 6.4rem);
  --wrap: 1240px;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --radius: 4px;
  color-scheme: dark;
}
/* ---------- palettes: NOIR (default) / BLANC / DÉSERT — text colors switch with each ---------- */
:root[data-palette="blanc"] {
  --ink: #F3F3F6; --ink-2: #FFFFFF; --ink-3: #E6E5EE;
  --line: rgba(22, 19, 36, .12); --line-2: rgba(22, 19, 36, .24);
  --fg: #15131C; --mute: #5B576C; --lav: #5446AE; --lav-deep: #3B2F8C; --gold: #84601F;
  --ok: #1D7350; --warn: #925400; --err: #B0261E;
  color-scheme: light;
}
:root[data-palette="desert"] {
  --ink: #E6C596; --ink-2: #EDD3AC; --ink-3: #DBB582;
  --line: rgba(24, 38, 74, .16); --line-2: rgba(24, 38, 74, .32);
  --fg: #162448; --mute: #3F4A73; --lav: #1F4597; --lav-deep: #142F6B; --gold: #87361A;
  --ok: #275F37; --warn: #713C00; --err: #941A1A;
  color-scheme: light;
}
.palette { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line-2); border-radius: 99px; margin-left: 12px; }
.palette button { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: transparent; display: grid; place-items: center; }
.palette button i { width: 18px; height: 18px; border-radius: 50%; display: block; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); }
.palette button i::after { content: "A"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 10px/1 var(--f-display); }
.palette button[aria-checked="true"] { box-shadow: 0 0 0 1.5px var(--lav); }
.palette .p-noir i { background: #09090C; } .palette .p-noir i::after { color: #ECEAF4; }
.palette .p-blanc i { background: #F3F3F6; } .palette .p-blanc i::after { color: #15131C; }
.palette .p-desert i { background: #E6C596; } .palette .p-desert i::after { color: #1F4597; }
@media (max-width: 900px) { .palette { margin-left: auto; } .nav-toggle { margin-left: 8px; } }
/* the logo artwork has a black ground: on light palettes invert + multiply so it sits on the wall */
:root[data-palette="blanc"] .cta-band::after, :root[data-palette="desert"] .cta-band::after,
:root[data-palette="blanc"] .hero-fallback, :root[data-palette="desert"] .hero-fallback { filter: invert(1); mix-blend-mode: multiply; }
.cta-band::after { mix-blend-mode: screen; }
body { transition: background-color .5s, color .5s; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }
.svg-fg { color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ink); color: var(--fg);
  font-family: var(--f-body); font-size: 15px; line-height: 1.85; letter-spacing: .02em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before { /* safe-area band above the sticky header */
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--ink);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: .25em; }
a:hover { text-decoration-color: var(--lav); }
:focus-visible { outline: 2px solid var(--lav); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--lav-deep); color: #fff; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--fg); color: var(--ink); padding: .5em 1em; }
.skip:focus { left: 16px; top: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- frame ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-r); }
@media (min-width: 720px) { .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }
.grid-bg {
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 96px 96px; background-position: -1px -1px;
}
.section { padding-block: clamp(72px, 10vw, 140px); position: relative; border-top: 1px solid var(--line); }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }

/* coordinate eyebrow: encodes the dimension a section works in */
.coord {
  display: inline-flex; align-items: center; gap: .9em; font-family: var(--f-mono);
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
}
.coord b { color: var(--lav); font-weight: 400; }
.coord::before { content: ""; width: 28px; height: 1px; background: var(--gold); }

.h-display { font-family: var(--f-mincho); font-size: var(--t-2xl); font-weight: 700; letter-spacing: .02em; line-height: 1.3; }
.h-lg { font-family: var(--f-mincho); font-size: var(--t-xl); font-weight: 700; letter-spacing: .03em; }
.lead { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); color: var(--mute); max-width: 38em; }
.en { font-family: var(--f-display); letter-spacing: .02em; }
.mono { font-family: var(--f-mono); }
.num { font-variant-numeric: tabular-nums; }
.stack-sm > * + * { margin-top: .75rem; }
.stack > * + * { margin-top: 1.25rem; }
.stack-lg > * + * { margin-top: 2rem; }
.muted { color: var(--mute); }
.small { font-size: var(--t-sm); }
.tag {
  display: inline-flex; align-items: center; gap: .4em; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .08em; border: 1px solid var(--line-2); padding: .15em .7em; border-radius: 99px; color: var(--mute);
  white-space: nowrap;
}
.tag--lav { color: var(--lav); border-color: color-mix(in srgb, var(--lav) 45%, transparent); }
.tag--gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.tag--demo { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }

/* ---------- buttons ---------- */
.btn {
  --b: var(--fg);
  display: inline-flex; align-items: center; justify-content: center; gap: .8em; min-height: 52px;
  padding: .7em 1.5em; border: 1px solid var(--b); border-radius: 99px; background: transparent;
  color: var(--fg); font: 500 var(--t-sm)/1.2 var(--f-body); letter-spacing: .06em; text-decoration: none;
  cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.btn:hover { background: var(--fg); color: var(--ink); }
.btn--solid { background: var(--fg); color: var(--ink); }
.btn--solid:hover { background: var(--lav); border-color: var(--lav); color: var(--ink); }
.btn--ghost { --b: var(--line-2); }
.btn--ghost:hover { background: var(--ink-3); color: var(--fg); border-color: var(--fg); }
.btn .arr { font-family: var(--f-mono); transition: transform .25s; }
.btn:hover .arr { transform: translateX(3px); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.brand span { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: .12em; }
.brand small { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; color: var(--mute); font-weight: 400; margin-top: 2px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { text-decoration: none; padding: .5em .9em; font-size: var(--t-sm); color: var(--mute); border-radius: 99px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }
.nav a[aria-current="page"] { background: var(--ink-3); }
.nav .btn { min-height: 40px; padding: .45em 1.2em; margin-left: 8px; color: var(--ink); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); color: var(--fg); border-radius: 99px; height: 40px; padding: 0 16px; font: 500 12px var(--f-mono); letter-spacing: .1em; cursor: pointer; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav { position: fixed; inset: calc(68px + env(safe-area-inset-top, 0px)) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--line); padding: 8px var(--gut-r) 20px var(--gut); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: var(--t-md); }
  .nav a[aria-current="page"] { background: none; color: var(--lav); }
  .nav .btn { margin: 16px 0 0; justify-content: center; border-bottom: 1px solid var(--fg); }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 40px 56px; position: relative; z-index: 2; }
@media (min-width: 980px) { .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; padding-block: 56px 72px; min-height: min(760px, 88svh); } }
.hero-copy { position: relative; z-index: 3; min-width: 0; }
.hero-mark { font-family: var(--f-display); font-weight: 300; font-size: var(--t-sm); letter-spacing: .3em; color: var(--mute); }
.hero h1 { font-family: var(--f-mincho); font-size: var(--t-3xl); font-weight: 700; line-height: 1.18; letter-spacing: .01em; margin-top: 18px; }
.hero h1 .l2 { display: block; padding-left: .9em; }
.hero-tag { margin-top: 26px; font-family: var(--f-display); font-weight: 500; font-size: clamp(1rem, .9rem + .6vw, 1.35rem); letter-spacing: .04em; }
.hero-tag span { display: block; font-family: var(--f-body); font-weight: 500; font-size: var(--t-sm); color: var(--lav); letter-spacing: .14em; margin-top: 4px; }
.hero p.lead { margin-top: 22px; }
.hero .btn-row { margin-top: 32px; }
.hero-price { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-sm); color: var(--mute); }
.hero-price b { color: var(--gold); font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; letter-spacing: .02em; }
.hero-stage { position: relative; aspect-ratio: 1 / 1; width: min(100%, 640px); justify-self: center; order: -1; max-width: 100%; }
@media (min-width: 980px) { .hero-stage { order: 0; width: 118%; max-width: none; margin-right: -12%; } }
.hero-stage canvas, .hero-stage .hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-fallback { object-fit: contain; transition: opacity .6s; }
.hero-stage.is-live .hero-fallback { opacity: 0; }
.hero-stage .axes { position: absolute; inset: 6%; pointer-events: none; font-family: var(--f-mono); font-size: 10px; color: var(--mute); letter-spacing: .12em; }
.axes span { position: absolute; }
.axes .ax-x { right: 0; top: 50%; } .axes .ax-y { left: 50%; top: 0; } .axes .ax-z { left: 0; bottom: 0; }
.axes .rpm { right: 0; bottom: 0; color: var(--lav); }
.hero-hint { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); font: 10px var(--f-mono); letter-spacing: .14em; color: var(--mute); white-space: nowrap; }

/* ---------- dimension method ---------- */
.method { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 48px; counter-reset: dim; }
.method li { list-style: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 22px 28px; min-width: 0; position: relative; }
.method .d { font-family: var(--f-display); font-size: 2.4rem; font-weight: 300; color: var(--lav); line-height: 1; }
.method h3 { font-size: var(--t-md); margin-top: 18px; }
.method p { font-size: var(--t-sm); color: var(--mute); margin-top: 8px; }
.method svg { width: 56px; height: 56px; margin-top: 22px; display: block; }
.method svg * { fill: none; stroke: var(--fg); stroke-width: 1.2; }
.method li:last-child { background: var(--ink-2); }
@media (max-width: 980px) { .method { grid-template-columns: repeat(2, minmax(0, 1fr)); } .method li:last-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .method { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 3-way demo ---------- */
.demo { margin-top: 44px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--ink-2); overflow: hidden; }
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 99px; padding: 3px; gap: 2px; }
.seg button { background: none; border: 0; color: var(--mute); font: 500 var(--t-sm) var(--f-body); padding: .45em 1.1em; border-radius: 99px; cursor: pointer; min-height: 38px; }
.seg button[aria-selected="true"] { background: var(--fg); color: var(--ink); }
.demo-bar .tag { margin-left: auto; }
.demo-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); min-height: 460px; }
@media (max-width: 860px) { .demo-body { grid-template-columns: minmax(0, 1fr); } }
.demo-view { position: relative; min-width: 0; border-right: 1px solid var(--line); min-height: 380px; }
@media (max-width: 860px) { .demo-view { border-right: 0; border-bottom: 1px solid var(--line); } }
.demo-pane { position: absolute; inset: 0; padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.demo-pane[hidden] { display: none !important; }
.demo-pane--text p { font-size: var(--t-md); line-height: 2.1; max-width: 34em; }
.demo-pane--2d svg { width: 100%; height: 100%; max-height: 420px; }
.demo-pane--3d { padding: 0; }
.demo-pane--3d canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.demo-pane--3d canvas:active { cursor: grabbing; }
.demo-pane--3d .ctrl { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 12px; font: 11px var(--f-mono); color: var(--mute); }
.demo-pane--3d input[type=range] { flex: 1; accent-color: var(--lav); min-width: 0; }
.demo-pane--3d .hint { position: absolute; top: 14px; left: 16px; font: 10px var(--f-mono); letter-spacing: .12em; color: var(--mute); }
.demo-side { padding: 28px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.layer-list { display: grid; gap: 6px; }
.layer-list button { display: grid; grid-template-columns: 28px 1fr; gap: 10px; text-align: left; background: none; border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg); padding: 10px 12px; cursor: pointer; font: inherit; font-size: var(--t-sm); }
.layer-list button .sw { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; }
.layer-list button small { display: block; color: var(--mute); font-size: 12px; line-height: 1.6; }
.layer-list button[aria-pressed="true"] { border-color: var(--lav); background: color-mix(in srgb, var(--lav) 8%, transparent); }
.verdict { font-size: var(--t-sm); color: var(--mute); border-top: 1px solid var(--line); padding-top: 14px; }
.verdict b { color: var(--fg); font-weight: 500; }

/* values list */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }
.values > div { background: var(--ink); padding: 24px 22px; min-width: 0; }
.values h3 { font-size: var(--t-md); }
.values p { font-size: var(--t-sm); color: var(--mute); margin-top: 8px; }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); margin-top: 44px; }
.plan { padding: 28px 24px 30px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; min-width: 0; position: relative; }
.plan:last-child { border-right: 0; }
.plan--focus { background: linear-gradient(180deg, color-mix(in srgb, var(--lav) 10%, transparent), transparent 70%); }
.plan .dim { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--lav); }
.plan h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; letter-spacing: .04em; }
.plan .jp { font-size: var(--t-sm); color: var(--mute); margin-top: -8px; }
.plan .price { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; color: var(--gold); line-height: 1.2; }
.plan .price small { font-family: var(--f-body); font-size: 12px; color: var(--mute); margin-left: 4px; }
.plan .price.ask { font-family: var(--f-body); font-size: 1.2rem; font-weight: 500; }
.plan ul { list-style: none; display: grid; gap: 8px; font-size: var(--t-sm); }
.plan li { padding-left: 1.2em; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: .82em; width: .55em; height: 1px; background: var(--gold); }
.plan svg { width: 64px; height: 64px; }
.plan svg * { fill: none; stroke: var(--fg); stroke-width: 1.1; }
.plan .note { margin-top: auto; font-size: 12px; color: var(--mute); }
@media (max-width: 1060px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan:nth-child(2) { border-right: 0; } .plan:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 600px) { .plans { grid-template-columns: minmax(0, 1fr); } .plan { border-right: 0; border-bottom: 1px solid var(--line); } .plan:last-child { border-bottom: 0; } }

/* ---------- works ---------- */
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
@media (max-width: 760px) { .works { grid-template-columns: minmax(0, 1fr); } }
.work { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--ink-2); transition: border-color .3s; min-width: 0; }
.work:hover { border-color: var(--line-2); }
.work-visual { aspect-ratio: 16 / 9; position: relative; overflow: hidden; display: grid; place-items: center; max-width: 100%; }
.work-visual .wv-name { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.6rem); letter-spacing: .06em; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.work:hover .wv-name { transform: scale(1.04); }
.work-visual .wv-url { position: absolute; left: 14px; bottom: 12px; font: 11px var(--f-mono); opacity: .7; }
.work-visual .wv-kind { position: absolute; right: 12px; top: 12px; }
.wv-enya { background: #EFE9DF; color: #2B2620; } .wv-enya .wv-name { font-family: var(--f-mincho); }
.wv-jl { background: #09080D; color: #F2EEF9; } .wv-jl .wv-name { font-family: var(--f-display); font-weight: 600; }
.wv-varog { background: #0A0A0C; color: #E7E3DA; } .wv-varog .wv-name { font-family: var(--f-display); font-weight: 200; letter-spacing: .3em; }
.wv-manten { background: #0B100C; color: #E5EEDF; } .wv-manten .wv-name { font-family: var(--f-mincho); }
.wv-jl::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 70% 30%, rgba(181,168,234,.18), transparent 70%); }
.wv-manten::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 70% at 30% 70%, rgba(120,170,110,.18), transparent 70%); }
.wv-varog::before { content: ""; position: absolute; width: 38%; aspect-ratio: 1; border: 1px solid rgba(231,227,218,.25); clip-path: polygon(50% 0, 100% 75%, 0 75%); }
.wv-enya::before { content: ""; position: absolute; inset: 18% 0 auto; height: 1px; background: rgba(43,38,32,.25); }
.work-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.work-body h3 { font-size: 1.15rem; }
.work-body p { font-size: var(--t-sm); color: var(--mute); }
.work-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.work-link { font: 12px var(--f-mono); color: var(--lav); }

/* ---------- philosophy ---------- */
.ppv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); margin-top: 44px; }
@media (max-width: 860px) { .ppv { grid-template-columns: minmax(0, 1fr); } }
.ppv dl { margin: 0; display: grid; gap: 34px; }
.ppv dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; color: var(--lav); }
.ppv dd { margin: 8px 0 0; }
.ppv dd strong { font-family: var(--f-mincho); font-size: 1.35rem; display: block; line-height: 1.6; }
.ppv dd p { color: var(--mute); margin-top: 10px; font-size: var(--t-sm); }
.missions { display: grid; gap: 0; border-top: 1px solid var(--line); }
.missions li { list-style: none; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.missions .n { font-family: var(--f-display); font-weight: 300; font-size: 1.5rem; color: var(--gold); }
.missions h3 { font-size: 1.05rem; }
.missions p { font-size: var(--t-sm); color: var(--mute); margin-top: 4px; }
.loop-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 56px; }
@media (max-width: 860px) { .loop-wrap { grid-template-columns: minmax(0, 1fr); } }
.loop svg { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; }
.loop text { fill: var(--fg); font-family: var(--f-body); font-size: 13px; }
.loop .ring { fill: none; stroke: var(--line-2); stroke-width: 1; }
.loop .node { fill: var(--ink); stroke: var(--lav); stroke-width: 1.2; }
.loop .runner { fill: var(--gold); }
.loop .idx { fill: var(--lav); font-family: var(--f-mono); font-size: 10px; }
.promise { padding-block: clamp(80px, 12vw, 160px); text-align: left; }
.promise blockquote { margin: 0; font-family: var(--f-mincho); font-size: clamp(1.5rem, 1rem + 2.4vw, 2.8rem); line-height: 1.7; max-width: 22em; }
.promise blockquote em { font-style: normal; color: var(--lav); }
.promise p { margin-top: 28px; color: var(--mute); max-width: 40em; }

/* ---------- generic content ---------- */
.page-head { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-head h1 { font-family: var(--f-mincho); font-size: var(--t-2xl); margin-top: 16px; }
.page-head .lead { margin-top: 18px; }
.crumbs { font: 11px var(--f-mono); letter-spacing: .1em; color: var(--mute); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--fg); }
.two-col { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 80px); }
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.prose { max-width: 46em; }
.prose h2 { font-family: var(--f-mincho); font-size: 1.35rem; margin-top: 2.4em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.05rem; margin-top: 1.8em; }
.prose p, .prose ul, .prose ol { margin-top: .9em; color: color-mix(in srgb, var(--fg) 86%, var(--mute)); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.table-wrap { overflow-x: auto; margin-top: 24px; border: 1px solid var(--line); border-radius: var(--radius); }
table.t { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 560px; }
table.t th, table.t td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.t tr:last-child th, table.t tr:last-child td { border-bottom: 0; }
table.t th { font-weight: 500; color: var(--mute); width: 30%; background: var(--ink-2); }
table.t thead th { color: var(--fg); background: var(--ink-3); width: auto; }
table.t td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dl { min-width: 0; }
.callout { border: 1px solid var(--line-2); border-left: 2px solid var(--gold); padding: 18px 20px; background: var(--ink-2); border-radius: var(--radius); font-size: var(--t-sm); }
.callout--warn { border-left-color: var(--warn); }
.callout--lav { border-left-color: var(--lav); }
.callout h3, .callout strong.t { display: block; font-size: var(--t-md); margin-bottom: 6px; font-weight: 700; }
.checks { list-style: none; display: grid; gap: 8px; padding: 0 !important; }
.checks li { padding-left: 1.6em; position: relative; }
.checks li::before { content: "＋"; position: absolute; left: 0; color: var(--ok); font-size: 12px; top: .25em; }
.checks.minus li::before { content: "－"; color: var(--err); }

/* FAQ */
.faq { border-top: 1px solid var(--line); margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font: 300 1.4rem var(--f-display); color: var(--lav); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 22px; color: var(--mute); font-size: var(--t-sm); max-width: 48em; }

/* CTA band */
.cta-band { border-top: 1px solid var(--line); padding-block: clamp(64px, 9vw, 120px); position: relative; overflow: hidden; }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: end; position: relative; z-index: 1; }
@media (max-width: 860px) { .cta-band .wrap { grid-template-columns: minmax(0, 1fr); } }
.cta-band h2 { font-family: var(--f-mincho); font-size: var(--t-2xl); }
.cta-band .btn-row { justify-content: flex-start; }
.cta-band::after { content: ""; position: absolute; right: -10%; top: -40%; width: 60%; aspect-ratio: 1; background: url("../img/logo-mark.webp") center/contain no-repeat; opacity: .14; pointer-events: none; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); font-size: var(--t-sm); color: var(--mute); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.site-foot h2 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--fg); font-weight: 400; margin-bottom: 14px; }
.site-foot ul { list-style: none; display: grid; gap: 6px; }
.site-foot a { text-decoration: none; } .site-foot a:hover { color: var(--fg); }
.foot-brand .brand { margin-bottom: 18px; }
.foot-bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font: 11px var(--f-mono); letter-spacing: .06em; }
.copyable { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy-btn { background: none; border: 1px solid var(--line-2); color: var(--mute); border-radius: 99px; font: 10px var(--f-mono); padding: 2px 8px; cursor: pointer; letter-spacing: .08em; }
.copy-btn:hover { color: var(--fg); border-color: var(--fg); }

/* ---------- simulator ---------- */
.sim { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; margin-top: 40px; align-items: start; }
@media (max-width: 960px) { .sim { grid-template-columns: minmax(0, 1fr); } }
.sim-form { display: grid; gap: 14px; min-width: 0; }
fieldset.q { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 20px; margin: 0; min-width: 0; background: var(--ink-2); }
fieldset.q legend { padding: 0 6px; font-weight: 700; font-size: var(--t-md); }
fieldset.q legend .mono { color: var(--lav); font-size: 11px; margin-right: 8px; font-weight: 400; }
.q-help { font-size: 12px; color: var(--mute); margin: 2px 0 12px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt label { display: inline-flex; flex-direction: column; gap: 2px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; font-size: var(--t-sm); line-height: 1.45; min-height: 44px; justify-content: center; transition: border-color .2s, background .2s; }
.opt label small { font: 11px var(--f-mono); color: var(--mute); letter-spacing: .02em; }
.opt input:checked + label { border-color: var(--lav); background: color-mix(in srgb, var(--lav) 12%, transparent); }
.opt input:focus-visible + label { outline: 2px solid var(--lav); outline-offset: 2px; }
.opt label .ask { color: var(--warn); }
.range-row { display: flex; align-items: center; gap: 16px; }
.range-row input[type=range] { flex: 1; accent-color: var(--lav); min-width: 0; }
.range-row output { font: 500 1.4rem var(--f-display); min-width: 3.5ch; text-align: right; }
.sub-q { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.sub-q[hidden] { display: none !important; }
.sub-q h4 { font-size: var(--t-sm); margin-bottom: 8px; }
.sim-result { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--ink-2); padding: 24px; min-width: 0; display: grid; gap: 18px; }
@media (max-width: 960px) { .sim-result { position: static; } }
.sim-plan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sim-total { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); color: var(--gold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sim-total small { font-family: var(--f-body); font-size: 13px; color: var(--mute); margin-left: 6px; }
.sim-lines { list-style: none; display: grid; gap: 0; font-size: 13px; border-top: 1px solid var(--line); }
.sim-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sim-lines li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-lines li.minus span:last-child { color: var(--ok); }
.sim-lines li.ask span:last-child { color: var(--warn); }
.sim-block h4 { font-size: 12px; font-family: var(--f-mono); letter-spacing: .12em; color: var(--mute); font-weight: 400; margin-bottom: 6px; }
.sim-block ul { font-size: 13px; padding-left: 1.2em; display: grid; gap: 3px; }
.sim-disclaimer { font-size: 12px; color: var(--mute); border-top: 1px solid var(--line); padding-top: 12px; }

/* ---------- inquiry ---------- */
.steps-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 32px; }
.steps-bar li { list-style: none; font-size: 12px; color: var(--mute); padding-top: 10px; border-top: 2px solid var(--line-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps-bar li.done { border-color: var(--lav-deep); color: var(--fg); }
.steps-bar li.now { border-color: var(--lav); color: var(--fg); }
.steps-bar li .mono { margin-right: 6px; }
@media (max-width: 600px) { .steps-bar li .lbl { display: none; } }
.form-card { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--ink-2); padding: clamp(20px, 3vw, 36px); margin-top: 24px; }
.form-step[hidden] { display: none !important; }
.form-step h2 { font-family: var(--f-mincho); font-size: 1.5rem; }
.form-step > p.muted { margin-top: 6px; font-size: var(--t-sm); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-top: 26px; }
@media (max-width: 680px) { .fields { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field > label, .field > .flabel { font-size: var(--t-sm); font-weight: 500; }
.req { color: var(--err); font-size: 11px; margin-left: 6px; font-family: var(--f-mono); }
.opt-badge { color: var(--mute); font-size: 11px; margin-left: 6px; font-family: var(--f-mono); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=url], .field select, .field textarea {
  width: 100%; background: var(--ink); color: var(--fg); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.5; min-height: 48px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--lav); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lav) 25%, transparent); }
.field .hint { font-size: 12px; color: var(--mute); }
.field .err { font-size: 12px; color: var(--err); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--err); }
.form-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.prefill-note { margin-top: 18px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.review { margin-top: 20px; }
.review dl { margin: 0; display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); border-top: 1px solid var(--line); font-size: var(--t-sm); }
.review dt, .review dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.review dt { color: var(--mute); padding-right: 12px; }
.review dd { white-space: pre-wrap; word-break: break-word; }
@media (max-width: 600px) { .review dl { grid-template-columns: minmax(0, 1fr); } .review dt { border-bottom: 0; padding-bottom: 0; } }
.status { margin-top: 20px; }
.status[hidden] { display: none !important; }
.status pre { white-space: pre-wrap; word-break: break-word; font: 12px/1.7 var(--f-mono); background: var(--ink); border: 1px solid var(--line); padding: 14px; border-radius: var(--radius); max-height: 320px; overflow: auto; margin-top: 12px; }

/* ---------- flow ---------- */
.flow-list { list-style: none; display: grid; gap: 0; margin-top: 40px; border-left: 1px solid var(--line-2); margin-left: 12px; }
.flow-list li { position: relative; padding: 0 0 36px 36px; }
.flow-list li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 1px solid var(--lav); }
.flow-list .who { font: 11px var(--f-mono); letter-spacing: .1em; color: var(--lav); }
.flow-list h3 { font-size: 1.1rem; margin-top: 4px; }
.flow-list p { color: var(--mute); font-size: var(--t-sm); margin-top: 6px; max-width: 44em; }
.prep { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-top: 32px; }
.prep li { min-width: 0; }
.prep label { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; cursor: pointer; background: var(--ink-2); height: 100%; }
.prep input { width: 18px; height: 18px; accent-color: var(--lav); margin-top: 4px; }
.prep b { display: block; font-weight: 500; }
.prep small { display: block; color: var(--mute); font-size: 12px; line-height: 1.7; margin-top: 4px; }
.prep input:checked ~ span b { text-decoration: line-through; text-decoration-color: var(--lav); }
.prep-meter { display: flex; align-items: center; gap: 14px; margin-top: 18px; font: 12px var(--f-mono); color: var(--mute); }
.prep-meter .bar { flex: 1; height: 2px; background: var(--line-2); position: relative; max-width: 360px; }
.prep-meter .bar i { position: absolute; inset: 0 auto 0 0; background: var(--lav); width: 0; transition: width .3s; }

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rv { animation: rv-in .9s cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  @keyframes rv-in { from { opacity: .001; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  .hero-copy > * { animation: hero-in 1.1s cubic-bezier(.2,.7,.2,1) both; }
  .hero-copy > *:nth-child(2) { animation-delay: .08s; } .hero-copy > *:nth-child(3) { animation-delay: .16s; }
  .hero-copy > *:nth-child(4) { animation-delay: .24s; } .hero-copy > *:nth-child(5) { animation-delay: .32s; } .hero-copy > *:nth-child(6) { animation-delay: .4s; }
  @keyframes hero-in { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
}
@supports not (animation-timeline: view()) { .rv { animation: none; } }
.noscript-note { padding: 12px var(--gut); background: var(--ink-3); font-size: 13px; text-align: center; }

/* =========================================================
   WORKS — museum hall (salon hang, wall labels, controlled chaos)
   ========================================================= */
.museum { position: relative; overflow: hidden; isolation: isolate; }
.museum::before { /* gallery spotlights washing down the wall */
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40% 32% at 18% 0%, color-mix(in srgb, var(--fg) 7%, transparent), transparent 70%),
    radial-gradient(36% 30% at 72% 22%, color-mix(in srgb, var(--fg) 6%, transparent), transparent 70%),
    radial-gradient(42% 30% at 40% 58%, color-mix(in srgb, var(--fg) 5%, transparent), transparent 70%);
}
.drift-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.drift { position: absolute; font-family: var(--f-mincho); font-weight: 700; line-height: .9; white-space: nowrap;
  color: color-mix(in srgb, var(--fg) 6%, transparent); will-change: transform;
  text-shadow: 6px 10px 0 color-mix(in srgb, var(--fg) 3%, transparent), 12px 20px 0 color-mix(in srgb, var(--fg) 2%, transparent); }
.museum-entrance { padding-block: clamp(56px, 9vw, 120px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.museum-entrance h1 { font-family: var(--f-mincho); font-size: clamp(2.8rem, 1rem + 8vw, 7.5rem); line-height: 1.05; margin-top: 18px; letter-spacing: .02em; }
.museum-entrance h1 span { display: inline-block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.museum-entrance h1 span:nth-child(2) { transform: translateY(.08em) rotate(-3deg); }
.museum-entrance h1 span:nth-child(3) { transform: translateY(-.05em) rotate(2deg) scaleY(1.12); transform-origin: bottom; }
.museum-entrance h1 span:nth-child(4) { transform: translateY(.14em) skewX(-8deg); }
.museum-entrance h1 span:nth-child(5) { transform: rotate(-1deg) scaleX(1.25); transform-origin: left; color: var(--lav); }
.museum-entrance h1:hover span { transform: none; }
.museum-entrance .sub { font-family: var(--f-display); font-weight: 300; letter-spacing: .3em; font-size: var(--t-sm); color: var(--mute); margin-top: 14px; }
.floor-guide { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; border: 1px solid var(--line); }
.floor-guide li { border-right: 1px solid var(--line); min-width: 0; }
.floor-guide li:last-child { border-right: 0; }
.floor-guide a { display: grid; gap: 4px; padding: 18px 20px; text-decoration: none; height: 100%; }
.floor-guide a:hover { background: var(--ink-2); }
.floor-guide .rm { font: 11px var(--f-mono); letter-spacing: .14em; color: var(--lav); }
.floor-guide b { font-weight: 700; }
.floor-guide small { color: var(--mute); font-size: 12px; }
@media (max-width: 720px) { .floor-guide { grid-template-columns: minmax(0, 1fr); } .floor-guide li { border-right: 0; border-bottom: 1px solid var(--line); } .floor-guide li:last-child { border-bottom: 0; } }

.room { padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line); position: relative; }
.room-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; }
.room-head .rn { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); color: var(--lav); line-height: 1; }
.room-head h2 { font-family: var(--f-mincho); font-size: var(--t-xl); }
.room-head p { flex-basis: 100%; color: var(--mute); max-width: 42em; font-size: var(--t-sm); }

/* frames */
.exhibit { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.frame {
  --tilt: 0deg;
  position: relative; display: block; padding: clamp(10px, 1.4vw, 18px); text-decoration: none;
  background: linear-gradient(145deg, #2A211A, #120E0B 60%, #2B2219);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #7A6236, inset 0 0 0 4px #1A140F, 0 40px 60px -34px rgba(0,0,0,.75), 0 10px 20px -12px rgba(0,0,0,.5);
  transform: perspective(1200px) rotate(var(--tilt)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; color: inherit;
}
.frame:hover, .frame:focus-within { --tilt: 0deg; }
.frame .mat { background: #EFEBE4; padding: clamp(10px, 4%, 34px); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.frame .mat > .art { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
.frame .art.wide { aspect-ratio: 16 / 9; }
.frame .art.tall { aspect-ratio: 4 / 5; }
.frame .art .work-visual { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.frame .art img { width: 100%; height: 100%; object-fit: cover; }
.wall-label {
  background: var(--ink-2); border: 1px solid var(--line); padding: 16px 18px; font-size: 13px; line-height: 1.75;
  max-width: 360px; box-shadow: 0 8px 20px -16px rgba(0,0,0,.5); min-width: 0;
}
.wall-label .no { font: 11px var(--f-mono); letter-spacing: .14em; color: var(--lav); }
.wall-label h3 { font-family: var(--f-mincho); font-size: 1.1rem; margin-top: 4px; }
.wall-label h3 small { display: block; font-family: var(--f-display); font-weight: 300; font-size: 11px; letter-spacing: .12em; color: var(--mute); margin-top: 2px; }
.wall-label .meta { margin-top: 8px; color: var(--mute); font-size: 12px; }
.wall-label .meta div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; }
.wall-label p { margin-top: 10px; }
.wall-label a { color: var(--lav); font: 12px var(--f-mono); display: inline-block; margin-top: 10px; }

.salon { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px); margin-top: 48px; align-items: start; }
.salon .exhibit:nth-child(1) { grid-column: 1 / span 7; }
.salon .exhibit:nth-child(2) { grid-column: 8 / span 5; margin-top: 90px; }
.salon .exhibit:nth-child(3) { grid-column: 2 / span 5; margin-top: -10px; }
.salon .exhibit:nth-child(4) { grid-column: 7 / span 6; margin-top: 60px; }
.salon .exhibit:nth-child(2) .wall-label, .salon .exhibit:nth-child(4) .wall-label { align-self: flex-end; }
@media (max-width: 860px) {
  .salon { grid-template-columns: minmax(0, 1fr); }
  .salon .exhibit:nth-child(n) { grid-column: auto; margin-top: 0; }
  .salon .exhibit .wall-label { align-self: stretch; max-width: none; }
  .frame { --tilt: 0deg !important; }
}

.masterpiece { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(24px, 3vw, 44px); margin-top: 44px; align-items: end; }
@media (max-width: 960px) { .masterpiece { grid-template-columns: minmax(0, 1fr); } .masterpiece .wall-label { max-width: none; } }
.masterpiece .frame { padding: clamp(12px, 2vw, 26px); }
.masterpiece .art { aspect-ratio: 16 / 9; background: linear-gradient(#3C67B0, #F2D6A6 70%, #D8AE74); }
@media (max-width: 640px) { .masterpiece .art { aspect-ratio: 4 / 5; } }
.masterpiece canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.masterpiece canvas:active { cursor: grabbing; }
.masterpiece .art .poster { position: absolute; inset: 0; display: grid; place-items: center; color: #162448; font: 12px var(--f-mono); letter-spacing: .12em; transition: opacity .5s; }
.masterpiece .is-live .poster { opacity: 0; }
.soft-ctrl { display: flex; align-items: center; gap: 14px; margin-top: 14px; font: 12px var(--f-mono); color: var(--mute); letter-spacing: .06em; }
.soft-ctrl input { flex: 1; accent-color: var(--lav); min-width: 0; }
.soft-ctrl output { min-width: 3.5ch; text-align: right; color: var(--fg); }
.room3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: 48px; align-items: start; }
.room3 .exhibit:nth-child(2) { margin-top: 70px; }
@media (max-width: 760px) { .room3 { grid-template-columns: minmax(0, 1fr); } .room3 .exhibit:nth-child(2) { margin-top: 0; } }
.museum-note { margin-top: 28px; font-size: 12px; color: var(--mute); max-width: 52em; }
@media (prefers-reduced-motion: reduce) { .frame, .museum-entrance h1 span { transition: none; } }
.frame .mat { display: block; }

/* =========================================================
   WORKS ROOM II — pop-out dioramas (no frames: the object breaks out of the picture)
   ========================================================= */
.dio { position: relative; display: block; text-decoration: none; color: inherit; padding: 6% 4% 4%; }
.dio-stage { position: relative; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.7,.2,1);
  transform: perspective(1100px) rotate(var(--tilt, 0deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.dio:hover .dio-stage, .dio:focus-visible .dio-stage { --tilt: 0deg; }
.dio-window { position: relative; overflow: hidden; aspect-ratio: var(--ar, 4 / 3); max-width: 100%; border-radius: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 22%, transparent), 0 50px 70px -40px rgba(0,0,0,.8), 0 14px 30px -18px rgba(0,0,0,.55);
  transform: translateZ(0); background: #000; }
.dio-window > img, .dio-window > .layer { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; max-width: none;
  transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px), 0); transition: transform .4s ease-out; }
.dio-pop { position: absolute; pointer-events: none; filter: drop-shadow(0 26px 22px rgba(0,0,0,.55)) drop-shadow(0 6px 6px rgba(0,0,0,.35));
  transform: translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px), 70px) scale(var(--pop, 1)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.dio:not(.is-in) .dio-pop { --pop: .55; opacity: 0; }
.dio.is-in .dio-pop { opacity: 1; transition: transform .9s cubic-bezier(.2,1.4,.3,1), opacity .5s; }
.dio-chip { position: absolute; font: 600 11px/1 var(--f-mono); letter-spacing: .12em; padding: 6px 10px; border-radius: 99px; pointer-events: none;
  background: rgba(9,9,12,.72); color: #F4F1FF; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); }
.dio-btn { position: absolute; z-index: 3; pointer-events: auto; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; padding: 8px 12px; border-radius: 99px;
  background: rgba(9,9,12,.75); color: #fff; border: 1px solid rgba(255,255,255,.25); cursor: pointer; backdrop-filter: blur(6px); min-height: 32px; }
.dio-btn:hover { background: #fff; color: #111; }
.dio-btn { transform: translateZ(40px); }

/* えんや：照明 ON/OFF、断面の部屋が飛び出す */
.dio--enya { --ar: 4 / 3; }
.dio--enya .glow { inset: 0; width: 100%; height: 100%; background:
  radial-gradient(60% 34% at 50% 0%, rgba(255,196,120,.55), transparent 70%),
  radial-gradient(30% 50% at 12% 30%, rgba(255,186,110,.28), transparent 70%),
  radial-gradient(30% 50% at 88% 30%, rgba(255,186,110,.28), transparent 70%);
  mix-blend-mode: screen; transition: opacity .9s; }
.dio--enya .dim { inset: 0; width: 100%; height: 100%; background: rgba(8,10,22,.62); transition: opacity .9s; opacity: 0; mix-blend-mode: multiply; }
.dio--enya.lights-off .glow { opacity: 0; }
.dio--enya.lights-off .dim { opacity: 1; }
.dio--enya.lights-off .room-pop { filter: brightness(.55) saturate(.7) drop-shadow(0 26px 22px rgba(0,0,0,.55)); }
.dio--enya .room-pop { width: 52%; right: -9%; bottom: -16%; }
.dio--enya .room-pop img { width: 100%; animation: dio-bob 6s ease-in-out infinite; }
.dio--enya .dio-btn { left: 12px; top: 12px; }

/* VAROG：巾着がゆっくり回り、フクロウが振り子で揺れ、星が瞬く */
.dio--varog { --ar: 4 / 5; }
.dio--varog .dio-window > img { object-position: 30% 50%; filter: brightness(.7); }
.dio--varog .pouch { width: 62%; left: 6%; bottom: -14%; }
.dio--varog .pouch img { width: 100%; transform-origin: 50% 90%; animation: pouch-turn 7s ease-in-out infinite; }
.dio--varog .owl { width: 20%; right: -6%; top: -9%; transform-origin: 50% 0; }
.dio--varog .owl img { width: 100%; transform-origin: 50% 2%; animation: owl-swing 3.2s ease-in-out infinite; }
.dio--varog .owl:hover img, .dio--varog .owl.boing img { animation: owl-boing .9s cubic-bezier(.3,1.6,.4,1) 1, owl-swing 3.2s ease-in-out .9s infinite; }
.dio--varog .owl { pointer-events: auto; cursor: pointer; }
.dio--varog .star { position: absolute; width: 14px; height: 14px; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: twinkle 2.6s ease-in-out infinite; opacity: 0; }
@keyframes pouch-turn { 0%, 100% { transform: rotateY(-14deg) rotate(-2deg); } 50% { transform: rotateY(14deg) rotate(2deg); } }
@keyframes owl-swing { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(-9deg); } }
@keyframes owl-boing { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(-28deg) scale(1.15); } 60% { transform: rotate(22deg) scale(.95); } 100% { transform: rotate(9deg) scale(1); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* 満天造園：草刈り機が通ると庭が整う（ビフォーアフターの自動ワイプ）、紅葉が額の外へ舞う */
.dio--manten { --ar: 3 / 4; }
.leaves { position: absolute; inset: -12% -14% -30% -14%; pointer-events: none; overflow: visible; transform: translateZ(90px); }
.leaf { position: absolute; top: -6%; width: 26px; height: 26px; animation: leaf-fall var(--d, 9s) linear infinite; animation-delay: var(--dl, 0s); opacity: 0; }
.leaf svg { width: 100%; height: 100%; display: block; animation: leaf-spin var(--s, 3s) ease-in-out infinite alternate; }
@keyframes leaf-fall { 0% { top: -6%; transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; transform: translateX(var(--x, 60px)); opacity: 0; } }
@keyframes leaf-spin { from { transform: rotate(-40deg) rotateY(0); } to { transform: rotate(50deg) rotateY(160deg); } }

/* JobLinks：世界から東京へ集まる光の線、ロゴが飛び出し、診断タイプのチップが浮かぶ */
.dio--jl { --ar: 4 / 3; }
.dio--jl .dio-window > img { filter: saturate(1.15) brightness(.8); }
.dio--jl .flow { inset: 0; width: 100%; height: 100%; }
.dio--jl .flow path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 60 600; animation: streak 3.6s linear infinite; }
@keyframes streak { from { stroke-dashoffset: 660; } to { stroke-dashoffset: 0; } }
.dio--jl .logo { width: 70%; left: -8%; top: -10%; }
.dio--jl .logo img { width: 100%; filter: drop-shadow(0 0 16px rgba(255,214,140,.35)); animation: dio-bob 5s ease-in-out infinite; }
.dio--jl .c1 { right: -5%; top: 30%; animation: dio-bob 4s ease-in-out infinite; }
.dio--jl .c2 { right: 8%; bottom: -5%; animation: dio-bob 4.6s ease-in-out .6s infinite; }
.dio--jl .c3 { left: -4%; bottom: 18%; animation: dio-bob 5.2s ease-in-out 1.2s infinite; }
.dio--jl .chips { position: absolute; inset: 0; transform: translateZ(50px); pointer-events: none; }

@keyframes dio-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) {
  .dio *, .dio *::before { animation: none !important; }
  .leaves { display: none; }
}
@media (max-width: 860px) { .dio { padding: 8% 6% 6%; } }

.dio-hit { position: absolute; inset: 0; z-index: 2; }
.dio-hit:focus-visible { outline: 2px solid var(--lav); outline-offset: 4px; }
.dio--varog, .dio--enya { padding-bottom: 16%; }
.dio--jl { padding-top: 12%; }

/* 満天造園：0%→100% 施工が完成する映像を額の中でスクラブ */
.dio--manten .dio-window { cursor: ew-resize; }
.dio--manten .seq-poster, .dio--manten canvas.seq { inset: 0; width: 100%; height: 100%; transform: none; }
.dio--manten canvas.seq { opacity: 0; transition: opacity .4s; }
.dio--manten.seq-ready canvas.seq { opacity: 1; }
.seq-hud { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 14px 12px; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px 12px;
  background: linear-gradient(transparent, rgba(5,12,6,.72)); color: #F2F7EE; pointer-events: none; }
.seq-pct { font: 400 clamp(2rem, 1.2rem + 3vw, 3.4rem)/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.seq-state { display: flex; gap: 10px; font: 600 11px var(--f-mono); letter-spacing: .14em; justify-self: end; }
.seq-state i { font-style: normal; opacity: .4; transition: opacity .3s; }
.seq-state i.on { opacity: 1; }
.seq-bar { grid-column: 1 / -1; height: 2px; background: rgba(255,255,255,.25); position: relative; }
.seq-bar i { position: absolute; inset: 0 auto 0 0; width: var(--seq, 0%); background: #B9E6A6; box-shadow: 0 0 10px #B9E6A6; }
.done-stamp { left: -9%; top: 8%; display: grid; place-items: center; width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: #B42A1A; color: #FFF4E8; border: 3px double #FFF4E8; font-family: var(--f-mincho); text-align: center; line-height: 1.1;
  --pop: .2; opacity: 0; transform: translate3d(0,0,110px) rotate(-14deg) scale(var(--pop)); transition: transform .5s cubic-bezier(.2,1.8,.3,1), opacity .25s; }
.done-stamp span { font-size: clamp(1rem, .7rem + 1vw, 1.5rem); font-weight: 700; letter-spacing: .1em; }
.done-stamp small { font: 600 11px var(--f-mono); letter-spacing: .1em; }
.dio--manten.is-done .done-stamp { --pop: 1; opacity: 1; }
.dio--manten:not(.is-in) .done-stamp { opacity: 0; }

/* =========================================================
   PRICE — opening promo: bomb → explosion → ojisan hits the glass → speech bubbles
   (pop-comic palette of its own, independent of the site palette)
   ========================================================= */
html.promo-lock body { overflow: hidden; }
.promo { --ink-c: #141218; --yel: #FFD84A; --red: #E8392B; --org: #FF8A1F;
  position: fixed; inset: 0; z-index: 300; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 60%, rgba(255,216,74,.10), transparent 60%), rgba(8,8,12,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.promo-stage { position: absolute; inset: 0; padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px)); }
.promo-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 6; }
.promo-bomb { position: absolute; left: 50%; bottom: 20%; width: min(26vmin, 190px); transform: translateX(-50%); z-index: 2; }
.promo-bomb svg, .promo-ojisan svg { width: 100%; height: auto; display: block; overflow: visible; }
.promo-ojisan { position: absolute; left: calc(50% - min(30vmin, 220px)); bottom: 16%; width: min(22vmin, 160px); z-index: 3; transform-origin: 50% 40%; }
.oj-say { position: absolute; left: 70%; top: -6%; white-space: nowrap; background: #fff; color: var(--ink-c); border: 3px solid var(--ink-c); border-radius: 18px;
  padding: 6px 12px; font: 700 clamp(12px, 1.6vmin, 15px)/1.35 var(--f-body); opacity: 0; transform: scale(.4); transform-origin: 0 100%; }
.oj-say-3 { left: 30%; top: 20%; font-size: clamp(14px, 2.4vmin, 22px); }
.oj-soot { opacity: 0; }
.promo-boom { position: absolute; left: 50%; bottom: calc(20% + min(13vmin, 95px)); width: min(80vmin, 640px); aspect-ratio: 1; transform: translate(-50%, 50%) scale(0); z-index: 4; display: grid; place-items: center; pointer-events: none; }
.promo-boom svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.promo-boom b { position: relative; font: 900 clamp(2rem, 1rem + 6vmin, 5rem)/1 var(--f-body); color: #fff; -webkit-text-stroke: 3px var(--ink-c); paint-order: stroke fill; transform: rotate(-8deg); letter-spacing: .02em; }
.promo-parts { position: absolute; left: 50%; bottom: calc(20% + min(13vmin, 95px)); z-index: 4; pointer-events: none; }
.promo-parts i { position: absolute; width: var(--s); height: var(--s); background: var(--c); border: 2px solid var(--ink-c); opacity: 0; border-radius: 3px; }
.promo-crack { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.promo-crack .c-line { fill: none; stroke: rgba(255,255,255,.92); stroke-width: 1.6; stroke-linejoin: round; }
.promo-crack .c-ring { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1.1; }
.promo-crack .c-shadow { fill: none; stroke: rgba(0,0,0,.45); stroke-width: 3.2; transform: translate(1.2px, 1.6px); }
.promo-crack .c-hole { fill: rgba(255,255,255,.28); stroke: #fff; stroke-width: 2; }
.promo-crack .shard { fill: rgba(235,240,255,.75); stroke: rgba(255,255,255,.9); stroke-width: 1; animation: shard-fall 1.4s cubic-bezier(.5,0,.9,.6) both; }
.promo-crack { clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%)); }
.promo.impact .promo-crack { animation: crack-open .28s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes crack-open { to { clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); } }
@keyframes shard-fall { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--fx), 75vh) rotate(var(--rot)); opacity: 0; } }

.promo-bubbles { position: absolute; left: 50%; top: max(7vh, 40px); transform: translateX(-50%); width: min(1040px, calc(100% - 32px)); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); z-index: 7; pointer-events: none; }
.bubble { position: relative; background: #FFFDF5; color: var(--ink-c); border: 4px solid var(--ink-c); border-radius: 30px; padding: clamp(16px, 2.4vw, 28px); box-shadow: 9px 9px 0 var(--ink-c);
  opacity: 0; transform: scale(.2) rotate(var(--rt)); }
.bubble.b1 { --rt: -4deg; } .bubble.b2 { --rt: 3deg; margin-top: 46px; }
.bubble::after { content: ""; position: absolute; bottom: -34px; width: 44px; height: 38px; background: #FFFDF5; border: 4px solid var(--ink-c); border-top: 0; border-left: 0; clip-path: polygon(0 0, 100% 0, 30% 100%); }
.bubble.b1::after { left: 22%; transform: skewX(20deg); } .bubble.b2::after { right: 26%; transform: scaleX(-1) skewX(20deg); }
.bubble .k { font: 700 11px var(--f-mono); letter-spacing: .1em; color: #6C5CC9; }
.bubble .t { font: 700 clamp(1rem, .8rem + .8vw, 1.35rem)/1.4 var(--f-body); margin-top: 6px; }
.bubble .big { font: 900 clamp(2rem, 1.2rem + 3.2vw, 3.8rem)/1.1 var(--f-body); margin-top: 6px; letter-spacing: -.01em; color: var(--red); -webkit-text-stroke: 1.5px var(--ink-c); paint-order: stroke fill; }
.bubble.b2 .big { color: #3D5BD9; font-size: clamp(1.7rem, 1rem + 2.6vw, 3.1rem); }
.bubble .n { font-size: 13px; margin-top: 10px; color: #3B3842; font-weight: 500; }
.promo-close { position: absolute; left: 50%; bottom: calc(max(5vh, 24px) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) scale(0); z-index: 8;
  background: var(--yel); color: var(--ink-c); border: 4px solid var(--ink-c); border-radius: 99px; box-shadow: 6px 6px 0 var(--ink-c); padding: 14px 34px; min-height: 56px;
  font: 900 1.1rem var(--f-body); cursor: pointer; }
.promo-close:hover { background: #fff; }
.promo-close:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.promo-skip { position: absolute; left: 0; right: 0; bottom: calc(max(5vh, 24px) + 70px + env(safe-area-inset-bottom, 0px)); text-align: center; font: 11px var(--f-mono); color: rgba(255,255,255,.6); letter-spacing: .1em; z-index: 8; opacity: 0; }
@media (max-width: 720px) {
  .promo-bubbles { grid-template-columns: 1fr; gap: 26px; top: max(4vh, 24px); }
  .bubble.b2 { margin-top: 0; }
  .bubble::after { display: none; }
  .promo-skip { display: none; }
}

/* --- timeline --- */
.promo.play .promo-bomb { animation: bomb-drop .6s cubic-bezier(.3,1.6,.5,1) both, bomb-wobble .18s ease-in-out .7s 6 alternate; }
.promo.play .promo-bomb .spark { animation: spark .12s steps(2) infinite; transform-origin: 150px 10px; }
.promo.play .promo-bomb .fuse { stroke-dasharray: 80; animation: fuse 1.6s linear forwards; }
.promo.play .promo-ojisan { animation: oj-walk .6s cubic-bezier(.3,1.3,.5,1) both, oj-shiver .1s linear .8s 9 alternate; }
.promo.play .oj-say-1 { animation: say-pop .3s cubic-bezier(.3,1.6,.5,1) .7s forwards, say-out .2s 1.55s forwards; }
.promo.boom .promo-bomb { animation: none; transform: translateX(-50%) scale(0); transition: transform .12s; }
.promo.boom .promo-boom { animation: boom .75s cubic-bezier(.2,.8,.3,1) forwards; }
.promo.boom .promo-flash { animation: flash .35s ease-out; }
.promo.boom .promo-parts i { animation: part .9s cubic-bezier(.2,.8,.3,1) forwards; }
.promo.boom .oj-soot { opacity: 1; }
.promo.boom .oj-hair { d: path("M96 40 Q92 4 112 12"); }
.promo.boom .promo-ojisan { animation: oj-fly .68s cubic-bezier(.45,0,.8,.6) forwards; }
.promo.boom .oj-say-2 { animation: say-pop .2s .05s forwards, say-out .15s .55s forwards; }
.promo.impact .promo-ojisan { animation: oj-slide 1.6s cubic-bezier(.5,0,.8,.4) forwards; }
.promo.impact .oj-say-3 { animation: say-pop .2s forwards, say-out .2s .9s forwards; }
.promo.impact .promo-flash { animation: flash2 .3s ease-out; }
.promo.show .bubble { animation: bubble-pop .55s cubic-bezier(.25,1.7,.45,1) forwards; }
.promo.show .bubble.b2 { animation-delay: .16s; }
.promo.show .promo-close { animation: close-pop .45s cubic-bezier(.3,1.6,.5,1) .45s forwards; }
.promo.show .promo-skip { animation: fade-in .4s .9s forwards; }
.promo.calm .bubble, .promo.calm .promo-close, .promo.calm .promo-skip { animation: none; opacity: 1; transform: rotate(var(--rt, 0deg)); }
.promo.calm .promo-close { transform: translateX(-50%); }
.promo.calm .promo-bomb, .promo.calm .promo-ojisan { display: none; }

@keyframes bomb-drop { from { transform: translate(-50%, -80vh) rotate(-40deg); } to { transform: translate(-50%, 0) rotate(0); } }
@keyframes bomb-wobble { from { transform: translateX(-50%) rotate(-5deg) scale(1); } to { transform: translateX(-50%) rotate(5deg) scale(1.06); } }
@keyframes spark { 50% { transform: scale(1.5) rotate(30deg); } }
@keyframes fuse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 72; } }
@keyframes oj-walk { from { transform: translateX(-60vw) rotate(-8deg); } to { transform: none; } }
@keyframes oj-shiver { from { transform: translateX(-2px) rotate(-1deg); } to { transform: translateX(2px) rotate(1deg); } }
@keyframes say-pop { to { opacity: 1; transform: scale(1); } }
@keyframes say-out { to { opacity: 0; transform: scale(.6); } }
@keyframes boom { 0% { transform: translate(-50%, 50%) scale(0) rotate(0); opacity: 1; } 35% { transform: translate(-50%, 50%) scale(1.15) rotate(12deg); opacity: 1; } 100% { transform: translate(-50%, 50%) scale(1.5) rotate(20deg); opacity: 0; } }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes flash2 { 0% { opacity: .55; } 100% { opacity: 0; } }
@keyframes part { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
/* launched toward the viewer: grows, spins, and ends face-first against the glass */
@keyframes oj-fly { 0% { transform: translate(0,0) scale(1) rotate(0); } 55% { transform: translate(16vw,-34vh) scale(1.9) rotate(-250deg); } 100% { transform: translate(26vw,-22vh) scale(3.6) rotate(-360deg); } }
@keyframes oj-slide { 0% { transform: translate(26vw,-22vh) scale(3.9,3.3) rotate(-360deg); } 12% { transform: translate(26vw,-22vh) scale(3.6) rotate(-360deg); } 35% { transform: translate(26vw,-19vh) scale(3.6) rotate(-356deg); } 100% { transform: translate(27vw,110vh) scale(3.6) rotate(-345deg); } }
@keyframes bubble-pop { 0% { opacity: 0; transform: scale(.2) rotate(calc(var(--rt) * 4)); } 100% { opacity: 1; transform: scale(1) rotate(var(--rt)); } }
@keyframes close-pop { to { transform: translateX(-50%) scale(1); } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes shake { 0%, 100% { transform: translate(0,0); } 20% { transform: translate(-9px, 5px); } 40% { transform: translate(8px, -6px); } 60% { transform: translate(-6px, -3px); } 80% { transform: translate(5px, 6px); } }
html.promo-shake .promo-stage, html.promo-shake main { animation: shake .3s linear 1; }

.promo-again { position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; background: #FFD84A; color: #141218; border: 3px solid #141218; border-radius: 99px; box-shadow: 4px 4px 0 #141218;
  padding: 8px 16px 8px 12px; font: 800 13px var(--f-body); cursor: pointer; min-height: 44px; animation: again-bob 2.4s ease-in-out infinite; }
.promo-again svg { width: 22px; height: 22px; }
.promo-again:hover { background: #fff; }
@keyframes again-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .promo-again { animation: none; } }

/* =========================================================
   HERO SEQUENCE（2026-10-23）— スクロールで分解・再構成する3D
   既定（JSなし・視差を減らす設定）は普通の縦並び。.hx--live で固定表示＋スクロール演出。
   ========================================================= */
.hx { position: relative; border-bottom: 1px solid var(--line); }
.hx-pin { position: relative; }
.hx-stage { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1; margin: 24px auto 0; }
.hx-stage canvas, .hx-stage .hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-stage .hero-fallback { object-fit: contain; transition: opacity .6s; }
.hx-stage.is-live .hero-fallback { opacity: 0; }
:root[data-palette="blanc"] .hx-stage .hero-fallback, :root[data-palette="desert"] .hx-stage .hero-fallback { filter: invert(1); mix-blend-mode: multiply; }
.hx-grid { display: none; }
.hx-intro .wrap { padding-block: 24px 48px; }
.hx .hero-copy { max-width: 640px; }
.hx .hero-mark { font-family: var(--f-display); font-weight: 300; font-size: var(--t-sm); letter-spacing: .3em; color: var(--mute); }
.hx h1 { font-family: var(--f-mincho); font-size: var(--t-3xl); font-weight: 700; line-height: 1.16; letter-spacing: .01em; margin-top: 18px; }
.hx h1 .l2 { display: block; padding-left: .9em; }
.hx .lead { margin-top: 22px; }
.hx .btn-row { margin-top: 30px; }
.hx .hero-price { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-sm); color: var(--mute); }
.hx .hero-price b { color: var(--gold); font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; }
.hx-steps { list-style: none; margin: 0 auto; padding: 0 var(--gut) 40px; max-width: var(--wrap); display: grid; gap: 28px; }
.hx-step .d { font-family: var(--f-display); font-weight: 300; font-size: 2.6rem; line-height: 1; color: var(--lav); }
.hx-step b { display: block; margin-top: 8px; font: 400 11px var(--f-mono); letter-spacing: .22em; color: var(--gold); }
.hx-step h2 { margin-top: 12px; font-family: var(--f-mincho); font-weight: 700; font-size: var(--t-xl); line-height: 1.3; }
.hx-step p { margin-top: 10px; color: var(--mute); max-width: 28em; }
.hx-final { text-align: center; padding: 48px var(--gut) 72px; }
.hx-final-tag { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.6rem, 1rem + 7.4vw, 8.4rem); line-height: .98; letter-spacing: -.02em; }
.hx-final-jp { margin-top: 18px; font-family: var(--f-mincho); font-weight: 700; font-size: var(--t-lg); color: var(--lav); letter-spacing: .2em; }
.hx-final .btn-row { justify-content: center; margin-top: 30px; }
.hx-rail, .hx-hud, .hx-scroll { display: none; }

/* ---- live (pinned scroll) ---- */
.hx--live { height: 560vh; height: 560svh; }
.hx--live .hx-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hx--live .hx-stage { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; z-index: 1; }
.hx--live .hx-stage canvas { cursor: grab; touch-action: pan-y; }
.hx--live .hx-stage canvas:active { cursor: grabbing; }
.hx--live .hx-grid { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; opacity: .45;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 62% 50%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 62% 50%, #000 0%, transparent 75%); }
.hx--live .hx-layer { position: absolute; z-index: 3; pointer-events: none; will-change: opacity, transform; }
.hx--live .hx-layer a, .hx--live .hx-layer button { pointer-events: auto; }
.hx--live .hx-intro { inset: 0; display: flex; align-items: center; padding-top: 68px; }
.hx--live .hx-intro .wrap { width: 100%; padding-block: 0; }
.hx--live .hx .hero-copy, .hx--live .hero-copy { max-width: min(600px, 48vw); }
.hx--live .hx-steps { position: static; padding: 0; max-width: none; display: block; }
.hx--live .hx-step { left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + 40px)); top: 50%; margin-top: -90px; width: min(420px, 38vw); visibility: hidden; opacity: 0; }
.hx--live .hx-final { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 68px; visibility: hidden; opacity: 0; }
.hx--live .hx-final-tag { text-shadow: 0 0 40px color-mix(in srgb, var(--ink) 70%, transparent); }
.hx--live .hx-rail { display: flex; position: absolute; z-index: 4; right: max(var(--gut-r), 24px); top: 50%; transform: translateY(-50%); flex-direction: column; gap: 14px; align-items: flex-end; font: 11px var(--f-mono); letter-spacing: .14em; color: var(--mute); padding-right: 14px; }
.hx-rail span { transition: color .3s, transform .3s; opacity: .55; }
.hx-rail span.past { opacity: .8; }
.hx-rail span.on { color: var(--lav); opacity: 1; transform: translateX(-6px); }
.hx-rail-bar { position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.hx-rail-bar i { position: absolute; inset: 0; background: var(--gold); transform-origin: top; transform: scaleY(0); }
.hx--live .hx-hud { display: flex; gap: 22px; position: absolute; z-index: 4; left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + 40px)); bottom: 22px; font: 10px var(--f-mono); letter-spacing: .14em; color: var(--mute); }
.hx-hud [data-rpm] { color: var(--lav); }
.hx--live .hx-scroll { display: flex; flex-direction: column; align-items: center; gap: 10px; position: absolute; z-index: 4; left: 50%; bottom: 22px; transform: translateX(-50%); font: 10px var(--f-mono); letter-spacing: .2em; color: var(--mute); }
.hx-scroll i { width: 1px; height: 34px; background: linear-gradient(var(--lav), transparent); animation: hx-drip 1.8s cubic-bezier(.6,0,.3,1) infinite; transform-origin: top; }
@keyframes hx-drip { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.hx-stage.flash::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--fx, 62%) 50%, color-mix(in srgb, var(--lav) 38%, transparent), transparent 42%); animation: hx-flash .7s ease-out forwards; }
@keyframes hx-flash { from { opacity: 1; } to { opacity: 0; } }
/* intro text entry */
@media (prefers-reduced-motion: no-preference) {
  .hx .hero-copy > * { animation: hero-in .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: 0s; }
  .hx .hero-copy > *:nth-child(2) { animation-delay: .06s; } .hx .hero-copy > *:nth-child(3) { animation-delay: .12s; }
  .hx .hero-copy > *:nth-child(4) { animation-delay: .18s; } .hx .hero-copy > *:nth-child(5) { animation-delay: .24s; }
}
/* mobile: 3D上・文字下 */
@media (max-width: 819px) {
  .hx--live .hx-intro { align-items: flex-end; padding-bottom: 64px; }
  .hx--live .hero-copy { max-width: none; }
  .hx--live .hx-intro .lead { display: none; }
  .hx--live .hx-intro h1 { font-size: clamp(2.1rem, 1rem + 6vw, 3rem); }
  .hx--live .hx-intro::before { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, color-mix(in srgb, var(--ink) 88%, transparent) 45%); z-index: -1; }
  .hx--live .hx-step { left: var(--gut); right: var(--gut); width: auto; top: auto; bottom: 64px; margin-top: 0; }
  .hx--live .hx-step::before { content: ""; position: absolute; inset: -40px calc(-1 * var(--gut)) -64px; background: linear-gradient(transparent, color-mix(in srgb, var(--ink) 90%, transparent) 40%); z-index: -1; }
  .hx--live .hx-step .d { font-size: 2rem; }
  .hx--live .hx-final { justify-content: flex-end; padding-bottom: 80px; }
  .hx--live .hx-rail { top: 92px; transform: none; gap: 8px; font-size: 9px; }
  .hx--live .hx-hud { display: none; }
  .hx--live .hx-grid { -webkit-mask-image: radial-gradient(ellipse 90% 45% at 50% 35%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 90% 45% at 50% 35%, #000 0%, transparent 75%); }
  .hx-stage.flash::after { --fx: 50%; }
}

/* ---------- INDUSTRY DEMOS（業種別3D・架空） ---------- */
.ind { margin-top: 44px; border: 1px dashed color-mix(in srgb, var(--lav) 55%, transparent); border-radius: var(--radius); background: var(--ink-2); overflow: hidden; }
.ind-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ind-badge { margin-left: auto; }
.ind-badge i { font-style: normal; margin-right: 4px; }
.ind-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); min-height: 520px; }
@media (max-width: 900px) { .ind-body { grid-template-columns: minmax(0, 1fr); } }
.ind-view { position: relative; min-width: 0; min-height: 420px; border-right: 1px solid var(--line);
  background: radial-gradient(ellipse 70% 60% at 50% 55%, color-mix(in srgb, var(--lav) 9%, transparent), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px; }
@media (max-width: 900px) { .ind-view { border-right: 0; border-bottom: 1px solid var(--line); min-height: 380px; } }
.ind-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.ind-view canvas:active { cursor: grabbing; }
.ind-name { position: absolute; left: 16px; top: 14px; font-size: 10px; letter-spacing: .1em; color: var(--mute); max-width: 70%; }
.ind-hint { position: absolute; right: 16px; top: 14px; font-size: 10px; letter-spacing: .12em; color: var(--mute); }
.ind-readout { position: absolute; left: 16px; right: 16px; bottom: 54px; font-family: var(--f-body); font-weight: 700; font-size: var(--t-sm); color: var(--fg);
  text-shadow: 0 1px 10px var(--ink); }
.ind-ctrl { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; font: 11px var(--f-mono); color: var(--mute); }
.ind-ctrl input { flex: 1; accent-color: var(--gold); min-width: 0; }
.ind-side { padding: 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ind-kicker { font-size: 11px; letter-spacing: .16em; color: var(--gold); }
.ind-side h3 { font-family: var(--f-mincho); font-size: var(--t-lg); line-height: 1.45; }
.ind-side h4 { font-size: var(--t-sm); margin-bottom: 8px; }
.ind-yours { border: 1px solid var(--line-2); border-left: 2px solid var(--gold); padding: 14px 16px; border-radius: var(--radius); }
.ind-yours ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ind-yours li { font-size: var(--t-xs); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; }
.ind-side .btn { align-self: flex-start; margin-top: auto; }
.ind-legal { margin-top: 14px; }
.wv-real { position: absolute; z-index: 3; left: 12px; top: 12px; font: 10px var(--f-mono); letter-spacing: .14em; color: var(--ink); background: var(--gold); padding: 3px 8px; border-radius: 2px; }
.hx--live .hx-final .btn--ghost { background: color-mix(in srgb, var(--ink) 72%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hx--live .hx-intro { padding-bottom: 70px; }
.hx--live .hx-scroll { left: auto; right: max(var(--gut-r), 64px); transform: none; }
@media (max-width: 819px) { .hx--live .hx-scroll { display: none; } }
@media (max-width: 440px) { .site-head .brand small { display: none; } .site-head .brand span { white-space: nowrap; } }
@media (max-width: 440px) {
  .site-head .wrap { gap: 10px; }
  .site-head .brand { gap: 8px; min-width: 0; }
  .site-head .brand img { width: 28px; height: 28px; }
  .site-head .brand span { font-size: 12px; letter-spacing: .04em; }
}
@media (max-width: 600px) { .ind-hint { display: none; } .ind-name { max-width: none; right: 16px; } }

/* ---------- 料金の境界表 ---------- */
.tiers { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: var(--radius); }
.tiers article { padding: 20px; border-right: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.tiers article:last-child { border-right: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--lav) 9%, transparent), transparent 80%); }
.tiers .dim { font-size: 11px; letter-spacing: .14em; color: var(--lav); }
.tiers .tp { font-family: var(--f-display); font-size: 1.6rem; color: var(--gold); line-height: 1.1; }
.tiers .tp small { font-size: .55em; margin-left: 2px; }
@media (max-width: 760px) { .tiers { grid-template-columns: minmax(0, 1fr); } .tiers article { border-right: 0; border-bottom: 1px solid var(--line); } .tiers article:last-child { border-bottom: 0; } }
.t.scope td, .t.scope th { vertical-align: top; font-size: var(--t-sm); line-height: 1.75; }
.t.scope th[scope="row"] { white-space: nowrap; }
.t.scope td b { color: var(--fg); }
.t.scope td:last-child b { color: var(--gold); }
.t.scope tr.hl { background: color-mix(in srgb, var(--lav) 7%, transparent); }
.scope-extra { display: block; margin-top: 6px; color: var(--mute); }
@media (max-width: 700px) {
  .t.scope thead { display: none; }
  .t.scope tr { display: grid; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .t.scope td, .t.scope th { display: block; border: 0 !important; padding: 4px 0 !important; }
  .t.scope td:nth-of-type(1)::before { content: "含まれる："; color: var(--ok); font-weight: 700; }
  .t.scope td:nth-of-type(2)::before { content: "追加料金："; color: var(--gold); font-weight: 700; }
}

/* ---------- シミュレーター：3Dヒアリング ---------- */
.hear3d { border: 1px solid color-mix(in srgb, var(--lav) 40%, transparent); border-radius: var(--radius); padding: 16px; margin-top: 16px; background: color-mix(in srgb, var(--lav) 5%, transparent); }
.hear3d h4 { margin-top: 14px; }
.hear3d-k { font-size: 10px; letter-spacing: .16em; color: var(--lav); }
.sim-proposal { border-left: 2px solid var(--lav); padding-left: 12px; }
.sim-proposal h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sim-proposal li { font-size: var(--t-sm); }
@media (max-width: 819px) { .hx--live .hx-stage .hero-fallback { inset: 9% 8% auto; width: 84%; height: 50%; } }