:root {
  --paper: #f3f0e7;
  --paper-deep: #e7e0d2;
  --ink: #16313a;
  --ink-soft: #40535a;
  --orange: #d66a32;
  --line: rgba(22, 49, 58, 0.24);
  --white: #fffdf8;
  --page: min(1280px, calc(100vw - 64px));
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 17px; line-height: 1.6; text-rendering: optimizeLegibility; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 20; top: 10px; left: 10px; padding: 12px 16px; background: var(--ink); color: var(--white); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

.site-header { width: var(--page); min-height: 82px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); font-size: .78rem; line-height: 1.12; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.brand strong { font-weight: 750; }
.brand-mark, .square { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; background: var(--orange); }
.site-header nav { display: flex; align-items: center; gap: 28px; }
.site-header nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: .82rem; font-weight: 650; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.site-header nav a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 6px; }

.hero { width: var(--page); min-height: calc(100svh - 82px); margin: 0 auto; padding: clamp(46px, 7vw, 92px) 0 56px; display: grid; grid-template-columns: minmax(0, 7.2fr) minmax(190px, 2.4fr) minmax(0, 2.4fr); grid-template-areas: "copy note note" "image image image"; align-content: start; column-gap: 24px; }
.hero-copy { grid-area: copy; min-width: 0; padding-left: clamp(0px, 4vw, 56px); }
.eyebrow, .kicker { margin: 0 0 22px; display: flex; align-items: center; gap: 14px; color: var(--ink-soft); font-size: .76rem; font-weight: 750; letter-spacing: .13em; line-height: 1.3; text-transform: uppercase; }
.eyebrow span { color: var(--orange); }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; }
h1 { max-width: 820px; font-size: clamp(4.4rem, 7.5vw, 7.15rem); line-height: .89; }
.hero-intro { max-width: 570px; margin: 28px 0 26px; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.55; }
.primary-action { min-height: 52px; width: fit-content; display: inline-flex; align-items: center; justify-content: space-between; gap: 38px; padding: 13px 18px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.primary-action:hover { background: transparent; color: var(--ink); }
.primary-action span { color: var(--orange); font-size: 1.15rem; }
.hero-note { grid-area: note; justify-self: end; align-self: end; width: min(100%, 220px); margin-bottom: 52px; border-top: 1px solid var(--line); padding-top: 14px; }
.hero-note p { margin: 12px 0 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.6; text-transform: uppercase; letter-spacing: .08em; }
.hero-note strong { color: var(--ink); }
figure { margin: 0; min-width: 0; }
.hero-figure { grid-area: image; width: 82%; margin: 58px 0 0 auto; }
.hero-figure img { height: clamp(300px, 34vw, 510px); object-fit: cover; object-position: center 58%; }
figcaption { margin-top: 10px; display: flex; justify-content: space-between; gap: 20px; color: var(--ink-soft); font-size: .7rem; letter-spacing: .075em; line-height: 1.45; text-transform: uppercase; }
figcaption span { color: var(--orange); font-weight: 800; }

.section-index { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .75rem; letter-spacing: .12em; }
.intro-flow { width: var(--page); margin: 0 auto; padding: clamp(90px, 12vw, 170px) 0; display: grid; grid-template-columns: minmax(90px, 1.2fr) minmax(0, 5.2fr) minmax(0, 3.4fr); gap: clamp(24px, 5vw, 78px); align-items: start; }
.kicker { color: var(--orange); margin-bottom: 14px; }
.intro-heading h2, .field-copy h2, .detail-copy h2, .facts h2, .location h2 { font-size: clamp(2.8rem, 5.4vw, 5rem); line-height: .98; }
.intro-copy { padding-top: 39px; color: var(--ink-soft); }
.intro-copy p { margin: 0 0 22px; }

.field-note { width: var(--page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); gap: clamp(38px, 7vw, 100px); align-items: center; }
.field-image img { aspect-ratio: 1.42; object-fit: cover; }
.field-copy { min-width: 0; padding-right: clamp(0px, 3vw, 38px); }
.field-copy h2 { font-size: clamp(2.8rem, 4.8vw, 4.75rem); }
.field-copy > p:not(.eyebrow), .detail-copy > p:not(.eyebrow) { margin: 28px 0; max-width: 560px; color: var(--ink-soft); }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 22px; font-size: .79rem; font-weight: 750; letter-spacing: .08em; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 6px; text-transform: uppercase; }

.detail-flow { width: var(--page); margin: 0 auto; padding: clamp(110px, 15vw, 210px) 0; display: grid; grid-template-columns: minmax(0, 5.1fr) minmax(0, 4fr) minmax(0, 1fr); grid-template-areas: "copy image ."; gap: clamp(34px, 7vw, 110px); align-items: end; }
.detail-copy { grid-area: copy; min-width: 0; padding: 0 0 clamp(10px, 5vw, 70px) clamp(0px, 4vw, 58px); }
.detail-image { grid-area: image; }
.detail-image img { aspect-ratio: 1; object-fit: cover; }

