:root {
  --font-display: "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  --font-ui: Consolas, "SFMono-Regular", "Noto Sans Mono", "Liberation Mono", monospace;
  font-family: var(--font-display);
  color: #151515;
  background: #f1f0eb;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: #f1f0eb;
  font-family: var(--font-display);
}

html.js body {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 720ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.js body.page-ready {
  opacity: 1;
  transform: none;
}

html.js body.page-leaving {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition-duration: 380ms;
  transition-timing-function: ease;
}

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

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

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 8px 10px;
  color: #090909;
  background: #f1f1ef;
  font: 12px/1.2 var(--font-ui);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.site-name {
  font-weight: 500;
}

.home-header .site-name {
  justify-self: end;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.menu {
  display: flex;
  gap: 30px;
}

.home-header,
.project-overlay-header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  padding: 24px 28px;
  color: #fff;
  mix-blend-mode: difference;
}

.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(14px, 1.55vw, 28px);
  color: #090909;
  font-family: var(--font-ui);
  mix-blend-mode: normal;
}

.main-nav {
  display: flex;
  gap: clamp(16px, 1.8vw, 30px);
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 700;
  letter-spacing: 0;
}

.main-nav button {
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.main-nav a,
.main-nav button,
.main-nav .nav-placeholder,
.menu a,
.back-link {
  transition: opacity 180ms ease;
}

.main-nav .nav-placeholder {
  opacity: 0.42;
  cursor: default;
}

.main-nav a:hover,
.main-nav button:hover,
.menu a:hover,
.back-link:hover {
  opacity: 0.5;
}

.main-nav a.is-active {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-hero,
.home-project-link {
  position: relative;
  display: block;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  height: 100svh;
  color: #090909;
  background: #e8e8e4;
}

.home-project-link > img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-project-link:hover > img {
  transform: scale(1.008);
}

.home-project-link {
  font-family: var(--font-ui);
}

.home-project-link--inactive {
  cursor: default;
}

.home-project-link--inactive:hover > img {
  transform: none;
}

.exploration-placeholder {
  background-color: #302f2c;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 8.333vw 8.333vw;
}

.exploration-placeholder--02 {
  background-color: #565650;
}

.exploration-placeholder--03 {
  color: #fff;
  background-color: #77766e;
}

.exploration-coming-soon {
  position: absolute;
  top: 50%;
  left: 50%;
  font: 700 clamp(18px, 2vw, 32px)/1.2 var(--font-ui);
  text-transform: lowercase;
  transform: translate(-50%, -50%);
}

.exploration-index-info .home-info-statement {
  max-width: 16em;
}

.explorations-page .home-header,
.explorations-page .home-project-link {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.32);
}

.explorations-page .home-info {
  color: #090909;
  text-shadow: none;
}

.home-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 32%, rgba(255, 255, 255, 0.12));
  pointer-events: none;
}

.home-hero.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 900ms ease,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-hero.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.home-meta-rail {
  position: absolute;
  right: clamp(14px, 1.55vw, 28px);
  bottom: clamp(12px, 1.25vw, 22px);
  left: clamp(14px, 1.55vw, 28px);
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  font: 700 clamp(15px, 1.15vw, 18px)/1.25 var(--font-ui);
  letter-spacing: 0;
}

.home-meta-rail span:nth-child(2) {
  text-align: center;
}

.home-meta-rail span:last-child {
  text-align: right;
}

/* Work index: each project image and its white metadata rail form one viewport. */
html:has(.home-page:not(.explorations-page)) {
  scroll-snap-type: y proximity;
  overscroll-behavior-y: contain;
}

.home-page:not(.explorations-page) {
  --home-meta-height: 48px;
}

.home-page:not(.explorations-page) .home-hero,
.home-page:not(.explorations-page) .home-info {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.home-page:not(.explorations-page) .home-project-link > img {
  inset: 0 0 auto;
  height: calc(100% - var(--home-meta-height));
}

.home-page:not(.explorations-page) #work > .home-hero:first-of-type .home-project-link > img {
  padding: 0;
  object-fit: cover;
  object-position: center 67%;
}

.home-page:not(.explorations-page) .home-hero-shade {
  bottom: var(--home-meta-height);
}

.home-page:not(.explorations-page) .home-meta-rail {
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--home-meta-height);
  padding: 0 clamp(14px, 1.55vw, 28px);
  align-items: center;
  z-index: 2;
  color: #090909;
  background: #ffffff;
  text-shadow: none;
}

.home-info {
  min-height: 100svh;
  padding: clamp(90px, 10vw, 160px) clamp(14px, 1.55vw, 28px) clamp(28px, 4vw, 64px);
  color: #090909;
  background: #f1f1ef;
}

.home-info-label {
  margin: 0 0 24px;
  font: 700 11px/1.2 var(--font-ui);
  letter-spacing: 0.03em;
}

.home-info-statement {
  max-width: 14em;
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(34px, 5.2vw, 88px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.home-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 8vw, 140px);
  margin-top: clamp(90px, 14vw, 220px);
  font: 700 clamp(11px, 0.9vw, 14px)/1.5 var(--font-ui);
}

.home-info-grid > div {
  display: grid;
  align-content: start;
}

.home-info-grid a {
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.project-opening {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #e8e8e4;
}

.project-opening img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.model-opening iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.exploration-opening-placeholder {
  background: #d4d3ce;
}

.project-film {
  min-height: 100svh;
  padding: clamp(90px, 10vw, 150px) clamp(14px, 1.55vw, 28px);
  color: #f1f1ef;
  background: #090909;
}

.project-film,
.project-film a,
.exploration-animation-model,
.exploration-video-pair,
.project-closing,
.project-closing a {
  color: #fff;
}

.project-film h2,
.project-film p,
.project-closing p,
.project-closing span {
  color: inherit;
}

.film-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(30px, 5vw, 72px);
}

.film-heading .section-index {
  color: rgba(255, 255, 255, 0.52);
}

.film-heading h2 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(28px, 3.8vw, 60px);
  font-family: var(--font-ui);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-align: right;
}

.project-film video {
  display: block;
  width: min(100%, 1600px);
  margin: 0 auto;
  background: #000;
  aspect-ratio: 16 / 9;
}

.exploration-video-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 100px;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  padding: 100px;
  overflow: hidden;
  background: #090909;
}

.exploration-animation-model {
  width: 100%;
  height: 100svh;
  min-height: 560px;
  padding: 60px 100px;
  overflow: hidden;
  background: #090909;
}

.exploration-animation-model iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.exploration-video-pair video {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
  background: #000;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.film-statement {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(300px, 2fr);
  gap: clamp(50px, 10vw, 180px);
  width: min(100%, 1600px);
  margin: clamp(90px, 11vw, 180px) auto 0;
}

.film-statement .section-index {
  color: rgba(255, 255, 255, 0.52);
}

.film-heading .section-index,
.film-statement .section-index {
  font: 700 clamp(12px, 0.95vw, 15px)/1.4 var(--font-ui);
  letter-spacing: 0;
}

.film-statement > p:last-child {
  max-width: 920px;
  margin: 0;
  font-size: clamp(18px, 1.65vw, 27px);
  line-height: 1.28;
  letter-spacing: -0.035em;
}

.exploration-next {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  min-height: 42svh;
  padding: clamp(80px, 10vw, 150px) clamp(14px, 1.55vw, 28px) clamp(24px, 3vw, 48px);
  color: #090909;
  background: #f1f1ef;
  font-family: var(--font-ui);
}

.exploration-next span {
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 700;
  text-transform: lowercase;
}

