:root{--ink:#181818;--muted:#6b6b6b;--red:#bd2929;--motion:380ms;--slant:-28deg}*{box-sizing:border-box}body{margin:0;background:white;color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:6px}.skip{position:fixed;top:-80px;background:#fff;padding:15px;z-index:9}.skip:focus{top:0}header{height:140px;padding:42px 5vw;display:flex;align-items:flex-start;justify-content:space-between}.brand{font-size:44px;font-weight:700;letter-spacing:-4px;line-height:.9}.brand span{display:block;font-size:10px;letter-spacing:5px;font-weight:400;margin-top:15px}.header-note,.index-link,.eyebrow,.home-bottom,footer,.page-top,#page-nav,.meta,.filters{font-family:monospace;font-size:10px;letter-spacing:1px;line-height:1.6}.header-note{margin-right:auto;margin-left:12vw}.index-link{border-bottom:1px solid;padding-bottom:5px}#home{min-height:calc(100svh - 210px);position:relative;display:flex;align-items:center;padding:30px 5vw 100px;overflow:hidden}.intro{width:34%;align-self:center}.eyebrow{color:var(--muted)}.intro h1{font-weight:400;font-size:clamp(38px,4.6vw,76px);line-height:1.02;letter-spacing:-3px;margin:26px 0}.intro p{font-size:13px;line-height:1.7;color:var(--muted)}.line-nav{position:relative;width:62%;height:420px;display:flex;justify-content:center;align-items:center;transform:translateX(-15px)}.rail{position:relative;height:320px;flex:1;min-width:0;transform:skewX(var(--slant));display:block}.rail:before{content:'';position:absolute;left:50%;top:0;width:2px;height:100%;background:var(--ink);transition:transform var(--motion),width var(--motion)}.rail.decorative:before{width:1px}.rail.contact:before{background:var(--red)}.rail-label{position:absolute;left:calc(50% + 13px);top:0;writing-mode:vertical-rl;transform:skewX(28deg);font-size:12px;letter-spacing:.3px;opacity:0;transition:opacity var(--motion),translate var(--motion);translate:0 12px;white-space:nowrap}.rail:hover:before,.rail:focus-visible:before{width:4px;transform:translateY(-12px)}.rail:hover .rail-label,.rail:focus-visible .rail-label{opacity:1;translate:0 0}.rail.contact .rail-label{color:var(--red)}.home-bottom{position:absolute;bottom:30px;left:5vw;right:5vw;display:flex;justify-content:space-between;color:var(--muted)}footer{border-top:1px solid #ddd;margin:0 5vw;padding:24px 0;display:flex;justify-content:space-between;color:var(--muted);font-size:9px}#page{padding:25px 5vw 70px;min-height:calc(100svh - 210px)}.page-top{display:flex;justify-content:space-between;border-top:1px solid;padding-top:16px}.page-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;margin:70px 0 60px;gap:40px}.page-heading h1{font-size:clamp(48px,7vw,110px);letter-spacing:-5px;font-weight:400;margin:0;line-height:1}.page-heading p{font-size:20px;line-height:1.5;max-width:520px;margin:0}.text-block{max-width:650px;margin-left:auto;font-size:18px;line-height:1.7}.placeholder{font-family:monospace;font-size:10px;color:var(--muted);letter-spacing:.6px}.entry{border-top:1px solid #ccc;padding:24px 0;display:grid;grid-template-columns:80px 1fr 1fr;gap:25px}.entry h2{font-size:24px;font-weight:400;margin:0}.entry p{margin:0;line-height:1.6;color:var(--muted)}.filters{display:flex;gap:10px;margin-bottom:30px}.filters button{border:1px solid #ccc;background:white;padding:9px 16px;cursor:pointer;font:inherit}.filters button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.projects{display:grid;grid-template-columns:1fr 1fr;gap:40px}.project{display:block;width:100%;text-align:left;color:inherit;border:0;background:none;padding:0;cursor:pointer}.project-art{aspect-ratio:1.5;background:#f3f3f0;position:relative;overflow:hidden}.project-art:before{content:'';position:absolute;inset:20% 22%;border:1px solid #8a8a85;transform:skewY(-16deg);box-shadow:25px 20px 0 -1px #f3f3f0,25px 20px 0 0 #8a8a85;transition:transform var(--motion)}.project:nth-child(even) .project-art:before{inset:25% 18%;transform:skewY(14deg)}.project:hover .project-art:before{transform:skewY(0deg) translateY(-8px)}.project h2{font-size:22px;font-weight:400;margin:18px 0 8px}.project .meta{color:var(--muted)}#page-nav{display:flex;flex-wrap:wrap;gap:22px;border-top:1px solid #ccc;margin-top:70px;padding-top:25px}#page-nav a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}#page-nav a:last-child{color:var(--red)}details{border-bottom:1px solid #ccc;padding:22px 0}summary{cursor:pointer;font-size:22px}details p{max-width:650px;line-height:1.7;color:var(--muted)}.contact-note{border-top:1px solid var(--red);padding-top:25px;font-size:20px;line-height:1.7}.detail-back{border:0;background:none;font:inherit;text-decoration:underline;cursor:pointer;padding:0;margin-bottom:25px}.detail-art{max-width:800px}.detail-meta{display:flex;gap:35px;margin:25px 0}.notice{font-size:12px;color:var(--muted)}[hidden]{display:none!important}@media(hover:none){.rail-label{opacity:1;translate:0 0}}@media(min-width:1500px){.line-nav{height:520px}.rail{height:400px}}@media(max-width:760px){header{height:115px;padding-top:28px}.brand{font-size:35px}.header-note{display:none}#home{display:block;padding-top:30px}.intro{width:100%}.intro h1{font-size:48px;letter-spacing:-2px}.intro p{font-size:12px}.line-nav{transform:none;width:100%;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:40px 0 15px}.rail{transform:none;height:60px;display:flex;align-items:center;border-top:1px solid #ccc}.rail:before{height:26px;left:8px;top:17px;transform:skewX(-28deg)}.rail-label{position:static;writing-mode:initial;transform:none;opacity:1;translate:none;margin-left:30px;font-size:14px}.rail.decorative{display:none}.rail:hover:before,.rail:focus-visible:before{transform:skewX(-28deg)}.home-bottom{position:static;margin-top:28px}.hint{display:none}footer{font-size:8px;gap:15px}footer span:nth-child(2){display:none}.page-heading{grid-template-columns:1fr;margin:45px 0;gap:25px}.page-heading h1{letter-spacing:-2px;font-size:52px}.page-heading p{font-size:18px}.projects{grid-template-columns:1fr}.entry{grid-template-columns:40px 1fr}.entry p{grid-column:2}.text-block{font-size:17px}.detail-meta{flex-direction:column;gap:8px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Personal identity leads; supplied studio logo remains secondary. */
.brand{font-size:25px;letter-spacing:-1px;line-height:1.1;font-weight:400}.brand span{font-family:monospace;font-size:8px;letter-spacing:1px;margin-top:12px}.header-note{display:none}.intro{width:38%}.intro h1{font-size:clamp(42px,5.3vw,82px);letter-spacing:-3px}.name-period{color:var(--ink)}.line-nav{width:58%}.studio-logo{display:block;width:110px;flex-shrink:0}.studio-logo img{display:block;width:100%;height:auto}footer{align-items:center;gap:20px}@media(max-width:760px){.brand{font-size:23px}.brand span{font-size:7px;letter-spacing:.6px}.intro{width:100%}.intro h1{font-size:58px}.line-nav{width:100%}.studio-logo{width:85px}footer{flex-wrap:wrap}footer span:last-child{display:none}}

/* Logo silhouette: eleven broad parallel strokes, rising upper edge,
   level baseline, seventh stroke red. Navigation retains full hit areas. */
@media(min-width:761px){
.line-nav{height:420px;align-items:flex-end;transform:none;padding:0 30px 35px 90px;isolation:isolate}
.rail{flex:1;height:calc(170px + var(--bar)*13px);transform:skewX(23deg);transform-origin:bottom center}
.rail:before,.rail.decorative:before{left:12%;width:76%;background:#050505}
.rail.contact:before{background:#e10a0a}
.rail-label{left:40%;top:-105px;writing-mode:vertical-rl;transform:skewX(-23deg);font-size:11px}
.rail:hover:before,.rail:focus-visible:before{width:76%;transform:translateY(-6px)}
}
@media(min-width:1500px){.line-nav{height:470px}.rail{height:calc(200px + var(--bar)*15px)}}
@media(max-width:760px){
.line-nav{display:flex;flex-wrap:wrap;gap:0 28px}.rail{flex:0 0 calc(50% - 14px)}
.rail:before{width:5px;transform:skewX(23deg)}
.rail:hover:before,.rail:focus-visible:before{width:5px;transform:skewX(23deg)}
.rail.contact:before{background:#e10a0a}
}

@media(max-width:760px){.rail:nth-child(11){order:1}.rail:nth-child(10){order:2}.rail:nth-child(9){order:3}.rail:nth-child(8){order:4}.rail:nth-child(7){order:5}.rail:nth-child(6){order:6}}

/* The six working strokes travel into a compact, persistent corner menu. */
.line-nav.is-docked{position:fixed;z-index:20;left:auto;right:35px;bottom:24px;width:210px;height:145px;padding:0 25px 25px 15px;margin:0;display:flex;align-items:flex-end;gap:0;transform:none;overflow:visible;background:linear-gradient(0deg,#fff 80%,#ffffff00);isolation:isolate}
.line-nav.is-docked .decorative{display:none}
.line-nav.is-docked .rail{display:block;flex:1;height:calc(30px + var(--bar)*7px);min-width:24px;transform:skewX(23deg);transform-origin:bottom center;border:0;order:initial}
.line-nav.is-docked .rail:before{top:0;left:15%;height:100%;width:65%;transform:none}
.line-nav.is-docked .rail:hover:before,.line-nav.is-docked .rail:focus-visible:before{width:65%;transform:translateY(-4px)}
.line-nav.is-docked .rail-label{position:absolute;top:auto;bottom:-22px;left:0;writing-mode:initial;transform:skewX(-23deg);font:10px monospace;opacity:0;translate:none;margin:0;background:white;padding:3px;z-index:2}
.line-nav.is-docked .rail:hover .rail-label,.line-nav.is-docked .rail:focus-visible .rail-label,.line-nav.is-docked .rail[aria-current=page] .rail-label{opacity:1}
.line-nav.is-docked .rail[aria-current=page]:before{box-shadow:0 0 0 1px currentColor}
.has-dock #page{padding-bottom:210px}.has-dock footer{padding-bottom:35px}
.departing-bar{position:fixed;pointer-events:none;z-index:19;background:#050505;clip-path:polygon(0 0,10% 0,100% 100%,90% 100%)}
@media(max-width:760px){
.line-nav.is-docked{left:auto;right:12px;bottom:12px;width:240px;height:132px;padding:0 22px 27px 8px;box-shadow:0 5px 25px #0000000a}
.line-nav.is-docked .rail{min-width:30px;height:calc(25px + var(--bar)*6px)}
.line-nav.is-docked .rail-label{opacity:1;font-size:8px;bottom:-22px;left:-8px;padding:2px;letter-spacing:-.5px;transform:skewX(-23deg) rotate(-32deg)}
.has-dock #page{padding-bottom:180px}
}
/* Keep the original long strokes in the corner; do not compress the mark. */
@media(min-width:761px){
.line-nav.is-docked{right:42px;bottom:38px;width:330px;height:410px;padding:90px 15px 0 100px;background:none;box-shadow:none}
.line-nav.is-docked .rail{height:calc(170px + var(--bar)*13px);min-width:0;flex:1;transform:skewX(23deg);transform-origin:bottom center}
.line-nav.is-docked .rail:before{left:12%;width:76%}
.line-nav.is-docked .rail:hover:before,.line-nav.is-docked .rail:focus-visible:before{width:76%}
.line-nav.is-docked .rail-label{top:-88px;bottom:auto;left:18%;writing-mode:vertical-rl;transform:skewX(-23deg);font-size:11px;background:#fff;padding:4px 2px}
.has-dock #page{padding-right:410px;min-height:calc(100svh - 210px);padding-bottom:100px}
.has-dock .page-heading{grid-template-columns:1fr;gap:28px}
}
@media(min-width:1500px){
.line-nav.is-docked{height:460px;width:370px}
.line-nav.is-docked .rail{height:calc(200px + var(--bar)*15px)}
.has-dock #page{padding-right:450px}
}
@media(max-width:760px){
.line-nav.is-docked{right:20px;bottom:22px;width:240px;height:275px;padding:70px 12px 0 65px;background:#fffffff5}
.line-nav.is-docked .rail{height:calc(80px + var(--bar)*10px);min-width:0;flex:1}
.line-nav.is-docked .rail-label{top:-65px;bottom:auto;left:0;writing-mode:vertical-rl;transform:skewX(-23deg);font-size:9px;letter-spacing:0;padding:2px;opacity:1}
.has-dock #page{padding-bottom:330px}.has-dock footer{padding-bottom:310px}
}

/* Full-length navigation strokes emerge from the viewport edge. */
.dock-exit{display:none}
.line-nav.is-docked{right:5vw;bottom:-180px;width:350px;height:calc(65svh + 180px);padding:100px 0 0 95px;background:none;box-shadow:none;pointer-events:none}
.line-nav.is-docked .rail{pointer-events:auto;height:calc(65svh + 80px + var(--bar)*8px);min-width:0;flex:1;transform:skewX(23deg);transform-origin:bottom center}
.line-nav.is-docked .rail:before{left:12%;width:76%;height:100%}
.line-nav.is-docked .rail:hover:before,.line-nav.is-docked .rail:focus-visible:before{width:76%;transform:none}
.line-nav.is-docked .rail-label{top:-82px;bottom:auto;left:15%;writing-mode:vertical-rl;transform:skewX(-23deg);font:11px monospace;background:white;padding:4px 2px}
.line-nav.is-docked .dock-exit{display:block;position:fixed;right:26px;bottom:24px;pointer-events:auto;background:white;border:1px solid #181818;padding:12px 18px;font:12px monospace;z-index:30}
@media(min-width:761px){.has-dock #page{padding-right:430px}}
@media(max-width:760px){
.line-nav.is-docked{right:22px;bottom:-110px;width:235px;height:390px;padding:70px 0 0 65px}
.line-nav.is-docked .rail{height:calc(300px + var(--bar)*5px)}
.line-nav.is-docked .rail-label{top:-68px;font-size:9px;opacity:1}
.line-nav.is-docked .dock-exit{right:12px;bottom:16px;padding:10px 14px}
.has-dock #page{padding-bottom:410px}
}

@media(max-width:760px){.line-nav:not(.is-docked) .rail:nth-child(11){order:1}.line-nav:not(.is-docked) .rail:nth-child(10){order:2}.line-nav:not(.is-docked) .rail:nth-child(9){order:3}.line-nav:not(.is-docked) .rail:nth-child(8){order:4}.line-nav:not(.is-docked) .rail:nth-child(7){order:5}.line-nav:not(.is-docked) .rail:nth-child(6){order:6}.line-nav:not(.is-docked) .rail:nth-child(5){order:7}}
/* Compact viewport-anchored navigation, flush with the lower right corner. */
.line-nav.is-docked{position:fixed;right:0;bottom:-95px;width:225px;height:260px;padding:65px 0 0 55px;margin:0}
.line-nav.is-docked .rail{height:calc(180px + var(--bar)*4px)}
.line-nav.is-docked .rail-label{top:-78px;font-size:10px}
@media(min-width:761px){.has-dock #page{padding-right:280px;padding-bottom:100px}.has-dock footer{padding-bottom:35px}}
@media(max-width:760px){
.line-nav.is-docked{right:0;bottom:-90px;width:185px;height:240px;padding:60px 0 0 45px}
.line-nav.is-docked .rail{height:calc(160px + var(--bar)*4px)}
.line-nav.is-docked .rail-label{top:-65px;font-size:8px}
.has-dock #page{padding-bottom:230px}.has-dock footer{padding-bottom:200px}
}
/* Align the last stroke itself, rather than its container, to the edge. */
.line-nav.is-docked{right:-6px;padding-right:0}
.line-nav.is-docked > .rail.decorative{display:none!important;visibility:hidden!important;flex:0!important;width:0!important}
.line-nav.is-docked > .rail:last-child:before{left:24%;width:76%}
@media(max-width:760px){.line-nav.is-docked{right:-5px}}
/* Compensate for the skew below the viewport: tan(23deg) × hidden depth.
   This puts the last stroke's outer edge at the viewport's bottom-right. */
.line-nav.is-docked{right:-40.33px;bottom:-95px}
@media(max-width:760px){.line-nav.is-docked{right:-38.2px;bottom:-90px}}
/* Bold labels follow the stroke axis instead of cancelling its slant. */
@media(min-width:761px){
.rail-label{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:13px;letter-spacing:.25px;transform:none}
.line-nav.is-docked .rail-label{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:12px;letter-spacing:.2px;transform:none;top:-95px}
}
@media(max-width:760px){
.rail-label{font-family:Arial,Helvetica,sans-serif;font-weight:700}
.line-nav.is-docked .rail-label{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:10px;letter-spacing:.1px;transform:none;top:-80px}
}
@media(min-width:761px){.rail-label{font-size:16px}.line-nav.is-docked .rail-label{font-size:15px;top:-115px}}
@media(max-width:760px){.line-nav.is-docked .rail-label{font-size:12px;top:-95px}}
/* Keep lettering flat while the navigation strokes remain slanted. */
@media(min-width:761px){.rail-label,.line-nav.is-docked .rail-label{transform:skewX(-23deg)}}
@media(max-width:760px){.line-nav.is-docked .rail-label{transform:skewX(-23deg)}}

:root{--surface:#fff;--line:#ddd;--panel:#f3f3f0;color-scheme:light}
:root[data-theme=dark]{--surface:#141516;--ink:#eeeef0;--muted:#aaaab0;--line:#3b3d40;--panel:#232527;--red:#ff5252;color-scheme:dark}
body{background:var(--surface);transition:background-color 300ms,color 300ms}
.theme-toggle{display:inline-flex;align-items:center;gap:9px;margin:0 25px 0 auto;padding:8px 12px;border:1px solid var(--line);border-radius:30px;background:var(--surface);color:var(--ink);cursor:pointer;font:10px monospace;letter-spacing:1px;transition:border-color 200ms,background-color 200ms}
.theme-toggle:hover{border-color:var(--ink)}.theme-icon{font-size:19px;line-height:1}.theme-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.index-link{margin-top:8px}
:root[data-theme=dark] .rail:before,:root[data-theme=dark] .rail.decorative:before{background:var(--ink)}
:root[data-theme=dark] .rail.contact:before{background:var(--red)}
:root[data-theme=dark] .rail-label{background:var(--surface)}
:root[data-theme=dark] footer,:root[data-theme=dark] .entry,:root[data-theme=dark] details,:root[data-theme=dark] #page-nav,:root[data-theme=dark] .rail{border-color:var(--line)}
:root[data-theme=dark] .filters button{background:var(--surface);color:var(--ink);border-color:var(--line)}
:root[data-theme=dark] .filters button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
:root[data-theme=dark] .project-art{background:var(--panel)}
:root[data-theme=dark] .project-art:before{box-shadow:25px 20px 0 -1px var(--panel),25px 20px 0 0 #8a8a85}
:root[data-theme=dark] .studio-logo{background:white;padding:4px}
:root[data-theme=dark] .skip{background:var(--surface)}
@media(max-width:760px){.theme-toggle{margin-right:14px;padding:7px 9px}.theme-label{display:none}.index-link{font-size:9px}}
@media(prefers-reduced-motion:reduce){body,.theme-toggle{transition:none}}
:root[data-theme=dark]{--ink:#c7c9cc;--muted:#999ca1}
:root[data-theme=dark] .studio-logo{background:#c7c9cc}

.language-select{margin-left:auto;margin-right:14px;padding:8px 22px 8px 10px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);font:11px monospace;cursor:pointer;min-height:36px}.language-select:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.theme-toggle{margin-left:0}.rail-label{white-space:nowrap}
@media(max-width:760px){.language-select{margin-right:8px;max-width:64px;padding:7px 4px;font-size:10px}header{gap:4px}.brand{font-size:20px}.brand span{font-size:6px;max-width:170px}.theme-toggle{margin-right:8px}.header-note{display:none}}
/* Preserve the eleven-stroke composition on narrow home screens too. */
@media(max-width:760px){
#home .line-nav{display:flex;flex-wrap:nowrap;align-items:flex-end;justify-content:center;gap:0;width:100%;max-width:480px;height:310px;padding:85px 12px 0 80px;margin:35px auto 30px;transform:none}
#home .line-nav > .rail,#home .line-nav > .rail.decorative{display:block;visibility:visible;order:initial!important;flex:1 1 0;min-width:0;width:auto;height:calc(100px + var(--bar)*9px);border:0;transform:skewX(23deg);transform-origin:bottom center}
#home .line-nav > .rail:before,#home .line-nav > .rail.decorative:before{left:12%;top:0;width:76%;height:100%;transform:none}
#home .line-nav > .rail:hover:before,#home .line-nav > .rail:focus-visible:before{width:76%;transform:translateY(-4px)}
#home .line-nav .rail-label{position:absolute;left:10%;top:-82px;bottom:auto;margin:0;writing-mode:vertical-rl;transform:skewX(-23deg);font-size:11px;font-weight:700;letter-spacing:0;opacity:1;translate:none;white-space:nowrap;background:var(--surface)}
}
/* Inset chevron with consistent spacing across desktop and mobile. */
.language-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%235c6066' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding:9px 32px 9px 13px;min-width:70px;line-height:1.3}
:root[data-theme=dark] .language-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23c7c9cc' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media(max-width:760px){.language-select{max-width:none;min-width:64px;padding:8px 27px 8px 11px;background-position:right 10px center;background-size:10px}}

.sliding-stroke:before{content:'';position:absolute;left:12%;top:0;width:76%;height:100%;background:var(--ink)}
.sliding-stroke.contact:before{background:var(--red)}
.sliding-stroke .rail-label{position:absolute;top:-110px;left:15%;writing-mode:vertical-rl;transform:skewX(-23deg);opacity:1;translate:none;background:transparent;font-size:15px;font-weight:700}
@media(max-width:760px){.sliding-stroke .rail-label{font-size:11px;top:-85px}}

/* Stable selection: only the painted stroke changes, never its layout. */
.line-nav .rail{translate:none}
.line-nav .rail:before{transition:width 320ms ease,left 320ms ease;transform:none!important}
.line-nav.is-docked .rail-label{opacity:1;translate:none}
.line-nav.is-docked .rail[aria-current=page]:before{box-shadow:none;left:8%;width:84%}
.line-nav.is-docked .rail[aria-current=page] .rail-label{font-weight:800}
.line-nav .rail:hover:before,.line-nav .rail:focus-visible:before,#home .line-nav .rail:hover:before,#home .line-nav .rail:focus-visible:before{left:8%;width:84%;transform:none}
/* Anchor labels by their lower edge to each stroke's upper endpoint. */
#home .line-nav .rail-label,.line-nav.is-docked .rail-label{
 top:auto;bottom:calc(100% + 12px);left:50%;margin:0;padding:0;
 writing-mode:vertical-rl;white-space:nowrap;line-height:1.1;
 transform:translateX(-50%) skewX(-23deg);transform-origin:bottom center;
 translate:none;background:transparent;
}
/* One shared interaction rule for every stroke, including the final one. */
.line-nav .rail-label{pointer-events:none}
.line-nav a.rail{cursor:pointer}
.line-nav a.rail:before,#home .line-nav a.rail:before,.line-nav.is-docked a.rail:before,.line-nav.is-docked a.rail:last-child:before{
 left:12%;width:76%;transform:none!important;box-shadow:none;
 transition:left 360ms cubic-bezier(.2,.8,.2,1),width 360ms cubic-bezier(.2,.8,.2,1),filter 360ms;
}
.line-nav a.rail:is(:hover,:focus-visible):before,#home .line-nav a.rail:is(:hover,:focus-visible):before,.line-nav.is-docked a.rail:is(:hover,:focus-visible):before,.line-nav.is-docked a.rail[aria-current=page]:before{
 left:5%;width:90%;filter:brightness(1.08);
}
.line-nav.is-docked a.rail[aria-current=page] .rail-label{font-weight:800;opacity:1}
/* Cancel the parent's skew, then rotate flat lettering to the stroke angle. */
#home .line-nav .rail-label,.line-nav.is-docked .rail-label{
 transform:translateX(-50%) skewX(-23deg) rotate(-23deg);
 transform-origin:bottom center;
}
.sliding-stroke .rail-label{transform:skewX(-23deg) rotate(-23deg);transform-origin:bottom center}

/* Flight labels use the very same endpoint anchor and flat rotation. */
.sliding-stroke .rail-label{
 position:absolute;top:auto;bottom:calc(100% + 12px);left:50%;
 margin:0;padding:0;writing-mode:vertical-rl;white-space:nowrap;
 transform:translateX(-50%) skewX(-23deg) rotate(-23deg);
 transform-origin:bottom center;translate:none;background:transparent;
 pointer-events:none;
}

.design-credit{font-size:10px;letter-spacing:.3px;line-height:1.8;text-align:right}.design-credit a{display:block;text-decoration:underline;text-underline-offset:3px}.has-dock .design-credit{display:none}@media(max-width:760px){footer .design-credit{display:block!important;flex-basis:100%;text-align:left}.has-dock footer .design-credit{display:none!important}}

.project-art.has-image:before{display:none}.project-art img{width:100%;height:100%;object-fit:cover;display:block}

.explore-help{position:relative;max-width:340px}.explore-help .hint{display:inline-flex;align-items:center;gap:9px;padding:5px 0;border:0;background:none;color:var(--muted);font:inherit;letter-spacing:inherit;cursor:pointer}.explore-help .hint:hover{color:var(--ink)}.explore-help svg{flex-shrink:0}.explore-help p{position:absolute;bottom:calc(100% + 12px);right:0;width:min(320px,80vw);padding:18px;margin:0;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:13px/1.7 Arial,Helvetica,sans-serif;letter-spacing:0;z-index:30;box-shadow:0 8px 30px #00000012}.explore-help .hint:focus-visible{outline:2px solid var(--ink);outline-offset:5px}@media(max-width:760px){.home-bottom{gap:16px;align-items:center}.explore-help .hint{display:inline-flex;font-size:9px;white-space:nowrap}}

header .brand{font-size:30px;line-height:1.15;letter-spacing:-1px}header .brand span{display:none}@media(max-width:760px){header .brand{font-size:26px}}

.chinese-name{display:block;margin-top:18px;font-size:.42em;line-height:1.3;letter-spacing:.12em;font-weight:400}html[lang=zh-Hans] header .brand{font-size:26px}@media(max-width:760px){html[lang=zh-Hans] header .brand{font-size:20px}}

/* Guided hover sequence, using the same emphasis as pointer selection. */
#home .line-nav a.rail.tour-active:before{left:5%;width:90%;filter:brightness(1.08);transform:none}
#home .line-nav a.rail.tour-active .rail-label{opacity:1;translate:0 0}

.explore-help .hint{transition:color 350ms,filter 350ms}.explore-help .hint[aria-expanded=true]{color:var(--ink);filter:drop-shadow(0 0 4px #99999944)}

.line-nav button.rail{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;margin:0;color:inherit;cursor:pointer;font:inherit}.line-nav button.rail:hover:before,.line-nav button.rail:focus-visible:before{left:5%;width:90%;filter:brightness(1.08)}.line-nav button.rail:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.sound-toggle{border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--ink);font:10px monospace;cursor:pointer;padding:9px 12px;min-height:36px;margin-right:12px;white-space:nowrap}.sound-toggle[aria-pressed=true]{border-color:var(--ink)}@media(max-width:760px){.sound-toggle{font-size:8px;padding:8px;margin-right:4px}header .brand{font-size:22px}html[lang=zh-Hans] header .brand{font-size:17px}.language-select{margin-right:4px}}

.line-nav .sound-toggle{position:absolute;z-index:45;pointer-events:auto;margin:0;width:36px;height:40px;min-height:0;padding:5px;border:0;border-radius:0;background:transparent;color:var(--ink);cursor:pointer;transition:opacity 200ms}.sound-toggle svg{display:block;width:100%;height:100%}.sound-toggle .note-slash{display:none}.sound-toggle.is-muted .note-slash{display:block}.sound-toggle.is-muted{opacity:.55}.sound-toggle:hover{opacity:1}.sound-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.volume-control{position:absolute;z-index:45;width:62px;height:20px;margin:0;accent-color:var(--ink);cursor:pointer;pointer-events:auto}.line-nav.is-docked .sound-toggle,.line-nav.is-docked .volume-control{display:none}

.explore-help .hint{justify-content:flex-start;overflow:hidden;max-width:260px;transition:max-width 650ms cubic-bezier(.22,1,.36,1),gap 650ms,padding 650ms,color 350ms,filter 350ms}.explore-help .hint span{display:block;white-space:nowrap;opacity:1;transition:opacity 250ms,transform 550ms cubic-bezier(.22,1,.36,1)}.explore-help .hint.is-discovered{max-width:27px;gap:0;padding-left:5px;padding-right:5px}.explore-help .hint.is-discovered span{opacity:0;transform:translateX(25px)}.explore-help{margin-left:auto}.explore-help .hint svg{width:17px;min-width:17px}@media(prefers-reduced-motion:reduce){.explore-help .hint,.explore-help .hint span{transition:none}}

.cloud-notice{position:fixed;left:12px;bottom:12px;z-index:60;max-width:320px;padding:12px;background:var(--surface);color:var(--muted);border:1px solid var(--line);font:12px/1.5 Arial}

.sliding-stroke:before{display:none}.flight-paint{position:absolute;top:0;height:100%;background:var(--ink);pointer-events:none}.sliding-stroke.contact .flight-paint{background:var(--red)}