* { box-sizing: border-box; }

:root {
  color-scheme: light;
  font-family: "Inter", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15.84px;
  --ink: rgba(0, 0, 0, .85);
  --body-ink: rgba(0, 0, 0, .75);
  --muted: rgba(0, 0, 0, .6);
  --page-gutter: 2rem;
  --header-space: min(36vh, 25rem);
}

html { min-width: 320px; background: #fff; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--body-ink); font-family: "Inter", Arial, sans-serif; font-size: 1rem; font-weight: 300; line-height: 1.3; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .68; }
a:focus-visible { outline: 2px solid #111; outline-offset: 4px; }

.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .65rem .85rem; transform: translateY(-150%); background: #fff; color: #111; border: 1px solid #111; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 30; top: 0; left: 0; width: 100%; height: var(--header-space); padding: 1.98rem 3rem 2rem 2rem; background: transparent; pointer-events: none; }
.wordmark { display: grid; grid-template-columns: 7.16fr 5fr; column-gap: 2rem; align-items: start; width: 100%; }
.wordmark h1 { position: relative; top: -.3rem; margin: 0; font-family: "Inter", Arial, sans-serif; font-size: 8.415rem; font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--ink); }
.wordmark a { display: inline-block; color: inherit; pointer-events: auto; }
.wordmark-left a { margin-left: -.065em; }
.wordmark-left .wordmark-last-letter { display: inline; }
.wordmark-right { text-align: right; }

.site-footer { position: fixed; z-index: 30; right: 2rem; bottom: 1.6rem; left: 2rem; color: var(--body-ink); font-size: 1.2rem; font-weight: 300; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.site-footer nav { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0; width: fit-content; pointer-events: auto; }
.site-footer a { white-space: nowrap; }
.site-footer span { white-space: pre; }

.home-main { padding-top: var(--header-space); padding-bottom: 1100px; }
.home-gallery { position: relative; width: calc(100% - 4rem); margin: 2rem; container-type: inline-size; }
.home-project { position: absolute; display: block; margin: 0; padding: 0; }
.home-project img { display: block; width: 100%; height: auto; object-fit: cover; }
.home-project figcaption { display: block; margin-top: .5em; color: var(--muted); font-size: 1rem; font-weight: 300; line-height: 1.3; letter-spacing: .05em; }

.chronology-main { padding: calc(var(--header-space) + 2rem) 2rem 1100px; }
.chronology-gallery { display: flex; flex-direction: column; gap: 4rem; width: 100%; margin: 0; padding: 0; }
.chronology-row { display: flex; align-items: flex-start; gap: .8cqw; width: 100%; margin: 0; padding: 0; list-style: none; container-type: inline-size; }
.chronology-item { flex: 0 0 auto; min-width: 0; margin: 0; padding: 0; }
.chronology-item figure { margin: 0; }
.chronology-item img { display: block; width: 100%; height: auto; }
.chronology-item figcaption { margin-top: .5em; color: var(--muted); font-size: 1rem; font-weight: 300; line-height: 1.3; letter-spacing: .05em; }

.information-main { min-height: 100vh; padding: calc(var(--header-space) + 2rem) 2rem 1100px; }
.information-portrait { width: 10.4%; max-width: 7.6rem; margin: 0 0 0 13%; }
.information-portrait img { display: block; width: 100%; height: auto; }
.information-copy { width: 74%; max-width: 55.9rem; margin: 3.1rem 0 0 13%; color: var(--body-ink); font-size: 1.2rem; font-weight: 300; line-height: 1.3; letter-spacing: .1em; }
.information-copy p { margin: 0; }
.studio-biography { margin-top: 2rem !important; }

.enquire-main { min-height: 100vh; padding: calc(var(--header-space) + 2rem) 2rem 1100px; }
.enquire-inner { width: min(100%, 42rem); margin: 0 auto; }
.enquire-title { margin: 0 0 1rem; color: var(--ink); font-size: 1.25rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.enquire-intro { margin: 0 0 1.5rem; font-size: 1rem; }
.contact-required-note { margin: 0 0 1rem; color: var(--muted); font-size: .85rem; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem 2rem; }
.contact-field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; color: var(--body-ink); font-size: .95rem; letter-spacing: .04em; }
.contact-field--full { grid-column: 1 / -1; }
.contact-field input { width: 100%; min-height: 2.6rem; padding: .55rem 0; border: 0; border-bottom: 1px solid rgba(0, 0, 0, .42); border-radius: 0; background: transparent; color: var(--ink); font: inherit; letter-spacing: normal; }
.contact-field input:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.contact-submit { margin-top: .35rem; padding: .7rem 1rem; border: 1px solid var(--body-ink); border-radius: 0; background: #fff; color: var(--body-ink); font: inherit; font-size: .85rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.contact-submit:hover { background: #111; color: #fff; }
.contact-submit:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.contact-disclosure { max-width: 42rem; margin: 1.1rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }

@media (max-width: 700px) {
  :root { font-size: 15px; --page-gutter: 1rem; --header-space: 10rem; }
  .site-header { height: var(--header-space); padding: 1.25rem 1rem; }
  .wordmark { display: flex; align-items: baseline; gap: .25em; white-space: nowrap; }
  .wordmark h1 { top: 0; font-size: 2.55rem; line-height: 1; }
  .wordmark-left a { margin-left: 0; white-space: nowrap; }
  .wordmark-left .wordmark-last-letter { display: inline; }
  .wordmark-right { text-align: left; }
  .site-footer { right: 1rem; bottom: 1rem; left: 1rem; font-size: .92rem; letter-spacing: .07em; }
  .home-main { padding-bottom: 30rem; }
  .home-gallery { display: flex; flex-direction: column; gap: 2.5rem; width: auto; height: auto; margin: 1rem; aspect-ratio: auto !important; container-type: normal; }
  .home-project { position: relative; top: auto !important; left: auto !important; width: 100% !important; z-index: auto !important; }
  .home-project img { width: 100%; }
  .home-project figcaption, .chronology-item figcaption { font-size: .95rem; }
  .chronology-main { padding: calc(var(--header-space) + 1rem) 1rem 30rem; }
  .chronology-gallery { gap: 2.5rem; }
  .chronology-row { display: flex; flex-direction: column; gap: 2.5rem; }
  .chronology-item { width: 100% !important; flex-basis: 100% !important; }
  .information-main { padding: calc(var(--header-space) + 1rem) 1rem 30rem; }
  .information-portrait { width: 7.6rem; margin-left: 0; }
  .information-copy { width: 100%; margin: 2rem 0 0; font-size: 1.05rem; }
  .enquire-main { padding: calc(var(--header-space) + 1rem) 1rem 30rem; }
  .enquire-inner { width: 100%; }
  .contact-form { grid-template-columns: 1fr; gap: 1.15rem; }
  .contact-field--full { grid-column: auto; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  :root { --header-space: min(38vh, 25rem); }
  .site-header { padding: 1.98rem 3rem 2rem 2rem; background: transparent; border-bottom: 0; }
  .wordmark { grid-template-columns: 1.2fr 1fr; column-gap: 1rem; }
  .wordmark h1 { top: -.3rem; font-size: clamp(4rem, 9vw, 6rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}