/* Screen-by-screen reconstruction after direct comparison with the reference. */
:root {
  --paper: #eee9df;
  --ink: #111112;
}

body { background: var(--ink); }

.site-header {
  height: 96px;
  padding: 15px 4vw;
  grid-template-columns: 280px 1fr 280px;
  align-items: start;
  color: var(--ink);
  mix-blend-mode: normal;
  background: linear-gradient(to bottom, rgba(238,233,223,.32), transparent);
}

.brand { font-size: 34px; line-height: .76; }
.brand small { position: absolute; left: 12.5vw; top: 21px; font-size: 10px; }
.desktop-nav { justify-self: center; width: 390px; gap: 12px; }
.desktop-nav a {
  flex: 1;
  min-width: 0;
  padding: 12px 24px;
  border-radius: 9px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(12px);
}
.header-actions { width: 280px; gap: 16px; }
.request-link {
  flex: 1;
  padding: 12px 18px;
  border-radius: 9px;
  text-align: center;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
}
.menu-button {
  min-width: 80px;
  width: 80px;
  padding: 12px 16px;
  border-radius: 9px;
  text-align: right;
  background: rgba(255,255,255,.88);
  color: var(--ink);
}

.hero { height: 140vh; }
.hero-sticky { background: #9c806d; }
.hero-backdrop { inset: 0; filter: sepia(.22) contrast(.86); transform: scale(calc(1.01 + var(--hero-p,0)*.04)); }
.hero-title {
  z-index: 4;
  inset: 14vh 0 auto;
  height: 59vh;
  padding: 0 24vw;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  align-items: center;
  justify-content: center;
  font-size: clamp(150px, 19vw, 300px);
  line-height: .56;
  color: #f4f0e8;
  pointer-events: none;
}
.hero-title span:first-child { transform: translateX(-7vw); }
.hero-title span:last-child { transform: translateX(8vw); }
.coordinates { left: 70vw; top: 27%; display: block; text-align: center; color: var(--ink); font-size: 13px; }
.coordinates span { display: block; }
.hero-kicker { left: 22vw; right: auto; top: 43%; color: var(--ink); text-align: left; font-size: 13px; }
.hero-stone { width: min(48vw, 700px); top: 46%; bottom: auto; z-index: 3; }
.hero-card { z-index: 2; width: clamp(250px, 19vw, 380px); bottom: -27vh; }
.hero-card img { height: clamp(500px, 44vw, 760px); }
.hero-card-left { left: -4vw; transform: translate3d(calc(var(--hero-p,0)*-17vw),calc(var(--hero-p,0)*20vh),0) rotate(-9deg); }
.hero-card-right { right: -4vw; transform: translate3d(calc(var(--hero-p,0)*17vw),calc(var(--hero-p,0)*20vh),0) rotate(9deg); }
.hero-foot {
  z-index: 6;
  left: 50%; right: auto; bottom: 2vh;
  width: 190px;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  text-align: center;
  color: var(--paper);
  font: 22px/.9 var(--serif);
  text-transform: none;
}
.hero-foot .round-button {
  width: 190px; height: 58px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  justify-content: space-between;
  color: var(--ink); background: #f5f3ee;
  font: 11px/1 var(--sans); text-transform: uppercase;
}

.places-intro { height: 130vh; min-height: 0; padding: 0; background: var(--ink); color: var(--paper); }
.places-intro .eyebrow { display: none; }
.places-intro .display-line {
  position: absolute; top: -8vh; left: 29vw; z-index: 1;
  margin: 0; font-size: 18vw; color: #302d2e; white-space: nowrap;
}
.place-statement {
  top: 18vh; left: 43vw; z-index: 5;
  font-size: clamp(50px,5.4vw,84px); line-height: .83; text-align: center;
}
.place-statement span:last-child { margin-left: 0; }
.scatter-gallery { inset: 25vh 3vw 0; }
.scatter { border-radius: 8px; overflow: hidden; }
.scatter img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.s1 { left: 0; top: 18%; width: 23vw; height: 38vh; }
.s2 { right: 0; top: 18%; width: 22vw; height: 29vh; }
.s3 { left: 24%; top: 32%; width: 49vw; height: 38vh; }
.s4 { right: 0; top: 52%; width: 22vw; height: 34vh; }
.s5 { left: 0; top: 60%; width: 24vw; height: 34vh; }
.s6 { left: 24%; top: 76%; width: 24vw; height: 30vh; }
.s7 { left: 49%; top: 72%; width: 24vw; height: 33vh; }

.places-reel { height: 310vh; background: var(--ink); }
.places-sticky { padding: 2.5vh 3vw; }
.office-stage { inset: 2.5vh 3vw; }
.office { border-radius: 10px; overflow: hidden; }
.office img { filter: saturate(.75) sepia(.1); }
.reel-meta { position: absolute; z-index: 5; left: 28vw; right: 7vw; bottom: 24vh; align-items: end; }
.reel-name { font-size: clamp(48px,5.2vw,80px); color: var(--paper); }
.reel-count { color: var(--paper); font-size: 36px; font-family: var(--serif); }
.places-sticky::before,.places-sticky::after {
  position: absolute; z-index: 7; bottom: 20vh;
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-size: 45px; font-weight: 200;
}
.places-sticky::before { content: '←'; left: 42%; }
.places-sticky::after { content: '→'; left: 50%; }
.reel-line { display: none; }

.map-section { height: 148vh; min-height: 0; padding: 0; background: var(--paper); }
.map-figure { inset: 6vh 5vw auto; width: 90vw; height: 112vh; max-height: none; object-fit: contain; opacity: .25; }
.map-copy { margin: 0; position: absolute; inset: 0; }
.map-copy h2 { position: absolute; top: -5vh; left: 18vw; font-size: clamp(100px,11vw,170px); }
.map-body { position: absolute; left: 19vw; top: 45vh; width: 31vw; margin: 0; font-size: 17px; }
.map-body p:first-child { font: 25px/1.2 var(--sans); text-transform: uppercase; }
.text-link { position: absolute; right: 18vw; bottom: 10vh; width: 25vw; }

.objects { height: 950vh; background: var(--paper); }
.objects-sticky { background: var(--paper); }
.objects-bg { opacity: 0; }
.objects-title {
  z-index: 1; top: 50%; font-size: clamp(170px,19vw,300px);
  opacity: var(--object-title,1);
  filter: blur(calc(var(--object-blur,0)*1px));
  transform: translate(-50%,calc(-50% - var(--objects-p,0)*16vh));
}
.object-stack { width: min(27vw,380px); height: 66vh; top: 17%; opacity: var(--object-visual,0); }
.object-card { box-shadow: none; border-radius: 7px; overflow: hidden; }
.objects-copy { left: 3vw; top: 19%; width: 245px; font: 19px/1.55 var(--sans); text-transform: uppercase; }
.objects-copy p:not(:first-child) { display: none; }
.object-link {
  top: auto; right: 20vw; bottom: 8vh;
  width: 180px; padding: 24px 14px; border-radius: 8px;
  background: #f8f6f1; box-shadow: 0 8px 30px rgba(0,0,0,.07);
}
.object-caption { left: 28vw; right: 29vw; bottom: 45%; align-items: center; opacity: var(--object-stack,0); }
.object-name { font: 30px/1 var(--serif); }
.object-count { width: 70px; height: 70px; border: 1px solid #c8c1b6; border-radius: 50%; display: grid; place-items: center; font: 26px/1 var(--serif); }

.connection { height: 170vh; min-height: 0; padding: 0; background: var(--paper); overflow: hidden; }
.connection .eyebrow { display: none; }
.connection-image { position: absolute; inset: 3vh 3vw 6vh; width: auto; height: auto; margin: 0; border-radius: 9px; }
.connection-image>img:first-child { height: 100%; opacity: 1; filter: saturate(.8); }
.connection::after {
  content: ''; position: absolute; z-index: 2; top: 0; bottom: 0; left: 47%; width: 10vw;
  background: linear-gradient(to bottom,#111 0 78%,transparent 78%);
  clip-path: polygon(15% 0,85% 0,85% 87%,100% 94%,0 94%,15% 87%);
}
.connection-stone {
  z-index: 4; left: 43%; top: 23%; bottom: auto;
  width: 18vw; height: 37vh; object-fit: cover;
  filter: none; box-shadow: 0 15px 35px rgba(0,0,0,.2);
}
.connection-title { z-index: 3; margin: 0; position: absolute; top: 27%; left: 17vw; font-size: 18vw; color: rgba(244,240,232,.92); white-space: nowrap; }
.connection-copy { position: absolute; z-index: 5; right: 10vw; bottom: 11vh; width: 28vw; margin: 0; color: var(--paper); font-size: 13px; }
.connection-copy p:first-child { font: 18px/1.2 var(--serif); }

.updates { position: relative; height: 131vh; padding: 4vh 7vw 8vh; }
.updates-head { min-height: 22vh; text-align: center; }
.updates-head .eyebrow { position: absolute; left: 2vw; top: -5vh; font: 18vw/.7 var(--serif); opacity: .2; text-transform: none; }
.updates-head .display-line { margin-top: 4vh; font-size: 55px; }
.updates-grid { width: 100%; grid-template-columns: repeat(3,1fr); gap: 5.5vw; }
.update-card:nth-child(n+4) { display: none; }
.update-card { border: 0; }
.update-card img { height: 30vh; border-radius: 7px; margin-bottom: 8vh; }
.update-card h3 { font: 18px/1.1 var(--sans); text-transform: uppercase; margin: 10px 0 6vh; }
.update-card p { font-size: 13px; }

.people { height: 212vh; min-height: 0; padding: 0; background: #111 url('assets/home/stone-wall.webp') center/cover; }
.people::before {
  content: ''; position: absolute; z-index: 2; left: 50%; top: 50vh;
  width: min(42vw,560px); height: 100vh; transform: translateX(-50%);
  background: url('assets/main/admission-1-blured.webp') center/cover;
  border: 28px solid #272329; border-bottom: 0;
  border-radius: 50% 50% 0 0 / 36% 36% 0 0;
}
.people-title { z-index: 4; padding-top: 7vh; margin: 0; text-align: center; font-size: 6vw; line-height: .82; }
.people-title br { display: none; }
.people-word { z-index: 1; top: 62%; left: 2vw; color: #292728; font-size: 31vw; }
.silhouette {
  z-index: 3; top: 50vh; width: min(42vw,560px); height: 100vh;
  object-fit: cover; object-position: center;
  border: 0;
}
.people-copy { z-index: 5; top: 72%; right: 6vw; width: 270px; }
.person-photo { z-index: 4; width: 11vw; }

.admission { height: 224vh; min-height: 0; padding: 11vh 5vw; }
.admission-art { opacity: .72; filter: blur(13px) saturate(.7); }
.admission-inner .eyebrow { display: none; }
.admission-inner .display-line { display: none; }
.admission-form { width: 53vw; margin: 34vh auto 0; }
.admission-form>label:not(.consent) { grid-template-columns: 180px 1fr; padding: 22px 0; }
.admission-form label span { font-size: 25px; }
.admission-form input,.admission-form textarea { font-size: 42px; opacity: .5; }

.footer { position: relative; min-height: 130vh; padding: 0 3vw 4vh; background: #111 url('assets/home/stone-wall.webp') center/cover; }
.footer-top {
  min-height: 70vh; padding: 9vh 6vw;
  grid-template-columns: 1fr 1fr 1.5fr;
  background: var(--paper); color: var(--ink);
  border-radius: 0 0 45px 45px;
}
.footer-top h2 { font-size: 7vw; }
.footer-links { position: absolute; z-index: 3; left: 35vw; right: 7vw; top: 24vh; margin: 0; border: 0; padding: 0; display: block; color: var(--ink); }
.footer-links nav { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1vh 4vw; }
.footer-links nav a { font: 6.2vw/.78 var(--serif); letter-spacing: -.05em; }
.footer-links>div { position: absolute; top: 49vh; left: 0; color: var(--paper); font-size: 13px; }
.footer-brand { font-size: 18vw; opacity: .1; }
.footer-legal { border-color: #555; }

@media(max-width:700px) {
  .site-header { height: 76px; padding: 14px 16px; grid-template-columns: 1fr auto; }
  .brand { font-size: 21px; }
  .brand small { position: static; }
  .menu-button { min-width: 70px; width: 70px; padding: 9px 10px; }
  .hero { height: 150vh; }
  .hero-title { inset: 17vh 0 auto; height: 48vh; padding: 0 8vw; font-size: 42vw; line-height: .58; }
  .hero-title span:first-child,.hero-title span:last-child { transform: none; }
  .hero-stone { width: 120vw; top: 37%; }
  .coordinates { left: auto; right: 16px; top: 22%; }
  .hero-kicker { left: 16px; top: 31%; }
  .hero-foot { width: 142px; bottom: 4vh; }
  .hero-foot .round-button { width: 142px; height: 48px; }
  .places-intro { height: 250vh; }
  .places-intro .display-line { top: 0; left: 15vw; font-size: 34vw; }
  .place-statement { top: 21vh; left: 25vw; font-size: 14vw; }
  .scatter-gallery { inset: 36vh 12px 4vh; }
  .s1,.s2,.s3,.s4,.s5,.s6,.s7 { width: 44vw; height: 42vh; }
  .s1{left:0;top:3%}.s2{right:0;top:14%}.s3{left:0;top:28%}.s4{right:0;top:41%}.s5{left:0;top:55%}.s6{right:0;top:68%}.s7{left:25%;top:82%}
  .places-reel { height: 260vh; }
  .office-stage { inset: 10vh 12px 12vh; }
  .reel-meta { left: 28px; right: 28px; bottom: 18vh; }
  .reel-name { font-size: 12vw; }
  .places-sticky::before { left: 31%; bottom: 9vh; }
  .places-sticky::after { left: 53%; bottom: 9vh; }
  .map-section { height: 180vh; }
  .map-copy h2 { left: 16px; top: 7vh; font-size: 23vw; }
  .map-body { left: 16px; top: 66vh; width: calc(100% - 32px); }
  .text-link { right: 16px; bottom: 12vh; width: 70vw; }
  .objects { height: 900vh; }
  .objects-title { font-size: 35vw; white-space: normal; }
  .object-stack { width: 68vw; height: 62vh; top: 23%; }
  .objects-copy { top: 13%; }
  .object-caption { left: 16px; right: 16px; bottom: 10vh; }
  .object-name { font-size: 22px; }
  .connection { height: 190vh; }
  .connection-image { inset: 8vh 12px; }
  .connection::after { left: 43%; width: 18vw; }
  .connection-stone { left: 32%; width: 36vw; height: 31vh; }
  .connection-title { left: 5vw; top: 32%; font-size: 32vw; }
  .updates { height: 160vh; padding: 8vh 16px; }
  .updates-grid { display: flex; overflow-x: auto; }
  .update-card { min-width: 82vw; }
  .update-card:nth-child(n+4) { display: block; }
  .people { height: 190vh; }
  .people-title { font-size: 15vw; padding-top: 12vh; }
  .people::before { width: 88vw; height: 95vh; top: 42vh; border-width: 18px; }
  .silhouette { width: 88vw; height: 95vh; top: 42vh; }
  .admission { height: 220vh; padding: 10vh 16px; }
  .admission-form { width: 100%; margin-top: 26vh; }
  .footer-top { min-height: 78vh; grid-template-columns: 1fr; }
  .footer-top h2 { margin-top: 12vh; font-size: 19vw; }
}