@font-face {
  font-family: "Crete Round";
  src: url("/fonts/site-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Crete Round";
  src: url("/fonts/site-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  color: #444;
  background: #fff;
  font-family: "Crete Round", Georgia, serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 280px; background: #fff; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-content { width: 80%; margin-right: 10%; margin-left: 10%; }

/* Site header */
.site-header { width: 100%; background: #fff; }
.site-header__inner { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 70px; }
.site-logo { display: block; width: 120px; }
.site-logo img { width: 100%; height: auto; }
.site-tagline { margin: 0; padding-top: 20px; color: #bbb; font-size: 18px; font-style: italic; line-height: 20px; }
.desktop-navigation { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 0 70px; }
.primary-nav { display: flex; gap: 28px; align-items: center; }
.primary-nav a { color: #bbb; font-size: 20px; line-height: 40px; transition: color 160ms ease; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: #444; }
.social-links { display: flex; align-items: center; justify-content: center; gap: 15px; color: #bbb; }
.social-links a { display: grid; width: 30px; height: 30px; place-items: center; transition: color 160ms ease; }
.social-links a:hover { color: #444; }
.social-links span, .social-links svg { display: block; width: 30px; height: 24px; fill: currentColor; }
.social-links--home span, .social-links--home svg { width: 25px; height: 20px; }
.menu-button, .mobile-menu { display: none; }

/* Home */
.home-body main { min-height: 100vh; }
.home-page { display: flex; min-height: 100vh; }
.home-art { position: fixed; inset: 0 auto 0 0; width: 50%; background: #e8e7e5 url("/images/home-background.png") center / cover no-repeat; }
.home-intro { display: flex; width: 50%; min-height: calc(100vh - 100px); margin: 50px 0 50px 50%; padding: 40px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.home-mark { width: 16%; max-width: 112px; height: auto; margin-bottom: 24px; }
.home-intro h1 { margin: 0; color: #333; font-size: 35px; font-weight: 400; line-height: 42px; }
.home-intro p { margin: 9px 0 28px; color: #888; font-size: 20px; font-style: italic; line-height: 28px; }
.home-button, .project-button { display: inline-flex; min-height: 40px; padding: 0 30px; align-items: center; justify-content: center; border-radius: 100px; background: #222; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 700; line-height: 40px; transition: background-color 160ms ease; }
.home-button:hover, .project-button:hover { background: rgba(34, 34, 34, .75); }
.social-links--home { margin-top: 25px; color: #b8b3b3; }
.social-links--home a { width: 25px; height: 25px; }

/* Portfolio and blog cards */
.portfolio-grid { display: flex; flex-wrap: wrap; }
.project-card { width: 31.333333%; margin-right: 3%; text-align: center; }
.project-card:nth-child(3n) { margin-right: 0; }
.project-card > a, .project-card__image, .project-card__details { display: block; }
.project-card__image { position: relative; aspect-ratio: 1.2785; overflow: hidden; background: #f3f3f3; }
.project-card__image img { width: 100%; height: 100%; object-fit: cover; }
.project-card__hover { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 180ms ease; }
.project-card a:hover .project-card__hover { opacity: .15; }
.project-card__details { padding-top: 8%; padding-bottom: 16.5%; }
.project-card h2 { width: 90%; margin: 0 auto; padding-bottom: 10px; color: #444; font-size: 24px; font-weight: 400; line-height: 28px; }
.project-card__year { display: block; color: #bbb; font-size: 12px; line-height: 18px; }

/* Project pages */
.project-page { width: 72%; max-width: 1260px; margin: 0 auto; }
.project-heading { max-width: 800px; margin: 0 auto; padding: 60px 0; text-align: center; }
.project-heading h1 { margin: 0; color: #444; font-size: 60px; font-weight: 400; line-height: 70px; }
.project-heading p { margin: 12px 0 0; color: #888; font-size: 20px; font-weight: 400; line-height: 28px; }
.project-modules { width: 100%; }
.project-text { max-width: 800px; margin: 0 auto; padding: 10px 0 25px; color: #888; font-size: 20px; font-weight: 400; line-height: 28px; text-align: center; }
.project-text a, .about-copy a { text-decoration: underline; text-underline-offset: 2px; }
.project-text p { margin: 0 0 28px; }
.project-image { width: 100%; padding-bottom: 40px; }
.project-image a, .project-image img { display: block; width: 100%; height: auto; }
.project-gallery { display: flex; width: 100%; padding-bottom: 40px; flex-wrap: wrap; gap: 8px; overflow: hidden; }
.project-gallery > a { position: relative; aspect-ratio: var(--aspect); flex-basis: calc(var(--aspect) * 175px); flex-grow: var(--aspect); overflow: hidden; background: #f3f3f3; }
.project-gallery img { width: 100%; height: 100%; object-fit: cover; }
.project-gallery__spacer { height: 0; flex-grow: 900000000; }
.project-image a, .project-gallery > a { transition: opacity 160ms ease; }
.project-image a:hover, .project-gallery > a:hover { opacity: .88; }
.project-button-wrap { padding: 5px 0 30px; text-align: center; }
.project-button { border: 0; }
.back-to-top { display: block; padding: 60px 0; color: #bbb; font-size: 18px; line-height: 18px; text-align: center; }
.back-to-top:hover { color: #444; }

/* About */
.about-page { padding-top: 0; }
.about-copy { max-width: 700px; margin: 0 auto; color: #888; font-size: 20px; line-height: 28px; }
.about-copy p { margin: 0 0 28px; }
.about-copy strong { color: #444; font-weight: 400; }
.about-portrait { width: 38%; height: auto; margin: 0 auto 20px; }

/* Blog */
.blog-post .project-text { max-width: 500px; text-align: left; }

/* Footer */
.site-footer { padding: 60px 20px; color: #b8b8b8; font-size: 14px; line-height: 20px; text-align: center; }
.site-footer .social-links { margin-bottom: 30px; }
.site-footer p { margin: 4px 0; }
.aoi-link { display: inline-block; margin-top: 14px; opacity: .65; transition: opacity 160ms ease; }
.aoi-link:hover { opacity: 1; }
.aoi-link img { width: 100px; height: auto; }

/* Lightbox */
.lightbox { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 30px 70px; border: 0; background: rgba(255,255,255,.97); color: #333; }
.lightbox::backdrop { background: rgba(255,255,255,.97); }
.lightbox[open] { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; }
.lightbox figure { display: flex; min-width: 0; height: calc(100vh - 60px); margin: 0; flex-direction: column; align-items: center; justify-content: center; }
.lightbox img { max-width: 100%; max-height: calc(100% - 30px); object-fit: contain; }
.lightbox figcaption { min-height: 20px; padding-top: 8px; color: #888; font-size: 14px; }
.lightbox button { border: 0; background: none; color: #777; font-family: Arial, Helvetica, sans-serif; font-size: 42px; cursor: pointer; }
.lightbox__close { position: absolute; top: 15px; right: 20px; font-size: 34px !important; }

@media (max-width: 980px) {
  .home-page { display: block; }
  .home-art { position: relative; width: 100%; height: 50vh; min-height: 320px; }
  .home-intro { width: 100%; min-height: 50vh; margin: 0; padding: 55px 30px; }
  .home-mark { width: 14%; min-width: 70px; }
}

@media (max-width: 932px) {
  .site-content { width: 100%; margin: 0; padding-right: 5%; padding-left: 5%; }
  .site-header__inner { min-height: 140px; padding: 40px 5%; justify-content: center; }
  .site-logo { width: auto; max-width: 120px; height: 60px; padding-left: 39px; }
  .site-logo img { width: auto; height: 60px; }
  .site-tagline, .desktop-navigation { display: none; }
  .menu-button { position: absolute; top: 50%; right: 5%; display: flex; width: 24px; height: 22px; padding: 0; transform: translateY(-50%); border: 0; background: none; flex-direction: column; justify-content: space-between; cursor: pointer; }
  .menu-button span { width: 24px; height: 2px; background: #333; }
  .mobile-menu { position: fixed; z-index: 50; inset: 0; display: flex; background: #fff; flex-direction: column; align-items: center; justify-content: center; }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu nav { display: flex; flex-direction: column; gap: 30px; text-align: center; }
  .mobile-menu nav a { color: #bbb; font-size: 22px; line-height: 32px; }
  .mobile-menu nav a[aria-current="page"], .mobile-menu nav a:hover { color: #444; }
  .mobile-menu .social-links { position: absolute; bottom: 40px; }
  .menu-close { position: absolute; top: 42px; right: 5%; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
  .menu-close span { position: absolute; top: 11px; left: 0; width: 24px; height: 2px; background: #333; transform: rotate(45deg); }
  .menu-close span:last-child { transform: rotate(-45deg); }
  .project-card { width: 48.5%; margin-right: 3%; }
  .project-card:nth-child(3n) { margin-right: 3%; }
  .project-card:nth-child(2n) { margin-right: 0; }
  .project-card__details { padding-top: 8%; padding-bottom: 8%; }
  .project-card h2 { padding-bottom: 8px; font-size: 18px; line-height: 21px; }
  .project-page { width: 90%; }
  .project-heading { padding: 28px 0; }
  .project-heading h1 { font-size: 36px; line-height: 42px; }
  .project-heading p { font-size: 17px; line-height: 24px; }
  .project-text { padding: 7px 0 14px; font-size: 17px; line-height: 24px; }
  .project-image, .project-gallery { padding-bottom: 20px; }
  .about-copy { font-size: 17px; line-height: 24px; }
  .about-copy p { margin-bottom: 24px; }
  .site-footer { padding-top: 28px; padding-bottom: 28px; }
  .site-footer .social-links { margin-bottom: 24px; }
  .back-to-top { padding: 28px 0; font-size: 14px; line-height: 14px; }
}

@media (max-width: 540px) {
  .site-header__inner { min-height: 120px; padding-top: 30px; padding-bottom: 30px; }
  .menu-close { top: 32px; }
  .portfolio-grid { display: block; }
  .project-card { width: 100%; margin-right: 0 !important; }
  .project-card__details { padding-top: 7%; padding-bottom: 7%; }
  .project-card h2 { padding-bottom: 7px; font-size: 15px; line-height: 18px; }
  .project-heading { padding: 25px 0; }
  .project-heading h1 { font-size: 29px; line-height: 34px; }
  .project-heading p { font-size: 14px; line-height: 20px; }
  .project-text { padding: 7px 0 13px; font-size: 14px; line-height: 20px; }
  .project-text p { margin-bottom: 20px; }
  .project-image { padding-bottom: 18px; }
  .project-gallery { display: block; padding-bottom: 18px; }
  .project-gallery > a { display: block; width: 100%; height: auto; margin-bottom: 8px; }
  .project-gallery img { width: 100%; height: auto; object-fit: contain; }
  .project-gallery__spacer { display: none; }
  .home-art { min-height: 280px; }
  .home-intro { padding: 45px 24px; }
  .home-mark { width: 22%; margin-bottom: 18px; }
  .home-intro h1 { font-size: 29px; line-height: 36px; }
  .home-intro p { margin: 7px 0 23px; font-size: 17px; line-height: 24px; }
  .home-button, .project-button { min-height: 35px; padding: 0 26px; font-size: 14px; line-height: 35px; }
  .about-copy { font-size: 14px; line-height: 20px; }
  .about-copy p { margin-bottom: 20px; }
  .about-portrait { width: 62%; }
  .lightbox { padding: 25px 5px; grid-template-columns: 35px minmax(0, 1fr) 35px !important; }
  .site-footer { padding-top: 25px; padding-bottom: 25px; }
  .site-footer .social-links { margin-bottom: 20px; }
  .back-to-top { padding: 25px 0; font-size: 14px; line-height: 20px; }
}

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