.portfolio-site{--accent:#2b409a;--accent-light:#2b409a;--surface:#efefed;--ink:#000;background:var(--surface);color:var(--ink)}
.portfolio-site.detail-page,.portfolio-site #navigation{background:var(--surface)}
.portfolio-site .brand:hover,.portfolio-site .nav-links a:hover,.portfolio-site .nav-links a:focus-visible,.portfolio-site .project-open:hover,.portfolio-site .detail-footer a:hover{color:var(--accent)}
.portfolio-site a:focus-visible,.portfolio-site button:focus-visible{outline-color:var(--accent)}
.portfolio-site .reading-bar{background:var(--accent)}
.portfolio-site .detail-thumbs a.active{outline-color:var(--accent)}
.portfolio-site .brand,.portfolio-site .project-open,.portfolio-site .detail-footer a{transition:color .2s ease}
.portfolio-site .project-open{transition:color .2s ease,translate .25s ease,border-color .2s ease}
.portfolio-site .project-open:hover{translate:0 -3px;border-color:var(--accent)}
.portfolio-site .gallery-controls button{transition:translate .25s ease,color .2s ease}
.portfolio-site .gallery-controls button:hover{color:var(--accent);translate:0 -3px}
.portfolio-site .board-button:focus-visible{outline-color:var(--accent)}
.portfolio-site .board-button .board-zoom{background:#fff;color:#111;border:1px solid #0000000d;box-shadow:0 1px 5px #0000000a}
.portfolio-site .board-toolbar button[aria-pressed=true]{color:#fff;border-bottom:2px solid var(--accent-light)}
.brand-intro{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--surface);color:var(--accent);overflow:hidden}
.brand-intro-name{display:flex;flex-direction:column;align-items:center;font-family:Glyphius,Georgia,serif;font-size:clamp(90px,14vw,230px);line-height:.88;letter-spacing:-.055em;font-weight:400;text-align:center}
.brand-intro-row{overflow:visible;padding:.12em .16em;margin:-.025em 0}
.brand-intro-letter{display:block;will-change:transform}
.portfolio-site .motion-pending{opacity:0;translate:0 18px}
@media(max-width:799px){.portfolio-site .detail-heading h1{color:var(--ink)}.brand-intro-name{font-size:clamp(80px,24vw,180px)}}
@media(prefers-reduced-motion:reduce){.brand-intro{display:none}.portfolio-site .motion-pending{opacity:1;translate:none}.portfolio-site .project-open:hover,.portfolio-site .gallery-controls button:hover{translate:none}}

html.route-arriving::before{content:'';position:fixed;inset:0;background:#090909;z-index:250}
.route-curtain{position:fixed;inset:0;z-index:250;background:#090909;color:#efede6;display:flex;align-items:center;justify-content:center;overflow:hidden;will-change:transform}
.route-curtain-title{font-family:Glyphius,'SimSun',serif;font-size:clamp(30px,4.5vw,76px);font-weight:400;line-height:1.1;letter-spacing:-.035em;text-align:center;padding:24px;max-width:90vw}
.portfolio-site.route-moving{pointer-events:none}
@media(prefers-reduced-motion:reduce){html.route-arriving::before,.route-curtain{display:none}}

/* White difference-blended type follows the artwork beneath the fixed UI,
   matching the reference. Keep the name and full-colour tool icons separate. */
.portfolio-site .brand{color:var(--ink)}
.portfolio-site .inquiry a,.portfolio-site .mobile-inquiry a{text-decoration:underline;text-underline-offset:3px}
@media(min-width:800px){
  .portfolio-site.detail-page header{z-index:auto}
  .portfolio-site #navigation{background:transparent;mix-blend-mode:normal;color:var(--ink)}
  .portfolio-site .sound,.portfolio-site .location,.portfolio-site .inquiry,
  .portfolio-site .counter,.portfolio-site .gallery-controls,.portfolio-site .scroll-hint,
  .portfolio-site .gallery-title,.portfolio-site .detail-status{mix-blend-mode:difference;color:#fff}
  .portfolio-site .gallery-title,.portfolio-site .detail-status{color:rgb(255 255 255 / .5)}
}