:root {
  --paper: #fff;
  --ink: #000;
  --soft-ink: rgba(0, 0, 0, .62);
  --faint-ink: rgba(0, 0, 0, .36);
  --rule: rgba(0, 0, 0, .18);
  --rule-strong: rgba(0, 0, 0, .78);
  --grotesk: "Space Grotesk", Arial, Helvetica, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --pad: clamp(1rem, 2.8vw, 3.25rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.76, 0, .24, 1);
  --ease-snap: cubic-bezier(.85, 0, .15, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color-scheme: light;
  background: var(--paper);
  scroll-behavior: auto;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--grotesk);
  font-size: 16px;
  line-height: 1.35;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overscroll-behavior-y: none;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body.is-loading,
body.scroll-locked {
  overflow: hidden;
}

body.is-loading {
  height: 100svh;
}

main,
.site-footer {
  position: relative;
  z-index: 2;
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 10000;
  padding: .7rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font: 500 .65rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateY(-180%);
  transition: transform .45s var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.micro {
  font-family: var(--mono);
  font-size: clamp(.56rem, .63vw, .7rem);
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.quantum-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.quantum-field-ready .quantum-field {
  opacity: 1;
}

.field-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .68), transparent 16%, transparent 84%, rgba(255, 255, 255, .68)),
    linear-gradient(0deg, rgba(255, 255, 255, .35), transparent 22%, transparent 82%, rgba(255, 255, 255, .28));
  transition: opacity .7s var(--ease-soft);
}

.is-field-solo .field-vignette {
  opacity: .26;
}

/* Loading sequence */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
  clip-path: inset(0);
}

.loader__field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font: 400 .66rem/1 var(--mono);
}

.loader__field i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: block;
  font-style: normal;
  opacity: 0;
  transform: rotate(var(--r));
}

.loader__top,
.loader__bottom {
  position: absolute;
  right: var(--pad);
  left: var(--pad);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding-top: .55rem;
}

.loader__top {
  top: var(--pad);
}

.loader__bottom {
  bottom: var(--pad);
}

.loader__core {
  position: relative;
  z-index: 2;
  width: min(29rem, calc(100vw - 2 * var(--pad)));
  text-align: center;
}

.loader__label,
.loader__status {
  color: var(--soft-ink);
}

.loader__mark {
  margin: 1.2rem 0 1.65rem;
  font-family: var(--grotesk);
  font-size: clamp(3.7rem, 10vw, 8rem);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: .78;
}

.loader__mark span {
  display: inline-block;
  transform: translateY(-.12em);
}

.loader__track {
  width: 100%;
  height: 1px;
  margin-bottom: .72rem;
  background: var(--rule);
  overflow: hidden;
}

.loader__track i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}

.loader__status {
  display: block;
  min-height: 1em;
  text-align: left;
}

/* Page wipe */
.page-wipe {
  position: fixed;
  inset: 0;
  /* Above the loader (9000): a transition fired during the intro must not be
     painted underneath it. Stays below the cursor layer (9998). */
  z-index: 9500;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.4rem;
  background: var(--ink);
  color: var(--paper);
  clip-path: inset(100% 0 0 0);
  pointer-events: none;
}

.page-wipe__no {
  font: 400 clamp(7rem, 24vw, 22rem)/.7 var(--grotesk);
  letter-spacing: -.08em;
}

.page-wipe__name {
  border-top: 1px solid rgba(255, 255, 255, .38);
  padding-top: .7rem;
  min-width: 12rem;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

.page-wipe i {
  position: absolute;
  top: 50%;
  width: 4rem;
  height: 1px;
  background: var(--paper);
  animation: wipe-scan 1.2s var(--ease-inout) infinite;
}

@keyframes wipe-scan {
  0% { transform: translateX(-35vw) scaleX(.1); }
  50% { transform: translateX(0) scaleX(1); }
  100% { transform: translateX(35vw) scaleX(.1); }
}

/* Cursor */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
}

.cursor-ready .cursor {
  opacity: 1;
}

.cursor--dot {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--ink);
}

.cursor--ring {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  transition:
    width .45s var(--ease-out),
    height .45s var(--ease-out),
    margin .45s var(--ease-out),
    background .45s var(--ease-out);
}

.cursor--ring span {
  color: var(--paper);
  font: 500 .48rem/1 var(--mono);
  letter-spacing: .08em;
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}

.cursor--ring.is-active {
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
}

.cursor--ring.is-open {
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  background: var(--ink);
}

.cursor--ring.is-open span {
  opacity: 1;
}

@media (pointer: fine) {
  body,
  a,
  button,
  [role="button"] {
    cursor: none;
  }
}

/* Floating controls */
.menu-toggle {
  position: fixed;
  top: var(--pad);
  right: var(--pad);
  z-index: 7000;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 7.6rem;
  height: 2.45rem;
  padding: 0 .85rem;
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, .96);
  font: 500 .62rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition:
    background .55s var(--ease-out),
    color .55s var(--ease-out),
    width .55s var(--ease-out);
}

.menu-toggle:hover,
.menu-open .menu-toggle {
  background: var(--ink);
  color: var(--paper);
}

.menu-toggle__glyph {
  position: relative;
  display: block;
  width: 1.2rem;
  height: .7rem;
}

.menu-toggle__glyph i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform .6s var(--ease-inout), top .6s var(--ease-inout);
}

.menu-toggle__glyph i:first-child { top: 2px; }
.menu-toggle__glyph i:last-child { top: 8px; width: 68%; }
.menu-open .menu-toggle__glyph i:first-child { top: 5px; transform: rotate(45deg); }
.menu-open .menu-toggle__glyph i:last-child { top: 5px; width: 100%; transform: rotate(-45deg); }

.section-rail {
  position: fixed;
  top: 50%;
  left: var(--pad);
  z-index: 4000;
  display: grid;
  grid-template-rows: auto 6.5rem auto;
  justify-items: center;
  gap: .75rem;
  width: 1.2rem;
  color: var(--ink);
  transform: translateY(-50%);
  pointer-events: none;
}