.exploration-next a {
  font-family: var(--font-ui);
  font-size: clamp(32px, 5vw, 82px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.exploration-next a:hover {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.scroll-cue {
  position: absolute;
  right: clamp(14px, 1.55vw, 28px);
  bottom: clamp(14px, 1.55vw, 28px);
  color: #fff;
  font: 700 clamp(12px, 0.95vw, 15px)/1.25 var(--font-ui);
  letter-spacing: 0;
  text-transform: lowercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.24);
}

.project-information {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.55vw, 28px);
  min-height: 70svh;
  padding: clamp(100px, 10vw, 160px) clamp(14px, 1.55vw, 28px) clamp(70px, 8vw, 120px);
  border-bottom: 1px solid rgba(9, 9, 9, 0.18);
  color: #090909;
  background: #f1f1ef;
  opacity: 0;
  transform: translateY(52px);
  transition:
    opacity 900ms ease,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-detail-page .project-overlay-header {
  display: flex;
  justify-content: space-between;
  padding: clamp(14px, 1.55vw, 28px);
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent);
  mix-blend-mode: normal;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}

.project-detail-page .project-overlay-header .site-name {
  order: 2;
  font-weight: 700;
  text-transform: lowercase;
}

.project-detail-page .project-overlay-header .back-link {
  order: 1;
  text-transform: lowercase;
}

.project-title-block {
  grid-column: 1 / span 8;
  align-self: start;
}

.project-title-block .project-number {
  font: 700 clamp(13px, 1vw, 16px)/1.25 var(--font-ui);
  letter-spacing: 0;
}

.project-information.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.project-title-block h1 {
  max-width: 10ch;
  margin: clamp(34px, 4vw, 64px) 0 0;
  font-family: var(--font-ui);
  font-size: clamp(54px, 7vw, 126px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.project-subtitle {
  margin: clamp(24px, 3vw, 46px) 0 0;
  font: 700 clamp(14px, 1.15vw, 18px)/1.35 var(--font-ui);
  letter-spacing: 0;
  text-transform: lowercase;
}

.project-credits {
  grid-column: 9 / -1;
  align-self: end;
  margin: 0;
  font-family: var(--font-ui);
}

.project-credits div {
  display: grid;
  gap: 10px;
  padding: 18px 0 20px;
  border-top: 1px solid rgba(9, 9, 9, 0.28);
}

.project-credits dd {
  margin: 0;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 700;
  line-height: 1.5;
}

.exploration-introduction {
  padding-top: 20px;
  border-top: 1px solid rgba(21, 21, 21, 0.28);
}

.exploration-introduction p {
  max-width: 42ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

/* Project story */
.story-section {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: center;
  min-height: 100svh;
  padding: clamp(72px, 7vw, 112px) clamp(24px, 5vw, 80px);
  border-top: 1px solid rgba(21, 21, 21, 0.16);
}

.reveal:not(.project-information) {
  opacity: 0;
  transform: translateY(42px);
  transition:
    opacity 900ms ease,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible:not(.project-information) {
  opacity: 1;
  transform: translateY(0);
}

.section-copy {
  grid-column: 1 / span 3;
  max-width: 360px;
}

.section-index {
  margin: 0 0 20px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(21, 21, 21, 0.42);
}

.section-copy h2 {
  margin: 0 0 28px;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.section-copy > p:not(.section-index) {
  margin: 0 0 18px;
  max-width: 42em;
  font-size: clamp(11px, 0.84vw, 13px);
  line-height: 1.68;
  color: rgba(21, 21, 21, 0.78);
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 11px;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(21, 21, 21, 0.48);
}

.main-visual {
  grid-column: 4 / span 6;
}

.main-visual img {
  width: 100%;
  height: min(58vh, 620px);
  object-fit: cover;
}

.support-visual {
  grid-column: 10 / -1;
}

.support-visual img,
.diagram-main img {
  width: 100%;
  height: min(58vh, 620px);
  object-fit: contain;
}

.drawing-visual {
  margin-top: 0;
}

.diagram-main {
  grid-column: 4 / span 6;
}

.model-accent {
  grid-column: 10 / -1;
  width: 100%;
}

.model-accent img {
  width: 100%;
  height: min(58vh, 620px);
  object-fit: cover;
}

.concept-form .diagram-main img,
.structure .diagram-main img {
  background: #fff;
}

.structure-model {
  grid-column: 10 / -1;
}

.environmental-void .main-visual,
.program-theater .main-visual,
.circulation .main-visual {
  grid-column: 4 / span 5;
}

.environmental-void .main-visual img,
.program-theater .main-visual img,
.circulation .main-visual img {
  height: min(58vh, 620px);
  aspect-ratio: auto;
}

.section-drawing {
  grid-column: 9 / -1;
}

.paired-visuals {
  grid-column: 9 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.5vw, 24px);
  align-items: center;
}

.paired-visuals figure:first-child {
  margin-top: 0;
}

.paired-visuals img {
  width: 100%;
  height: min(58vh, 620px);
  object-fit: cover;
}

.plans-row {
  grid-column: 9 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
}

.plans-row img {
  width: 100%;
  height: min(58vh, 620px);
  object-fit: contain;
  background: #fff;
}

.models-layout {
  grid-column: 4 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
  align-items: center;
}

.models-layout .model-large {
  grid-column: auto;
  width: 100%;
  justify-self: auto;
}

.models-layout figure:nth-child(2) {
  margin-top: 0;
}

.models-layout img {
  width: 100%;
  height: min(58vh, 620px);
  object-fit: cover;
}

/* Distinct chapter compositions */
.site-context .main-visual {
  grid-column: 4 / -1;
  grid-row: 1;
}

.site-context .support-visual {
  z-index: 1;
  grid-column: 2 / span 3;
  grid-row: 1;
  align-self: end;
  padding: 10px;
  background: #f1f0eb;
  transform: translateY(8%);
}

.site-context .support-visual img {
  height: min(34vh, 350px);
}

.concept-form .diagram-main {
  grid-column: 4 / span 6;
}

.concept-form .model-accent {
  grid-column: 10 / -1;
  align-self: end;
}

.concept-form .model-accent img {
  height: min(42vh, 450px);
}

.structure {
  grid-template-rows: 1fr 1fr;
}

.structure .section-copy {
  grid-column: 9 / -1;
  grid-row: 1;
  align-self: end;
}

.structure .diagram-main {
  grid-column: 1 / span 7;
  grid-row: 1 / span 2;
}

.structure .diagram-main img {
  height: min(70vh, 740px);
}

.structure .structure-model {
  grid-column: 9 / -1;
  grid-row: 2;
  align-self: end;
}

.structure .structure-model img {
  height: min(27vh, 290px);
}

.environmental-void {
  grid-template-rows: 1fr 1fr;
}

.environmental-void .main-visual {
  grid-column: 1 / span 8;
  grid-row: 1 / span 2;
}

.environmental-void .main-visual img {
  height: min(72vh, 760px);
}

.environmental-void .section-copy {
  grid-column: 9 / -1;
  grid-row: 1;
  align-self: end;
}

.environmental-void .section-drawing {
  grid-column: 9 / -1;
  grid-row: 2;
  align-self: end;
}

.environmental-void .section-drawing img {
  height: min(28vh, 300px);
}

.program-theater .main-visual {
  grid-column: 4 / span 6;
}

.program-theater .paired-visuals {
  grid-column: 10 / -1;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  height: min(68vh, 710px);
}

.program-theater .main-visual img {
  height: min(68vh, 710px);
}

.program-theater .paired-visuals img {
  height: 100%;
  min-height: 0;
}

.program-theater .paired-visuals figure {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

.circulation {
  grid-template-rows: 1.45fr 0.75fr;
}

.circulation .section-copy {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  align-self: center;
}

.circulation .main-visual {
  grid-column: 4 / -1;
  grid-row: 1;
  align-self: end;
}

.circulation .main-visual img {
  height: min(43vh, 460px);
}

.circulation .plans-row {
  grid-column: 4 / -1;
  grid-row: 2;
  align-self: start;
}

.circulation .plans-row img {
  height: min(22vh, 230px);
}

.models-section .models-layout {
  grid-template-columns: 1.35fr 0.82fr 0.82fr;
}

.models-section .models-layout img {
  height: min(62vh, 650px);
}

/* InDesign layout reference: 1440 × 900 */
.layout-page {
  position: relative;
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 1440 / 900;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  background: #ffffff;
}

.layout-page + .layout-page {
  border-top: 1px solid rgba(9, 9, 9, 0.12);
}

.project-detail-page .layout-page {
  max-width: none;
  aspect-ratio: 1740 / 900;
}

.project-detail-page .layout-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(82.7586%, 1440px);
  height: min(100%, 900px);
  transform: translate(-50%, -50%);
}

.project1-detail-page .layout-frame {
  width: min(100%, 1740px);
  container-type: inline-size;
}

.project1-detail-page .layout-title {
  font-size: 1.37931cqw;
  font-weight: 400;
}

.project1-detail-page .layout-copy {
  font-size: 0.689655cqw;
  line-height: 1.25;
}

.project1-detail-page .layout-copy.narrow {
  line-height: 1.25;
}

.project2-detail-page .layout-frame {
  container-type: inline-size;
}

.project2-detail-page .layout-title {
  font-size: 1.666667cqw;
  font-weight: 400;
}

.project2-detail-page .layout-copy {
  font-size: 0.833333cqw;
}

.project2-detail-page .residential-prototypes-page h3.layout-title {
  font-size: 1.25cqw;
}

.layout-title {
  position: absolute;
  z-index: 2;
  margin: 0;
  font: 700 clamp(10px, 0.9vw, 14px)/1.15 var(--font-ui);
  line-height: 1.1;
  letter-spacing: 0;
}

.layout-title.align-right {
  text-align: right;
}

.layout-copy {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-size: clamp(7px, 0.72vw, 11px);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: 0;
  color: #151515;
  font-family: var(--font-ui);
  font-weight: 500;
}

.layout-copy.narrow {
  line-height: 1.68;
}

.layout-copy p {
  margin: 0 0 clamp(8px, 1.1667vw, 16.8px);
}

.layout-copy p:last-child {
  margin-bottom: 0;
}

.project2-detail-page .residential-prototypes-page .layout-copy {
  white-space: nowrap;
  text-align: right;
}

.layout-image {
  position: absolute;
  display: block;
  margin: 0;
}

.layout-image.cover {
  object-fit: cover;
}

.layout-image.contain {
  object-fit: contain;
}

.project2-detail-page .public-program-page .layout-image {
  z-index: 1;
  cursor: zoom-in;
  transform-origin: center;
  transition:
    opacity 720ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    scale 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms ease,
    filter 420ms ease;
  will-change: scale;
}

.project2-detail-page .public-program-page .layout-image:hover {
  z-index: 10;
  scale: 1.18;
  box-shadow: 0 18px 42px rgba(21, 21, 21, 0.18);
  filter: saturate(1.03);
}

html.js .layout-page > :not(.layout-frame),
html.js .layout-frame > * {
  opacity: 0;
  transform: translateY(clamp(8px, 1.25vw, 18px));
  transition:
    opacity 720ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js .layout-page > :not(.layout-frame).is-visible,
html.js .layout-frame > *.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.drawings-archive {
  min-height: 100svh;
  padding: clamp(64px, 6vw, 96px) clamp(24px, 5vw, 80px);
  border-top: 1px solid rgba(9, 9, 9, 0.18);
  background: #f1f1ef;
}

.archive-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.4fr);
  align-items: end;
  gap: 40px;
  margin-bottom: clamp(34px, 4vw, 58px);
}

.archive-heading h2 {
  margin: 0;
  font-size: clamp(34px, 4.5vw, 72px);
  font-family: var(--font-ui);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.archive-heading > p {
  margin: 0;
  max-width: 32ch;
  font: 700 clamp(12px, 0.95vw, 15px)/1.5 var(--font-ui);
  line-height: 1.6;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.drawings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 4vh, 50px) clamp(16px, 2vw, 30px);
}

.drawings-grid a {
  display: grid;
  gap: 14px;
  font-family: var(--font-ui);
}

.drawings-grid img {
  width: 100%;
  height: min(31vh, 320px);
  object-fit: contain;
  background: #fff;
  transition: opacity 180ms ease;
}

.drawings-grid a:hover img {
  opacity: 0.62;
}

.drawings-grid span {
  font: 700 clamp(11px, 0.85vw, 14px)/1.4 var(--font-ui);
  line-height: 1.4;
  letter-spacing: 0;
}

.project-detail-page .film-statement > p:last-child,
.project-detail-page .closing-overlay p {
  font-family: var(--font-ui);
  font-weight: 500;
}

.drawing-lightbox[hidden] {
  display: none;
}

.drawing-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
  background: rgba(241, 240, 235, 0.98);
  opacity: 0;
  transition: opacity 220ms ease;
}

.drawing-lightbox.is-open {
  opacity: 1;
}

.lightbox-close,
.lightbox-nav {
  border: 0;
  padding: 0;
  color: #151515;
  background: transparent;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: opacity 160ms ease;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  opacity: 0.42;
}

.lightbox-close {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 28px;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

.lightbox-nav {
  align-self: stretch;
  font-size: 22px;
}

.lightbox-prev {
  grid-column: 1;
}

.lightbox-next {
  grid-column: 3;
}

.lightbox-figure {
  grid-column: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 54px 0 22px;
}

.lightbox-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-caption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 14px;
  font-size: 10px;
  font-family: var(--font-ui);
  letter-spacing: 0.08em;
}

body.lightbox-open {
  overflow: hidden;
}

.project-closing {
  position: relative;
  min-height: 78vh;
  overflow: hidden;
  color: #fff;
  background: #222;
}

.project-closing > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-closing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.58));
}

