:root {
  color-scheme: dark;
  --ink: #08090a;
  --bone: #e9e5d8;
  --dim: #8f928c;
  --signal: #ff3b00;
  --acid: #d4ff36;
  --cyan: #70ecff;
  --abyss: #020810;
  --line: rgba(233, 229, 216, .22);
  --pad: clamp(18px, 3.2vw, 52px);
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", "Yu Mincho", serif;
  --sans: "Arial Narrow", "Roboto Condensed", "Yu Gothic UI", sans-serif;
}
* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; background: var(--ink); }
body { width: 100%; max-width: 100%; margin: 0; color: var(--bone); background: var(--ink); font-family: var(--sans); overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
a { color: inherit; }
a:focus-visible { outline: 1px solid var(--acid); outline-offset: 7px; }
::selection { color: var(--ink); background: var(--acid); }
.skip-link { position: fixed; z-index: 50; left: 12px; top: -80px; padding: 10px; background: var(--bone); color: var(--ink); }
.skip-link:focus { top: 12px; }
.field, .noise { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.field { z-index: 0; opacity: .52; }
.noise { z-index: 1; opacity: .14; background: repeating-radial-gradient(circle at 18% 31%, rgba(255,255,255,.18) 0 1px, transparent 1px 4px); mix-blend-mode: soft-light; }
.masthead, main, footer { position: relative; z-index: 2; }
.masthead { position: fixed; inset: 0 0 auto; height: 84px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); background: linear-gradient(to bottom, rgba(8,9,10,.94), rgba(8,9,10,.58), transparent); backdrop-filter: blur(8px); z-index: 20; }
.wordmark { display: flex; align-items: baseline; gap: 8px; text-decoration: none; letter-spacing: .12em; font-size: 10px; }
.wordmark strong { font: 500 17px var(--serif); letter-spacing: .04em; }
.edition { margin: 0; color: var(--dim); font-size: 8px; line-height: 1.35; letter-spacing: .2em; text-align: center; }
.masthead nav { justify-self: end; display: flex; gap: clamp(12px, 2vw, 30px); }
.masthead nav a { text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }
.masthead nav a:hover, .masthead nav a:focus-visible { color: var(--acid); }
.scroll-meter { position: absolute; inset: auto 0 0; height: 1px; }
.scroll-meter i { display: block; width: calc(var(--scroll, 0) * 100%); height: 100%; background: var(--signal); }
.hero { position: relative; min-height: 100svh; padding: 112px var(--pad) 38px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr auto; align-items: center; border-bottom: 1px solid var(--line); isolation: isolate; }
.hero h1 { grid-column: 1/-1; grid-row: 2; margin: 0; align-self: center; font-family: var(--serif); font-size: clamp(74px, 16.3vw, 250px); font-weight: 400; line-height: .66; letter-spacing: -.075em; mix-blend-mode: difference; }
.hero h1 span { display: block; }
.hero h1 span:last-child { margin-left: 17vw; font-style: italic; color: var(--signal); }
.hero-index { grid-column: 1/3; grid-row: 1; margin: 0; color: var(--dim); font-size: 8px; line-height: 1.5; letter-spacing: .18em; }
.hero-copy { grid-column: 8/12; grid-row: 3; margin: 0; font: clamp(16px, 1.65vw, 25px)/1.7 var(--serif); }
.hero-caption { grid-column: 1/6; grid-row: 3; align-self: end; margin: 0; color: var(--dim); font-size: 8px; letter-spacing: .22em; }
.hero-orbit { position: absolute; z-index: -1; left: 51%; top: 48%; width: min(52vw, 720px); aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(66deg) rotateZ(-16deg); transform-style: preserve-3d; }
.hero-orbit i { position: absolute; inset: calc(var(--i, 0) * 8%); border: 1px solid rgba(233,229,216,.25); border-radius: 50%; animation: orbit 18s linear infinite; }
.hero-orbit i:nth-child(1) { --i: 0; border-color: rgba(255,59,0,.7); }
.hero-orbit i:nth-child(2) { --i: 1; animation-direction: reverse; }
.hero-orbit i:nth-child(3) { --i: 2; animation-duration: 27s; }
.hero-orbit i:nth-child(4) { --i: 3; border-style: dashed; }
.hero-orbit i::after { content: ""; position: absolute; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--acid); left: 11%; top: 11%; box-shadow: 0 0 20px var(--acid); }
.hero-orbit b { position: absolute; width: 16px; aspect-ratio: 1; border: 1px solid rgba(233,229,216,.48); border-radius: 50%; color: transparent; font-size: 0; opacity: .72; background: radial-gradient(circle, rgba(233,229,216,.72) 0 1.5px, transparent 1.8px); box-shadow: 0 0 10px rgba(233,229,216,.1); transform: rotateZ(16deg) rotateX(-66deg); }
.hero-orbit b::before, .hero-orbit b::after { content: ""; position: absolute; background: rgba(233,229,216,.38); }
.hero-orbit b::before { top: -4px; bottom: -4px; left: 50%; width: 1px; transform: translateX(-50%); }
.hero-orbit b::after { top: 50%; right: -4px; left: -4px; height: 1px; transform: translateY(-50%); }
.hero-orbit b:first-of-type { left: 5%; top: 50%; }
.hero-orbit b:last-of-type { right: 3%; bottom: 40%; }
.down { position: absolute; right: var(--pad); bottom: 34px; display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 8px; letter-spacing: .18em; transform: rotate(90deg) translateX(-100%); transform-origin: right bottom; }
.down i { width: 70px; height: 1px; background: var(--bone); }
.statement { min-height: 90svh; padding: clamp(100px, 13vw, 190px) var(--pad); display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; border-bottom: 1px solid var(--line); }
.section-code { margin: 0; color: var(--signal); font-size: 9px; letter-spacing: .2em; }
.statement .section-code { grid-column: 1/4; }
.statement-main { grid-column: 3/12; margin: 0; font: clamp(43px, 7.4vw, 112px)/.98 var(--serif); letter-spacing: -.04em; }
.statement-main em { font-weight: 400; color: var(--acid); }
.display-line { display: block; white-space: nowrap; }
.statement-note { grid-column: 7/12; margin-top: 80px; color: #c1c0b9; font: clamp(14px, 1.2vw, 18px)/1.95 var(--serif); }
.statement-note p { margin: 0 0 1.6em; }
.copy-line { display: block; text-wrap: pretty; }
.copy-phrase { display: inline-block; white-space: nowrap; }
.maker { position: relative; min-height: 94svh; padding: clamp(110px, 13vw, 190px) var(--pad) 70px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.maker::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 28% 48%, rgba(112,236,255,.1), transparent 38%), linear-gradient(110deg, rgba(8,9,10,.9), rgba(8,9,10,.4)); }
.maker > :not(.maker-staff) { position: relative; z-index: 1; }
.maker .section-code { grid-column: 1/4; }
.maker h2 { grid-column: 2/11; min-width: 0; margin: 80px 0 0; font: 400 clamp(62px, 10.8vw, 164px)/.78 var(--serif); letter-spacing: -.06em; }
.maker h2 em { color: var(--cyan); font-weight: 400; }
.maker-copy { grid-column: 7/12; margin-top: 90px; color: #c1c0b9; font: clamp(15px, 1.25vw, 19px)/1.95 var(--serif); }
.maker-copy p { margin: 0 0 1.7em; }
.maker-axis { grid-column: 1/-1; align-self: end; margin: 90px 0 0; padding-top: 14px; border-top: 1px solid rgba(112,236,255,.25); color: var(--dim); font-size: 8px; letter-spacing: .19em; }
.maker-axis i { margin: 0 1.2em; color: var(--cyan); font-style: normal; }
.maker-staff { position: absolute; z-index: 0; top: 39%; right: 0; left: 0; height: 150px; opacity: .72; }
.maker-staff i { position: absolute; right: 0; left: 0; top: calc(var(--staff-line) * 25%); height: 1px; background: linear-gradient(90deg, transparent, rgba(112,236,255,.22) 14%, rgba(233,229,216,.18) 72%, transparent); }
.maker-staff i:nth-child(1) { --staff-line: 0; } .maker-staff i:nth-child(2) { --staff-line: 1; } .maker-staff i:nth-child(3) { --staff-line: 2; } .maker-staff i:nth-child(4) { --staff-line: 3; } .maker-staff i:nth-child(5) { --staff-line: 4; }
.maker-staff::before { content: ""; position: absolute; inset: -28px 0; background: repeating-linear-gradient(90deg, transparent 0 11vw, rgba(112,236,255,.09) 11vw calc(11vw + 1px)); }
.maker-staff::after { content: ""; position: absolute; left: 0; top: 50%; width: clamp(90px, 13vw, 190px); height: 2px; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(255,255,244,.98), var(--cyan), transparent); box-shadow: 0 0 9px var(--cyan), 0 0 30px rgba(112,236,255,.72); animation: music-signal 7.5s linear infinite; }
.works-head { min-height: 55svh; padding: 100px var(--pad) 50px; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; }
.works-head .section-code { grid-column: 1/4; align-self: start; }
.works-head h2 { grid-column: 4/12; margin: 0; font: 400 clamp(68px, 13vw, 190px)/.73 var(--serif); letter-spacing: -.065em; }
.works-index { position: sticky; z-index: 12; top: 84px; display: flex; overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(8,9,10,.88); backdrop-filter: blur(10px); scrollbar-width: none; }
.works-index::-webkit-scrollbar { display: none; }
.works-index a { flex: 1 0 max-content; padding: 11px clamp(12px, 1.2vw, 22px); border-right: 1px solid var(--line); color: var(--dim); font-size: 7px; letter-spacing: .14em; text-decoration: none; white-space: nowrap; }
.works-index a:last-child { border-right: 0; }
.works-index a span { margin-right: .7em; color: var(--bone); }
.works-index a:hover, .works-index a:focus-visible { color: var(--acid); background: rgba(212,255,54,.05); }
.work { --work-accent: var(--signal); position: relative; min-height: 96svh; scroll-margin-top: 124px; display: grid; grid-template-columns: repeat(12, 1fr); overflow: hidden; border-top: 1px solid var(--line); background: linear-gradient(110deg, rgba(8,9,10,.94) 0 20%, rgba(8,9,10,.34) 55%, rgba(8,9,10,.8)); isolation: isolate; }
.work::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 32% 52%, color-mix(in srgb, var(--work-accent) 9%, transparent), transparent 44%); opacity: 0; transition: opacity 1.1s ease; }
.work.is-visible::after { opacity: 1; }
.work-wire { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .72; transform: scale(1.035); transition: transform 1.6s cubic-bezier(.2,.8,.2,1), opacity 1.6s ease; }
.work.is-visible .work-wire { transform: scale(1); }
.work-number { grid-column: 1/3; align-self: start; z-index: 2; padding: var(--pad); color: var(--work-accent); font: italic clamp(70px, 12vw, 180px)/.7 var(--serif); mix-blend-mode: screen; }
.work-body { grid-column: 7/12; min-width: 0; align-self: center; z-index: 2; padding: 90px 0; }
.is-reverse .work-number { grid-column: 10/-1; text-align: right; }
.is-reverse .work-body { grid-column: 2/7; }
.work-kind { color: var(--acid); font-size: 9px; letter-spacing: .22em; }
.work h3 { margin: .16em 0 0; font: 400 clamp(63px, 10vw, 150px)/.75 var(--serif); letter-spacing: -.06em; }
.work-ja { margin: 26px 0 60px; font: clamp(16px, 1.5vw, 22px) var(--serif); }
.work-text { max-width: 430px; font: clamp(15px, 1.22vw, 19px)/1.9 var(--serif); }
.work-progress { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; max-width: 430px; margin-top: 44px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: .14em; }
.progress-dots { letter-spacing: .22em; white-space: nowrap; }
.progress-dots b, .progress-dots i { font-style: normal; font-weight: 400; }
.progress-dots b { color: var(--work-accent); text-shadow: 0 0 12px color-mix(in srgb, var(--work-accent) 50%, transparent); }
.progress-dots i { color: var(--dim); }
.work-progress time { color: var(--dim); white-space: nowrap; }
.work-progress + dl { margin-top: 30px; }
.work dl { margin: 60px 0; border-top: 1px solid var(--line); }
.work dl div { display: grid; grid-template-columns: 90px 1fr; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: .12em; }
.work dt { color: var(--dim); }
.work dd { margin: 0; }
.work-link { display: inline-flex; gap: 30px; padding-bottom: 8px; border-bottom: 1px solid var(--bone); text-decoration: none; font-size: 10px; letter-spacing: .18em; }
.work-link:hover, .work-link:focus-visible { color: var(--acid); border-color: var(--acid); }
.book-links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.book-links .work-link { gap: 18px; }
.work-ethics dl { margin-bottom: 34px; }
.work-harmonia { --work-accent: #ff3b00; }
.work-hallscape { --work-accent: #e0ff75; }
.work-prometheus { --work-accent: #a87dff; }
.work-stele { --work-accent: #f4f1df; }
.work-minke { --work-accent: #70ecff; }
.work-ethics { --work-accent: #ff8aa5; }
.work-web { --work-accent: #7fa7ff; }
.work-proscenium { --work-accent: #ffbf69; }
.work-muse { --work-accent: #8ee6c4; }
.work-juggernaut { --work-accent: #58d8f7; }
.ocean-footer { position: relative; min-height: 118svh; padding: clamp(130px, 18vw, 260px) var(--pad) 42px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr auto; gap: 25px; overflow: hidden; border-top: 1px solid rgba(112,236,255,.48); background: linear-gradient(to bottom, #06121b 0%, #03101b 25%, #020810 66%, #010407 100%); isolation: isolate; }
#ocean { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.ocean-footer::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 50% 0%, rgba(112,236,255,.18), transparent 52%), radial-gradient(circle at 72% 72%, rgba(16,82,122,.24), transparent 35%); }
.ocean-footer::after { content: ""; position: absolute; top: 17%; right: var(--pad); left: var(--pad); height: 1px; background: linear-gradient(90deg, transparent, rgba(112,236,255,.72), transparent); box-shadow: 0 0 26px rgba(112,236,255,.35); }
.ocean-footer .section-code { grid-column: 1/5; color: var(--cyan); }
.footer-call { grid-column: 2/12; align-self: center; margin: 0; font: clamp(51px, 7.8vw, 126px)/.86 var(--serif); letter-spacing: -.055em; text-shadow: 0 0 45px rgba(112,236,255,.08); }
.footer-call em { color: var(--cyan); font-weight: 400; }
.mail { grid-column: 2/9; align-self: end; width: fit-content; margin-bottom: 46px; color: var(--cyan); font: clamp(18px, 2.4vw, 38px) var(--serif); text-decoration-thickness: 1px; text-underline-offset: 10px; }
.profile-strip { grid-column: 2/12; display: grid; grid-template-columns: 1.05fr 1.35fr 1fr; gap: clamp(18px, 4vw, 68px); margin: 18px 0 56px; padding: 20px 0; border-top: 1px solid rgba(112,236,255,.26); border-bottom: 1px solid rgba(112,236,255,.26); }
.profile-strip p { margin: 0; }
.profile-strip span { display: block; margin-bottom: 10px; color: rgba(112,236,255,.62); font-size: 7px; letter-spacing: .2em; }
.profile-strip strong { display: block; color: var(--bone); font: 400 clamp(17px, 1.7vw, 27px)/1.15 var(--serif); letter-spacing: -.015em; }
.profile-strip small { display: block; margin-top: 7px; color: var(--dim); font-size: 9px; letter-spacing: .14em; }
.profile-strip p:nth-child(2) strong { font-size: clamp(14px, 1.3vw, 21px); letter-spacing: .02em; }
.organizer-strip { grid-column: 2/12; display: grid; grid-template-columns: minmax(170px, .75fr) 3fr; gap: clamp(28px, 5vw, 84px); margin: -20px 0 68px; padding: 28px 0 32px; border-bottom: 1px solid rgba(112,236,255,.26); }
.organizer-strip header span { display: block; margin-bottom: 12px; color: rgba(112,236,255,.62); font-size: 7px; letter-spacing: .2em; }
.organizer-strip h2 { margin: 0; color: var(--cyan); font: 400 clamp(20px, 2vw, 32px)/1.08 var(--serif); letter-spacing: -.02em; }
.organizer-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 54px); margin: 0; }
.organizer-list > div { min-width: 0; padding-left: clamp(14px, 1.6vw, 24px); border-left: 1px solid rgba(112,236,255,.2); }
.organizer-list dt { margin: 0 0 16px; color: var(--bone); font: 400 clamp(18px, 1.6vw, 25px)/1.05 var(--serif); }
.organizer-list dt small { display: block; min-height: 2.6em; margin-top: 7px; color: var(--dim); font: 8px/1.3 var(--sans); letter-spacing: .08em; }
.organizer-list dd { margin: 0; color: rgba(222,244,247,.72); font: 11px/1.9 var(--serif); }
.organizer-list .copy-line { line-height: inherit; }
.footer-meta { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; padding-top: 22px; border-top: 1px solid rgba(112,236,255,.26); color: rgba(222,244,247,.72); font-size: 8px; line-height: 1.6; letter-spacing: .17em; }
.footer-meta p { margin: 0; }
.footer-meta a { justify-self: center; color: var(--cyan); text-decoration: none; }
.footer-meta p:last-child { justify-self: end; text-align: right; }
.depth-scale { position: absolute; top: 22%; right: var(--pad); bottom: 7%; display: flex; flex-direction: column; align-items: end; color: rgba(112,236,255,.68); font-size: 7px; letter-spacing: .15em; }
.depth-scale i { width: 1px; flex: 1; margin: 10px 7px; background: repeating-linear-gradient(to bottom, rgba(112,236,255,.3) 0 3px, transparent 3px 9px); }
.ocean-mark { position: absolute; left: var(--pad); top: 20%; margin: 0; color: rgba(112,236,255,.45); font-size: 7px; letter-spacing: .2em; transform: rotate(-90deg) translateX(-100%); transform-origin: left top; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes music-signal { from { transform: translateX(-20vw); } to { transform: translateX(120vw); } }
@media (min-width: 761px) and (max-width: 1100px) {
  .organizer-strip { grid-template-columns: minmax(150px, .65fr) 3fr; gap: clamp(24px, 4vw, 48px); }
  .organizer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}
@media (max-width: 760px) {
  .masthead { grid-template-columns: 1fr auto; height: 68px; }
  .edition { display: none; }
  .masthead nav a:not(:last-child) { display: none; }
  .hero { padding-top: 92px; }
  .hero h1 { font-size: clamp(64px, 24vw, 130px); line-height: .72; }
  .hero h1 span:last-child { margin-left: 4vw; }
  .hero-copy { grid-column: 3/12; }
  .hero-caption, .down { display: none; }
  .hero-orbit { width: min(86vw, 560px); }
  .statement-main { grid-column: 1/-1; font-size: clamp(30px, 9.8vw, 58px); }
  .statement-note { grid-column: 1/-1; margin-top: 50px; font-size: 13px; }
  .works-head h2 { grid-column: 1/-1; }
  .works-index { top: 68px; }
  .works-index a { padding: 10px 13px; }
  .maker h2 { grid-column: 1/-1; margin-top: 70px; font-size: clamp(38px, 12vw, 68px); }
  .maker-title-line { white-space: normal; }
  .maker-title-part { display: block; white-space: nowrap; }

  .maker-copy { grid-column: 1/-1; margin-top: 64px; font-size: 13px; }
  .maker-axis { line-height: 2.2; }
  .maker-axis i { margin: 0 .55em; }
  .work { min-height: 100svh; scroll-margin-top: 108px; }
  .work-number, .is-reverse .work-number { grid-column: 1/5; padding-top: 45px; text-align: left; }
  .work-body, .is-reverse .work-body { grid-column: 1/-1; align-self: end; padding: 180px var(--pad) 65px; }
  .work h3 { font-size: clamp(48px, 17vw, 92px); }
  .work-harmonia h3 { max-width: 100%; font-size: clamp(36px, 11.5vw, 68px); letter-spacing: -.07em; white-space: nowrap; }
  .work-ja { margin-bottom: 32px; }
  .work dl { margin: 36px 0; }
  .ocean-footer { min-height: 110svh; padding-top: 145px; }
  .ocean-footer .section-code { grid-column: 1/9; }
  .footer-call { grid-column: 1/-1; font-size: clamp(36px, 12vw, 68px); line-height: .9; }
  .mail { grid-column: 1/11; font-size: clamp(16px, 5.2vw, 28px); }
  .profile-strip { grid-column: 1/-1; grid-template-columns: 1fr; gap: 0; margin-bottom: 42px; }
  .profile-strip p { padding: 16px 0; border-bottom: 1px solid rgba(112,236,255,.14); }
  .profile-strip p:last-child { border-bottom: 0; }
  .organizer-strip { grid-column: 1/-1; display: block; margin: -12px 0 54px; padding-top: 24px; }
  .organizer-strip header { margin-bottom: 30px; }
  .organizer-list { grid-template-columns: 1fr; gap: 0; }
  .organizer-list > div { padding: 24px 0; border-top: 1px solid rgba(112,236,255,.16); border-left: 0; }
  .organizer-list dt { margin-bottom: 13px; }
  .organizer-list dt small { min-height: 0; }
  .organizer-list dd { font-size: 12px; }
  .footer-meta { grid-template-columns: 1fr auto; gap: 22px; }
  .footer-meta a { justify-self: end; }
  .footer-meta p:last-child { grid-column: 1/-1; justify-self: start; text-align: left; }
  .depth-scale { display: none; }
}
@media (max-width: 360px) {
  .statement-note { font-size: 12.5px; }
  .work-ja { font-size: 15px; }
  .work-text { font-size: 14px; line-height: 1.85; }
  .work dl div { grid-template-columns: 74px 1fr; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .maker-staff::after { left: 44%; animation: none; transform: none; }
}