:root {
  --green: #173f31;
  --green-deep: #123528;
  --cream: #f5efe3;
  --ink: #173b31;
  --gold: #b58b38;
  --rule: rgba(23,63,49,.18);
  --serif: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream) url('assets/paper_texture.jpg') repeat; font-family: var(--serif); line-height: 1.55; }
a { color: inherit; } img { max-width: 100%; display: block; }
.page-pad { padding-left: clamp(24px, 7vw, 104px); padding-right: clamp(24px, 7vw, 104px); }
.section-rule { border-top: 1px solid var(--rule); }
h1,h2,h3 { font-weight: 400; text-transform: uppercase; letter-spacing: .12em; margin-top: 0; }
h2 { font-size: clamp(1.25rem, 2.1vw, 2rem); text-align: center; } p { margin: 0 0 .85rem; }
.hero { height: 400px; min-height: 0; display: grid; grid-template-columns: 52% 48%; overflow: hidden; }
.hero-copy { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding-top: 22px; padding-bottom: 22px; }
.wordmark { width: min(590px, 96%); margin: 0 auto 12px; }
.hero-subtitle { font-size: clamp(1.05rem, 1.55vw, 1.45rem); line-height: 1.28; margin: 0 0 16px; }
.hero h1 { font-size: clamp(1.4rem, 2.15vw, 2rem); line-height: 1.18; margin: 0; }
.hero-image { background: url('assets/hero_landscape.jpg') center center / cover no-repeat; min-height: 0; height: 100%; }
.intro { padding-top: 18px; padding-bottom: 18px; }.intro-inner { width: min(930px, 100%); margin: 0 auto; }.intro h2 { margin-bottom: 14px; }.intro-copy { width:min(690px,100%); margin:0 auto; font-size:1.08rem; }.intro-copy p { margin-bottom:.6rem; }.intro-bridge { margin-top:10px; font-style:italic; margin-bottom:0; }
.growing { padding-top: 24px; padding-bottom: 24px; }
.pillars { display:grid; grid-template-columns: repeat(6,1fr); width:min(1240px,100%); margin:0 auto; align-items:start; }
.pillars article { text-align:center; padding: 0 18px; border-left:1px solid var(--rule); }
.pillars article:first-child { border-left:none; }
.pillar-image { width:100%; aspect-ratio: 1.18 / 1; margin:0 auto 15px; overflow:hidden; }
.pillar-image img { width:100%; height:100%; object-fit:cover; }
.pillar-image-empty { background:transparent; }
.pillars h3 { font-size:1.08rem; margin-bottom:12px; letter-spacing:.08em; }
.pillars p { font-size:.94rem; }
.growing-message { width:min(900px,100%); margin:28px auto 0; text-align:center; }
.growing-message-art { width:100%; height:auto; margin:0 auto; }