.closing-overlay {
  position: absolute;
  z-index: 1;
  right: clamp(24px, 5vw, 80px);
  bottom: clamp(28px, 5vw, 70px);
  left: clamp(24px, 5vw, 80px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}

.closing-overlay p {
  max-width: 680px;
  margin: 0;
  font-size: clamp(26px, 3.5vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.closing-overlay .section-index {
  display: block;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.72);
}

.closing-overlay a {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

@media (max-width: 760px) {
  .drawing-lightbox {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
  }

  .lightbox-close {
    top: 18px;
    left: 16px;
  }

  .lightbox-figure {
    padding: 60px 0 18px;
  }

  .lightbox-caption {
    font-size: 9px;
  }

  .home-header,
  .project-overlay-header {
    padding: 16px;
  }

  .home-header {
    gap: 12px;
  }

  .home-header .site-name {
    font-size: 13px;
  }

  .main-nav {
    gap: 12px;
    font-size: 13px;
    letter-spacing: 0;
  }

  .menu {
    gap: 18px;
  }

  .home-meta-rail {
    right: 16px;
    bottom: 16px;
    left: 16px;
    grid-template-columns: 1fr auto;
    row-gap: 5px;
    font-size: 14px;
  }

  .home-meta-rail span:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .home-meta-rail span:last-child {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
  }

  .home-page:not(.explorations-page) {
    --home-meta-height: 48px;
  }

  .home-page:not(.explorations-page) .home-meta-rail {
    right: 0;
    bottom: 0;
    left: 0;
    padding: 3px 16px;
    row-gap: 2px;
    font-size: 12px;
  }

  .home-info {
    padding: 90px 16px 32px;
  }

  .home-info-statement {
    font-size: clamp(36px, 11vw, 58px);
  }

  .home-info-grid {
    grid-template-columns: 1fr;
    gap: 54px;
    margin-top: 100px;
  }

  .scroll-cue {
    right: 16px;
    bottom: 18px;
  }

  .project-information {
    display: block;
    min-height: 78svh;
    padding: 92px 16px 60px;
  }

  .project-title-block h1 {
    margin-top: 42px;
    font-size: clamp(48px, 14vw, 72px);
    line-height: 0.92;
  }

  .exploration-detail-page .project-title-block h1 {
    max-width: none;
    font-size: clamp(44px, 13vw, 64px);
    line-height: 0.92;
  }

  .project-credits {
    margin-top: 72px;
  }

  .project-film {
    padding: 90px 16px 70px;
  }

  .exploration-video-pair {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 70px 16px 40px;
  }

  .exploration-animation-model {
    padding: 60px 16px 30px;
  }

  .film-heading {
    display: block;
    margin-bottom: 36px;
  }

  .film-heading h2 {
    margin-top: 24px;
    text-align: left;
  }

  .film-statement {
    display: block;
    margin-top: 80px;
  }

  .film-statement > p:last-child {
    margin-top: 28px;
    font-size: 18px;
  }

  .exploration-next {
    display: block;
    min-height: 36svh;
    padding: 90px 16px 28px;
  }

  .exploration-next a {
    display: block;
    margin-top: 40px;
    font-size: clamp(38px, 12vw, 58px);
  }

  .story-section {
    display: block;
    padding: 100px 16px;
  }

  .section-copy {
    max-width: none;
    margin-bottom: 70px;
  }

  .section-copy h2 {
    font-size: 20px;
  }

  .main-visual,
  .support-visual,
  .diagram-main,
  .model-accent,
  .structure-model,
  .section-drawing {
    width: 100%;
    margin: 0 0 70px;
  }

  .main-visual img,
  .environmental-void .main-visual img,
  .program-theater .main-visual img,
  .circulation .main-visual img {
    height: auto;
    max-height: none;
    aspect-ratio: auto;
  }

  .support-visual img,
  .diagram-main img,
  .model-accent img,
  .paired-visuals img,
  .plans-row img,
  .models-layout img {
    height: auto;
    max-height: none;
  }

  .paired-visuals,
  .plans-row,
  .models-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .paired-visuals figure:first-child,
  .models-layout figure:nth-child(2) {
    margin-top: 0;
  }

  .models-layout .model-large {
    width: 100%;
    justify-self: auto;
  }

  .site-context .support-visual {
    padding: 0;
    background: transparent;
    transform: none;
  }

  .site-context .support-visual img,
  .concept-form .model-accent img,
  .structure .diagram-main img,
  .structure .structure-model img,
  .environmental-void .main-visual img,
  .environmental-void .section-drawing img,
  .program-theater .main-visual img,
  .program-theater .paired-visuals img,
  .circulation .main-visual img,
  .circulation .plans-row img,
  .models-section .models-layout img {
    height: auto;
  }

  .program-theater .paired-visuals {
    height: auto;
  }

  .program-theater .paired-visuals figure {
    display: block;
  }

  .drawings-archive {
    padding: 100px 16px;
  }

  .archive-heading {
    display: block;
  }

  .archive-heading > p {
    margin-top: 28px;
  }

  .drawings-grid {
    grid-template-columns: 1fr;
    gap: 70px;
  }

  .project-detail-page .layout-page {
    height: min(68svh, 560px);
    aspect-ratio: auto;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .project1-detail-page .layout-frame,
  .project2-detail-page .layout-frame {
    top: 50%;
    left: 0;
    width: 900px;
    height: 465px;
    transform: translateY(-50%);
  }

  .project-closing {
    min-height: 68vh;
  }

  .closing-overlay {
    right: 16px;
    bottom: 24px;
    left: 16px;
    display: block;
  }

  .closing-overlay a {
    display: inline-block;
    margin-top: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js body,
  html.js body.page-ready,
  html.js body.page-leaving {
    transform: none;
    transition: none;
  }

  .home-project-link > img,
  .project-information,
  .home-hero.reveal,
  .reveal {
    transition: none;
  }

  .project-information,
  .home-hero.reveal,
  .reveal {
    opacity: 1;
    transform: none;
  }

  html.js .layout-page > :not(.layout-frame),
  html.js .layout-frame > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .project2-detail-page .public-program-page .layout-image,
  .project2-detail-page .public-program-page .layout-image:hover {
    scale: 1;
    box-shadow: none;
    filter: none;
    transition: none;
  }
}

html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}

/* Information page: editorial profile using the Experience typography system. */
.information-page {
  --information-size-display: clamp(48px, 8.2vw, 136px);
  --information-size-section: clamp(42px, 3.8vw, 60px);
  --information-size-heading: clamp(18px, 1.8vw, 29px);
  --information-size-body: clamp(14px, 1.15vw, 18px);
  --information-size-meta: clamp(12px, 0.9vw, 14px);
  overflow-x: clip;
  color: #090909;
  background: #f1f1ef;
}

.information-page .home-header {
  color: #090909;
  mix-blend-mode: normal;
}

.information-page .home-header .site-name,
.information-page .main-nav,
.information-page .skip-link {
  font-size: var(--information-size-meta);
}

.information-page .main-nav a:focus-visible,
.information-page .site-name:focus-visible,
.information-page .information-facts a:focus-visible,
.information-page .information-footer a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.information-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(14px, 1.55vw, 28px);
  min-height: 100svh;
  padding: clamp(48px, 5vw, 80px) clamp(14px, 1.55vw, 28px) clamp(54px, 6vw, 92px);
  border-bottom: 1px solid rgba(9, 9, 9, 0.24);
}

.information-kicker {
  grid-column: 1 / span 3;
  align-self: start;
  margin: 0;
  font: 700 var(--information-size-meta)/1.25 var(--font-ui);
  letter-spacing: 0.04em;
}

.information-hero > h1 {
  grid-column: 4 / -1;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--information-size-display);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.information-identity {
  grid-column: 1 / -1;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(14px, 1.55vw, 28px);
  margin-top: clamp(110px, 13vw, 210px);
  font-family: var(--font-ui);
}

.information-name-block {
  grid-column: 1 / span 7;
  align-self: end;
}

.information-role {
  margin: 0 0 14px;
  font: 700 var(--information-size-body)/1.35 var(--font-ui);
}

.information-name-block > h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--information-size-display);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.82;
}

.information-summary {
  grid-column: 8 / -1;
  align-self: end;
  max-width: 38em;
  margin: 0;
  font: 700 var(--information-size-body)/1.35 var(--font-ui);
}

.information-facts {
  grid-column: 4 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(22px, 3vw, 50px);
  margin: clamp(70px, 8vw, 126px) 0 0;
}

.information-facts div {
  min-width: 0;
  padding: 15px 0 18px;
  border-top: 1px solid rgba(9, 9, 9, 0.24);
}

.information-facts dt {
  margin: 0 0 10px;
  font-size: var(--information-size-meta);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(9, 9, 9, 0.64);
}

.information-facts dd {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 18px;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--information-size-meta);
  font-weight: 700;
  line-height: 1.45;
}

