/* Ingredient movement follows pointer, scroll or an actual form state. */
:root {
  --editorial-red:#ae421f;
  --editorial-ease:cubic-bezier(.16,1,.3,1);
}
.ingredient-card {
  position:relative;
  perspective:1100px;
  outline-offset:9px;
}
.ingredient-card:focus-visible,
.process-explorer :is(button,a):focus-visible {
  outline:3px solid var(--editorial-red);
  outline-offset:5px;
}
.ingredient-card figure {
  position:relative;
  isolation:isolate;
}
.ingredient-card img {
  transform:scale(1.01);
  transform-origin:50% 58%;
  transition:transform 360ms var(--editorial-ease);
}
.ingredient-card figure::after {
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(246,247,242,.8);
  pointer-events:none;
  transform:scale(.94);
  opacity:0;
  transition:transform 280ms var(--editorial-ease),opacity 180ms ease;
}
.ingredient-contour {
  position:absolute;
  z-index:1;
  inset:auto 28px 28px;
  display:grid;
  pointer-events:none;
  font-size:clamp(30px,3vw,48px);
  font-weight:600;
  line-height:1.03;
  letter-spacing:-.03em;
  color:var(--paper,#f6f7f2);
  text-shadow:0 3px 22px rgba(27,35,55,.45);
  transform:translateY(16px);
  opacity:0;
  transition:transform 280ms var(--editorial-ease),opacity 180ms ease;
}
.ingredient-contour span {
  grid-area:1/1;
}
.ingredient-contour-outline {
  color:transparent;
  -webkit-text-stroke:1px var(--paper,#f6f7f2);
}
.ingredient-contour-solid {
  clip-path:inset(0 0 100%);
  transition:clip-path 420ms var(--editorial-ease);
}
.ingredient-card:is(:hover,:focus-within,.is-touched) figure::after {
  transform:scale(1);
  opacity:1;
}
.ingredient-card:is(:hover,:focus-within,.is-touched) .ingredient-contour {
  opacity:1;
  transform:translateY(0);
}
.ingredient-card:is(:hover,:focus-within,.is-touched) .ingredient-contour-solid {
  clip-path:inset(0);
}
.ingredient-card:focus-visible .ingredient-contour,
.ingredient-card:focus-visible .ingredient-contour-solid,
.ingredient-card:focus-visible figure::after {
  transition:none;
}
.ingredient-card .card-link {
  transition:color 150ms ease,text-decoration-color 150ms ease;
}
.ingredient-card:is(:hover,:focus-visible) .card-link {
  color:var(--editorial-red);
}
.ingredient-interlude {
  padding-block:70px 90px;
  overflow:clip;
  contain:paint;
}
.ingredient-interlude-window {
  margin-inline:-4vw;
  padding-block:8px;
}
.ingredient-interlude-rail {
  display:flex;
  gap:.35em;
  width:max-content;
  white-space:nowrap;
  font-size:clamp(62px,8.8vw,126px);
  font-weight:500;
  line-height:.99;
  letter-spacing:-.04em;
  color:var(--editorial-red);
}
.ingredient-interlude-rail span::after {
  content:" /";
  opacity:.45;
}
.ingredient-interlude-rail-outline {
  margin-left:-20vw;
  color:transparent;
  -webkit-text-stroke:1px var(--ink,#1b2337);
}
.ingredient-interlude-copy {
  display:flex;
  gap:45px;
  align-items:end;
  justify-content:space-between;
  margin-top:45px;
}
.ingredient-interlude-copy h2 {
  font-size:clamp(30px,3.4vw,48px);
  max-width:650px;
}
.ingredient-interlude-copy p {
  max-width:360px;
  font-size:16px;
  color:var(--muted,#596358);
}
.page-top.editorial-top {
  position:relative;
  isolation:isolate;
  padding-right:min(31vw,420px);
  min-height:335px;
}
.page-top.editorial-top > :not(.page-top-spice) {
  position:relative;
  z-index:1;
}
.page-top-spice {
  position:absolute;
  right:var(--gutter);
  bottom:16px;
  width:min(31vw,390px);
  height:270px;
  pointer-events:none;
  user-select:none;
}
.page-top-spice img {
  position:absolute;
  width:100%;
  object-fit:contain;
}
.page-top-spice .page-top-spice-bowl {
  bottom:0;
  right:0;
}
.page-top-spice .page-top-spice-scoop {
  width:70%;
  right:5%;
  top:-6%;
  transform-origin:20% 70%;
  transform:translateY(-8px) rotate(-12deg);
}
.process-explorer {
  padding-block:60px 80px;
}
.process-path {
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  gap:24px;
  align-items:center;
  padding-bottom:30px;
  border-bottom:1px solid #bcc5b8;
  color:var(--muted,#596358);
}
.process-path svg {
  width:100%;
  height:12px;
  stroke:var(--editorial-red);
  stroke-width:1;
  fill:none;
}
.process-explorer-body {
  display:grid;
  grid-template-columns:.95fr 1.1fr 1.05fr;
  gap:38px;
  padding-top:32px;
}
.process-products {
  border:0;
  padding:0;
  min-width:0;
}
.process-explorer h3,.process-products legend {
  font-size:20px;
  font-weight:500;
  margin-bottom:25px;
}
.process-controls {
  display:none;
}
.editorial-ready .process-controls {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.editorial-ready .process-no-js {
  display:none;
}
.process-controls button {
  text-align:left;
  border:0;
  border-radius:0;
  background:transparent;
  padding:11px 14px;
  font:inherit;
  font-size:21px;
  cursor:pointer;
  color:var(--ink,#1b2337);
  transition:background-color 140ms ease,color 140ms ease;
}
.process-controls button[aria-pressed="true"] {
  background:var(--ink,#1b2337);
  color:var(--paper,#f6f7f2);
}
.process-controls button:hover:not([aria-pressed="true"]) {
  background:var(--sage,#e8eee4);
}
.process-controls button:active {
  transform:scale(.98);
}
.process-group-row {
  display:flex;
  align-items:stretch;
  border-bottom:1px solid #b8c2b4;
  min-height:63px;
}
.process-group-choice {
  display:none;
  flex:1;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:0;
  padding:13px 0;
  background:transparent;
  font:inherit;
  text-align:left;
  cursor:pointer;
  color:var(--ink,#1b2337);
}
.editorial-ready .process-group-choice {
  display:flex;
}
.process-group-choice svg {
  opacity:0;
  flex-shrink:0;
  color:var(--editorial-red);
}
.process-group-choice[aria-pressed="true"] {
  color:var(--editorial-red);
  font-weight:600;
}
.process-group-choice[aria-pressed="true"] svg {
  opacity:1;
}
.process-explorer :is(.process-group-choice,.process-group-link,.text-link) svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
}
.process-group-link {
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 9px;
  min-width:44px;
  justify-content:center;
}
.process-group-link::before {
  content:attr(aria-label);
}
.editorial-ready .process-group-link::before {
  display:none;
}
.process-result {
  padding:26px;
  background:var(--sage,#e8eee4);
  align-self:start;
}
.process-result h3 {
  margin-bottom:18px;
}
.process-selection {
  font-size:26px;
  line-height:1.15;
  margin-bottom:20px;
}
.process-result [data-process-prompt-output] {
  color:var(--ink,#1b2337);
}
.process-result-note {
  margin-block:20px;
  font-size:13px;
  color:var(--muted,#596358);
}
.process-result .text-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.process-status {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
.inquiry-journey {
  position:relative;
  margin-block:28px 34px;
}
.inquiry-journey-line {
  position:absolute;
  top:0;
  left:10%;
  width:80%;
  height:32px;
  fill:none;
  stroke:#acb7a5;
  stroke-width:1.5;
}
.inquiry-journey-progress {
  stroke:var(--editorial-red);
  stroke-width:2.5;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 360ms var(--editorial-ease);
}
.inquiry-journey ol {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
.inquiry-journey li {
  text-align:center;
  font-size:12px;
  color:var(--muted,#596358);
}
.inquiry-step-mark {
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 8px;
  background:var(--sage,#e8eee4);
  border:1px solid #87967d;
  border-radius:50%;
  transition:background-color 180ms ease,border-color 180ms ease;
}
.inquiry-step-mark svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:var(--paper,#f6f7f2);
  stroke-width:1.5;
  opacity:0;
}
.inquiry-journey li[data-state="complete"] {
  color:var(--ink,#1b2337);
}
.inquiry-journey li[data-state="complete"] .inquiry-step-mark {
  background:var(--editorial-red);
  border-color:var(--editorial-red);
}
.inquiry-journey li[data-state="complete"] svg {
  opacity:1;
}
.inquiry-journey li[aria-current="step"] .inquiry-step-mark {
  border:2px solid var(--ink,#1b2337);
}
.inquiry-journey-status {
  min-height:2.8em;
  margin-top:17px;
  color:var(--muted,#596358);
  font-size:13px;
}
@media(max-width:1000px) {
  .process-explorer-body {gap:24px;grid-template-columns:1fr 1.1fr}
  .process-result {grid-column:1/-1;max-width:650px}
  .page-top.editorial-top {padding-right:28%;min-height:300px}
  .page-top-spice {width:30%;height:220px;right:var(--gutter)}
}
@media(max-width:680px) {
  .ingredient-contour {inset:auto 24px 24px;font-size:38px}
  .ingredient-interlude {padding-block:38px 55px}
  .ingredient-interlude-copy {display:block;margin-top:28px}
  .ingredient-interlude-copy p {margin-top:20px;max-width:420px}
  .page-top.editorial-top {padding-right:var(--gutter);min-height:0;padding-bottom:25px}
  .page-top-spice {position:relative;width:175px;height:128px;right:auto;bottom:auto;margin:3px 0 -12px auto}
  .page-top-spice .page-top-spice-scoop {top:-12px}
  .process-explorer {padding-block:35px 55px}
  .process-path {display:none}
  .process-explorer-body {display:block;padding-top:0}
  .process-products legend,.process-explorer h3 {margin-bottom:16px}
  .editorial-ready .process-controls {flex-direction:row;flex-wrap:wrap;gap:5px}
  .process-controls button {padding:11px 12px;font-size:17px}
  .process-groups {margin-top:30px}
  .process-result {margin-top:30px;padding:25px}
  .inquiry-journey li {font-size:10px;line-height:1.35}
  .inquiry-journey ol {gap:4px}
}
@media(prefers-reduced-motion:reduce) {
  .ingredient-card img,.ingredient-card figure::after,
  .ingredient-contour,.ingredient-contour-solid,
  .inquiry-journey-progress {transition:none!important;transform:none!important}
  .ingredient-interlude-rail,.page-top-spice img {transform:none!important}
}
