/* === Hero === */
.hero {
  position: relative;
  height: calc(100vh - var(--nav-h));
  min-height: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg canvas,
.hero__bg .hero__static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__static {
  background-size: cover;
  background-position: center;
  filter: contrast(0.92) brightness(1.04);
  opacity: 0.18;
}
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(245,244,240,0) 0%, rgba(245,244,240,0.55) 70%, rgba(245,244,240,0.85) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--page-x);
}
.hero__name {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(52px, 8vw, 124px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.hero__tag {
  margin-top: clamp(20px, 3vh, 36px);
  letter-spacing: 0.18em;
  font-size: 11px;
}
.hero__cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 3;
  opacity: 1;
  transition: opacity 250ms ease, transform 300ms ease;
}
.hero__cue.is-hidden { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; }
.hero__cue .arrow-down {
  font-size: 14px;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.hero__corner-meta {
  position: absolute;
  bottom: 24px;
  left: var(--page-x);
  right: var(--page-x);
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 3;
}
@media (max-width: 720px) {
  .hero__corner-meta { display: none; }
}

/* === grid wrap === */
.grid-wrap {
  padding: var(--section-y) var(--page-x) clamp(40px, 6vh, 80px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.grid-wrap__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}

/* === tile grid (Layout A: 04 large left, 01 right tall, then 02/05/03 across bottom) === */
.tile-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 12vh;
  gap: var(--gutter);
  padding: 30px;
}
.tile-grid--A .tile--hero { grid-column: 1 / span 8; grid-row: 1 / span 5; }
.tile-grid--A .tile--a    { grid-column: 9 / span 4; grid-row: 1 / span 5; }
.tile-grid--A .tile--b    { grid-column: 1 / span 4; grid-row: 6 / span 3; }
.tile-grid--A .tile--c    { grid-column: 5 / span 3; grid-row: 6 / span 3; }
.tile-grid--A .tile--d    { grid-column: 8 / span 5; grid-row: 6 / span 3; }

/* Layout B: 04 huge top, two narrow right; bottom 50/50 */
.tile-grid--B .tile--hero { grid-column: 1 / span 8; grid-row: 1 / span 6; }
.tile-grid--B .tile--a    { grid-column: 9 / span 4; grid-row: 1 / span 3; }
.tile-grid--B .tile--b    { grid-column: 9 / span 4; grid-row: 4 / span 3; }
.tile-grid--B .tile--c    { grid-column: 1 / span 6; grid-row: 7 / span 2; }
.tile-grid--B .tile--d    { grid-column: 7 / span 6; grid-row: 7 / span 2; }

/* Layout C: 04 tall left, 01 wide top right, 02/05 bottom small */
.tile-grid--C .tile--hero { grid-column: 1 / span 5; grid-row: 1 / span 8; }
.tile-grid--C .tile--a    { grid-column: 6 / span 7; grid-row: 1 / span 5; }
.tile-grid--C .tile--b    { grid-column: 6 / span 4; grid-row: 6 / span 3; }
.tile-grid--C .tile--c    { grid-column: 10 / span 3; grid-row: 6 / span 3; }
.tile-grid--C .tile--d    { grid-column: 1 / span 12; grid-row: 9 / span 3; }

/* === single tile === */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tile__frame {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--linen);
}
.tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 600ms ease, transform 800ms ease;
}
.tile__img--hover { opacity: 0; }
.tile:hover .tile__img--cover { opacity: 0; }
.tile:hover .tile__img--hover { opacity: 1; }
.tile:hover .tile__img { transform: scale(1.02); }

.tile__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,26,24,0.55);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 2vw, 28px);
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}
.tile:hover .tile__overlay { opacity: 1; pointer-events: auto; }
.tile__overlay-meta {
  display: flex;
  gap: 24px;
  color: var(--paper);
  font-size: 10px;
  letter-spacing: 0.16em;
  opacity: 0.85;
}
.tile__overlay-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.05;
  max-width: 14ch;
  margin-bottom: 8px;
  color: var(--paper);
}
.tile__overlay-cta {
  align-self: flex-start;
}
.tile__caption {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  padding: 12px 2px 0;
  align-items: baseline;
}
.tile__caption-title {
  color: var(--ink);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.01em;
}