.section-rail__current {
  font: 500 .67rem/1 var(--mono);
}

.section-rail__line {
  position: relative;
  display: block;
  width: 1px;
  height: 100%;
  background: var(--rule);
  overflow: hidden;
}

.section-rail__line b {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: top;
}

.section-rail__name {
  font: 400 .54rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Full-screen menu */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 6500;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--pad);
  background: var(--paper);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition:
    clip-path .85s var(--ease-inout),
    visibility 0s linear .86s;
}

.menu-open .menu-overlay {
  clip-path: inset(0);
  visibility: visible;
  transition:
    clip-path .85s var(--ease-inout),
    visibility 0s;
}

.menu-overlay__meta,
.menu-overlay__footer {
  display: flex;
  justify-content: space-between;
  padding-top: .55rem;
  border-top: 1px solid var(--ink);
}

.menu-overlay__meta {
  width: calc(100% - 10rem);
}

.menu-nav {
  align-self: center;
  width: min(80rem, 100%);
  margin: 2rem auto;
  border-top: 1px solid var(--ink);
  overflow: hidden;
}

.menu-nav a {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(.5rem, 1.15vh, .9rem) 0;
  border-bottom: 1px solid var(--rule);
  transition:
    padding .55s var(--ease-out),
    background .55s var(--ease-out),
    color .55s var(--ease-out);
}

.menu-nav a:hover {
  padding-right: 1rem;
  padding-left: 1rem;
  background: var(--ink);
  color: var(--paper);
}