.facts { background: var(--paper-deep); padding: clamp(80px, 10vw, 150px) max(32px, calc((100vw - min(1280px, calc(100vw - 64px))) / 2)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(46px, 8vw, 120px); }
.facts-head { min-width: 0; }
.facts h2 { max-width: 620px; }
.fact-list { margin: 8px 0 0; }
.fact-list div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding: 23px 0; border-top: 1px solid var(--line); }
.fact-list div:last-child { border-bottom: 1px solid var(--line); }
.fact-list dt { color: var(--ink-soft); font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.fact-list dd { margin: 0; font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.25; }

.location { padding: clamp(85px, 11vw, 150px) max(32px, calc((100vw - min(1280px, calc(100vw - 64px))) / 2)); background: var(--ink); color: var(--white); display: grid; grid-template-columns: minmax(0, 6fr) minmax(260px, 3fr); column-gap: clamp(44px, 10vw, 150px); row-gap: 42px; align-items: end; }
.eyebrow.light { color: rgba(255, 253, 248, .68); }
.location h2 { max-width: 680px; color: var(--white); }
.location address { padding-top: 24px; border-top: 1px solid rgba(255, 253, 248, .32); display: flex; flex-direction: column; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-style: normal; line-height: 1.3; }
.location-note { grid-column: 2; margin: 0; color: rgba(255, 253, 248, .66); font-size: .8rem; line-height: 1.6; }

footer { padding: 24px max(32px, calc((100vw - min(1280px, calc(100vw - 64px))) / 2)); background: #0d242c; color: rgba(255, 253, 248, .68); display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; font-size: .72rem; letter-spacing: .04em; }
footer p { margin: 0; }
footer p:nth-child(2) { text-align: center; }
footer a { justify-self: end; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-weight: 700; text-underline-offset: 5px; }

@media (max-width: 920px) {
  :root { --page: calc(100vw - 48px); }
  .site-header { min-height: 76px; }
  .hero { min-height: calc(100svh - 76px); padding-top: 48px; grid-template-columns: minmax(0, 3.2fr) minmax(150px, 1fr); grid-template-areas: "copy note" "image image"; }
  h1 { font-size: clamp(4rem, 8.7vw, 5.4rem); }
  .hero-note { margin-bottom: 22px; }
  .hero-figure { width: 91%; margin-top: 48px; }
  .intro-flow { grid-template-columns: 72px minmax(0, 1.25fr) minmax(0, .85fr); gap: 28px; }
  .field-note { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 38px; }
  .detail-flow { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); grid-template-areas: "copy image"; gap: 42px; }
  .facts, .location { grid-template-columns: 1fr 1fr; gap: 44px; }
}

@media (max-width: 700px) {
  :root { --page: calc(100vw - 36px); }
  html { scroll-padding-top: 72px; }
  body { font-size: 16px; }
  .site-header { min-height: 68px; gap: 16px; }
  .brand { font-size: .65rem; letter-spacing: .055em; }
  .brand-mark { width: 8px; height: 8px; }
  .site-header nav { gap: 4px; }
  .site-header nav a { min-width: 44px; padding: 0 8px; font-size: .68rem; letter-spacing: .04em; }
  .site-header nav a:first-child { display: none; }
  .hero { min-height: auto; padding: 26px 0 56px; display: flex; flex-direction: column; }
  .hero-copy { padding-left: 0; }
  .eyebrow { margin-bottom: 14px; font-size: .66rem; }
  h1 { max-width: 100%; font-size: clamp(3.25rem, 14.8vw, 4.15rem); line-height: .94; letter-spacing: -.05em; }
  .hero-intro { max-width: 34ch; margin: 18px 0 17px; font-size: .94rem; line-height: 1.43; }
  .primary-action { min-height: 48px; width: 100%; padding: 10px 14px; }
  .hero-note { order: 3; justify-self: auto; width: 100%; margin: 18px 0 0; padding-top: 10px; display: flex; align-items: center; gap: 10px; }
  .hero-note p { margin: 0; font-size: .66rem; line-height: 1.35; }
  .hero-note br { display: none; }
  .hero-note br::after { content: " "; }
  .hero-figure { order: 2; width: calc(100% - 18px); margin: 28px 0 0 auto; }
  .hero-figure img { height: 220px; object-position: center; }
  figcaption { display: block; font-size: .61rem; }
  .intro-flow, .field-note, .detail-flow, .facts, .location { display: block; }
  .intro-flow { padding: 84px 0 92px; }
  .section-index { margin-bottom: 32px; }
  .intro-heading h2, .field-copy h2, .detail-copy h2, .facts h2, .location h2 { font-size: clamp(2.65rem, 13vw, 3.55rem); line-height: .98; }
  .intro-copy { padding-top: 30px; }
  .field-image img { aspect-ratio: 1.08; object-position: 54% center; }
  .field-copy { padding: 52px 0 0; }
  .detail-flow { padding: 105px 0; }
  .detail-copy { padding: 0 0 44px; }
  .detail-image { width: calc(100% - 34px); margin-left: auto; }
  .facts { padding: 80px 18px; }
  .fact-list { margin-top: 52px; }
  .fact-list div { grid-template-columns: 1fr; gap: 8px; padding: 19px 0; }
  .location { padding: 80px 18px; }
  .location address { margin-top: 54px; }
  .location-note { margin-top: 30px; }
  footer { padding: 28px 18px; grid-template-columns: 1fr auto; row-gap: 14px; }
  footer p:nth-child(2) { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}

@media (max-width: 420px) {
  .site-header nav a { padding: 0 4px; }
  h1 { font-size: clamp(3rem, 14.3vw, 3.7rem); }
  .hero-figure { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}