/* Canonical personal-site header. ID scope isolates it from page-specific CSS. */
#personal-site-header{position:sticky;top:0;z-index:60;background:#fffefaf5;border-bottom:1px solid #19365c16;backdrop-filter:blur(15px);color:#193253;font:16px 'Hiragino Mincho ProN','Yu Mincho',serif;letter-spacing:normal}
#personal-site-header *{box-sizing:border-box}
#personal-site-header .v-header{position:relative;max-width:1440px;width:100%;margin:auto;padding:19px 38px;display:flex;align-items:center;justify-content:space-between;gap:26px;min-height:88px}
#personal-site-header a{color:inherit;text-decoration:none}
#personal-site-header .v-identity{display:block;flex-shrink:0;padding:0;font:22px/1.4 'Hiragino Mincho ProN','Yu Mincho',serif;letter-spacing:.12em;white-space:nowrap}
#personal-site-header .v-identity span{display:block;margin-top:5px;font:9px/1.7 'Hiragino Sans','Yu Gothic',sans-serif;letter-spacing:.16em}
#personal-site-header .v-desktop-nav{display:flex;align-items:center;margin:0;gap:22px;font:12px/1.7 'Hiragino Sans','Yu Gothic',sans-serif;letter-spacing:normal}
#personal-site-header .v-desktop-nav a{display:inline-block;padding:10px 0;border:0;border-bottom:1px solid transparent;white-space:nowrap}
#personal-site-header .v-desktop-nav a[aria-current]{border-bottom-color:#b67869}
#personal-site-header .menu-toggle{display:none;position:relative;inset:auto;flex-shrink:0;align-items:center;gap:8px;min-height:44px;padding:8px;margin:0;border:0;background:#fffffff0;color:inherit;font:14px 'Hiragino Sans','Yu Gothic',sans-serif;letter-spacing:normal;white-space:nowrap;cursor:pointer}
#personal-site-header .menu-toggle span{font-size:20.8px}
#personal-site-header #menu{position:absolute;right:16px;top:calc(100% + 8px);z-index:10;width:max-content;max-width:min(90vw,420px);max-height:calc(100dvh - var(--personal-header-height,90px) - 24px);overflow:auto;overscroll-behavior:contain;margin:0;padding:16px;border:0;background:white;color:#193253;box-shadow:0 10px 45px #061d4325;font:16px 'Hiragino Sans','Yu Gothic',sans-serif;letter-spacing:normal}
#personal-site-header #menu[hidden]{display:none!important}
#personal-site-header #menu a{display:block;width:100%;padding:12px;border:0;text-align:left;font:16px 'Hiragino Sans','Yu Gothic',sans-serif;letter-spacing:normal}
#personal-site-header #menu a[aria-current]{color:#8b5144}
#personal-site-header a:focus-visible,#personal-site-header button:focus-visible{outline:3px solid #bb473d;outline-offset:4px}
#personal-site-header .v-desktop-nav a:hover,#personal-site-header #menu a:hover{text-decoration:underline;text-underline-offset:6px}
#personal-site-header .v-reading-chat{display:none;gap:7px;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;padding:6px 12px;border:1px solid #d7d7c9;border-radius:3px;font:11px/1.6 'Hiragino Sans','Yu Gothic',sans-serif;letter-spacing:normal;white-space:nowrap;color:#fff4d4;background:linear-gradient(100deg,#122847dd,#243d4fa8),url('/site-assets/assets/earth-journey-original.png') center/cover}
html.shared-header-reading:not(.shared-header-contact-visible) #personal-site-header .v-reading-chat{display:inline-flex}
html.shared-header-reading body .openchat-fixed,html.shared-header-contact-visible body .openchat-fixed{display:none}
/* The homepage's existing role stays with its hero, outside the shared navigation. */
.personal-hero-identity{position:relative;z-index:3;margin-bottom:3.5vw}
.personal-hero-identity .role{margin-top:0}
body.personal .content-section[id]{scroll-margin-top:calc(var(--personal-header-height,90px) + 20px)}
@media(min-width:1181px){
 html.shared-header-reading #personal-site-header .v-header{gap:18px}
 html.shared-header-reading #personal-site-header .v-desktop-nav{margin-left:auto;gap:16px}
}
@media(max-width:1180px){
 #personal-site-header .v-desktop-nav{display:none}
 #personal-site-header .menu-toggle{display:flex}
 #personal-site-header .v-header{padding:16px 40px;min-height:83px}
}
@media(max-width:760px){
 #personal-site-header .v-header{padding:11px 22px;min-height:76px;gap:8px}
 #personal-site-header .v-identity{font-size:20px}
 #personal-site-header .v-identity span{font-size:8px}
 #personal-site-header .menu-toggle{font-size:11px;padding:5px 0 5px 14px;background:none}
 #personal-site-header .v-reading-chat{display:inline-flex;font-size:10px;padding:6px 10px}
 
 body:has(#personal-site-header) .openchat-fixed{display:none}
 .personal-hero-identity{margin-bottom:26px}
 .personal-hero-identity .role{margin-top:0}
}
@media(max-width:359px){
 #personal-site-header .v-header{padding-inline:12px;gap:6px}
 #personal-site-header .menu-toggle{padding-left:2px}
 #personal-site-header .v-reading-chat{padding-inline:7px;gap:4px}
}
@media print{#personal-site-header{display:none}}

.site-footer .footer-nav a[aria-current="page"]{font-weight:600;text-decoration:underline;text-underline-offset:5px}
.site-footer a:focus-visible{outline:3px solid #527e9b;outline-offset:4px}

/* Shared sticky header is already in flow; remove the legacy hero header reserve. */
@media(min-width:761px){
 body.personal:has(#personal-site-header) .personal-hero{--header-space:0px}
}

/* One persistent invitation, integrated into the shared header. */
#personal-site-header .v-reading-chat{display:inline-flex;padding:9px 13px;gap:10px;color:#fff4d4}
#personal-site-header .v-chat-copy{display:flex;flex-direction:column;gap:3px}
#personal-site-header .v-chat-copy strong{font-size:12px;font-weight:500;line-height:1.6}
#personal-site-header .v-chat-copy small{font-size:10px;line-height:1.5;color:#ede3c6}
#personal-site-header .v-reading-chat:hover{border-color:#bfa777;filter:brightness(1.12)}
body:has(#personal-site-header) .openchat-fixed{display:none!important}
@media(min-width:1381px){#personal-site-header .v-header{gap:18px}#personal-site-header .v-desktop-nav{margin-left:auto;gap:16px}}
@media(max-width:1380px){#personal-site-header .v-desktop-nav{display:none}#personal-site-header .menu-toggle{display:flex}#personal-site-header .v-reading-chat{margin-left:auto}}
@media(max-width:760px){#personal-site-header .v-chat-desktop{display:none}#personal-site-header .v-reading-chat{padding:6px 9px;gap:5px}#personal-site-header .v-chat-copy strong{font-size:11px}#personal-site-header .v-chat-copy small{font-size:9px}}
@media(max-width:359px){#personal-site-header .v-identity{font-size:18px}#personal-site-header .v-identity span{font-size:7px}#personal-site-header .v-reading-chat{padding-inline:7px}#personal-site-header .menu-toggle{font-size:10px}}

/* Keep destinations visible on tablet and desktop; only phones use MENU. */
@media(min-width:761px){#personal-site-header .menu-toggle{display:none}#personal-site-header .v-desktop-nav{display:flex}}
@media(min-width:761px) and (max-width:1380px){
 #personal-site-header .v-header{display:grid;grid-template-columns:1fr auto;gap:12px 24px;padding:14px 28px 10px}
 #personal-site-header .v-identity{grid-column:1;grid-row:1}
 #personal-site-header .v-reading-chat{grid-column:2;grid-row:1;margin-left:0}
 #personal-site-header .v-desktop-nav{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:12px;margin:0;border-top:1px solid #19365c12;padding-top:4px;font-size:11px}
 #personal-site-header .v-desktop-nav a{padding:8px 0}
}

/* Tablet navigation stays available without reading as a separate banner. */
@media(min-width:761px) and (max-width:1380px){
 #personal-site-header .v-header{row-gap:3px;padding-bottom:5px}
 #personal-site-header .v-desktop-nav{border-top:0;padding-top:0;justify-content:center;gap:24px;color:#607187;font-size:11px}
 #personal-site-header .v-desktop-nav a{display:inline-flex;align-items:center;min-height:40px;padding:7px 0;color:#607187}
 #personal-site-header .v-desktop-nav a:hover,#personal-site-header .v-desktop-nav a:focus-visible,#personal-site-header .v-desktop-nav a[aria-current]{color:#193253}
}
@media(min-width:761px) and (max-width:900px){#personal-site-header .v-desktop-nav{gap:18px}}