:root {
  --f-jp-serif:"Shippori Mincho",serif; --f-latin:"EB Garamond","Shippori Mincho",serif;
  --f-body:"Zen Kaku Gothic New",sans-serif; --font-signature:"Josefin Sans","Zen Kaku Gothic New",sans-serif;
  --paper:#F1F5F8; --paper-2:#E8F1F5; --mat:#F7F9FA; --ink:#1F2B3A; --ink-2:#3B4656; --ink-3:#485464;
  --line:#D3DEE8; --line-2:#C4D3E2; --ultra:#2E5E8E; --ultra-deep:#23486F; --sky-2:#D0E3EE;
  --sky-field:#3F6A93; --lamp-white:#EAFBFF; --signal-green:#3CC9C0;
  --opening-edge:rgb(115,158,205); --closing-edge:rgb(167,183,199);
  --sun-shadow:#2E4A66; --sun-light:#FFFFFF; --air:rgba(236,242,247,.065); --row-paper:rgba(244,246,247,.72);
  --menu-shade:rgba(20,32,48,.32); --text-shadow:rgba(8,24,60,.35);
  --gap-section:128px; --gap-head:32px; --gap-item:40px;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.4,0,.2,1); --motion-focus:640ms; --motion-hunt:900ms; --motion-on:420ms; --motion-off:300ms;
  
}
* { box-sizing:border-box; }
html { background:var(--paper); color-scheme:light; font-synthesis:none; line-break:strict; scrollbar-color:var(--line) var(--paper); }
html,body { overflow-x:clip; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.9 var(--f-body); letter-spacing:.02em; -webkit-font-smoothing:antialiased; }
main { position:relative; isolation:isolate; overflow:clip; background-color:var(--paper); }
/* iOS Safari paints its bars and the space past the page from the page background (body, html or
   theme-color, depending on the version). main carries the paper; html, body and theme-color take
   the scene's edge color while the top or the closing scene covers that edge (syncChromeTints).
   Only html and body restyle: an inherited custom property here recalculated the whole page. */