.information-facts a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 180ms ease;
}

.information-facts a:hover,
.information-footer a:hover {
  opacity: 0.55;
}

.information-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(14px, 1.55vw, 28px);
  padding: clamp(96px, 11vw, 180px) clamp(14px, 1.55vw, 28px);
  border-bottom: 1px solid rgba(9, 9, 9, 0.24);
}

.information-section > h2 {
  grid-column: 1 / span 3;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--information-size-section);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.information-records,
.information-capabilities {
  grid-column: 4 / -1;
  margin: 0;
}

.information-record {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: clamp(14px, 1.55vw, 28px);
  padding: 22px 0 clamp(34px, 4vw, 62px);
  border-top: 1px solid rgba(9, 9, 9, 0.3);
  font-family: var(--font-ui);
}

.information-record + .information-record {
  margin-top: clamp(28px, 4vw, 58px);
}

.information-period {
  grid-column: 1 / span 2;
  margin: 0;
  font-size: var(--information-size-meta);
  font-weight: 700;
  line-height: 1.45;
}

.information-record-main {
  grid-column: 3 / span 5;
}

.information-record-main h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--information-size-heading);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.information-record-main > p {
  margin: 12px 0 0;
  font-size: var(--information-size-meta);
  font-weight: 700;
  line-height: 1.45;
}

