/* ==========================================================================
   Homepage. Follows the approved design doc section by section.
   The heritage story is the one place the tilted-overlap breakout is used.
   ========================================================================== */

/* ------------------------------------------------------------------ hero */

/* Centred hero on a cream gradient, exactly as the approved design. */
.ac-hero {
  text-align: center;
  padding: 64px var(--ac-gutter) 50px;
  background: linear-gradient(180deg, var(--ac-surface) 0%, var(--ac-bg) 100%);
}
.ac-hero__eyebrow {
  font-family: var(--ac-font-label);
  font-size: 13px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ac-accent-deep);
  margin: 0 0 26px;
}
.ac-hero h1 {
  font-family: var(--ac-font-heading);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 74px);
  line-height: 1.05;
  letter-spacing: -.005em;
  margin: 0 auto 26px;
  max-width: 900px;
  color: var(--ac-ink);
}
.ac-hero__lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ac-ink-body);
  max-width: 580px;
  margin: 0 auto 36px;
}
.ac-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ac-hero__cta .ac-btn { padding: 16px 34px; }

/* The image band straddles cream and espresso: the photo sits across the
   colour change, which is the move that makes this hero the design's own. */
.ac-heroband {
  padding: 0 var(--ac-gutter);
  background: linear-gradient(180deg,
    var(--ac-bg) 0%, var(--ac-bg) 60%, var(--ac-ink) 60%, var(--ac-ink) 100%);
}
.ac-heroband__frame {
  max-width: var(--ac-max);
  margin: 0 auto;
  height: 520px;
  overflow: hidden;
  border-radius: var(--ac-radius-input);
}
.ac-heroband__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------ trust band */

.ac-trust {
  background: var(--ac-ink);
  color: var(--ac-on-dark-soft);
  padding: 30px 26px;
}
.ac-trust__inner {
  max-width: var(--ac-max);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 48px;
  font-family: var(--ac-font-label);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}
.ac-trust__sep { color: var(--ac-ink-soft); }

/* --------------------------------------------------------------- featured */

.ac-featured__head {
  max-width: var(--ac-max);
  margin: 0 auto;
  padding: 64px var(--ac-gutter) 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ac-featured__head h2 { margin: 0; font-size: clamp(32px, 3.6vw, 44px); }
.ac-featured__all {
  font-family: var(--ac-font-label);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ac-accent-deep);
  text-decoration: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ story */

/* The story runs on a warm espresso ground, per the design. */
.ac-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 90px calc((100vw - min(100vw, var(--ac-max))) / 2 + var(--ac-gutter));
  margin-top: 50px;
  background: var(--ac-story-ground);
}
.ac-story__inner {
  max-width: var(--ac-max);
  margin: 0 auto;
  display: contents;
}
.ac-story__figures { position: relative; height: 480px; }
.ac-story__figures img { display: block; object-fit: cover; border-radius: var(--ac-radius-input); }
/* Absolutely positioned so the percentage height resolves against the figure
   box. Left in flow it falls back to the image's own aspect ratio, the frame
   collapses, and the recipe book below stops overlapping it entirely. */
.ac-story__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 78%;
  height: 78%;
  box-shadow: 0 18px 40px rgba(20, 12, 7, .34);
}
/* The breakout: the recipe book overlaps the frame at a slight angle. */
.ac-story__front {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48%;
  height: 52%;
  border: 6px solid var(--ac-story-ground);
  box-shadow: 0 18px 40px rgba(20, 12, 7, .4);
  transform: rotate(3deg);
}
.ac-story__label {
  font-family: var(--ac-font-label);
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ac-accent-light);
  margin: 0 0 22px;
}
.ac-story__quote {
  font-family: var(--ac-font-heading);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.1;
  margin: 0 0 24px;
  color: var(--ac-on-dark);
}
.ac-story p { font-size: 16.5px; line-height: 1.8; color: var(--ac-on-dark-soft); }
.ac-story__more {
  display: inline-block;
  font-family: var(--ac-font-label);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac-accent-light);
  text-decoration: none;
  border-bottom: 1px solid #8A6A32;
  padding-bottom: 5px;
}

/* --------------------------------------------------------------- teasers */

/* Solid grounds, not photographs: the design keeps the photography for the
   product grid and the story, and lets these two read as plain invitations. */
.ac-teasers {
  max-width: var(--ac-max);
  margin: 0 auto;
  padding: 76px var(--ac-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.ac-teaser {
  border-radius: var(--ac-radius-input);
  overflow: hidden;
  min-height: 290px;
  display: flex;
  align-items: flex-end;
  padding: 40px;
}
.ac-teaser--light { background: var(--ac-panel-warm); border: 1px solid var(--ac-line-warm); }
.ac-teaser--dark { background: var(--ac-ink); }
.ac-teaser__text { max-width: 34ch; }
.ac-teaser h3 {
  font-family: var(--ac-font-heading);
  font-weight: 600;
  font-size: 32px;
  margin: 0 0 10px;
}
.ac-teaser--light h3 { color: var(--ac-ink); }
.ac-teaser--dark h3 { color: var(--ac-on-ink); }
.ac-teaser p { font-size: 15px; line-height: 1.6; margin: 0 0 22px; max-width: 330px; }
.ac-teaser--light p { color: var(--ac-ink-body); }
.ac-teaser--dark p { color: #D8C7AD; }
.ac-teaser__label {
  font-family: var(--ac-font-label);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #D6AC4E;
  margin: 0 0 10px;
}
.ac-teaser .ac-btn { padding: 13px 28px; font-size: 12.5px; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1010px) {
  .ac-heroband__frame { height: 320px; }
  .ac-story { grid-template-columns: 1fr; gap: 36px; }
  .ac-story__figures { height: 340px; }
  .ac-teasers { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .ac-hero { padding-top: 44px; }
  .ac-trust__inner { gap: 10px 20px; font-size: 11.5px; }
  .ac-trust__sep { display: none; }
  .ac-heroband__frame { height: 220px; }
  .ac-story__figures { height: 280px; }
}