.menu-nav a span,
.menu-nav a i {
  font: 400 .61rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.menu-nav a b {
  font-size: clamp(1.8rem, 4.4vw, 4.2rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .92;
}

.menu-nav a i {
  font-style: normal;
  text-align: right;
}

/* Shared section architecture */
.scene {
  position: relative;
  min-height: 100svh;
  padding-right: var(--pad);
  padding-left: max(calc(var(--pad) + 2.3rem), 5.2vw);
}

.section {
  padding-top: clamp(4.75rem, 7vw, 7rem);
  padding-bottom: clamp(4.75rem, 7vw, 7rem);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(10rem, 27vw) 1fr;
  align-items: start;
  border-top: 1px solid var(--ink);
  padding-top: .75rem;
}

.section-heading__index {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
}

.section-number {
  font: 400 clamp(2.2rem, 4.7vw, 5rem)/.75 var(--grotesk);
  letter-spacing: -.07em;
}

.section-heading h2 {
  font-size: clamp(4rem, 10.5vw, 10.5rem);
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .73;
}

.statement {
  font-size: clamp(1.7rem, 3.9vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .99;
  text-wrap: balance;
}

.char-clip,
.word-clip {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.char,
.word {
  display: inline-block;
}

/* Only the hero chars stay promoted — they ride the scroll scrub. A blanket
   will-change on every reveal target costs GPU memory and compositing time. */
.hero .char {
  will-change: transform;
}

/* Hero — tall on purpose: its height is the runway for the whole opening
   sequence, so more height = slower, more legible scroll choreography. */
.hero {
  min-height: 320svh;
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
}

.hero__stage {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  height: 100svh;
  padding-top: var(--pad);
  padding-bottom: var(--pad);
  overflow: hidden;
  /* 1px = mask fully closed: the name renders solid on load. The opening
     scrub grows this, dissolving the fill into the trace outline. A length
     here must stay a plain px value so GSAP can interpolate it. */
  --wordmark-mask-radius: 1px;
  --wordmark-mask-x: 50%;
  --wordmark-mask-y: 50%;
  --opening-clock: 0;
}

.hero__stage::before,
.hero__stage::after {
  content: "";
  position: absolute;
  top: var(--pad);
  bottom: var(--pad);
  width: 1px;
  background: var(--rule);
}

.hero__stage::before { left: 0; }
.hero__stage::after { right: 0; }

.hero__meta,
.hero__coordinates {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-left: 1rem;
  border-top: 1px solid var(--ink);
  padding-top: .55rem;
}

/* Keep the frame label clear of the fixed menu toggle. */
.hero__meta span:last-child {
  margin-right: 8.7rem;
}

.hero__wordmark {
  position: relative;
  z-index: 2;
  align-self: center;
  width: calc(100% + 2vw);
  margin-left: -1vw;
  will-change: transform, opacity;
}

.wordmark {
  white-space: nowrap;
  font-size: clamp(4.15rem, 14.65vw, 15.7rem);
  font-weight: 400;
  letter-spacing: -.092em;
  line-height: .68;
}

.wordmark--fill {
  position: relative;
  z-index: 2;
  color: var(--ink);
  -webkit-mask-image: radial-gradient(
    circle var(--wordmark-mask-radius) at var(--wordmark-mask-x) var(--wordmark-mask-y),
    transparent 0%,
    transparent 38%,
    rgba(0, 0, 0, .12) 49%,
    rgba(0, 0, 0, .72) 66%,
    #000 82%
  );
  mask-image: radial-gradient(
    circle var(--wordmark-mask-radius) at var(--wordmark-mask-x) var(--wordmark-mask-y),
    transparent 0%,
    transparent 38%,
    rgba(0, 0, 0, .12) 49%,
    rgba(0, 0, 0, .72) 66%,
    #000 82%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.wordmark--trace {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: transparent;
  opacity: .36;
  -webkit-text-stroke: 1px var(--ink);
  transform: translate(.7vw, .8vw);
  -webkit-mask-image: radial-gradient(
    circle var(--wordmark-mask-radius) at var(--wordmark-mask-x) var(--wordmark-mask-y),
    #000 0%,
    #000 37%,
    rgba(0, 0, 0, .75) 52%,
    transparent 76%
  );
  mask-image: radial-gradient(
    circle var(--wordmark-mask-radius) at var(--wordmark-mask-x) var(--wordmark-mask-y),
    #000 0%,
    #000 37%,
    rgba(0, 0, 0, .75) 52%,
    transparent 76%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* The Kainz mark that takes over from the wordmark's K during the opening
   scrub. GSAP positions it; it stays inert (and hidden) otherwise. */
.hero__klogo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 7.25rem;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.hero__klogo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Baked erosion stages stack on the base mark; GSAP crossfades them. */
.hero__klogo img + img {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}

/* The brand mark replaces the K glyph inside the wordmark itself. */
/* The mark reads as the K of "Kainz": open space before it, tight to the
   "a" that follows, so the name groups Etienne / Kainz. */
.char--kmark img,
.wordmark__kmark-trace {
  display: inline-block;
  width: auto;
  height: .9em;
  margin: 0 -.028em 0 .085em;
  vertical-align: baseline;
  transform: translateY(.065em);
}

/* The trace ghost shows the name WITHOUT the K — the mark has departed.
   Keeping the element preserves the letter spacing; hiding it prevents a
   second K appearing behind the gliding one. */
.wordmark__kmark-trace {
  visibility: hidden;
}

.hero__subline {
  position: absolute;
  right: var(--pad);
  bottom: 12.5vh;
  z-index: 3;
  width: min(44rem, 59vw);
  padding: .55rem 0 .7rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: rgba(255, 255, 255, .9);
}

.hero__subline p {
  font: 400 clamp(.7rem, 1.05vw, 1rem)/1.35 var(--mono);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.hero__coordinates {
  align-self: end;
}

.hero__overture {
  position: absolute;
  top: 50%;
  right: 1rem;
  left: 1rem;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(3rem, 1fr) auto;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1.25rem);
  will-change: transform, opacity;
}

.hero__overture i {
  display: block;
  height: 1px;
  overflow: hidden;
  background: var(--rule-strong);
  transform: scaleX(0);
  transform-origin: left;
}

.scroll-cue {
  position: absolute;
  bottom: 6.1rem;
  /* Sits just left of the subline block instead of colliding with it. */
  right: calc(var(--pad) + min(44rem, 59vw) + 2.8rem);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: .65rem;
  font: 400 .54rem/1 var(--mono);
  letter-spacing: .13em;
  writing-mode: vertical-rl;
}

.scroll-cue i {
  display: block;
  width: 1px;
  height: 3.3rem;
  background: var(--ink);
  transform-origin: top;
  animation: scroll-pulse 1.8s var(--ease-inout) infinite;
}

@keyframes scroll-pulse {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* About */
.about {
  min-height: 115svh;
}

.about__lead {
  width: min(77rem, 89%);
  margin: clamp(4.5rem, 7vw, 7.5rem) 0 clamp(3.5rem, 6vw, 6rem) auto;
}

.about__lead .statement,
.projects__intro .statement,
.figure-section__lead {
  text-shadow:
    0 0 2px var(--paper),
    0 0 12px var(--paper),
    0 0 24px var(--paper);
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(14rem, 28vw) 1fr;
  align-items: start;
  gap: clamp(2rem, 8vw, 10rem);
}

.headshot {
  width: min(24rem, 100%);
  margin-left: 4vw;
  background: var(--paper);
}

.image-shell {
  overflow: hidden;
  border: 1px solid var(--ink);
}

.headshot img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
}

.headshot figcaption,
.wave-figure > figcaption,
.gallery-card figcaption,
.project-sheet__figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--ink);
  padding: .55rem 0;
  font: 400 .58rem/1.25 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ethos {
  margin-top: 7vw;
  background: rgba(255, 255, 255, .93);
}

.ethos__label {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--ink);
  padding: .55rem 0;
}

.spec-table {
  border-top: 1px solid var(--ink);
}

.spec-table > div {
  display: grid;
  grid-template-columns: minmax(9rem, 27%) 1fr;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0;
  transition:
    padding .5s var(--ease-out),
    background .5s var(--ease-out);
}

.spec-table > div:hover {
  padding-right: .8rem;
  padding-left: .8rem;
  background: var(--ink);
  color: var(--paper);
}

.spec-table dt {
  font: 400 .62rem/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.spec-table dd {
  font-size: clamp(.9rem, 1.25vw, 1.2rem);
}

.ticker {
  width: calc(100% + max(calc(var(--pad) + 2.3rem), 5.2vw) + var(--pad));
  margin: clamp(5rem, 8vw, 8rem) 0 0 calc(max(calc(var(--pad) + 2.3rem), 5.2vw) * -1);
  overflow: hidden;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: rgba(255, 255, 255, .82);
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  width: max-content;
  padding: 1.05rem 0;
  animation: ticker-move 26s linear infinite;
}

.ticker__track span {
  font-size: clamp(1rem, 1.7vw, 1.6rem);
  letter-spacing: -.02em;
  white-space: nowrap;
}

.ticker__track i {
  font: 400 .62rem/1 var(--mono);
  font-style: normal;
}

@keyframes ticker-move {
  to { transform: translateX(-50%); }
}

/* Projects */
.projects {
  min-height: 125svh;
}

.projects__intro {
  display: grid;
  grid-template-columns: 1fr minmax(22rem, 32vw);
  align-items: end;
  gap: clamp(3rem, 8vw, 9rem);
  margin: clamp(4.5rem, 7vw, 7.5rem) 0 clamp(3.5rem, 5vw, 5.5rem) min(25vw, 22rem);
}

.projects__intro .statement {
  font-size: clamp(1.6rem, 3.4vw, 3.7rem);
}

.filter-bar {
  display: grid;
  border-top: 1px solid var(--ink);
}

.filter-bar button {
  display: flex;
  justify-content: space-between;
  padding: .65rem 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  font: 400 .63rem/1 var(--mono);
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  transition:
    padding .45s var(--ease-out),
    background .45s var(--ease-out),
    color .45s var(--ease-out);
}

.filter-bar button:hover,
.filter-bar button.active {
  padding-right: .65rem;
  padding-left: .65rem;
  background: var(--ink);
  color: var(--paper);
}

.project-index {
  border-top: 1px solid var(--ink);
  background: rgba(255, 255, 255, .9);
}

.project-row {
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
}

.project-row[hidden] {
  display: none;
}

.project-trigger {
  display: grid;
  grid-template-columns: 5rem minmax(15rem, 1.05fr) minmax(18rem, 1.1fr) minmax(9rem, .6fr) 2rem;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  min-height: clamp(4.8rem, 6vw, 6.5rem);
  padding: 1rem .5rem;
  background: transparent;
  text-align: left;
  transition:
    padding .62s var(--ease-out),
    background .62s var(--ease-out),
    color .62s var(--ease-out);
}

.project-trigger:hover,
.project-trigger:focus-visible {
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  background: var(--ink);
  color: var(--paper);
}

.project-row__no,
.project-row__tags {
  font: 400 .6rem/1.25 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-row__title {
  font-size: clamp(1.15rem, 1.85vw, 1.85rem);
  letter-spacing: -.04em;
  line-height: 1;
}

.project-row__desc {
  color: var(--soft-ink);
  font-size: clamp(.77rem, 1vw, .97rem);
  transition: color .5s var(--ease-out);
}

.project-trigger:hover .project-row__desc,
.project-trigger:focus-visible .project-row__desc {
  color: rgba(255, 255, 255, .68);
}

.project-row__arrow {
  justify-self: end;
  font-size: 1.2rem;
  transition: transform .55s var(--ease-out);
}

.project-trigger:hover .project-row__arrow {
  transform: translate(.2rem, -.2rem);
}

.project-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4500;
  width: min(26vw, 23rem);
  min-width: 16rem;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .42s var(--ease-out),
    visibility 0s linear .43s;
}

.project-preview.is-visible {
  opacity: 1;
  visibility: visible;
  transition:
    opacity .42s var(--ease-out),
    visibility 0s;
}

.project-preview img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ink);
  object-fit: cover;
}

.project-preview figcaption {
  padding-top: .45rem;
}

/* Interactive figure */
.figure-section {
  min-height: 112svh;
}

.figure-section__lead {
  width: min(69rem, 88%);
  margin: clamp(4.5rem, 7vw, 7.5rem) 0 clamp(3rem, 5vw, 5rem) auto;
}

.wave-figure {
  position: relative;
  background: var(--paper);
}

.wave-stage {
  position: relative;
  height: clamp(30rem, 64svh, 44rem);
  overflow: hidden;
  border: 1px solid var(--ink);
  background:
    linear-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .035) 1px, transparent 1px),
    var(--paper);
  background-size: 2.3rem 2.3rem;
  touch-action: pan-y;
}

.wave-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 52%, transparent 22%, rgba(255, 255, 255, .5) 74%, rgba(255, 255, 255, .88));
  pointer-events: none;
}

#latticeCanvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  outline: none;
  touch-action: pan-y;
}

.wave-hud,
.wave-metrics,
.wave-legend,
.wave-hint {
  position: absolute;
  z-index: 3;
  font-family: var(--mono);
  text-shadow:
    0 0 2px var(--paper),
    0 0 9px var(--paper),
    0 0 15px var(--paper);
  pointer-events: none;
}

.wave-hud {
  top: 1.25rem;
  left: 1.25rem;
  display: grid;
  gap: .42rem;
  font-size: clamp(.5rem, .58vw, .64rem);
  letter-spacing: .09em;
}

.wave-hud strong {
  margin: .25rem 0;
  font-size: clamp(.75rem, 1.2vw, 1.15rem);
  font-weight: 400;
  letter-spacing: .04em;
}

.wave-hud span:last-child {
  color: var(--soft-ink);
}

.wave-metrics {
  top: 1.25rem;
  right: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(7rem, 1fr));
  min-width: min(26rem, 40vw);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.wave-metrics > div {
  padding: .62rem .7rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: rgba(255, 255, 255, .88);
}

.wave-metrics dt {
  color: var(--faint-ink);
  font-size: .5rem;
  letter-spacing: .12em;
}

.wave-metrics dd {
  margin-top: .22rem;
  font-size: clamp(.65rem, .78vw, .82rem);
}

.wave-legend {
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  gap: 1.1rem;
  font-size: .5rem;
  letter-spacing: .08em;
}

.wave-legend span {
  display: flex;
  align-items: center;
  gap: .38rem;
}

.wave-legend i {
  display: block;
  width: 1rem;
  height: 1px;
  background: var(--ink);
}

.wave-legend span:nth-child(2) i {
  background: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px);
}

.wave-legend span:nth-child(3) i {
  height: 0;
  border-top: 1px dotted var(--ink);
  background: transparent;
}

.wave-control {
  position: absolute;
  bottom: 2.7rem;
  left: 1.25rem;
  z-index: 4;
  padding: .58rem .7rem;
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, .92);
  transition: background .45s var(--ease-out), color .45s var(--ease-out);
}

.wave-control:hover,
.wave-control[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.wave-hint {
  bottom: 1.25rem;
  left: 1.25rem;
  color: var(--faint-ink);
  font-size: .48rem;
  letter-spacing: .08em;
}

.wave-figure > figcaption {
  align-items: center;
  border-bottom: 1px solid var(--ink);
}

.wave-figure > figcaption span:nth-child(2) {
  flex: 1;
  text-align: center;
}

/* Gallery teaser sections */
.archive-teaser {
  min-height: 105svh;
}

.teaser-card {
  position: relative;
  display: block;
  width: min(81rem, 88%);
  height: clamp(28rem, 60svh, 44rem);
  margin: clamp(4.5rem, 7vw, 7rem) 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.teaser-card__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.teaser-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .88));
  transition: opacity .8s var(--ease-out);
}

.teaser-card__image img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter .8s var(--ease-out), transform 1.1s var(--ease-out);
}

.teaser-card:hover .teaser-card__image img {
  filter: grayscale(1) contrast(1.18);
  transform: scale(1.025);
}

