@font-face { font-family: 'Timeless Serif'; src: local('Timeless Serif Regular'), url('TimelessSerif-Regular.otf') format('opentype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Timeless Sans Grotesk'; src: local('Timeless Sans Grotesk Regular'), url('TimelessSans-GroteskRegular.otf') format('opentype'); font-style: normal; font-weight: 400; font-display: swap; }
:root { --paper: #e9e5dd; --ink: #292721; --serif: 'Timeless Serif', Georgia, serif; --sans: 'Timeless Sans Grotesk', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); }
.project-header { display: flex; align-items: start; justify-content: space-between; gap: 30px; padding: clamp(25px,3.5vw,52px) clamp(23px,5vw,80px) clamp(28px,4vw,58px); }
.project-brand { color: inherit; text-decoration: none; }
.project-brand-name { display: block; font: 400 clamp(27px,2.4vw,36px)/.86 var(--serif); letter-spacing: -.03em; }
.project-brand-sub { display: block; margin-top: 11px; font: 400 10px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.project-back { margin-top: 2px; color: inherit; font: 400 12px/1.5 var(--sans); letter-spacing: .14em; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 7px; }
.project-back:hover { opacity: .65; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.project-main { padding: 0 clamp(23px,5vw,80px) clamp(66px,8vw,120px); }
.project-image { display: block; width: 100%; height: min(68vw,73vh); min-height: 440px; object-fit: cover; background: #d5cfc4; box-shadow: 0 13px 30px rgba(42,36,26,.09), 0 35px 70px rgba(42,36,26,.13); }
.project-details { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-top: clamp(30px,4vw,60px); }
.project-title { max-width: 950px; margin: 0; font: 400 clamp(58px,7vw,118px)/.94 var(--serif); letter-spacing: -.045em; }
.project-meta { margin: 0 0 8px; color: #6c665d; font: 400 12px/1.7 var(--sans); letter-spacing: .14em; text-align: right; text-transform: uppercase; white-space: nowrap; }
.project-end { display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(110px,15vw,240px); padding-top: 19px; border-top: 1px solid rgba(41,39,33,.3); color: #716a60; font-size: 12px; }
.project-end p { margin: 0; }
.project-end a { color: inherit; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .project-header { padding: 27px 23px 34px; }
  .project-brand-name { font-size: 26px; }
  .project-brand-sub { margin-top: 8px; font-size: 9px; }
  .project-back { font-size: 10px; white-space: nowrap; }
  .project-main { padding: 0 23px 55px; }
  .project-image { height: 62vh; min-height: 380px; }
  .project-details { display: block; padding-top: 29px; }
  .project-title { font-size: clamp(52px,14vw,75px); }
  .project-meta { margin-top: 20px; text-align: left; }
  .project-end { display: block; margin-top: 130px; }
  .project-end p + p { margin-top: 8px; }
}