:root {
  --sb-silo: #171c17;
  --sb-canvas: #f2ebdd;
  --sb-paper: #faf7f0;
  --sb-harvest: #c58a42;
  --sb-sage: #68755b;
  --sb-line: #d9d0bf;
  --sb-muted: #60685d;
  --sb-oxblood: #762d36;
  --sb-font-display: "Newsreader", Georgia, serif;
  --sb-font-ui: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--sb-silo); background: var(--sb-canvas); font: 16px var(--sb-font-ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--sb-oxblood); outline-offset: 5px; }
svg, img { display: block; }
img { max-width: 100%; height: auto; }
p { margin: 0 0 20px; line-height: 1.75; }
h1, h2 { margin: 0; font: 400 48px/1.1 var(--sb-font-display); letter-spacing: -.035em; }
.wrap { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; border-bottom: 1px solid var(--sb-line); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.mark { width: 27px; height: 27px; color: #956027; }
.site-header nav { display: flex; gap: 30px; }
.site-header nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }
.arrival { padding-block: 34px 38px; }
.eyebrow { color: var(--sb-muted); font-size: 12px; font-weight: 500; letter-spacing: .06em; margin-bottom: 20px; }
h1 { font-size: clamp(64px, 11.5vw, 166px); line-height: .95; letter-spacing: -.045em; }
h1 em { color: #80552e; font-weight: 400; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; font-size: 14px; font-weight: 500; }

/* The art and destination share one coordinate space. No layers are independently distorted. */
.farm { --farm-height: 100svh; position: relative; scroll-margin-top: 0; }
.farm-stage { position: relative; width: 100%; }
.farm-window { height: var(--farm-height); position: relative; overflow: hidden; background: #aaa584; isolation: isolate; }
.farm-camera {
  --camera-x: 0%; --camera-y: 0%; --camera-scale: 1;
  position: absolute;
  width: max(100%, calc(var(--farm-height) * 1.5));
  aspect-ratio: 3 / 2;
  left: 50%; top: 50%;
  transform: translate(calc(-50% + var(--camera-x)), calc(-50% + var(--camera-y))) scale(var(--camera-scale));
  transform-origin: center;
}
.farm-art { width: 100%; height: auto; }
.farm-enhanced .farm { min-height: 168svh; }
.farm-enhanced .farm-stage { position: sticky; top: 0; }
.farm-enhanced .farm-camera { will-change: transform; }
.farm-hotspot { position: absolute; left: var(--destination-x, 65%); top: var(--destination-y, 58%); width: 14%; height: 22%; min-width: 52px; min-height: 64px; transform: translate(-50%, -50%); text-decoration: none; border: 0; padding: 0; background: transparent; font-family: inherit; cursor: pointer; border-radius: 45% 45% 18% 18%; }
.farm-hotspot:hover, .farm-hotspot:focus-visible { outline: 3px solid var(--sb-paper); outline-offset: 5px; background: rgb(250 247 240 / .08); }
.destination-label { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; white-space: nowrap; background: var(--sb-paper); color: var(--sb-silo); padding: 12px 14px; font-size: 12px; font-weight: 600; border: 1px solid rgb(23 28 23 / .2); box-shadow: 0 3px 14px rgb(23 28 23 / .12); }
.destination-label::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 1px; height: 18px; background: var(--sb-paper); }
.destination-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sb-sage); }
.farm-hotspot:hover .destination-label, .farm-hotspot:focus-visible .destination-label { background: var(--sb-silo); color: var(--sb-paper); }
.scene-heading { position: absolute; left: max(36px, calc((100% - 1200px) / 2)); top: 28px; background: rgb(250 247 240 / .96); color: var(--sb-silo); padding: 19px 23px; pointer-events: none; }
.scene-heading .eyebrow { margin-bottom: 6px; font-size: 11px; }
.scene-heading h2 { font-size: 28px; letter-spacing: -.02em; }
.farm-fallback { display: none; }
.project-card { position: fixed; inset: 0; margin: auto; width: 350px; max-width: calc(100vw - 32px); height: fit-content; max-height: calc(100svh - 32px); overflow: auto; padding: 28px; border: 1px solid var(--sb-line); background: var(--sb-paper); color: var(--sb-silo); box-shadow: 0 12px 48px rgb(23 28 23 / .2); }
.project-card.is-positioned { inset: auto; margin: 0; }
.project-card::backdrop { background: transparent; }
.project-card .eyebrow { margin-bottom: 16px; padding-right: 30px; }
.project-card h2 { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.card-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--sb-silo); font: 28px/1 var(--sb-font-ui); cursor: pointer; }
.card-close:hover { background: var(--sb-canvas); }
.project-subtitle { font: italic 23px/1.3 var(--sb-font-display); margin-bottom: 18px; }
.project-description { color: var(--sb-muted); font-size: 15px; line-height: 1.65; margin-bottom: 22px; }
.button { display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 48px; padding: 14px 18px; background: var(--sb-silo); color: var(--sb-paper); font-size: 14px; font-weight: 500; text-decoration: none; }
.button:hover { background: #303b30; text-decoration: underline; }
.card-source { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 8px; font-size: 13px; }
@supports not selector(:popover-open) {
  .farm-hotspot, .project-card { display: none; }
  .farm-fallback { display: flex; position: absolute; right: 20px; bottom: 20px; gap: 20px; padding: 15px 18px; background: var(--sb-paper); font-size: 14px; }
}
.site-footer { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; padding-block: 30px 38px; margin-top: 32px; border-top: 1px solid var(--sb-line); }
.footer-identity .wordmark { font-size: 12px; }
.footer-identity .mark { width: 24px; height: 24px; }
.footer-identity p { font: italic 24px/1.4 var(--sb-font-display); margin: 10px 0 0 34px; }
.footer-identity .footer-coordinates { color: var(--sb-muted); font: 400 12px/1.8 var(--sb-font-ui); font-variant-numeric: tabular-nums; letter-spacing: .08em; margin-top: 20px; }
.footer-coordinates span { margin-inline: 7px; }
.footer-about { color: var(--sb-muted); font-size: 15px; line-height: 1.75; max-width: 56ch; margin-bottom: 16px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 25px; }
.footer-links a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-size: 14px; }
.skip-link { position: absolute; left: 20px; top: -80px; padding: 15px; z-index: 10; background: var(--sb-silo); color: var(--sb-paper); }
.skip-link:focus { top: 12px; }
@media (max-width: 1000px) {
  .wrap { width: calc(100% - 64px); }
  .site-footer { gap: 40px; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { min-height: 76px; gap: 14px; }
  .wordmark { font-size: 12px; letter-spacing: .1em; gap: 7px; }
  .mark { width: 24px; height: 24px; }
  .site-header nav { gap: 16px; }
  .site-header nav a { font-size: 12px; gap: 5px; }
  .arrival { padding-block: 30px 32px; }
  .eyebrow { font-size: 11px; margin-bottom: 22px; }
  h1 { font-size: clamp(54px, 11vw, 80px); }
  .farm { --farm-height: 440px; }
  .farm-camera { left: 45%; }
  .farm-enhanced .farm { min-height: 0; }
  .farm-enhanced .farm-stage { position: relative; }
  .farm-enhanced .farm-camera { will-change: auto; }
  .scene-heading { top: 20px; left: 20px; padding: 13px 16px; }
  .scene-heading .eyebrow { display: none; }
  .scene-heading h2 { font-size: 24px; }
  .site-footer { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 380px) {
  .site-header { flex-wrap: wrap; gap: 4px; padding-block: 14px; }
  .site-header nav { gap: 22px; }
  .farm { --farm-height: 410px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .farm-enhanced .farm { min-height: 0; }
  .farm-enhanced .farm-stage { position: relative; }
  .farm-enhanced .farm-camera { will-change: auto; }
}