.herbs-intro{padding-top:30px}.herbs-case .project-back{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-size:14px;margin-bottom:30px}.herbs-heading{display:grid;grid-template-columns:1.45fr 1fr;gap:60px;align-items:end;padding-bottom:40px}.herbs-case .eyebrow{color:#697e47;font-size:12px;margin:0 0 20px}.herbs-heading h1{font-size:clamp(40px,5.4vw,72px);line-height:1.06;letter-spacing:-.055em;font-weight:600;margin:0}.herbs-heading h1 span{color:#797b73}.herbs-heading>p{font-size:18px;line-height:1.65;color:#6b6d65;margin:0;max-width:360px}.herbs-hero img{display:block;width:100%;height:auto;border-radius:22px}.herbs-hero>p{display:flex;justify-content:space-between;gap:20px;font-size:13px;line-height:1.5;margin:16px 0 0}.herbs-hero>p span{color:#767870}.herbs-story{display:grid;grid-template-columns:1fr 1.5fr;gap:70px;padding-top:72px;padding-bottom:72px}.herbs-case h2{font-size:clamp(30px,3.8vw,48px);letter-spacing:-.045em;line-height:1.1;font-weight:600;margin:0}.herbs-story>div>p:not(.eyebrow){font-size:18px;line-height:1.75;margin:0;color:#65675f}.herbs-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;border-top:1px solid var(--line);margin-top:32px;padding-top:24px}.herbs-facts span,.herbs-facts strong{display:block;font-size:13px;line-height:1.5}.herbs-facts span{color:#77796f;margin-bottom:8px}.herbs-facts strong{font-weight:500}.herbs-artwork{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;border-top:1px solid var(--line);padding-top:48px;padding-bottom:56px}.herbs-artwork img{width:100%;height:auto;border-radius:18px;max-width:480px;justify-self:end}.herbs-artwork p:not(.eyebrow){font-size:16px;line-height:1.65;color:#6b6d65;max-width:360px;margin:22px 0 28px}.herbs-next{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding:30px 0 56px}.herbs-next a{font-size:14px;line-height:1.5}.herbs-next span{margin-left:12px;color:var(--accent)}@media(max-width:850px){.herbs-heading{grid-template-columns:1fr;gap:24px}.herbs-heading>p{max-width:580px}.herbs-story,.herbs-artwork{gap:32px}.herbs-facts{grid-template-columns:1fr;gap:16px}}@media(max-width:600px){.herbs-intro{padding-top:20px}.herbs-case .project-back{margin-bottom:24px}.herbs-heading{padding-bottom:30px}.herbs-heading>p{font-size:17px}.herbs-hero img{border-radius:16px}.herbs-hero>p{flex-wrap:wrap;gap:4px;font-size:12px}.herbs-story{grid-template-columns:1fr;gap:24px;padding-top:48px;padding-bottom:48px}.herbs-story>div>p:not(.eyebrow){font-size:17px}.herbs-facts{grid-template-columns:1fr 1fr;gap:20px}.herbs-artwork{grid-template-columns:1fr;padding-top:36px;padding-bottom:40px}.herbs-artwork img{justify-self:center;max-width:100%}.herbs-next{flex-direction:column;gap:20px;padding-bottom:40px}}

/* Keep each case study on the shared page grid, without image cropping. */
.herbs-heading{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:48px}
.herbs-heading>*,.herbs-story>*,.herbs-artwork>*{min-width:0}
.herbs-heading h1,.herbs-artwork h2{overflow-wrap:break-word}
.herbs-story{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:48px;padding-top:var(--section-space);padding-bottom:var(--section-space)}
.herbs-artwork{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;padding-top:48px;padding-bottom:48px}
.herbs-hero>p{align-items:baseline;flex-wrap:wrap}
.herbs-hero>p span{text-align:right}
.herbs-next{align-items:baseline;padding-top:28px;padding-bottom:48px}
.herbs-next>a{min-width:0;overflow-wrap:break-word}
@media(max-width:850px){.herbs-heading{grid-template-columns:1fr;gap:24px}.herbs-story,.herbs-artwork{gap:32px}}
@media(max-width:760px){.herbs-story,.herbs-artwork{grid-template-columns:1fr;gap:28px}.herbs-artwork{padding-top:36px;padding-bottom:36px}.herbs-artwork img{justify-self:center;max-width:100%}.herbs-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.herbs-next{padding-bottom:36px}}
@media(max-width:600px){.herbs-heading{padding-bottom:28px}.herbs-hero>p{gap:6px}.herbs-hero>p span{text-align:left}.herbs-next{align-items:flex-start}.herbs-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(max-width:380px){.herbs-facts{grid-template-columns:1fr}}

/* Fit the complete presentation and caption inside a viewport. */
.herbs-case .herbs-hero{--presentation-ratio:1.5;max-width:min(var(--layout-width),calc((100vh - 180px)*var(--presentation-ratio)));max-width:min(var(--layout-width),calc((100svh - 180px)*var(--presentation-ratio)))}
.herbs-case .herbs-hero>img{display:block;width:100%;height:auto;background:transparent}
