@font-face {
    font-family: Harmond;
    src: url("../assets/fonts/Harmond - Free For Personal Use/Harmond-ExtraBoldExpanded.otf")format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Harmond;
    src: url("../assets/fonts/Harmond - Free For Personal Use/Harmond-ExtBdItaExp.otf")format("opentype");
    font-weight: 800;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Harmond;
    src: url("../assets/fonts/Harmond - Free For Personal Use/Harmond-SemiBoldCondensed.otf")format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Harmond;
    src: url("../assets/fonts/Harmond - Free For Personal Use/Harmond-SemBdItaCond.otf")format("opentype");
    font-weight: 600;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: NotoJP;
    src: url(../assets/fonts/japanese/NotoSansJP-subset.woff2)format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Ranade;
    src: url(../assets/fonts/body-font/Fonts/WEB/fonts/Ranade-Variable.woff2)format("woff2-variations"), url(../assets/fonts/body-font/Fonts/WEB/fonts/Ranade-Variable.woff2)format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Ranade;
    src: url(../assets/fonts/body-font/Fonts/WEB/fonts/Ranade-VariableItalic.woff2)format("woff2-variations"), url(../assets/fonts/body-font/Fonts/WEB/fonts/Ranade-VariableItalic.woff2)format("woff2");
    font-weight: 100 700;
    font-style: italic;
    font-display: swap
}

