@font-face {
  font-family: Manrope;
  src: url("assets/fonts/manrope-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Manrope;
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond-latin-ext-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond-latin-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --paper: #f3e7d2;
  --stone: #e9d7b8;
  --ink: #1f3328;
  --leaf: #223a2b;
  --muted: #504938;
  --accent: #006470;
  --line: #a99778;
  --focus: #006470;
  --sans: Manrope, system-ui, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --gutter: clamp(1.15rem, 4.4vw, 4.5rem);
  --section-space: clamp(4.25rem, 7.6vw, 7rem);
  --header-height: clamp(7rem, 9.85vw, 9.65rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--ink);
  font: 400 1rem/1.65 var(--sans);
}

img { display: block; max-inline-size: 100%; }
figure, p, h1, h2, h3 { margin: 0; }
section[id], main { scroll-margin-block-start: calc(var(--header-height) + 1rem); }
a { color: inherit; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
::selection { background: #cfe0cf; color: var(--ink); }

.shell {
  inline-size: min(81rem, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

body, .stone-surface {
  --stone-wash: rgb(255 248 234 / 22%);
  background-color: var(--paper);
  background-image: linear-gradient(var(--stone-wash), var(--stone-wash)), url("assets/limestone-natural.webp");
  background-size: auto, 42rem 42rem;
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 10;
  inset: .75rem auto auto .75rem;
  transform: translateY(calc(-100% - 1.5rem));
  padding: .7rem 1rem;
  background: var(--leaf);
  color: var(--paper);
}

.skip-link:focus { transform: none; }

.site-header {
  --grass-height: clamp(1.1rem, 1.45vw, 1.3rem);
  position: sticky;
  z-index: 5;
  inset-block-start: 0;
  background-color: #ecd7b9;
  background-image: url("assets/header-grass.webp"), url("assets/limestone-natural.webp");
  background-position: center bottom, center;
  background-size: auto var(--grass-height), 42rem 42rem;
  background-repeat: repeat-x, repeat;
}

.site-header::before, .site-header::after {
  position: absolute;
  z-index: -1;
  inset-block-start: 0;
  inline-size: clamp(4.2rem, 12vw, 12rem);
  block-size: clamp(3rem, 6.5vw, 6rem);
  background: url("assets/header-ivy-left.webp") left top / auto 6.215rem no-repeat;
  mask-image: linear-gradient(90deg, #000 13%, transparent 92%), linear-gradient(#000 25%, transparent 99%);
  mask-composite: intersect;
  content: "";
  pointer-events: none;
}

.site-header::before { inset-inline-start: 0; }
.site-header::after {
  inset-inline-end: 0;
  background-image: url("assets/header-ivy-right.webp");
  background-position: right top;
  mask-image: linear-gradient(270deg, #000 13%, transparent 92%), linear-gradient(#000 25%, transparent 99%);
}

.header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.9rem, 2.6vw, 2.75rem);
  min-block-size: var(--header-height);
  padding-block: .4rem 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  max-inline-size: 100%;
  text-decoration: none;
}

.site-header .brand { inline-size: clamp(10.75rem, 19.2vw, 18rem); }

.brand img {
  inline-size: 100%;
  block-size: auto;
  filter: drop-shadow(1px 2px 2px rgb(77 54 25 / 25%));
}

.site-nav {
  display: flex;
  align-self: end;
  align-items: center;
  justify-content: space-evenly;
  gap: clamp(.5rem, 2vw, 2rem);
}

.site-nav a, .header-call, .text-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: .875rem;
  font-weight: 760;
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
}

.site-nav a, .header-call {
  min-inline-size: 44px;
  justify-content: center;
  color: #172e1c;
  font-size: clamp(.91rem, 1.55vw, 1.42rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.18;
  text-decoration-line: none;
  text-shadow: 1px 2px 2px rgb(70 54 29 / 28%);
  white-space: nowrap;
}

.site-nav a:hover, .site-nav a[aria-current="page"], .header-call:hover { color: #0b4537; text-decoration-line: underline; }
.text-link { gap: .35rem .55rem; }
.text-link:hover { color: var(--accent); }
.header-call { align-self: end; justify-self: end; font-size: clamp(1rem, 1.85vw, 1.62rem); }

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .7rem;
  color: var(--accent);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .17em;
  line-height: 1.45;
  text-transform: uppercase;
}

.eyebrow span + span {
  border-inline-start: 1px solid currentColor;
  padding-inline-start: .7rem;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .93;
}

h2 { font-size: clamp(3.1rem, 5.25vw, 5rem); }
.eyebrow + h2 { margin-block-start: .25em; }
h2 + .lead { margin-block-start: 1.2rem; }
.lead { color: var(--muted); font-size: clamp(.98rem, 1.18vw, 1.08rem); line-height: 1.75; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;
  border: 1px solid var(--leaf);
  border-radius: .18rem;
  padding: .66rem 1.25rem;
  background: var(--leaf);
  color: var(--paper);
  font-size: .83rem;
  font-weight: 780;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms, border-color 160ms, color 160ms;
}

.button:hover:not(:disabled) { border-color: #36543d; background: #36543d; }
.button-light { border-color: #efe4cc; background: #efe4cc; color: #1b3526; }
.button-light:hover:not(:disabled) { border-color: #ffefd1; background: #ffefd1; color: #172b20; }
.button-outline { border-color: currentColor; background: transparent; color: inherit; }
.button-outline:hover:not(:disabled) { border-color: var(--leaf); background: var(--leaf); color: var(--paper); }
.button:disabled { opacity: .65; cursor: default; }

.hero {
  --focus: #f6e4b9;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: stretch;
  min-block-size: clamp(39rem, 49vw, 44rem);
  background: #1a2b1b;
  color: #fff8eb;
}

.hero-photo, .hero::before {
  position: absolute;
  inset: 0;
}

.hero-photo { z-index: -2; }
.hero-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 55% 54%; }

.hero::before {
  z-index: -1;
  content: "";
  background: linear-gradient(90deg, rgba(10, 22, 13, .69), rgba(12, 26, 15, .45) 37%, rgba(12, 26, 15, 0) 67%);
}

.hero-content {
  position: relative;
  display: grid;
  align-items: center;
  padding-block: 4rem;
}

.hero-copy { max-inline-size: 34rem; }
.hero .eyebrow { color: #e5d8b8; }

.hero h1 {
  margin-block-start: .25em;
  font-size: clamp(4rem, 5.35vw, 4.8rem);
  line-height: .94;
}

.hero-lead {
  max-inline-size: 35ch;
  margin-block-start: 1.35rem;
  color: #f6f0e5;
  font-size: clamp(1rem, 1.23vw, 1.13rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  margin-block-start: 1.75rem;
}

.hero .text-link:hover { color: #f6e4b9; }

.story-inner {
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
  align-items: center;
  gap: clamp(2.1rem, 7vw, 6rem);
  padding-block: var(--section-space);
}

.story-figure {
  border: 1px solid var(--line);
  padding: clamp(.55rem, 1.15vw, 1rem);
  background: var(--stone);
  box-shadow: .42rem .5rem 0 #8f74452b;
}

.story-photo {
  display: block;
  overflow: hidden;
  aspect-ratio: 1.18;
  background: #d9d1bc;
}

.story-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 60%; }

.story-copy .lead + .lead { margin-block-start: .85rem; }
.story-copy .text-link { margin-block-start: 1rem; }
.regional-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 5rem); padding-block: var(--section-space); border-block-start: 1px solid var(--line); }
.regional-heading .button { margin-block-start: 1.5rem; }
.regional-questions article { padding-block: 1.3rem; border-block-start: 1px solid var(--line); }
.regional-questions h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.5; }
.regional-questions p { margin-block-start: .6rem; color: var(--muted); line-height: 1.8; }
.regional-questions a { text-decoration: underline; text-underline-offset: .2em; }
.regional-questions a:hover { color: var(--accent); }
@media (max-width: 760px) { .regional-inner { grid-template-columns: minmax(0, 1fr); } }

.area {
  --stone-wash: rgb(206 177 131 / 17%);
  border-block: 1px solid #a9977870;
}

.area-inner {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(3.5rem, 6.15vw, 5.7rem);
}

.area h2 { font-size: clamp(2.95rem, 4.8vw, 4.35rem); }

.area-tool {
  min-inline-size: 0;
  border-block: 1px solid var(--line);
  padding-block: 1.15rem;
}

.area-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: .7rem;
}

.area-field label, .area-result label { display: block; margin-block-end: .45rem; font-size: .86rem; font-weight: 800; }
.area-field label span { color: var(--muted); font-weight: 600; }
.area-field input, .area-result textarea {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  border: 1px solid #83725a;
  border-radius: .15rem;
  padding: .64rem .7rem;
  background: #fff8ec;
  color: #243729;
}

.area-field input { min-block-size: 3rem; }
.area-field input::placeholder { color: #645a49; opacity: 1; }
.area-field input[aria-invalid="true"] { border-color: #812a15; box-shadow: inset 0 0 0 1px #812a15; }
.area-result textarea { resize: vertical; }
.form-note, .form-error, #copy-status { margin-block-start: .65rem; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.form-error:not(:empty) { color: #812a15; font-weight: 800; }
.form-error:empty, #copy-status:empty { margin-block-start: 0; }
.area-result { margin-block-start: 1.25rem; border-block-start: 1px solid var(--line); padding-block-start: 1rem; }

#area-value {
  display: block;
  margin-block: .15rem .85rem;
  color: #26452e;
  font: 500 clamp(2.55rem, 4.5vw, 4.1rem)/1 var(--serif);
  letter-spacing: -.034em;
  overflow-wrap: anywhere;
}

.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .8rem; margin-block-start: .85rem; }
.copy-row #copy-status { margin: 0; }

.production {
  border-block-end: 1px solid #a9977870;
}

.production-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2.25rem, 6.5vw, 6rem);
  padding-block: clamp(3.6rem, 6.5vw, 5.7rem);
}

.production-copy .lead { max-inline-size: 48ch; }
.production-copy .button { margin-block-start: 1.35rem; }
.brand-inset {
  justify-self: end;
  inline-size: min(100%, 30rem);
  border: 1px solid #b9a990;
  padding: .55rem;
  background: #eee4d0;
  box-shadow: .4rem .45rem 0 #bcae8d46;
}

.brand-inset img { inline-size: 100%; block-size: auto; }

.contact { --stone-wash: rgb(255 249 237 / 33%); }
.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: end;
  gap: clamp(1.6rem, 5vw, 4.6rem);
  padding-block: clamp(3.8rem, 6vw, 5.2rem);
}

.contact h2 { max-inline-size: 12ch; font-size: clamp(2.85rem, 5vw, 4.8rem); }
.contact-details { display: grid; justify-items: start; align-content: start; gap: .35rem; }
.contact-phone {
  display: inline-block;
  font: 500 clamp(2.6rem, 4.6vw, 4.4rem)/1.08 var(--serif);
  font-variant-numeric: lining-nums;
  letter-spacing: -.045em;
  text-decoration-thickness: 1px;
  text-underline-offset: .13em;
}

.contact-phone:hover { color: var(--accent); }
.site-footer { --stone-wash: rgb(215 187 145 / 16%); border-block-start: 1px solid #a9977870; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .65rem 1.1rem;
  min-block-size: 5.25rem;
  padding-block: .75rem;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 740;
}

.footer-brand { inline-size: clamp(11rem, 16vw, 14rem); }

.gallery-section { padding-block: clamp(3.25rem, 6vw, 5.75rem) clamp(3rem, 6vw, 5rem); }
.gallery-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  align-items: end;
  gap: 1rem 2.5rem;
  margin-block-end: 1.7rem;
}

.gallery-heading h1 { margin-block-start: .22em; font-size: clamp(3.6rem, 6.9vw, 6.6rem); }
.gallery-heading .lead { max-inline-size: 34ch; }
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .48rem;
  margin-block-end: 1.25rem;
  border-block: 1px solid var(--line);
  padding-block: .65rem;
}

