.project-site {
  --scope-orange: #d26d2b;
  --scope-blue: #7794ad;
  --scope-night: #18201b;
  background: var(--paper);
  min-height: 100svh;
}

.project-header { border-bottom: 0; }

.resultary-header-link {
  min-height: 44px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
}

.resultary-header-link:hover { color: var(--ink); }
.resultary-header-link svg { width: 15px; height: 15px; }
.project-homepage { overflow: hidden; }

.project-hero,
.project-principle,
.architecture-section,
.resultary-section {
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: 64px;
}

.project-hero {
  min-height: calc(100svh - 100px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 62px;
  isolation: isolate;
  position: relative;
}

.hero-sky {
  z-index: -1;
  pointer-events: none;
  background: url('/assets/sky-field.svg') center 35% / 1200px auto no-repeat;
  opacity: .66;
  position: absolute;
  inset: -30px 14px 0;
}

.project-hero-topline {
  font: 9px/1.7 var(--mono);
  letter-spacing: 1.6px;
  color: var(--muted);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.project-hero-mark {
  text-align: center;
  padding-block: 30px 16px;
}

.project-hero-mark .wordmark {
  margin: 0 auto 16px;
  font-size: clamp(112px, 13.2vw, 202px);
  line-height: .9;
}

.project-hero-mark .wordmark img {
  width: .92em;
  height: .92em;
  transform: translateY(.02em);
}

.project-kicker {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .055em;
}

.project-hero-statement {
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 80px;
  align-items: start;
  padding-top: 26px;
}

.project-deck {
  max-width: 760px;
  margin: 0;
  font: 44px/1.08 var(--serif);
  letter-spacing: -.02em;
}

.project-summary {
  max-width: 540px;
  justify-self: end;
}

.project-summary > p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.project-button {
  min-height: 46px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 17px;
  font-size: 11px;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.project-button:hover { transform: translateY(-1px); }

.project-button-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.project-button-primary:hover { background: #394136; }

.project-button-secondary {
  background: #f9faf6;
  color: var(--ink);
}

.project-button-secondary:hover { border-color: var(--muted); }

.section-index {
  font: 9px/1.7 var(--mono);
  letter-spacing: 1.7px;
  color: var(--muted);
  text-transform: uppercase;
}

.project-principle {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 170px minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 38px;
  padding-top: 72px;
  padding-bottom: 86px;
}

.project-principle h2,
.section-heading-row h2,
.evolution-heading h2,
.resultary-message h2 {
  margin: 0;
  font: 48px/1.08 var(--serif);
  letter-spacing: -.018em;
}

.project-principle h2 em,
.evolution-heading h2 em,
.resultary-message h2 em {
  color: var(--muted);
  font-weight: 400;
}

.principle-copy { padding-top: 2px; }

.principle-copy p {
  color: var(--muted);
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
}

.architecture-section {
  border-top: 1px solid var(--ink);
  padding-top: 42px;
  padding-bottom: 88px;
}

.section-heading-row {
  display: grid;
  grid-template-columns: 240px 1fr minmax(300px, .7fr);
  gap: 38px;
  align-items: start;
  margin-bottom: 36px;
}

.section-heading-row h2 { font-size: 36px; }

.section-heading-row > p {
  max-width: 470px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.85;
}

.architecture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.architecture-card {
  min-width: 0;
  background: #eceee8;
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  grid-template-rows: minmax(230px, 31vw) auto;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}

.architecture-card:hover {
  border-color: #879080;
  transform: translateY(-3px);
}

.architecture-card figure {
  margin: 0;
  overflow: hidden;
  background: #242a26;
}

.architecture-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(.96);
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}

.architecture-card:hover figure img {
  transform: scale(1.018);
  filter: saturate(.95) contrast(1);
}

.architecture-deep figure img { object-position: center 46%; }

.architecture-card-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 26px;
  padding: 26px 28px 28px;
}

.architecture-card-copy > span {
  grid-column: 1 / -1;
  font: 9px/1.6 var(--mono);
  letter-spacing: 1.5px;
  color: var(--muted);
}

.architecture-card-copy h3 {
  margin: 9px 0 0;
  font: 34px/1.08 var(--serif);
}

.architecture-card-copy p {
  margin: 9px 0 0;
  font: 19px/1.3 var(--serif);
}

.architecture-card-copy p em { color: var(--muted); }

.architecture-card-copy small {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d0d4cb;
  margin-top: 20px;
  padding-top: 14px;
  font-size: 10px;
  color: var(--muted);
}

.architecture-card-copy small b {
  color: var(--ink);
  font-weight: 400;
}

.evolution-section {
  background: var(--scope-night);
  color: #f2f2eb;
  max-width: none;
  padding: 78px max(64px, calc((100vw - 1480px) / 2 + 64px)) 88px;
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(500px, 1.15fr);
  gap: 110px;
}

.evolution-section .section-index,
.evolution-heading > p,
.evolution-steps p { color: #aeb6aa; }

.evolution-heading h2 {
  margin-top: 26px;
  font-size: 58px;
}

.evolution-heading h2 em { color: #aeb6aa; }

.evolution-heading > p {
  max-width: 520px;
  margin: 28px 0 0;
  font-size: 13px;
  line-height: 1.9;
}

.evolution-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #4b544c;
}

.evolution-steps li {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 26px;
  border-bottom: 1px solid #4b544c;
  padding: 25px 0;
}

.evolution-steps li > span {
  color: var(--scope-orange);
  font: 10px/1.7 var(--mono);
}

.evolution-steps strong {
  font: 27px/1.15 var(--serif);
  font-weight: 400;
}

.evolution-steps p {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.8;
}

.resultary-section {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-top: 90px;
  padding-bottom: 96px;
}

.resultary-orbit {
  position: absolute;
  width: 420px;
  height: 420px;
  left: 9%;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #d9ddd4;
  border-radius: 50%;
  pointer-events: none;
}

.resultary-orbit::before,
.resultary-orbit::after {
  content: '';
  position: absolute;
  border: 1px solid #e6e8e1;
  border-radius: 50%;
}

.resultary-orbit::before { inset: 58px; }
.resultary-orbit::after { inset: 132px; }

.resultary-orbit span {
  width: 9px;
  height: 9px;
  background: var(--scope-blue);
  border-radius: 50%;
  position: absolute;
  top: 65px;
  right: 61px;
  box-shadow: 0 0 0 8px rgba(119, 148, 173, .1);
}

.resultary-section > .section-index { margin-left: 43%; }

.resultary-message {
  display: grid;
  grid-template-columns: 1fr minmax(360px, .72fr);
  gap: 78px;
  align-items: end;
  margin-left: 43%;
  margin-top: 26px;
}

.resultary-message h2 { font-size: 48px; }

.resultary-message > div > p {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
}

.resultary-button {
  color: #f3f4ee;
  background: #26394b;
  border-color: #26394b;
  margin-top: 24px;
}

.resultary-button:hover {
  background: #36506a;
  border-color: #36506a;
}

.project-footer {
  display: grid;
  grid-template-columns: 1.15fr .5fr .65fr 1.2fr;
  align-items: start;
}

.project-footer .footer-links { align-items: flex-start; }
.project-footer .footer-note { white-space: nowrap; }

@media (width >= 1600px) {
  .project-hero,
  .project-principle,
  .architecture-section,
  .resultary-section { padding-inline: 36px; }
  .evolution-section { padding-inline: max(36px, calc((100vw - 1480px) / 2 + 36px)); }
}

@media (width <= 1100px) {
  .project-hero,
  .project-principle,
  .architecture-section,
  .resultary-section { padding-inline: 36px; }
  .project-hero-statement { gap: 46px; }
  .project-deck { font-size: 38px; }
  .project-principle { grid-template-columns: 120px 1fr 1fr; }
  .section-heading-row { grid-template-columns: 180px 1fr 1fr; }
  .evolution-section { gap: 65px; padding-inline: 36px; }
  .resultary-message,
  .resultary-section > .section-index { margin-left: 37%; }
  .project-footer { grid-template-columns: 1.2fr .7fr .8fr; }
  .project-footer .footer-note { grid-column: 1 / -1; margin-top: 16px; white-space: normal; }
}

@media (width <= 760px) {
  .project-header .resultary-header-link { display: none; }
  .project-hero,
  .project-principle,
  .architecture-section,
  .resultary-section { padding-inline: 24px; }
  .project-hero { min-height: auto; padding-top: 18px; padding-bottom: 46px; }
  .project-hero-topline span:last-child { display: none; }
  .project-hero-mark { padding-block: 76px 64px; }
  .project-hero-mark .wordmark { font-size: clamp(72px, 19vw, 120px); }
  .project-kicker { font-size: 12px; }
  .project-hero-statement { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .project-deck { font-size: 34px; }
  .project-summary { justify-self: start; }
  .project-actions { align-items: stretch; flex-direction: column; }
  .project-button { justify-content: space-between; }
  .project-principle { grid-template-columns: 1fr; gap: 24px; padding-top: 52px; padding-bottom: 60px; }
  .project-principle h2,
  .resultary-message h2 { font-size: 39px; }
  .section-heading-row { grid-template-columns: 1fr; gap: 16px; }
  .architecture-section { padding-top: 34px; padding-bottom: 60px; }
  .architecture-grid { grid-template-columns: 1fr; }
  .architecture-card { grid-template-rows: 54vw auto; }
  .architecture-card-copy { padding: 22px; }
  .evolution-section { grid-template-columns: 1fr; gap: 40px; padding: 58px 24px 64px; }
  .evolution-heading h2 { font-size: 48px; }
  .resultary-section { min-height: 600px; justify-content: flex-end; padding-top: 240px; padding-bottom: 68px; }
  .resultary-orbit { width: 280px; height: 280px; left: 50%; top: 14px; transform: translateX(-50%); }
  .resultary-orbit::before { inset: 39px; }
  .resultary-orbit::after { inset: 88px; }
  .resultary-section > .section-index,
  .resultary-message { margin-left: 0; }
  .resultary-message { grid-template-columns: 1fr; gap: 24px; }
  .project-footer { display: flex; }
}

@media (width <= 480px) {
  .project-hero,
  .project-principle,
  .architecture-section,
  .resultary-section { padding-inline: 19px; }
  .project-hero-topline { letter-spacing: 1.2px; font-size: 8px; }
  .project-hero-mark { padding-block: 68px 56px; }
  .project-deck { font-size: 30px; }
  .project-principle h2,
  .resultary-message h2 { font-size: 35px; }
  .architecture-card-copy { grid-template-columns: 1fr; }
  .architecture-card-copy p { margin-top: 2px; }
  .evolution-section { padding-inline: 19px; }
  .evolution-heading h2 { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .architecture-card,
  .architecture-card figure img,
  .project-button { transition: none; }
}