:root { color-scheme: light; --paper: #eee; --ink: #171715; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Hanken Grotesk', Arial, sans-serif; font-weight: 200; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
p, h1, figure { margin: 0; }
h1 { font-weight: 200; }
.content-width { width: calc(100% - 64px); max-width: 1472px; margin-inline: auto; }
.skip-link { position: fixed; top: 12px; left: 20px; z-index: 10; padding: 12px; background: var(--paper); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: absolute; inset: 0 0 auto; z-index: 2; padding: 34px 5%; }
.site-header nav { display: flex; justify-content: space-between; max-width: 1440px; margin: auto; }
.site-header a { font-size: 18px; text-transform: uppercase; text-decoration: none; padding-block: 10px; }
.site-header a:hover { text-decoration: underline; }
.hero { min-height: 650px; height: min(890px, 94svh); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 20px 32px; gap: 22px; }
.hero-mark { width: clamp(320px, 40.2vw, 580px); }
.wordmark { position: relative; overflow: hidden; width: clamp(310px, 39.55vw, 570px); aspect-ratio: 6.68; }
.wordmark img { position: absolute; width: 100%; max-width: none; height: auto; top: -64.57%; }
.introduction { padding-block: 86px 112px; text-align: center; }
.introduction h1 { font-size: clamp(28px, 3.45vw, 53px); line-height: 1.3; text-transform: uppercase; }
.studio { display: grid; grid-template-columns: 43% 1fr; gap: 30px; align-items: stretch; }
.spur-photo { position: relative; overflow: hidden; aspect-ratio: .778; }
.spur-photo > img { width: 100%; height: 100%; object-fit: cover; }
.spur-photo figcaption { position: absolute; bottom: 5.6%; left: 0; right: 0; text-align: center; color: white; font-family: 'Bodoni Moda', Georgia, serif; font-size: clamp(34px, 5.3vw, 81px); white-space: nowrap; line-height: 1; }
.display-copy { font-size: clamp(27px, 3.12vw, 48px); line-height: 1.35; text-transform: uppercase; }
.studio-copy { display: flex; flex-direction: column; justify-content: space-between; padding-block: 12px 20px; }
.approach { display: grid; grid-template-columns: 56% 1fr; gap: 28px; padding-top: 108px; }
.approach-copy { display: flex; flex-direction: column; justify-content: space-between; padding-block: 8px 16px; }
.quiet-link { text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: .22em; text-decoration-color: transparent; transition: text-decoration-color .2s ease; }
.quiet-link:hover, .quiet-link:focus-visible { text-decoration-color: #777; }
.portrait-composite { position: relative; aspect-ratio: 1122 / 1402; }
.portrait-background { width: 100%; height: 100%; }
.portrait-cutout { position: absolute; width: 84.964%; right: 2%; bottom: 2.1%; }
.contact { padding-block: 140px 160px; text-align: center; text-transform: uppercase; font-size: clamp(23px, 2.2vw, 34px); line-height: 1.55; }
.contact a { color: #5b7775; text-decoration-color: #9aadaa; }
.contact a:hover { color: var(--ink); }
.about-page { min-height: 100svh; }
.about-main { padding-top: 120px; display: grid; grid-template-columns: 36% 1fr; column-gap: 30px; }
.about-visual { display: contents; }
.about-portrait { position: relative; aspect-ratio: 1122 / 1402; grid-column: 1; grid-row: 1; }
.about-texture { width: 100%; }
.about-photo { position: absolute; width: 92.21%; top: 3.9%; left: 3.9%; }
.signature { position: relative; width: 104%; height: auto; aspect-ratio: 3.4; margin-top: -3.5%; margin-left: 36%; z-index: 1; grid-column: 1; grid-row: 2; }
.signature img { position: absolute; width: 100%; top: -45%; }
.about-copy { font-size: clamp(22px, 2.2vw, 34px); line-height: 1.4; padding-top: 3px; grid-column: 2; grid-row: 1; }
.about-copy h1 { font-size: .95em; text-transform: uppercase; margin-bottom: 26px; }
.about-copy p + p { margin-top: 26px; }
.about-footer { display: flex; justify-content: flex-end; padding-block: 10px 24px; }
.about-footer a { display: block; width: 94px; }
@media (min-width: 1600px) { .hero { height: 900px; } }
@media (max-width: 900px) and (min-width: 701px) {
  .display-copy { font-size: 26px; }
  .studio, .approach { gap: 22px; }
  .about-main { grid-template-columns: 37% 1fr; gap: 24px; }
  .about-copy { font-size: 23px; }
}
@media (max-width: 700px) {
  .content-width { width: calc(100% - 40px); }
  .site-header { padding: 17px 24px; }
  .site-header a { font-size: 15px; }
  .hero { min-height: 470px; height: 78svh; max-height: 680px; padding-top: 65px; gap: 25px; }
  .hero-mark { width: min(89vw, 400px); }
  .wordmark { width: min(84vw, 375px); }
  .introduction { padding-block: 44px 72px; }
  .introduction h1 { font-size: clamp(25px, 6.3vw, 38px); line-height: 1.35; }
  .desktop-break { display: none; }
  .studio, .approach { display: flex; flex-direction: column; gap: 30px; }
  .spur-photo { width: 100%; }
  .spur-photo figcaption { font-size: 11.2vw; }
  .display-copy { font-size: clamp(25px, 6.5vw, 38px); line-height: 1.35; }
  .studio-copy { gap: 32px; padding: 0; }
  .approach { padding-top: 76px; gap: 32px; }
  .approach-copy { display: contents; }
  .approach-copy > p:first-child { order: 0; }
  .portrait-composite { order: 1; }
  .approach-copy > p:last-child { order: 2; }
  .contact { padding-block: 90px 85px; font-size: 22px; }
  .about-main { display: flex; flex-direction: column; padding-top: 95px; gap: 36px; }
  .about-visual { display: block; width: 100%; }
  .signature { width: 88%; margin-left: 12%; margin-top: -3%; }
  .about-copy { font-size: 24px; line-height: 1.45; }
  .about-copy h1 { margin-bottom: 24px; }
  .about-copy p + p { margin-top: 24px; }
  .about-footer { padding-block: 42px 20px; }
  .about-footer a { width: 65px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Refined desktop composition and mobile reading order from the revised mockups. */
.mobile-copy { display: none; }
.studio { grid-template-rows: 48% 1fr; column-gap: 30px; row-gap: 0; }
.studio .spur-photo { grid-column: 1; grid-row: 1 / 3; }
.studio-heading { grid-column: 2; grid-row: 1; padding-top: 12px; }
.studio-detail { grid-column: 2; grid-row: 2; padding-top: 12px; }
.closing-mark { display: block; width: clamp(76px, 9.06vw, 140px); margin: 120px auto 0; }
@media (min-width: 701px) {
  .hero-mark { width: clamp(280px, 35.34vw, 510px); }
  .hero { gap: 12px; }
  .introduction h1 { font-size: clamp(27px, 2.855vw, 44px); }
  .approach-copy { display: grid; grid-template-rows: 58% 1fr; align-content: start; }
  .contact { padding-bottom: 55px; }
}
@media (max-width: 700px) {
  body:not(.about-page) .site-header nav { flex-direction: column; align-items: flex-end; }
  body:not(.about-page) .site-header a { padding-block: 4px; }
  .studio { gap: 26px; text-align: center; }
  .studio-heading, .studio-detail { padding: 0; }
  .studio .spur-photo { width: 86%; margin-inline: auto; }
  .spur-photo figcaption { font-size: 9.6vw; }
  .desktop-copy { display: none; }
  .mobile-copy { display: inline; }
  .approach { text-align: center; }
  .portrait-composite { width: 86%; margin-inline: auto; }
  .closing-mark { width: 76px; margin-top: 72px; }
  .contact { padding-bottom: 48px; }
}

/* Desktop scale refinement: consistent copy, smaller artwork, persistent navigation. */
.wordmark { aspect-ratio: auto; overflow: visible; }
.wordmark img { position: static; width: 100%; height: auto; }
@media (min-width: 701px) {
  :root { --desktop-copy-size: clamp(18px, 2.1vw, 30px); }
  .site-header { position: fixed; padding: 18px 5%; background: rgba(238,238,238,.96); }
  .site-header a { font-size: 16px; }
  .hero { min-height: 530px; height: min(720px, 82svh); gap: 0; padding-top: 82px; padding-bottom: 26px; }
  .hero-mark { width: clamp(250px, 25vw, 360px); }
  .wordmark { width: clamp(260px, 27vw, 390px); }
  .introduction { max-width: 1180px; padding-block: 54px 100px; }
  .introduction h1, .display-copy, .contact { font-size: var(--desktop-copy-size); line-height: 1.4; font-weight: 200; }
  .intro-line { display: block; white-space: nowrap; }
  .studio, .approach { width: 78%; max-width: 1080px; }
  .studio { grid-template-columns: 40% 1fr; column-gap: 52px; }
  .studio-heading, .studio-detail { padding-top: 6px; }
  .spur-photo figcaption { font-size: clamp(30px, 3.5vw, 51px); }
  .approach { grid-template-columns: 1fr 40%; gap: 52px; padding-top: 100px; }
  .approach-copy { padding-top: 6px; }
  .contact { padding-top: 110px; }
  .closing-mark { width: 82px; margin-top: 95px; }
  html { scroll-padding-top: 80px; }
}

/* Desktop review: larger opening mark and type, same photo columns. */
@media (min-width: 701px) {
  :root { --desktop-copy-size: clamp(21.6px, 2.52vw, 36px); }
  .site-header a { font-size: 19.2px; }
  .hero { min-height: 840px; height: min(900px, 94svh); }
  .hero-mark { width: clamp(375px, 37.5vw, 540px); flex-shrink: 0; }
  .wordmark { width: clamp(312px, 32.4vw, 468px); flex-shrink: 0; }
  .spur-photo figcaption { font-size: clamp(36px, 4.2vw, 61.2px); }
  .about-copy { font-size: clamp(26.4px, 2.64vw, 40.8px); }
  .closing-mark { margin-top: 190px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .about-copy { font-size: 27.6px; }
  .intro-line { white-space: normal; }
}
@media (min-width: 701px) {
  .signature { margin-top: 18px; }
}

/* Keep the opening lockup in view and align copy to the image composition. */
@media (min-width: 701px) {
  .hero { min-height: 0; height: min(900px, 100svh); padding: 82px 20px 26px; }
  .hero-mark { width: min(37.5vw, 540px, calc((100svh - 140px) * .72)); }
  .wordmark { width: min(32.4vw, 468px, calc((100svh - 140px) * .624)); }
  .introduction, .studio, .approach, .contact { width: 78%; max-width: 1080px; container-type: inline-size; }
  .introduction h1, .display-copy { font-size: min(32.4px, 3cqw); }
  .intro-line { white-space: nowrap; }
  .contact p { font-size: min(32.4px, 2.8cqw); white-space: nowrap; }
  .contact p br { display: none; }
}

/* About: align with navigation and keep the biography within the portrait height. */
@media (min-width: 701px) {
  .about-main { width: 90%; max-width: 1440px; grid-template-columns: 36% 1fr; column-gap: 36px; }
  .about-copy { font-size: clamp(18px, 1.9vw, 28px); line-height: 1.4; }
  .about-copy h1 { font-size: 1.15em; margin-bottom: 24px; }
  .about-copy p + p { margin-top: 22px; }
}
@media (min-width: 701px) {
  .signature { margin-top: -6%; }
}


.mobile-break { display: none; }
@media (max-width: 700px) {
  body:not(.about-page) .site-header nav { flex-direction: row; align-items: center; justify-content: space-between; }
  .introduction h1, .display-copy, .contact { font-size: 4.8vw; line-height: 1.4; }
  .mobile-break { display: initial; }
}
@media (max-width: 700px) {
  .site-header { position: fixed; background: rgba(238,238,238,.96); }
  .about-footer a { width: 76px; }
  html { scroll-padding-top: 72px; }
}

/* Shared footer treatment matched to the supplied gray reference. */
.closing-mark img, .about-footer img { opacity: .58; }
.about-footer { justify-content: center; }

@media (max-width: 700px) {
  .contact { width: calc(100% - 20px); }
  .contact-email-line { white-space: nowrap; }
}

.link-arrow { display: inline-block; font-size: 1em; transform: scaleY(1.15); margin-left: .2em; }
.about-footer { padding-top: 100px; }
@media (max-width: 700px) { .about-footer { padding-top: 85px; } }

/* Quiet contact icons after the biography. */
.about-socials { display: flex; align-items: center; gap: 4px; margin: 18px 0 0 -10.5px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #888; text-decoration: none; transition: color .2s ease; }
.social-link svg { display: block; }
.social-link:hover, .social-link:focus-visible { color: #333; }
.social-link:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

/* Restrained navigation and link refinements. */
.site-header nav a { letter-spacing: .07em; }
.link-arrow { transition: transform .2s ease; }
.quiet-link:hover .link-arrow, .quiet-link:focus-visible .link-arrow { transform: translateX(3px) scaleY(1.15); }
@media (prefers-reduced-motion: reduce) { .link-arrow { transition: none; } .quiet-link:hover .link-arrow, .quiet-link:focus-visible .link-arrow { transform: scaleY(1.15); } }