@charset "UTF-8";

:root {
  --ink: #171815;
  --paper: #efece5;
  --line: rgba(23, 24, 21, .22);
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  --sans: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
  --footer-open: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--paper); overflow-x: clip; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
canvas { display: block; }

.canvas-layer,
.canvas-transition {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.canvas-layer { z-index: 0; }
.canvas-grain { z-index: 20; opacity: .22; mix-blend-mode: multiply; }
.canvas-transition { z-index: 50; }

.site-head {
  position: fixed;
  z-index: 70;
  inset: 0 0 auto 0;
  height: 65px;
  padding: 0 34px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.24);
  color: #f8f5ee;
  mix-blend-mode: difference;
}
.brand { display: inline-flex; width: max-content; min-height: 44px; align-items: center; gap: 12px; }
.brand-name { font: 700 13px/1 var(--sans); letter-spacing: .18em; }
.brand-mark { width: 23px; height: 23px; position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; transform: rotate(45deg); }
.brand-mark i { border: 1px solid currentColor; border-radius: 50%; }
.head-note { margin: 0; font: 9px/1 var(--mono); letter-spacing: .18em; }
.menu-trigger { justify-self: end; display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; gap: 9px; border: 0; background: none; padding: 10px 0 10px 14px; cursor: pointer; text-transform: uppercase; font: 9px/1 var(--mono); letter-spacing: .18em; }
.menu-trigger i { width: 4px; height: 4px; background: currentColor; display: block; transition: transform .35s ease; }
.menu-trigger[aria-expanded="true"] i:first-of-type { transform: translateX(7px); }
.menu-trigger[aria-expanded="true"] i:last-of-type { transform: translateX(-7px); }

.menu-panel {
  position: fixed;
  z-index: 65;
  inset: 0;
  padding: 104px 8vw 72px;
  background: #d7ff3f;
  color: #151610;
  display: grid;
  grid-template-columns: 1fr 2fr;
  visibility: hidden;
  opacity: 0;
  clip-path: circle(0 at calc(100% - 50px) 32px);
  transition: clip-path .8s cubic-bezier(.76,0,.24,1), opacity .2s, visibility .8s;
}
.menu-panel.is-open { visibility: visible; opacity: 1; clip-path: circle(150% at calc(100% - 50px) 32px); }
.menu-index { font: 10px/1 var(--mono); letter-spacing: .14em; }
.menu-panel nav { align-self: end; }
.menu-panel nav a { display: grid; grid-template-columns: 54px 1fr; border-top: 1px solid rgba(21,22,16,.35); padding: 10px 0 12px; font: clamp(26px,4.2vw,67px)/.95 var(--serif); transition: padding .3s ease, opacity .3s ease; }
.menu-panel nav a:last-child { border-bottom: 1px solid rgba(21,22,16,.35); }
.menu-panel nav span { padding-top: .8em; font: 9px/1 var(--mono); }
.menu-panel nav a:hover { padding-left: 16px; }