.information-record-main .information-record-detail {
  max-width: 48em;
  margin-top: clamp(24px, 3vw, 42px);
  font: 700 var(--information-size-body)/1.35 var(--font-ui);
}

.information-location {
  grid-column: 8 / -1;
  justify-self: end;
  margin: 0;
  font-size: var(--information-size-meta);
  font-weight: 700;
  line-height: 1.45;
  text-align: right;
}

.information-capabilities div {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: clamp(14px, 1.55vw, 28px);
  padding: 22px 0 clamp(34px, 4vw, 58px);
  border-top: 1px solid rgba(9, 9, 9, 0.3);
  font-family: var(--font-ui);
}

.information-capabilities div + div {
  margin-top: clamp(20px, 3vw, 42px);
}

.information-capabilities dt {
  grid-column: 1 / span 2;
  font-size: var(--information-size-body);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(9, 9, 9, 0.64);
}

.information-capabilities dd {
  grid-column: 3 / -1;
  max-width: 48em;
  margin: 0;
  font: 700 var(--information-size-body)/1.35 var(--font-ui);
}

.information-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-height: 48svh;
  padding: clamp(90px, 10vw, 160px) clamp(14px, 1.55vw, 28px) clamp(28px, 3vw, 48px);
  font: 700 var(--information-size-meta)/1.4 var(--font-ui);
}

.information-footer p {
  margin: 0;
}

.information-footer a {
  justify-self: end;
  font-size: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: opacity 180ms ease;
}

