/* Header and editorial motion. Existing page grids remain in styles.css. */
:root {
  --motion-fast: 180ms;
  --motion-panel: 280ms;
  --motion-reveal: 360ms;
  --ease-editorial: cubic-bezier(.22, .61, .36, 1);
}
html { scrollbar-gutter: stable; }
html.menu-open { overflow: hidden; }
.header {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(580px, calc(100% - 32px));
  background: var(--ink);
  color: var(--paper);
  border: 1px solid #42453f;
  border-radius: 3px;
}
.header .wordmark {
  position: absolute;
  top: 9px;
  left: 24px;
  z-index: 1;
  font-size: 1.5rem;
}
.header .wordmark span { color: inherit; }
.header .menu { position: static; }
.header .menu summary {
  margin: 7px 15px 7px auto;
  color: var(--paper);
}
.header .menu-lines { width: 26px; gap: 5px; }
.header .menu-lines i {
  background: currentColor;
  transition: transform var(--motion-panel) var(--ease-editorial), opacity var(--motion-fast);
}
.header .menu[open] .menu-lines i:first-child { transform: translateY(6px) rotate(45deg); }
.header .menu[open] .menu-lines i:last-child { transform: translateY(-6px) rotate(-45deg); }
.header[data-expanded="false"] .menu-lines i { transform: none !important; opacity: 1; }
.menu-body { display: grid; grid-template-rows: 1fr; }
.header-ready .menu-body {
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--motion-panel) var(--ease-editorial), opacity var(--motion-fast);
}
.header[data-expanded="true"] .menu-body { grid-template-rows: 1fr; opacity: 1; }
.menu-clip { min-height: 0; overflow: hidden; }
.header .menu nav {
  position: static;
  width: 100%;
  padding: 0 24px 6px;
  max-height: calc(100svh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid #42453f;
}
.header .menu nav a {
  position: relative;
  min-height: 64px;
  padding: 17px 4px;
  gap: 24px;
  font-size: 1.375rem;
  line-height: 1.35;
  letter-spacing: -.035em;
  border-color: #42453f;
  transition: color var(--motion-fast);
}
.header .menu nav a small { font-size: .75rem; color: #b8bab5; }
.header .menu nav a[aria-current] { color: var(--paper); }
.header .menu nav a[aria-current]::after {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--accent);
  margin: auto 0 auto auto;
}
.header a:focus-visible, .header summary:focus-visible { outline-offset: 1px; }
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgb(15 18 15 / 42%);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--motion-panel) ease, visibility var(--motion-panel);
}
.menu-open .menu-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
.hero-info .hero-location { margin-top: 8px; color: var(--muted); font-weight: 400; }
.hero-tagline { margin-top: 48px; font-size: .9375rem; letter-spacing: -.02em; }
.about-copy mark {
  color: var(--ink);
  background: var(--accent);
  padding: .04em .15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Small entry displacement; no stagger or navigation delay. */
@keyframes editorial-entry {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1, .hero-info, .hero-tagline, .archive-heading, .case-title {
  animation: editorial-entry 320ms var(--ease-editorial) both;
}
.portrait, .project-cover, .project-figure {
  transition: opacity var(--motion-reveal) ease, transform var(--motion-reveal) var(--ease-editorial);
}
.reveal-pending { opacity: 0; transform: translateY(12px); }
.text-link > span { transition: transform var(--motion-fast) var(--ease-editorial), color var(--motion-fast); }
.project-cover img { transition: transform var(--motion-reveal) var(--ease-editorial); }
.project-caption h3 { transition: text-decoration-color var(--motion-fast); }
@media (hover: hover) and (pointer: fine) {
  .project-tile a:hover .project-cover.screen img { transform: scale(1.015); }
  .text-link:hover > span { transform: translate(2px, -2px); }
  .header .menu nav a:hover { color: var(--accent); }
}
/* Progressive same-origin page crossfade. Unsupported browsers navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
@media (max-width: 640px) {
  .header { top: 12px; }
  .header .wordmark { left: 18px; }
  .header .menu summary { margin-right: 10px; }
  .header .menu nav { padding-inline: 18px; }
  .menu-backdrop { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .hero-info .hero-location { margin-top: 6px; }
  .hero-info > p { margin-top: 16px; }
  .hero-tagline { margin-top: 36px; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-pending { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}