.teaser-card:hover .teaser-card__image::after {
  opacity: .55;
}

.teaser-card__top,
.teaser-card__title,
.teaser-card__index {
  position: absolute;
  z-index: 2;
}

.teaser-card__top {
  top: 1rem;
  right: 1rem;
  left: 1rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--ink);
  padding-top: .5rem;
}

.teaser-card__title {
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: .7rem;
  font-size: clamp(1.9rem, 4.6vw, 5.1rem);
  letter-spacing: -.06em;
  line-height: .92;
}

.teaser-card__title i {
  font-style: normal;
  transition: transform .65s var(--ease-out);
}

.teaser-card:hover .teaser-card__title i {
  transform: translate(.35rem, -.35rem);
}

.teaser-card__index {
  top: 50%;
  left: 50%;
  color: transparent;
  font-size: clamp(10rem, 25vw, 27rem);
  font-weight: 400;
  letter-spacing: -.1em;
  line-height: .7;
  -webkit-text-stroke: 1px rgba(0, 0, 0, .62);
  transform: translate(-50%, -50%);
  transition: transform 1s var(--ease-out);
}

.teaser-card:hover .teaser-card__index {
  transform: translate(-50%, -50%) scale(1.035);
}

.teaser-card--reverse {
  margin-right: auto;
  margin-left: 3vw;
}

/* Certifications */
.certifications {
  min-height: 105svh;
}

.credential-list {
  margin-top: clamp(4.5rem, 7vw, 7rem);
  border-top: 1px solid var(--ink);
  background: rgba(255, 255, 255, .92);
}

.credential {
  position: relative;
  border-bottom: 1px solid var(--ink);
}

.credential:hover,
.credential:focus-within {
  z-index: 20;
}

.credential > button {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 5rem minmax(12rem, .8fr) minmax(20rem, 1.5fr) 8rem 2rem;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: clamp(5rem, 6vw, 6.5rem);
  padding: 1rem .5rem;
  background: transparent;
  text-align: left;
  transition:
    padding .62s var(--ease-out),
    background .62s var(--ease-out),
    color .62s var(--ease-out);
}

.credential > button:hover,
.credential > button:focus-visible {
  padding-right: 1.2rem;
  padding-left: 1.2rem;
  background: var(--ink);
  color: var(--paper);
}

.credential__no,
.credential__issuer,
.credential__date {
  font: 400 .6rem/1.35 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.credential strong {
  font-size: clamp(1.05rem, 1.7vw, 1.7rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.credential button i {
  justify-self: end;
  font-size: 1.4rem;
  font-style: normal;
  transition: transform .55s var(--ease-out);
}

.credential button:hover i {
  transform: rotate(90deg);
}

.credential__media {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 8vw, 9rem);
  bottom: auto;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(28rem, calc(100vw - 2 * var(--pad) - 4rem));
  padding: .4rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(calc(-50% + 2rem)) rotate(-1.2deg);
  transition:
    opacity .45s var(--ease-out),
    clip-path .7s var(--ease-inout),
    transform .7s var(--ease-out);
  pointer-events: none;
}

.credential:hover .credential__media,
.credential:focus-within .credential__media {
  opacity: 1;
  clip-path: inset(0);
  transform: translateY(-50%) rotate(-1.2deg);
}

.credential__media img {
  width: 100%;
  height: 9rem;
  object-fit: contain;
  filter: grayscale(1);
}

.credential__media img.credential__logo {
  padding: clamp(1rem, 2.4vw, 1.6rem);
  background: var(--paper);
}

/* Contact */
.contact {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
}

.contact__prompt {
  margin: auto 0 1.4rem;
}

.contact__mail {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding-bottom: .32em;
  border-bottom: 1px solid var(--ink);
  font-size: clamp(2.1rem, 7.55vw, 8.6rem);
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .82;
  transition:
    letter-spacing .72s var(--ease-out),
    transform .72s var(--ease-out);
}

.contact__mail:hover {
  letter-spacing: -.055em;
  transform: translateX(.6vw);
}

.document-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: clamp(4rem, 7vw, 7rem);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.document-meta > div {
  padding: .9rem 1rem .9rem 0;
  border-right: 1px solid var(--rule);
}

.document-meta > div + div {
  padding-left: 1rem;
}

.document-meta > div:last-child {
  border-right: 0;
}

.document-meta dt {
  margin-bottom: .45rem;
  font: 400 .55rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.document-meta dd {
  font-size: clamp(.78rem, 1vw, 1rem);
}

/* Footer */
.site-footer {
  padding: 0 var(--pad) var(--pad) max(calc(var(--pad) + 2.3rem), 5.2vw);
  overflow: hidden;
  background: var(--paper);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 20rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.site-footer__grid > div {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1rem 2rem 1rem 0;
  border-right: 1px solid var(--rule);
}

.site-footer__grid > div + div {
  padding-left: 2rem;
}

.site-footer__grid > div:last-child {
  border-right: 0;
}

.site-footer__grid a,
.site-footer__grid > div > span:not(.micro) {
  width: fit-content;
  font-size: clamp(.85rem, 1.2vw, 1.15rem);
  transition: transform .45s var(--ease-out);
}

.site-footer__grid a:hover {
  transform: translateX(.35rem);
}

.site-footer__wordmark {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 2rem;
  font-size: clamp(8rem, 27vw, 31rem);
  font-weight: 400;
  letter-spacing: -.11em;
  line-height: .57;
}

.site-footer__wordmark span {
  padding-bottom: .5rem;
  font: 400 clamp(.7rem, 1vw, 1rem)/1 var(--mono);
  letter-spacing: .08em;
}

/* Project overlay */
.project-overlay {
  position: fixed;
  inset: 0;
  z-index: 7200;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  clip-path: inset(100% 0 0 0);
  visibility: hidden;
}

.project-overlay[aria-hidden="false"] {
  visibility: visible;
}

.overlay-close {
  position: fixed;
  top: var(--pad);
  right: var(--pad);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem .85rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  font: 500 .58rem/1 var(--mono);
  letter-spacing: .1em;
}

.overlay-close i {
  position: relative;
  width: 1rem;
  height: 1rem;
}

.overlay-close i::before,
.overlay-close i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
}

.overlay-close i::before { transform: rotate(45deg); }
.overlay-close i::after { transform: rotate(-45deg); }

.project-overlay__counter {
  position: fixed;
  top: var(--pad);
  left: var(--pad);
  z-index: 4;
  display: flex;
  gap: 1rem;
  padding: .75rem 0;
}

.project-overlay__content {
  width: 100%;
  padding: clamp(8rem, 13vw, 13rem) var(--pad) 8rem;
}

.project-sheet__header {
  display: grid;
  grid-template-columns: minmax(12rem, 24vw) 1fr;
  border-top: 1px solid var(--ink);
  padding-top: .75rem;
}

.project-sheet__header > .micro {
  display: flex;
  gap: 2rem;
}

.project-sheet__header h2,
.project-sheet__header p,
.project-sheet__meta {
  grid-column: 2;
}

.project-sheet__header h2 {
  max-width: 14ch;
  font-size: clamp(3.7rem, 9vw, 9rem);
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .82;
}

.project-sheet__header p {
  max-width: 49rem;
  margin-top: clamp(2.5rem, 5vw, 5rem);
  font-size: clamp(1.2rem, 2.5vw, 2.7rem);
  letter-spacing: -.045em;
  line-height: 1.05;
}

.project-sheet__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  margin-top: 2rem;
  padding: .65rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.project-sheet__docs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 5rem 0;
  border-top: 1px solid var(--ink);
}

.project-sheet__docs a {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: .7rem;
  min-height: 5rem;
  padding: 1rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font: 400 .68rem/1.35 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .5s var(--ease-out), color .5s var(--ease-out);
}

.project-sheet__docs a:hover {
  background: var(--ink);
  color: var(--paper);
}

.project-sheet__gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 5rem) 1.2rem;
  margin-top: clamp(6rem, 10vw, 10rem);
}