.gallery-filters button {
  min-block-size: 44px;
  border: 1px solid #867354;
  border-radius: .15rem;
  padding: .32rem .85rem;
  background: #f6ead4;
  color: var(--ink);
  font-size: .81rem;
  font-weight: 780;
  cursor: pointer;
}

.gallery-filters button:hover { border-color: var(--accent); color: var(--accent); }
.gallery-filters button[aria-pressed="true"] { border-color: var(--leaf); background: var(--leaf); color: var(--paper); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(.85rem, 1.8vw, 1.55rem); }

.gallery-item {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "photo photo" "caption category";
  align-content: start;
  align-items: baseline;
  gap: .48rem .45rem;
  border-block-end: 1px solid var(--line);
  padding-block-end: .5rem;
}

.gallery-wide { grid-column: span 2; }
.gallery-photo-link {
  grid-area: photo;
  display: block;
  overflow: hidden;
  aspect-ratio: 1.36;
  background: #d0cfb9;
}

.gallery-wide .gallery-photo-link { aspect-ratio: 2.8; }
.gallery-photo-link picture, .gallery-photo-link img { display: block; inline-size: 100%; block-size: 100%; }
.gallery-photo-link img { object-fit: cover; transition: transform 240ms ease; }
.gallery-wide img { object-position: 50% 21%; }
.gallery-photo-link:hover img { transform: scale(1.045); }
.gallery-item figcaption { grid-area: caption; color: var(--ink); font-size: .83rem; font-weight: 800; }
.gallery-category { grid-area: category; color: var(--muted); font-size: .7rem; font-weight: 650; }
.gallery-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15rem 1.2rem; margin-block-start: 1.15rem; }

