:root{
  --bg:#eee7dc;
  --paper:#f7f2ea;
  --ink:#182116;
  --muted:#777267;
  --line:#d4cabd;
  --green:#22301e;
  --green-soft:#52624c;
  --shadow:0 24px 70px rgba(63,49,34,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(24px,4vw);
  border-bottom:1px solid rgba(212,202,189,.8);
  background:rgba(238,231,220,.88);
  backdrop-filter:blur(12px);
}
.brand{
  font-family:Georgia,'Times New Roman',serif;
  font-size:28px;
  letter-spacing:-.02em;
}
.nav{display:flex;gap:24px;align-items:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nav a:hover{color:var(--ink)}

.section-wrap{width:min(1440px,calc(100% - 48px));margin-inline:auto}
.hero{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);
  align-items:center;
  gap:clamp(32px,6vw,90px);
  padding-block:56px;
}
.hero-art{
  aspect-ratio:1/1;
  overflow:hidden;
  background:#d7ccbe;
  box-shadow:var(--shadow);
}
.hero-art img{width:100%;height:100%;object-fit:cover}
.hero-copy{max-width:540px}
.eyebrow{margin:0 0 18px;font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--green-soft)}
h1{
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(72px,9vw,144px);
  line-height:.82;
  font-weight:400;
  letter-spacing:-.065em;
}
.ticker{margin-top:22px;font-size:20px;font-weight:800;letter-spacing:.25em;color:var(--green-soft)}
.hero-text{margin:24px 0 0;max-width:36ch;font-size:18px;line-height:1.55;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.btn{
  min-width:92px;
  padding:13px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.36);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-align:center;
  transition:.18s ease;
}
.btn:hover{transform:translateY(-2px);background:var(--paper)}
.btn-dark{background:var(--green);border-color:var(--green);color:#f4efe6}
.btn-dark:hover{background:#11180f}
.is-disabled{opacity:.38;pointer-events:none}

.story{
  display:grid;
  grid-template-columns:180px minmax(0,760px) 1fr;
  gap:40px;
  padding:110px 0;
  border-top:1px solid var(--line);
}
.story-kicker{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--green-soft)}
.story-copy{font-family:Georgia,'Times New Roman',serif;font-size:clamp(24px,3vw,42px);line-height:1.18;letter-spacing:-.02em}
.story-copy p{margin:0 0 28px}
.story-mark{justify-self:end;font-family:Georgia,'Times New Roman',serif;font-size:80px;color:#c7bbad}

.gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding-bottom:100px;
}
.shot{margin:0;overflow:hidden;background:#d8cdbf}
.shot-wide{grid-column:1/-1}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .45s ease}
.shot:hover img{transform:scale(1.015)}

.contract{
  margin-bottom:84px;
  padding:28px 0;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.contract-copy{min-width:0;display:flex;align-items:center;gap:24px}
.contract-label{font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--muted);white-space:nowrap}
.contract code{font-family:inherit;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contract button{
  border:1px solid var(--green);
  border-radius:999px;
  padding:11px 16px;
  background:var(--green);
  color:#f4efe6;
  cursor:pointer;
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
}
.footer{
  min-height:84px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--muted);
}
.footer span:nth-child(2){justify-self:center}.footer a{justify-self:end}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:32px}
  .hero-copy{max-width:none}
  .story{grid-template-columns:1fr;gap:22px;padding:70px 0}
  .story-mark{justify-self:start;font-size:48px}
  .gallery{grid-template-columns:1fr}
  .shot-wide{grid-column:auto}
}
@media(max-width:620px){
  .section-wrap{width:min(100% - 24px,1440px)}
  .topbar{height:62px;padding:0 14px}.brand{font-size:23px}.nav{gap:12px;font-size:9px}.nav a:first-child,.nav a:nth-child(2){display:none}
  .hero{padding-block:20px 50px;gap:26px}
  h1{font-size:64px}.hero-text{font-size:15px}.actions{display:grid;grid-template-columns:1fr 1fr}.btn{width:100%}
  .story-copy{font-size:27px}.gallery{gap:10px;padding-bottom:60px}
  .contract{grid-template-columns:1fr}.contract-copy{display:block}.contract code{display:block;margin-top:10px}.contract button{width:100%}
  .footer{grid-template-columns:1fr auto}.footer span:nth-child(2){display:none}
}