/* Lighting changes colour only. The effect and control stay outside document flow. */
body{isolation:isolate}
#ambient-scene{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
#ambient-scene *,#ambient-scene canvas{pointer-events:none!important}
.ambient-canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.ambient-fallback-spot{position:absolute;display:block;width:600px;height:390px;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,193,92,var(--ambient-strength,.048)) 0%,transparent 70%);pointer-events:none}
/* The header keeps its place in the document while its frame fades in on scroll. */
html{scroll-padding-top:118px}
.header{position:sticky;top:0;z-index:30;isolation:isolate;border-bottom-color:transparent;--header-progress:0;--header-name-size:23px;--header-padding:17.4px}
.header::before{content:'';position:absolute;left:-21.6px;right:-21.6px;top:calc(50% + 10px - var(--header-name-size)*.6 - var(--header-padding));height:calc(var(--header-name-size)*1.2 + var(--header-padding)*2);z-index:-1;pointer-events:none;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 3px 10px -4px rgb(0 0 0 / 5%),0 12px 32px -8px rgb(0 0 0 / 7%);opacity:var(--header-progress)}
.header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);pointer-events:none;opacity:calc(1 - var(--header-progress))}
/* The name defines the centre of the fixed frame; the subtitle fades independently. */
.header .brand{position:relative;display:block;font-size:var(--header-name-size);line-height:1.2}
.header .brand-sub{position:absolute;left:0;top:100%;line-height:1.3;margin-top:4px;opacity:calc(1 - var(--header-progress))}
.skip-link{z-index:40}
.light-control{position:absolute;left:50%;top:calc(50% + 10px);transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;color:var(--muted);height:30px;z-index:6;cursor:pointer}
.light-label{font:9px var(--mono);letter-spacing:.04em;margin-right:3px}
.light-control svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1;flex-shrink:0}
#site-light{width:92px;height:26px;padding:0;margin:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:ew-resize;touch-action:pan-y}
#site-light::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--ink) 0 var(--light-progress,100%),var(--line) var(--light-progress,100%) 100%);border-radius:2px}
#site-light::-moz-range-track{height:2px;background:var(--line);border-radius:2px}
#site-light::-moz-range-progress{height:2px;background:var(--ink)}
#site-light::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border:1px solid var(--muted);border-radius:50%;background:var(--paper);margin-top:-4px;box-shadow:0 0 0 4px var(--paper)}
#site-light::-moz-range-thumb{width:9px;height:9px;border:1px solid var(--muted);border-radius:50%;background:var(--paper);box-shadow:0 0 0 4px var(--paper)}
#site-light:focus-visible{outline:1px solid var(--accent);outline-offset:4px;border-radius:3px}
/* Compact section labels keep the visual emphasis on the work. */
.section-heading h2{font-size:clamp(22px,1.7vw,26px);letter-spacing:-.035em;line-height:1.2}
.about h2{font-size:21px;letter-spacing:-.025em;line-height:29px}
.contact h2{font-size:clamp(24px,2vw,30px);letter-spacing:-.035em;line-height:calc(clamp(48px,6vw,90px)*1.1)}
.contact-main>span{scale:.45;transform-origin:right center}
/* Every UI surface follows the dimmer; project photography keeps its own colours. */
::selection{background:var(--accent);color:var(--on-accent)}
.image-label,.image-action,.feature-controls button,.project-number,.project-arrow,.header nav.open,dialog{background:var(--surface);color:var(--ink)}
.feature-controls button:hover{background:var(--ink);color:var(--paper)}
.about-copy>p,.city-callout li,.place-detail p,.place-detail li{color:var(--body-copy)}
.place-list .micro{color:var(--muted)}
.globe-pin{background:var(--surface);color:var(--accent);border-color:var(--muted);box-shadow:0 0 0 4px var(--pin-halo)}
.globe-pin.active{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 5px var(--pin-halo)}
.globe-pin:hover,.globe-pin:focus-visible{background:var(--ink);color:var(--paper)}
.city-callout{background:var(--callout-bg);border-color:var(--line);border-left-color:var(--accent);box-shadow:0 8px 32px #0000000a}
.city-callout li+li{border-color:var(--line)}
.globe-leaders,.globe-fallback svg,.register-mark{stroke:var(--muted)}
.skip-link{background:var(--ink);color:var(--paper)}
@media(max-width:1100px){.header{--header-name-size:21px}.light-control{left:48%;gap:7px}.light-label{display:none}#site-light{width:72px}}
@media(min-width:701px) and (max-width:1000px){
  .header::before{top:30px;bottom:-10px;height:auto}
  .header nav{gap:16px}
  .header .light-control{top:auto;bottom:0;transform:translateX(-50%);height:20px}
  #site-light{height:20px}
}
@media(max-width:700px){
  html{scroll-padding-top:104px}
  .header{--header-name-size:18px}
  .header::before{inset:12px -14.4px -8px;height:auto;border-radius:14px}
  .header .brand-sub{margin-top:3px}
  .header nav{top:calc(100% + 16px);left:-14.4px;right:-14.4px;border:1px solid var(--line);border-radius:14px;translate:none}
  .header .light-control{left:0;right:auto;top:auto;bottom:2px;transform:none;height:22px;gap:7px}.light-label{display:block;font-size:8px}#site-light{width:66px;height:22px}.light-control svg{width:11px;height:11px}
  .section-heading h2{font-size:22px;line-height:1.2}.about h2{font-size:21px;line-height:28px}.contact h2{font-size:24px;line-height:52.8px}
}
@media(max-width:360px){.header{--header-name-size:16px}.section-heading h2{font-size:21px;line-height:1.2}}
@media(forced-colors:active){#ambient-scene{display:none}#site-light{appearance:auto;-webkit-appearance:auto}}
@media print{#ambient-scene,.light-control,.header::before,.header::after{display:none}.header{position:static}:root{--paper:#fff!important;--ink:#000!important;--muted:#333!important;--body-copy:#222!important}}