:root {
    --bg: #0a0a0a;
    --surface: #1a1a1a;
    --surface-glass: #1a1a1a8c;
    --surface-glass-bd: #b9172947;
    --primary: #8b0f1d;
    --highlight: #b91729;
    --shadow: #5a0711;
    --ink: #f3ede3;
    --text: #ececec;
    --text-dim: #ececec8c;
    --text-faint: #ececec47;
    --f-display: "Harmond", ui-sans-serif, system-ui, sans-serif;
    --f-body: "Ranade", ui-sans-serif, system-ui, sans-serif;
    --f-mono: "Harmond", ui-monospace, "SF Mono", monospace;
    --f-jp: "NotoJP", "Hiragino Sans", "Yu Gothic", sans-serif;
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --chip-radius: 14px;
    --grain-opacity: .06;
    --grain-blend: overlay;
    --wing-shadow: drop-shadow(0 0 34px #b917296b) drop-shadow(0 0 4px #8b0f1d99);
    --petal-shadow: drop-shadow(0 0 2px #8b0f1d80);
    --bg-blend-screen: screen;
    --chip-backdrop: blur(10px)
}

html[data-tier=mid] {
    --wing-shadow: none;
    --petal-shadow: none
}

html[data-tier=low] {
    --grain-opacity: .04;
    --grain-blend: normal;
    --wing-shadow: none;
    --petal-shadow: none;
    --bg-blend-screen: normal;
    --chip-backdrop: none
}

*,
:before,
:after {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    padding: 0
}

html {
    background: var(--bg);
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
    overflow-x: clip
}

body {
    width: 100%;
    max-width: 100vw;
    min-height: 100svh;
    font-family: var(--f-body);
    font-optical-sizing: auto;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    line-height: 1.55;
    overflow-x: clip
}

main {
    max-width: 100vw;
    overflow-x: clip
}

::selection {
    background: var(--highlight);
    color: var(--bg)
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0
}

.preloader {
    z-index: 10000;
    touch-action: none;
    cursor: crosshair;
    background: radial-gradient(at 50% 54%, #1a0309 0%, #060306 55%, #000 100%);
    transition: opacity .55s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .55s;
    position: fixed;
    inset: 0;
    overflow: hidden
}

.preloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.preloader:before {
    content: "";
    pointer-events: none;
    opacity: .32;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
    background-size: 160px 160px;
    position: absolute;
    inset: 0
}

.preloader:after {
    content: "";
    pointer-events: none;
    mix-blend-mode: screen;
    background: linear-gradient(#0000 0%, #b9172900 12%, #b917293d 50%, #b9172900 88%, #0000 100%);
    width: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-.5px)
}

.preloader-canvas {
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: opacity .2s ease-out;
    display: block;
    position: absolute;
    inset: 0
}

.preloader.is-canvas-ready .preloader-canvas {
    opacity: 1
}

.preloader-ui {
    pointer-events: none;
    color: #f3ede3eb;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-family: Harmond, ui-monospace, SF Mono, monospace;
    position: absolute;
    inset: 0
}

.p-tl {
    align-items: flex-end;
    gap: 14px;
    font-size: 10px;
    display: flex;
    position: absolute;
    top: clamp(22px, 4vh, 40px);
    left: clamp(22px, 4vw, 44px)
}

.p-tl .kanji {
    letter-spacing: 0;
    color: #b91729;
    text-shadow: 0 0 16px #b917298c;
    font-family: NotoJP, Hiragino Sans, Yu Gothic, sans-serif;
    font-size: 28px;
    line-height: 1
}

.p-tl .label {
    color: #f3ede38c;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 2px;
    display: flex
}

.p-tl .label b {
    color: #f3ede3;
    letter-spacing: .32em;
    font-weight: 400
}

.p-tr {
    text-align: right;
    color: #f3ede38c;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    display: flex;
    position: absolute;
    top: clamp(22px, 4vh, 40px);
    right: clamp(22px, 4vw, 44px)
}

.p-tr b {
    color: #f3ede3;
    letter-spacing: .32em;
    font-weight: 400
}

.p-tr .pulse {
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.p-tr .pulse:before {
    content: "";
    background: #b91729;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    animation: 1.6s ease-in-out infinite p-pulse;
    box-shadow: 0 0 8px #b91729
}

@keyframes p-pulse {
    0%,
    to {
        opacity: .3
    }
    50% {
        opacity: 1
    }
}

.p-bl {
    align-items: flex-end;
    gap: 16px;
    display: flex;
    position: absolute;
    bottom: clamp(22px, 4vh, 48px);
    left: clamp(22px, 4vw, 44px)
}

.preloader-pct {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    align-items: baseline;
    gap: 4px;
    font-family: Harmond, ui-monospace, SF Mono, monospace;
    line-height: .85;
    display: inline-flex
}

.preloader-pct .num {
    color: #f3ede3;
    text-align: right;
    opacity: 1;
    min-width: 3ch;
    font-size: clamp(64px, 10vw, 128px);
    font-weight: 800;
    transition: opacity .3s ease-out;
    display: inline-block
}

.preloader[data-font-ready=false] .preloader-pct .num {
    opacity: 0
}

.preloader-pct .sign {
    color: #b91729;
    padding-bottom: .25em;
    font-size: clamp(24px, 3vw, 40px)
}

.p-bl .stack {
    color: #f3ede38c;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
    font-size: 10px;
    display: flex
}

.p-bl .stack b {
    color: #f3ede3;
    letter-spacing: .32em;
    font-weight: 400
}

.p-bl .stack .divider {
    background: #f3ede34d;
    width: 40px;
    height: 1px
}

.p-br {
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    width: clamp(260px, 28vw, 420px);
    display: flex;
    position: absolute;
    bottom: clamp(22px, 4vh, 48px);
    right: clamp(22px, 4vw, 44px)
}

.p-br .kanji {
    letter-spacing: .4em;
    color: #f3ede3b3;
    font-family: NotoJP, Hiragino Sans, Yu Gothic, sans-serif;
    font-size: 11px
}

.p-br .kanji .jp {
    color: #b91729;
    letter-spacing: .08em;
    margin-right: 8px;
    font-size: 16px
}

.preloader-bar {
    background: #f3ede31f;
    width: 100%;
    height: 1px;
    position: relative;
    overflow: visible
}

.preloader-bar:before {
    content: "";
    width: calc(var(--progress, 0) * 100%);
    background: linear-gradient(90deg, #5a0711 0%, #8b0f1d 50%, #b91729 100%);
    transition: width .35s cubic-bezier(.16, 1, .3, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0
}

.preloader-bar:after {
    content: "";
    left: calc(var(--progress, 0) * 100%);
    width: 2px;
    opacity: calc(.4 + var(--progress, 0) * .6);
    background: #b91729;
    transition: left .35s cubic-bezier(.16, 1, .3, 1);
    position: absolute;
    top: -2px;
    bottom: -2px;
    transform: translate(-1px);
    box-shadow: 0 0 12px 1px #b91729
}

.p-br .hint {
    letter-spacing: .36em;
    color: #f3ede359;
    font-size: 9px
}

.p-halo {
    aspect-ratio: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(circle, #b9172914 0%, #8b0f1d0a 40%, #0000 72%);
    border-radius: 50%;
    width: min(520px, 60vmin);
    animation: 4.5s ease-in-out infinite p-halo-breathe;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@keyframes p-halo-breathe {
    0%,
    to {
        opacity: .8;
        transform: translate(-50%, -50%)scale(1)
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%)scale(1.08)
    }
}

@media (prefers-reduced-motion:reduce) {
    .preloader-canvas {
        display: none
    }
    .preloader {
        cursor: default
    }
    .p-halo,
    .p-tr .pulse:before {
        animation: none
    }
}

@media (max-width:640px) {
    .p-tl,
    .p-tr {
        font-size: 9px
    }
    .p-tl .kanji {
        font-size: 22px
    }
    .preloader-pct .num {
        font-size: 64px
    }
    .p-bl .stack {
        display: none
    }
    .p-br {
        width: 60vw
    }
}

.hero {
    isolation: isolate;
    perspective: 900px;
    width: 100%;
    min-height: 100svh;
    position: relative;
    overflow: hidden
}

.bg-topo {
    z-index: 0;
    pointer-events: none;
    opacity: .38;
    mix-blend-mode: screen;
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(90% 75%, #000 55%, #0000 95%);
    mask-image: radial-gradient(90% 75%, #000 55%, #0000 95%)
}

.bg-topo svg {
    width: 100%;
    height: 100%;
    display: block
}

.bg-topo svg path {
    stroke-dasharray: 3200;
    stroke-dashoffset: 3200px;
    animation: topo-draw 2.2s var(--ease-out-expo) .28s forwards
}

.bg-topo svg path:nth-of-type(2) {
    animation-delay: .38s
}

.bg-topo svg path:nth-of-type(3) {
    animation-delay: .48s
}

.bg-topo svg path:nth-of-type(4) {
    animation-delay: .58s
}

.bg-topo svg path:nth-of-type(5) {
    animation-delay: .68s
}

.bg-topo svg path:nth-of-type(6) {
    animation-delay: .78s
}

.bg-topo svg path:nth-of-type(7) {
    animation-delay: .88s
}

.bg-topo svg path:nth-of-type(8) {
    animation-delay: .98s
}

@keyframes topo-draw {
    to {
        stroke-dashoffset: 0
    }
}

.bg-seam {
    z-index: 1;
    width: 2px;
    animation: seam-pulse 3.6s var(--ease-in-out) infinite;
    pointer-events: none;
    background: linear-gradient(#0000 0%, #b9172900 8%, #b917298c 22%, #b91729d9 50%, #b917298c 78%, #0000 92%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 0 24px #b9172973, 0 0 60px #8b0f1d59
}

@keyframes seam-pulse {
    0%,
    to {
        opacity: .9;
        box-shadow: 0 0 24px #b9172973, 0 0 60px #8b0f1d59
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 34px #b91729b3, 0 0 96px #8b0f1d8c
    }
}

.bg-petals {
    z-index: 1;
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.petal {
    background: var(--bg);
    clip-path: polygon(50% 0, 65% 30%, 100% 35%, 72% 55%, 85% 100%, 50% 75%, 15% 100%, 28% 55%, 0 35%, 35% 30%);
    opacity: .35;
    width: 14px;
    height: 14px;
    filter: var(--petal-shadow);
    animation: 22s linear infinite petal-drift;
    position: absolute;
    top: -6%
}

.petal:first-child {
    animation-duration: 24s;
    animation-delay: 0s;
    left: 6%
}

.petal:nth-child(2) {
    animation-duration: 19s;
    animation-delay: -4s;
    left: 14%
}

.petal:nth-child(3) {
    animation-duration: 27s;
    animation-delay: -8s;
    left: 22%
}

.petal:nth-child(4) {
    animation-duration: 21s;
    animation-delay: -12s;
    left: 30%
}

.petal:nth-child(5) {
    animation-duration: 25s;
    animation-delay: -16s;
    left: 38%
}

.petal:nth-child(6) {
    animation-duration: 23s;
    animation-delay: -2s;
    left: 44%
}

@keyframes petal-drift {
    0% {
        opacity: 0;
        transform: translate(0)rotate(0)
    }
    8% {
        opacity: .35
    }
    50% {
        opacity: .3;
        transform: translate(40px, 55vh)rotate(180deg)
    }
    92% {
        opacity: .2
    }
    to {
        opacity: 0;
        transform: translate(-30px, 110vh)rotate(360deg)
    }
}

.bg-rings {
    z-index: 0;
    pointer-events: none;
    opacity: .32;
    mix-blend-mode: screen;
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(110% 80% at 70%, #000 35%, #0000 90%);
    mask-image: radial-gradient(110% 80% at 70%, #000 35%, #0000 90%)
}

.bg-rings svg {
    width: 100%;
    height: 100%;
    display: block
}

.bg-rings svg path {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000px;
    animation: topo-draw 2.4s var(--ease-out-expo) .18s forwards
}

.bg-rings svg path:nth-of-type(2) {
    animation-delay: .26s
}

.bg-rings svg path:nth-of-type(3) {
    animation-delay: .34s
}

.bg-rings svg path:nth-of-type(4) {
    animation-delay: .42s
}

.bg-rings svg path:nth-of-type(5) {
    animation-delay: .5s
}

.bg-rings svg path:nth-of-type(6) {
    animation-delay: .58s
}

.bg-rings svg path:nth-of-type(7) {
    animation-delay: .66s
}

.bg-rings svg path:nth-of-type(8) {
    animation-delay: .74s
}

.bg-mountains {
    z-index: 0;
    pointer-events: none;
    opacity: .4;
    mix-blend-mode: screen;
    height: clamp(260px, 40vh, 460px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    -webkit-mask-image: linear-gradient(#000 55%, #0000 100%);
    mask-image: linear-gradient(#000 55%, #0000 100%)
}

.bg-mountains svg {
    width: 100%;
    height: 100%;
    display: block
}

.bg-mountains svg path {
    stroke-dasharray: 3200;
    stroke-dashoffset: 3200px;
    animation: topo-draw 2.6s var(--ease-out-expo) .2s forwards
}

.bg-mountains svg path:nth-of-type(2) {
    animation-delay: .36s
}

.bg-mountains svg path:nth-of-type(3) {
    animation-delay: .52s
}

.bg-mountains svg path:nth-of-type(4) {
    animation-delay: .72s
}

.bg-mountains svg path:nth-of-type(5) {
    animation-delay: .82s
}

.contact-fx {
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: opacity .8s var(--ease-out-expo);
    position: absolute;
    inset: 0
}

#ch-contact.webgl-on .contact-fx {
    opacity: 1
}

#ch-contact.webgl-on .bg-mountains {
    opacity: 0
}

html[data-tier=low] .contact-fx {
    display: none
}

.bg-seigaiha-strip {
    z-index: 0;
    pointer-events: none;
    opacity: .3;
    mix-blend-mode: screen;
    background-image: url(../assets/bg-seigaiha.svg);
    background-repeat: repeat;
    background-size: clamp(160px, 18vw, 240px);
    height: clamp(90px, 14vh, 140px);
    position: absolute;
    top: 18%;
    left: 0;
    right: 0;
    -webkit-mask-image: linear-gradient(90deg, #0000 0%, #000 18% 82%, #0000 100%);
    mask-image: linear-gradient(90deg, #0000 0%, #000 18% 82%, #0000 100%)
}

.ornament-enso {
    z-index: 0;
    pointer-events: none;
    opacity: .42;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 18px #8b0f1d40);
    width: clamp(180px, 22vw, 320px);
    height: auto;
    position: absolute;
    top: clamp(96px, 16vh, 200px);
    right: clamp(24px, 6vw, 120px)
}

.chapter-divider {
    pointer-events: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: clamp(24px, 4vh, 56px) clamp(20px, 6vw, 120px);
    display: flex;
    position: relative
}

.chapter-divider img {
    opacity: .55;
    width: min(560px, 68vw);
    height: auto;
    display: block
}

.glyph-compass {
    vertical-align: -6px;
    opacity: .7;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    display: inline-block
}

.mq-field {
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    animation: chip-in .8s var(--ease-out-expo) 1s forwards;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.mq {
    transform-origin: 50%;
    width: 180vmax;
    height: clamp(44px, 5.5vh, 72px);
    font-family: var(--f-display);
    letter-spacing: .01em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .42;
    align-items: center;
    font-size: clamp(22px, 3vh, 36px);
    font-weight: 800;
    display: flex;
    position: absolute;
    left: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 1px #0003, 0 18px 48px #00000059
}

.mq-track {
    will-change: transform;
    gap: 1.2em;
    padding-inline: .6em;
    display: flex
}

.mq-track>span {
    align-items: center;
    gap: .6em;
    display: inline-flex
}

.mq-track .sep {
    opacity: .7;
    background: currentColor;
    border-radius: 50%;
    width: .35em;
    height: .35em;
    display: inline-block;
    transform: translateY(-.1em)
}

.mq .jp {
    font-family: var(--f-jp);
    letter-spacing: 0;
    font-weight: 800
}

.mq-2 {
    background: var(--highlight);
    color: #0a0a0a;
    top: 42%;
    transform: translate(-50%)rotate(-22deg)
}

.mq-5 {
    color: var(--highlight);
    background: #0a0a0a;
    top: 42%;
    transform: translate(-50%)rotate(22deg)
}

@media (max-width:768px) {
    .mq {
        height: clamp(34px, 4.8vh, 54px);
        font-size: clamp(16px, 2.4vh, 24px)
    }
}

html[data-tier=mid] .petal:nth-child(n+4) {
    display: none
}

html[data-tier=mid] .bg-seam,
html[data-tier=low] .bg-seam {
    opacity: .92;
    animation: none;
    box-shadow: 0 0 24px #b9172973, 0 0 60px #8b0f1d59
}

html[data-tier=mid] .bg-topo,
html[data-tier=mid] .bg-rings,
html[data-tier=mid] .bg-mountains,
html[data-tier=mid] .bg-seigaiha-strip,
html[data-tier=low] .bg-topo,
html[data-tier=low] .bg-rings,
html[data-tier=low] .bg-mountains,
html[data-tier=low] .bg-seigaiha-strip {
    mix-blend-mode: normal;
    opacity: calc(var(--bg-overlay-opacity, .32) * .85)
}

html[data-tier=mid] .bg-seigaiha-strip,
html[data-tier=low] .bg-seigaiha-strip {
    filter: none
}

html[data-tier=mid] .grain,
html[data-tier=low] .grain {
    mix-blend-mode: normal;
    opacity: .04
}

html[data-tier=low] .bg-petals {
    display: none
}

html[data-tier=mid] .btn-menu,
html[data-tier=mid] .book-frame,
html[data-tier=mid] .h-kanji,
html[data-tier=mid] .audio-toggle,
html[data-tier=low] .btn-menu,
html[data-tier=low] .book-frame,
html[data-tier=low] .h-kanji,
html[data-tier=low] .audio-toggle {
    -webkit-backdrop-filter: none
}

.portrait-stage {
    z-index: 3;
    opacity: 0;
    width: min(75svh, 92vw, 780px);
    height: min(100svh, 1040px);
    animation: portrait-in .78s var(--ease-out-expo) .42s forwards;
    will-change: transform, opacity;
    place-items: end center;
    display: grid;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%)
}

@keyframes portrait-in {
    0% {
        opacity: 0;
        transform: translate(-50%)translateY(24px)
    }
    to {
        opacity: 1;
        transform: translate(-50%)translateY(0)
    }
}

.portrait-stage canvas,
.portrait-stage .portrait-fallback {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.portrait-stage canvas {
    z-index: 2
}

.portrait-stage .portrait-fallback {
    z-index: 1
}

.samurai-wings {
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    will-change: opacity;
    position: absolute;
    inset: 0
}

.samurai-wings .wing {
    transform-origin: 50% 100%;
    width: auto;
    height: 82%;
    filter: var(--wing-shadow);
    position: absolute;
    bottom: 16%;
    left: 50%
}

.samurai-wings .wing-l {
    transform: translate(-50%)rotate(-22deg)
}

.samurai-wings .wing-r {
    transform: translate(-50%)rotate(22deg)
}

.portrait-stage:not(.webgl-on) .samurai-wings {
    opacity: 1;
    transition: opacity .38s var(--ease-out-expo)
}

.portrait-stage:not(.webgl-on):hover .samurai-wings {
    opacity: 0
}

.portrait-fallback img {
    object-fit: contain;
    object-position: center bottom;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.portrait-fallback .layer-base {
    opacity: 1
}

.portrait-fallback .layer-reveal {
    opacity: 0;
    transition: opacity .38s var(--ease-out-expo)
}

.portrait-stage:not(.webgl-on):hover .portrait-fallback .layer-reveal {
    opacity: 1
}

@media (hover:none) {
    .portrait-stage:not(.webgl-on) .portrait-fallback .layer-reveal {
        animation: 6s ease-in-out infinite portrait-breathe
    }
    .portrait-stage:not(.webgl-on) .samurai-wings {
        animation: 6s ease-in-out infinite portrait-wings-breathe
    }
}

@keyframes portrait-breathe {
    0%,
    to {
        opacity: .25
    }
    50% {
        opacity: .75
    }
}

@keyframes portrait-wings-breathe {
    0%,
    to {
        opacity: 1
    }
    50% {
        opacity: .3
    }
}

.hover-zones {
    z-index: 4;
    position: absolute;
    inset: 0
}

.hover-zones .zone {
    cursor: crosshair;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.hover-zones .zone:focus-visible {
    outline: 1px solid var(--highlight);
    outline-offset: 6px
}

.wordmark {
    z-index: 6;
    font-family: var(--f-display);
    letter-spacing: .005em;
    color: var(--text);
    opacity: 0;
    animation: chip-in .64s var(--ease-out-expo) .9s forwards;
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: .88;
    position: absolute;
    top: clamp(18px, 3.2vh, 36px);
    left: clamp(18px, 3.2vw, 42px)
}

.wordmark .line-1 {
    display: block
}

.wordmark .line-2 {
    color: #0000;
    -webkit-text-stroke: 1px var(--highlight);
    display: block
}

.wordmark .meta {
    font-family: var(--f-mono);
    letter-spacing: .22em;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-top: 14px;
    font-size: 11px;
    display: block
}

.monogram {
    z-index: 6;
    opacity: 0;
    width: 46px;
    height: 46px;
    animation: chip-in .64s var(--ease-out-expo) 1.04s forwards;
    place-items: center;
    display: grid;
    position: absolute;
    top: clamp(18px, 3.2vh, 36px);
    left: 50%;
    transform: translate(-50%)
}

.monogram img {
    width: 100%;
    height: 100%;
    display: block
}

.top-nav {
    z-index: 6;
    opacity: 0;
    animation: chip-in .64s var(--ease-out-expo) 1.12s forwards;
    align-items: center;
    gap: 10px;
    display: flex;
    position: absolute;
    top: clamp(18px, 3.2vh, 36px);
    right: clamp(18px, 3.2vw, 42px)
}

.btn-store {
    background: var(--primary);
    color: var(--text);
    font-family: var(--f-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    transition: background .22s var(--ease-out-expo), transform .22s var(--ease-out-expo);
    border: 1px solid #ffffff0f;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex
}

.btn-store svg {
    width: 14px;
    height: 14px
}

.btn-store:hover {
    background: var(--highlight);
    transform: translateY(-1px)
}

.btn-store:focus-visible {
    outline: 2px solid var(--highlight);
    outline-offset: 3px
}

.btn-menu {
    background: var(--surface-glass);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--surface-glass-bd);
    border-radius: var(--chip-radius);
    width: 44px;
    height: 44px;
    transition: border-color .22s var(--ease-out-expo);
    place-items: center;
    display: grid
}

.btn-menu svg {
    width: 18px;
    height: 18px;
    stroke: var(--text)
}

.btn-menu:hover {
    border-color: var(--highlight)
}

.btn-menu:focus-visible {
    outline: 2px solid var(--highlight);
    outline-offset: 3px
}

.big-name {
    z-index: 1;
    font-family: var(--f-display);
    letter-spacing: -.03em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    color: #0000;
    -webkit-text-stroke: 1.5px #f3ede324;
    opacity: 0;
    animation: big-name-in .9s var(--ease-out-expo) 1.2s forwards;
    will-change: opacity, transform;
    font-weight: 800;
    line-height: .82;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%)
}

@keyframes big-name-in {
    0% {
        opacity: 0;
        transform: translate(-50%)translateY(14px)
    }
    to {
        opacity: 1;
        transform: translate(-50%)translateY(0)
    }
}

.avail-badge {
    z-index: 6;
    writing-mode: vertical-rl;
    font-family: var(--f-mono);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0;
    animation: chip-in .64s var(--ease-out-expo) 1.28s forwards;
    align-items: center;
    gap: 10px;
    padding: 12px 8px;
    font-size: 10px;
    display: flex;
    position: absolute;
    bottom: clamp(18px, 3vh, 36px);
    right: clamp(18px, 3vw, 42px);
    transform: rotate(180deg)
}

.avail-badge .dot {
    background: var(--highlight);
    width: 8px;
    height: 8px;
    box-shadow: 0 0 10px var(--highlight);
    animation: dot-blink 1.6s var(--ease-in-out) infinite;
    border-radius: 50%
}

@keyframes dot-blink {
    0%,
    to {
        opacity: 1;
        transform: scale(1)
    }
    50% {
        opacity: .4;
        transform: scale(.7)
    }
}

.side-label {
    z-index: 5;
    font-family: var(--f-mono);
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--text-dim);
    writing-mode: vertical-rl;
    pointer-events: none;
    opacity: 0;
    animation: chip-in .64s var(--ease-out-expo) 1.4s forwards;
    font-size: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.side-label.side-l {
    left: clamp(18px, 6vw, 86px)
}

.side-label.side-r {
    right: clamp(18px, 6vw, 86px);
    transform: translateY(-50%)rotate(180deg)
}

.side-label span {
    color: var(--highlight);
    font-weight: 500
}

@keyframes chip-in {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.wordmark,
.monogram {
    transform: translateY(12px)
}

.monogram {
    animation-name: chip-in-monogram
}

@keyframes chip-in-monogram {
    0% {
        opacity: 0;
        transform: translate(-50%)translateY(12px)
    }
    to {
        opacity: 1;
        transform: translate(-50%)translateY(0)
    }
}

.avail-badge {
    animation-name: chip-in-avail;
    transform: rotate(180deg)translateY(12px)
}

@keyframes chip-in-avail {
    0% {
        opacity: 0;
        transform: rotate(180deg)translateY(12px)
    }
    to {
        opacity: 1;
        transform: rotate(180deg)translateY(0)
    }
}

.side-label.side-r {
    animation-name: chip-in-sideR;
    transform: translateY(calc(12px - 50%))rotate(180deg)
}

@keyframes chip-in-sideR {
    0% {
        opacity: 0;
        transform: translateY(calc(12px - 50%))rotate(180deg)
    }
    to {
        opacity: 1;
        transform: translateY(-50%)rotate(180deg)
    }
}

.awwwards-nominee {
    z-index: 60;
    opacity: 0;
    animation: chip-in-awwwards .72s var(--ease-out-expo) 1.5s forwards;
    transition: transform .28s var(--ease-out-expo), filter .28s var(--ease-out-expo);
    will-change: transform, opacity, filter;
    line-height: 0;
    display: block;
    position: fixed;
    top: clamp(180px, 24vh, 260px);
    left: 0;
    transform: translateY(12px)
}

.awwwards-nominee:before {
    content: "";
    background: var(--highlight);
    opacity: 0;
    width: 2px;
    transition: opacity .28s var(--ease-out-expo);
    pointer-events: none;
    position: absolute;
    inset: 0 auto 0 0;
    box-shadow: 0 0 12px #b917298c
}

.awwwards-nominee__svg {
    width: clamp(40px, 3.4vw, 53px);
    height: auto;
    display: block
}

.awwwards-nominee__bg {
    fill: #000
}

.awwwards-nominee__fg {
    fill: var(--ink)
}

.awwwards-nominee:hover {
    filter: drop-shadow(0 0 14px #b9172973);
    transform: translateY(0)translate(2px)
}

.awwwards-nominee:hover:before {
    opacity: 1
}

.awwwards-nominee:focus-visible {
    outline: 2px solid var(--highlight);
    outline-offset: 4px
}

@keyframes chip-in-awwwards {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (max-width:960px) {
    .awwwards-nominee {
        display: none
    }
}

@media (max-width:768px) {
    .portrait-stage {
        width: min(66svh, 96vw, 560px);
        height: min(88svh, 780px)
    }
    .wordmark {
        font-size: 24px
    }
    .monogram {
        width: 40px;
        height: 40px
    }
    .btn-store {
        padding: 8px 12px;
        font-size: 10px
    }
    .side-label {
        display: none
    }
}

@media (max-width:480px) {
    .wordmark {
        font-size: 20px
    }
    .wordmark .meta {
        font-size: 10px
    }
    .avail-badge {
        padding: 10px 6px;
        font-size: 9px
    }
}

.sr-only {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

body {
    font-family: var(--f-body)
}

main {
    z-index: 0;
    position: relative
}

.chapter {
    isolation: isolate;
    border-top: 1px solid #f3ede30d;
    flex-direction: column;
    gap: clamp(40px, 6vh, 96px);
    width: 100%;
    min-height: 100svh;
    padding: clamp(96px, 14svh, 200px) clamp(28px, 6vw, 120px);
    display: flex;
    position: relative;
    overflow: hidden
}

.chapter:before {
    content: attr(data-nr);
    font-family: var(--f-display);
    color: #0000;
    -webkit-text-stroke: 1px #f3ede30f;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    z-index: 0;
    font-size: clamp(80px, 14vw, 220px);
    font-weight: 800;
    line-height: .8;
    position: absolute;
    top: clamp(20px, 3vh, 36px);
    right: clamp(28px, 6vw, 120px)
}

.ch-head {
    font-family: var(--f-mono);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 1px dashed #b9172938;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding-bottom: 16px;
    font-size: 11px;
    display: flex
}

.ch-kicker {
    color: var(--text)
}

.ch-kicker .jp {
    color: var(--highlight);
    font-family: var(--f-jp);
    letter-spacing: 0
}

.ch-meta {
    color: var(--text-faint)
}

.ch-hero-line {
    font-family: var(--f-display);
    letter-spacing: -.025em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text);
    margin: 0;
    padding-top: .08em;
    font-weight: 800;
    line-height: 1
}

.ch-line {
    font-family: var(--f-display);
    letter-spacing: -.02em;
    color: var(--text);
    max-width: 18ch;
    margin: 0;
    font-size: clamp(36px, 6.2vw, 96px);
    font-weight: 800;
    line-height: .95
}

.ch-sub {
    font-family: var(--f-body);
    color: var(--text-dim);
    max-width: 44ch;
    margin: -28px 0 0;
    font-size: clamp(14px, 1.4vw, 18px)
}

.media-well,
.work-well,
.about-media .media-well {
    background: #f3ede305;
    border: 1px dashed #f3ede31f;
    border-radius: 10px;
    position: relative;
    overflow: hidden
}

.well-hint {
    font-family: var(--f-mono);
    letter-spacing: .28em;
    color: #f3ede340;
    place-items: center;
    font-size: 10px;
    display: grid;
    position: absolute;
    inset: 0
}

.ch-about .ch-hero-line {
    color: #0000;
    -webkit-text-stroke: 2px var(--highlight);
    font-size: clamp(60px, 12vw, 220px)
}

.about-grid {
    grid-template-columns: 1.3fr .7fr;
    align-items: start;
    gap: clamp(28px, 4vw, 64px);
    max-width: min(1080px, 78%);
    display: grid
}

.about-copy p {
    font-family: var(--f-body);
    color: var(--text-dim);
    margin: 0 0 1em;
    font-size: clamp(15px, 1.35vw, 19px);
    line-height: 1.55
}

.about-copy .lede {
    color: var(--text);
    margin-bottom: 1.2em;
    font-size: clamp(18px, 1.8vw, 26px)
}

.about-copy em {
    color: var(--highlight);
    font-style: normal
}

.about-chips dl {
    font-family: var(--f-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    gap: 12px;
    margin: 0;
    font-size: 11px;
    display: grid
}

.about-chips dl>div {
    border-bottom: 1px dashed #f3ede314;
    grid-template-columns: 90px 1fr;
    gap: 16px;
    padding: 12px 0;
    display: grid
}

.about-chips dt {
    color: var(--text-faint);
    margin: 0
}

.about-chips dd {
    color: var(--text);
    letter-spacing: .08em;
    margin: 0
}

.about-chips .jp {
    color: var(--highlight);
    letter-spacing: 0;
    margin-left: 8px;
    font-size: 13px
}

.about-chips .dot {
    background: var(--highlight);
    vertical-align: middle;
    width: 8px;
    height: 8px;
    box-shadow: 0 0 10px var(--highlight);
    animation: dot-blink 1.6s var(--ease-in-out) infinite;
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block
}

.ch-about .dragon-stage {
    aspect-ratio: 3/2;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    width: clamp(780px, 93vw, 1800px);
    animation: chip-in-dragon .9s var(--ease-out-expo) .6s forwards;
    position: absolute;
    top: clamp(-80px, -6vh, -40px);
    left: 50%;
    transform: translate(-50%)translateY(12px)
}

@keyframes chip-in-dragon {
    0% {
        opacity: 0;
        transform: translate(-50%)translateY(12px)
    }
    to {
        opacity: 1;
        transform: translate(-50%)translateY(0)
    }
}

.ch-about .dragon-stage canvas,
.ch-about .dragon-stage .dragon-fallback {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.ch-about .dragon-stage canvas {
    z-index: 2;
    display: block
}

.ch-about .dragon-stage .dragon-fallback {
    z-index: 1
}

.ch-about .dragon-stage .dragon-fallback img {
    object-fit: contain;
    object-position: center center;
    will-change: opacity;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.ch-about .dragon-stage .dragon-base {
    opacity: .7;
    filter: drop-shadow(0 0 28px #8b0f1d2e);
    transition: opacity .56s var(--ease-out-expo)
}

.ch-about .dragon-stage .dragon-reveal {
    opacity: 0;
    filter: drop-shadow(0 0 40px #b9172952);
    transition: opacity .64s var(--ease-out-expo)
}

.ch-about .dragon-stage .dragon-hover-zone {
    z-index: 3;
    pointer-events: auto;
    cursor: default;
    background: 0 0;
    position: absolute;
    inset: 0
}

.ch-about .dragon-stage:not(.webgl-on) .dragon-hover-zone:hover~.dragon-fallback .dragon-reveal,
.ch-about .dragon-stage:not(.webgl-on):hover .dragon-reveal {
    opacity: .9
}

.ch-about .dragon-stage:not(.webgl-on) .dragon-hover-zone:hover~.dragon-fallback .dragon-base,
.ch-about .dragon-stage:not(.webgl-on):hover .dragon-base {
    opacity: .08
}

.ch-about .dragon-stage.webgl-on .dragon-fallback {
    opacity: 0
}

@media (hover:none) {
    .ch-about .dragon-stage:not(.webgl-on) .dragon-base {
        animation: 6s ease-in-out infinite dragon-base-breathe
    }
    .ch-about .dragon-stage:not(.webgl-on) .dragon-reveal {
        animation: 6s ease-in-out infinite dragon-reveal-breathe
    }
}

@keyframes dragon-base-breathe {
    0%,
    to {
        opacity: .7
    }
    50% {
        opacity: .22
    }
}

@keyframes dragon-reveal-breathe {
    0%,
    to {
        opacity: 0
    }
    50% {
        opacity: .72
    }
}

@media (max-width:900px) {
    .ch-about .about-grid {
        grid-template-columns: 1fr;
        max-width: 100%
    }
    .ch-about .dragon-stage {
        width: clamp(520px, 110vw, 980px);
        animation-delay: .8s;
        top: -8%;
        left: 50%
    }
    .ch-about .dragon-stage .dragon-base {
        opacity: .24
    }
}

.ch-journey {
    position: relative
}

.ch-journey .liberty-stage {
    aspect-ratio: 3/2;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    width: clamp(780px, 82vw, 1800px);
    animation: liberty-in .9s var(--ease-out-expo) .6s forwards;
    position: absolute;
    top: 50%;
    left: 58%;
    transform: translate(-50%, -50%)
}

@keyframes liberty-in {
    0% {
        opacity: 0;
        transform: translate(-50%, calc(12px - 50%))
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%)
    }
}

.ch-journey .liberty-stage canvas,
.ch-journey .liberty-stage .liberty-fallback {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.ch-journey .liberty-stage canvas {
    z-index: 2;
    display: block
}

.ch-journey .liberty-stage .liberty-fallback {
    z-index: 1
}

.ch-journey .liberty-stage .liberty-fallback img {
    object-fit: contain;
    object-position: center center;
    will-change: opacity;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.ch-journey .liberty-stage .liberty-base {
    opacity: .42;
    filter: drop-shadow(0 0 28px #8b0f1d2e);
    transition: opacity .56s var(--ease-out-expo)
}

.ch-journey .liberty-stage .liberty-reveal {
    opacity: 0;
    filter: drop-shadow(0 0 40px #b9172952);
    transition: opacity .56s var(--ease-out-expo)
}

.ch-journey .liberty-stage .liberty-hover-zone {
    z-index: 4;
    pointer-events: auto;
    cursor: crosshair;
    background: 0 0;
    width: 80%;
    height: 84%;
    position: absolute;
    top: 8%;
    left: 10%
}

.ch-journey .liberty-stage:not(.webgl-on) .liberty-hover-zone:hover~.liberty-fallback .liberty-reveal,
.ch-journey .liberty-stage:not(.webgl-on):hover .liberty-reveal {
    opacity: .9
}

.ch-journey .liberty-stage:not(.webgl-on) .liberty-hover-zone:hover~.liberty-fallback .liberty-base,
.ch-journey .liberty-stage:not(.webgl-on):hover .liberty-base {
    opacity: .08
}

.ch-journey .liberty-stage.webgl-on .liberty-fallback {
    opacity: 0
}

.ch-journey .ch-head,
.ch-journey .pull-quote,
.ch-journey .road-rail {
    z-index: 3;
    position: relative
}

@media (hover:none) {
    .ch-journey .liberty-stage:not(.webgl-on) .liberty-base {
        animation: 6s ease-in-out infinite liberty-base-breathe
    }
    .ch-journey .liberty-stage:not(.webgl-on) .liberty-reveal {
        animation: 6s ease-in-out infinite liberty-reveal-breathe
    }
}

@keyframes liberty-base-breathe {
    0%,
    to {
        opacity: .6
    }
    50% {
        opacity: .18
    }
}

@keyframes liberty-reveal-breathe {
    0%,
    to {
        opacity: 0
    }
    50% {
        opacity: .72
    }
}

@media (max-width:900px) {
    .ch-journey .liberty-stage {
        width: clamp(420px, 108vw, 880px);
        animation-delay: .8s;
        top: 50%;
        left: 50%
    }
    .ch-journey .liberty-stage .liberty-base {
        opacity: .2
    }
}

.stat-grid {
    background: #f3ede30f;
    border: 1px solid #f3ede30f;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.stat {
    background: var(--bg);
    flex-direction: column;
    gap: 10px;
    min-height: clamp(280px, 36vh, 440px);
    padding: clamp(36px, 5vw, 72px) clamp(20px, 2.4vw, 36px);
    display: flex;
    position: relative;
    overflow: hidden
}

.stat:after {
    content: "";
    background: linear-gradient(90deg, var(--highlight) 0%, transparent 100%);
    transform-origin: 0;
    height: 2px;
    transition: transform .52s var(--ease-out-expo);
    position: absolute;
    inset: auto 0 0;
    transform: scaleX(0)
}

.stat:hover:after {
    transform: scaleX(1)
}

.stat-value {
    font-family: var(--f-display);
    letter-spacing: -.04em;
    color: var(--text);
    margin-top: auto;
    font-size: clamp(84px, 12vw, 220px);
    font-weight: 800;
    line-height: .85
}

.stat-value sup {
    color: var(--highlight);
    vertical-align: super;
    letter-spacing: 0;
    font-size: .4em
}

.stat-inf .stat-value {
    color: var(--highlight);
    justify-content: flex-start;
    align-items: center;
    margin-top: 0;
    margin-bottom: auto;
    padding-top: clamp(8px, 1.2vw, 20px);
    line-height: 1;
    display: flex
}

.stat-infinity {
    width: auto;
    height: clamp(84px, 12vw, 220px);
    color: var(--highlight);
    filter: drop-shadow(0 0 32px #b9172973);
    display: block
}

.stat-label {
    font-family: var(--f-body);
    letter-spacing: .02em;
    text-transform: none;
    color: var(--text);
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 600
}

.stat-note {
    font-family: var(--f-body);
    color: var(--text-dim);
    max-width: 20ch;
    font-size: 14px
}

.ch-work .ch-hero-line {
    font-size: clamp(60px, 11vw, 180px)
}

.work-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.work-row {
    transition: background .32s var(--ease-out-expo);
    border-top: 1px solid #f3ede314;
    grid-template-columns: auto 1fr 1.2fr;
    align-items: center;
    gap: clamp(24px, 3vw, 56px);
    padding: clamp(22px, 3vh, 40px) 0;
    display: grid;
    position: relative
}

.work-row:last-child {
    border-bottom: 1px solid #f3ede314
}

.work-nr {
    font-family: var(--f-display);
    color: var(--text-faint);
    letter-spacing: -.02em;
    min-width: 1.6ch;
    font-size: clamp(28px, 3.2vw, 52px);
    font-weight: 800
}

.work-title {
    font-family: var(--f-display);
    letter-spacing: -.02em;
    color: var(--text);
    transition: color .32s var(--ease-out-expo), letter-spacing .42s var(--ease-out-expo);
    margin: 0 0 6px;
    font-size: clamp(28px, 4vw, 64px);
    font-weight: 800;
    line-height: .95
}

.work-tag {
    font-family: var(--f-body);
    color: var(--text-dim);
    margin: 0 0 8px;
    font-size: clamp(13px, 1.1vw, 16px)
}

.work-year {
    font-family: var(--f-mono);
    letter-spacing: .3em;
    color: var(--text-faint);
    font-size: 10px
}

.work-well {
    aspect-ratio: 16/9;
    width: 100%
}

.work-counter {
    color: #0000;
    -webkit-text-stroke: 1.5px var(--highlight);
    opacity: 0;
    transition: opacity .32s var(--ease-out-expo), transform .42s var(--ease-out-expo);
    pointer-events: none;
    font-size: clamp(60px, 8vw, 140px);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%)translate(20px)
}

.work-row:hover .work-title {
    color: var(--highlight);
    letter-spacing: 0
}

.work-row:hover .work-counter {
    opacity: .6;
    transform: translateY(-50%)translate(0)
}

.work-all {
    font-family: var(--f-mono);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--highlight);
    border-bottom: 1px solid var(--highlight);
    transition: gap .22s var(--ease-out-expo);
    align-self: end;
    align-items: center;
    gap: 10px;
    margin-top: clamp(20px, 3vh, 40px);
    padding-bottom: 4px;
    font-size: 12px;
    display: inline-flex
}

.work-all:hover {
    gap: 16px
}

.ch-journey {
    justify-content: center
}

.pull-quote {
    max-width: 22ch;
    font-family: var(--f-body);
    letter-spacing: -.01em;
    color: var(--text);
    margin: 0;
    font-size: clamp(28px, 4.2vw, 68px);
    font-style: italic;
    font-weight: 600;
    line-height: 1.15
}

.pull-quote em {
    color: var(--highlight);
    font-style: italic
}

.road-rail {
    border-top: 1px dashed #b9172938;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(30px, 6vw, 80px);
    margin: 0;
    padding: clamp(24px, 4vh, 48px) 0 0;
    list-style: none;
    display: flex
}

.road-rail li {
    font-family: var(--f-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-dim);
    align-items: center;
    gap: 12px;
    font-size: 11px;
    display: flex
}

.road-rail .dot {
    background: #f3ede34d;
    border-radius: 50%;
    width: 10px;
    height: 10px
}

.road-rail .road-place {
    font-family: var(--f-display);
    letter-spacing: .04em;
    color: var(--text);
    font-size: clamp(16px, 1.6vw, 22px)
}

.road-rail .road-year {
    color: var(--text-faint)
}

.road-rail .is-now .dot {
    background: var(--highlight);
    box-shadow: 0 0 14px var(--highlight);
    animation: dot-blink 1.6s var(--ease-in-out) infinite
}

.road-rail .is-now .road-place {
    color: var(--highlight)
}

.ch-manifesto {
    justify-content: center
}

.manifesto-head {
    font-family: var(--f-display);
    letter-spacing: -.02em;
    color: var(--text);
    margin: 0;
    font-size: clamp(28px, 3.4vw, 56px);
    font-weight: 800;
    line-height: 1
}

.manifesto-head .manifesto-jp {
    font-family: var(--f-jp);
    color: var(--highlight);
    letter-spacing: 0;
    opacity: .92;
    margin-left: .35em;
    font-size: .7em;
    font-weight: 400;
    line-height: 1;
    display: inline-block;
    transform: translateY(-.05em)
}

.manifesto-quote {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative
}

.manifesto-quote blockquote {
    margin: 0;
    padding: 0
}

.manifesto-quote p {
    font-family: var(--f-body);
    letter-spacing: -.01em;
    color: var(--text);
    margin: 0;
    font-size: clamp(28px, 4.6vw, 84px);
    font-style: italic;
    font-weight: 500;
    line-height: 1.18
}

.manifesto-quote em {
    color: var(--highlight);
    font-style: italic
}

.manifesto-quote .mq-open {
    font-family: var(--f-display);
    color: var(--highlight);
    opacity: .3;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    font-size: clamp(120px, 13vw, 220px);
    font-weight: 800;
    line-height: .6;
    position: absolute;
    top: clamp(-48px, -6vh, -24px);
    left: clamp(-12px, -1vw, -4px)
}

.manifesto-quote .mq-close {
    display: none
}

.manifesto-quote .mq-attrib {
    font-family: var(--f-mono);
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--text-faint);
    align-items: center;
    gap: 18px;
    margin-top: clamp(28px, 3vh, 48px);
    font-size: 11px;
    display: flex
}

.manifesto-quote .mq-rule {
    background: #b9172966;
    flex: 0 0 clamp(40px, 6vw, 88px);
    height: 1px
}

.manifesto-quote .mq-attrib .mq-rule+.mq-sign+.mq-rule {
    display: none
}

.manifesto-quote .mq-sign {
    white-space: nowrap
}

.manifesto-quote .mq-sign .jp {
    color: var(--highlight);
    font-family: var(--f-jp);
    letter-spacing: 0;
    margin: 0 6px
}

.ch-cta {
    justify-content: center;
    align-items: center;
    min-height: auto;
    padding: clamp(36px, 6vh, 72px) clamp(24px, 6vw, 96px)
}

.ch-cta:before {
    display: none
}

.cta-marquees {
    z-index: 0;
    pointer-events: none;
    flex-direction: column;
    justify-content: center;
    gap: clamp(12px, 2vh, 28px);
    display: flex;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.cta-mq {
    width: 160vmax;
    font-family: var(--f-display);
    letter-spacing: -.025em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #0000;
    -webkit-text-stroke: 1.5px #f3ede333;
    align-items: center;
    font-size: clamp(56px, 10vw, 180px);
    font-weight: 800;
    line-height: 1;
    display: flex;
    position: relative;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%)
}

.cta-mq-2 {
    color: var(--highlight);
    -webkit-text-stroke: 0;
    opacity: .14
}

.cta-mq-track {
    will-change: transform;
    gap: .6em;
    padding-inline: .4em;
    display: flex
}

.cta-mq-track>span {
    align-items: center;
    display: inline-flex
}

.cta-mq-track .sep {
    opacity: .6;
    background: currentColor;
    border-radius: 50%;
    width: .3em;
    height: .3em;
    margin: 0 .4em;
    display: inline-block
}

.cta-mq .jp {
    font-family: var(--f-jp)
}

.cta-btn {
    z-index: 1;
    background: var(--highlight);
    color: #0a0a0a;
    font-family: var(--f-body);
    letter-spacing: .01em;
    text-transform: none;
    transition: transform .28s var(--ease-out-expo), box-shadow .28s var(--ease-out-expo);
    border-radius: 999px;
    align-items: center;
    gap: 14px;
    padding: clamp(18px, 2.4vh, 28px) clamp(28px, 3.6vw, 48px);
    font-size: clamp(14px, 1.4vw, 20px);
    font-weight: 600;
    display: inline-flex;
    position: relative;
    box-shadow: 0 20px 60px #b9172966
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 80px #b917298c
}

.cta-arrow {
    font-size: 1.3em;
    transform: rotate(45deg)
}

.ch-contact {
    justify-content: flex-start;
    gap: clamp(24px, 3.4vh, 48px);
    min-height: 0;
    padding-top: clamp(56px, 8svh, 120px);
    padding-bottom: clamp(40px, 6svh, 80px);
    overflow: visible
}

.ch-contact .ch-hero-line {
    color: var(--text);
    line-height: .88
}

.ch-hero-line--bounded {
    text-align: center;
    letter-spacing: -.02em;
    white-space: normal;
    box-sizing: border-box;
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: 32px;
    font-size: 88px;
    line-height: .95
}

.contact-email {
    font-family: var(--f-display);
    letter-spacing: -.03em;
    color: var(--highlight);
    white-space: nowrap;
    transition: color .28s var(--ease-out-expo);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    display: block
}

.contact-email:hover {
    color: var(--text)
}

.contact-socials {
    border-top: 1px dashed #f3ede324;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.contact-socials li {
    border-bottom: 1px dashed #f3ede324
}

.contact-socials a {
    transition: color .28s var(--ease-out-expo);
    border: 0;
    border-radius: 0;
    grid-template-columns: minmax(160px, 22%) 1fr auto;
    align-items: baseline;
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(22px, 3.6vh, 40px) 0;
    display: grid
}

.soc-label {
    font-family: var(--f-display);
    letter-spacing: -.01em;
    color: var(--text);
    text-transform: uppercase;
    transition: color .28s var(--ease-out-expo);
    font-size: clamp(28px, 3.4vw, 52px);
    font-weight: 800;
    line-height: 1
}

.soc-note {
    font-family: var(--f-body);
    color: var(--text-dim);
    max-width: 52ch;
    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 400;
    line-height: 1.5
}

.soc-arrow {
    font-family: var(--f-display);
    color: var(--text-faint);
    transition: color .28s var(--ease-out-expo), transform .36s var(--ease-out-expo);
    font-size: clamp(22px, 2.4vw, 36px);
    font-weight: 800;
    display: inline-block
}

.contact-socials a:hover .soc-label {
    color: var(--highlight)
}

.contact-socials a:hover .soc-arrow {
    color: var(--highlight);
    transform: translate(6px, -6px)
}

.site-foot {
    font-family: var(--f-mono);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--text-faint);
    border-top: 1px dashed #b9172938;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: clamp(24px, 4vh, 48px);
    font-size: 10px;
    display: flex
}

.site-foot .jp {
    color: var(--highlight);
    font-family: var(--f-jp);
    letter-spacing: 0;
    margin: 0 6px
}

.book-intro {
    font-family: var(--f-body);
    color: var(--text-dim);
    text-align: center;
    max-width: 58ch;
    margin: 0 auto;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.55
}

.book-frame {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: radial-gradient(120% 80% at 50% 0, #b9172914 0%, #0000 70%), linear-gradient(#14141499 0%, #0a0a0ad9 100%);
    border: 1px solid #f3ede314;
    width: min(1040px, 100%);
    margin: 0 auto;
    padding: clamp(20px, 2.4vw, 36px);
    position: relative
}

.book-frame-ornament {
    pointer-events: none;
    position: absolute;
    inset: 0
}

.book-frame-corner {
    border: 1px solid var(--highlight);
    opacity: .85;
    width: 18px;
    height: 18px;
    position: absolute
}

.book-frame-corner--tl {
    border-bottom: 0;
    border-right: 0;
    top: -1px;
    left: -1px
}

.book-frame-corner--tr {
    border-bottom: 0;
    border-left: 0;
    top: -1px;
    right: -1px
}

.book-frame-corner--bl {
    border-top: 0;
    border-right: 0;
    bottom: -1px;
    left: -1px
}

.book-frame-corner--br {
    border-top: 0;
    border-left: 0;
    bottom: -1px;
    right: -1px
}

.book-embed {
    background: #0a0a0a;
    width: 100%;
    position: relative
}

.book-embed:not(:has(iframe)) {
    min-height: 640px
}

.book-embed:not(:has(iframe)):before {
    content: "Loading calendar…";
    font-family: var(--f-mono);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--text-faint);
    pointer-events: none;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    display: flex;
    position: absolute;
    inset: 0
}

.book-embed iframe {
    background: 0 0;
    border: 0;
    display: block;
    width: 100% !important
}

.book-noscript {
    height: 100%;
    font-family: var(--f-body);
    color: var(--text-dim);
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 24px;
    font-size: 15px;
    display: flex
}

.book-noscript a {
    color: var(--highlight)
}

.book-fallback {
    font-family: var(--f-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-faint);
    transition: color .28s var(--ease-out-expo);
    border-top: 1px dashed #f3ede314;
    justify-content: space-between;
    align-items: center;
    margin-top: clamp(12px, 1.4vw, 20px);
    padding: 10px 2px 0;
    font-size: 11px;
    text-decoration: none;
    display: flex
}

.book-fallback:hover {
    color: var(--highlight)
}

.book-fallback-link {
    color: var(--text)
}

.book-fallback:hover .book-fallback-link {
    color: var(--highlight)
}

.book-aside {
    z-index: 2;
    flex-direction: column;
    gap: clamp(16px, 2vw, 24px);
    width: min(1040px, 100%);
    margin: clamp(20px, 3vh, 36px) auto 0;
    display: flex;
    position: relative
}

#ch-contact.webgl-on .book-aside:before {
    content: "";
    z-index: -1;
    -webkit-backdrop-filter: blur(8px)saturate(1.05);
    pointer-events: none;
    background: linear-gradient(#0a0a0a8c 0%, #0a0a0ad1 100%);
    border-radius: 4px;
    position: absolute;
    inset: -16px -20px
}

html[data-tier=mid] #ch-contact.webgl-on .book-aside:before,
html[data-tier=low] #ch-contact.webgl-on .book-aside:before {
    -webkit-backdrop-filter: none
}

.book-aside-head {
    font-family: var(--f-mono);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--text-faint);
    border-bottom: 1px dashed #f3ede324;
    align-items: baseline;
    gap: 14px;
    padding-bottom: clamp(14px, 1.6vw, 22px);
    font-size: 11px;
    display: flex
}

.book-aside-head .jp {
    font-family: var(--f-jp);
    letter-spacing: 0;
    color: var(--highlight);
    font-size: 18px
}

.book-email {
    transition: color .28s var(--ease-out-expo);
    border-bottom: 1px dashed #f3ede324;
    grid-template-columns: minmax(120px, 18%) 1fr auto;
    align-items: baseline;
    gap: clamp(16px, 3vw, 48px);
    padding: clamp(18px, 2.4vh, 28px) 0;
    text-decoration: none;
    display: grid
}

.book-email-label {
    font-family: var(--f-mono);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-size: 11px
}

.book-email-addr {
    font-family: var(--f-display);
    letter-spacing: -.01em;
    color: var(--highlight);
    transition: color .28s var(--ease-out-expo);
    font-size: clamp(22px, 2.6vw, 38px);
    font-weight: 800;
    line-height: 1
}

.book-email-arrow {
    font-family: var(--f-display);
    color: var(--text-faint);
    transition: color .28s var(--ease-out-expo), transform .36s var(--ease-out-expo);
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 800
}

.book-email:hover .book-email-addr {
    color: var(--text)
}

.book-email:hover .book-email-arrow {
    color: var(--highlight);
    transform: translate(6px, -6px)
}

.ch-book .contact-socials {
    border-top: 0
}

.ch-book .contact-socials a {
    padding: clamp(16px, 2.4vh, 28px) 0
}

.ch-book .soc-label {
    font-size: clamp(22px, 2.6vw, 36px)
}

@media (max-width:640px) {
    .book-embed {
        min-height: 640px
    }
    .book-email {
        grid-template-columns: 1fr auto;
        gap: 12px
    }
    .book-email-label {
        grid-column: 1/-1
    }
}

.ch-kitsune {
    min-height: unset;
    color: #0a0a0a;
    background: #fbf7f0;
    border-top: 1px solid #0a0a0a14;
    border-bottom: 1px solid #0a0a0a14;
    padding: 0;
    overflow: visible
}

.ch-kitsune:before {
    color: #0000;
    -webkit-text-stroke: 1px #0a0a0a14
}

.kitsune-runway {
    width: 100%;
    height: 580vh;
    position: relative
}

.kitsune-stick {
    background: #fbf7f0;
    width: 100%;
    height: 100svh;
    padding: clamp(72px, 10vh, 120px) clamp(28px, 6vw, 120px) clamp(56px, 7vh, 96px);
    position: sticky;
    top: 0;
    overflow: visible
}

.kitsune-stick:before {
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at 8% 92%, #0a0a0a09, #0000 45%), radial-gradient(circle at 92% 8%, #b9172909, #0000 40%);
    position: absolute;
    inset: 0
}

.kitsune-head {
    font-family: var(--f-mono);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #0a0a0a8c;
    z-index: 3;
    border-bottom: 1px dashed #b9172952;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding-bottom: 12px;
    font-size: 11px;
    display: flex;
    position: absolute;
    top: clamp(22px, 3.2vh, 36px);
    left: clamp(28px, 6vw, 120px);
    right: clamp(28px, 6vw, 120px)
}

.kitsune-head .jp {
    color: var(--highlight);
    font-family: var(--f-jp);
    letter-spacing: .02em
}

.kitsune-head .kicker {
    color: #0a0a0a
}

.kitsune-head .meta {
    color: #0a0a0a61
}

.kitsune-stage {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative
}

.kitsune-canvas-wrap {
    aspect-ratio: 1176/1764;
    z-index: 1;
    will-change: transform, opacity;
    background: #fbf7f0;
    width: clamp(280px, 34vh, 480px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.kitsune-canvas-wrap canvas {
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0
}

.kitsune-canvas-wrap .kitsune-fallback {
    object-fit: contain;
    object-position: center;
    opacity: 1;
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    transition: opacity .5s;
    position: absolute;
    inset: 0
}

.kitsune-canvas-wrap.is-ready .kitsune-fallback {
    opacity: 0
}

.kitsune-story {
    pointer-events: none;
    z-index: 2;
    position: absolute;
    inset: 0
}

.kitsune-chapter {
    pointer-events: none;
    grid-template-columns: 1fr clamp(280px, 34vh, 480px) 1fr;
    align-items: center;
    gap: clamp(24px, 3vw, 72px);
    padding: 0 clamp(12px, 2vw, 48px);
    display: grid;
    position: absolute;
    inset: 0
}

.k-side {
    flex-direction: column;
    gap: clamp(16px, 2.2vh, 26px);
    max-width: 420px;
    display: flex
}

.k-side-left {
    text-align: right;
    grid-column: 1;
    justify-self: end;
    align-items: flex-end
}

.k-side-right {
    text-align: left;
    grid-column: 3;
    justify-self: start;
    align-items: flex-start
}

.js-enabled .kitsune-chapter {
    opacity: 1
}

.js-enabled .kitsune-chapter .k-side {
    opacity: 0;
    visibility: hidden
}

.k-eyebrow {
    align-items: center;
    gap: 16px;
    display: inline-flex
}

.k-side-left .k-eyebrow {
    flex-direction: row-reverse
}

.k-kanji {
    font-family: var(--f-jp);
    color: var(--highlight);
    background: #b9172914;
    flex-shrink: 0;
    padding: 4px 12px 6px;
    font-size: clamp(32px, 3.2vw, 52px);
    font-weight: 900;
    line-height: 1;
    display: inline-block
}

.k-side-left .k-kanji {
    border-right: 2px solid var(--highlight);
    border-left: 0
}

.k-side-right .k-kanji {
    border-left: 2px solid var(--highlight)
}

.k-tag {
    font-family: var(--f-mono);
    letter-spacing: .32em;
    text-transform: uppercase;
    color: #0a0a0a9e;
    font-size: 11px
}

.k-headline {
    font-family: var(--f-display);
    letter-spacing: -.025em;
    text-transform: uppercase;
    color: #0a0a0a;
    white-space: nowrap;
    margin: 0;
    font-size: clamp(36px, 4.6vw, 86px);
    font-weight: 800;
    line-height: .98
}

.k-body {
    font-family: var(--f-body);
    color: #0a0a0ab8;
    max-width: 34ch;
    margin: 0;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.5
}

.k-line {
    line-height: inherit;
    padding-bottom: .08em;
    display: block;
    overflow: hidden
}

.k-line-inner {
    will-change: transform;
    display: inline-block
}

.kitsune-outro {
    font-family: var(--f-mono);
    letter-spacing: .32em;
    text-transform: uppercase;
    color: #0a0a0a80;
    z-index: 3;
    opacity: .3;
    align-items: center;
    gap: 14px;
    font-size: 10px;
    display: flex;
    position: absolute;
    bottom: clamp(48px, 6vh, 80px);
    left: 50%;
    transform: translate(-50%)
}

.kitsune-outro .rule {
    background: #0a0a0a4d;
    width: 56px;
    height: 1px
}

@media (max-width:900px) {
    .kitsune-runway {
        height: 500vh
    }
    .kitsune-stick {
        padding: clamp(72px, 9vh, 96px) clamp(18px, 5vw, 32px) clamp(40px, 6vh, 64px)
    }
    .kitsune-canvas-wrap {
        width: min(32vh, 54vw, 260px);
        top: 26%
    }
    .kitsune-chapter {
        grid-template-rows: auto auto;
        grid-template-columns: 1fr;
        align-items: start;
        gap: clamp(10px, 1.6vh, 20px);
        padding: 54svh clamp(16px, 5vw, 28px) clamp(88px, 12vh, 120px)
    }
    .k-side,
    .k-side-left,
    .k-side-right {
        text-align: center;
        grid-area: auto/1;
        justify-self: center;
        align-items: center;
        max-width: 92vw
    }
    .k-side-left .k-eyebrow {
        flex-direction: row
    }
    .k-side-left .k-kanji {
        border-right: 0;
        border-left: 2px solid var(--highlight)
    }
    .k-headline {
        font-size: clamp(30px, 7.2vw, 48px)
    }
    .k-body {
        max-width: 38ch;
        margin-left: auto;
        margin-right: auto
    }
}

@media (max-width:480px) {
    .kitsune-runway {
        height: 440vh
    }
    .kitsune-canvas-wrap {
        width: min(28vh, 56vw, 220px);
        top: 24%
    }
    .kitsune-chapter {
        padding: 48svh clamp(14px, 5vw, 24px) clamp(80px, 11vh, 110px)
    }
    .kitsune-head {
        letter-spacing: .24em;
        font-size: 9px
    }
    .k-headline {
        font-size: clamp(26px, 7.6vw, 40px)
    }
    .k-kanji {
        padding: 3px 8px 5px;
        font-size: 26px
    }
}

.ch-hitomi {
    min-height: unset;
    color: #fbf7f0;
    background: #0a0a0a;
    border-top: 1px solid #fbf7f014;
    border-bottom: 1px solid #fbf7f014;
    padding: 0;
    overflow: visible
}

.ch-hitomi:before {
    color: #0000;
    -webkit-text-stroke: 1px #fbf7f014
}

.hitomi-runway {
    width: 100%;
    height: 300vh;
    position: relative
}

.hitomi-stick {
    background: #0a0a0a;
    width: 100%;
    height: 100svh;
    padding: clamp(72px, 10vh, 120px) clamp(28px, 6vw, 120px) clamp(56px, 7vh, 96px);
    position: sticky;
    top: 0;
    overflow: hidden
}

.hitomi-head {
    font-family: var(--f-mono);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #fbf7f0bf;
    z-index: 4;
    border-bottom: 1px dashed #b917298c;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding-bottom: 12px;
    font-size: 11px;
    display: flex;
    position: absolute;
    top: clamp(22px, 3.2vh, 36px);
    left: clamp(28px, 6vw, 120px);
    right: clamp(28px, 6vw, 120px)
}

.hitomi-head .jp {
    color: var(--highlight);
    font-family: var(--f-jp);
    letter-spacing: .02em
}

.hitomi-head .kicker {
    color: #fbf7f0
}

.hitomi-head .meta {
    color: #fbf7f09e
}

.hitomi-stage {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.hitomi-canvas-wrap {
    z-index: 1;
    will-change: transform, opacity;
    background: #0a0a0a;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.hitomi-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0
}

.hitomi-canvas-wrap .hitomi-fallback {
    object-fit: cover;
    object-position: center;
    opacity: 1;
    width: 100%;
    height: 100%;
    transition: opacity .5s;
    position: absolute;
    inset: 0
}

.hitomi-canvas-wrap.is-ready .hitomi-fallback {
    opacity: 0
}

.hitomi-overlay {
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(#0a0a0a38 0%, #0a0a0a9e 60%, #0a0a0ae0 100%), linear-gradient(#0a0a0a8c 0%, #0a0a0a2e 32% 68%, #0a0a0a99 100%);
    position: absolute;
    inset: 0
}

.hitomi-story {
    pointer-events: none;
    z-index: 3;
    position: absolute;
    inset: 0
}

.hitomi-chapter {
    pointer-events: none;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(32px, 6vw, 120px);
    padding: 0 clamp(32px, 8vw, 140px);
    display: grid;
    position: absolute;
    inset: 0
}

.h-side {
    text-shadow: 0 2px 24px #0a0a0a8c;
    flex-direction: column;
    gap: clamp(16px, 2.2vh, 26px);
    max-width: 420px;
    display: flex
}

.h-side-left {
    text-align: left;
    grid-column: 1;
    justify-self: start;
    align-items: flex-start
}

.h-side-right {
    text-align: right;
    grid-column: 2;
    justify-self: end;
    align-items: flex-end
}

.js-enabled .hitomi-chapter {
    opacity: 1
}

.js-enabled .hitomi-chapter .h-side {
    opacity: 0;
    visibility: hidden
}

.h-eyebrow {
    align-items: center;
    gap: 16px;
    display: inline-flex
}

.h-side-right .h-eyebrow {
    flex-direction: row-reverse
}

.h-kanji {
    font-family: var(--f-jp);
    color: var(--highlight);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: #b9172938;
    flex-shrink: 0;
    padding: 4px 12px 6px;
    font-size: clamp(32px, 3.2vw, 52px);
    font-weight: 900;
    line-height: 1;
    display: inline-block
}

.h-side-left .h-kanji {
    border-left: 2px solid var(--highlight)
}

.h-side-right .h-kanji {
    border-right: 2px solid var(--highlight);
    border-left: 0
}

.h-tag {
    font-family: var(--f-mono);
    letter-spacing: .32em;
    text-transform: uppercase;
    color: #fbf7f09e;
    font-size: 11px
}

.h-headline {
    font-family: var(--f-display);
    letter-spacing: -.025em;
    text-transform: uppercase;
    color: #fbf7f0;
    white-space: nowrap;
    margin: 0;
    font-size: clamp(32px, 4.2vw, 76px);
    font-weight: 800;
    line-height: .98
}

.h-body {
    font-family: var(--f-body);
    color: #fbf7f0db;
    max-width: 34ch;
    margin: 0;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.5
}

.h-line {
    line-height: inherit;
    padding-bottom: .08em;
    display: block;
    overflow: hidden
}

.h-line-inner {
    will-change: transform;
    display: inline-block
}

.hitomi-outro {
    font-family: var(--f-mono);
    letter-spacing: .32em;
    text-transform: uppercase;
    color: #fbf7f0b3;
    z-index: 4;
    opacity: .3;
    align-items: center;
    gap: 14px;
    font-size: 10px;
    display: flex;
    position: absolute;
    bottom: clamp(48px, 6vh, 80px);
    left: 50%;
    transform: translate(-50%)
}

.hitomi-outro .rule {
    background: #fbf7f073;
    width: 56px;
    height: 1px
}

@media (max-width:900px) {
    .hitomi-runway {
        height: 260vh
    }
    .hitomi-stick {
        padding: clamp(72px, 9vh, 96px) clamp(18px, 5vw, 32px) clamp(40px, 6vh, 64px)
    }
    .hitomi-canvas-wrap .hitomi-fallback {
        object-fit: contain;
        object-position: center
    }
    .hitomi-chapter {
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        align-items: end;
        gap: clamp(14px, 2vh, 24px);
        padding: 0 clamp(20px, 6vw, 40px) clamp(120px, 15vh, 180px)
    }
    .h-side,
    .h-side-left,
    .h-side-right {
        text-align: center;
        grid-area: auto/1;
        justify-self: center;
        align-items: center;
        max-width: 92vw
    }
    .h-side-left {
        grid-row: 1;
        align-self: start;
        padding-top: clamp(100px, 13vh, 150px)
    }
    .h-side-right {
        grid-row: 2
    }
    .h-side-right .h-eyebrow {
        flex-direction: row
    }
    .h-side-right .h-kanji {
        border-right: 0;
        border-left: 2px solid var(--highlight)
    }
    .h-headline {
        font-size: clamp(28px, 7vw, 52px)
    }
    .h-body {
        max-width: 40ch;
        margin-left: auto;
        margin-right: auto
    }
}

@media (max-width:480px) {
    .hitomi-runway {
        height: 220vh
    }
    .hitomi-head {
        letter-spacing: .24em;
        font-size: 9px
    }
    .h-headline {
        font-size: clamp(24px, 7vw, 36px)
    }
    .h-kanji {
        padding: 3px 8px 5px;
        font-size: 26px
    }
}

.chapter-rail {
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    animation: chip-in .64s var(--ease-out-expo) 1.4s forwards;
    position: fixed;
    top: 50%;
    left: clamp(12px, 2vw, 28px);
    transform: translateY(-50%)
}

.chapter-rail ol {
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.chapter-rail li {
    font-family: var(--f-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-faint);
    transition: color .26s var(--ease-out-expo);
    font-size: 10px
}

.chapter-rail li>a {
    color: inherit;
    cursor: pointer;
    pointer-events: auto;
    border-radius: 2px;
    outline: none;
    align-items: center;
    gap: 10px;
    margin: -4px -6px;
    padding: 4px 6px;
    text-decoration: none;
    display: flex
}

.chapter-rail li>a:hover .ch-num,
.chapter-rail li>a:focus-visible .ch-num {
    color: var(--highlight)
}

.chapter-rail li>a:hover .ch-label,
.chapter-rail li>a:focus-visible .ch-label {
    opacity: 1
}

.chapter-rail li>a:focus-visible {
    box-shadow: 0 0 0 1px var(--highlight)
}

.chapter-rail .ch-num {
    font-family: var(--f-jp);
    color: #f3ede340;
    transition: color .26s var(--ease-out-expo);
    font-size: 15px
}

.chapter-rail .ch-label {
    opacity: 0;
    transition: opacity .26s var(--ease-out-expo)
}

.chapter-rail li.is-active {
    color: var(--text)
}

.chapter-rail li.is-active .ch-num {
    color: var(--highlight)
}

.chapter-rail li.is-active .ch-label {
    opacity: 1
}

.js-split .char,
.js-split .word {
    display: inline-block
}

.js-split .word {
    white-space: nowrap
}

.js-split .char-wrap {
    display: inline-grid;
    overflow: hidden
}

.is-scroll-reveal em {
    font-style: italic
}

.is-scroll-reveal .word em {
    color: inherit
}

html:not(.js-enabled) [data-scroll-reveal] .word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important
}

@media (prefers-reduced-motion:reduce) {
    [data-scroll-reveal] .word {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important
    }
}

.js-enabled .wordmark {
    opacity: 1;
    animation: none;
    transform: none
}

.chapter .ch-head,
.chapter>h2,
.chapter>.ch-sub,
.chapter>.about-grid>*,
.chapter>.stat-grid,
.chapter>.work-list,
.chapter>.work-all,
.chapter>.pull-quote,
.chapter>.road-rail,
.chapter>.manifesto-list,
.chapter>.contact-email,
.chapter>.contact-socials,
.chapter>.site-foot {
    will-change: transform, opacity
}

.js-enabled .chapter .ch-head,
.js-enabled .chapter>.ch-sub,
.js-enabled .chapter>.about-grid>*,
.js-enabled .chapter>.stat-grid .stat,
.js-enabled .chapter>.work-list .work-row,
.js-enabled .chapter>.work-all,
.js-enabled .chapter>.road-rail,
.js-enabled .chapter>.manifesto-list li,
.js-enabled .chapter>.contact-socials li,
.js-enabled .chapter>.site-foot {
    opacity: 0;
    transform: translateY(28px)
}

@media (max-width:960px) {
    .about-grid {
        grid-template-columns: 1fr
    }
    .about-media .media-well {
        aspect-ratio: 16/10;
        max-width: 520px
    }
    .stat-grid {
        grid-template-columns: repeat(2, 1fr)
    }
    .manifesto-list,
    .contact-socials {
        grid-template-columns: 1fr
    }
    .work-row {
        grid-template-columns: auto 1fr
    }
    .work-well {
        grid-column: 1/-1
    }
    .chapter-rail {
        display: none
    }
}

@media (max-width:560px) {
    .stat-grid {
        grid-template-columns: 1fr
    }
    .road-rail {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px
    }
    .site-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }
}

@media (max-width:1024px) {
    .ch-contact .ch-hero-line--bounded {
        padding-inline: 24px;
        font-size: 64px
    }
}

@media (max-width:720px) {
    .ch-contact .ch-hero-line--bounded {
        padding-inline: 20px;
        font-size: 48px
    }
}

@media (max-width:480px) {
    .ch-contact .ch-hero-line--bounded {
        padding-inline: 16px;
        font-size: 36px
    }
}

.drawer-scrim {
    z-index: 49;
    transition: background .52s var(--ease-out-expo);
    pointer-events: none;
    background: #0a0a0a00;
    position: fixed;
    inset: 0
}

.drawer-scrim[data-open=true] {
    pointer-events: auto;
    background: #0a0a0a6b
}

.drawer {
    z-index: 50;
    pointer-events: none;
    visibility: hidden;
    will-change: transform, opacity;
    position: fixed;
    inset: 0
}

.drawer[data-open=true] {
    visibility: visible;
    pointer-events: auto
}

.drawer-mask {
    pointer-events: none;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0
}

.drawer-content {
    isolation: isolate;
    grid-template-rows: auto 1fr auto;
    gap: clamp(24px, 3vw, 56px);
    width: 65vw;
    max-width: 1100px;
    height: 100vh;
    padding: clamp(40px, 5.5vw, 96px) clamp(28px, 4.2vw, 84px);
    display: grid;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden
}

.drawer-strips {
    pointer-events: none;
    z-index: 0;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.drawer-strips i {
    transform-origin: top;
    width: 1px;
    transition: transform .9s var(--ease-out-expo);
    background: linear-gradient(#b917298c 0%, #b9172900 100%);
    transition-delay: .12s;
    position: absolute;
    top: 0;
    transform: scaleY(0)
}

.drawer[data-open=true] .drawer-strips i {
    transform: scaleY(1)
}

.drawer-strips i:first-child {
    height: 40%;
    transition-delay: .14s;
    left: 18%
}

.drawer-strips i:nth-child(2) {
    background: linear-gradient(#b91729d9 0%, #8b0f1d00 100%);
    width: 2px;
    height: 72%;
    transition-delay: .22s;
    left: 34%
}

.drawer-strips i:nth-child(3) {
    height: 58%;
    transition-delay: .3s;
    left: 52%
}

.drawer-strips i:nth-child(4) {
    background: linear-gradient(#8b0f1db3 0%, #8b0f1d00 100%);
    width: 2px;
    height: 88%;
    transition-delay: .38s;
    left: 71%
}

.drawer-strips i:nth-child(5) {
    height: 46%;
    transition-delay: .46s;
    left: 86%
}

.drawer-head {
    z-index: 1;
    color: var(--text-dim);
    font-family: var(--f-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    display: flex;
    position: relative
}

.drawer-head .jp {
    font-family: var(--f-jp);
    color: var(--highlight);
    letter-spacing: 0;
    margin-right: 8px
}

.drawer-nav {
    z-index: 1;
    align-self: center;
    width: 100%;
    position: relative
}

.drawer-nav ol {
    flex-direction: column;
    gap: clamp(8px, 1.1vw, 18px);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.drawer-nav li {
    opacity: 0;
    transition: opacity .72s var(--ease-out-expo), transform .72s var(--ease-out-expo);
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: clamp(14px, 2vw, 36px);
    display: grid;
    transform: translate(32px)
}

.drawer[data-open=true] .drawer-nav li {
    opacity: 1;
    transform: translate(0)
}

.drawer[data-open=true] .drawer-nav li:first-child {
    transition-delay: .22s
}

.drawer[data-open=true] .drawer-nav li:nth-child(2) {
    transition-delay: .3s
}

.drawer[data-open=true] .drawer-nav li:nth-child(3) {
    transition-delay: .38s
}

.drawer[data-open=true] .drawer-nav li:nth-child(4) {
    transition-delay: .46s
}

.drawer[data-open=true] .drawer-nav li:nth-child(5) {
    transition-delay: .54s
}

.drawer-nav .nav-jp {
    font-family: var(--f-jp);
    color: var(--highlight);
    letter-spacing: 0;
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1
}

.drawer-nav .nav-label {
    font-family: var(--f-display);
    letter-spacing: -.01em;
    color: var(--text);
    -webkit-text-stroke: 0;
    transition: color .22s var(--ease-out-expo), -webkit-text-stroke-color .22s var(--ease-out-expo);
    font-size: clamp(40px, 5.2vw, 88px);
    font-style: italic;
    font-weight: 800;
    line-height: .92;
    display: inline-block;
    position: relative
}

.drawer-nav .nav-label:before,
.drawer-nav .nav-label:after {
    content: attr(data-text);
    pointer-events: none;
    font: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    color: var(--text);
    -webkit-text-stroke: 0;
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity .52s var(--ease-out-expo), transform .52s var(--ease-out-expo), color .22s var(--ease-out-expo), -webkit-text-stroke-color .22s var(--ease-out-expo);
    position: absolute;
    inset: 0
}

.drawer-nav .nav-label:before {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    transform-origin: 0%
}

.drawer-nav .nav-label:after {
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    transform-origin: 0%
}

.drawer-nav .nav-num {
    font-family: var(--f-mono);
    color: var(--text-faint);
    letter-spacing: .22em;
    font-size: 13px
}

.drawer-nav a {
    display: contents
}

.drawer-nav a:hover .nav-label,
.drawer-nav a:focus-visible .nav-label {
    color: #0000;
    -webkit-text-stroke: 1.5px var(--highlight)
}

.drawer-nav a:hover .nav-label:before,
.drawer-nav a:focus-visible .nav-label:before {
    opacity: 1;
    transform: rotate(-2deg)translateY(-1px)
}

.drawer-nav a:hover .nav-label:after,
.drawer-nav a:focus-visible .nav-label:after {
    opacity: 1;
    transform: rotate(2deg)translateY(1px)
}

.drawer-nav a:focus-visible {
    outline: none
}

.drawer-nav a:focus-visible .nav-jp {
    text-underline-offset: 6px;
    text-decoration: underline
}

@media (prefers-reduced-motion:reduce) {
    .drawer-nav a:hover .nav-label:before,
    .drawer-nav a:focus-visible .nav-label:before,
    .drawer-nav a:hover .nav-label:after,
    .drawer-nav a:focus-visible .nav-label:after {
        opacity: 0;
        transform: none
    }
}

.drawer-meta {
    z-index: 1;
    color: var(--text-dim);
    font-family: var(--f-mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    border-top: 1px solid #ececec14;
    justify-content: space-between;
    align-items: center;
    padding-top: clamp(14px, 1.4vw, 24px);
    font-size: 11px;
    display: flex;
    position: relative
}

.drawer-meta ul {
    gap: clamp(14px, 1.8vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.drawer-meta a:hover {
    color: var(--highlight)
}

.drawer-meta .avail .dot {
    background: var(--highlight);
    width: 6px;
    height: 6px;
    box-shadow: 0 0 10px var(--highlight);
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block
}

.drawer-close {
    z-index: 2;
    width: 42px;
    height: 42px;
    color: var(--text);
    transition: border-color .22s var(--ease-out-expo), transform .22s var(--ease-out-expo);
    border: 1px solid #ececec2e;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: absolute;
    top: clamp(18px, 2vw, 32px);
    right: clamp(18px, 2vw, 32px)
}

.drawer-close:hover {
    border-color: var(--highlight);
    transform: rotate(90deg)
}

.drawer-close:focus-visible {
    outline: 2px solid var(--highlight);
    outline-offset: 3px
}

.btn-menu[aria-expanded=true] {
    border-color: var(--highlight)
}

.drawer--no-webgl .drawer-content {
    border-left: 1px solid var(--highlight);
    background: #0a0a0af5;
    box-shadow: -10px 0 40px #0009
}

@media (max-width:1100px) {
    .drawer-content {
        width: 78vw;
        padding: clamp(40px, 5vw, 72px) clamp(22px, 3.6vw, 56px)
    }
    .drawer-nav .nav-label {
        font-size: clamp(40px, 6.4vw, 72px)
    }
}

@media (max-width:768px) {
    .drawer-content {
        width: 100vw;
        max-width: none;
        padding: 72px 22px 34px
    }
    .drawer-nav .nav-label {
        font-size: clamp(40px, 13vw, 88px)
    }
    .drawer-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }
    .drawer-meta ul {
        flex-wrap: wrap;
        gap: 10px 16px
    }
}

.audio-toggle {
    z-index: 10001;
    appearance: none;
    -webkit-backdrop-filter: blur(10px)saturate(140%);
    color: #f3ede3;
    cursor: pointer;
    width: 40px;
    height: 40px;
    transition: transform .24s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)), border-color .24s ease, color .24s ease, background .24s ease, box-shadow .24s ease;
    background: #0a0a0a8c;
    border: 1px solid #f3ede32e;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: fixed;
    bottom: clamp(16px, 3vh, 28px);
    left: clamp(16px, 3vw, 28px)
}

.audio-toggle:hover {
    color: #ffdadf;
    border-color: #b9172999;
    transform: translateY(-1px);
    box-shadow: 0 0 18px #b9172959
}

.audio-toggle:focus-visible {
    outline-offset: 3px;
    outline: 1px solid #b91729
}

.audio-toggle svg {
    width: 18px;
    height: 18px;
    overflow: visible
}

.audio-toggle .ico-off,
.audio-toggle.is-muted .ico-on {
    display: none
}

.audio-toggle.is-muted .ico-off {
    display: block
}

.audio-toggle.is-muted {
    color: #f3ede38c
}

#preloader:not(.is-done)~.audio-toggle {
    animation: 2.4s ease-in-out infinite audio-pulse
}

@keyframes audio-pulse {
    0%,
    to {
        box-shadow: 0 0 #b9172900
    }
    50% {
        box-shadow: 0 0 0 6px #b917292e
    }
}

@media (max-width:640px) {
    .audio-toggle {
        width: 36px;
        height: 36px;
        bottom: clamp(14px, 3vh, 22px);
        left: auto;
        right: clamp(14px, 4vw, 22px)
    }
    .audio-toggle svg {
        width: 16px;
        height: 16px
    }
}

@media (prefers-reduced-motion:reduce) {
    .audio-toggle {
        transition: none;
        animation: none !important
    }
}

.ch-countries {
    min-height: unset;
    background: var(--bg);
    color: var(--text);
    padding: 0;
    position: relative;
    overflow: visible
}

.countries-runway {
    width: 100%;
    height: 400vh;
    position: relative
}

.countries-stick {
    isolation: isolate;
    background: var(--bg);
    width: 100%;
    height: 100svh;
    position: sticky;
    top: 0;
    overflow: hidden
}

.countries-cultural-bg {
    z-index: 0;
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.cultural-bg-layer {
    opacity: 0;
    mix-blend-mode: screen;
    will-change: opacity;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(#000 0% 34%, #0000 52%);
    mask-image: linear-gradient(#000 0% 34%, #0000 52%)
}

.countries-bg-topo {
    z-index: 0;
    opacity: .32;
    pointer-events: none;
    position: absolute;
    inset: 0
}

.countries-bg-topo svg {
    width: 100%;
    height: 100%;
    display: block
}

.countries-bg-seam {
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    background: linear-gradient(#0000 0%, #b9172900 8%, #b9172973 38%, #b9172999 50%, #b9172973 62%, #b9172900 92%, #0000 100%);
    width: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%)
}

.countries-head {
    font-family: var(--f-mono);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--text-dim);
    z-index: 5;
    border-bottom: 1px dashed #b9172952;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding-bottom: 12px;
    font-size: 11px;
    display: flex;
    position: absolute;
    top: clamp(68px, 8vh, 104px);
    left: clamp(28px, 6vw, 120px);
    right: clamp(28px, 6vw, 120px)
}

.countries-head .jp {
    color: var(--highlight);
    font-family: var(--f-jp);
    letter-spacing: .02em;
    margin-right: .55em
}

.countries-head .kicker {
    color: var(--text)
}

.countries-head .meta {
    color: var(--text-faint)
}

.countries-stage {
    z-index: 4;
    pointer-events: none;
    position: absolute;
    inset: 0
}

.countries-stage canvas,
.countries-stage .countries-fallback {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.countries-stage canvas {
    z-index: 2
}

.countries-stage .countries-fallback {
    z-index: 1
}

.countries-fallback__img {
    object-fit: contain;
    object-position: center bottom;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: opacity .52s var(--ease-out-expo);
    will-change: opacity;
    position: absolute;
    inset: 0
}

.countries-fallback__img.is-active {
    opacity: 1
}

.countries-stage.webgl-on .countries-fallback {
    opacity: calc(1 - var(--shader, 1))
}

.countries-stories {
    z-index: 3;
    pointer-events: none;
    position: absolute;
    inset: 0
}

.country-story {
    opacity: 0;
    will-change: opacity, filter;
    max-width: min(32rem, 38vw);
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.country-story[data-side=left] {
    text-align: left;
    left: clamp(28px, 6vw, 96px)
}

.country-story[data-side=right] {
    text-align: right;
    right: clamp(28px, 6vw, 96px)
}

.country-story[data-side=right] .country-story__meta {
    justify-content: flex-end
}

.country-story__meta {
    font-family: var(--f-mono);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--text-faint);
    align-items: baseline;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 11px;
    display: flex
}

.country-story__kanji {
    font-family: var(--f-jp);
    color: var(--highlight);
    letter-spacing: 0;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1
}

.country-story__title {
    font-family: var(--f-display);
    letter-spacing: -.02em;
    color: var(--ink);
    text-transform: uppercase;
    -webkit-hyphens: none;
    hyphens: none;
    margin: 0 0 14px;
    font-size: clamp(56px, 9vw, 128px);
    font-weight: 800;
    line-height: .88;
    display: block
}

.country-story__title .country-story__year {
    font-family: var(--f-mono);
    letter-spacing: .32em;
    color: var(--highlight);
    margin-top: 18px;
    font-size: clamp(12px, 1.1vw, 14px);
    display: block
}

.country-story__body {
    font-family: var(--f-body);
    color: var(--text-dim);
    max-width: 28ch;
    margin: 0;
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.55
}

.country-story[data-side=right] .country-story__body {
    margin-left: auto
}

.countries-progress {
    z-index: 40;
    pointer-events: none;
    opacity: 0;
    height: 3px;
    transition: opacity .32s var(--ease-out-expo);
    position: fixed;
    top: 0;
    left: 0;
    right: 0
}

.countries-progress.is-visible {
    opacity: 1
}

.countries-progress__track {
    -webkit-backdrop-filter: blur(8px);
    background: linear-gradient(90deg, #0a0a0ad9, #1a060ad9 50%, #0a0a0ad9);
    height: 100%;
    position: relative;
    overflow: hidden
}

.countries-progress__fill {
    width: calc(var(--progress, 0) * 100%);
    background: linear-gradient(90deg, #5a0711 0%, #8b0f1d 45%, #b91729 80%, #e2293c 100%);
    transition: width .14s linear;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 10px #b91729a6, 0 0 22px #b9172959
}

.countries-progress__fill:after {
    content: "";
    filter: blur(1px);
    opacity: .9;
    background: linear-gradient(90deg, #0000, #e2293c);
    width: 14px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0
}

.countries-progress__mark {
    pointer-events: none;
    background: #ececec42;
    width: 1px;
    position: absolute;
    top: 0;
    bottom: 0
}

.countries-progress__mark--1 {
    left: 33.333%
}

.countries-progress__mark--2 {
    left: 66.666%
}

@media (max-width:860px) {
    .countries-runway {
        height: 360vh
    }
    .countries-bg-seam {
        display: none
    }
    .countries-head {
        top: clamp(24px, 3.5vh, 52px)
    }
    .country-story {
        width: 100%;
        max-width: 92vw;
        top: clamp(88px, 11vh, 128px);
        bottom: auto;
        transform: translate(-50%);
        text-align: left !important;
        left: 50% !important;
        right: auto !important
    }
    .country-story[data-side=right] .country-story__meta {
        justify-content: flex-start
    }
    .country-story[data-side=right] .country-story__body {
        margin-left: 0
    }
    .country-story__meta {
        gap: 10px;
        margin-bottom: 10px;
        font-size: 10px
    }
    .country-story__kanji {
        font-size: clamp(18px, 2.6vw, 24px)
    }
    .country-story__title {
        overflow-wrap: break-word;
        word-break: normal;
        margin: 0 0 8px;
        font-size: clamp(32px, 9.2vw, 52px);
        line-height: .9
    }
    .country-story__title .country-story__year {
        letter-spacing: .28em;
        margin-top: 8px;
        font-size: clamp(10px, .9vw, 12px)
    }
    .country-story__body {
        max-width: 52ch;
        font-size: clamp(13px, 1vw, 15px);
        line-height: 1.45
    }
    .countries-stage {
        top: max(46vh, 320px);
        bottom: 0
    }
}

@media (max-width:520px),
(max-height:700px) and (max-width:860px) {
    .country-story {
        top: clamp(76px, 14vh, 104px)
    }
    .country-story__title {
        font-size: clamp(30px, 9vw, 48px)
    }
    .country-story__body {
        font-size: 12.5px;
        line-height: 1.4
    }
    .countries-stage {
        top: max(42vh, 282px)
    }
}

@media (prefers-reduced-motion:reduce) {
    .countries-runway {
        height: auto
    }
    .countries-stick {
        height: auto;
        padding: 80px 6vw 120px;
        position: static
    }
    .countries-stage {
        display: none
    }
    .countries-fallback__img {
        opacity: 1;
        transition: none
    }
    .countries-stories {
        gap: 80px;
        display: grid;
        position: relative;
        inset: auto
    }
    .country-story {
        opacity: 1;
        filter: none;
        max-width: 60ch;
        margin: 0 auto;
        position: static;
        transform: none
    }
    .countries-progress,
    .drawer-mask {
        display: none
    }
    .drawer-content {
        border-left: 1px solid var(--highlight);
        background: #0a0a0af7
    }
    .drawer-nav li {
        opacity: 1;
        transition: none;
        transform: none
    }
    .drawer-strips i {
        transition: none;
        transform: scaleY(1)
    }
    *,
    :before,
    :after {
        transition-duration: .01ms !important;
        animation: none !important
    }
    .portrait-stage {
        opacity: 1;
        transform: translate(-50%)
    }
    .wordmark,
    .monogram,
    .top-nav,
    .avail-badge,
    .side-label,
    .big-name {
        opacity: 1;
        transform: translateY(0)
    }
    .big-name {
        transform: translate(-50%)
    }
    .avail-badge {
        transform: rotate(180deg)
    }
    .side-label.side-r {
        transform: translateY(-50%)rotate(180deg)
    }
    .awwwards-nominee {
        opacity: 1;
        transform: translateY(0)
    }
    .bg-topo svg path {
        stroke-dashoffset: 0
    }
    .bg-rings svg path,
    .bg-mountains svg path {
        stroke-dashoffset: 0;
        animation: none
    }
    .petal {
        display: none
    }
    .bg-seam {
        animation: none
    }
    .js-enabled .chapter * {
        opacity: 1 !important;
        transform: none !important
    }
    .ch-about .dragon-stage {
        opacity: 1 !important;
        animation: none !important
    }
    .ch-about .dragon-stage canvas {
        display: none !important
    }
    .ch-about .dragon-stage .dragon-reveal {
        opacity: 0 !important;
        display: none !important
    }
    .ch-about .dragon-stage .dragon-hover-zone {
        display: none !important
    }
    .ch-journey .liberty-stage {
        opacity: 1 !important;
        animation: none !important
    }
    .ch-journey .liberty-stage canvas {
        display: none !important
    }
    .ch-journey .liberty-stage .liberty-reveal {
        opacity: 0 !important;
        display: none !important
    }
    .ch-journey .liberty-stage .liberty-hover-zone,
    #ch-contact .contact-fx {
        display: none !important
    }
    #ch-contact .bg-mountains {
        opacity: 1 !important
    }
}

.nf {
    isolation: isolate;
    width: 100%;
    min-height: 100svh;
    color: var(--text);
    grid-template-rows: auto 1fr auto;
    gap: clamp(16px, 3vh, 32px);
    padding: clamp(16px, 3vw, 32px) clamp(20px, 4vw, 56px);
    display: grid;
    position: relative;
    overflow: hidden
}

.nf-bg-topo {
    z-index: 0;
    pointer-events: none;
    opacity: .28;
    mix-blend-mode: screen;
    background-image: url(../assets/topographic.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(90% 70% at 50% 55%, #000 50%, #0000 95%);
    mask-image: radial-gradient(90% 70% at 50% 55%, #000 50%, #0000 95%)
}

.nf-seam {
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(#0000 0%, #b9172900 8%, #b9172961 26%, #b917299e 50%, #b9172961 74%, #0000 92%);
    width: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 0 18px #b9172952, 0 0 44px #8b0f1d38
}

.nf-top {
    z-index: 4;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    display: flex;
    position: relative
}

.nf-wordmark {
    font-family: var(--f-display);
    letter-spacing: .02em;
    color: var(--ink);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 800
}

.nf-wordmark:hover {
    color: var(--highlight)
}

.nf-status {
    font-family: var(--f-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-dim);
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex
}

.nf-status:before {
    content: "";
    background: var(--highlight);
    width: 6px;
    height: 6px;
    animation: nf-pulse 2.4s var(--ease-in-out) infinite;
    border-radius: 50%;
    box-shadow: 0 0 8px #b91729b3
}

@keyframes nf-pulse {
    0%,
    to {
        opacity: .7;
        transform: scale(1)
    }
    50% {
        opacity: 1;
        transform: scale(1.2)
    }
}

.nf-content {
    z-index: 3;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(14px, 2vh, 24px);
    padding: clamp(16px, 4vh, 48px) 0;
    display: flex;
    position: relative
}

.nf-kicker {
    font-family: var(--f-mono);
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--highlight);
    opacity: .85;
    margin: 0;
    font-size: 12px;
    font-weight: 600
}

.nf-number {
    font-family: var(--f-display);
    letter-spacing: -.02em;
    -webkit-user-select: none;
    user-select: none;
    margin: 0;
    font-size: clamp(7rem, 24vw, 20rem);
    font-weight: 800;
    line-height: .9;
    display: inline-block;
    position: relative
}

.nf-number-glyph {
    color: #0000;
    -webkit-text-stroke: 2px var(--highlight);
    text-stroke: 2px var(--highlight);
    filter: drop-shadow(0 0 12px #b9172940)drop-shadow(0 0 28px #8b0f1d33);
    transition: filter .32s var(--ease-out-expo);
    display: inline-block
}

.nf-number:hover .nf-number-glyph {
    filter: drop-shadow(0 0 18px #b9172973)drop-shadow(0 0 44px #8b0f1d4d)
}

.nf-canvas {
    pointer-events: none;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: opacity .36s var(--ease-out-expo);
    position: absolute;
    inset: 0
}

.nf-number.webgl-on .nf-number-glyph {
    -webkit-text-stroke: 0;
    text-stroke: 0;
    filter: none
}

.nf-number.webgl-on .nf-canvas {
    opacity: 1
}

.nf-meta {
    font-family: var(--f-display);
    letter-spacing: .04em;
    color: var(--text);
    margin: 0;
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 600
}

.nf-desc {
    max-width: 40ch;
    font-family: var(--f-body);
    color: var(--text-dim);
    margin: 0;
    font-size: clamp(14px, 1.15vw, 16px);
    font-weight: 400;
    line-height: 1.55
}

.nf-back {
    font-family: var(--f-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--surface-glass);
    border: 1px solid var(--surface-glass-bd);
    border-radius: var(--chip-radius);
    -webkit-backdrop-filter: var(--chip-backdrop);
    transition: transform .28s var(--ease-out-expo), background .28s var(--ease-out-expo), border-color .28s var(--ease-out-expo), box-shadow .28s var(--ease-out-expo);
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 12px 22px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex
}

.nf-back:hover {
    border-color: var(--highlight);
    background: #8b0f1d8c;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px #b917294d
}

.nf-back-arrow {
    transition: transform .28s var(--ease-out-expo);
    display: inline-block
}

.nf-back:hover .nf-back-arrow {
    transform: translate(-4px)
}

.nf-bottom {
    z-index: 4;
    font-family: var(--f-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-faint);
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    position: relative
}

.nf-bottom-jp {
    font-family: var(--f-jp);
    letter-spacing: .05em;
    text-transform: none
}

.grain {
    z-index: 20;
    pointer-events: none;
    opacity: var(--grain-opacity, .06);
    mix-blend-mode: var(--grain-blend, overlay);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.8'/></svg>");
    position: fixed;
    inset: 0
}

@media (max-width:640px) {
    .nf {
        padding: clamp(14px, 4vw, 20px) clamp(16px, 5vw, 24px)
    }
    .nf-number {
        font-size: clamp(5.5rem, 32vw, 10rem)
    }
    .nf-status {
        letter-spacing: .18em;
        font-size: 11px
    }
    .nf-bottom {
        letter-spacing: .16em;
        font-size: 10px
    }
}

@media (prefers-reduced-motion:reduce) {
    .nf-status:before {
        animation: none
    }
    .nf-number-glyph,
    .nf-back,
    .nf-back-arrow,
    .nf-canvas {
        transition: none
    }
}

/*$vite$:1*/