html:has(.gallery-page) { scrollbar-gutter: stable; }
html:has(.gallery-dialog[open]), .gallery-page:has(.gallery-dialog[open]) {
  overflow: hidden;
  overscroll-behavior: none;
}

.gallery-dialog {
  --stone-wash: rgb(255 249 238 / 35%);
  inline-size: min(52rem, calc(100% - 1.6rem));
  max-block-size: calc(100% - 1.6rem);
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: .16rem;
  padding: clamp(.8rem, 2vw, 1.3rem);
  color: var(--ink);
}

.gallery-dialog::backdrop { background: #241d15de; }

.dialog-header, .dialog-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem .75rem;
}

.dialog-header { margin-block-end: .65rem; }
.dialog-controls { margin-block-start: .8rem; }
.dialog-controls p { color: var(--muted); font-size: .8rem; font-weight: 740; text-align: center; }
.gallery-dialog .button { min-block-size: 44px; }
.dialog-figure { text-align: center; }

.dialog-figure img {
  inline-size: 100%;
  block-size: min(54dvh, 34rem);
  background: #d9d3c5;
  object-fit: contain;
}

.dialog-figure figcaption { padding-block-start: .45rem; font: 500 clamp(1.35rem, 3vw, 1.9rem)/1.2 var(--serif); }