.project-sheet__figure {
  grid-column: span 6;
}

.project-sheet__figure:nth-child(3n + 2) {
  grid-column: 7 / span 4;
  margin-top: 8vw;
}

.project-sheet__figure:nth-child(3n) {
  grid-column: 2 / span 5;
  margin-top: 3vw;
}

.project-sheet__figure > div {
  overflow: hidden;
  border: 1px solid var(--ink);
  background: #f5f5f5;
}

.project-sheet__figure img {
  width: 100%;
  max-height: 78svh;
  object-fit: contain;
  transition: transform .85s var(--ease-out), filter .85s var(--ease-out);
}

.project-sheet__figure:hover img {
  transform: scale(1.018);
  filter: contrast(1.04);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: grid;
  grid-template-columns: 5rem 1fr 5rem;
  align-items: center;
  padding: var(--pad);
  background: rgba(255, 255, 255, .98);
  opacity: 0;
  visibility: hidden;
}

.lightbox[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
}

.lightbox figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  height: calc(100svh - 2 * var(--pad));
}

.lightbox figure img {
  align-self: center;
  justify-self: center;
  max-width: 100%;
  max-height: calc(100svh - 7rem);
  object-fit: contain;
}

.lightbox figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2rem;
  padding-top: .6rem;
  border-top: 1px solid var(--ink);
  font: 400 .58rem/1.35 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.lightbox__close {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  padding: .7rem .85rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  font: 500 .58rem/1 var(--mono);
  letter-spacing: .1em;
}

.lightbox__nav {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  transition: background .45s var(--ease-out), color .45s var(--ease-out), transform .45s var(--ease-out);
}

.lightbox__nav:hover {
  background: var(--ink);
  color: var(--paper);
  transform: scale(1.08);
}

.lightbox__nav--next {
  justify-self: end;
}

/* Gallery subpages */
.gallery-page {
  min-height: 100%;
}

.gallery-main {
  position: relative;
  z-index: 2;
}

.gallery-hero {
  display: flex;
  min-height: 88svh;
  flex-direction: column;
  justify-content: space-between;
  padding-top: var(--pad);
  padding-bottom: 4rem;
}

.gallery-hero__top {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 10rem);
  border-top: 1px solid var(--ink);
  padding-top: .55rem;
}

.gallery-hero h1 {
  max-width: 9ch;
  margin-top: auto;
  font-size: clamp(5rem, 13.4vw, 14rem);
  font-weight: 400;
  letter-spacing: -.085em;
  line-height: .7;
}

.gallery-hero__bottom {
  display: grid;
  grid-template-columns: 1fr minmax(19rem, 35vw);
  align-items: end;
  gap: 2rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: .65rem;
}

.gallery-hero__bottom p {
  max-width: 42rem;
  font-size: clamp(1rem, 1.7vw, 1.6rem);
  letter-spacing: -.025em;
}

.gallery-hero__bottom span {
  justify-self: end;
}

.gallery-register {
  position: relative;
  z-index: 2;
  padding: clamp(6rem, 11vw, 11rem) var(--pad) clamp(8rem, 14vw, 14rem) max(calc(var(--pad) + 2.3rem), 5.2vw);
}

.gallery-register__head {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--ink);
  padding-top: .55rem;
}

.drawing-grid,
.aerial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 6rem) clamp(.8rem, 1.5vw, 1.6rem);
  margin-top: clamp(5rem, 9vw, 9rem);
}

.gallery-card {
  grid-column: span 5;
  background: var(--paper);
}

.drawing-grid .gallery-card:nth-child(4n + 1) { grid-column: 1 / span 6; }
.drawing-grid .gallery-card:nth-child(4n + 2) { grid-column: 8 / span 4; margin-top: 9vw; }
.drawing-grid .gallery-card:nth-child(4n + 3) { grid-column: 2 / span 4; margin-top: 3vw; }
.drawing-grid .gallery-card:nth-child(4n) { grid-column: 7 / span 6; margin-top: -2vw; }

