/* ============================================================ YUKIMURO — reset, typography, primitives ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--sans); font-size: var(--t-body); font-weight: 400; line-height: 1.62; color: var(--fg); background: var(--bg); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* clip, not hidden: hidden would make the scroll container and break position:sticky and the window scroll the JS relies on. */ overflow-x: clip; } ::selection { background: var(--fg); color: var(--bg); } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } :focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; } /* ============================================================ Typography ============================================================ */ .display { font-size: var(--t-display); font-weight: 500; line-height: 0.92; letter-spacing: var(--track-display); } .h1 { font-size: var(--t-h1); font-weight: 500; line-height: 0.98; letter-spacing: -0.028em; } .h2 { font-size: var(--t-h2); font-weight: 500; line-height: 1.1; letter-spacing: -0.022em; } .h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.28; letter-spacing: -0.012em; } .lead { font-size: var(--t-lead); line-height: 1.5; letter-spacing: -0.012em; color: var(--fg); } .body { max-width: var(--measure); color: var(--fg-2); } .body + .body { margin-top: 1.05em; } .body--wide { max-width: var(--measure-wide); } /* tracked caps — labels, data, eyebrows */ .caps { font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1.4; } .caps--wide { letter-spacing: var(--track-caps-wide); } .caps--mute { color: var(--fg-mute); } /* the secondary voice: glosses and pull quotes */ .gloss { font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: -0.005em; color: var(--fg-mute); } .jp { font-family: var(--jp); font-weight: 200; letter-spacing: 0.28em; font-feature-settings: "palt" 1; } .num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* quiet underline link */ .tlink { position: relative; display: inline-block; padding-bottom: 2px; } .tlink::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; opacity: 0.35; transform-origin: left; transition: opacity var(--d-fast) var(--ease), transform var(--d-base) var(--ease); } .tlink:hover::after { opacity: 1; transform: scaleX(0.42); } .rule { border: 0; border-top: 1px solid var(--rule); } .hair { border-top: 1px solid var(--rule-soft); } /* ============================================================ Layout primitives ============================================================ */ .wrap { padding-inline: var(--gutter); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); } .chapter { position: relative; padding-block: var(--chapter-pad-y); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; background: var(--bg); } .chapter--flush { padding-block: 0; min-height: 100vh; min-height: 100svh; } /* chapter eyebrow: number + name + japanese */ .chapter-mark { display: flex; align-items: baseline; gap: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule); margin-bottom: var(--stack-md); } .chapter-mark__no { color: var(--fg-mute); } .chapter-mark__jp { margin-left: auto; font-size: var(--t-small); color: var(--fg-mute); } /* ============================================================ The scroll is plain and native. There is no snap — CSS proximity snap captured from half a viewport out and executed as a jump — and no JS settle either. Do not add either back. ============================================================ */ /* ============================================================ Photography slots An that fails to load removes itself, exposing the placeholder beneath. Drop a file into images/ and it appears. ============================================================ */ .shot { position: relative; display: block; width: 100%; } .shot__frame { position: relative; overflow: hidden; aspect-ratio: var(--ar, 4 / 5); background: var(--shot-bg); clip-path: inset(0 0 0 0); } .shot__img[hidden] { display: none; } .shot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .shot__ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; color: var(--shot-fg); background: repeating-linear-gradient( -45deg, transparent 0 9px, currentColor 9px 9.5px ); opacity: 0.72; } .shot__ph span { font-size: var(--t-micro); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-mute); background: var(--shot-bg); align-self: flex-start; padding: 0.45em 0.7em; position: relative; z-index: 1; } .shot__ph::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--rule); } .shot__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; color: var(--fg-mute); } /* ============================================================ Reveals ============================================================ */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--d-base) var(--ease) var(--rd, 0ms), transform var(--d-base) var(--ease) var(--rd, 0ms); } [data-reveal].is-in { opacity: 1; transform: none; } /* masked line-by-line headline reveal */ .lines .line { display: block; overflow: hidden; /* the mask needs slack or tight line-height clips descenders */ padding-bottom: 0.09em; margin-bottom: -0.09em; } .lines .line > i { display: block; font-style: inherit; transform: translateY(105%); transition: transform var(--d-slow) var(--ease) var(--rd, 0ms); } .lines.is-in .line > i { transform: none; } /* image wipe: reveals downward, image counter-moves. The resting transform composes the parallax (--par, written per frame by scroll.js) with ONE constant scale. The wipe is an animation whose end state equals that resting declaration, so the two never fight and there is no handoff pop. */ .shot[data-wipe] .shot__img, .shot[data-wipe] .shot__ph { transform: translate3d(0, var(--par, 0%), 0) scale(1.12); } .shot[data-wipe] .shot__img { will-change: transform; } .shot[data-wipe] .shot__frame { clip-path: inset(0 0 100% 0); } .shot[data-wipe].is-in .shot__frame { clip-path: inset(0 0 0 0); animation: shot-wipe-frame var(--d-wipe) var(--ease) var(--rd, 0ms) backwards; } .shot[data-wipe].is-in .shot__img, .shot[data-wipe].is-in .shot__ph { animation: shot-wipe-img var(--d-wipe) var(--ease) var(--rd, 0ms) backwards; } @keyframes shot-wipe-frame { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } @keyframes shot-wipe-img { from { transform: translate3d(0, calc(var(--par, 0%) - 6%), 0) scale(1.18); } to { transform: translate3d(0, var(--par, 0%), 0) scale(1.12); } } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } .lines .line > i { transform: none; } .shot[data-wipe] .shot__frame { clip-path: none; animation: none; } .shot[data-wipe] .shot__img, .shot[data-wipe] .shot__ph { transform: none; animation: none; will-change: auto; } html { scroll-behavior: auto; } } /* ============================================================ Navigation ============================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--gutter); color: var(--fg); mix-blend-mode: normal; } .nav::before { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: 0; transition: opacity var(--d-base) var(--ease); z-index: -1; } .nav.is-stuck::before { opacity: 1; } .nav.is-stuck { border-bottom: 1px solid var(--rule-soft); } .wordmark { white-space: nowrap; display: inline-flex; align-items: baseline; gap: 0.7rem; font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-caps-wide); text-transform: uppercase; } .wordmark__jp { font-family: var(--jp); font-size: 0.9rem; letter-spacing: 0.2em; opacity: 0.75; } .nav__links { display: flex; gap: clamp(1.1rem, 2.6vw, 2.6rem); justify-self: center; } .nav__links a { transition: color var(--d-fast) var(--ease); } .nav__links a[aria-current="true"] { color: var(--fg); } .nav__links a[aria-current="true"]::after { opacity: 1; transform: scaleX(1); } .nav__right { justify-self: end; display: flex; align-items: center; gap: 1.5rem; } /* the reserve button — the only persistent action */ .reserve-btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.62rem 1.15rem; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg); transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); } .reserve-btn:hover { background: var(--fill); color: var(--on-fill); border-color: var(--fill); } .reserve-btn__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; transition: transform var(--d-base) var(--ease); } .reserve-btn:hover .reserve-btn__dot { transform: scale(1.9); } /* ============================================================ Chapter index rail ============================================================ */ .chapter-rail { position: fixed; right: calc(var(--gutter) * 0.55); top: 50%; transform: translateY(-50%); z-index: 55; display: flex; flex-direction: column; gap: 0.9rem; opacity: 0; transition: opacity var(--d-base) var(--ease); } .chapter-rail.is-on { opacity: 1; } .chapter-rail button { display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem; color: var(--fg-mute); padding: 2px 0; } .chapter-rail__label { font-size: var(--t-micro); letter-spacing: var(--track-caps); text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); white-space: nowrap; } .chapter-rail__tick { display: block; width: 14px; height: 1px; background: currentColor; transition: width var(--d-base) var(--ease), background-color var(--d-fast) var(--ease); } /* The label only appears on hover. Showing it for the current chapter puts it on top of the body copy, which runs to the edge. */ .chapter-rail button:hover .chapter-rail__label { opacity: 1; transform: none; } .chapter-rail__label { background: var(--bg); padding: 0.25em 0.5em; margin-right: -0.1em; } .chapter-rail button[aria-current="true"] { color: var(--fg); } .chapter-rail button[aria-current="true"] .chapter-rail__tick { width: 30px; } @media (max-width: 899px) { .chapter-rail { display: none; } } /* ============================================================ Custom cursor — a 6px dot, fine pointers only ============================================================ */ .cursor { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity var(--d-fast) linear; } .cursor__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #E8E9E6; transition: width var(--d-fast) var(--ease), height var(--d-fast) var(--ease), margin var(--d-fast) var(--ease); } .cursor__label { position: absolute; transform: translate(-50%, -50%); color: #E8E9E6; font-size: var(--t-micro); letter-spacing: var(--track-caps); text-transform: uppercase; opacity: 0; transition: opacity var(--d-fast) var(--ease); white-space: nowrap; } .cursor.is-on { opacity: 1; } .cursor.is-big .cursor__dot { width: 54px; height: 54px; margin: -27px 0 0 -27px; } .cursor.is-big .cursor__label { opacity: 1; } @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor { display: none; } }