@media (max-width: 900px) {
  .tile-grid {
    grid-auto-rows: auto;
    padding: 18px;
  }
  .tile-grid > .tile {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    height: 64vw;
    min-height: 280px;
    max-height: 480px;
  }
  .tile-grid > .tile--hero { height: 86vw; max-height: 620px; }
}

/* === statement band === */
.statement-band {
  background: var(--linen);
  padding: clamp(80px, 12vh, 160px) var(--page-x);
  text-align: center;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.statement-band__quote {
  max-width: 28ch;
  margin: 0 auto 28px;
  font-style: italic;
  font-weight: 300;
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.35;
}
.statement-band__attr { letter-spacing: 0.18em; }

/* === about teaser === */
.about-teaser {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 6vw, 100px);
  padding: var(--section-y) var(--page-x);
  max-width: var(--maxw);
  margin: 0 auto;
  align-items: center;
}
.about-teaser__fig img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}
.about-teaser__fig figcaption {
  margin-top: 12px;
}
@media (max-width: 800px) {
  .about-teaser { grid-template-columns: 1fr; gap: 32px; }
}

/* === project page === */
.proj { padding-bottom: 80px; }
.proj__hero {
  width: 100%;
  height: clamp(360px, 78vh, 820px);
  overflow: hidden;
}
.proj__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.proj__intro {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(40px, 8vh, 120px) var(--page-x) clamp(40px, 6vh, 80px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.proj__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 18px 0 32px;
  max-width: 14ch;
}
.proj__meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
}
.proj__meta-grid > div { display: grid; grid-template-columns: 100px 1fr; gap: 18px; align-items: start; }
.proj__meta-value { font-size: 13px; line-height: 1.5; }
.proj__lede-block { padding-top: 14px; }

@media (max-width: 800px) {
  .proj__intro { grid-template-columns: 1fr; }
}

.proj__body {
  padding: clamp(20px, 3vh, 40px) var(--page-x);
  max-width: 980px;
  margin: 0 auto;
}
.proj__fig {
  margin: clamp(40px, 6vh, 80px) 0 clamp(20px, 3vh, 40px);
}
.proj__fig--bleed img { width: 100%; height: auto; display: block; }
.proj__fig--80 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--page-x);
}
.proj__fig--80 img { width: 100%; }
.proj__cap {
  display: flex;
  gap: 20px;
  padding: 12px var(--page-x) 0;
  align-items: baseline;
  flex-wrap: wrap;
}
.proj__fig--bleed .proj__cap { padding-top: 14px; }
.proj__cap-num {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.proj__diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  padding: 0 var(--page-x);
  max-width: var(--maxw);
  margin: clamp(20px, 3vh, 40px) auto;
}
.proj__diptych img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.proj__diptych .proj__cap { padding-left: 0; padding-right: 0; }

.proj__three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  padding: 0 var(--page-x);
  max-width: var(--maxw);
  margin: clamp(20px, 3vh, 40px) auto;
}
.proj__three img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.proj__three .proj__cap { padding-left: 0; padding-right: 0; }

@media (max-width: 800px) {
  .proj__diptych, .proj__three { grid-template-columns: 1fr; }
}

.proj__avail {
  position: relative;
  margin: clamp(60px, 10vh, 120px) auto 0;
  padding: clamp(40px, 6vh, 70px) clamp(28px, 4vw, 60px);
  max-width: 1200px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.proj__avail-head { margin-bottom: 32px; }
.proj__avail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 50px);
}
.proj__avail-num {
  font-family: var(--display);
  font-weight: 200;
  font-size: 36px;
  color: var(--muted);
  margin-bottom: 14px;
}
.proj__avail-label {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 8px;
}
@media (max-width: 800px) {
  .proj__avail-grid { grid-template-columns: 1fr; gap: 32px; }
}

.proj__next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(40px, 6vh, 80px) var(--page-x);
  max-width: var(--maxw);
  margin: 0 auto;
}