/* Fonts and tokens.css are linked from each page's (not @import) so they download in parallel instead of one after another. */ /* Cross-document page transitions (Chrome, Edge, Safari 18+). Other browsers just navigate normally. */ @view-transition { navigation: auto; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; } body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--f-body); font-size: var(--step-0); line-height: 1.75; font-feature-settings: "palt" 0, "kern" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } p, h1, h2, h3, figure, dl, dd, ul, ol { margin: 0; } ::selection { background: var(--spot); color: var(--on-c1); } :focus-visible { outline: 3px solid var(--spot); outline-offset: 3px; } h1, h2, h3 { font-family: var(--f-display); font-weight: 400; color: var(--ink); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; } .wrap { width: min(100% - 2 * var(--gutter), 72rem); margin-inline: auto; } .prose { max-width: var(--measure); } .skip { position: absolute; left: -999px; top: 0; } .skip:focus { left: var(--sp-4); top: var(--sp-4); z-index: 100; background: var(--paper); padding: var(--sp-2) var(--sp-4); } /* Links: an ink underline that the spot colour draws across on hover */ .link { text-decoration: none; background: linear-gradient(var(--spot), var(--spot)) left bottom / 0% 2px no-repeat, linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: background-size var(--dur-2) var(--ease-out); } .link:hover, .link:focus-visible { background-size: 100% 2px, 100% 1px; } /* ── Navigation ─────────────────────────────────────────────── */ .site-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule-soft); padding-top: env(safe-area-inset-top, 0px); view-transition-name: site-nav; } .site-nav .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 3.75rem; gap: var(--sp-4); } .brand { font-family: var(--f-display); font-size: 1.05rem; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; } .nav-links { list-style: none; display: flex; gap: var(--sp-5); padding: 0; font-size: var(--step--1); } .nav-links a { text-decoration: none; color: var(--ink-2); } .nav-links a:hover { color: var(--ink); } .nav-links a[aria-current="page"] { color: var(--ink); } /* Reading progress, driven by scroll alone (no JS) where supported */ .progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 30; background: var(--spot); transform-origin: left; transform: scaleX(0); view-transition-name: progress; } @supports (animation-timeline: scroll()) { .progress { animation: grow linear both; animation-timeline: scroll(root); } @keyframes grow { to { transform: scaleX(1); } } } /* ── Home: cover ────────────────────────────────────────────── */ .cover { position: relative; overflow: clip; border-bottom: var(--panel-border) solid var(--rule); } .cover .wrap { position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); padding-block: clamp(4rem, 12vw, 9rem) clamp(3rem, 8vw, 6rem); } /* Speed lines: a radial burst of hairlines, masked so the centre stays clear */ .speedlines { position: absolute; inset: -40%; pointer-events: none; background: repeating-conic-gradient(from 0deg at 80% 44%, var(--ink) 0deg 0.22deg, transparent 0.22deg 2.4deg); -webkit-mask: radial-gradient(circle at 80% 44%, transparent 0 7%, #000 16%, transparent 38%); mask: radial-gradient(circle at 80% 44%, transparent 0 7%, #000 16%, transparent 38%); opacity: 0.16; } .cover-copy { position: relative; max-width: 50rem; } .cover h1 { font-size: clamp(2.8rem, 1.6rem + 4.4vw, 5.8rem); line-height: 1; letter-spacing: -0.02em; } .cover-intro { margin-top: var(--sp-6); max-width: 36rem; font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); } .cover-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); } /* Name in katakana, set vertically like a spine */ .spine { position: relative; writing-mode: vertical-rl; font-family: var(--f-display); font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem); line-height: 1; color: var(--ink); letter-spacing: 0.06em; align-self: center; margin-right: 3vw; } .spine span { display: inline-block; } .spine-note { writing-mode: horizontal-tb; font-family: var(--f-body); font-size: var(--step--1); color: var(--ink-3); margin-top: var(--sp-3); letter-spacing: 0; text-orientation: mixed; } @media (max-width: 720px) { .cover .wrap { grid-template-columns: 1fr; } .spine { writing-mode: horizontal-tb; font-size: 1.6rem; order: -1; margin: 0; } .spine-note { display: none; } } /* Buttons: flat ink blocks, no pills */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.8rem 1.3rem; font-family: var(--f-body); font-weight: 600; font-size: var(--step--1); text-decoration: none; border: var(--panel-border) solid var(--rule); color: var(--ink); position: relative; isolation: isolate; overflow: hidden; transition: color var(--dur-2) var(--ease-out); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-2) var(--ease-out); } .btn:hover, .btn:focus-visible { color: var(--paper); } .btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); } .btn-solid { background: var(--ink); color: var(--paper); } .btn-solid::before { background: var(--spot); } .btn-solid:hover, .btn-solid:focus-visible { color: var(--on-c1); } /* Page-load sequence on the cover: lines burst, headline lands, spine stamps down */ @media (prefers-reduced-motion: no-preference) { .js .speedlines { animation: burst 1.1s var(--ease-out) both; } .js .cover h1 { animation: land 0.9s var(--ease-out) 0.15s both; } .js .cover-intro, .js .cover-actions { animation: rise 0.8s var(--ease-out) 0.45s both; } .js .spine span { animation: stamp 0.5s var(--ease-out) both; animation-delay: calc(0.5s + var(--i, 0) * 70ms); } @keyframes burst { from { opacity: 0; transform: scale(0.7) rotate(-6deg); } to { opacity: 0.16; transform: none; } } @keyframes land { from { opacity: 0; transform: translateY(0.35em) scale(1.03); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes stamp { 0% { opacity: 0; transform: scale(1.6); } 60% { opacity: 1; transform: scale(0.94); } 100% { opacity: 1; transform: none; } } } /* ── Home: contents ─────────────────────────────────────────── */ .section { padding-block: var(--sp-9); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6); } .section-head h2 { font-size: var(--step-3); } .section-head .jp { font-family: var(--f-display); color: var(--ink-3); font-size: var(--step-1); } .section-head p { max-width: 30rem; color: var(--ink-3); font-size: var(--step--1); } .contents { list-style: none; padding: 0; border-top: var(--panel-border) solid var(--rule); } .chapter-row { position: relative; isolation: isolate; display: grid; align-items: center; gap: var(--sp-5); grid-template-columns: 5.5rem minmax(0, 1fr) auto; padding: var(--sp-5) var(--sp-4); text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule); transition: color var(--dur-2) var(--ease-out); } /* The chapter's colour page wipes in behind the row on hover */ .chapter-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c1); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); } .chapter-row:hover, .chapter-row:focus-visible { color: var(--on-c1); } .chapter-row:hover::before, .chapter-row:focus-visible::before { transform: scaleX(1); } .chapter-no { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.1; } .chapter-no small { display: block; font-family: var(--f-body); font-size: var(--step--1); color: inherit; opacity: 0.7; margin-top: var(--sp-1); } .chapter-title { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.1; } .chapter-desc { display: block; font-family: var(--f-body); font-size: var(--step--1); margin-top: var(--sp-2); opacity: 0.85; max-width: 38rem; } .chapter-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); font-size: var(--step--1); } .swatches { display: flex; gap: 3px; } .swatches i { width: 0.9rem; height: 0.9rem; border: 1px solid var(--rule); transition: transform var(--dur-2) var(--ease-out); } .swatches i:nth-child(1) { background: var(--c1); } .swatches i:nth-child(2) { background: var(--c2); } .swatches i:nth-child(3) { background: var(--c3); } .chapter-row:hover .swatches i { border-color: var(--on-c1); } .chapter-row:hover .swatches i:nth-child(1) { transform: translateY(-3px); transition-delay: 0ms; } .chapter-row:hover .swatches i:nth-child(2) { transform: translateY(-3px); transition-delay: 60ms; } .chapter-row:hover .swatches i:nth-child(3) { transform: translateY(-3px); transition-delay: 120ms; } .chapter-status { white-space: nowrap; } @media (max-width: 720px) { .chapter-row { grid-template-columns: 1fr; gap: var(--sp-3); } .chapter-side { flex-direction: row; align-items: center; justify-content: space-between; } } /* ── Home: about & contact ─────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; } .portrait { aspect-ratio: 4 / 5; border: var(--panel-border) solid var(--rule); background: radial-gradient(var(--tone) 1.1px, transparent 1.3px) 0 0 / 7px 7px, var(--paper-2); display: grid; place-items: center; text-align: center; color: var(--ink-3); font-size: var(--step--1); padding: var(--sp-5); } .about-copy h2 { font-size: var(--step-3); margin-bottom: var(--sp-5); } .about-copy p + p { margin-top: var(--sp-4); } .skills { list-style: none; padding: 0; margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-2); } .skills li { border: 1px solid var(--rule); padding: 0.2rem 0.7rem; font-size: var(--step--1); } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: var(--sp-6); } .portrait { max-width: 22rem; } } .contact { border-top: var(--panel-border) solid var(--rule); } .contact h2 { font-size: var(--step-4); max-width: 18ch; } .contact-links { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-6); font-size: var(--step-1); } .colophon { border-top: 1px solid var(--rule-soft); padding-block: var(--sp-6) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); font-size: var(--step--1); color: var(--ink-3); } .colophon .wrap { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .colophon p { max-width: 40rem; } /* ── Case study: the colour page ────────────────────────────── */ .colour-page { position: relative; overflow: clip; background: var(--c1); color: var(--on-c1); border-bottom: var(--panel-border) solid var(--rule); } .colour-page .wrap { position: relative; padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); } /* Second colour: a diagonal slab carrying screentone */ .colour-page::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 46%; background: radial-gradient(color-mix(in srgb, var(--c3) 55%, transparent) 1.2px, transparent 1.5px) 0 0 / 8px 8px, var(--c2); clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%); } /* Third colour: a single thin rule */ .colour-page::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--c3); } .sfx { position: absolute; right: clamp(0.5rem, 3vw, 2.5rem); bottom: 0.4rem; z-index: 0; font-family: var(--f-display); font-size: clamp(4rem, 2rem + 9vw, 10rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--on-c1) 55%, transparent); pointer-events: none; user-select: none; transform: rotate(-6deg); } .sfx::before { content: var(--sfx); } .colour-page .chapter-label { position: relative; z-index: 1; font-size: var(--step--1); display: flex; gap: var(--sp-3); align-items: baseline; } .chapter-label b { font-family: var(--f-display); font-weight: 400; font-size: var(--step-1); } .colour-page h1 { position: relative; z-index: 1; color: inherit; font-size: clamp(2.3rem, 1rem + 7vw, 7.6rem); line-height: 0.95; margin-top: var(--sp-4); max-width: 12ch; overflow-wrap: anywhere; } .colour-page .lede { position: relative; z-index: 1; margin-top: var(--sp-5); max-width: 38rem; font-size: var(--step-1); line-height: 1.55; } .colour-page .lede, .colour-page .chapter-label { text-shadow: 0 0 18px var(--c1); } .chapter-kanji { position: relative; z-index: 1; writing-mode: vertical-rl; font-family: var(--f-display); font-size: var(--step-2); line-height: 1; opacity: 0.9; } @media (max-width: 720px) { .colour-page .wrap { grid-template-columns: 1fr; } .chapter-kanji { display: none; } .colour-page::before { width: 24%; } } @media (prefers-reduced-motion: no-preference) { .js .colour-page::before { animation: slab 1s var(--ease-out) both; } .js .colour-page h1 { animation: land 0.9s var(--ease-out) 0.1s both; } .js .sfx { animation: sfx 1.1s var(--ease-out) 0.35s both; } @keyframes slab { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } } @keyframes sfx { from { opacity: 0; transform: rotate(-6deg) scale(1.25); } to { opacity: 1; transform: rotate(-6deg); } } } /* Title morphs between the contents list and the chapter page */ ::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: var(--ease-out); } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-5); padding-block: var(--sp-6); border-bottom: 1px solid var(--rule); } .meta dt { font-size: var(--step--1); color: var(--ink-3); } .meta dd { font-weight: 600; color: var(--ink); font-size: var(--step--1); margin-top: var(--sp-1); } /* ── Case study: ink pages ──────────────────────────────────── */ .ink { padding-block: var(--sp-8) var(--sp-9); } .ink h2 { font-size: var(--step-3); margin-top: var(--sp-9); margin-bottom: var(--sp-5); max-width: 22ch; } .ink h2:first-child { margin-top: 0; } .ink h3 { font-family: var(--f-body); font-weight: 800; font-size: var(--step-1); letter-spacing: 0; margin-top: var(--sp-6); margin-bottom: var(--sp-2); } .ink p { max-width: var(--measure); } .ink p + p { margin-top: var(--sp-4); } .ink .lede { font-size: var(--step-1); line-height: 1.6; color: var(--ink); } .ink a:not(.btn) { text-decoration-color: var(--spot); text-decoration-thickness: 2px; text-underline-offset: 3px; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); } .two-col h3:first-child { margin-top: 0; } @media (max-width: 760px) { .two-col { grid-template-columns: 1fr; gap: 0; } .two-col h3:first-child { margin-top: var(--sp-6); } } /* Decisions: a spot-colour marker, not a number, since they aren't a sequence */ .decisions { list-style: none; padding: 0; margin-top: var(--sp-5); display: grid; gap: var(--sp-6); max-width: var(--measure); } .decisions li { position: relative; padding-left: var(--sp-6); } .decisions li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.7rem; height: 0.7rem; background: var(--spot); border: 1px solid var(--rule); } .decisions strong { display: block; font-weight: 800; color: var(--ink); font-size: var(--step-0); } /* Narration box: how manga sets a caption apart from speech */ .narration { margin-block: var(--sp-7); max-width: var(--measure); padding: var(--sp-5) var(--sp-6); border: var(--panel-border) solid var(--rule); background: var(--paper-2); box-shadow: 6px 6px 0 var(--spot); } .narration p { color: var(--ink); } .wip { margin-bottom: var(--sp-7); max-width: var(--measure); padding: var(--sp-4) var(--sp-5); border: var(--panel-border) dashed var(--rule); font-size: var(--step--1); } .wip strong { color: var(--ink); } /* Panels: screenshots framed like manga panels, revealed with a wipe */ .panel { margin-block: var(--sp-7); } .panel img, .panel .drawing { width: 100%; border: var(--panel-border) solid var(--rule); background: var(--paper-2); } .panel figcaption { margin-top: var(--sp-3); font-size: var(--step--1); color: var(--ink-3); font-style: italic; max-width: var(--measure); } .panel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-5); margin-block: var(--sp-7); align-items: start; } .panel-row .panel { margin: 0; } .panel.narrow { max-width: 34rem; } .panel.tiny { max-width: 20rem; } @media (prefers-reduced-motion: no-preference) { .js [data-reveal] { clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease-inout); } .js [data-reveal].is-in { clip-path: inset(0 0 0 0); } } /* Inline SVG drawings follow the ink palette */ .drawing { display: block; padding: var(--sp-5); } .drawing text { fill: var(--ink-2); font-family: var(--f-body); font-size: 12px; } .drawing .t-faint { fill: var(--ink-3); } .drawing .t-strong { fill: var(--ink); font-weight: 800; } .drawing .box { fill: none; stroke: var(--rule); stroke-width: 1.5; } .drawing .soft { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; } .drawing .fill { fill: var(--spot); stroke: var(--rule); stroke-width: 1.5; } .drawing .on-fill { fill: var(--on-c1); font-weight: 800; } .palette { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); list-style: none; padding: 0; } .palette li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--step--1); } .palette i { width: 1.4rem; height: 1.4rem; border: 1px solid var(--rule); } .stack { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); } .stack li { border: 1px solid var(--rule); padding: 0.15rem 0.7rem; font-size: var(--step--1); } /* Next chapter: the following series' colours preview the page to come */ .next-chapter { border-top: var(--panel-border) solid var(--rule); } .next-chapter a { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-5); padding-block: var(--sp-8); text-decoration: none; color: var(--ink); transition: color var(--dur-2) var(--ease-out); } .next-chapter a::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: -1; background: var(--c1); transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-3) var(--ease-out); } .next-chapter a:hover, .next-chapter a:focus-visible { color: var(--on-c1); } .next-chapter a:hover::before, .next-chapter a:focus-visible::before { transform: scaleY(1); } .next-chapter small { display: block; font-size: var(--step--1); margin-bottom: var(--sp-2); } .next-chapter .title { font-family: var(--f-display); font-size: var(--step-4); line-height: 1; } .next-chapter a:hover .swatches i { border-color: var(--on-c1); } @media print { .site-nav, .progress, .sfx { display: none; } } /* In short: the story-so-far box (あらすじ) that opens a manga chapter. Three facts for someone skimming, and the way to try the thing. */ .recap { margin-block: var(--sp-6) 0; padding: var(--sp-5) var(--sp-6); border: var(--panel-border) solid var(--rule); background: var(--paper); box-shadow: 6px 6px 0 var(--spot); } .recap-label { display: inline-flex; gap: 0.6rem; align-items: baseline; padding: 0.2rem 0.7rem; background: var(--ink); color: var(--paper); font-size: var(--step--1); font-weight: 600; } .recap dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); margin-top: var(--sp-4); } .recap dt { font-family: var(--f-display); font-size: var(--step-0); color: var(--ink); } .recap dd { margin-top: var(--sp-1); color: var(--ink-2); line-height: 1.55; } .recap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-5); } .recap-note { font-size: var(--step--1); color: var(--ink-3); } @media (max-width: 760px) { .recap { padding: var(--sp-5); } .recap dl { grid-template-columns: 1fr; gap: var(--sp-4); } } /* Paired screenshots sit on a small manga page: an inked border, even gutters, and uneven panel widths that alternate from one row to the next. */ .panel-row { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; padding: 12px; border: var(--panel-border) solid var(--rule); background: var(--paper); } .panel-row:nth-of-type(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .panel-row .panel figcaption { font-size: 0.82rem; } @media (max-width: 760px) { .panel-row, .panel-row:nth-of-type(even) { grid-template-columns: 1fr; } } /* つづく, "to be continued", closes every chapter like the last page of an episode */ .ink > .wrap::after { content: "つづく"; display: block; width: fit-content; margin: var(--sp-8) 0 0 auto; font-family: var(--f-display); font-size: var(--step-2); color: var(--spot); transform: rotate(-5deg); }