.aerial-grid .gallery-card:nth-child(6n + 1) { grid-column: 1 / span 7; }
.aerial-grid .gallery-card:nth-child(6n + 2) { grid-column: 9 / span 4; margin-top: 8vw; }
.aerial-grid .gallery-card:nth-child(6n + 3) { grid-column: 2 / span 4; }
.aerial-grid .gallery-card:nth-child(6n + 4) { grid-column: 7 / span 6; margin-top: 5vw; }
.aerial-grid .gallery-card:nth-child(6n + 5) { grid-column: 1 / span 5; margin-top: 7vw; }
.aerial-grid .gallery-card:nth-child(6n) { grid-column: 7 / span 4; }

.gallery-card__media {
  overflow: hidden;
  border: 1px solid var(--ink);
  background: #f4f4f4;
}

.gallery-card img {
  width: 100%;
  height: auto;
  transition:
    transform 1s var(--ease-out),
    filter 1s var(--ease-out);
}

.aerial-grid .gallery-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-card:hover img {
  transform: scale(1.025);
  filter: contrast(1.06);
}

.gallery-card figcaption {
  flex-wrap: wrap;
}

.gallery-card figcaption span:last-child {
  color: var(--soft-ink);
}

.gallery-page .site-footer {
  padding-top: 6rem;
}

/* Motion helpers and hover polish */
.is-active-scene .section-heading__index .micro {
  color: var(--ink);
}

.section-heading__index .micro {
  color: var(--faint-ink);
  transition: color .8s var(--ease-out);
}

@media (hover: hover) {
  .image-shell,
  .gallery-card__media,
  .project-sheet__figure > div {
    position: relative;
  }

  .image-shell::after,
  .gallery-card__media::after,
  .project-sheet__figure > div::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 0 solid var(--ink);
    pointer-events: none;
    transition: border-width .5s var(--ease-out);
  }

  .image-shell:hover::after,
  .gallery-card:hover .gallery-card__media::after,
  .project-sheet__figure:hover > div::after {
    border-width: 6px;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .hero {
    min-height: 220svh;
  }

  .scene {
    padding-left: max(calc(var(--pad) + 1.7rem), 4.5vw);
  }

  .section-heading {
    grid-template-columns: 10rem 1fr;
  }

  .about__grid {
    grid-template-columns: minmax(12rem, 30vw) 1fr;
    gap: 3rem;
  }

  .headshot {
    margin-left: 0;
  }

  .projects__intro {
    grid-template-columns: 1fr;
    margin-left: min(17vw, 9rem);
  }

  .filter-bar {
    grid-template-columns: repeat(4, 1fr);
  }

  .filter-bar button {
    padding: .75rem .45rem;
    border-right: 1px solid var(--rule);
  }

  .project-trigger {
    grid-template-columns: 3rem 1fr 1fr 7rem 1.5rem;
    gap: .75rem;
  }

  .credential > button {
    grid-template-columns: 3rem minmax(9rem, .7fr) 1.3fr 6rem 1rem;
  }

  .credential__media {
    right: 5rem;
  }
}

