@font-face {
  font-family: Inter;
  src: url('/fonts/inter-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url('/fonts/inter-light-italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}

:root { color-scheme: light; --green: #2e8b57; --gray: #d9d9d9; }
* { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; color: var(--green); font-family: Inter, Arial, sans-serif; font-weight: 400; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; }
button { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 7px; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 16px; padding: 10px 16px; background: white; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.site-header { height: min(10.3125vw, 132px); background: var(--gray); overflow: hidden; }
.header-inner { position: relative; width: min(100%, 1280px); height: 100%; margin-inline: auto; }
.home-link { position: absolute; left: 43.046875%; top: -32.575758%; width: 13.90625%; aspect-ratio: 178 / 231; }
.home-link img { display: block; width: 100%; height: 100%; }
.home-link:focus-visible { outline-offset: -40px; }
.page[hidden] { display: none; }
.artboard { position: relative; container-type: inline-size; width: min(100%, 1280px); aspect-ratio: 1280 / var(--height); margin-inline: auto; }
.placed { position: absolute; left: calc(var(--x) / 1280 * 100%); top: calc(var(--y) / 12.8 * 1cqw); width: calc(var(--w) / 1280 * 100%); margin: 0; font-size: calc(var(--font, 30) / 12.8 * 1cqw); line-height: 1.21; font-weight: 400; }
.placed p { margin: 0 0 1.21em; }
.placed p:last-child { margin-bottom: 0; }
.home-name { font-style: italic; font-weight: 300; white-space: nowrap; }
.home-caption { line-height: 1.21; }
.image-plate { aspect-ratio: var(--w) / var(--h); }
.image-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-button { padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.photography-board .photo-button { top: calc((var(--y) - 534) / 12.8 * 1cqw); }
.photo-button img { transition: opacity 160ms ease; }
.photo-button:hover img { opacity: .87; }
html.image-reveals img { transition: opacity 650ms ease; }
html.image-reveals img:not(.is-visible) { opacity: 0; }
.external-link { color: #333; }
.external-link { text-decoration: underline; text-underline-offset: .12em; }
.about-contact { overflow-wrap: anywhere; }
.about-contact span { display: block; }
.lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 70px 78px; border: 0; background: #101110; color: #fff; }
.lightbox::backdrop { background: #101110; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox figure { width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.lightbox-image { display: block; max-width: 100%; max-height: calc(100% - 42px); min-height: 0; object-fit: contain; }
.lightbox-caption { font-size: 14px; text-align: center; line-height: 1.5; }
.lightbox-counter { color: #bdbfbd; margin-left: 12px; white-space: nowrap; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; color: white; background: transparent; cursor: pointer; font-family: Arial, sans-serif; font-size: 32px; }
.lightbox button:hover { background: #ffffff15; }
.lightbox-close { top: 14px; right: 18px; }
.lightbox-prev { left: 14px; top: calc(50% - 24px); }
.lightbox-next { right: 14px; top: calc(50% - 24px); }
body:has(.lightbox[open]) { overflow: hidden; }

@media (max-width: 700px) {
  .site-header { height: 90px; }
  .home-link { width: 122px; height: 158px; left: calc(50% - 61px); top: -29px; }
  .artboard { aspect-ratio: auto; }
  .home-board { min-height: calc(100svh - 90px); padding: 180px 24px 52px; display: flex; flex-direction: column; align-items: center; }
  .home-board .placed { position: static; width: auto; font-size: 27px; }
  .home-board .home-name { position: absolute; left: 0; top: 66px; width: 100%; text-align: center; font-size: 64px; }
  .home-board .home-caption { width: 252px; margin: 0 auto 58px; font-size: 21px; text-align: center; }
  .home-nav { width: min(100%, 370px); display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; align-items: center; }
  .home-board .nav-about { position: absolute; top: 26px; left: 0; width: 100%; font-size: 20px; text-align: center; }
  .home-nav .nav-branding { grid-column: 2; grid-row: 1; }
  .home-nav .nav-photography { grid-column: 1; grid-row: 2; }
  .home-nav .nav-ui { grid-column: 2; grid-row: 2; }
  .home-nav a { padding-block: 10px; }
  .home-nav .nav-branding, .home-nav .nav-ui { text-align: right; }
  .project-board, .about-board { display: flex; flex-direction: column; padding: 46px 24px 64px; gap: 32px; }
  .project-board .placed, .about-board .placed { position: relative; inset: auto; width: 100%; font-size: 19px; line-height: 1.4; }
  .project-board h1.placed, .about-board h1.placed { font-size: clamp(38px, 8.5vw, 56px); line-height: 1.15; text-align: center; margin-bottom: 4px; }
  .project-board .body-copy, .about-board .body-copy { max-width: 480px; margin-inline: auto; }
  .project-board .image-plate { width: min(100%, calc(var(--w) * .72px)); margin-inline: auto; font-size: 0; }
  .branding-board .section-copy { max-width: 270px; margin: 28px auto 0; }
  .branding-board .image-plate { margin-block: -12px; }
  .identity-board { gap: 0; }
  .identity-board .body-copy { margin-block: 32px 10px; }
  .identity-board .image-plate { width: min(100%, 460px); }
  .ui-board .section-copy { max-width: 300px; margin-inline: auto; }
  .ui-board .external-link { margin-top: 30px; font-size: 16px; text-align: center; }
  .ui-board .image-plate { width: 100%; }
  .about-board { min-height: calc(100svh - 90px); gap: 34px; }
  .about-board .about-instagram { font-size: 26px; }
  .about-board .about-instagram { margin-top: -16px; }
  .about-board .about-contact { font-size: 24px; }
  .photography-board { aspect-ratio: auto; height: calc(92px + 500.35vw); }
  .photography-board .photo-button { left: calc((var(--x) - 200) / 880 * 100%); top: calc(32px + (var(--y) - 591) / 8.8 * 1cqw); width: calc(var(--w) / 880 * 100%); }
  .lightbox { padding: 70px 12px 90px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 18px; }
  .lightbox-prev { left: calc(50% - 66px); }
  .lightbox-next { right: calc(50% - 66px); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }