@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
:root {
  color-scheme: dark; --canvas:#292d31; --paper:#34393e; --ink:#e6ebef;
  --muted:#bec6cc; --gold:#c2ae88; --line:#565e65;
  --ease:cubic-bezier(.16,1,.3,1);
  font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif;
  font-synthesis:none; font-optical-sizing:auto;
}
* { box-sizing:border-box; }
html { min-width:280px; background:var(--canvas); scrollbar-color:#aba598 var(--paper); scrollbar-width:thin; }
body { margin:0; color:var(--ink); -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; border:0; background:none; padding:0; cursor:pointer; }
a { color:inherit; text-decoration:none; text-underline-offset:4px; }
button,a { touch-action:manipulation; -webkit-touch-callout:none; }
button:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
button:disabled { cursor:default; opacity:.35; }
img { display:block; max-width:100%; }
p,h1,h2,h3 { margin:0; }
::selection { background:#d8c8ad; color:#262921; }
.icon { width:20px; height:20px; flex-shrink:0; }
.ambient { position:fixed; inset:0; pointer-events:none; background:linear-gradient(125deg,#dfddd5,#cccdc6); }
.site-shell { position:relative; width:100%; max-width:430px; margin:auto; height:100svh; height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:#e8e6df; overflow:hidden; }
.header { padding:max(20px,env(safe-area-inset-top)) 25px 18px; display:flex; justify-content:space-between; align-items:center; }
.wordmark { display:flex; flex-direction:column; gap:4px; }
.wordmark > span { font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif; font-size:1.24rem; font-weight:600; letter-spacing:.035em; line-height:1.1; }
.wordmark-dot { color:var(--gold); }
.wordmark small { font-size:.47rem; letter-spacing:.2em; color:var(--muted); }
.header-location { font-size:.625rem; letter-spacing:.08em; color:var(--muted); }
.main { min-height:0; padding:0 14px 10px; }
.page-stage { height:100%; position:relative; overflow:hidden; border-radius:14px; isolation:isolate; background:#e2ded4; touch-action:pinch-zoom; }
.page-stage.is-held { user-select:none; -webkit-user-select:none; }
.page-stage.is-dragging { cursor:grabbing; }
.reveal-layer { position:absolute; inset:0; pointer-events:none; visibility:hidden; }
.reveal-layer-0 { background:#62695e; }
.reveal-layer-1 { background:#b7a17e; }
.reveal-line { display:block; }
.pages { position:relative; height:100%; }
.page-panel { position:absolute; inset:0; background:var(--paper); overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; opacity:0; visibility:hidden; pointer-events:none; }
.page-panel.is-active { opacity:1; visibility:visible; pointer-events:auto; }
.profile-card { display:flex; flex-direction:column; }
.hero-photo { position:relative; flex:1 0 17rem; overflow:hidden; background:#656963; min-height:56%; }
.hero-photo > img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:56% 50%; }
.hero-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#10171345,transparent 30%,#17221b08 48%,#19231ced); pointer-events:none; }
.photo-topline { position:absolute; z-index:1; top:24px; left:26px; color:#fff; font-size:.625rem; letter-spacing:.12em; text-shadow:0 1px 8px #0008; }
.hero-title { position:absolute; z-index:2; left:27px; right:20px; bottom:28px; color:#f8f6f0; }
.hero-title-en { font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif; font-size:.625rem; letter-spacing:.02em; color:#e6e0d2; }
h1 { font-family:'Noto Serif TC','Noto Sans TC','PingFang TC','Microsoft JhengHei',Georgia,serif; font-size:2.7rem; line-height:1.55; font-weight:500; letter-spacing:.08em; margin-top:6px; }
h1 > span { display:inline-block; font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif; font-size:.875rem; font-weight:400; letter-spacing:.12em; margin-left:14px; }
.photo-corner { position:absolute; width:19px; height:19px; border-right:1px solid #d0b483; border-bottom:1px solid #d0b483; bottom:28px; right:27px; z-index:2; }
.profile-copy { position:relative; flex:0 0 auto; padding:23px 26px 17px; }
.profile-copy::before { content:''; position:absolute; left:26px; top:0; height:2px; width:44px; background:var(--gold); }
.brand-statement { font-family:'Noto Serif TC','Noto Sans TC','PingFang TC','Microsoft JhengHei',Georgia,serif; font-size:1.125rem; line-height:1.85; letter-spacing:.045em; }
.profile-bottom { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:15px; flex-wrap:wrap; }
.profile-bottom > span { font-size:.625rem; color:var(--muted); }
.separator { color:var(--gold); margin-inline:7px; }
.works-card { padding:27px 24px 22px; display:flex; flex-direction:column; }
.card-heading { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:20px; flex-shrink:0; }
.card-heading h2 { font:500 1.45rem/1.4 'Noto Serif TC','Noto Sans TC','PingFang TC','Microsoft JhengHei',Georgia,serif; }
.card-heading > span { color:var(--muted); font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif; font-size:.5rem; letter-spacing:.08em; }
.project-photo { position:relative; flex:1 0 12.5rem; min-height:38%; overflow:hidden; background:#c2c2b8; border-radius:5px; text-align:left; }
.project-photo > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.project-category { position:absolute; top:14px; left:14px; padding:6px 9px; background:#f3f1ebed; font-size:.625rem; }
.expand-photo { position:absolute; right:11px; bottom:11px; display:flex; align-items:center; gap:6px; background:#293129e8; color:#fff; padding:8px 10px; font-size:.625rem; border-radius:3px; }
.expand-photo .icon { width:13px; height:13px; filter:invert(1); }
.project-copy { margin:19px 0; flex-shrink:0; }
.project-name-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.project-name-row h3 { font:500 1.125rem/1.6 'Noto Serif TC','Noto Sans TC','PingFang TC','Microsoft JhengHei',Georgia,serif; }
.project-name-row > span { font-size:.5625rem; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--muted); }
.project-copy p { font-size:.75rem; color:var(--muted); margin-top:7px; line-height:1.7; }
.project-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; border-top:1px solid var(--line); padding-top:14px; flex-shrink:0; }
.project-picker button { position:relative; padding-bottom:9px; text-align:left; }
.project-picker img { width:100%; height:52px; object-fit:cover; border-radius:3px; opacity:.58; }
.project-picker button[aria-pressed=true] img { opacity:1; }
.project-picker span { display:block; margin-top:8px; font-size:.625rem; line-height:1.5; }
.project-picker button::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:center; transition:transform 300ms cubic-bezier(.16,1,.3,1); }
.project-picker button[aria-pressed=true]::after { transform:scaleX(1); }
.contact-card { padding:22px 20px 16px; display:flex; flex-direction:column; }
.contact-card > * { flex-shrink:0; }
.contact-content { width:100%; margin-block:auto; }
.contact-heading { padding:0 2px 12px; margin-bottom:10px; border-bottom:1px solid #b7a586; }
.contact-heading > span { display:block; margin-bottom:7px; font:600 .5625rem/1.4 'Noto Sans TC','Microsoft JhengHei',sans-serif; letter-spacing:.19em; color:var(--gold); }
.contact-heading h2 { font:500 1.6rem/1.4 'Noto Serif TC','Noto Sans TC','PingFang TC','Microsoft JhengHei',Georgia,serif; letter-spacing:.04em; }
.contact-list { display:grid; gap:8px; }
.contact-row { display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:#ffffff20; text-align:left; }
.contact-icon { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border:1px solid #b7a586; border-radius:50%; }
.contact-icon img { width:18px; height:18px; object-fit:contain; filter:brightness(0) saturate(100%) invert(45%) sepia(23%) saturate(780%) hue-rotate(358deg) brightness(94%) contrast(86%); }
.contact-details { min-width:0; display:flex; flex-direction:column; gap:4px; }
.contact-details strong { font-size:.8125rem; line-height:1.3; font-weight:600; }
.contact-details small { font-size:.75rem; line-height:1.35; color:var(--muted); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.contact-hours { margin:10px 2px 0; font-size:.625rem; line-height:1.5; color:var(--muted); }
.contact-hours span { margin-left:8px; font-variant-numeric:tabular-nums; }
[aria-disabled=true] { cursor:default; color:#6c6b61; }
.footer { position:relative; z-index:5; padding:0 23px max(12px,env(safe-area-inset-bottom)); background:#e8e6df; }
.page-tabs { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:#ffffff50; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-radius:12px; padding:4px; box-shadow:0 5px 14px -10px #3a342655; }
.page-tabs button { position:relative; z-index:1; font-size:.8125rem; min-height:44px; color:#585d52; border-radius:9px; font-weight:500; }
.page-tabs button[aria-current=page] { color:#4d3d23; font-weight:600; }
.tab-indicator { position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px)/3); background:#f7f4ec; border-radius:9px; box-shadow:0 2px 5px #40362313; pointer-events:none; }
.tab-indicator::after { content:''; position:absolute; bottom:6px; left:calc(50% - 6px); width:12px; height:1px; background:var(--gold); }
.contact-dock { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); padding:14px 0 7px; }
.contact-dock > * { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:44px; font-size:.5625rem; border-radius:6px; }
.contact-dock .icon,.social-icon { width:18px; height:18px; object-fit:contain; opacity:.85; }
.social-icon { filter:brightness(0); }
.contact-dock [aria-disabled=true] { color:#6c6b61; }
.contact-dock [aria-disabled=true] img { opacity:.55; }
.contact-dock i { position:absolute; width:3px; height:3px; border-radius:50%; top:0; right:calc(50% - 14px); background:var(--gold); }
.footer-note { display:flex; justify-content:space-between; font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif; font-size:.4375rem; letter-spacing:.12em; color:#67695d; margin-top:6px; }
.footer-note > span { font-size:.5625rem; letter-spacing:.04em; }
dialog { padding:0; border:0; max-height:none; }
.image-dialog { position:fixed; inset:0; width:min(100%,430px); max-width:100vw; height:100dvh; margin:auto; background:#252924; color:#eeeae1; overflow:hidden; }
.image-dialog::backdrop { background:#24292499; }
.image-dialog[open] { display:flex; flex-direction:column; }
.viewer-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:max(24px,env(safe-area-inset-top)) 24px 18px; flex-shrink:0; }
.viewer-header h2 { font:400 1.125rem/1.6 'Noto Serif TC','Noto Sans TC','PingFang TC','Microsoft JhengHei',Georgia,serif; }
.viewer-header p { color:#c0c2b6; font-size:.6875rem; margin-top:7px; }
.viewer-header button { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:#ffffff0b; }
.image-dialog .icon { filter:invert(1); }
.viewer-image { width:100%; min-height:0; flex:1; object-fit:contain; }
.viewer-footer { display:flex; justify-content:center; align-items:center; gap:38px; padding:16px 20px max(24px,env(safe-area-inset-bottom)); flex-shrink:0; }
.viewer-footer button { display:grid; place-items:center; width:44px; height:44px; }
.viewer-footer > span { font-size:.6875rem; font-variant-numeric:tabular-nums; }
.toast { position:fixed; bottom:max(165px,calc(155px + env(safe-area-inset-bottom))); left:50%; width:max-content; max-width:min(340px,90vw); transform:translate(-50%,8px); padding:13px 18px; background:#353c32; color:#f5f2e9; border-radius:10px; box-shadow:0 6px 30px #202a2033; font-size:.75rem; line-height:1.7; opacity:0; pointer-events:none; z-index:20; transition:opacity 180ms ease,transform 200ms var(--ease); }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.noscript-note { padding:15px; font-size:.75rem; text-align:center; }
button:active:not(:disabled),a:active { background-color:#93774c14; }
@media (hover:hover) { button:hover:not(:disabled),a:hover { color:#7a613d; } .project-picker button:hover img { opacity:1; } }
@media (max-width:350px) { .header { padding-inline:20px; } .main { padding-inline:10px; } .footer { padding-inline:17px; } .works-card { padding-inline:20px; } .contact-card { padding-inline:14px; } .profile-copy { padding-inline:21px; } .hero-title { left:22px; } h1 { font-size:2.35rem; } h1 > span { font-size:.75rem; margin-left:10px; } }
@media (max-height:580px) { .header { padding-top:max(12px,env(safe-area-inset-top)); padding-bottom:12px; } .footer-note { display:none; } .contact-dock { padding-top:7px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } .toast { transition:opacity 100ms ease; transform:translateX(-50%); } }
@media (prefers-reduced-transparency:reduce) { .page-tabs { background:#e0dcd2; -webkit-backdrop-filter:none; backdrop-filter:none; } }
@media (prefers-contrast:more) { :root { --muted:#3d4237; --gold:#68502d; --line:#8b8679; } .page-tabs { background:#eeeae0; backdrop-filter:none; outline:1px solid #75684f; } }

/* Full-screen layered composition: v5. The navigation remains above the
   reversible page layers; its outline follows the existing gesture channel. */
.site-shell { display:block; background:#d8d6ce; }
.header { position:absolute; top:0; left:0; right:0; z-index:10; padding: max(25px,env(safe-area-inset-top)) 27px 18px; pointer-events:none; background:linear-gradient(180deg,#eeece5 72%,#eeece500); }
.header .wordmark { pointer-events:none; }
.main { position:absolute; inset:0; padding:0; }
.page-stage { border-radius:0; background:#d8d6ce; }
.page-panel { padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
.profile-card { padding-top:82px; background:#d8d6ce; }
.hero-photo { flex:1 0 310px; min-height:45%; margin:0 0 0 16px; }
.hero-photo > img { object-position:56% 50%; }
.hero-title { bottom:62px; left:26px; }
.photo-corner { bottom:62px; }
.photo-topline { top:22px; }
.profile-copy { z-index:2; margin:-30px 24px 0 0; padding:25px 28px 24px; background:#f3f1eb; box-shadow:0 12px 28px -22px #332d2360; }
.profile-copy::before { left:28px; width:48px; }
.brand-statement { font-size:1.25rem; line-height:1.8; }
.profile-bottom { margin-top:18px; }
.works-card { padding:100px 26px calc(110px + env(safe-area-inset-bottom)); background:#eeece5; }
.project-photo { border-radius:2px; min-height:32%; box-shadow:0 15px 24px -20px #312d2455; }
.project-copy { position:relative; margin:-15px 16px 18px -8px; padding:20px 14px 0; background:#eeece5; }
.expand-photo { bottom:26px; }
.contact-card { padding:100px 26px calc(110px + env(safe-area-inset-bottom)); background:#eeece5; }
.contact-heading { margin-bottom:16px; padding-bottom:18px; }
.contact-list { gap:9px; }
.contact-row { background:#f7f5ef70; }
.footer { position:absolute; left:0; right:0; bottom:0; z-index:10; padding:12px 32px max(15px,env(safe-area-inset-bottom)); background:linear-gradient(0deg,#e7e4dc 65%,#e7e4dc00); }
.page-tabs { width:246px; max-width:100%; margin:auto; padding:0; background:none; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.page-tabs button { min-height:46px; padding-bottom:6px; font-size:.8125rem; font-weight:500; letter-spacing:.1em; border-radius:0; color:#65665e; }
.page-tabs button[aria-current=page] { color:#6f552e; font-weight:600; }
.tab-indicator { top:3px; bottom:3px; left:0; width:calc(100%/3); border-radius:9px; background:none; box-shadow:none; }
.tab-indicator::after { top:auto; bottom:2px; left:calc(50% - 14px); right:auto; width:28px; height:2px; border:0; border-radius:1px; background:var(--gold); }
.footer-note { justify-content:center; margin-top:9px; }
.footer-note > span { font-size:.5625rem; color:#77796d; letter-spacing:.12em; }
.toast { bottom:110px; }
@media (max-width:350px) {
 .header { padding-inline:22px; }
 .main { padding:0; }
 .works-card,.contact-card { padding-inline:20px; }
 .profile-copy { padding-inline:24px; margin-right:18px; }
 .brand-statement { font-size:1.125rem; }
 .hero-title { left:23px; }
 .footer { padding-inline:23px; }
}
@media (max-height:580px) {
 .header { padding-top:max(16px,env(safe-area-inset-top)); }
 .works-card,.contact-card { padding-top:86px; }
 .profile-card { padding-top:74px; }
 .page-panel { padding-bottom:90px; }
}
@media (prefers-contrast:more) {
 .page-tabs { outline:none; background:none; }
 .tab-indicator::after { border-color:#68502d; }
}
/* Keep every contact method in view on normal portrait phone screens. */
.contact-card { padding-top:84px; padding-bottom:96px; }
.contact-heading { padding-bottom:12px; margin-bottom:12px; }
.contact-list { gap:7px; }
.contact-row { min-height:clamp(48px,calc((100dvh - 310px)/7),60px); }
@media (max-height:740px) {
 .contact-heading { display:flex; align-items:baseline; justify-content:space-between; flex-direction:row-reverse; padding-bottom:10px; margin-bottom:10px; }
 .contact-heading h2 { font-size:1.4rem; }
 .contact-heading > span { margin:0; }
 .contact-row { padding:6px 11px; }
 .contact-details { gap:3px; }
 .contact-details strong { font-size:.75rem; }
 .contact-details small { font-size:.6875rem; }
 .contact-icon { width:30px; height:30px; flex-basis:30px; }
 .contact-list { gap:6px; }
 .contact-hours { margin-top:9px; }
}

/* Shared graphite palette: identical surfaces across all three pages. */
.ambient { background:var(--canvas); }
.site-shell,.page-stage,.page-panel,.profile-card,.works-card,.contact-card { background:var(--paper); }
.header { background:linear-gradient(180deg,#34393e 72%,#34393e00); }
.footer { background:linear-gradient(0deg,#34393e 65%,#34393e00); }
.profile-copy { background:#454c52; box-shadow:0 14px 30px -20px #111820aa; }
.project-copy { z-index:2; margin:-28px 12px 20px; padding:19px 18px 20px; background:#4a5259; border-top:1px solid #77818a; box-shadow:0 14px 24px -15px #111820bb; }
.project-name-row { flex-wrap:wrap; }
.project-name-row h3 { font-size:1.0625rem; }
.project-copy p { color:#d0d7dc; }
.expand-photo { bottom:40px; }
.project-photo { background:#373a3c; }
.project-category { background:#34393eeb; color:var(--ink); }
.hero-photo::after { background:linear-gradient(180deg,#191b1d42,transparent 30%,#191b1d08 48%,#191b1df2); }
.hero-title,.hero-title-en { color:var(--ink); }
.reveal-layer-0 { background:#59636c; }
.reveal-layer-1 { background:#8c816e; }
.contact-heading { border-color:#817967; }
.contact-row { background:#3d444a; border-color:var(--line); }
.contact-icon { border-color:#786b54; }
.contact-icon img { filter:brightness(0) saturate(100%) invert(72%) sepia(16%) saturate(660%) hue-rotate(359deg) brightness(92%) contrast(87%); }
[aria-disabled=true] { color:var(--muted); }
.page-tabs button { color:var(--muted); }
.page-tabs button[aria-current=page] { color:#d2bb94; }
::selection { background:#6a5b43; color:#fff; }
button:active:not(:disabled),a:active { background-color:#bca47a18; }
.page-tabs button,.project-picker button,
.page-tabs button:active:not(:disabled),.project-picker button:active:not(:disabled) { background-color:transparent; -webkit-tap-highlight-color:transparent; }
@media (prefers-reduced-motion:reduce) { .project-picker button::after { transition:none; } }
@media (hover:hover) { button:hover:not(:disabled),a:hover { color:#d8c5a4; } }
@media (prefers-contrast:more) {
 :root { --muted:#d0d2d3; --gold:#e3c898; --line:#73777b; }
 .contact-row,.contact-icon { border-color:var(--line); }
 .contact-heading { border-color:var(--gold); }
 .page-tabs button[aria-current=page] { color:var(--gold); }
}

/* Framed motion area, with quiet fixed space above and below. */
.site-shell { --content-top:118px; --content-bottom:88px; }
.header { top:max(30px,env(safe-area-inset-top)); padding:0 24px; height:62px; display:grid; grid-template-columns:72px minmax(0,1fr) 72px; gap:8px; align-items:center; background:none; }
.brand-logo { width:72px; height:auto; object-fit:contain; }
.wordmark { align-items:center; text-align:center; gap:7px; }
.wordmark > span { font:500 1.125rem/1.3 'Noto Serif TC','Noto Sans TC','PingFang TC','Microsoft JhengHei',Georgia,serif; letter-spacing:.025em; white-space:nowrap; }
.wordmark small { font:500 .4375rem/1.4 'Noto Sans TC','Microsoft JhengHei',sans-serif; letter-spacing:.1em; white-space:nowrap; }
.header-location { text-align:right; font-size:.5625rem; letter-spacing:0; }
.main { top:var(--content-top); bottom:var(--content-bottom); }
.page-panel { padding-bottom:8px; }
.profile-card { padding-top:0; }
.hero-photo { flex-basis:250px; min-height:45%; }
.works-card { padding:8px 26px 8px; }
.contact-card { padding:8px 26px 8px; }
.footer { bottom:max(22px,env(safe-area-inset-bottom)); padding:0 32px; background:none; }
@media (max-width:350px) {
 .header { padding-inline:18px; grid-template-columns:58px minmax(0,1fr) 58px; gap:5px; }
 .brand-logo { width:58px; }
 .wordmark > span { font-size:1.0625rem; }
 .header-location { font-size:.5rem; }
 .works-card,.contact-card { padding-inline:20px; }
}
@media (max-height:740px) {
 .site-shell { --content-top:112px; --content-bottom:82px; }
 .header { top:max(25px,env(safe-area-inset-top)); }
 .contact-heading { padding-bottom:8px; margin-bottom:8px; }
 .contact-list { gap:5px; }
 .contact-row { min-height:48px; padding-block:5px; }
 .contact-hours { margin-top:8px; }
 .footer { bottom:max(20px,env(safe-area-inset-bottom)); }
}
@media (max-height:580px) {
 .site-shell { --content-top:92px; --content-bottom:72px; }
 .header { top:max(14px,env(safe-area-inset-top)); }
 .footer { bottom:max(14px,env(safe-area-inset-bottom)); }
}

/* Center the original brand mark without a duplicate text lockup. */
.header { display:flex; justify-content:center; }
.header .wordmark { display:flex; align-items:center; justify-content:center; width:142px; height:80px; }
.header .brand-logo { width:142px; height:auto; }
.header-location { position:absolute; right:24px; top:calc(50% + 22px); transform:translateY(-50%); }
@media (max-width:350px) {
 .header .wordmark { width:126px; height:72px; }
 .header .brand-logo { width:126px; }
 .header-location { right:18px; }
}

/* A fixed architectural background; only the foreground content travels. */
.space-background,.space-veil { position:absolute; inset:0; pointer-events:none; }
.space-background {
 /* The arch crown is at 45% of the photo width. Center that landmark,
    preserving cover scale and vertical position; clamp to avoid bare edges. */
 --arch-frame-width:min(100vw,430px);
 --arch-photo-width:max(var(--arch-frame-width),66.6111dvh);
 --arch-shift:min(calc(var(--arch-photo-width) * .05),max(0px,calc((var(--arch-photo-width) - var(--arch-frame-width)) / 2)));
 background:linear-gradient(180deg,rgba(27,33,38,.36),rgba(32,39,44,.16) 30%,rgba(28,35,41,.38) 58%,rgba(28,35,41,.94) 100%),url('./assets/arch-background.webp') calc(50% + var(--arch-shift)) 42% / cover no-repeat;
}
.space-veil { background:#232c34; opacity:.12; }
.page-stage,.page-panel,.profile-card,.works-card,.contact-card { background:transparent; }
.header,.footer { background:none; }
.header-location { color:#d1d7dc; text-shadow:0 1px 8px #000; }
.profile-card { padding:0 22px 8px; }
.hero-photo { margin:0; min-height:230px; flex:1 0 230px; background:none; overflow:visible; }
.hero-photo > img { display:none; }
.hero-photo::after { display:none; }
.hero-title { left:4px; bottom:36px; text-shadow:0 2px 18px #101820b0; }
.photo-topline { left:4px; top:10px; }
.photo-corner { right:4px; bottom:36px; }
.profile-copy { margin:0; padding:24px 23px 22px; border:1px solid #b4bec033; background:#343e47ce; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 12px 30px #0c131d30; }
.profile-copy::before { left:23px; }
.project-copy { background:#424e58eb; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.card-heading,.contact-heading { text-shadow:0 1px 12px #10182099; }
.card-heading > span,.contact-heading > span { color:#d0c2a5; }
.contact-row { background:#343f48dc; border-color:#75818a70; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.contact-hours,.page-tabs button,.project-picker span { color:#d1d7dc; }
.page-tabs button[aria-current=page] { color:#e0c99f; }
.project-picker { border-color:#a6b1b344; }
@media (max-height:740px) {
 .profile-card { padding-inline:20px; }
 .hero-photo { min-height:210px; flex-basis:210px; }
 .hero-title { bottom:24px; }
 .photo-corner { bottom:24px; }
 .profile-copy { padding:20px; }
}
@media (prefers-reduced-transparency:reduce) {
 .profile-copy,.project-copy,.contact-row { background:#35414b; backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* Quiet stone grays: a restrained, evenly spaced dark-to-light range. */
.reveal-layer-0 { background:#44494d; }
.reveal-layer-1 { background:#51565a; }
.reveal-layer-2 { background:#5e6367; }
.reveal-layer-3 { background:#6b7074; }
.reveal-layer-4 { background:#787d81; }

/* Keep the card viewport still; horizontal pointer gestures scrub the existing track. */
html,body { height:100%; overflow:hidden; overscroll-behavior:none; }
.site-shell { touch-action:pinch-zoom; overscroll-behavior:none; }
.page-panel { overflow:hidden; }
.page-stage { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

/* Prevent long-press selection anywhere on the card while scrubbing pages. */
.site-shell { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

/* Footer spacing: 46px controls + 24px visual gap minus 8px panel padding. */
.site-shell { --nav-bottom:max(18px,env(safe-area-inset-bottom)); --content-bottom:calc(var(--nav-bottom) + 62px); }
.footer { bottom:var(--nav-bottom); }
.page-tabs button { font-size:18px; }