html.chrome-top,html.chrome-top body { background-color:var(--opening-edge); }
html.chrome-bottom,html.chrome-bottom body { background-color:var(--closing-edge); }
::selection { background:var(--sky-2); color:var(--ultra-deep); }
h1,h2,h3,p,dl,dd,ol,ul { margin:0; }
ol,ul { padding:0; list-style:none; }
h1,h2,h3 { text-wrap:balance; }
h1,h2,h3,dd,.lead,.event-copy { word-break:auto-phrase; }
p { max-width:38em; text-wrap:pretty; }
.identifier { white-space:nowrap; }
/* Keep each phrase together unless it exceeds the full available line. */
.phrase { display:inline-block; max-width:100%; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }
.desc p,.note,.talk-description { word-break:normal; line-break:strict; }
a { color:var(--ultra-deep); text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:1px; text-underline-offset:4px; transition:text-decoration-color var(--motion-off); }
button { padding:0; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--ultra); outline-offset:4px; }
[hidden] { display:none!important; }
time { font-family:var(--f-latin); font-variant-numeric:lining-nums tabular-nums; letter-spacing:0; }
code { font:inherit; font-size:.9em; background:var(--code-bg, rgba(31,43,58,.07)); padding:0 .3em; white-space:nowrap; overflow-wrap:normal; } /* why: translucent so the wires behind stay visible through code chips */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; user-select:none; -webkit-user-select:none; pointer-events:none; }
.split-text { position:relative; }
.split-source { position:absolute; inset:0 auto auto 0; color:transparent; text-shadow:none; font:inherit; letter-spacing:inherit; line-height:inherit; writing-mode:inherit; text-orientation:inherit; word-break:keep-all; overflow-wrap:normal; user-select:text; -webkit-user-select:text; pointer-events:none; z-index:2; }
.split-source-run { position:relative; white-space:pre; pointer-events:auto; }
.split-source::selection,.split-source *::selection { background:var(--sky-2); color:var(--ultra-deep); text-shadow:none; }
.split-visual { display:contents; }
.split-decorative { display:inline; }
.split-visual,.split-visual * { user-select:none; -webkit-user-select:none; }
.skip-link { position:fixed; left:20px; top:8px; z-index:40; padding:8px 16px; background:var(--paper); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.page-width { width:100%; max-width:1240px; margin-inline:auto; padding-inline:clamp(20px,5vw,72px); }
.identity,.folio-section { position:relative; padding-top:var(--gap-section); scroll-margin-top:80px; }
.folio-section { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:32px; }
.sec-head { grid-column:1 / 4; position:sticky; top:112px; align-self:start; z-index:2; pointer-events:none; }
.sec-head *,.sec-head::before,.sec-head::after { pointer-events:none; }
.sec-head a,.sec-head button,.sec-head a *,.sec-head button * { pointer-events:auto; }
.sec-head h2 { display:flex; flex-direction:column; align-items:flex-start; width:max-content; max-width:100%; font-weight:400; }
.sec-head .jp { writing-mode:vertical-rl; font:600 30px/1.4 var(--f-jp-serif); letter-spacing:.32em; }
.sec-head .en { margin-top:16px; font:italic 19px/1.9 var(--f-latin); color:var(--ink-3); text-transform:lowercase; }
.sec-body { grid-column:4 / 13; min-width:0; }
.identity-name { display:flex; align-items:center; gap:24px; margin-bottom:var(--gap-head); }
.identity-text { min-width:0; }
.identity-icon { position:relative; flex:none; display:block; width:88px; height:88px; border-radius:50%; overflow:hidden; }
.identity-icon picture,.identity-icon img { display:block; width:100%; height:100%; }
.identity-icon img { object-fit:cover; }
.icon-lamp { position:absolute; left:48%; top:31.5%; width:9%; height:11%; background:var(--lamp-white); opacity:.2; border-radius:20%; box-shadow:0 0 6px var(--lamp-white); }
.identity h2 { font:300 clamp(34px,4.2vw,56px)/1.15 var(--font-signature); letter-spacing:.04em; }
.identity-text a { display:inline-flex; align-items:center; min-height:44px; margin-top:6px; color:var(--ultra); font:400 18px/1.5 var(--font-signature); letter-spacing:.04em; }
.profile { display:flow-root; max-width:46rem; border-block:1px solid var(--line); }
.profile > div { display:grid; grid-template-columns:5.5em minmax(0,1fr); padding-block:14px; }
.profile > div + div { border-top:1px solid var(--line); }
.profile > div:last-child { padding-bottom:14px; }
.profile dt { font:600 14px/1.9 var(--f-jp-serif); letter-spacing:.2em; color:var(--ink-3); padding-top:2px; }
.profile dd { min-width:0; font-size:15.5px; }
.profile .affiliation { overflow-wrap:anywhere; }
.affiliation time { white-space:nowrap; }
.work { display:grid; grid-template-columns:3.2rem minmax(0,1fr); position:relative; }
.work + .work { margin-top:var(--gap-item); }
.work-number { color:var(--ultra-deep); font:400 18px/1.9 var(--f-latin); font-variant-numeric:lining-nums tabular-nums; }
.work h3,.appearance h3 { font:600 25px/1.35 var(--f-jp-serif); }
.work h3[lang="en"] { font:500 25px/1.35 var(--f-latin); }
.work h3 a,.appearance h3 a { color:var(--ink); }
.outward { display:inline-block; width:1em; height:1em; vertical-align:-.08em; color:var(--ultra-deep); font-size:.7em; }
.lead { margin-top:12px; }
.lead a,.desc a,.events a,.profile dd a { display:inline-block; min-height:24px; padding-block:2px; }
.work h3 a,.appearance h3 a { display:inline-block; min-height:24px; }
.work-copy,.appearance,.work h3 a,.appearance h3 a,.links a > * { min-width:0; max-width:100%; }
.work-copy,.appearance,.event-copy,.link-name,.link-url { overflow-wrap:anywhere; }
/* Retain Japanese phrase boundaries; identifiers can break within long Latin tokens. */
:is(.work,.appearance,.event-copy,.links) :is(.identifier,.breakable-token) { white-space:normal; overflow-wrap:anywhere; }
.desc,.talk-description { margin-top:12px; font-size:15px; line-height:1.85; color:var(--ink-2); }
.desc p + p { margin-top:8px; }
.medium { margin-top:8px; font:italic 16.5px/1.7 var(--f-latin); color:var(--ink-3); }
.appearance { position:relative; }
.appearance + .appearance { margin-top:var(--gap-item); }
.filter { display:flex; flex-wrap:wrap; gap:6px 22px; }
.filter button { min-height:44px; min-width:44px; white-space:nowrap; font-size:14px; color:var(--ink-2); text-decoration-thickness:1px; text-underline-offset:6px; }
.filter button[aria-pressed="true"] { color:var(--ultra-deep); text-decoration-line:underline; }
.count { margin-top:12px; margin-bottom:var(--gap-head); color:var(--ink-3); font-size:13.5px; }
.count span { font-family:var(--f-latin); }
.year-group { display:grid; grid-template-columns:8rem minmax(0,1fr); }
.year-group + .year-group { margin-top:var(--gap-item); }
.year-group h3 { align-self:start; position:sticky; top:112px; color:var(--ultra-deep); font:400 46px/1.2 var(--f-latin); }
.events { position:relative; }
.events > .event-line { content:""; position:absolute; top:0; bottom:0; left:2px; width:1px; background:var(--line-2); opacity:.92; }
.events > li { position:relative; display:grid; grid-template-columns:6.5rem minmax(0,1fr); padding:14px 0 14px 16px; border-bottom:1px solid var(--line); }
.events > li:first-child { border-top:1px solid var(--line); }
.events > li > .event-lamp { content:""; position:absolute; top:29px; left:0; width:5px; height:5px; border-radius:50%; border:1px solid var(--ultra); background:var(--ultra); opacity:.75; }
.events > li.planned > .event-lamp { border-style:dashed; background:var(--paper); }
.events > li > time { font-size:18px; color:var(--ink-3); line-height:1.9; }
.event-copy { min-width:0; text-wrap:pretty; }
.sub { font-size:14px; color:var(--ink-3); margin-left:.6em; }
.note { margin-top:8px; font-size:14.5px; line-height:1.8; color:var(--ink-2); }
.planned { color:var(--ink-3); }
.planned > time { font-style:italic; }
.links li + li { margin-top:var(--gap-item); }
.links a { position:relative; display:grid; grid-template-columns:12rem minmax(0,1fr) auto; gap:12px; align-items:baseline; min-height:44px; padding-block:8px; text-decoration:none; isolation:isolate; }
.link-name { color:var(--ink); font:400 21px/1.4 var(--f-latin); }
.link-url { min-width:0; font-size:14px; color:var(--ink-3); white-space:normal; overflow-wrap:anywhere; word-break:normal; }
.url-part { white-space:normal; overflow-wrap:anywhere; }
.links .outward { font-size:18px; }
.links a.over-sky { border-radius:12px; background:var(--row-paper); padding-inline:16px; margin-inline:-16px; }
/* Focus, hover and touch share one lamp controller. */
.work > .lamp-feedback,.appearance > .lamp-feedback,.links a > .lamp-feedback,.events > li > .lamp-feedback { content:""; position:absolute; inset:-4px -12px; border-radius:12px; background:var(--lamp-white); opacity:0; pointer-events:none; z-index:-1; }
.work,.appearance,.events > li { isolation:isolate; }
.events > li > .lamp-feedback { inset:4px -8px; }
.fixed-ui { position:fixed; inset:24px 24px auto; height:48px; display:flex; align-items:center; justify-content:space-between; z-index:20; pointer-events:none; }
.signature { display:inline-flex; align-items:center; min-height:44px; padding-inline:14px; border-radius:12px; background:#FFFFFF; border:1px solid rgba(31,43,58,.16); box-shadow:0 2px 10px rgba(31,43,58,.10); color:var(--ink); font:300 16px/1.1 var(--font-signature); letter-spacing:.06em; visibility:hidden; opacity:0; }
.hero-out .signature { visibility:visible; opacity:1; pointer-events:auto; }
.mobile-location { display:none; }
.menu-btn { width:48px; height:48px; display:grid; place-items:center; margin-left:auto; border-radius:12px; background:#FFFFFF; border:1px solid rgba(31,43,58,.16); box-shadow:0 2px 10px rgba(31,43,58,.10); color:var(--ink); pointer-events:auto; }
.menu-btn svg { width:24px; height:24px; }
#menu { position:fixed; inset:0; z-index:30; }
.menu-backdrop { position:absolute; inset:0; background:var(--menu-shade); backdrop-filter:blur(2px); }
.menu-panel { position:absolute; inset:0 0 0 auto; width:min(420px,88vw); height:100%; display:flex; flex-direction:column; padding:32px; background:var(--paper); overflow-y:auto; overscroll-behavior:contain; }
.menu-close { flex:none; align-self:flex-end; display:grid; place-items:center; width:48px; height:48px; margin:-16px -16px 32px 0; font:400 34px/1 var(--f-body); }
.menu-label { color:var(--ink-3); font:600 15px/1.8 var(--f-jp-serif); letter-spacing:.3em; }
.menu-toc { margin-top:20px; }
.menu-toc li { border-bottom:1px solid var(--line); }
.menu-toc a { min-height:72px; display:flex; align-items:baseline; gap:24px; padding-block:12px; color:var(--ink-2); }
.nav-en { min-width:112px; font:italic 28px/1.4 var(--f-latin); }
.nav-jp { font-size:14px; white-space:nowrap; }
.menu-toc a[aria-current] { color:var(--ultra); }
.menu-contact { padding-block:36px; }
.menu-contact a { display:inline-flex; align-items:center; min-height:44px; margin-top:8px; }
.menu-social { margin-top:auto; padding-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.menu-social a { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; font-size:14px; color:var(--ink-2); }
.menu-social svg { width:22px; height:22px; fill:currentColor; }
.opening { --hero-name-size:clamp(48px,min(6.6vw,10.6svh),180px); position:relative; height:100svh; overflow:clip; isolation:isolate; background-color:var(--opening-edge); background-image:linear-gradient(to bottom,transparent 92%,var(--paper) 92%); }
@media (max-aspect-ratio:4/5), (max-width:720px) and (orientation:portrait) {
  html:not([data-mode="night"]) .opening { --opening-edge:rgb(116,159,206); }
  html.chrome-top:not([data-mode="night"]),html.chrome-top:not([data-mode="night"]) body { background-color:rgb(116,159,206); }
}
/* The lower 8% of .opening keeps paper beneath the existing photo feather. */
.hero-photo { position:absolute; inset:0; overflow:hidden; mask-image:linear-gradient(to bottom,#000 92%,transparent); }
.hero-scene,.hero-mist { position:absolute; inset:0; }
.hero-layer { position:absolute; left:var(--img-x,0px); top:var(--img-y,0px); width:var(--img-width,100%); height:var(--img-height,100%); display:block; }
.hero-layer picture,.hero-layer img { display:block; width:100%; height:100%; }
.hero-moon img { display:block; width:100%; height:auto; }
.hero-sky { z-index:0; }
.hero-lamp { z-index:3; }
.hero-clouds { position:absolute; bottom:0; z-index:1; width:120%; height:var(--strip-height); background-repeat:repeat-x; background-size:var(--tile-width) var(--strip-height); mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 82%,transparent);  }
.hero-clouds-near { z-index:2; opacity:.92; animation-duration:900s; }
.hero-clouds-far { opacity:.72; }
.hero-clouds-haze { opacity:.6; animation-duration:2400s; }
.hero-clouds-mid { opacity:.8; animation-duration:1100s; }
.hero-moon { position:absolute; z-index:9; left:74%; top:17%; width:clamp(56px,min(4.8vw,9.5svh),112px); height:auto; min-height:44px; display:grid; place-items:center; opacity:.78; transition:opacity 400ms; }
.hero-moon:hover,.hero-moon:focus-visible { opacity:.95; }
.hero-moon img { pointer-events:none; }
.nightmode-toggle { align-self:flex-start; min-height:44px; margin-top:24px; color:var(--ink); text-decoration:underline; text-underline-offset:6px; text-decoration-color:var(--line-2); }
html[data-mode="night"] .nightmode-toggle { text-decoration-color:var(--ultra); }
.hero-image { position:absolute; inset:0; display:block; }
.hero-image img { width:100%; height:100%; object-fit:cover; }
.hero-mist { background:var(--paper); opacity:var(--hero-mist,0); pointer-events:none; z-index:9; }
.hero-caption { position:absolute; top:40%; left:41%; right:48px; z-index:10; color:var(--sun-light); text-shadow:0 2px 24px var(--text-shadow); }
.opening h1 { font:200 var(--hero-name-size)/1.2 var(--font-signature); white-space:nowrap; text-wrap:nowrap; }
.hero-name { display:inline-flex; align-items:baseline; gap:.06em; }
.hero-letter,.hero-sub-letter,.focus-character,.reveal-character { display:inline-block; white-space:pre; }
.hero-letter,.hero-sub-letter {  }
.text-phrase { display:inline-block; max-width:100%; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }
.hero-name > span,.hero-name .hero-letter,.hero-sub-letter {  }
.text-phrase { display:inline-flex; align-items:baseline; gap:inherit; flex-wrap:wrap; }
.hero-sub { max-width:none; margin-top:calc(var(--hero-name-size) * .26); font:400 clamp(17px,calc(var(--hero-name-size) * .26),40px)/1.5 var(--font-signature); letter-spacing:.14em; }
.opening :focus-visible { outline-color:var(--sun-light); }
.scroll-cue { position:absolute; bottom:max(48px,15svh); left:50%; transform:translateX(-50%); z-index:10; padding-inline:12px; color:var(--sun-light); font:300 clamp(14px,1.15vw,18px)/1.5 var(--font-signature); letter-spacing:.2em; text-shadow:0 2px 24px var(--text-shadow); }
.cue-entrance { display:flex; flex-direction:column; align-items:center; gap:12px; }
.scroll-line { position:relative; width:1px; height:56px; background:currentColor; opacity:.55; }
.scroll-dot { position:absolute; top:0; left:-2.5px; width:6px; height:6px; border-radius:50%; background:currentColor; animation:flow-scroll 2.6s linear infinite; }
.lantern-light { position:absolute; inset:0; z-index:4; pointer-events:none; }
.lantern-glass,.lantern-glow { position:absolute; display:block; background:var(--lamp-white); }
.lantern-glass { left:var(--img-x); top:var(--img-y); width:var(--img-width); height:var(--img-height); mask-image:image-set(url("images/layers/lamp-glass-mask-wide.webp?v=25") 1x,url("images/layers/lamp-glass-mask-wide-2x.webp?v=25") 2x); mask-size:100% 100%; mask-repeat:no-repeat; opacity:.30; }
.lantern-glow { translate:-50% -50%; border-radius:50%; background:radial-gradient(ellipse closest-side,rgba(234,251,255,.7),rgba(234,251,255,.35) 35%,transparent 100%); opacity:.12; }
.hero-contrails { position:absolute; inset:0; z-index:2; pointer-events:none; }
.sky-trail { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; color:var(--lamp-white); }
/* Photograph colors are untouched; light and atmosphere are separate layers. */
.photo-life { isolation:isolate; }
.fixture { position:absolute; z-index:0; }
.fixture img { display:block; width:100%; height:100%; }
.fixture-sway { position:absolute; inset:0; }
.fixture-wires { top:0; right:calc((100% - 100vw) / 2 + 24px); width:min(82vw,1180px); aspect-ratio:2 / 1; pointer-events:none; }
.pole-photo { position:absolute; inset:0; }
/* The index owns the first row of projects, including the full string envelope. */
.wire-band { position:relative; grid-column:1 / -1; height:150px; margin-bottom:var(--gap-head); }
@media (max-width:960px) { .wire-band { height:96px; } }
#projects { row-gap:0; }
@media (max-width:1100px) { #projects .sec-body { margin-top:var(--gap-head); } }
#projects .sec-body,#projects .work,#projects .work-copy { background:transparent; }
.pole-photo { pointer-events:auto; clip-path:inset(0 0 0 74.5%); mask-image:linear-gradient(to bottom,#000 36%,transparent 78%); }
.wire-toc { position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:visible; pointer-events:none; fill:var(--ink-2); }
.wire-toc text { font:300 var(--wire-font-size,36px)/1 var(--font-signature); letter-spacing:.06em; fill:inherit; }
.wire-toc-full text { white-space:pre; }
.wire-toc a { pointer-events:auto; cursor:pointer; fill:inherit; opacity:.88; }
.wire-hit-area { pointer-events:none; }
.wire-hit-target { width:100%; height:100%; background:transparent; cursor:pointer; pointer-events:auto; }
.wire-toc a.is-lit { fill:var(--ultra-deep); text-shadow:0 0 6px var(--lamp-white); }
.wire-toc a:focus-visible { outline:none; fill:var(--ultra-deep); text-decoration:underline; text-decoration-color:currentColor; }
.wire-toc-compact { display:none; }
.toc-compact .wire-toc-full { display:none; }
.toc-compact .wire-toc-compact { display:block; }
.wire-current { fill:url(#wire-current-glow); opacity:0; }
.anchor-alias { position:absolute; top:0; scroll-margin-top:80px; }
.work { scroll-margin-top:80px; }
#projects .sec-body,#talks .sec-body { padding-right:190px; position:relative; z-index:1; }
#projects .sec-body { padding-right:max(190px,calc(48px + min(82vw,1180px) * .255 - clamp(20px,5vw,72px) - (100vw - min(100vw,1240px)) / 2)); }
.fixture-signal { top:calc(var(--gap-section) + var(--section-gap-adjust,0px) + 16px); right:calc((100% - 100vw) / 2 - 40px); width:clamp(280px,25vw,360px); aspect-ratio:10 / 7; }
.signal-pole,.signal-head { position:absolute; inset:0; }
.signal-head { transform-origin:66% 42.857143%; }
.signal-lit { position:absolute; inset:0; opacity:.78; }
.signal-bloom { position:absolute; left:20.15%; top:46.571429%; width:calc(12.7% + 40px); aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(circle closest-side,var(--signal-green) 15%,transparent 100%); opacity:.3; pointer-events:none; }
.signal-led { position:absolute; left:13.8%; top:37.5%; width:12.7%; height:18.2%; border-radius:50%; mix-blend-mode:screen; opacity:.18; pointer-events:none; }
/* Keep paper under the upper scene feather; the opaque photo hides the edge color. */
.closing { position:relative; isolation:isolate; background:linear-gradient(var(--paper),var(--paper)) top / 100% 45vh no-repeat,linear-gradient(var(--closing-edge),var(--closing-edge)) bottom / 100% 6px no-repeat var(--closing-edge); }
.closing-scene { position:absolute; top:0; bottom:0; left:0; right:0; z-index:-1; overflow:clip; pointer-events:none; mask-image:linear-gradient(to bottom,transparent,#000 45vh,#000 calc(100% - 6px),transparent); }
.finale-sky { position:absolute; inset:calc(-2.5vh - 10px) -10px; background:var(--sky-field); background-position:center; background-size:cover; background-repeat:no-repeat; }
.finale-contrails { position:absolute; inset:0; z-index:1; }
.cloud-parallax { position:absolute; inset:calc(-7.5vh - 8px) 0; z-index:2; }
.cumulonimbus { position:absolute; bottom:0; left:50%; width:max(100vw,1400px); aspect-ratio:3 / 2; translate:-50% 0; transform-origin:center bottom; }
.cloud-layer { position:absolute; inset:0; transform-origin:center bottom; }
.cloud-layer img { display:block; width:100%; height:100%; object-fit:contain; }
.cloud-crown { position:absolute; inset:0; background:var(--sun-light); mask-size:100% 100%; mask-repeat:no-repeat; mix-blend-mode:screen; opacity:var(--cloud-crown,.02); pointer-events:none; }
.finale-low-clouds { position:absolute; z-index:4; bottom:calc(-2.5vh - 10px); left:0; width:120%; height:calc(clamp(100px,18vh,200px) + 5vh + 20px); background-position:left bottom; background-size:auto 100%; background-repeat:repeat-x;  }
.colophon { position:relative; z-index:4; margin-top:min(var(--gap-section),16vh); }
.footer-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:0 28px; color:var(--sun-light); font:400 13.5px/1.9 var(--font-signature); text-shadow:0 1px 3px var(--ink),0 2px 7px var(--ink); }
.footer-row time { font:inherit; }
.footer-row a { position:relative; display:inline-flex; align-items:center; gap:8px; min-height:44px; color:inherit; }
.footer-row a:not(:hover,:focus-visible) { text-decoration-line:none; } /* why: the text-shadow also drew under the transparent underline, a dark smear */
.footer-row a::before { content:""; position:absolute; right:3px; bottom:80%; width:1px; height:32px; background:var(--sun-light); opacity:0; transform:scaleY(0); transform-origin:bottom; }
.footer-row a:focus-visible::before { animation:contrail-return 900ms linear both; }
.footer-row :focus-visible { outline-color:var(--sun-light); }
.section-guide { position:fixed; top:30vh; left:28px; height:40vh; width:124px; z-index:18; color:var(--ink-2); }
.section-guide::before { content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line-2); }
.section-guide ol { height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.section-guide li { height:6px; }
.section-guide a { position:relative; display:block; min-width:44px; min-height:44px; margin:-19px 0 0 -22px; color:inherit; }
.guide-lamp { position:absolute; top:19px; left:19px; width:6px; height:6px; border:1px solid var(--line-2); border-radius:50%; background:var(--paper); }
.guide-label { position:absolute; top:10px; left:36px; opacity:0; pointer-events:none; white-space:nowrap; text-shadow:0 0 2px var(--paper),0 0 5px var(--paper),0 0 9px var(--paper); }
.guide-label > span:first-child { display:block; font:600 13px/1.5 var(--f-jp-serif); }
.guide-label [lang] { font:300 12px/1.5 var(--font-signature); }
.guide-next { display:block; font:400 12px/1.5 var(--f-body); color:var(--ink-3); }
.section-guide [aria-current] .guide-label { opacity:1; }
.section-guide .passed .guide-lamp { background:var(--ultra); opacity:.28; }
.section-guide [aria-current] .guide-lamp { background:var(--lamp-white); border-color:var(--ultra); box-shadow:0 0 4px var(--lamp-white); opacity:.9; }
.guide-progress { position:absolute; top:0; left:-1px; width:3px; height:3px; border-radius:50%; background:var(--ultra); transform:translateY(var(--guide-y,0px)); }
.section-guide.over-sky { color:var(--sun-light); }
.section-guide.over-sky .guide-next { color:var(--sun-light); opacity:.8; }
.section-guide.over-sky .guide-progress { background:var(--lamp-white); }
/* Seven families: focus pull, lamp, sway, flow, focus hunt, contrail, sunlight.
   Lamp and sunlight use the shared continuous JS controller. */

@keyframes flow-air { from { transform:translateX(-12%); } to { transform:translateX(12%); } }
@keyframes flow-cloud { from { transform:translateX(calc(var(--tile-width) * -1)); } to { transform:translateX(0); } }

@keyframes flow-scroll { 0% { opacity:0; transform:translateY(0); } 12%,70% { opacity:.8; } 100% { opacity:0; transform:translateY(56px); } }
@keyframes contrail-return { from { opacity:.7; transform:scaleY(0); } to { opacity:0; transform:scaleY(1); } }
.js [data-reveal]:not(.is-visible) { opacity:0; }
.js [data-reveal].is-visible { opacity:1; }
.js .is-immediate[data-reveal] { animation:none; opacity:1; }
.motion-owner:not(.in-view),.motion-owner:not(.in-view) *,.motion-owner:not(.in-view) *::before,
.page-hidden *,.page-hidden *::before,.page-hidden *::after { animation-play-state:paused!important; }
@media (hover:hover) {
  a:hover { text-decoration-color:currentColor; }
  .section-guide:hover .guide-label,.section-guide:focus-within .guide-label { opacity:1; }
  .footer-row a:hover::before { animation:contrail-return 900ms linear both; }
}
@media (min-width:1024px) { .page-width { padding-left:max(72px,calc(164px - (100vw - min(100vw,1240px)) / 2)); } }
@media (max-width:1023px) {
  .section-guide { display:none; }
  .mobile-location { display:inline-flex; align-items:center; gap:7px; margin-left:8px; font:400 12px/1.5 var(--f-body); letter-spacing:0; }
  .location-lamp { width:4px; height:4px; flex:none; border-radius:50%; background:var(--ultra); opacity:1; }
}
@media (max-width:960px) { :root { --gap-section:72px; --gap-head:24px; --gap-item:32px; } }
@media (max-width:1100px) {
  .folio-section { grid-template-columns:minmax(0,1fr); row-gap:var(--gap-head); }
  .sec-head { position:static; grid-column:auto; }
  .sec-head h2 { flex-direction:row; align-items:baseline; gap:20px; }
  .sec-head .jp { writing-mode:horizontal-tb; }
  .sec-head .en { margin-top:0; }
  .sec-body { grid-column:auto; }
  #projects .sec-body,#talks .sec-body { padding-right:0; }
  .fixture-wires { top:0; right:0; width:min(100vw,460px); aspect-ratio:4 / 3; }
  .pole-photo { inset:auto; top:0; right:0; width:150%; height:100%; }
  .pole-photo { clip-path:inset(0 0 0 74.5%); mask-image:linear-gradient(to bottom,#000 calc(var(--gap-section) - 32px),transparent calc(var(--gap-section) + 4px)); }
  .wire-toc-full { display:none; }
  .wire-toc-compact { display:block; }
  .fixture-signal { top:calc(var(--gap-section) + var(--section-gap-adjust,0px) - 20px); right:0; width:150px; height:72px; aspect-ratio:auto; overflow:clip; mask-image:linear-gradient(to bottom,#000 64%,transparent 95%); }
  .fixture-signal .signal-pole,.fixture-signal .signal-head { height:105px; }
  .cumulonimbus { width:170vw; }
  .links a { grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; }
  .link-url { grid-row:2; grid-column:1; font-size:13px; }
  .links .outward { grid-row:1 / 3; grid-column:2; align-self:center; }
}
@media (max-width:720px) {
  .fixed-ui { inset:16px 16px auto; }
  .signature { padding-inline:10px; font-size:14px; letter-spacing:.03em; }
  .sec-head .jp { font-size:24px; }
  .sec-head .en { font-size:16px; }
  .work h3,.appearance h3,.work h3[lang="en"] { font-size:21px; }
  .identity-name { gap:20px; }
  .identity-icon { width:64px; height:64px; }
  .identity-text a { font-size:16px; }
  .profile > div { grid-template-columns:4em minmax(0,1fr); }
  .year-group { grid-template-columns:minmax(0,1fr); gap:16px; }
  .year-group h3 { position:relative; top:auto; font-size:32px; }
  .events > li { grid-template-columns:5.2rem minmax(0,1fr); }
  .events > li > time { font-size:16px; }
  .link-name { font-size:19px; }
  .footer-row { gap:8px; font-size:12px; }
  .menu-panel { padding:32px 24px; }
}
@media (max-aspect-ratio:4/5),(max-width:720px) and (orientation:portrait) {
  .opening { --hero-name-size:clamp(46px,14vw,66px); }
  .hero-caption { top:11svh; right:18px; left:auto; display:flex; flex-direction:row-reverse; align-items:flex-start; gap:10px; }
  .opening h1,.hero-name,.hero-letter { writing-mode:vertical-rl; text-orientation:sideways; }
  .hero-name { gap:.12em; }
  .hero-sub { writing-mode:vertical-rl; text-orientation:sideways; white-space:nowrap; margin:0; font-size:max(15px,calc(var(--hero-name-size) * .26)); letter-spacing:.14em; }
  .hero-moon { left:14%; top:17%; width:13vw; min-width:44px; }
  .lantern-glass { mask-image:image-set(url("images/layers/lamp-glass-mask-tall.webp?v=25") 1x,url("images/layers/lamp-glass-mask-tall-2x.webp?v=25") 2x); }
}
@media (max-height:620px) and (orientation:landscape) {
  .hero-caption { top:32%; }
  .menu-close { margin-bottom:16px; } .menu-toc a { min-height:56px; } .menu-contact { padding-block:20px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; }
  .js [data-reveal],.js [data-reveal]:not(.is-visible),.js .reveal-character,.js .reveal-word,.js .reveal-line,.js .events > li > * { opacity:1!important; filter:none!important; transform:none!important; }
  .scroll-dot { top:56px; }
  .life-air { transform:none; }
  .cloud-crown,.sun-dust,.passing-shadow,.signal-led,.wire-current { display:none; }
  .work:focus-within > .lamp-feedback,.appearance:focus-within > .lamp-feedback,.links a:focus-visible > .lamp-feedback,.events > li:focus-within > .lamp-feedback { opacity:.24; }
}
@media (prefers-reduced-motion:reduce) and (hover:hover) {
  .work:hover > .lamp-feedback,.appearance:hover > .lamp-feedback,.links a:hover > .lamp-feedback,.events > li:hover > .lamp-feedback { opacity:.24; }
}
html:not(.js) *,html:not(.js) *::before,html:not(.js) *::after { animation:none!important; }

/* v17: the existing seven vocabularies, with finer units of information. */
.atmosphere { position:fixed; inset:12px 0; z-index:12; pointer-events:none; overflow:clip; mask-image:linear-gradient(to bottom,transparent,#000 40px,#000 calc(100% - 40px),transparent); }
.sun-dust { position:absolute; inset:-12px 0; opacity:0; }
.hero-out .sun-dust { opacity:1; }
.sun-dust i { position:absolute; border-radius:50%; background:var(--lamp-white); opacity:var(--dust-opacity,.35); }
.passing-shadow { position:absolute; left:-90vw; top:calc(-20vh - 12px); width:80vw; height:130vh; background:radial-gradient(ellipse closest-side,var(--sun-shadow) 35%,color-mix(in srgb,var(--sun-shadow) 55%,transparent) 65%,transparent 100%); opacity:0; }
.js .granular-title[data-reveal]:not(.is-visible),.js .granular-medium[data-reveal]:not(.is-visible),.js .granular-paragraph[data-reveal]:not(.is-visible),.js .events > li[data-reveal]:not(.is-visible) { opacity:1; }
.js .granular-title[data-reveal],.js .granular-medium[data-reveal],.js .granular-paragraph[data-reveal],.js .events > li[data-reveal] { animation:none; }
.js .granular-title:not(.is-visible) .reveal-character,.js .granular-medium:not(.is-visible) .reveal-word,.js .granular-paragraph:not(.is-visible) .reveal-line,.js .events > li:not(.is-visible) > * { opacity:0; }
.js .granular-title.is-visible .reveal-character { opacity:1; }
.reveal-word { display:inline-block; }
.js .granular-medium.is-visible .reveal-word { animation:lamp-word 240ms linear var(--unit-delay,0ms) both; }
.js .granular-paragraph.is-visible .reveal-line { opacity:1; }
.js .events > li.is-visible > * { opacity:1; }
.js .events > li:not(.is-visible) > .event-lamp { opacity:0; }
.js .events > li.is-visible > .event-lamp { animation:lamp-entry 420ms linear both; background:var(--lamp-white); box-shadow:0 0 6px var(--lamp-white); }
.js .is-immediate[data-reveal] :is(.reveal-character,.reveal-word,.reveal-line,.focus-character),
.js .events > li.is-immediate[data-reveal] > :is(time,.event-copy) { animation:none!important; opacity:1; filter:none; transform:none; }
.link-name .focus-character { opacity:.92; }
.section-guide.over-sky::before { background:var(--lamp-white); opacity:.4; }
.section-guide.over-sky .guide-lamp { border-color:var(--lamp-white); }
.identity-icon:focus-visible .icon-lamp { opacity:.4; }

@keyframes lamp-word { 0% { opacity:0; } 24% { opacity:.85; } 40% { opacity:.35; } 65%,100% { opacity:1; } }
@keyframes lamp-entry { 0% { opacity:0; } 25% { opacity:.8; } 40% { opacity:.3; } 100% { opacity:.75; } }
@media (prefers-reduced-motion:reduce) {
  .js .events > li > .event-lamp { opacity:.85!important; }
  .js .link-name .focus-character { opacity:1; }
  .wire-toc a:hover,.wire-toc a:focus-visible { fill:var(--ultra-deep); text-decoration:underline; }
  .identity-icon:hover .icon-lamp { opacity:.4; }
}

/* v18: sky remains beside the information, inside the existing heading space. */
.sec-head h2 { position:relative; z-index:2; }
.sky-window { position:absolute; left:18px; top:24px; width:128px; height:184px; padding:3px; border:1px solid var(--line); background:var(--mat); overflow:hidden; pointer-events:none; --window-tile:192px; }
.window-exposure { position:absolute; inset:4px; overflow:hidden; }
.window-depth { position:absolute; inset:-3px; }
.window-sky { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--crop,40% 20%); }
.window-cloud { position:absolute; left:0; width:120%; height:66%; background:var(--window-cloud) left bottom / var(--window-tile) 100% repeat-x;  }
.window-cloud-far { opacity:.65; height:52%; }
.window-cloud-near { opacity:.94; }
.window-exposure::after { content:""; position:absolute; inset:0; background:var(--paper); opacity:.12; z-index:9; }
.window-contrails { position:absolute; inset:0; }
.window-trail { width:115%; position:absolute; left:-8%; top:31%; height:.65px; background:var(--lamp-white); transform:rotate(-12deg); transform-origin:left center; }

.finale-lamp { --finale-lamp-ratio:280 / 1331; --finale-glass-x:28.76%; --finale-glass-y:15.03%; --finale-glass-w:49.32%; --finale-glass-h:14.58%; position:absolute; left:5vw; bottom:0; height:38vh; width:auto; aspect-ratio:var(--finale-lamp-ratio); z-index:3; mask-image:linear-gradient(to bottom,#000 80%,transparent); }
.finale-lamp img { display:block; width:100%; height:100%; }
.finale-lamp-glass,.finale-lamp-bloom { position:absolute; background:var(--lamp-white); mix-blend-mode:screen; pointer-events:none; }
.finale-lamp-glass { inset:0; mask-position:center; mask-size:100% 100%; mask-repeat:no-repeat; opacity:.1364; }
.finale-lamp-bloom { left:calc(var(--finale-glass-x) - 7px); top:calc(var(--finale-glass-y) - 7px); width:calc(var(--finale-glass-w) + 14px); height:calc(var(--finale-glass-h) + 14px); border-radius:50%; background:radial-gradient(ellipse closest-side,var(--lamp-white),transparent 100%); opacity:.0496;  }
@media (max-width:960px) {
  .sky-window { width:72px; height:100px; --window-tile:102px; }
  .finale-lamp { left:4vw; height:38vh; max-width:18vw; }
  .links a { margin-left:76px; }
  .links a.over-sky { margin-left:60px; margin-right:0; }
}
@media (prefers-reduced-motion:reduce) {
  .js .granular-title .reveal-character,.js .granular-medium .reveal-word,.js .granular-paragraph .reveal-line,
  .js .events > li > *,.js .link-name .focus-character { opacity:1!important; filter:none!important; transform:none!important; }
  .signal-lit { opacity:.78!important; }
  .wire-toc a { opacity:1!important; }
  .signal-head,.wire-scene { transform:none!important; rotate:none!important; }
  *,*::before,*::after { transition:none!important; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-letter,.hero-sub-letter { translate:none!important; filter:none!important; opacity:1!important; }
  .cloud-layer[data-cloud-copy="1"] { display:none; }
  .sky-window .window-cloud { transform:none!important; }
}
/* v20: one world, paired photographic day and night exposures. */
html[data-mode="night"] {
  --opening-edge:rgb(20,37,72); --closing-edge:rgb(61,70,89);
  color-scheme:dark;
  --paper:#0F1725; --paper-2:#16213A; --mat:#16213A;
  --ink:#DCE6F0; --ink-2:#B3C2D3; --ink-3:#8C9DB2;
  --line:rgba(220,230,240,.14); --line-2:rgba(220,230,240,.28);
  --ultra:#8DBBEA; --ultra-deep:#8DBBEA; --code-bg:rgba(220,230,240,.08);
  --sky-field:#122346; --sky-2:#243F60; --row-paper:rgba(15,23,37,.62);
  --sun-shadow:#0F1725; --air:rgba(234,242,255,.025);
}
body,main,.menu-panel,.profile,.profile > div,.events > li,.sky-window,.links a,.filter button,
.sec-head h2,.sec-head .en,.medium,.desc,.note,.profile dt,.profile dd,.work h3 a,.appearance h3 a,
.year-group h3,.events > li > time,.count,.sub,.planned,.link-name,.link-url,.outward,
.signature,.menu-btn,.menu-toc a,.menu-label,.menu-social a,.nightmode-toggle,.section-guide {
  transition:color 1.2s var(--ease-soft),background-color 1.2s var(--ease-soft),border-color 1.2s var(--ease-soft);
}
body { transition:color 1.2s var(--ease-soft); } /* why: body's background only colors the browser chrome */
.mode-day,.mode-night { transition:none; }
.mode-day { opacity:1; }
.mode-night { opacity:0; pointer-events:none; }
html[data-mode="night"] .mode-day { opacity:0; }
html[data-mode="night"] .mode-night { opacity:1; }
.hero-layer > .mode-night,.cloud-layer > .mode-night,.pole-photo > .mode-night,
.signal-pole > .mode-night,.signal-head > .mode-night,.finale-lamp > .mode-night {
  position:absolute; inset:0; width:100%; height:100%;
}
.background-exposure { position:absolute; inset:0; background-size:inherit; background-position:inherit; background-repeat:inherit; pointer-events:none; }
.hero-clouds .background-exposure { background-size:var(--tile-width) var(--strip-height); background-position:left bottom; background-repeat:repeat-x; }
.finale-low-clouds .background-exposure { background-size:auto 100%; background-position:inherit; background-repeat:repeat-x; }
.window-cloud .background-exposure { background-size:var(--window-tile) 100%; background-position:inherit; background-repeat:repeat-x; }
html[data-mode="night"] .signature,html[data-mode="night"] .menu-btn { background:#16213A; border-color:rgba(220,230,240,.22); color:var(--ink); }
.hero-moon { transition:opacity 2.4s var(--ease-soft); }
.hero-moon img { position:relative; z-index:1; }
.hero-moon::before { content:""; position:absolute; left:50%; top:50%; width:500%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(closest-side,rgba(234,242,255,.38),rgba(234,242,255,.12) 35%,transparent 100%); opacity:0; pointer-events:none; transition:opacity 2.4s var(--ease-soft); }
html[data-mode="night"] .hero-moon { opacity:1; }
.hero-moon img.mode-night { position:absolute; inset:0; filter:brightness(1.5) saturate(.6) contrast(1.05) drop-shadow(0 0 3px rgba(238,244,255,.85)) drop-shadow(0 0 12px rgba(234,242,255,.45)); }
html[data-mode="night"] .hero-moon::before { opacity:1; }
.lantern-glow {  }
.lantern-halo,.finale-lamp-halo { position:absolute; display:block; translate:-50% -50%; border-radius:50%; background:radial-gradient(closest-side,rgba(234,242,255,.50),rgba(234,242,255,.30) 30%,rgba(234,242,255,.10) 60%,transparent 100%); opacity:0; pointer-events:none; }
.finale-lamp-halo { mix-blend-mode:screen; z-index:3; }
.sun-dust { transition:opacity 2.4s var(--ease-soft); }
html[data-mode="night"] .sun-dust { opacity:0; }
.night-stars { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:0; transition:opacity 1.2s var(--ease-soft); }
html[data-mode="night"] .night-stars { opacity:1; transition-delay:1.2s; }
.hero-scene > .night-stars { z-index:1; }
.hero-clouds { z-index:2; }
.hero-clouds-near { z-index:3; }
.hero-lamp { z-index:4; }
.lantern-light { z-index:5; }
.window-stars { position:absolute; inset:0; }
.window-stars i { position:absolute; width:1px; height:1px; border-radius:50%; background:#EAF2FF; }
.window-grain { position:absolute; inset:0; pointer-events:none; }
.window-grain::before { content:""; position:absolute; inset:0; background-image:var(--grain-image,none); background-repeat:repeat; opacity:.6; }
/* The heading is on paper: the photograph stays beside its glyphs. */
.sky-window { left:48px; }
html[data-mode="night"] .sky-window .window-exposure::after { opacity:0; }
html[data-mode="night"] .guide-next { opacity:1; }
html[data-mode="night"] .sec-head .jp,html[data-mode="night"] .sec-head .en { text-shadow:0 0 2px var(--paper),0 0 10px var(--paper); }
html[data-mode="night"] #links .sec-head .en { color:var(--ink); }
html[data-mode="night"] .section-guide [aria-current] .guide-lamp { box-shadow:0 0 7px var(--lamp-white); }
html[data-mode="night"] .events > li > .event-lamp { background:var(--lamp-white); box-shadow:0 0 8px var(--lamp-white); opacity:.95; }
html[data-mode="night"] .work > .lamp-feedback,html[data-mode="night"] .appearance > .lamp-feedback,
html[data-mode="night"] .links a > .lamp-feedback,html[data-mode="night"] .events > li > .lamp-feedback { opacity:0; }
html[data-mode="night"] .links a { background:rgba(15,23,37,.62); padding-inline:16px; }
html[data-mode="night"] .link-url,html[data-mode="night"] .links .outward { color:var(--ink); }
html[data-mode="night"] .footer-row { color:#DCE6F0; text-shadow:0 1px 3px var(--paper),0 0 8px var(--paper),0 2px 12px rgba(15,23,37,.9); }
html[data-mode="night"] .section-guide.over-sky .guide-label { background:rgba(15,23,37,.82); padding:2px 6px; }
html[data-mode="night"] .section-guide.over-sky .guide-next { opacity:1; }
.signal-yellow { position:absolute; inset:0; opacity:0; pointer-events:none; }
.signal-day-exposure { position:absolute; inset:0; pointer-events:none; }
.signal-yellow-bloom { position:absolute; left:36.043%; top:43.357143%; width:calc(13.029% + 40px); height:calc(15.122857% + 40px); translate:-50% -50%; rotate:113.4deg; border-radius:50%; background:radial-gradient(ellipse closest-side,#F3B33D 15%,transparent 100%); }
html[data-mode="night"] .signal-led { opacity:0; }
/* The upright photograph fixes the wire endpoints; tension fits the SVG span. */
.fixture-wires .wire-toc { inset:0; width:100%; height:100%; }
.fixture-wires .pole-photo { clip-path:inset(0 0 0 74.5%); }
#projects .sec-head { position:relative; top:0; z-index:auto; }
@media (min-width:961px) {
  #projects .sec-head { position:sticky; top:112px; z-index:2; }
}
#projects .sky-window { z-index:0; }
#projects .fixture-wires { z-index:1; }
@media (max-width:1100px) {
  .fixture-wires .pole-photo { mask-image:linear-gradient(to bottom,#000 50%,transparent 85%); }
}
/* v20b: the small sky belongs to the heading row, above the work list. */
@media (max-width:1100px) {
  .sec-head { display:flex; align-items:center; gap:16px; min-height:72px; }
  .sec-head .sky-window { position:relative; inset:auto; flex:0 0 56px; width:56px; height:72px; --window-tile:74px; }
  .sec-head h2 { min-width:0; gap:16px; align-items:center; }
  .sec-head .jp,.sec-head .en { flex:none; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-mode="night"] .signal-on { opacity:0!important; }
  .night-stars { transition:none; }
}

/* v20d: every desktop window follows the widest measured label. */
@media (min-width:1101px) {
  .sec-head .sky-window { left:var(--window-left,112px); top:24px; width:var(--window-width,128px); height:var(--window-height,184px); --window-tile:192px; }
}

/* v20c: photographic catenaries remain continuous at every viewport scale. */
.wire-strand { fill:none; stroke:#5E728D; stroke-width:1.3px; stroke-linecap:round; pointer-events:stroke; transition:stroke 2.4s var(--ease-soft); }
.wire-service { stroke-width:1.5px; }
.wire-part { pointer-events:none; }
.wire-toc-compact { pointer-events:none; }
html[data-mode="night"] .wire-strand { stroke:#9FB1C6; }
@media (max-width:1100px) {
  .wire-strand { stroke-width:1.1px; }
  .wire-service { stroke-width:1.5px; }
}

/* v20f: bound live surfaces; paint effects once and animate their small owners. */
.hero-photo,.closing-scene { contain:paint; }
.wire-toc { contain:paint; isolation:isolate; transform:translateZ(0); }
.wire-toc:not(.in-view) { will-change:auto; }
.hero-clouds,.finale-low-clouds,.window-cloud { overflow:clip; }
.flow-tile { position:absolute; display:block; left:0; bottom:0; pointer-events:none; }
.flow-tile > .background-exposure { background-size:inherit; background-repeat:repeat-x; }
.star-point { position:absolute; display:block; background:#EAF2FF; border-radius:50%; }
.meteor { position:absolute; left:0; top:0; }
.meteor-tail { position:absolute; height:1.2px; top:-.6px; transform-origin:right center; background:linear-gradient(to right,rgba(234,242,255,0),rgba(234,242,255,.9)); }
.meteor-head { position:absolute; width:2.6px; height:2.6px; left:-1.3px; top:-1.3px; border-radius:50%; background:#EAF2FF; box-shadow:0 0 4px #EAF2FF; }
.trail-piece { position:absolute; display:block; transform-origin:left center; }
.trail-development { position:absolute; inset:0; transform-origin:left center; }
/* Contrail inks are 1px lines pre-blurred as Gaussian gradients (sigma .85px and 2.02px), so scaleY
   widens them exactly like the former filter:blur(), which Safari composited with colored seams.
   Inks abut: the pieces' 1.2px overlap would double them into bright ticks. */
.trail-ink { position:absolute; left:0; right:1.2px; transform-origin:center; }
.trail-ink:nth-child(1) { top:0; height:1px; background:currentColor; }
.trail-ink:nth-child(2) { top:-2.05px; height:5.1px; background:linear-gradient(rgba(234,251,255,.005) 0%,rgba(234,251,255,.021) 8.33%,rgba(234,251,255,.064) 16.67%,rgba(234,251,255,.153) 25%,rgba(234,251,255,.285) 33.33%,rgba(234,251,255,.415) 41.67%,rgba(234,251,255,.470) 50%,rgba(234,251,255,.415) 58.33%,rgba(234,251,255,.285) 66.67%,rgba(234,251,255,.153) 75%,rgba(234,251,255,.064) 83.33%,rgba(234,251,255,.021) 91.67%,rgba(234,251,255,.005) 100%); }
.trail-ink:nth-child(3) { top:-5.55px; height:12.1px; background:linear-gradient(rgba(234,251,255,.002) 0%,rgba(234,251,255,.009) 8.33%,rgba(234,251,255,.027) 16.67%,rgba(234,251,255,.064) 25%,rgba(234,251,255,.119) 33.33%,rgba(234,251,255,.174) 41.67%,rgba(234,251,255,.197) 50%,rgba(234,251,255,.174) 58.33%,rgba(234,251,255,.119) 66.67%,rgba(234,251,255,.064) 75%,rgba(234,251,255,.027) 83.33%,rgba(234,251,255,.009) 91.67%,rgba(234,251,255,.002) 100%); }
.signal-led { contain:paint; transform:translateZ(0); }
.finale-sky { inset:calc(-1 * var(--edge-overdraw,calc(2.5vh + 10px))) -10px; }
.finale-low-clouds { bottom:calc(-1 * var(--edge-overdraw,calc(2.5vh + 10px))); height:calc(clamp(100px,18vh,200px) + 2 * var(--edge-overdraw,calc(2.5vh + 10px))); }
.cloud-parallax { inset:calc(-1 * var(--edge-overdraw,calc(7.5vh + 8px))) 0; }
.finale-lamp { bottom:-8px; height:calc(38vh + 8px); width:calc(38vh * 280 / 1331); }
.finale-lamp > img.mode-day,.finale-lamp > img.mode-night { height:calc(100% - 8px); }
.finale-lamp-glass { bottom:8px; }
.finale-lamp-bloom { top:calc(38vh * .1503 - 7px); height:calc(38vh * .1458 + 14px); }
.wire-spark { position:absolute; top:-4px; left:-4px; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle closest-side,var(--lamp-white) 15%,transparent 100%); opacity:0; pointer-events:none; }
.scene-sun { position:absolute; inset:0; z-index:8; pointer-events:none; overflow:clip; }
.scene-sun-dark,.scene-sun-bright { position:absolute; inset:0; pointer-events:none; }
.scene-sun-dark { background:var(--sun-shadow); mix-blend-mode:multiply; opacity:.015; }
.scene-sun-bright { background:var(--sun-light); mix-blend-mode:screen; opacity:.012; }
.scene-air { position:absolute; inset:-10%; background:radial-gradient(ellipse closest-side,var(--air) 65%,transparent 100%); animation:flow-air 90s linear infinite; pointer-events:none; }
.cloud-surface { position:absolute; display:block; overflow:clip; }
.cloud-surface > img { position:absolute; max-width:none; }
.lamp-surface { position:absolute; display:block; overflow:clip; }
.lamp-surface > picture { position:absolute; inset:0; }
.lamp-switch { position:absolute; display:block; min-width:0; min-height:0; padding:0; border:0; background:transparent; cursor:pointer; pointer-events:auto; touch-action:pan-y; outline:none; z-index:2; }
.lamp-switch svg { display:block; width:100%; height:100%; overflow:visible; }
.lamp-switch polygon { fill:none; stroke:transparent; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.opening .lamp-switch:focus-visible { outline:none; }
.lamp-switch:focus-visible polygon { stroke:#D2EBFF; }
.wire-bird { transform-origin:50% 100%; }
@media (prefers-reduced-motion:no-preference) {
  .js .hero-clouds { width:110%; transform-origin:50% 100%; will-change:transform; }
  .js .hero-clouds:not(.in-view) { will-change:auto; }
  .js .hero-clouds-near { overflow:visible; mask-image:none; opacity:1; }
  .js .hero-clouds-near > .flow-tile { opacity:.92; mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 82%,transparent); }
  .js .hero-clouds-near::after { content:""; position:absolute; left:0; right:0; top:calc(var(--strip-height) * .82); height:calc(var(--strip-height) * .18 + var(--paper-overdraw,0px)); background:var(--paper); mask-image:linear-gradient(to bottom,transparent,#000 calc(var(--strip-height) * .18)); pointer-events:none; }
}
.lamp-surface > .lamp-lit { z-index:1; }
.lamp-surface > .day-lamp-glow { z-index:1; }
/* Release decorative surfaces while preserving the lamp and moon buttons. */
.top-dormant .hero-photo,.top-dormant .hero-photo *,.top-dormant .hero-moon,.top-dormant .hero-moon * { will-change:auto!important; }
.top-dormant .top-decoration,.top-dormant .top-decoration * { visibility:hidden!important; animation:none!important; }
.top-dormant .hero-photo,.finale-dormant .closing-scene { mask-image:none; }
.top-dormant .hero-clouds,.top-dormant .flow-tile { transform:none!important; }
.top-dormant .hero-lamp,.top-dormant .lamp-surface { isolation:auto; transform:none!important; }
.top-dormant .hero-moon { transform:none!important; opacity:1; transition:none; }
.lamp-surface,.finale-day-surface { isolation:isolate; }
.finale-day-surface { position:absolute; inset:0 0 8px; }
.fixture-wires { pointer-events:auto; }
.day-lamp-glow { position:absolute; display:block; overflow:clip; mix-blend-mode:plus-lighter; pointer-events:none; }
.day-lamp-glow img { position:absolute; display:block; max-width:none; }
.day-lamp-halo { position:absolute; display:block; translate:-50% -50%; background:radial-gradient(closest-side,#EAF2FF 0%,rgba(234,242,255,.45) 42%,transparent 100%); opacity:0; pointer-events:none; }
.finale-day-halo { z-index:3; }
.contrail-glint { position:absolute; left:-3.5px; top:-3.5px; width:7px; height:7px; border-radius:50%; background:radial-gradient(closest-side,rgba(234,242,255,.4),transparent); pointer-events:none; }
.contrail-glint::after { content:""; position:absolute; left:2.5px; top:2.5px; width:2px; height:2px; border-radius:50%; background:rgba(255,255,255,.95); }
.wire-birds,.distant-flock,.paper-planes { position:absolute; inset:0; pointer-events:none; }
.wire-birds { z-index:2; }
.wire-bird { position:absolute; left:0; top:0; width:35px; height:25px; pointer-events:none; }
.bird-pose { position:absolute; bottom:0; left:50%; translate:-50% 0; display:block; opacity:0; pointer-events:none; }
.wire-bird .bird-pose { width:auto; height:auto; }
.distant-flock { z-index:1; }
.flock-bird { position:absolute; width:6px; height:5px; }
.flock-bird .bird-pose { width:100%; height:100%; object-fit:contain; }
.command-bird .bird-pose { filter:brightness(0); opacity:.72; }
.paper-planes { z-index:5; }
.paper-plane { --plane-width:clamp(26px,7.5vw,72px); position:absolute; left:calc(var(--plane-width) / -2); top:calc(var(--plane-width) / -4); width:var(--plane-width); height:calc(var(--plane-width) / 2); transform-origin:center; pointer-events:none; }
.paper-plane img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; translate:none; opacity:0; }
/* v22c: the final span occupies only the gap below Links. */
.final-wire-band { position:absolute; z-index:3; pointer-events:none; }
.final-wire-svg { overflow:hidden; contain:paint; transform:translateZ(0); }
.final-wire-svg .wire-strand { filter:none; pointer-events:none; }
html[data-mode="night"] .final-wire-svg .wire-strand { stroke:#293447; }
.final-wire-moonlight { fill:none; stroke:#91ABC7; stroke-width:.35px; stroke-linecap:round; opacity:0; transform:translateY(-.55px); pointer-events:none; transition:opacity 2.4s var(--ease-soft); }
html[data-mode="night"] .final-wire-moonlight { opacity:.18; }
.finale-pole { position:absolute; z-index:3; overflow:hidden; pointer-events:none; }
.finale-pole img { position:absolute; top:0; max-width:none; }
.closing-scene .finale-lamp { z-index:4; }
.ped-signal { position:absolute; z-index:5; pointer-events:none; }
.ped-signal img { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.wire-packet,.wire-insulator-light { position:absolute; left:-1.5px; top:-1.5px; width:3px; height:3px; border-radius:50%; color:var(--ultra); background:#fff; pointer-events:none; opacity:0; }
html[data-mode="night"] :is(.wire-packet,.wire-insulator-light) { color:var(--lamp-white); }
.wire-packet::before { content:""; position:absolute; left:-5.5px; top:-5.5px; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle,currentColor,transparent 72%); opacity:.35; }
.wire-packet::after { content:""; position:absolute; inset:0; border-radius:inherit; background:#fff; }
.wire-packet-tail { position:absolute; left:1.5px; top:1.5px; width:1px; height:1px; overflow:visible; }
.wire-insulator-light { left:-7px; top:-7px; width:14px; height:14px; transform:translate(-50%,-50%); background:radial-gradient(circle,#fff 10%,currentColor 24%,transparent 72%); box-shadow:0 0 7px currentColor; }
.distant-firework { position:absolute; z-index:1; pointer-events:none; }
.firework-grain { position:absolute; left:-1px; top:-1px; width:2px; height:2px; border-radius:50%; background:#EAF5FA; }
.final-effect-dormant,.final-effect-dormant *,.finale-dormant .closing-scene,.finale-dormant .closing-scene * { will-change:auto!important; }
.final-effect-dormant:not(.finale-pole):not(.ped-signal),.final-effect-dormant:not(.finale-pole):not(.ped-signal) * { visibility:hidden!important; }
.finale-dormant .cloud-surface,.finale-dormant .cloud-parallax,.finale-dormant .flow-tile { transform:none!important; }
.finale-dormant .night-stars,.finale-dormant .finale-contrails,.finale-dormant .distant-flock,.finale-dormant .paper-planes,.finale-dormant .distant-firework,.finale-dormant .scene-air,.finale-dormant .scene-sun,.finale-dormant .finale-lamp-halo,.finale-dormant .finale-day-halo { visibility:hidden!important; animation:none!important; }
.menu-open .scene-air { animation-play-state:paused!important; }
@media (max-width:767px) {
  .closing .colophon { margin-top:calc(min(var(--gap-section),16vh) + 80px); }
}
@media (min-width:768px) and (max-width:1366px) {
  .footer-row a { margin-right:72px; }
}
html[data-mode="night"] .paper-plane { filter:brightness(.8); }
.hero-sky > picture { position:absolute; inset:0; overflow:clip; }
.lantern-glass,.lantern-glow,.lantern-halo { mix-blend-mode:screen; }
.focus-sharp { display:inline-block; }
.hero-letter,.hero-sub-letter,.focus-character { position:relative; }
.focus-soft,.focus-hunt { position:absolute; inset:0; opacity:0; pointer-events:none; }
.focus-soft::before,.focus-hunt::before { content:attr(data-glyph); white-space:pre; }
/* Glyph exposures blur with text-shadow, not filter: Safari drew colored seams on filtered layers.
   A shadow radius of 2x matches blur(x); ::after keeps the inherited text-shadow (the halo). */
.focus-soft::before { -webkit-text-fill-color:transparent; text-shadow:0 0 1.2px currentColor; }
.focus-hunt::before { -webkit-text-fill-color:transparent; text-shadow:0 0 5px currentColor; }
.focus-soft::after,.focus-hunt::after { content:attr(data-glyph); position:absolute; inset:0; white-space:pre; -webkit-text-fill-color:transparent; }
.focus-ghost,.focus-ghost * { animation:none!important; pointer-events:none!important; }
.focus-ghost-text::before { content:attr(data-copy); white-space:inherit; }
.is-dormant,.is-dormant * { visibility:hidden!important; }
.render-dormant,.render-dormant * { visibility:hidden!important; }
.night-stars,html[data-mode="night"] .night-stars { transition:none; }
.mobile-location { align-items:baseline; font:inherit; color:var(--ink-2); }
.signature-text { display:inline-flex; align-items:baseline; white-space:nowrap; }
.location-lamp { display:none; }
.location-separator { font:inherit; }
@media (max-width:1023px) {
  .mobile-location { gap:6px; margin-left:6px; font:inherit; letter-spacing:inherit; }
}
@media (prefers-reduced-motion:reduce) {
  .focus-soft,.focus-hunt { display:none; }
  .focus-sharp { opacity:1!important; }
  .wire-toc { transform:none; }
}