/* Reference-led homepage presentation; existing story sections retain their layouts. */
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/lora-latin.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/source-sans-3-latin.woff2') format('woff2'); }
.site-header .container, .botanical-home .container { width: min(calc(100% - var(--gutter) * 2), 82rem); }
.site-header .wordmark { gap: .65rem; font-size: clamp(1.6rem, 2.6vw, 2.65rem); line-height: 1.15; }
.home-icon { width: 2.7rem; height: 2.7rem; flex: 0 0 auto; }
.brand-symbol { width: 3rem; height: 3rem; }
.brand-lockup { display: grid; gap: .25rem; text-align: center; }
.brand-lockup small { font: 600 .7rem/1.3 var(--body); letter-spacing: .27em; }
.site-header .header-row { min-height: 104px; }
.site-header.is-scrolled .header-row { min-height: 80px; }
.site-header .nav-list a { font-family: var(--display); font-weight: 400; }
.site-header .button { min-height: 54px; padding-inline: 1.3rem; font-size: 1.1rem; }
.button .home-icon { width: 1.65rem; height: 1.65rem; }
.botanical-home { display: block; width: 100%; padding: 0; overflow: clip; background: #f8f5ed; isolation: isolate; }
.hero-layout { position: relative; display: grid; grid-template-areas: 'copy' 'media' 'ingredients'; gap: 1.8rem; padding-block: 2.5rem 2rem; }
.botanical-home .hero-copy { grid-area: copy; z-index: 2; }
.botanical-home h1 { max-width: 12ch; font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1.08; font-weight: 400; letter-spacing: -.045em; }
.botanical-home .eyebrow { font-size: .95rem; letter-spacing: .065em; margin-bottom: 1.1rem; }
.botanical-home .lead { max-width: 38ch; margin-top: 1.35rem; font-size: 1.15rem; line-height: 1.5; color: #505e4f; }
.botanical-home .hero-actions { flex-direction: row; flex-wrap: wrap; gap: .85rem; margin-top: 1.8rem; }
.botanical-home .hero-actions .button { min-height: 54px; width: auto; padding: .85rem 1.25rem; font-size: 1.05rem; }
.botanical-home .button--secondary { background: rgba(248,245,237,.45); border-color: #82967d; }
.botanical-home .hero-media { grid-area: media; width: calc(100% + var(--gutter) * 2); max-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 0; justify-self: center; overflow: visible; }
.botanical-home .hero-media picture { display: block; }
.botanical-home .hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 0; mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 94%, transparent); }
.botanical-home .hero-media .media-note { font-size: .7rem; margin: .4rem 1rem 0; text-align: right; color: #59645b; }
.hero-ingredients { grid-area: ingredients; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; }
.hero-ingredients li { position: relative; min-width: 0; }
.hero-ingredients li + li::before { content: ''; position: absolute; top: 32%; left: 0; height: 42%; width: 1px; background: #b7c3ae; }
.hero-ingredients a { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; padding-inline: .45rem; text-decoration: none; color: var(--primary); font: 400 .95rem/1.3 var(--display); }
.hero-ingredients a > span:last-child { max-width: 12ch; }
.home-ingredient-image { display: block; width: clamp(4.7rem, 8vw, 6.7rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #e6e9dc; transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); }
.home-ingredient-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 280ms var(--ease); }
.home-feature-band { position: relative; background: rgba(230,235,221,.8); border-top: 1px solid rgba(184,195,170,.28); }
.home-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem .5rem; list-style: none; padding: 1.5rem 0; margin-block: 0; }
.home-features li { display: flex; align-items: center; justify-content: center; gap: .7rem; font: 400 .93rem/1.35 var(--display); color: var(--primary); }
.home-features li:nth-child(even) { border-left: 1px solid #bbc5b2; }
.home-features .home-icon { width: 2.2rem; height: 2.2rem; }
.hero-foliage { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('/assets/images/home-curry.webp') no-repeat -9rem 95% / 21rem; opacity: .2; filter: blur(9px); transform: rotate(-8deg); }
.motion-enabled .hero-foliage { animation: home-foliage-drift 14s ease-in-out infinite; }
@keyframes home-foliage-drift { 50% { translate: 8px -12px; rotate: 2deg; } }
@media (hover: hover) and (pointer: fine) {
  .botanical-home .button:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 22px #254d3c26; }
  .hero-ingredients a:hover .home-ingredient-image { transform: translateY(-4px); box-shadow: 0 8px 18px #254d3c20; }
  .hero-ingredients a:hover img { transform: scale(1.05); }
}
.botanical-home .button:active { transform: scale(.96); }
@media (min-width: 768px) {
  .hero-layout { padding-top: 3rem; }
  .botanical-home .hero-media { max-width: 42rem; }
  .hero-ingredients { max-width: 36rem; width: 100%; justify-self: center; }
  .hero-ingredients a { font-size: 1.15rem; }
  .home-features { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 2rem; gap: 0; }
  .home-features li + li { border-left: 1px solid #bbc5b2; }
}
@media (min-width: 1024px) {
  .site-header .primary-nav { gap: 2.75rem; }
  .site-header .nav-list { gap: 2.25rem; }
  .hero-layout { grid-template-columns: 47% 53%; grid-template-areas: 'copy media' 'ingredients media'; column-gap: 0; row-gap: 2rem; align-items: center; padding-block: 2.5rem 2rem; }
  .botanical-home .hero-copy { align-self: end; padding-right: 1.2rem; }
  .botanical-home .hero-media { width: calc(100% + 3rem); max-width: none; margin: -2.5rem -3rem -2rem 0; align-self: stretch; }
  .botanical-home .hero-media picture { height: calc(100% - 1.5rem); position: relative; isolation: isolate; }
  .botanical-home .hero-media picture::before { content: ''; position: absolute; inset: 2% 0; z-index: -1; background: url('/assets/images/home-hero.webp') center / cover; filter: blur(24px); opacity: .25; mask-image: linear-gradient(to right, transparent, #000 35%, #000 65%, transparent); }
  .botanical-home .hero-media img { width: 100%; height: 100%; min-height: 650px; max-height: 750px; object-fit: contain; mask-image: linear-gradient(to right, transparent 3%, #000 21%, #000 82%, transparent 99%); }
  .botanical-home .lead { font-size: 1.3rem; }
  .hero-ingredients { justify-self: start; align-self: start; max-width: 31rem; padding-bottom: 1rem; }
  .home-features li { gap: 1rem; font-size: 1.1rem; }
  .home-features .home-icon { width: 2.7rem; height: 2.7rem; }
}
@media (max-width: 767px) {
  .site-header .header-row { min-height: 84px; gap: .6rem; }
  .site-header.is-scrolled .header-row { min-height: 68px; }
  .brand-symbol { width: 2rem; height: 2.4rem; }
  .botanical-home .hero-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-foliage { animation: none !important; }
  .home-ingredient-image, .home-ingredient-image img { transition: none; }
  .hero-ingredients a:hover .home-ingredient-image, .hero-ingredients a:hover img, .botanical-home .button:is(:hover, :active) { transform: none; }
}

/* Feather the actual hero bitmap, rather than the larger contain-fit box. */
.botanical-home .hero-media picture { height: auto; }
.botanical-home .hero-media picture::before { content: none; }
.botanical-home .hero-media img {
  width: 100%; height: auto; min-height: 0; max-height: none; margin-inline: auto; object-fit: contain;
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 92%, transparent);
  mask-composite: intersect;
}
@media (min-width: 1024px) {
  .botanical-home .hero-media img { width: min(100%, 600px); height: auto; aspect-ratio: 4/5; }
}

/* A darker, full-bleed editorial chapter; deliberately separate from the hero. */
.editorial-story { padding: 0; background: #102c20; overflow: clip; }
.editorial-story .product-story-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; }
.editorial-story .product-story-visual { position: relative; top: auto; width: 100%; margin: 0; }
.editorial-story .product-story-visual picture { display: block; height: 100%; }
.editorial-story .product-story-visual img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; border-radius: 0; }
.editorial-story .product-story-visual .media-note { position: absolute; bottom: .7rem; left: 1rem; margin: 0; font-size: .7rem; color: #f8f5ed; padding: .2rem .5rem; background: #102c20c9; }
.editorial-story .product-story-copy { padding: 3rem var(--gutter); position: relative; z-index: 1; }
.editorial-story .product-story-copy .eyebrow { color: #c1b983; letter-spacing: .2em; font-size: .8rem; display: flex; align-items: center; gap: 1.2rem; }
.editorial-story .eyebrow::after { content: ''; width: 4rem; height: 1px; background: #8a9663; }
.editorial-story h2 { font-size: clamp(2rem, 3.3vw, 3.4rem); line-height: 1.18; font-weight: 400; color: #f8f5ed; }
.editorial-story .product-story-copy > p:not(.eyebrow) { max-width: 46ch; color: #e8e9db; font-size: 1.1rem; line-height: 1.6; }
.editorial-story .story-detail { display: block; border: 0; margin-top: 2rem; padding: 0; text-align: center; }
.story-divider { display: flex; align-items: center; gap: 1rem; }
.story-divider::before, .story-divider::after { content: ''; flex: 1; height: 1px; background: #637453; }
.story-divider .home-icon { width: 2rem; height: 2rem; }
.editorial-story .story-detail p { font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.35; margin-top: .8rem; }
.story-ingredients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 2rem 0; padding: 0; }
.story-ingredients li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; font-size: 1rem; line-height: 1.4; }
.story-ingredients li + li { border-left: 1px solid #637453; }
.story-ingredients .home-icon { width: 2.5rem; height: 2.5rem; }
.editorial-story .story-cta { display: flex; width: fit-content; margin: 0 auto; background: #f8f5ed; color: #183c2b; border-color: #f8f5ed; padding: .9rem 1.6rem; font: 400 1.05rem/1.4 var(--display); }
.editorial-story .story-cta:hover { background: #e6ebdd; border-color: #e6ebdd; color: #183c2b; }
.story-margin { display: none; }
@media (min-width: 1024px) {
  .editorial-story .product-story-layout { grid-template-columns: 50% 44% 6%; }
  .editorial-story .product-story-copy { align-self: center; padding: 3.5rem clamp(2rem, 4vw, 4.5rem); }
  .editorial-story .product-story-visual img { min-height: 760px; max-height: 940px; }
  .story-margin { display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-left: 1px solid #53644866; padding: 3.8rem .9rem; color: #c1b983; }
  .story-margin > span { font-size: .55rem; line-height: 1.8; letter-spacing: .15em; overflow-wrap: anywhere; }
  .story-margin .home-icon { width: 170%; height: 20rem; margin-left: -35%; opacity: .5; stroke-width: .55; }
}
@media (min-width: 1440px) {
  .editorial-story .product-story-copy { padding-inline: 3.5rem; }
  .story-margin > span { font-size: .65rem; }
}

/* Ingredient photography dissolves at its edges; subjects stay crisp. */
.ingredients-story .ingredient-media { border-radius: 0; overflow: visible; }
.ingredients-story .ingredient-media img, .ingredients-story .ingredient-scene .media-image img {
  border-radius: 0; aspect-ratio: 1; object-fit: contain;
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 65%, #000 78%, transparent 100%);
}
.ingredients-story .ingredient-media .media-note { text-align: center; font-size: .7rem; }
@media (min-width: 1024px) {
  .ingredients-story .ingredient-scene .media-image img { width: auto; max-width: 100%; height: 100%; margin-inline: auto; }
}
@media (hover: hover) and (pointer: fine) {
  .ingredients-story .ingredient-item:hover .ingredient-media { box-shadow: none; }
}
/* Targeted refinements to the approved composition and shared page grid. */
.site-header .container, .botanical-home .container, .about-editorial.container, #contact.container { width: min(calc(100% - var(--gutter) * 2), 82rem); }
.botanical-home h1 { font-size: clamp(2.7rem, 6.4vw, 6rem); }
.hero-detail { position: relative; z-index: 2; margin: 0; padding-bottom: 1.5rem; color: var(--muted); font: italic .95rem/1.5 var(--display); }
.about-editorial .video-block { max-width: none; margin-inline: 0; }
.about-editorial .story { align-items: start; margin-bottom: 2rem; }
.about-editorial .story > div > p:first-child { margin-top: 0; }
#contact { align-items: start; }
#contact > div:first-child > p:last-child { max-width: 38ch; }
@media (min-width: 1024px) {
  .site-header .primary-nav { gap: clamp(1rem, 2vw, 2rem); }
  .site-header .nav-list, .nav-enhanced .primary-nav .nav-list { gap: clamp(.8rem, 1.5vw, 1.5rem); }
  .hero-layout { padding-top: 3.5rem; row-gap: 1.5rem; }
  .botanical-home .hero-media img { width: min(100%, 640px); }
  .about-editorial .story, #contact { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); column-gap: 3rem; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-header .wordmark { font-size: 1.6rem; gap: .4rem; }
  .site-header .brand-symbol { width: 2.3rem; }
  .site-header .button { padding-inline: .8rem; font-size: .95rem; }
  .site-header .nav-list a { font-size: .95rem; }
}
/* Hero-only composition, following the supplied editorial reference. */
#home { position: relative; }
#home .hero-layout { grid-template-areas: 'copy' 'ingredients' 'detail' 'media'; gap: 1.8rem; padding-block: 2.5rem 0; }
#home .hero-copy { padding: 0; }
#home .eyebrow { display: flex; align-items: center; gap: 1.5rem; letter-spacing: .2em; font-size: .8rem; font-weight: 400; color: #a57542; }
#home .eyebrow::after { content: ''; width: 4rem; height: 1px; background: #b7976e; }
#home h1 { font-size: clamp(3rem, 6vw, 6rem); line-height: 1.03; letter-spacing: -.04em; }
#home .lead { max-width: 43ch; font-size: 1.15rem; line-height: 1.45; margin-top: 1.6rem; }
#home .hero-actions { margin-top: 2rem; gap: .9rem; }
#home .hero-actions .button { font-family: var(--display); font-weight: 500; }
#home .hero-ingredients { max-width: 28rem; justify-self: start; padding: 0; }
#home .hero-ingredients a { font: 400 .95rem/1.35 var(--body); gap: .35rem; }
#home .home-ingredient-image { width: 2.2rem; height: 2.2rem; border-radius: 0; background: none; overflow: visible; }
#home .home-ingredient-image .home-icon { width: 100%; height: 100%; }
#home .hero-ingredients li + li::before { top: 6%; height: 88%; background: #d9d2c4; }
#home .hero-detail { grid-area: detail; align-self: start; border-left: 1px solid #a57542; padding: 0 0 0 1.6rem; font: italic 1.35rem/1.4 var(--display); color: #a57542; }
#home .hero-media { margin-block: 0; }
#home .hero-media img { mask-image: linear-gradient(to right, transparent, #000 20%, #000 87%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 87%, transparent); mask-composite: intersect; }
#home .hero-foliage { background-position: -10rem 88%; background-size: 24rem; opacity: .28; }
#home .hero-editorial-rail { display: none; }
@media (min-width: 1024px) {
  #home .hero-layout { min-height: clamp(720px, 50vw, 840px); grid-template-columns: 44% 56%; grid-template-areas: 'copy media' 'ingredients media' 'detail media'; grid-template-rows: auto auto auto; align-content: center; row-gap: 2.6rem; padding-block: 4rem 4.5rem; }
  #home .hero-copy { align-self: start; }
  #home .hero-media { position: absolute; right: -5.5rem; top: -2.5rem; bottom: -1rem; width: 63%; margin: 0; pointer-events: none; }
  #home .hero-media picture { height: 100%; display: flex; justify-content: center; }
  #home .hero-media img { width: auto; height: 100%; max-width: none; min-height: 0; object-fit: contain; aspect-ratio: 4/5; }
  #home .hero-copy, #home .hero-ingredients, #home .hero-detail { z-index: 2; }
  #home .lead { max-width: 41ch; font-size: 1.25rem; }
  #home .hero-actions { flex-wrap: nowrap; }
  #home .hero-actions .button { padding-inline: 1.3rem; font-size: 1.05rem; }
  #home .hero-detail { font-size: 1.5rem; }
  #home .hero-editorial-rail { position: absolute; top: 1.5rem; bottom: 3rem; right: 1.6rem; width: 4.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; color: #7c815e; pointer-events: none; }
  #home .hero-editorial-rail span { font-size: .6rem; letter-spacing: .18em; line-height: 1.8; text-align: center; }
  #home .hero-editorial-rail .home-icon { width: 1.5rem; height: 1.5rem; }
  #home .hero-editorial-rail i { width: 1px; flex: 1; background: linear-gradient(transparent,#a49e7e,transparent); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  #home .hero-actions { flex-wrap: wrap; }
  #home .hero-layout { row-gap: 2rem; }
  #home .hero-editorial-rail { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  #home .hero-ingredients a:hover .home-ingredient-image { box-shadow: none; }
}
@media (min-width: 1024px) {
  #home .hero-media { grid-area: auto; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  #home .hero-media { right: -2rem; width: 56%; }
  #home .hero-media img { max-width: 100%; height: auto; align-self: center; }
}
/* Responsive image sizing only; retain the desktop composition and motion. */
@media (max-width: 1023px) {
  #home .hero-media { width: min(100vw, 40rem); max-width: none; margin-inline: 0; justify-self: center; }
  #home .hero-media picture { display: block; width: 100%; height: auto; }
  #home .hero-media img { width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 5; object-fit: contain; }
  #product .product-story-visual { min-width: 0; }
  #product .product-story-visual picture { display: block; width: min(100%, 40rem); height: auto; margin-inline: auto; }
  #product .product-story-visual img { width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 5; object-fit: contain; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  #product .product-story-visual { align-self: center; }
  #product .product-story-visual picture { height: auto; }
  #product .product-story-visual img { height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 5; object-fit: contain; }
}

/* Responsive layout audit: contained grids and distinct product chapters. */
@media (max-width: 1024px) {
  #home .hero-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'media' 'copy' 'ingredients' 'detail'; grid-template-rows: auto; gap: 1.75rem; min-height: 0; padding-block: 1.5rem 3rem; }
  #home .hero-layout > * { min-width: 0; }
  #home .hero-media { position: relative; grid-area: media; inset: auto; width: min(86%, 25rem); max-width: 100%; margin: 0; align-self: center; justify-self: center; }
  #home .hero-media picture { display: block; height: auto; width: 100%; }
  #home .hero-media img { width: 100%; height: auto; max-width: 100%; min-height: 0; max-height: none; aspect-ratio: 4 / 5; object-fit: contain; }
  #home .hero-copy { width: 100%; min-width: 0; }
  #home .hero-actions { flex-wrap: wrap; }
  #home .hero-actions .button { max-width: 100%; }
  #home .hero-ingredients { width: 100%; }
  #home .hero-editorial-rail { display: none; }
  #product { padding-top: clamp(1.5rem, 4vw, 3rem); }
  #product .product-story-visual { width: calc(100% - var(--gutter) * 2); margin-inline: auto; }
  #product .product-story-visual picture { width: min(100%, 34rem); height: auto; }
  #product .product-story-visual img { width: 100%; height: auto; min-height: 0; max-height: none; object-fit: contain; aspect-ratio: 4 / 5; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  #home .hero-layout { grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); grid-template-areas: 'media copy' 'media ingredients' 'media detail'; column-gap: 1.75rem; row-gap: 1.5rem; padding-block: 3rem; }
  #home .hero-media { width: 100%; max-width: 22rem; align-self: center; }
  #home .hero-actions .button { width: 100%; }
  #product .product-story-layout { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: center; }
  #product .product-story-visual { width: calc(100% - var(--gutter)); margin: 0 0 0 var(--gutter); }
  #product .product-story-copy { padding: 2rem var(--gutter); }
  #product .story-margin { display: none; }
}