/* --- Cooking School --- */
.cooking-school { display:grid; grid-template-columns:46% 54%; min-height:310px; }
.cooking-school-image { background:url('assets/cooking_school.jpg') center center / cover no-repeat; min-height:310px; }
.cooking-school-copy { display:flex; flex-direction:column; justify-content:center; padding-top:24px; padding-bottom:24px; }
.cooking-school-copy .eyebrow { text-transform:uppercase; letter-spacing:.18em; font-size:.82rem; color:#78846b; margin-bottom:10px; }
.cooking-school-copy h2 { text-align:left; margin-bottom:22px; }
.cooking-school-copy p { max-width:690px; font-size:1.02rem; }
.cooking-school-copy .collaborator-line { font-weight:700; margin-top:8px; }

.beginning { display:grid; grid-template-columns: 46% 54%; background:var(--green-deep); color:var(--cream); }.beginning-copy { padding-top:24px; padding-bottom:24px; display:flex; flex-direction:column; justify-content:center; }.beginning-copy h2 { text-align:left; margin-bottom:14px; }.beginning-copy p { max-width:610px; font-size:1rem; margin-bottom:.65rem; }.beginning-copy .building-line { font-weight:700; }.beginning-images { min-height:280px; display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; }.beginning-images img { width:100%; height:100%; min-height:280px; object-fit:cover; }
.journey, .grow-with-us { min-height:0; display:grid; grid-template-columns: 24% 42% 34%; align-items:center; gap:28px; padding-top:16px; padding-bottom:16px; }.journey-art img { width:min(285px,100%); margin:auto; mix-blend-mode:multiply; }.journey-copy h2, .grow-copy h2 { text-align:left; margin-bottom:10px; }.journey-copy .lead { font-size:1.06rem; }
.action-card, .contact-card { text-decoration:none; background:var(--green-deep); color:var(--cream); border-radius:7px; padding:24px 26px; display:flex; gap:18px; align-items:center; transition:transform .18s ease, box-shadow .18s ease; }.action-card:hover, .contact-card:hover { transform: translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.12); }.action-icon { width:48px; height:48px; border:1px solid rgba(245,239,227,.65); border-radius:50%; display:grid; place-items:center; flex:0 0 auto; }.action-card strong, .contact-card strong { display:block; text-transform:uppercase; letter-spacing:.11em; font-weight:400; margin-bottom:4px; }.action-card small, .contact-card small { display:block; font-size:.9rem; line-height:1.45; }
.grow-with-us { min-height:0; }.grow-spacer { min-height:1px; }.grow-copy { text-align:center; }.grow-copy h2 { text-align:center; }.contact-card { background:transparent; color:var(--green-deep); border:1px solid rgba(23,63,49,.52); }.contact-card .action-icon { background:var(--green-deep); color:var(--cream); border:0; }
.site-footer { background:var(--cream); color:var(--green-deep); min-height:0; display:grid; grid-template-columns:1fr 1fr 1.2fr; align-items:center; gap:36px; padding-top:18px; padding-bottom:18px; border-top:1px solid var(--rule); }.footer-mark { display:flex; flex-direction:column; align-items:center; justify-self:start; }.footer-mark img { width:96px; filter:none; opacity:.95; }.footer-mark strong { text-transform:uppercase; letter-spacing:.14em; font-size:.82rem; font-weight:400; margin-top:5px; }.footer-mark span { text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; margin-top:2px; }.footer-tagline { display:flex; align-items:center; justify-content:center; margin:0; padding:0 30px; border-left:1px solid var(--rule); border-right:1px solid var(--rule); }.footer-tagline img { width:min(430px,100%); height:auto; margin:auto; }.footer-links { display:flex; flex-direction:column; gap:10px; font-size:.92rem; }.footer-links a { color:var(--green-deep); text-decoration:none; }.footer-links a:hover { text-decoration:underline; }
@media (max-width: 940px) { .hero { grid-template-columns:1fr; }.hero-copy { min-height:420px; }.hero-image { min-height:360px; }.pillars { grid-template-columns:repeat(3,1fr); row-gap:32px; }.pillars article:nth-child(4) { border-left:none; }.beginning { grid-template-columns:1fr; }.beginning-images { min-height:280px; }.journey, .grow-with-us { grid-template-columns: 24% 1fr; }.action-card, .contact-card { grid-column:2; width:min(520px,100%); }.grow-spacer { display:none; }.site-footer { grid-template-columns:1fr 1fr; }.footer-links { grid-column:1 / -1; align-items:center; } }
@media (max-width: 640px) { .page-pad { padding-left:22px; padding-right:22px; }.hero-copy { min-height:360px; padding-top:24px; padding-bottom:22px; }.wordmark { width:100%; margin-bottom:10px; }.hero-subtitle { margin-bottom:18px; }.hero-image { min-height:280px; }.intro { padding-top:18px; padding-bottom:18px; }.intro-copy { font-size:1rem; }.pillars { grid-template-columns:1fr 1fr; }.pillars article { padding:0 12px; }.pillars article:nth-child(odd) { border-left:none; }.pillars article:nth-child(4) { border-left:1px solid var(--rule); }.growing-message { margin-top:26px; }.beginning-copy { padding-top:24px; padding-bottom:24px; }.beginning-images { min-height:250px; }.journey, .grow-with-us { grid-template-columns:1fr; text-align:center; gap:18px; padding-top:20px; padding-bottom:20px; }.journey-art img { width:125px; }.journey-copy h2, .grow-copy h2 { text-align:center; }.action-card, .contact-card { grid-column:auto; margin:0 auto; width:min(420px,100%); text-align:left; }.site-footer { grid-template-columns:1fr; text-align:center; gap:24px; }.footer-mark { justify-self:center; }.footer-tagline { border:0; padding:0; }.footer-links { grid-column:auto; } }

/* --- Card borders: true double-line treatment --- */
.action-card,
.contact-card {
  position: relative;
}

.action-card {
  border: 1px solid rgba(245,239,227,.78);
  box-shadow: none;
}

.action-card::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(245,239,227,.55);
  border-radius: 4px;
  pointer-events: none;
}

.action-card:hover {
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.contact-card {
  background: transparent;
  color: var(--green-deep);
  border: 1px solid var(--green-deep);
  box-shadow: none;
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--green-deep);
  border-radius: 4px;
  pointer-events: none;
}

