@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-variable.woff2') format('woff2');font-weight:200 800;font-display:block}
@font-face{font-family:'Noto Sans JP';src:url('/assets/fonts/noto-sans-jp-current.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--navy:#0e3870;--paper:#f5f8fc;--muted:#b1c3d7;--accent:#a6c9ee;--rule:#ffffff30;--column:58vw;--gutter:4vw;background:var(--navy);color:var(--paper);font-family:Manrope,'Noto Sans JP',sans-serif;font-synthesis:none;font-size:18px;scroll-behavior:smooth;scroll-padding-top:90px}
*{box-sizing:border-box}body{margin:0}body::after{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;background:radial-gradient(ellipse at 47% 43%,transparent 35%,#00000008 100%)}
a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;background:none;border:0;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{background:var(--accent);color:var(--navy)}[hidden],.content-removed{display:none!important}
/* Navigation and reading share the same column; the portrait owns the other side. */
.masthead{position:absolute;z-index:4;top:0;left:0;width:100%;min-height:108px;display:grid;grid-template-columns:calc(var(--column) - var(--gutter)) minmax(0,1fr);align-content:center;align-items:center;padding:24px var(--gutter)}
.wordmark{display:flex;align-items:center;width:180px;min-height:44px}.signature{display:block;width:100%;height:auto}
.masthead nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);text-transform:uppercase;font-size:11px;letter-spacing:.12em}.masthead nav a{display:flex;align-items:center;min-height:44px;white-space:nowrap}.masthead nav a:hover,.masthead nav a[aria-current=page]{color:var(--accent)}
.languages{display:flex;gap:9px;align-items:center;margin-left:auto;padding-left:16px;border-left:1px solid var(--rule);font-size:11px;letter-spacing:0;text-transform:none;white-space:nowrap}.languages a{color:var(--muted)}.languages a[aria-current=true]{color:var(--paper);text-decoration:underline;text-underline-offset:5px}
.language-banner{grid-column:2;display:flex;gap:14px;align-items:center;font-size:11px;line-height:1.4;color:var(--muted);margin-top:1px}.language-banner a,.language-banner button{min-height:44px;padding:0;font-size:11px;text-decoration:underline;text-underline-offset:4px}.language-banner a{color:var(--paper)}
.portrait-stage{position:fixed;left:0;top:0;width:56%;height:100svh;pointer-events:none;isolation:isolate}.portrait-frame{position:absolute;inset:45px 0 45px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;overflow:hidden}
.portrait{position:relative;grid-area:1/1;width:min(66vw,94svh);aspect-ratio:1;opacity:0;transition:opacity .65s ease;user-select:none;pointer-events:none;transform-origin:center}.portrait.is-active{opacity:1}.portrait>img,.vector-ink{display:block;width:100%;height:100%;object-fit:contain}.vector-ink{position:absolute;inset:0;pointer-events:none}.portrait:not(.is-drawing)>.vector-ink,.chapter-portrait:not(.is-drawing)>.vector-ink{visibility:hidden}.is-drawing>img{visibility:hidden}
main{position:relative;margin-left:var(--column);width:calc(100% - var(--column) - var(--gutter));outline:none}.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:155px 0 100px}[data-page=home] .hero{justify-content:flex-start;padding-top:max(180px,calc(50svh - min(9vw,13svh)))}
h1,h2{font-weight:420;text-transform:uppercase;letter-spacing:-.055em}h1{font-size:clamp(35px,4.45vw,78px);line-height:1.04;margin:0 0 30px}h1 span{display:block}h2{font-size:clamp(36px,4vw,64px);line-height:1.08;margin:0 0 32px}.eyebrow{font-size:11px;line-height:1.5;letter-spacing:.18em;font-weight:500;margin:0 0 24px;text-transform:uppercase;color:var(--muted)}
.role{font-size:12px;line-height:1.6;letter-spacing:.065em;margin:0 0 10px;color:var(--accent)}.location{font-size:11px;line-height:1.6;letter-spacing:.1em;margin:0 0 28px;color:var(--muted)}.deck{font-size:18px;line-height:1.6;font-weight:420;max-width:36ch;margin:0 0 32px}
.home-links,.thought-links{display:flex;gap:30px;align-items:center;flex-wrap:wrap}.explore{display:inline-flex;gap:28px;align-items:center;min-height:44px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--rule);padding:0 0 8px}.explore:hover{color:var(--accent);border-color:var(--accent)}.arrow{display:inline-block;flex:none;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;transition:translate .2s ease}.arrow-down{rotate:135deg}.arrow-up{rotate:-45deg}.arrow-down-right{rotate:90deg}a:hover>.arrow,button:hover>.arrow,summary:hover>.arrow{translate:2px -2px}a:hover>.arrow-down{translate:0 3px}a:hover>.arrow-up{translate:0 -3px}
.chapter{padding:90px 0 100px;border-top:1px solid var(--rule);scroll-margin-top:30px;min-height:65svh}.portrait-chapter{min-height:85svh}.chapter>p:not(.eyebrow){font-size:18px;line-height:1.6;max-width:40ch;font-weight:420;margin:0 0 28px}.chapter-portrait{display:none}.scene-number{margin-bottom:26px}.page-link{margin-top:24px}
footer{padding:26px 0 36px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:11px;letter-spacing:.08em;gap:4px 20px}footer a{min-height:44px;display:inline-flex;align-items:center;gap:15px}.footer-tools{display:flex;align-items:center;justify-content:space-between;gap:22px;width:100%;color:var(--muted);letter-spacing:0}.replay{min-height:44px;padding:0;font-size:11px;display:inline-flex;align-items:center;gap:12px}.replay:hover{color:var(--paper)}
.skip-link{position:fixed;z-index:30;left:20px;top:12px;background:var(--paper);color:var(--navy);padding:12px;font-size:14px;transform:translateY(-160%)}.skip-link:focus{transform:none}.skip-intro{position:fixed;right:var(--gutter);bottom:24px;z-index:6;min-height:44px;font-size:11px;letter-spacing:.08em;background:var(--navy);padding:0 12px}.skip-intro .arrow{margin-left:12px}
.is-intro h1{animation:name-arrive .8s .2s both cubic-bezier(.2,.65,.2,1)}.is-intro .introduction{animation:name-arrive .7s .55s both ease-out}@keyframes name-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html[lang=ja] h1:not([lang=en]),html[lang=ja] h2{letter-spacing:-.025em;text-transform:none;line-height:1.35}html[lang=ja] h1:not([lang=en]){font-size:clamp(34px,4.2vw,64px)}html[lang=ja] .deck,html[lang=ja] .chapter>p:not(.eyebrow){line-height:1.8;font-weight:400}html[lang=ja] .personal-name[lang=en]{font-family:Manrope,sans-serif;line-height:1.04;letter-spacing:-.055em;text-transform:uppercase}
/* Articles retain their vertical marginal date; unpublished pieces stay out of view. */
.blog-hero h1{font-size:clamp(40px,5vw,68px);line-height:1.08}.blog-draft{position:relative;padding-right:58px;min-height:90svh}.blog-draft .draft-intro{font-size:20px!important}.thought-date{position:absolute;right:0;top:28px;display:block;padding-left:13px;border-left:1px solid var(--rule);color:var(--accent)}.date-display{display:block;writing-mode:vertical-rl;text-orientation:upright;white-space:pre;font-size:11px;line-height:1.4;letter-spacing:.17em;font-weight:500;font-variant-numeric:tabular-nums}.date-storage,.is-editing [data-edit-kind=date]{display:none!important}.date-picker{display:none}.long-link{font-size:11px;min-height:44px;display:inline-flex;align-items:center;gap:14px;color:var(--muted)}.longer-writings{min-height:40svh}.longer-writings h2{font-size:clamp(30px,3vw,46px)}
body[data-long-empty=true]:not(.is-editing) .longer-writings,body[data-long-empty=true]:not(.is-editing) .long-link,body[data-thoughts-empty=true]:not(.is-editing) .blog-draft,body[data-thoughts-empty=true]:not(.is-editing) .thought-links .explore{display:none}
/* Existing author workflow: separate language files, explicit save, reversible deletion. */
[data-edit-key]{white-space:pre-wrap;overflow-wrap:anywhere}.editor{position:fixed;z-index:7;bottom:18px;left:24px;width:min(450px,calc(100vw - 48px));border:1px solid #a6c9ee66;background:#092c5b;box-shadow:0 8px 26px #031c3b45;padding:13px 16px;display:grid;grid-template-columns:1fr auto;gap:6px 16px;border-radius:3px}.editor-context{font-size:11px;letter-spacing:.1em;display:flex;gap:8px;align-items:center}.editor-indicator{height:5px;width:5px;background:var(--accent);border-radius:50%}.editor-status{grid-column:1;font-size:11px;line-height:1.5;color:var(--muted);margin:0;overflow-wrap:anywhere}.editor-actions{grid-column:2;grid-row:1/3;display:flex;align-items:center;gap:6px}.editor button{min-height:44px;font-size:11px;padding:0 12px;border:1px solid var(--rule);border-radius:2px}.editor .edit-save{background:var(--paper);color:var(--navy);border-color:var(--paper)}.editor button:disabled{opacity:.45;cursor:default}.editor button:hover:not(:disabled){border-color:var(--accent)}.editor .edit-start .arrow{margin-left:10px;width:16px}
.editor-selection{grid-column:1/-1;grid-row:3;display:flex;align-items:center;gap:6px;border-top:1px solid var(--rule);padding-top:9px;margin-top:5px;flex-wrap:wrap}.selected-label{font-size:11px;line-height:1.4;flex:1 0 100%;color:var(--muted)}.editor-selection button{font-size:11px;min-height:44px;padding:0 10px}.editor-selection .edit-delete{border-color:var(--accent)}
.is-editing{padding-bottom:200px}.is-editing [data-edit-key]{outline:1px dashed #a6c9ee80;outline-offset:5px;cursor:text;min-width:1ch;min-height:1em;display:inline-block;max-width:100%}.is-editing [data-edit-key]:focus,.is-editing .edit-selected{outline:2px solid var(--accent);background:#a6c9ee0c}.is-editing .personal-name [data-edit-key]{display:block}.is-editing .replay{visibility:hidden}.is-editing .thought-date{position:static;border:0;padding:0;margin:0 0 28px;width:180px}.is-editing .date-display{display:none}.is-editing .date-picker{display:block;width:100%;min-height:44px;border:1px dashed var(--accent);border-radius:2px;padding:8px 10px;background:#092c5b;color:var(--paper);font-size:13px}
@media(min-width:761px) and (max-width:1050px){:root{--column:54vw;--gutter:3vw}.masthead nav{gap:14px;letter-spacing:.07em}.languages{padding-left:10px;gap:7px}.portrait-stage{width:52%}.deck,.chapter>p:not(.eyebrow){font-size:17px}}
@media(max-width:760px){
 :root{--gutter:6vw;scroll-padding-top:60px;font-size:17px}
 .masthead{min-height:86px;padding:18px 5vw;display:flex;justify-content:space-between;flex-wrap:wrap;gap:0 10px}.wordmark{width:clamp(80px,23vw,118px)}.masthead nav{gap:12px;letter-spacing:.02em}.languages{padding-left:10px;gap:7px}.language-banner{margin-left:auto;gap:12px;font-size:11px}
 .portrait-stage{width:100%;height:100svh;z-index:0}.portrait-frame{inset:84px 0 0;align-items:start}.portrait{width:min(160vw,85svh)}.portrait-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,#0e387030 46%,#0e3870d6 65%,#0e3870fa 90%);pointer-events:none}
 main{z-index:1;margin:0;width:100%;padding:0 7vw}.hero,[data-page=home] .hero{min-height:100svh;padding:54svh 0 72px;justify-content:flex-end}.hero h1{font-size:clamp(36px,10.4vw,56px);line-height:1.04;margin-bottom:18px}.hero-heading,.introduction{text-shadow:0 2px 14px var(--navy),0 0 4px var(--navy)}.role{font-size:11px;margin-bottom:7px}.location{margin-bottom:18px}.deck{font-size:17px;line-height:1.6;margin-bottom:24px;max-width:36ch}.home-links{gap:28px}.explore{gap:24px}
 .chapter{position:relative;background:#0e3870f7;box-shadow:0 0 0 7vw #0e3870f7;scroll-margin-top:20px;padding:64px 0 72px;min-height:0}.chapter>p:not(.eyebrow){font-size:17px;line-height:1.6}.chapter h2{font-size:clamp(34px,9vw,52px)}.portrait-chapter{padding-top:0}.chapter-portrait{display:block;position:relative;isolation:isolate;overflow:hidden;margin:0 -7vw 32px;height:105vw;max-height:74svh}.chapter-portrait>img,.chapter-portrait>.vector-ink{position:absolute;inset:auto;left:50%;top:50%;translate:-50% -50%;display:block;width:112vw;height:112vw;max-width:none;object-fit:contain}.chapter-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 80%,var(--navy));pointer-events:none}.scene-number{margin-bottom:20px}
 footer{font-size:11px;padding-bottom:max(30px,env(safe-area-inset-bottom))}.footer-tools{flex-wrap:wrap}.skip-intro{bottom:70px}
 html[lang=ja] .hero h1:not([lang=en]){font-size:clamp(32px,9.5vw,45px)}html[lang=ja] .deck,html[lang=ja] .chapter>p:not(.eyebrow){line-height:1.8}.blog-hero h1,.hero.blog-hero h1{font-size:clamp(34px,9.4vw,42px)}html[lang=ja] .hero.blog-hero h1{font-size:36px}.blog-draft{padding-right:40px}.thought-date{top:24px;padding-left:9px}.date-display{font-size:11px;letter-spacing:.15em}.thought-links{gap:16px}
 .editor{left:10px;bottom:10px;width:calc(100% - 20px);padding:10px 12px;gap:3px 8px}.editor-actions{gap:5px}.editor button{padding:0 10px}.editor-selection button{flex:1}.is-editing{padding-bottom:230px}.is-editing .portrait-stage{position:relative;margin-top:86px;height:30svh;min-height:190px}.is-editing .portrait-frame{inset:0;align-items:center}.is-editing .portrait{width:min(95vw,40svh)}.is-editing .portrait-stage::after{display:none}.is-editing .hero,.is-editing[data-page=home] .hero{min-height:0;padding:30px 0 60px}.is-editing [contenteditable]:focus{scroll-margin-block:30px 230px}.is-editing .chapter-portrait{height:65vw;max-height:42svh}.is-editing .chapter-portrait>img{width:75vw;height:75vw}.is-editing .blog-draft{padding-right:0}
 body:not(.is-editing) .editor{left:auto;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;padding:0;border:0;background:#092c5be8;gap:0}body:not(.is-editing) .editor-context{display:none}body:not(.is-editing) .editor-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}body:not(.is-editing) .editor-actions{grid-area:1/1}body:not(.is-editing) .editor .edit-start{padding:0 14px;border-color:#a6c9ee66}
}
@media(max-width:370px){.masthead{min-height:112px;padding-block:12px;align-items:flex-start;gap:0}.wordmark{width:94px}.masthead nav{width:100%;justify-content:space-between;gap:10px}.languages{margin-left:0}.portrait-frame{top:112px}.language-banner{margin:0}.is-editing .editor{grid-template-columns:1fr}.is-editing .editor-actions{grid-column:1;grid-row:3}.is-editing .editor-selection{grid-row:4}.is-editing .editor-actions button{flex:1}}
@media(max-width:760px) and (max-height:600px){.portrait{width:min(135vw,105svh)}.hero,[data-page=home] .hero{padding-top:48svh}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
/* Navigation labels are words, never a vertical stack beside an icon. */
.explore [data-edit-key]{white-space:nowrap;overflow-wrap:normal;flex-shrink:0}
.ink-pending .portrait.is-active>img{visibility:hidden}

.footer-tools:has(.replay[hidden]){display:none}
/* A separate, quiet collection: three objects, then Saki. */
.suki-hero h1{font-size:clamp(36px,4.2vw,64px)}
.suki-entry{margin:36px 0 28px}.suki-entry .scene-number{margin-bottom:18px}
.suki-title,.suki-chapter h2{font-size:clamp(30px,3.1vw,48px);line-height:1.12;letter-spacing:-.045em;margin-bottom:18px}
.suki-note{font-size:18px;line-height:1.6;max-width:36ch}
.suki-chapter{display:flex;flex-direction:column;justify-content:center;min-height:95svh}
.suki-chapter>.role{font-size:12px!important;line-height:1.6!important;letter-spacing:.065em;color:var(--accent)}
.suki-chapter>.page-link{align-self:flex-start}
@media(max-width:760px){
 .masthead{display:grid;grid-template-columns:minmax(0,1fr);min-height:116px;padding:12px 5vw;gap:0}
 .wordmark{width:98px}.masthead nav{width:100%;justify-content:space-between;gap:12px}
 .languages{position:absolute;right:5vw;top:12px;margin:0;padding-left:0;border:0}
 .language-banner{margin:0;justify-content:flex-end}
 .portrait-frame{top:116px}
 .suki-hero h1{font-size:clamp(34px,9.4vw,44px)}
 .suki-entry{margin:26px 0 24px}.suki-entry .scene-number{margin-bottom:12px}
 .suki-title,.suki-chapter h2{font-size:clamp(28px,8vw,38px)}
 .suki-chapter{display:block;min-height:0;padding-bottom:90px}
 .suki-note{font-size:17px}
}
@media(max-width:760px){.suki-chapter{background:var(--navy);box-shadow:0 0 0 7vw var(--navy)}}
/* Brief personal notes, with prompts that are never saved as the author's words. */
.suki-description{max-width:36ch;margin:24px 0 28px}
.suki-description-label{font-size:11px;line-height:1.5;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}
.suki-description .suki-note{font-size:17px;line-height:1.6;margin:0}
.suki-description:has([data-edit-key][hidden]),body:not(.is-editing) .suki-description:has([data-edit-key]:empty){display:none}
.is-editing .suki-description [data-edit-key]{display:block;width:100%;min-height:80px;padding:12px;outline-offset:0}
.is-editing .suki-description [data-edit-key]:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none}
/* SAINTA easter egg: the white parade marches once along the very bottom edge, then is pulled back down. */
.parade{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;overflow:hidden;height:clamp(64px,7.2vw,104px);line-height:0;mix-blend-mode:screen;cursor:pointer;outline-offset:-3px}
.parade video{display:block;flex:none;height:100%;width:auto;max-width:none;object-fit:fill;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.parade.is-leaving{animation:parade-drop .6s cubic-bezier(.55,0,.85,.25) both;transform-origin:50% 100%}
.is-editing .parade{display:none}
@keyframes parade-drop{0%{transform:none}22%{transform:translateY(-5%) rotate(.9deg)}100%{transform:translateY(118%) rotate(-1.2deg)}}