/* The recipe editor is open on the coffee home page, without a second route. */
.home-blend {
  --blend-paper: #ede9df;
  background: var(--blend-paper);
  color: #142c22;
  padding: 48px 0 82px;
  scroll-margin-top: 110px;
}
.home-blend, .home-blend * { box-sizing: border-box; }
.home-blend-shell { width: min(calc(100% - clamp(48px, 8.4vw, 160px)), 1500px); margin-inline: auto; }
.home-blend-heading { border-top: 1px solid #142c2235; padding-top: 40px; margin-bottom: 36px; }
.home-blend-heading h2 { margin: 0; font: 400 clamp(42px, 4.5vw, 68px)/1.08 Manrope, Arial, sans-serif; letter-spacing: -.055em; }
.home-blend-heading h2 em { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 1.12em; }
.home-blend .blend-layout { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: clamp(36px, 5.5vw, 84px); }
.home-blend .blend-editor { border-top: 0; padding-top: 0; }
.home-blend .blend-fields { margin-bottom: 34px; }
.home-blend .blend-fields :is(input, select) { min-height: 44px; }
.home-blend .blend-editor-heading { margin-bottom: 20px; }
.home-blend .blend-editor-heading h3 { font: 400 27px/1.3 Manrope, Arial, sans-serif; letter-spacing: -.04em; margin: 0; }
.home-blend .blend-rows { min-height: 0; }
.home-blend .blend-row { padding: 19px 0 21px; }
.home-blend .blend-row-top { margin-bottom: 15px; }
.home-blend .blend-slider { height: 30px; }
.home-blend .blend-result { top: 110px; padding: 28px; border-color: #17372b; }
.home-blend .blend-result-header h3 { font: 400 17px/1.5 Manrope, Arial, sans-serif; margin: 0; letter-spacing: -.02em; color: inherit; }
.home-blend .blend-summary-name { margin-block: 22px; }
.home-blend .blend-chart-row { margin-block: 22px 26px; }
.home-blend :is(input, select, button, a):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 1100px) {
  .home-blend .blend-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
  .home-blend .blend-result { padding: 24px 22px; }
}
@media (max-width: 850px) {
  .home-blend { padding-top: 30px; padding-bottom: 54px; }
  .home-blend-heading { padding-top: 30px; margin-bottom: 30px; }
  .home-blend .blend-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-blend .blend-result { position: static; }
  .home-blend .blend-fields :is(input, select), .home-blend .blend-add select { font-size: 16px; }
}
@media (max-width: 600px) {
  .home-blend { scroll-margin-top: 92px; }
  .home-blend-heading h2 { font-size: clamp(39px, 11vw, 48px); }
  .home-blend .blend-editor-heading h3 { font-size: 25px; }
  .home-blend .blend-fields { margin-bottom: 30px; }
  .home-blend .blend-result { padding: 24px 21px; }
  .home-blend .blend-result-header h3 { font-size: 19px; }
}