/* Preserve the Stitch palette and editorial typography; keep layout fixes here. */
body {
  margin: 0;
  background: #F4F1EC;
  color: #0F172A;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: #B75E3C; color: #fff; }
.thin-divider, .thin-divider > * { border-color: rgb(15 23 42 / 12%); }
.thin-divider-light { border-color: rgb(244 241 236 / 14%); }
.grain-overlay {
  background-image: radial-gradient(rgb(15 23 42 / 4%) 1px, transparent 0);
  background-size: 24px 24px;
}
/* Allow grid/flex content to shrink instead of forcing the page wider. */
.grid > *, .flex > * { min-width: 0; }
h1, h2, h3, h4, p, li, a, span { overflow-wrap: anywhere; }
img { display: block; max-width: 100%; }
:where(a, button):focus-visible {
  outline: 2px solid #B75E3C;
  outline-offset: 5px;
}
#main-content:focus { outline: none; }
[id] { scroll-margin-top: 152px; }
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  background: #0F172A;
  color: #F4F1EC;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
.site-header-inner { min-height: 80px; }
.primary-nav { gap: 32px; }
.primary-nav a { padding-top: 8px; padding-bottom: 8px; }
.hero-copy { container-type: inline-size; }
.hero-copy .hero-name { font-size: min(6rem, 13cqi); overflow-wrap: normal; }
.image-caption { flex-wrap: wrap; gap: 8px 16px; }
.system-diagram { min-height: 300px; }
.system-diagram .flex { flex-wrap: wrap; gap: 8px; }
.system-diagram .grid { align-items: start; }
.profile-facts > .flex { align-items: flex-start; flex-wrap: wrap; gap: 8px 16px; }
.profile-facts > .flex > span:last-child { flex: 1 1 160px; text-align: right; }
.profile-facts > .flex > span.inline-flex { justify-content: flex-end; }
.contact-actions a { overflow-wrap: anywhere; }
@media (max-width: 1279px) {
  .site-header-inner { flex-wrap: wrap; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .primary-nav { width: 100%; flex-wrap: wrap; gap: 4px 24px; }
  .primary-nav a { font-size: 11px; }
}
@media (max-width: 639px) {
  main > section:first-child { padding-top: 160px; }
  .primary-nav { gap: 4px 16px; }
  .primary-nav a { font-size: 10px; letter-spacing: .12em; }
  #work .case-copy { padding: 24px; }
  #work .system-diagram { padding: 16px; }
  .profile-facts > .flex > span:last-child { text-align: left; }
  .profile-facts > .flex > span.inline-flex { justify-content: flex-start; }
  .profile-portrait .absolute { flex-wrap: wrap; gap: 8px; }
}
@media (min-width: 1280px) {
  [id] { scroll-margin-top: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Motion primitives: content stays visible until the observer is ready. */
:root {
  --motion-duration: 720ms;
  --motion-fade-duration: 480ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}
.motion-mask {
  display: block;
  overflow: hidden;
  /* Preserve line height while giving serif ascenders/descenders clearance. */
  padding-block: .12em;
  margin-block: -.12em;
}
.motion-text { display: block; }
[data-reveal="text"] .motion-text {
  transition: transform var(--motion-duration) var(--motion-ease) var(--motion-delay, 0ms);
}
[data-reveal="text"].is-pending .motion-text { transform: translateY(115%); }
[data-reveal="image"] {
  transition: clip-path var(--motion-duration) var(--motion-ease) var(--motion-delay, 0ms);
  clip-path: inset(0 0 0 0);
}
[data-reveal="image"].is-pending { clip-path: inset(0 0 100% 0); }
[data-reveal="fade"] {
  transition: opacity var(--motion-fade-duration) ease-out var(--motion-delay, 0ms);
}
[data-reveal="fade"].is-pending { opacity: 0; }
/* Preparing an offscreen element must never animate it out of view. */
[data-reveal].is-pending,
[data-reveal="text"].is-pending .motion-text { transition: none; }
/* Keyboard focus always exposes a pending interactive item. */
[data-reveal="fade"]:focus-within { opacity: 1; }
.primary-nav a[aria-current="location"] {
  text-decoration: underline;
  text-decoration-color: #B75E3C;
  text-underline-offset: 6px;
}
.scroll-progress {
  position: fixed;
  top: 0;
  right: 0;
  width: 2px;
  height: 100vh;
  height: 100dvh;
  z-index: 60;
  background: #B75E3C;
  transform: scaleY(0);
  transform-origin: top;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal] .motion-text,
  [data-parallax], [data-pointer-follow] {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
  .scroll-progress { display: none; }
}