/* Reading front: the fill travels left to right without moving the text. */
.about-word { --word-color: #fff; }
.about-word.accent { --word-color: var(--accent); }
.about-paragraph.is-reading .about-word {
  background: linear-gradient(90deg, var(--word-color) 0 var(--word-fill, 0%), #48484e var(--word-fill, 0%) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.about-icon { display: inline-flex; align-items: center; }

.work-actions { display: flex; justify-content: center; margin-top: clamp(32px, 2.604167vw, 50px); }
.work-actions .pill { min-height: 50px; }

/* The center card expands while its neighbors contract. The outer gallery
   keeps a constant height, so the document's scroll position never jumps. */
.project-gallery {
  --project-width: 63.33333333333333%;
  --project-gap: clamp(20px, 2.083333vw, 40px);
  position: relative;
  margin-top: clamp(36px, 2.6042vw, 50px);
}
.project-stack { display: flex; flex-direction: column; align-items: center; gap: var(--project-gap); margin: 0; }
.project { width: var(--project-width); margin: 0; }
.project-cover { aspect-ratio: 1064 / 462; height: auto; border-radius: var(--project-radius, 24px); }
.project figcaption { margin-top: 14px; font-size: clamp(12px, 1.1458vw, 22px); line-height: 1.5; }
.project-rail-track { display: none; }
.project-gallery.is-animated .project-stack { display: block; position: relative; }
.project-gallery.is-animated .project { position: absolute; left: 50%; top: 0; will-change: transform; }
.project-gallery.is-animated .project-cover { height: 100%; aspect-ratio: auto; }
.project-gallery.is-animated .project figcaption {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.project-gallery.is-animated .project-rail-track {
  display: block; position: absolute; inset: var(--project-edge) 0;
  pointer-events: none;
}
.project-rails { position: sticky; top: 50vh; height: 0; z-index: 2; }
.project-progress {
  position: absolute; left: 0; top: -21.5px; width: 30px; height: 43px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.project-progress-step {
  position: relative; display: block; width: 15px; height: 1.5px;
  overflow: hidden; opacity: .4; flex-shrink: 0;
  transition: width .2s ease, opacity .2s ease;
}
.project-progress-step.is-current { width: 30px; opacity: 1; }
/* Reuse the existing Figma SVG's white stroke in each clipped line slot;
   the SVG itself retains its original 30 × 43 dimensions. */
.project-progress-ink { position: absolute; left: 50%; top: -20.75px; transform: translateX(-50%); }
.project-title-window {
  position: absolute; left: calc(50% + var(--project-width) / 2 + clamp(24px, 5vw, 96px)); right: -1%; top: -1.2em;
  height: 2.4em; overflow: hidden;
  font-size: clamp(11px, 1.1458vw, 22px); line-height: 1.2; font-weight: 600;
}
.project-title { height: 2.4em; display: flex; align-items: center; }

/* Five alternating horizontal wipes reveal the backdrop before the menu rows. */
.navigation-dialog { background: transparent; backdrop-filter: none; }
.navigation-dialog::backdrop { background: transparent; backdrop-filter: none; }
.menu-curtain { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.menu-band {
  position: absolute; left: 0; right: 0; top: calc(var(--band) * 20%);
  height: calc(20% + 1px); background: rgba(18,18,18,.94);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
}
.menu-content { position: relative; }
.menu-link-mask { min-height: 0; }
.menu-link { height: 100%; }
.menu-artwork { overflow: hidden; }
.menu-link:focus-visible { outline-offset: -6px; }
.menu-is-open { scrollbar-gutter: stable; }

@media (max-width: 1250px) and (min-width: 901px) {
  .project-title-window { left: 84%; right: -3%; font-size: 12px; }
}
@media (max-width: 900px) {
  /* Leave room for the active project's caption before the gallery button. */
  .work-actions { margin-top: 64px; }
  .work-actions .pill { min-height: 44px; font-size: 14px; }
  .project-gallery { --project-width: 86%; --project-gap: 48px; }
  .project-progress { left: 0; transform: scale(.6); transform-origin: left center; }
  .project-title-window { display: none; }
  .project-gallery.is-animated .project figcaption {
    clip-path: none; width: 100%; height: auto; top: 100%; right: 0;
    text-align: right; overflow: visible; white-space: normal;
    opacity: 0; transition: opacity .15s;
  }
  .project-gallery.is-animated .project[data-active] figcaption { opacity: 1; }
  .menu-link-mask { height: clamp(85px, 13vh, 125px); }
  .menu-link { height: 100%; }
}
@media (max-width: 560px) {
  .project-gallery { --project-width: 88%; --project-gap: 44px; }
  .project-progress { transform: scale(.45); }
  .project figcaption { font-size: 12px; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-band { backdrop-filter: none; -webkit-backdrop-filter: none; }
}