/* Real document navigation remains the fallback; no click interception or router. */
@view-transition { navigation: auto; }

/* Let our responsive type sizes, rather than iOS text inflation, determine
   both the live layout and its transition snapshots. Pinch zoom stays enabled. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* Keep the existing inline name's line breaks, including its separate comma.
   Two capture boxes allow the name to wrap without flattening the composition. */
.home-name-link { color:inherit; text-decoration:none; }
.home-name-link [data-shared-word] { display:inline-block; }
.home-word [data-shared-word] { display:inline-block; }
.home-name-link:focus-visible { outline:2px solid currentColor; outline-offset:5px; }

[data-shared-word="keith"] { view-transition-name:keith; }
[data-shared-word="murdoch"] { view-transition-name:murdoch; }
[data-shared-word="paintings"] { view-transition-name:paintings; }
[data-shared-word="writings"] { view-transition-name:writings; }
[data-shared-word="about"] { view-transition-name:about; }
[data-shared-word="contact"] { view-transition-name:contact; }

html:has(.compact-heading) { scrollbar-gutter:stable; }

/* Replace only the navigation region; retain the interior content grid/widths. */
#site-heading.compact-heading {
 grid-column:1 / -1;
 display:flex;
 align-items:baseline;
 flex-wrap:wrap;
 gap:8px clamp(28px, 5vw, 72px);
 margin-bottom:clamp(32px, 5vw, 64px);
 color:#080808;
 font-family:Arial, Helvetica, sans-serif;
 line-height:1.12;
 letter-spacing:-.035em;
}
.compact-name {
 flex:none;
 font-size:clamp(24px, 2.2vw, 32px);
 font-weight:700;
 white-space:nowrap;
}
.compact-navigation { display:flex; flex-wrap:wrap; min-width:0; max-width:100%; gap:4px clamp(20px, 3vw, 40px); }
.compact-heading a {
 display:inline-flex;
 align-items:center;
 min-height:44px;
 color:inherit;
 text-decoration:none;
}
.compact-heading .compact-name { display:block; padding:6px 0; }
.compact-heading [data-shared-word] { display:inline-block; }
.compact-navigation a { font-size:clamp(20px, 1.7vw, 24px); font-weight:700; color:#5a5a58; }
.compact-navigation a[aria-current="page"] { color:#080808; }
.compact-heading a:hover { color:#555; }
.compact-heading a:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.keith-skip-link { position:absolute; top:0; left:24px; padding:12px; background:#fff; color:#080808; transform:translateY(-150%); z-index:10; }
.keith-skip-link:focus { transform:none; }
/* Interior templates use viewport-fit=cover; keep content out of the notch. */
#wrapper { padding-left:max(clamp(1.5rem, 4vw, 4.5rem), env(safe-area-inset-left)); padding-right:max(clamp(1.5rem, 4vw, 4.5rem), env(safe-area-inset-right)); }
@media (max-width:760px) {
 #wrapper { padding-left:max(1.5rem, env(safe-area-inset-left)); padding-right:max(1.5rem, env(safe-area-inset-right)); }
 #site-heading.compact-heading { gap:8px 28px; margin-bottom:36px; }
 .compact-navigation { gap:4px 24px; }
}

/* Simultaneous, direct travel. The prose/content fades independently underneath. */
::view-transition-group(*) { animation-duration:500ms; animation-timing-function:cubic-bezier(.25, .1, .25, 1); }
::view-transition-old(root) { animation:keith-prose-out 160ms ease-out both; }
::view-transition-new(root) { animation:keith-prose-in 240ms ease-in 240ms both; }
::view-transition-old(keith), ::view-transition-new(keith),
::view-transition-old(murdoch), ::view-transition-new(murdoch),
::view-transition-old(paintings), ::view-transition-new(paintings),
::view-transition-old(writings), ::view-transition-new(writings),
::view-transition-old(about), ::view-transition-new(about),
::view-transition-old(contact), ::view-transition-new(contact) {
 height:100%; width:100%;
 animation-duration:500ms;
 animation-timing-function:linear;
}
@keyframes keith-prose-out { to { opacity:0; } }
@keyframes keith-prose-in { from { opacity:0; } }
@media (prefers-reduced-motion:reduce) {
 @view-transition { navigation:none; }
 ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration:1ms !important; animation-delay:0ms !important; }
}