.rail {
  position: fixed;
  z-index: 60;
  right: 0;
  top: 65px;
  bottom: 36px;
  width: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.2vh, 15px);
  border-left: 1px solid rgba(255,255,255,.24);
  color: #fff;
  mix-blend-mode: difference;
}
.rail-line { position: absolute; left: 7px; top: 10%; height: 80%; width: 1px; background: rgba(255,255,255,.22); }
.rail-line i { position: absolute; inset: 0 0 auto; height: 8%; background: #fff; box-shadow: 0 0 10px #fff; transform-origin: top; will-change: transform; }
.rail a { min-height: 44px; display: flex; align-items: center; padding-left: 16px; opacity: .3; transition: opacity .25s, transform .25s; position: relative; }
.rail a::before { content: ""; width: 4px; height: 4px; border: 1px solid currentColor; position: absolute; left: 5px; background: transparent; transform: rotate(45deg); }
.rail a b { font: 8px/1 var(--mono); }
.rail a em { position: absolute; right: 47px; white-space: nowrap; font: normal 10px/1 var(--sans); opacity: 0; transform: translateX(8px); transition: .25s ease; }
.rail a:hover em { opacity: 1; transform: none; }
.rail a.is-active { opacity: 1; transform: translateX(-3px); }
.rail a.is-active::before { background: currentColor; box-shadow: 0 0 8px currentColor; }

main, .stage, .scene { position: relative; z-index: 1; }
.stage { height: 48150px; }
.scene { width: 100%; contain: layout style; }
.scene-intro { height: 5000px; color: #f8f4e9; }
.work-scene { height: 5600px; }
.scene-manifesto { height: 7000px; }
.scene-archive { height: 4300px; background: #ece9e1; }
.scene-contact { height: 3850px; color: #f4efe5; }

.intro-pin,
.work-pin,
.manifesto-pin,
.contact-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.scene-canvas { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; margin-bottom: -100vh; z-index: 0; }
.intro-pin { padding: 9.5vh 8.5vw 8vh; display: grid; grid-template-rows: auto 1fr auto; }
.grid-lines { position: absolute; inset: 0; pointer-events: none; }
.grid-lines::before, .grid-lines::after, .grid-lines i { content: ""; position: absolute; background: rgba(255,255,255,.2); }
.grid-lines::before { left: 5.3vw; top: 0; bottom: 0; width: 1px; }
.grid-lines::after { top: 69%; left: 0; right: 0; height: 1px; }
.grid-lines i:nth-child(1) { left: 34%; top: 0; bottom: 0; width: 1px; }
.grid-lines i:nth-child(2) { left: 66%; top: 0; bottom: 0; width: 1px; }
.grid-lines i:nth-child(3) { top: 21%; left: 0; right: 0; height: 1px; }
.grid-lines i:nth-child(4) { width: 7px; height: 7px; left: calc(34% - 3px); top: calc(69% - 3px); transform: rotate(45deg); }
.grid-lines i:nth-child(5) { width: 7px; height: 7px; left: calc(66% - 3px); top: calc(21% - 3px); transform: rotate(45deg); }
.eyebrow { margin: 0; font: 9px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.scene-intro .eyebrow { align-self: start; }
.scene-intro h1 { margin: auto 0 2.5vh; position: relative; z-index: 2; font: 400 clamp(138px, 24vw, 360px)/.72 var(--serif); letter-spacing: -.13em; transform: translateX(-.06em); }
.scene-intro h1 span { display: inline-block; will-change: transform, opacity; }
.scene-intro h1 span:last-child { color: transparent; -webkit-text-stroke: 1px #f8f4e9; }
.intro-lead { position: absolute; left: 51%; top: 62%; margin: 0; max-width: 380px; font: clamp(19px,1.9vw,31px)/1.5 var(--serif); }
.intro-place { position: absolute; left: 8.5vw; bottom: 8vh; margin: 0; font: 9px/1.7 var(--mono); letter-spacing: .12em; }
.scroll-cue { position: absolute; bottom: 8vh; right: 8vw; display: flex; align-items: center; gap: 16px; font: 8px/1 var(--mono); letter-spacing: .16em; }
.scroll-cue i { width: 56px; height: 1px; background: currentColor; position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; width: 40%; height: 100%; background: #d7ff3f; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { from { transform: translateX(-120%); } to { transform: translateX(300%); } }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; }
.orbit::before { content: ""; position: absolute; width: 7px; height: 7px; background: #d7ff3f; border-radius: 50%; top: 50%; left: -4px; box-shadow: 0 0 14px #d7ff3f; }
.orbit-a { width: 46vw; aspect-ratio: 1; right: -11vw; top: -16vh; }
.orbit-b { width: 27vw; aspect-ratio: 1; left: 38%; bottom: -17vw; }

.work-pin { background: var(--scene-bg); color: var(--scene-ink); display: grid; grid-template-columns: 34vw 1fr; border-top: 1px solid rgba(0,0,0,.2); }
.work-one { --scene-bg:#f0c548; --scene-ink:#201b12; --accent:#fff4cf; }
.work-two { --scene-bg:#233ec2; --scene-ink:#f1f4e9; --accent:#c9ff47; }
.work-three { --scene-bg:#9f3150; --scene-ink:#fff0e7; --accent:#ffd15c; }
.work-four { --scene-bg:#c6d5c0; --scene-ink:#163b2a; --accent:#fff9e9; }
.work-five { --scene-bg:#e05a31; --scene-ink:#251310; --accent:#f5d6c1; }
.work-heading { position: relative; z-index: 3; padding: 11vh 3.6vw 9vh 5.5vw; border-right: 1px solid color-mix(in srgb, var(--scene-ink) 30%, transparent); display: flex; flex-direction: column; }
.work-heading h3 { margin: auto 0; font: 400 clamp(64px,8.5vw,132px)/.82 var(--serif); letter-spacing: -.08em; }
.work-heading h3 span { display: block; will-change: transform; }
.work-heading h3 span:last-child { margin-left: .55em; font-style: italic; }
.work-summary { margin: 0 0 4vh; max-width: 270px; font: 13px/1.75 var(--sans); }
.work-count { font: 9px/1 var(--mono); letter-spacing: .14em; }
.horizontal-track { height: 100%; display: flex; will-change: transform; }
.panel { position: relative; flex: 0 0 66vw; width: 66vw; height: 100%; overflow: hidden; border-right: 1px solid color-mix(in srgb, var(--scene-ink) 28%, transparent); }
.panel p { margin: 0; }
.panel-title { display: grid; place-items: center; background: var(--accent); }
.panel-title .sun-disc { position: absolute; width: min(45vw,620px); aspect-ratio: 1; background: var(--scene-bg); border-radius: 50%; box-shadow: 0 0 0 1px var(--scene-ink); }
.panel-title p { position: relative; font: 700 clamp(65px,10vw,150px)/.75 var(--sans); letter-spacing: -.09em; }
.panel-title span { position: absolute; right: 4vw; bottom: 7vh; writing-mode: vertical-rl; font: 26px/1 var(--serif); }
.panel-specimen { background: #251c15; color: #f6e6ba; display: grid; place-items: center; }
.specimen-word { display: flex; }
.specimen-word i { display: grid; place-items: center; width: 18vw; height: 18vw; border: 1px solid #f6e6ba; border-radius: 50%; font: normal 8vw/1 var(--serif); transform: rotate(var(--r)); }
.specimen-word i:nth-child(1) { --r:-11deg; }.specimen-word i:nth-child(2) { --r:7deg; }.specimen-word i:nth-child(3) { --r:-5deg; }
.panel-specimen p { position: absolute; left: 5vw; bottom: 7vh; font: 17px/1.6 var(--serif); }
.panel-rings { background: #f7e9c0; color: #191915; display:grid; place-items:center; }
.panel-rings i { position:absolute; border:1px solid; border-radius:50%; width:18vw; aspect-ratio:1; transform:translateX(var(--x)) scale(var(--s)); }
.panel-rings i:nth-child(1){--x:-17vw;--s:1.5}.panel-rings i:nth-child(2){--x:0;--s:1.1}.panel-rings i:nth-child(3){--x:17vw;--s:.7}
.panel-rings strong { position:relative; text-align:center; font:400 clamp(44px,6vw,92px)/.95 var(--serif); }
.panel-note { padding: 12vh 6vw; display: flex; flex-direction:column; justify-content:flex-end; background:var(--scene-bg); }
.panel-note p { max-width: 680px; margin-bottom:auto; font:400 clamp(34px,5.4vw,82px)/1.14 var(--serif); }
.panel-note span { font:9px/1 var(--mono); letter-spacing:.15em; }
.panel-grid { background:#e7eddf; color:#17235d; display:grid; place-items:center; }
.grid-dot-field { position:absolute; inset:8%; background-image:radial-gradient(#233ec2 1.1px,transparent 1.1px); background-size:12px 12px; mask-image:radial-gradient(circle,black 0 45%,transparent 72%); }
.panel-grid p { position:relative; font:700 clamp(62px,9vw,136px)/.8 var(--sans); letter-spacing:-.09em; }
.panel-wave { background:#101e7c; display:grid; place-items:center; }
.wave-bars { position:absolute; inset:10%; background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(201,255,71,.75) 9px 11px); clip-path:polygon(0 45%,7% 25%,13% 67%,20% 35%,29% 58%,37% 16%,45% 79%,55% 29%,65% 64%,75% 37%,84% 71%,92% 22%,100% 47%,100% 53%,92% 35%,84% 80%,75% 48%,65% 74%,55% 39%,45% 89%,37% 26%,29% 68%,20% 45%,13% 77%,7% 35%,0 55%); }
.panel-wave h2 { position:relative; margin:0; font:400 clamp(50px,7vw,108px)/.9 var(--serif); }
.panel-coordinate { background:#c9ff47; color:#18207c; }
.panel-coordinate i { position:absolute; border:1px solid; border-radius:50%; aspect-ratio:1; left:50%;top:50%;transform:translate(-50%,-50%);width:var(--w); }
.panel-coordinate i:nth-child(1){--w:19vw}.panel-coordinate i:nth-child(2){--w:35vw}.panel-coordinate i:nth-child(3){--w:52vw}
.panel-coordinate span { position:absolute; left:50%;top:50%;transform:translate(-50%,-50%); font:10px/1 var(--mono); }
.panel-coordinate p { position:absolute; left:5vw;bottom:7vh;font:22px/1.5 var(--serif); }
.panel-steam { background:#f8d9c4; color:#73243d; display:grid;place-items:center; }
.panel-steam i { position:absolute; width:5vw;height:65vh;border:1px solid;border-radius:50%;filter:blur(1px);transform:rotate(var(--r)) translateX(var(--x)); }
.panel-steam i:nth-child(1){--r:-16deg;--x:-9vw}.panel-steam i:nth-child(2){--r:4deg;--x:1vw}.panel-steam i:nth-child(3){--r:18deg;--x:10vw}
.panel-steam p { position:relative;font:400 clamp(52px,7vw,108px)/1 var(--serif); }
.panel-package { background:#682038; display:flex;align-items:center;justify-content:center;gap:2vw;perspective:800px; }
.pack { width:14vw;height:52vh;min-width:160px;border:1px solid #ffd15c;background:#9f3150;color:#ffd15c;display:grid;place-items:center;font:36px/1 var(--serif);box-shadow:1vw 1vw 0 rgba(0,0,0,.17);transform:rotateY(var(--ry)) rotateZ(var(--rz)); }
.pack-a{--ry:18deg;--rz:-3deg}.pack-b{--ry:0;--rz:2deg}.pack-c{--ry:-18deg;--rz:-1deg}
.panel-type { background:#ffd15c;color:#7c2742;display:flex;align-items:center;justify-content:center; }
.panel-type>span { font:400 16vw/.8 var(--serif);margin:-.06em;mix-blend-mode:multiply; }
.panel-type>span:nth-child(2){color:#c0385e;transform:translateY(-10vh)}.panel-type>span:nth-child(3){color:#f7e4d7;transform:translateY(9vh)}
.panel-type p { position:absolute;bottom:7vh;right:5vw;font:16px/1.5 var(--serif); }
.panel-map { background:#e5eee2; overflow:hidden; }
.map-lines { position:absolute;inset:-20%; background:repeating-linear-gradient(19deg,transparent 0 45px,#24553a 46px 47px),repeating-linear-gradient(103deg,transparent 0 77px,#24553a 78px 79px); transform:rotate(5deg); }
.panel-map b { position:absolute;display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#163b2a;color:#e5eee2;font:12px/1 var(--mono); }
.panel-map b:nth-of-type(1){left:28%;top:25%}.panel-map b:nth-of-type(2){left:61%;top:43%}.panel-map b:nth-of-type(3){left:42%;top:72%}
.panel-map p { position:absolute;left:5vw;bottom:7vh;font:50px/1 var(--serif); }
.panel-signs { background:#163b2a;color:#dfead9;display:grid;grid-template:repeat(3,1fr)/1fr; }
.panel-signs>span { display:flex;align-items:center;padding:0 6vw;border-bottom:1px solid #6e8a72;font:400 clamp(60px,9vw,140px)/1 var(--serif); }
.panel-signs>span:nth-child(2){justify-content:flex-end}.panel-signs small{position:absolute;right:5vw;bottom:4vh;font:10px/1 var(--mono);}
.panel-arch { background:#fff8e5;color:#163b2a;display:grid;place-items:center; }
.panel-arch i { position:absolute;width:32vw;height:65vh;border:1px solid;border-radius:50% 50% 0 0;transform:translateX(var(--x)); }
.panel-arch i:nth-child(1){--x:-12vw}.panel-arch i:nth-child(2){--x:12vw}
.panel-arch strong { position:relative;text-align:center;font:400 clamp(48px,6vw,94px)/1 var(--serif); }
.panel-flag { background:#f4d6c0;display:grid;place-items:center; }
.panel-flag i { position:absolute;width:39vw;height:62vh;background:#e05a31;clip-path:polygon(4% 7%,92% 0,76% 35%,100% 74%,53% 63%,20% 100%,27% 57%,0 42%);filter:drop-shadow(20px 25px 0 rgba(37,19,16,.12)); }
.panel-flag p { position:relative;font:400 clamp(70px,10vw,150px)/.78 var(--serif); }
.panel-poster { background:#2a1714;display:flex;align-items:center;justify-content:center;gap:3vw; }
.poster { width:22vw;min-width:230px;height:67vh;padding:3vw;background:#f2d9c6;color:#251310;font:700 clamp(48px,6vw,92px)/.78 var(--sans);letter-spacing:-.08em;transform:rotate(-5deg);box-shadow:2vw 2vw 0 #aa3c20; }
.poster.alt { background:#d7ff3f;transform:rotate(4deg) translateY(5vh);font-family:var(--serif);font-weight:400; }
.poster small { display:block;margin-top:24vh;font:9px/1 var(--mono);letter-spacing:.15em; }
.panel-fold { background:#712918;color:#f1d2bd;display:grid;place-items:center; }
.panel-fold i { position:absolute;width:30vw;height:55vh;border:1px solid;background:#e05a31;clip-path:polygon(0 0,100% 17%,72% 100%,19% 78%);transform:translateX(var(--x)) rotate(var(--r));opacity:.75; }
.panel-fold i:nth-child(1){--x:-16vw;--r:-9deg}.panel-fold i:nth-child(2){--x:0;--r:5deg}.panel-fold i:nth-child(3){--x:16vw;--r:14deg}
.panel-fold h2 { position:relative;margin:0;text-align:center;font:400 clamp(50px,7vw,105px)/.92 var(--serif); }
.progress { position:absolute; z-index:8; left:34vw; right:56px; bottom:35px; height:1px; background:color-mix(in srgb,var(--scene-ink) 22%,transparent); }
.progress i { display:block;width:100%;height:2px;background:var(--scene-ink);transform-origin:left;transform:scaleX(0); }

.manifesto-pin { background:#171815;color:#f0ede5;padding:11vh 8vw 8vh;display:flex;flex-direction:column; }
.manifesto-pin .eyebrow { margin-bottom:auto; }
.manifesto-pin h2 { max-width:1250px;margin:0 0 auto;font:400 clamp(38px,6vw,92px)/1.38 var(--serif);letter-spacing:-.045em; }
.manifesto-pin h2 span { opacity:1; transition:opacity .08s linear; }
.manifesto-pin h2 span.is-visible { opacity:1; }
.manifesto-pin h2 span.pending { opacity:.12; }
.manifesto-meter { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;font:8px/1 var(--mono);letter-spacing:.14em; }
.manifesto-meter i { height:1px;background:#555;position:relative; }
.manifesto-meter i::after { content:"";position:absolute;inset:0;background:#d7ff3f;transform-origin:left;transform:scaleX(var(--reading,0)); }

.archive-inner { position:sticky;top:0;min-height:100vh;padding:11vh 8vw 8vh 5.5vw;display:grid;grid-template-columns:31% 1fr;gap:6vw;background:#ece9e1; }
.archive-head { display:flex;flex-direction:column; }
.archive-head h2 { margin:auto 0 4vh;font:400 clamp(70px,9vw,140px)/.78 var(--serif);letter-spacing:-.07em; }
.archive-head h2 i { margin-left:.55em;font-weight:400; }
.archive-head>p:last-child { margin:0;font:13px/1.7 var(--sans); }
.project-list { align-self:center;border-top:1px solid var(--line); }
.project-list a { min-height:72px;display:grid;grid-template-columns:50px minmax(180px,1.4fr) 1fr 55px 25px;align-items:center;border-bottom:1px solid var(--line);transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .3s,padding .3s; }
.project-list span,.project-list em,.project-list small { font:normal 8px/1 var(--mono);letter-spacing:.1em; }
.project-list strong { font:400 clamp(25px,2.4vw,38px)/1 var(--serif); }
.project-list b { font:400 18px/1 var(--sans);transform:translateX(-10px);opacity:0;transition:.3s ease; }
.project-list a:hover,.project-list a:focus-visible { transform:translateY(7px);background:#d7ff3f;padding-left:12px;box-shadow:0 -7px 0 #ece9e1; }
.project-list a:hover b,.project-list a:focus-visible b { transform:translateX(0);opacity:1; }

.contact-pin { padding:11vh 8vw 7vh;display:flex;flex-direction:column; }
.contact-pin h2 { position:relative;z-index:2;margin:auto 0;font:400 clamp(55px,8vw,124px)/.96 var(--serif);letter-spacing:-.055em; }
.contact-pin h2 i { margin-left:12vw;font-weight:400; }
.contact-link { position:relative;z-index:2;width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-top:1px solid;border-bottom:1px solid;font:clamp(18px,2.1vw,32px)/1 var(--serif); }
.contact-link b { font-weight:400;transition:transform .3s ease; }.contact-link:hover b{transform:translate(6px,-6px)}
.contact-meta { position:relative;z-index:2;display:flex;gap:8vw;margin-top:3vh;font:10px/1.65 var(--mono);letter-spacing:.06em; }
.contact-meta a { display:inline-flex;align-items:center;min-height:44px;padding:4px 0; }
.contact-kanji { position:absolute;right:4vw;top:2vh;margin:0;color:rgba(255,255,255,.08);font:400 70vw/.8 var(--serif); }

.fixed-footer { position:fixed;z-index:40;left:0;right:0;bottom:0;height:calc(44px + (100vh - 44px) * var(--footer-open));min-height:44px;padding:0 70px 0 34px;background:#d7ff3f;color:#171815;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;overflow:hidden;font:8px/44px var(--mono);letter-spacing:.12em;text-transform:uppercase; }
.fixed-footer p { margin:0; }.fixed-footer p:last-child { justify-self:end; }.fixed-footer a { justify-self:center;display:inline-flex;align-items:center;height:44px; }
.fixed-footer::before { content:"余白";position:absolute;left:4vw;bottom:9vh;font:400 31vw/.75 var(--serif);letter-spacing:-.15em;opacity:calc(var(--footer-open) * 1);transform:translateY(calc((1 - var(--footer-open)) * 30px)); }
.cursor-glow { position:fixed;z-index:80;width:14px;height:14px;border-radius:50%;background:#d7ff3f;box-shadow:0 0 22px 8px rgba(215,255,63,.25);pointer-events:none;mix-blend-mode:difference;transform:translate(-50%,-50%);will-change:left,top; }

@media (max-width: 800px) {
  .site-head { height:64px;padding:0 18px;grid-template-columns:1fr auto; }
  .head-note { display:none; }.brand-name{font-size:11px}.menu-trigger span{display:none}
  .rail { top:64px;bottom:32px;width:44px;gap:2px; }.rail a{padding-left:6px;min-height:44px;min-width:44px}.rail a b,.rail a em{display:none}.rail a::before{left:5px;width:3px;height:3px}.rail-line{left:6px}
  .menu-panel { padding:90px 30px 60px;grid-template-columns:1fr; }.menu-index{margin-bottom:30px}.menu-panel nav a{grid-template-columns:38px 1fr;font-size:34px;padding:8px 0 10px}
  .intro-pin { padding:12vh 33px 8vh; }.scene-intro h1{font-size:43vw;line-height:.78;margin:auto 0 11vh}.intro-lead{left:33px;top:55%;font-size:19px}.intro-place{left:33px;bottom:11vh}.scroll-cue{right:34px;bottom:5vh}.scroll-cue span{display:none}
  .grid-lines::before{left:18px}.grid-lines i:nth-child(1){left:50%}.grid-lines i:nth-child(2){display:none}.grid-lines i:nth-child(4){left:calc(50% - 3px)}
  .orbit-a{width:85vw;right:-31vw}.orbit-b{width:72vw;left:11%;bottom:-27vw}
  .work-pin { display:block; }.work-heading{position:absolute;z-index:5;inset:0 auto 0 0;width:39vw;padding:12vh 4vw 7vh 32px;background:linear-gradient(90deg,var(--scene-bg) 72%,transparent);border:0;pointer-events:none}.work-heading h3{font-size:15vw}.work-heading .work-summary{font-size:10px;line-height:1.55}.horizontal-track{padding-left:39vw}.panel{flex-basis:82vw;width:82vw}.progress{left:32px;right:20px;bottom:31px}
  .panel-title p{font-size:16vw}.panel-title .sun-disc{width:65vw}.panel-title span{font-size:19px}.specimen-word i{width:23vw;height:23vw;font-size:12vw}.panel-note{padding:12vh 7vw 9vh}.panel-note p{font-size:10vw}.panel-grid p{font-size:15vw}.panel-wave h2,.panel-steam p,.panel-arch strong,.panel-fold h2{font-size:12vw}.panel-coordinate i:nth-child(1){--w:35vw}.panel-coordinate i:nth-child(2){--w:65vw}.panel-coordinate i:nth-child(3){--w:93vw}.pack{min-width:120px;height:48vh}.panel-type>span{font-size:23vw}.panel-map p{font-size:10vw}.panel-signs>span{font-size:17vw}.poster{min-width:190px;width:54vw;padding:6vw;font-size:13vw}.panel-flag i{width:68vw}.panel-flag p{font-size:19vw}
  .manifesto-pin{padding:12vh 32px 7vh}.manifesto-pin h2{font-size:9vw;line-height:1.48}.manifesto-meter{gap:10px}
  .archive-inner{padding:12vh 32px 8vh;display:block}.archive-head{height:32vh}.archive-head h2{position:absolute;right:36px;top:11vh;margin:0;font-size:18vw}.archive-head>p:last-child{font-size:10px}.project-list a{min-height:58px;grid-template-columns:28px 1fr 38px 20px}.project-list em{display:none}.project-list strong{font-size:23px}.project-list small{text-align:right}
  .contact-pin{padding:12vh 32px 7vh}.contact-pin h2{font-size:13vw}.contact-pin h2 i{margin-left:0}.contact-link{font-size:16px}.contact-meta{gap:20px;font-size:8px}.contact-kanji{font-size:120vw;right:-15vw;top:20vh}
  .fixed-footer{height:calc(44px + (100vh - 44px) * var(--footer-open));min-height:44px;padding:0 25px 0 12px;grid-template-columns:1fr auto;font-size:7px;line-height:44px}.fixed-footer a{display:none}.fixed-footer::before{font-size:56vw;bottom:12vh;left:3vw}
  .cursor-glow{display:none}
}

/* ===== 静的インフォメーション帯（構造のみ・意匠は既存トークン流用） ===== */
#infoband { position: relative; z-index: 1; padding: 14vh 8vw calc(14vh + 44px); }
#infoband .infoband-in { max-width: 980px; margin: 0 auto; }
#infoband .infoband-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; margin-top: 20px; }
#infoband ul { list-style: none; padding: 0; margin: 0; }
#infoband li { margin-top: 6px; }
.infoband-contact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.infoband-contact a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 10px 18px; border: 1px solid var(--line); }
.infoband-note { margin-top: 30px; padding-top: 16px; border-top: 1px dashed var(--line); }

/* ===== JS無効フォールバック（.no-js＝html要素の既定クラス。JS起動時にJSがこのクラスを外す） ===== */
.no-js .horizontal-track { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; }
.no-js .panel { scroll-snap-align: start; }
.no-js .manifesto-pin h2 span { opacity: 1; }
.no-js .scene-intro h1 span, .no-js .reveal { transform: none !important; opacity: 1 !important; }
.no-js .canvas-transition, .no-js .cursor-glow { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:smooth; }
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .canvas-transition,.cursor-glow{display:none}.canvas-grain{opacity:.08}
  .horizontal-track{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory}.panel{scroll-snap-align:start}
  .manifesto-pin h2 span{opacity:1}.scene-intro h1 span,.reveal{transform:none!important;opacity:1!important}
}