.contact-card:hover {
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.contact-card .action-icon {
  background: var(--green-deep);
  color: var(--cream);
  border: 0;
}

/* --- Grow With Us: contact left, copy center, botanical right --- */
.grow-with-us {
  grid-template-columns: 34% 42% 24%;
}

.grow-with-us .contact-card {
  grid-column: 1;
  width: 100%;
  justify-self: stretch;
}

.grow-copy {
  grid-column: 2;
}

.grow-botanical {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.grow-botanical img {
  width: min(280px, 100%);
  max-height: 205px;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

@media (max-width: 940px) {
  .grow-with-us {
    grid-template-columns: 1fr 1fr;
  }

  .grow-with-us .contact-card {
    grid-column: 1;
    grid-row: 2;
    width: min(520px, 100%);
    justify-self: center;
  }

  .grow-copy {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .grow-botanical {
    grid-column: 2;
    grid-row: 2;
  }

  .grow-botanical img {
    width: min(220px, 100%);
    max-height: 190px;
  }
}

@media (max-width: 640px) {
  .grow-with-us {
    grid-template-columns: 1fr;
  }

  .grow-copy,
  .grow-with-us .contact-card,
  .grow-botanical {
    grid-column: 1;
  }

  .grow-copy { grid-row: 1; }
  .grow-with-us .contact-card { grid-row: 2; }
  .grow-botanical { grid-row: 3; }

  .grow-botanical img {
    width: min(190px, 70vw);
    max-height: 170px;
  }
}



/* --- Cooking School, Beginning & Credits responsive refinements --- */
.photo-credits { font-size:.82rem; }
.photo-credits summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.photo-credit-list { display:flex; flex-direction:column; gap:5px; margin-top:10px; max-width:360px; line-height:1.35; }
.photo-credit-list a { opacity:.9; }
.photo-credit-list span { opacity:.75; }

@media (max-width: 940px) {
  .cooking-school { grid-template-columns:1fr; }
  .cooking-school-image { min-height:290px; }
  .cooking-school-copy { padding-top:28px; padding-bottom:30px; }
  .cooking-school-copy h2 { text-align:center; }
  .cooking-school-copy .eyebrow { text-align:center; }
  .beginning-images { min-height:280px; }
  .beginning-images img { min-height:280px; }
}

@media (max-width: 640px) {
  .cooking-school-image { min-height:270px; }
  .cooking-school-copy { padding-top:36px; padding-bottom:38px; }
  .beginning-images { grid-template-columns:1fr; }
  .beginning-images img { min-height:220px; max-height:280px; }
  .photo-credit-list { align-items:center; max-width:none; }
}


/* --- Final CTA + cream footer logo refinements --- */
.contact-card {
  background: var(--green-deep);
  color: var(--cream);
  border: 1px solid rgba(245,239,227,.78);
}

.contact-card::before {
  border-color: rgba(245,239,227,.55);
}

.contact-card .action-icon {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(245,239,227,.65);
}

/* Recolor the existing transparent circle-and-leaves logo for the cream footer. */
.footer-mark img {
  filter: brightness(0) saturate(100%) invert(17%) sepia(19%) saturate(1378%) hue-rotate(108deg) brightness(91%) contrast(91%);
  opacity: .96;
}

.footer-contact {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --- Footer v2: larger mark, larger script tagline, better horizontal balance --- */
.site-footer {
  grid-template-columns: .9fr 1.35fr 1fr;
  gap: 24px;
  padding-left: clamp(24px, 4.5vw, 72px);
  padding-right: clamp(24px, 4.5vw, 72px);
}

.footer-mark img {
  width: 128px;
}

.footer-mark strong {
  margin-top: 7px;
}

.footer-tagline {
  padding-left: 18px;
  padding-right: 18px;
}

.footer-tagline img {
  width: min(540px, 100%);
}

.footer-links {
  justify-self: end;
  width: max-content;
  min-width: 270px;
}

@media (max-width: 940px) {
  .site-footer {
    grid-template-columns: 1fr 1fr;
    padding-left: clamp(24px, 5vw, 48px);
    padding-right: clamp(24px, 5vw, 48px);
  }

  .footer-tagline img {
    width: min(470px, 100%);
  }

  .footer-links {
    justify-self: center;
    width: auto;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .footer-mark img {
    width: 118px;
  }

  .footer-tagline img {
    width: min(430px, 92vw);
  }
}


/* --- Footer v3: restore page texture and remove stray divider lines --- */
.site-footer {
  background: var(--cream) url('assets/paper_texture.jpg') repeat;
  border-top: 0;
}

.footer-tagline {
  border-left: 0;
  border-right: 0;
}


/* --- Footer v4: intentional structural dividers only --- */
.site-footer {
  border-top: 1px solid var(--rule);
}

.footer-tagline {
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

/* Keep Photo credits underlined, but remove the disclosure triangle. */
.photo-credits summary {
  display: flex;
  align-items: center;
  gap: 9px;
}
.photo-credits summary::-webkit-details-marker {
  display: none;
}
.photo-credits summary::marker {
  content: "";
}


/* --- Footer final polish --- */
.site-footer {
  padding-top: 12px;
  padding-bottom: 12px;
  align-items: center;
}

/* Lift/tighten the brand block slightly. */
.footer-mark {
  transform: translateY(-4px);
}

.footer-mark img {
  width: 124px;
}

.footer-mark strong {
  margin-top: 2px;
  line-height: 1.2;
}

/* Keep the separators, but make them feel lighter and less wall-like. */
.footer-tagline {
  position: relative;
  border-left: 0;
  border-right: 0;
  padding-left: 22px;
  padding-right: 22px;
}

.footer-tagline::before,
.footer-tagline::after {
  content: "";
  position: absolute;
  top: 16%;
  bottom: 16%;
  width: 1px;
  background: var(--rule);
}

.footer-tagline::before {
  left: 0;
}

.footer-tagline::after {
  right: 0;
}

/* Give the center art a little more breathing room. */
.footer-tagline img {
  width: min(500px, 94%);
}

/* Strengthen the utility column without competing with the brand. */
.footer-links {
  gap: 7px;
  font-size: .9rem;
  line-height: 1.35;
}

.footer-links > a:first-child {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem;
}

.footer-contact {
  font-size: .88rem;
}

.photo-credits {
  font-size: .78rem;
}

/* Keep mobile clean and avoid the pseudo-divider treatment when stacked. */
@media (max-width: 640px) {
  .site-footer {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .footer-mark {
    transform: none;
  }

  .footer-tagline::before,
  .footer-tagline::after {
    display: none;
  }

  .footer-tagline img {
    width: min(420px, 90vw);
  }
}


/* --- Footer final balance --- */
.site-footer {
  position: relative;
  padding-bottom: 34px;
}

/* Center the entire brand lockup in the left third. */
.footer-mark {
  justify-self: center;
  align-items: center;
  text-align: center;
  transform: translateY(-2px);
  width: 100%;
}

.footer-mark img {
  margin-left: auto;
  margin-right: auto;
}

.footer-mark strong {
  text-align: center;
}

/* Center the utility group in the right third. */
.footer-links {
  justify-self: center;
  align-items: flex-start;
  width: max-content;
  min-width: 0;
  gap: 8px;
}

/* Undo the previous all-caps YouTube treatment. */
.footer-links > a:first-child {
  text-transform: none;
  letter-spacing: normal;
  font-size: .88rem;
}

.footer-youtube,
.footer-contact {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.footer-youtube:hover span:last-child,
.footer-contact:hover span:last-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex: 0 0 18px;
  font-size: .66rem;
  line-height: 1;
}

.footer-mail {
  font-size: .82rem;
}

/* Photo credits remains intentionally quiet and underlined. */
.photo-credits {
  margin-left: 0;
}

/* Small finishing line spanning the whole footer. */
.footer-copyright {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  margin: 0;
  text-align: center;
  font-size: .68rem;
  letter-spacing: .035em;
  opacity: .72;
}

/* Keep stacked footer sensible on smaller screens. */
@media (max-width: 640px) {
  .site-footer {
    padding-bottom: 42px;
  }

  .footer-links {
    align-items: center;
  }

  .photo-credits {
    margin-left: 0;
  }

  .footer-copyright {
    bottom: 12px;
    padding: 0 18px;
  }
}


/* --- Mobile hero fix --- */
@media (max-width: 940px) {
  .hero {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .hero-copy {
    height: auto;
  }

  .hero-image {
    height: auto;
  }
}


/* --- Footer utility rows: true shared left edge --- */
.footer-links {
  width: max-content;
  justify-self: center;
  align-items: stretch;
}

.footer-youtube,
.footer-contact,
.photo-credits {
  width: 100%;
  margin-left: 0 !important;
}

.photo-credits summary {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: pointer;
}

.photo-credits summary::-webkit-details-marker {
  display: none;
}

.photo-credits summary::marker {
  content: "";
}

.photo-credits summary .footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex: 0 0 18px;
  font-size: .66rem;
  line-height: 1;
  text-decoration: none;
}

.photo-credits summary span:last-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.photo-credits[open] summary .footer-icon {
  transform: rotate(90deg);
}

/* Do not center each footer row independently at tablet/mobile widths. */
@media (max-width: 940px) {
  .footer-links {
    align-items: stretch;
    width: max-content;
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .footer-links {
    align-items: stretch;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
  }
}
