/* One continuous image, sized against the whole document, never each section. */
:root {
  color-scheme: light;
  --ink: #152733;
  --gutter: clamp(24px, 7.5vw, 160px);
  --scene-height: max(266.6667vw, 3000px);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: #e4e9e9;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; position: relative; isolation: isolate; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
p, h1, h2, h3 { margin: 0; overflow-wrap: anywhere; }
h1, h2, h3, .brand-mark, .footer-brand, .email-link {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
}
.landscape { position:absolute; inset:0 0 auto; height:var(--landscape-height,var(--scene-height)); z-index:-2; overflow:hidden; pointer-events:none; }
.landscape picture, .landscape img { display: block; width: 100%; height: 100%; }
.landscape img { object-fit: cover; object-position: 50% center; }
/* A continuous veil keeps live text readable when the image crop changes. */
.landscape::after {
  content: ''; position: absolute; inset: 0;
  mask-image:linear-gradient(180deg,#000 0,#000 var(--reading-end,90%),transparent calc(var(--reading-end,90%) + 140px));
  background: linear-gradient(90deg, rgb(247 249 248 / .42), rgb(247 249 248 / .30) 65%, transparent),
    linear-gradient(180deg, transparent 16%, rgb(247 249 248 / .27) 34%, rgb(247 249 248 / .30) 78%, transparent 94%);
}
.skip-link { position: absolute; top: 12px; left: var(--gutter); z-index: 5; padding: 12px 16px; background: #fff; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.site-header { position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: 30px var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand-mark { font-size: clamp(18px, 1.5vw, 26px); letter-spacing: -.05em; }
nav { display: flex; gap: clamp(20px, 3vw, 48px); font-size: 14px; }
nav a { min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; }
nav a:hover { border-color: currentColor; }
main { min-height: var(--scene-height); display: grid; grid-template-rows: 1.18fr .83fr 1fr .99fr; }
section { padding-inline: var(--gutter); position: relative; min-width: 0; scroll-margin-top: 30px; }
.hero { padding-top: clamp(150px, 12.2vw, 230px); padding-bottom: 150px; }
.eyebrow { font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
h1 { font-size: clamp(66px, 7.8vw, 140px); line-height: .96; letter-spacing: -.065em; }
.hero-line { font-size: clamp(19px, 2vw, 30px); line-height: 1.4; max-width: 27ch; margin-top: 26px; }
.hero-meta { display: flex; gap: 28px; margin-top: 45px; font-size: 12px; letter-spacing: .06em; }
.section-label { display: flex; align-items: baseline; gap: 26px; font-size: 14px; line-height: 1.5; margin-bottom: 38px; }
h2 { font-size: clamp(54px, 7.5vw, 128px); line-height: 1.02; letter-spacing: -.065em; }
.studio, .work { padding-top: 30px; padding-bottom: 80px; }
.studio-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; margin-top: 44px; max-width: 1160px; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.45; }
.vertical-note { font-size: 12px; letter-spacing: .18em; line-height: 1.6; margin-top: 38px; }
.project-list { margin-top: 54px; }
.project { display: grid; grid-template-columns: 5% 29% minmax(0, 1fr) auto; align-items: start; gap: 3%; padding: 30px 0; border-bottom: 1px solid rgb(21 39 51 / .32); }
.project > * { min-width: 0; }
.project:last-child { border-bottom: 0; }
.project-index, .project-type, .project-status { font-size: 14px; line-height: 1.5; }
.project h3 { font-size: clamp(27px, 3.1vw, 48px); line-height: 1.15; letter-spacing: -.05em; margin-top: 3px; }
.project-description { font-size: clamp(16px, 1.5vw, 22px); line-height: 1.5; max-width: 38ch; }
.contact { padding-top: 42px; padding-bottom: 300px; }
.contact-copy > p { font-size: clamp(17px, 1.6vw, 24px); line-height: 1.5; margin: 0 0 18px; }
.email-link { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; max-width: 81%; font-size: clamp(27px, 3.6vw, 58px); letter-spacing: -.055em; line-height: 1.4; border-bottom: 1px solid rgb(21 39 51 / .5); padding-bottom: 4px; margin-top: 36px; }
.email-link:hover { border-bottom-width: 2px; padding-bottom: 3px; }
footer { position:relative; padding:26px var(--gutter) 22px; display:flex; align-items:baseline; justify-content:space-between; gap:20px; color:#fff; background:#132530; font-size:12px; line-height:1.6; }
.footer-brand { font-size: 20px; letter-spacing: -.05em; }
@media (min-width: 1800px) { :root { --scene-height: 266.6667vw; } }
@media (max-width: 700px) {
  :root { --gutter: 24px; --scene-height: max(400svh, 3000px); }
  .landscape img { object-position: 56% center; }
  .landscape::after { background: linear-gradient(90deg, rgb(247 249 248 / .57), rgb(247 249 248 / .44) 72%, rgb(247 249 248 / .20)), linear-gradient(180deg, transparent 12%, rgb(247 249 248 / .25) 28%, rgb(247 249 248 / .30) 79%, transparent 92%); }
  .scene-panned .landscape::after { background:linear-gradient(90deg,rgb(247 249 248 / .64),rgb(247 249 248 / .54) 72%,rgb(247 249 248 / .42)),linear-gradient(180deg,transparent 12%,rgb(247 249 248 / .25) 28%,rgb(247 249 248 / .30) 79%,transparent 92%); }
  .site-header { padding-top: 20px; flex-wrap: wrap; gap: 8px 16px; }
  .brand-mark { font-size: 20px; }
  nav { gap: 20px; }
  main { grid-template-rows: 1fr 1fr 1.15fr 1fr; }
  .hero { padding-top: 155px; padding-bottom: 170px; }
  h1 { font-size: clamp(52px, 11.4vw, 79px); }
  h2 { font-size: clamp(43px, 10.2vw, 70px); }
  .hero-line { font-size: 19px; max-width: 26ch; }
  .hero-meta { flex-wrap: wrap; gap: 16px; font-size: 12px; margin-top: 32px; }
  .studio, .work { padding-top: 34px; padding-bottom: 66px; }
  .section-label { margin-bottom: 28px; gap: 20px; }
  .studio-detail { grid-template-columns: 1fr; gap: 24px; font-size: 18px; margin-top: 32px; }
  .vertical-note { margin-top: 28px; }
  .project-list { margin-top: 30px; }
  .project { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; padding: 25px 0; }
  .project h3 { font-size: 29px; }
  .project-description { grid-column: 2 / -1; grid-row: 2; font-size: 16px; }
  .project-type, .project-status, .project-index { font-size: 12px; }
  .project-status { grid-column: 3; grid-row: 1; }
  .contact { padding-top: 40px; padding-bottom: 300px; }
  .email-link { max-width: 100%; font-size: clamp(21px, 5.6vw, 36px); gap: 8px; margin-top: 28px; }
  .email-link span:first-child { overflow-wrap: anywhere; }
  footer { padding-bottom: 28px; flex-wrap: wrap; gap: 12px 20px; }
  footer > p:first-of-type { flex-basis: 100%; order: 1; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }