:root {
  --paper: #f3f1eb;
  --ink: #151515;
  --muted: #706f6a;
  --line: rgba(21, 21, 21, 0.16);
  --pink: #ef3e6e;
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: "Helvetica Neue", "Arial Nova", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 22px 30px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
}
.wordmark { font-weight: 700; letter-spacing: 0.12em; }
.discipline { margin: 0; color: var(--muted); letter-spacing: 0.055em; }
.header-tools { justify-self: end; display: flex; align-items: center; gap: 14px; }
.language-toggle { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.language-toggle__button { appearance: none; border: 0; padding: 4px 1px; background: transparent; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; }
.language-toggle__button:hover, .language-toggle__button:focus-visible, .language-toggle__button.is-active { color: var(--ink); }
.language-toggle__button.is-active { font-weight: 700; }
.language-toggle__button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.intro { padding: clamp(84px, 14vw, 188px) 8vw clamp(64px, 9vw, 128px); max-width: 1160px; }
.eyebrow, .project-number { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 20px; }
.intro h1 { font-family: var(--serif); font-size: clamp(38px, 5.9vw, 86px); line-height: .96; letter-spacing: -.065em; font-weight: 400; margin: 0; max-width: 1000px; }
.intro-note { font-size: clamp(17px, 1.7vw, 24px); margin: 42px 0 0; color: var(--muted); }

.projects { padding: 0 30px; overflow: hidden; }
.project { max-width: 1440px; margin: 0 auto; }
.image-link { display: block; position: relative; overflow: hidden; background: #ddd; }
.image-link img { transition: transform .8s cubic-bezier(.2,.75,.2,1); }
.image-link:hover img { transform: scale(1.035); }
.image-link--wide { aspect-ratio: 1.45 / 1; }
.image-link--portrait { aspect-ratio: .91 / 1; }
.image-link--landscape { aspect-ratio: 1.45 / 1; }
.image-link--meerleben { aspect-ratio: 3500 / 2433; }
.image-link--meerleben-cover { aspect-ratio: 16 / 9; }
.image-link--neoergoxeiro { background: #fcf6f0; }
.image-link--uoc { aspect-ratio: 16 / 9; background: #ae242a; }
.image-link--uoc-detail { aspect-ratio: 16 / 9; background: #fff; }
.neoergoxeiro-grid { display: grid; grid-template-columns: 1.14fr .93fr .93fr; gap: clamp(7px, 1.2vw, 18px); padding: clamp(9px, 1.8vw, 26px); }
.neoergoxeiro-grid img { aspect-ratio: 1; object-fit: cover; }
.view-label { position: absolute; right: 16px; bottom: 16px; background: var(--paper); padding: 9px 11px 8px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: translateY(9px); transition: opacity .25s ease, transform .25s ease; }
.image-link:hover .view-label, .image-link:focus .view-label { opacity: 1; transform: translateY(0); }
.project-caption { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 0 clamp(95px, 12vw, 180px); }
.project-caption h2 { font-family: var(--serif); font-size: clamp(31px, 4vw, 61px); letter-spacing: -.055em; font-weight: 400; line-height: .95; margin: 0; }
.project-caption .project-number { margin-bottom: 10px; }
.project-caption > p { margin: 2px 0 0; width: 210px; font-size: 12px; line-height: 1.35; }

.project--offset {
  display: grid;
  grid-template-columns: minmax(220px, .52fr) minmax(270px, .76fr);
  gap: clamp(35px, 11vw, 180px);
  align-items: end;
  width: 83%;
  margin-bottom: clamp(95px, 12vw, 180px);
  margin-left: 8%;
}
.project-copy { font-size: clamp(21px, 2.25vw, 34px); line-height: 1.12; letter-spacing: -.045em; padding-bottom: 5%; }
.project-copy p { margin: 0 0 28px; }
.project-copy .project-number { font-family: var(--sans); font-size: 10px; letter-spacing: .12em; }
.project-copy .quiet { color: var(--muted); font-size: clamp(14px, 1.25vw, 18px); line-height: 1.25; letter-spacing: -.015em; }

.project--rhino .image-link { background: #d96f2a; }
.project--rhino-detail {
  display: grid;
  grid-template-columns: .52fr minmax(0, 1fr);
  gap: clamp(40px, 9vw, 135px);
  align-items: center;
  width: 92%;
  margin: 0 auto clamp(95px, 12vw, 180px);
}
.project-copy--right { padding: 0; }

.contact { margin: clamp(78px, 8vw, 138px) 30px 0; padding: 0 0 1px; }
.contact-title { max-width: 900px; margin: 0 0 clamp(100px, 15vw, 210px); font-family: var(--serif); font-size: clamp(88px, 13.5vw, 220px); font-weight: 400; letter-spacing: -.075em; line-height: .72; }
.contact .eyebrow { margin: 0 0 clamp(32px, 5vw, 68px); }
.contact-rows { border-top: 1px solid var(--line); }
.contact-row { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; padding: clamp(22px, 2.6vw, 38px) 0; border-bottom: 1px solid var(--line); }
.contact-row span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.contact-row strong { font-size: clamp(21px, 2.15vw, 34px); font-weight: 400; letter-spacing: -.045em; text-align: right; }
.contact-row i, .about-contact__row i { font-style: normal; font-size: .78em; margin-left: .22em; }
.contact-row:hover strong { color: var(--pink); }
footer { display: flex; justify-content: space-between; padding: 18px 30px 22px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
footer p { margin: 0; }
footer a { border-bottom: 1px solid transparent; } footer a:hover { border-color: currentColor; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.65,.2,1), transform .8s cubic-bezier(.2,.65,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } }
@media (max-width: 680px) {
  .site-header { grid-template-columns: 1fr auto; padding: 17px 17px; gap: 14px; }
  .discipline { display: none; }
  .header-tools { gap: 9px; }
  .language-toggle { font-size: 9px; }
  .intro { padding: 74px 24px 70px; }
  .projects { padding: 0 17px; }
  .image-link--wide { aspect-ratio: 1.45 / 1; }
  .image-link--neoergoxeiro { aspect-ratio: auto; }
  .neoergoxeiro-grid { grid-template-columns: 1.05fr .95fr; }
  .neoergoxeiro-grid img:last-child { display: none; }
  .project-caption { padding-bottom: 88px; gap: 20px; }
  .project-caption > p { width: 130px; font-size: 10px; }
  .project--offset, .project--rhino-detail { display: flex; flex-direction: column; width: 100%; margin-left: 0; gap: 28px; }
  .project--offset { margin-bottom: 88px; }
  .project--rhino-detail { margin-bottom: 88px; }
  .project-copy { width: 86%; align-self: flex-end; padding: 0; }
  .project--offset .image-link { width: 90%; }
  .project--offset .project-copy { align-self: flex-start; }
  .project--offset .image-link { align-self: flex-end; }
  .project-copy--right { width: 86%; align-self: flex-start; }
  .project--rhino-detail .image-link { width: 100%; }
  .contact { margin: 100px 17px 0; }
  .contact-title { margin-bottom: 86px; font-size: clamp(76px, 23vw, 125px); }
  .contact-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .contact-row strong { text-align: left; }
  footer { padding: 16px 17px 20px; }
}