@media (max-width: 979px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-wide .gallery-photo-link { aspect-ratio: 2.5; }
}

@media (max-width: 839px) {
  :root { --header-height: clamp(8.75rem, 41vw, 10rem); }

  .site-header::before, .site-header::after { background-size: auto 4.972rem; }

  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: .25rem .7rem;
    padding-block: .55rem 1.3rem;
  }

  .site-header .brand { inline-size: clamp(10.25rem, 49vw, 14rem); }
  .header-call { grid-column: 2; grid-row: 1; align-self: center; font-size: clamp(1.08rem, 5.2vw, 1.5rem); }
  .site-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: .25rem .45rem; }
  .site-nav a { font-size: clamp(.82rem, 3.45vw, 1.04rem); }
  .area-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-submit { justify-self: start; }
}

@media (max-width: 760px) {
  .story-inner, .area-inner, .production-inner, .contact-inner, .gallery-heading { grid-template-columns: minmax(0, 1fr); }
  .story-inner, .production-inner { gap: 1.8rem; }
  .brand-inset { justify-self: start; }
  .contact-inner { gap: 1.15rem; }
  .contact h2 { max-inline-size: none; }
}

@media (max-width: 699px) {
  .hero { min-block-size: clamp(36rem, 88vh, 42rem); }
  .hero-photo img { object-position: 66% 43%; }

  .hero::before {
    background: linear-gradient(0deg, rgba(11, 25, 15, .94), rgba(11, 25, 15, .78) 29%, rgba(11, 25, 15, .12) 64%, rgba(11, 25, 15, 0) 77%);
  }

  .hero-content { align-items: end; padding-block: 13.25rem 3.6rem; }
  .hero h1 { font-size: clamp(3.35rem, 11.9vw, 4.6rem); }
  .hero-lead { margin-block-start: .9rem; }
  .hero-actions { gap: .32rem .9rem; margin-block-start: 1.1rem; }
  .hero-actions .button { padding-inline: .85rem; }
  .hero-actions .text-link { font-size: .79rem; }
  .story-photo { aspect-ratio: 1; }
}

@media (max-width: 599px) {
  .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery-wide { grid-column: auto; }
  .gallery-wide .gallery-photo-link { aspect-ratio: 1.36; }
  .gallery-end { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 360px) {
  :root { --gutter: 1rem; }
}

@media (max-height: 440px) and (orientation: landscape) {
  .site-header { position: static; }
  section[id], main { scroll-margin-block-start: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .button, .gallery-photo-link img { transition: none; }
  .gallery-photo-link:hover img { transform: none; }
}