@media (max-width: 760px) {
  .information-hero {
    display: block;
    min-height: 0;
    padding: 58px 16px 78px;
  }

  .information-hero > h1 {
    margin-top: 46px;
    font-size: var(--information-size-display);
  }

  .information-identity {
    display: block;
    margin-top: 70px;
  }

  .information-name-block > h2 {
    font-size: var(--information-size-display);
    line-height: 0.88;
  }

  .information-summary {
    margin-top: 42px;
  }

  .information-facts {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .information-section {
    display: block;
    padding: 92px 16px;
  }

  .information-section > h2 {
    font-size: var(--information-size-section);
    margin-bottom: 62px;
  }

  .information-record {
    display: block;
    padding: 18px 0 40px;
  }

  .information-record + .information-record {
    margin-top: 34px;
  }

  .information-record-main {
    margin-top: 34px;
  }

  .information-location {
    justify-self: start;
    width: 100%;
    margin-top: 16px;
    text-align: left;
  }

  .information-record-main .information-record-detail {
    margin-top: 28px;
  }

  .information-capabilities div {
    display: block;
    padding: 18px 0 42px;
  }

  .information-capabilities div + div {
    margin-top: 28px;
  }

  .information-capabilities dd {
    margin-top: 30px;
  }

  .information-footer {
    min-height: 54svh;
    padding: 90px 16px 28px;
  }

  .information-footer a {
    justify-self: end;
  }
}

@media (max-width: 520px) {
  .information-page .home-header .site-name {
    display: none;
  }

  .information-page .main-nav {
    justify-content: space-between;
    width: 100%;
  }
}

/* Project 4 — Allihies Steam Futures blueprint archive. */
.allihies-page { --acid: #ef3b27; --ink: #11120f; --paper: #e9e7df; color: var(--ink); background: var(--paper); }
.allihies-header { position: fixed; z-index: 30; inset: 0 0 auto; padding: 18px 24px; color: #f4f1e8; mix-blend-mode: difference; }
.allihies-nav { display: flex; gap: 20px; font: 10px/1 var(--font-ui); letter-spacing: .08em; }
.allihies-hero { position: relative; min-height: 100svh; overflow: hidden; padding: 88px 4vw 28px; color: #f3f0e7; background: #11120f; }
.allihies-hero-render { position:absolute; inset:0; height:100%; object-fit:cover; opacity:.48; filter:saturate(.72) contrast(1.08); }
.allihies-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,9,8,.88) 0%,rgba(8,9,8,.42) 48%,rgba(8,9,8,.12)),linear-gradient(0deg,rgba(8,9,8,.75),transparent 55%); }
.hero-grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size: 7.5vw 7.5vw; }
.hero-kicker,.hero-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; font: 10px/1.2 var(--font-ui); letter-spacing: .1em; }
.hero-machine { position: absolute; z-index:2; top: 22%; right: 4vw; width: min(48vw,760px); color: #11120f; font: 10px/1 var(--font-ui); text-align: center; opacity:.38; }
.machine-crown { position: relative; z-index: 2; width: 72%; margin-left: 20%; padding: 22px; background: var(--acid); box-shadow: 16px 16px 0 rgba(239,59,39,.25); }
.machine-pipes { display: flex; justify-content: center; gap: 8%; height: 32vh; }
.machine-pipes i { width: 5%; border: 2px solid var(--acid); border-top: 0; transform: skew(-9deg); }
.machine-pipes i:nth-child(2n) { height: 72%; transform: skew(13deg); }
.machine-base { padding: 30px; color: #eee; border: 1px solid #777; background: #282923; }
.hero-title-wrap { position: absolute; z-index: 3; left: 4vw; bottom: 12%; }
.hero-title-wrap p { font: 10px/1 var(--font-ui); letter-spacing: .12em; }
.hero-title-wrap h1 { margin: 20px 0 14px; font-size: clamp(48px,8vw,138px); font-weight: 400; line-height: .86; letter-spacing: -.07em; }
.hero-title-en { color: var(--acid); font: 700 clamp(13px,1.2vw,19px)/1.05 var(--font-ui); }
.hero-footer { position: absolute; right: 4vw; bottom: 28px; left: 4vw; }
.blueprint-intro,.blueprint-section { padding: clamp(90px,12vw,190px) 4vw; }
.eyebrow { margin: 0 0 22px; font: 700 10px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.intro-lead { max-width: 18em; margin: 0; font-size: clamp(38px,6vw,96px); line-height: .98; letter-spacing: -.05em; }
.facts-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: 120px 0 0; background: #aaa; }
.facts-grid div { padding: 22px; background: var(--paper); }
.facts-grid dt { margin-bottom: 40px; font: 10px var(--font-ui); }.facts-grid dd { margin: 0; font: 15px/1.45 var(--font-ui); }
.allihies-render { margin:0; padding:0 4vw 4vw; background:var(--paper); }.allihies-render img{height:auto;aspect-ratio:16/9;object-fit:cover}.allihies-render figcaption{display:flex;justify-content:space-between;padding:13px 0 0;font:10px/1.3 var(--font-ui);letter-spacing:.06em}.allihies-render figcaption p{margin:0}.allihies-render figcaption span{color:var(--acid)}.allihies-render--dark{margin:-35px 0 80px;padding:0;color:#eee;background:transparent}.allihies-render--sunset{margin:-35px 0 80px;padding:0;background:transparent}
.dark-section { color: #eee; background: #151613; }
.section-head { display: grid; grid-template-columns: 1fr 2fr; margin-bottom: 90px; }
.section-head h2 { margin: 0; font-size: clamp(48px,7vw,110px); font-weight: 400; line-height: .9; letter-spacing: -.06em; }
.split-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; margin-left: 33.33%; font-size: clamp(17px,1.4vw,23px); line-height: 1.55; }
.timeline-card { margin-top: 100px; padding: 28px; border: 1px solid #666; }
.timeline-labels,.timeline-years { display: flex; justify-content: space-between; color: #aaa; font: 9px var(--font-ui); letter-spacing: .08em; }
.timeline-labels span:last-child { color: var(--acid); }.timeline-plot { position: relative; height: 260px; margin: 24px 0; border-bottom: 1px solid #777; }
.black-steps { position:absolute; inset:10% 2% 0; clip-path:polygon(0 100%,0 84%,18% 84%,18% 70%,40% 70%,40% 52%,63% 52%,63% 28%,82% 28%,82% 8%,100% 8%,100% 100%); background:#ddd; opacity:.8; }
.red-curve { position:absolute; left:4%; top:22%; width:70%; height:50%; border-top:4px solid var(--acid); border-radius:50%; transform:rotate(12deg); }
.red-curve::after { content:""; position:absolute; right:-10%; top:32px; width:45%; height:4px; background:var(--acid); transform:rotate(54deg); transform-origin:left; }
.year-mark { position:absolute; left:29%; bottom:10px; padding-left:10px; border-left:1px solid var(--acid); color:#eee; font:11px/1.4 var(--font-ui); }.year-mark b{color:var(--acid)}
.site-composition { display:grid; grid-template-columns:1.6fr 1fr; gap:6vw; }.bowl-diagram { position:relative; min-height:620px; overflow:hidden; color:#777; background:#d5d2c8; }
.bowl-line { position:absolute; left:-10%; bottom:-38%; width:120%; height:100%; border:3px solid #777; border-radius:50%; box-shadow:0 0 0 25px #cac7bd,0 0 0 27px #777,0 0 0 55px #c3c0b6,0 0 0 57px #777; }
.plant-block { position:absolute; left:38%; bottom:10%; width:25%; height:38%; padding:18px; color:#eee; background:#151613; font:11px var(--font-ui); }.museum-block { position:absolute; left:56%; bottom:36%; width:35%; padding:20px; color:#111; background:var(--acid); font:11px var(--font-ui); }
.ocean-label,.cliff-label { position:absolute; font:9px var(--font-ui); letter-spacing:.1em; }.ocean-label{left:4%;bottom:4%}.cliff-label{right:4%;top:4%}
.site-notes { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#aaa; }.site-notes article { padding:24px; background:var(--paper); }.site-notes span{color:var(--acid);font:11px var(--font-ui)}.site-notes h3{margin:50px 0 12px;font-size:22px}.site-notes p{margin:0;font-size:13px;line-height:1.6}
.program-section { color:#eee; background:#272822; }.sankey { display:grid; grid-template-columns:1fr auto 1.2fr auto 1.2fr auto 1fr; grid-template-rows:auto auto auto; gap:22px; align-items:center; margin-bottom:90px; font:11px var(--font-ui); text-align:center; }.flow-node{padding:24px 12px;border:1px solid #888}.visitor{grid-column:1}.a1{grid-column:2}.museum{grid-column:3}.down{grid-column:3;grid-row:2}.threshold{grid-column:3;grid-row:3;color:#111;background:var(--acid);border:0}.down2{grid-column:3;grid-row:4}.waste{grid-column:1;grid-row:5}.a2{grid-column:2;grid-row:5}.plant{grid-column:3;grid-row:5}.a3{grid-column:4;grid-row:5}.energy{grid-column:5;grid-row:5}.flow-arrow{color:var(--acid);font-size:28px}
.program-columns { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:#777; }.program-columns article{padding:35px;background:#272822}.program-columns .threshold-card{color:#111;background:var(--acid)}.program-columns h3{margin:45px 0 20px;font-size:26px}.program-columns ul{padding:0;list-style:none}.program-columns li,.program-columns article>p:last-child{padding:9px 0;border-top:1px solid #666;font-size:13px;line-height:1.5}
.process-section{background:#dedbd1}.process-list{border-top:1px solid #777}.process-list article{display:grid;grid-template-columns:70px 1.2fr 1.6fr 1fr;gap:30px;align-items:center;padding:25px 0;border-bottom:1px solid #999}.process-list b{color:var(--acid);font:24px var(--font-ui)}.process-list h3,.process-list p{margin:0}.process-list h3{font:700 17px var(--font-ui)}.process-list p{font-size:14px}.process-list span{color:#666;font:10px/1.4 var(--font-ui)}
.typology-section{color:#eee;background:#11120f}.type-stack{max-width:980px;margin:auto}.type-level{margin:auto;padding:28px;font:11px var(--font-ui)}.type-level b,.type-level span{display:block}.type-level span{margin-top:8px;opacity:.7}.type-level.crown{width:72%;color:#111;background:var(--acid);transform:translateX(10%)}.type-level.middle{width:58%;height:240px;border-right:18px double var(--acid);border-left:18px double var(--acid);background:repeating-linear-gradient(45deg,transparent 0 28px,#555 29px 30px)}.type-level.base{width:86%;padding:45px;background:#44423b}.reference-copy{display:grid;grid-template-columns:1fr 1fr;gap:7vw;max-width:980px;margin:90px auto 0;font-size:16px;line-height:1.6}
.sequence-track{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:25px;align-items:center}.sequence-track article{min-height:420px;padding:28px;border:1px solid #999}.sequence-track article>b{font:64px var(--font-ui);color:var(--acid)}.sequence-track h3{margin:60px 0 18px;font-size:34px}.sequence-track article>p:last-child{font-size:14px;line-height:1.65}.sequence-arrow{color:var(--acid);font-size:30px}
.roadmap-section{background:var(--acid)}.roadmap-list{margin:0;padding:0;list-style:none;border-top:1px solid #111}.roadmap-list li{display:grid;grid-template-columns:1fr 2fr;padding:30px 0;border-bottom:1px solid #111}.roadmap-list li>span{font:42px var(--font-ui)}.roadmap-list h3{margin:8px 0 15px;font-size:28px}.roadmap-list p:last-child{max-width:650px;margin:0;line-height:1.6}
.deliverables-section{background:#e9e7df}.deliverables-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#999}.deliverables-grid article{min-height:290px;padding:28px;background:var(--paper)}.deliverables-grid span{color:var(--acid);font:11px var(--font-ui)}.deliverables-grid h3{max-width:10em;margin:80px 0 18px;font-size:30px;line-height:1}.deliverables-grid p{font:11px/1.5 var(--font-ui)}
.allihies-footer{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;min-height:60vh;padding:40px 4vw;color:#eee;background:#11120f;font:11px var(--font-ui)}.allihies-footer a{text-align:center;font-size:20px}.allihies-footer span{text-align:right}
.home-allihies-card .home-project-link{color:#eee;background:#11120f}.home-industrial-visual{position:absolute;inset:0 0 var(--home-meta-height);overflow:hidden;background:#11120f}.home-industrial-title{position:absolute;left:4vw;bottom:8%;z-index:2;color:#eee;font:400 clamp(48px,9vw,150px)/.8 var(--font-display);letter-spacing:-.07em}.home-industrial-stack{position:absolute;right:6%;top:10%;width:38%;height:72%;border-bottom:70px solid #393a34}.home-industrial-stack i{position:relative;display:inline-block;width:12%;height:80%;margin:0 3%;border:3px solid var(--acid,#ef3b27);transform:skew(-10deg)}.home-industrial-visual>span{position:absolute;right:3%;bottom:3%;font:9px var(--font-ui);letter-spacing:.08em}
@media(max-width:760px){.allihies-nav{display:none}.allihies-header{padding:16px}.allihies-hero{padding-inline:16px}.hero-machine{top:16%;right:-18%;width:75vw;opacity:.65}.hero-title-wrap{left:16px;bottom:14%}.hero-footer{right:16px;left:16px}.blueprint-intro,.blueprint-section{padding:90px 16px}.facts-grid,.site-composition,.program-columns,.deliverables-grid{grid-template-columns:1fr}.facts-grid{margin-top:70px}.section-head{display:block;margin-bottom:60px}.section-head .eyebrow{margin-bottom:28px}.split-copy{grid-template-columns:1fr;margin-left:0}.timeline-plot{height:180px}.bowl-diagram{min-height:440px}.site-notes{grid-template-columns:1fr}.sankey{display:flex;flex-direction:column}.flow-node{width:100%}.flow-arrow{transform:rotate(90deg)}.process-list article{grid-template-columns:44px 1fr}.process-list p,.process-list span{grid-column:2}.sequence-track{grid-template-columns:1fr}.sequence-arrow{text-align:center;transform:rotate(90deg)}.roadmap-list li{grid-template-columns:70px 1fr}.allihies-footer{grid-template-columns:1fr;gap:50px}.allihies-footer a,.allihies-footer span{text-align:left}.reference-copy{grid-template-columns:1fr}.home-industrial-title{left:16px;font-size:15vw}.home-industrial-stack{right:-8%;width:60%}}
/* Project 3: 1740 × 900 editorial boards translated directly from layout3.pdf. */
.project3-detail-page .layout-frame {
  width: min(100%, 1740px);
  container-type: inline-size;
}

.project3-detail-page .layout-title {
  font-size: 1.37931cqw;
  font-weight: 400;
}

.project3-detail-page .layout-copy {
  font-size: 0.689655cqw;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .project3-detail-page .layout-frame {
    top: 50%;
    left: 0;
    width: 900px;
    height: 465px;
    transform: translateY(-50%);
  }
}

/* Home refinement: preserve the full-screen index while improving feedback and mobile use. */
.home-page:not(.explorations-page) .home-header {
  color: #fff;
  mix-blend-mode: difference;
}

.home-page:not(.explorations-page) .home-hero,
.home-page:not(.explorations-page) .home-project-link {
  height: 100dvh;
  min-height: 100dvh;
}

.home-page:not(.explorations-page) .home-info {
  height: auto;
  min-height: 100dvh;
}

.home-page:not(.explorations-page) .home-project-link > img {
  transform: scale(1.001);
  transition:
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 420ms ease;
}

.home-page:not(.explorations-page) .home-project-link:hover > img,
.home-page:not(.explorations-page) .home-project-link:focus-visible > img {
  filter: saturate(0.94) contrast(1.025);
  transform: scale(1.012);
}

.home-page:not(.explorations-page) .home-project-link:active > img {
  transform: scale(1.006);
}

.home-page:not(.explorations-page) .home-project-link:focus-visible {
  outline: 2px solid #090909;
  outline-offset: -6px;
}

.home-page:not(.explorations-page) .home-hero.reveal {
  transform: translateY(18px);
  transition:
    opacity 720ms ease,
    transform 880ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page:not(.explorations-page) .home-meta-rail {
  border-top: 1px solid rgba(9, 9, 9, 0.12);
}

.home-page:not(.explorations-page) .home-meta-rail u {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.home-page:not(.explorations-page) .home-meta-rail span:last-child {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page:not(.explorations-page) .home-project-link:hover .home-meta-rail span:last-child,
.home-page:not(.explorations-page) .home-project-link:focus-visible .home-meta-rail span:last-child {
  transform: translateX(3px);
}

.home-page:not(.explorations-page) .home-info-grid a {
  transition: opacity 180ms ease, text-underline-offset 180ms ease;
}

.home-page:not(.explorations-page) .home-info-grid a:hover,
.home-page:not(.explorations-page) .home-info-grid a:focus-visible {
  opacity: 0.56;
  text-underline-offset: 5px;
}

.home-page:not(.explorations-page) .home-info-grid a:focus-visible,
.home-page:not(.explorations-page) .main-nav a:focus-visible,
.home-page:not(.explorations-page) .site-name:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

@media (max-width: 760px) {
  html:has(.home-page:not(.explorations-page)) {
    scroll-snap-type: y proximity;
    overscroll-behavior-y: auto;
  }

  .home-page:not(.explorations-page) {
    --home-meta-height: 64px;
  }

  .home-page:not(.explorations-page) .home-header {
    align-items: flex-start;
    padding: 14px 16px;
  }

  .home-page:not(.explorations-page) .main-nav {
    gap: 10px;
    font-size: 12px;
  }

  .home-page:not(.explorations-page) .home-meta-rail {
    padding: 7px 16px;
    row-gap: 3px;
    font-size: 12px;
    line-height: 1.2;
  }

  .home-page:not(.explorations-page) .home-project-link:hover > img,
  .home-page:not(.explorations-page) .home-project-link:focus-visible > img {
    filter: none;
    transform: scale(1.001);
  }
}

@media (max-width: 520px) {
  .home-page:not(.explorations-page) .main-nav .nav-placeholder {
    display: none;
  }

  .home-page:not(.explorations-page) .home-header .site-name {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page:not(.explorations-page) .home-project-link > img,
  .home-page:not(.explorations-page) .home-meta-rail span:last-child,
  .home-page:not(.explorations-page) .home-info-grid a {
    filter: none;
    transform: none;
    transition: none;
  }
}

/* Experience: a vertical editorial record with reserved project image fields. */
.experience-page {
  --experience-media-height: clamp(320px, 38vw, 560px);
  overflow-x: clip;
  color: #090909;
  background: #f1f1ef;
}

.experience-page .home-header {
  color: #090909;
  mix-blend-mode: normal;
}

.experience-page .main-nav a:focus-visible,
.experience-page .site-name:focus-visible,
.experience-page .experience-link:focus-visible,
.experience-page .experience-project-link:focus-visible,
.experience-page .experience-footer a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.experience-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  column-gap: clamp(14px, 1.55vw, 28px);
  min-height: 88svh;
  padding: clamp(100px, 10vw, 160px) clamp(14px, 1.55vw, 28px) clamp(32px, 4vw, 64px);
  border-bottom: 1px solid rgba(9, 9, 9, 0.24);
}

.experience-kicker {
  grid-column: 1 / span 3;
  align-self: start;
  margin: 0;
  font: 700 clamp(10px, 0.75vw, 12px)/1.25 var(--font-ui);
  letter-spacing: 0.04em;
}

.experience-intro-copy {
  grid-column: 4 / -1;
  align-self: start;
  min-width: 0;
}

.experience-intro h1 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(54px, 7vw, 126px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.experience-intro-copy > p {
  max-width: 42em;
  margin: clamp(24px, 3vw, 46px) 0 0;
  font: 700 clamp(14px, 1.15vw, 18px)/1.35 var(--font-ui);
  letter-spacing: 0;
}

.experience-link {
  grid-column: 10 / -1;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  font: 700 clamp(12px, 0.95vw, 15px)/1.3 var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 180ms ease, text-underline-offset 180ms ease;
}

.experience-link:hover,
.experience-footer a:hover {
  opacity: 0.55;
  text-underline-offset: 6px;
}

.experience-entry {
  padding: clamp(84px, 9vw, 150px) clamp(14px, 1.55vw, 28px) clamp(110px, 14vw, 230px);
  border-bottom: 1px solid rgba(9, 9, 9, 0.24);
}

.experience-entry-header {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(14px, 1.55vw, 28px);
  align-items: start;
}

.experience-period {
  grid-column: 1 / span 3;
  margin: 0;
  font: 700 clamp(11px, 0.9vw, 14px)/1.4 var(--font-ui);
}

.experience-role {
  grid-column: 4 / span 6;
}

.experience-role p {
  margin: 0 0 12px;
  font: 700 clamp(14px, 1.15vw, 18px)/1.35 var(--font-ui);
}

.experience-role h2 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(28px, 3.8vw, 60px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.experience-facts {
  grid-column: 10 / -1;
  margin: 0;
  font-family: var(--font-ui);
}

.experience-facts div {
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(9, 9, 9, 0.22);
}

.experience-facts div + div {
  padding-top: 18px;
}

.experience-facts dt {
  margin: 0 0 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(9, 9, 9, 0.64);
}

.experience-facts dd {
  margin: 0;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 700;
  line-height: 1.45;
}

.experience-description {
  width: min(75%, 48em);
  margin: clamp(68px, 9vw, 145px) 0 0 25%;
  font: 700 clamp(14px, 1.15vw, 18px)/1.35 var(--font-ui);
  letter-spacing: 0;
}

.experience-project-link {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(14px, 1.55vw, 28px);
  width: 100%;
  margin-top: clamp(38px, 5vw, 76px);
  padding-top: 16px;
  border-top: 1px solid rgba(15, 15, 15, 0.72);
  font-family: var(--font-ui);
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
  transition: opacity 180ms ease;
}

.experience-project-link span:first-child {
  grid-column: 4 / span 6;
}

.experience-project-link span:last-child {
  grid-column: 10 / -1;
  text-align: right;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.experience-project-link:hover {
  opacity: 0.55;
}

.experience-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.55vw, 28px);
  align-items: start;
  margin-top: clamp(74px, 10vw, 170px);
}

.experience-gallery figure {
  min-width: 0;
}

.experience-gallery--lead figure:nth-child(1) {
  grid-column: 1 / span 9;
}

.experience-gallery--lead figure:nth-child(2) {
  grid-column: 10 / -1;
}

.experience-gallery--lead figure:nth-child(3) {
  grid-column: 1 / span 6;
}

.experience-gallery--lead figure:nth-child(4) {
  grid-column: 7 / span 3;
}

.experience-gallery--lead figure:nth-child(5) {
  grid-column: 10 / -1;
}

.experience-gallery--panorama figure {
  grid-column: 3 / -1;
}

.experience-gallery--lineplus figure:nth-child(1) {
  grid-column: 1 / span 6;
}

.experience-gallery--lineplus figure:nth-child(2) {
  grid-column: 7 / -1;
}

.experience-gallery--lineplus figure:nth-child(3) {
  grid-column: 1 / -1;
}

.experience-media-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #d9d8d2;
}

.experience-gallery--lineplus figure:nth-child(-n + 2) .experience-media-frame {
  height: clamp(280px, 30vw, 440px);
}

.experience-gallery--lineplus figure:nth-child(3) .experience-media-frame {
  aspect-ratio: 3000 / 890;
}

.experience-media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-gallery--lineplus figure:nth-child(2) .experience-media-frame img,
.experience-gallery--lineplus figure:nth-child(3) .experience-media-frame img {
  object-fit: contain;
}

.experience-gallery--pair figure:first-child {
  grid-column: 1 / span 5;
}

.experience-gallery--pair figure:last-child {
  grid-column: 7 / -1;
}

.experience-gallery--cocoon figure:first-child {
  grid-column: 1 / span 4;
}

.experience-gallery--cocoon figure:last-child {
  grid-column: 5 / -1;
}

.experience-gallery--cocoon figure:first-child .experience-media-slot {
  object-position: center 46%;
}

.experience-media-slot {
  width: 100%;
  height: var(--experience-media-height);
  overflow: hidden;
  object-fit: cover;
  background: #d9d8d2;
}

.experience-media-slot--drawing {
  object-fit: contain;
  background: #fff;
}

.experience-gallery figcaption {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font: 700 9px/1.35 var(--font-ui);
  letter-spacing: 0.04em;
  color: rgba(9, 9, 9, 0.64);
}

.experience-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  min-height: 48svh;
  padding: clamp(90px, 10vw, 160px) clamp(14px, 1.55vw, 28px) clamp(28px, 3vw, 48px);
  font: 700 clamp(11px, 0.9vw, 14px)/1.4 var(--font-ui);
}

.experience-footer p {
  margin: 0;
}

.experience-footer a {
  justify-self: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 180ms ease, text-underline-offset 180ms ease;
}

.experience-footer span {
  justify-self: end;
}

@media (max-width: 760px) {
  .experience-page {
    --experience-media-height: clamp(230px, 68vw, 320px);
  }

  .experience-intro {
    display: flex;
    flex-direction: column;
    min-height: 82svh;
    padding: 118px 16px 28px;
  }

  .experience-kicker {
    margin-bottom: 64px;
  }

  .experience-intro h1 {
    font-size: clamp(48px, 14vw, 72px);
    line-height: 0.92;
  }

  .experience-intro-copy > p {
    margin-top: 30px;
  }

  .experience-link {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 64px;
  }

  .experience-entry {
    padding: 82px 16px 120px;
  }

  .experience-entry-header {
    display: block;
  }

  .experience-period {
    margin-bottom: 42px;
  }

  .experience-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 54px;
  }

  .experience-facts div,
  .experience-facts div + div {
    padding: 14px 0;
    border-top: 1px solid rgba(9, 9, 9, 0.22);
    border-bottom: 0;
  }

  .experience-description {
    width: 100%;
    margin: 64px 0 0;
  }

  .experience-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 58px;
    margin-top: 76px;
  }

  .experience-gallery--lead figure:nth-child(n),
  .experience-gallery--lineplus figure:nth-child(n),
  .experience-gallery--panorama figure,
  .experience-gallery--pair figure:first-child,
  .experience-gallery--pair figure:last-child,
  .experience-gallery--cocoon figure:first-child,
  .experience-gallery--cocoon figure:last-child {
    grid-column: 1 / -1;
    margin-top: 0;
    width: 100%;
    justify-self: stretch;
  }

  .experience-gallery--lineplus figure:nth-child(-n + 2) .experience-media-frame {
    height: var(--experience-media-height);
  }

  .experience-project-link {
    display: block;
    margin-top: 40px;
  }

  .experience-project-link span {
    display: block;
  }

  .experience-project-link span:last-child {
    margin-top: 10px;
    text-align: left;
  }

  .experience-footer {
    grid-template-columns: 1fr;
    gap: 44px;
    min-height: 54svh;
    padding: 90px 16px 28px;
  }

  .experience-footer a,
  .experience-footer span {
    justify-self: start;
  }
}

@media (max-width: 520px) {
  .home-page .home-header .site-name,
  .experience-page .home-header .site-name {
    display: none;
  }

  .home-page .main-nav,
  .experience-page .main-nav {
    justify-content: space-between;
    width: 100%;
  }
}
img,
video,
canvas,
model-viewer {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}