/* Mobile */
@media (max-width: 760px) {
  :root {
    --pad: 1rem;
  }

  .cursor,
  .section-rail {
    display: none;
  }

  .field-vignette {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .42), transparent 26%, transparent 74%, rgba(255, 255, 255, .42));
  }

  .menu-toggle {
    top: 1rem;
    right: 1rem;
    min-width: 6.4rem;
    height: 2.25rem;
  }

  .menu-overlay {
    padding: 1rem;
  }

  .menu-overlay__meta {
    width: calc(100% - 7.2rem);
  }

  .menu-overlay__meta span:last-child {
    display: none;
  }

  .menu-nav {
    margin-top: 4rem;
  }

  .menu-nav a {
    grid-template-columns: 2.3rem 1fr;
    padding: .7rem 0;
  }

  .menu-nav a b {
    font-size: clamp(1.8rem, 9vw, 3.3rem);
  }

  .menu-nav a i {
    display: none;
  }

  .menu-overlay__footer {
    display: grid;
    gap: .45rem;
  }

  .scene {
    min-height: 100svh;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .section-heading h2 {
    font-size: clamp(3.4rem, 17vw, 7rem);
  }

  .section-heading__index {
    justify-content: space-between;
  }

  .section-number {
    font-size: 3rem;
  }

  .statement {
    font-size: clamp(1.65rem, 7.8vw, 3rem);
  }

  .hero {
    min-height: 285svh;
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero__stage {
    padding-top: 1rem;
    padding-bottom: 1rem;
    --wordmark-mask-radius: 1px;
  }

  .hero__stage::before {
    left: 0;
  }

  .hero__stage::after {
    right: 0;
  }

  .hero__meta {
    width: calc(100% - 7rem);
    margin-left: .55rem;
  }

  .hero__meta span:last-child {
    display: none;
  }

  .hero__wordmark {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .wordmark {
    white-space: nowrap;
    font-size: clamp(2.85rem, 14vw, 6.6rem);
    line-height: .69;
    overflow-wrap: normal;
  }

  .wordmark--trace {
    transform: translate(.15rem, .35rem);
  }

  .hero__subline {
    right: 1.55rem;
    bottom: 18vh;
    width: calc(100% - 3.1rem);
  }

  .hero__coordinates {
    gap: .5rem;
    margin-left: .55rem;
  }

  .hero__coordinates span:nth-child(2) {
    display: none;
  }

  .hero__overture {
    right: .55rem;
    left: .55rem;
    grid-template-columns: auto 1fr;
  }

  .hero__overture i {
    display: none;
  }

  .hero__overture span:last-child {
    text-align: right;
  }

  .scroll-cue {
    display: none;
  }

  .about {
    min-height: auto;
  }

  .about__lead {
    width: 100%;
    margin: 4.75rem 0;
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .headshot {
    width: min(70vw, 19rem);
  }

  .ethos {
    margin-top: 0;
  }

  .spec-table > div {
    grid-template-columns: 7.5rem 1fr;
  }

  .ticker {
    width: calc(100% + 2rem);
    margin-left: -1rem;
  }

  .projects {
    min-height: auto;
  }

  .projects__intro {
    margin: 4.5rem 0 3rem;
  }

  .filter-bar {
    grid-template-columns: 1fr 1fr;
  }

  .project-trigger {
    grid-template-columns: 2.5rem 1fr 1.3rem;
    min-height: 5.75rem;
  }

  .project-row__title {
    font-size: 1.25rem;
  }

  .project-row__desc,
  .project-row__tags {
    display: none;
  }

  .project-preview {
    display: none;
  }

  .figure-section {
    min-height: auto;
  }

  .figure-section__lead {
    width: 100%;
    margin: 4.5rem 0 3rem;
  }

  .wave-stage {
    height: 30rem;
  }

  .wave-hud {
    top: .8rem;
    left: .8rem;
  }

  .wave-metrics {
    top: auto;
    right: .8rem;
    bottom: 3.2rem;
    left: .8rem;
    grid-template-columns: repeat(4, 1fr);
    min-width: 0;
  }

  .wave-metrics > div {
    padding: .45rem;
  }

  .wave-legend,
  .wave-hint,
  .wave-hud span:last-child {
    display: none;
  }

  .wave-control {
    bottom: 7.2rem;
    left: .8rem;
  }

  .wave-figure > figcaption {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
  }

  .wave-figure > figcaption span:nth-child(2) {
    text-align: left;
  }

  .wave-figure > figcaption span:last-child {
    display: none;
  }

  .archive-teaser {
    min-height: auto;
  }

  .teaser-card,
  .teaser-card--reverse {
    width: 100%;
    height: 30rem;
    margin: 4.5rem 0 0;
  }

  .teaser-card__title {
    font-size: 2.1rem;
  }

  .credential > button {
    grid-template-columns: 2.5rem 1fr 1.25rem;
    min-height: 5.75rem;
  }

  .credential__issuer,
  .credential__date {
    display: none;
  }

  .contact__mail {
    max-width: none;
    font-size: clamp(1.6rem, 7.9vw, 4rem);
    line-height: .94;
    white-space: nowrap;
  }

  .document-meta {
    grid-template-columns: 1fr;
  }

  .document-meta > div,
  .document-meta > div + div {
    padding: .8rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .document-meta > div:last-child {
    border-bottom: 0;
  }

  .site-footer {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .site-footer__grid > div,
  .site-footer__grid > div + div {
    padding: 1.2rem 0 1.8rem;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .site-footer__grid > div:last-child {
    border-bottom: 0;
  }

  .site-footer__wordmark {
    font-size: 47vw;
  }

  .project-overlay__content {
    padding: 7rem 1rem 6rem;
  }

  .project-overlay__counter {
    top: 1rem;
    left: 1rem;
  }

  .overlay-close {
    top: 1rem;
    right: 1rem;
  }

  .project-sheet__header {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .project-sheet__header h2,
  .project-sheet__header p,
  .project-sheet__meta {
    grid-column: 1;
  }

  .project-sheet__header h2 {
    font-size: clamp(3.5rem, 16vw, 6.8rem);
  }

  .project-sheet__docs {
    grid-template-columns: 1fr;
    margin: 4rem 0;
  }

  .project-sheet__docs a {
    border-right: 0;
  }

  .project-sheet__gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .project-sheet__figure,
  .project-sheet__figure:nth-child(3n + 2),
  .project-sheet__figure:nth-child(3n) {
    grid-column: 1;
    margin-top: 0;
  }

  .lightbox {
    grid-template-columns: 2.5rem 1fr 2.5rem;
    padding: 1rem;
  }

  .lightbox figure {
    height: calc(100svh - 2rem);
  }

  .lightbox__close {
    top: 1rem;
    right: 1rem;
  }

  .lightbox__nav {
    width: 2.25rem;
    height: 2.25rem;
  }

  .gallery-hero {
    padding-top: 1rem;
  }

  .gallery-hero__top {
    width: calc(100% - 7rem);
  }

  .gallery-hero h1 {
    font-size: clamp(4.5rem, 22vw, 7.8rem);
    line-height: .76;
  }

  .gallery-hero__bottom {
    grid-template-columns: 1fr;
  }

  .gallery-hero__bottom span {
    justify-self: start;
  }

  .gallery-register {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .drawing-grid,
  .aerial-grid {
    grid-template-columns: 1fr;
    gap: 4.5rem;
  }

  .drawing-grid .gallery-card,
  .drawing-grid .gallery-card:nth-child(4n + 1),
  .drawing-grid .gallery-card:nth-child(4n + 2),
  .drawing-grid .gallery-card:nth-child(4n + 3),
  .drawing-grid .gallery-card:nth-child(4n),
  .aerial-grid .gallery-card,
  .aerial-grid .gallery-card:nth-child(6n + 1),
  .aerial-grid .gallery-card:nth-child(6n + 2),
  .aerial-grid .gallery-card:nth-child(6n + 3),
  .aerial-grid .gallery-card:nth-child(6n + 4),
  .aerial-grid .gallery-card:nth-child(6n + 5),
  .aerial-grid .gallery-card:nth-child(6n) {
    grid-column: 1;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .loader {
    display: none;
  }

  .quantum-field {
    opacity: .7;
  }

  .hero {
    min-height: 100svh;
  }

  .hero__stage {
    position: relative;
  }

  .hero__overture {
    display: none;
  }

  [data-reveal],
  .char,
  .word {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .credential__media {
    display: none;
  }
}

@media print {
  .quantum-field,
  .field-vignette,
  .menu-toggle,
  .section-rail,
  .cursor,
  .loader,
  .page-wipe {
    display: none !important;
  }

  .scene {
    min-height: 0;
  }
}