/* Shared ingredient view. Text stays in flow, outside every animated portrait. */
.ingredient-dialog {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border: 0; padding: 0; color: var(--ink);
  background: var(--paper) url('assets/marble.webp') center/cover;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.ingredient-dialog::backdrop { background: var(--paper); }
.ingredient-dialog:not([open]) { display: none; }
.detail-shell { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow-x: clip; }
.detail-header {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; width: min(100%, 1200px); margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 8% 0; min-height: 68px; flex-shrink: 0;
}
.ingredient-dialog.is-scrolled .detail-header { background: rgb(250 247 240/.96); backdrop-filter: blur(12px); }
.detail-wordmark { margin: 0; font: 400 25px/1.1 var(--latin); letter-spacing: -.04em; white-space: nowrap; }
.detail-close { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; min-height: 44px; padding: 6px 0; color: var(--body); font-size: 14px; white-space: nowrap; }
.detail-close svg { width: 20px; height: 20px; }
.detail-body {
  position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center;
  gap: 30px; width: min(100%, 900px); margin: 0 auto;
  padding: 48px 8% max(44px, env(safe-area-inset-bottom));
}
.detail-grid {
  position: relative; z-index: 20; display: grid; width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 30px;
  --portrait-size: clamp(120px, 34vw, 150px);
}
.detail-ingredient { min-width: 0; width: 100%; margin: 0; }
.detail-raw-picture { height: var(--portrait-size); width: 100%; }
.detail-raw-enter, .detail-raw-parallax, .detail-raw-float { width: 100%; height: 100%; }
.detail-raw-enter { opacity: 0; }
.detail-raw-parallax { transition: transform .6s ease-out; }
.detail-raw-float { filter: drop-shadow(-4px 10px 8px rgb(42 37 32/.055)); }
.detail-portrait-viewport { position: relative; width: min(100%, var(--portrait-size)); aspect-ratio: 1; margin: 0 auto; overflow: hidden; }
.detail-portrait-sprite { position: absolute; inset: 0; background-repeat: no-repeat; }
.detail-ingredient.is-photo .detail-portrait-viewport { width: 100%; height: 100%; aspect-ratio: auto; overflow: visible; }
.detail-portrait-photo { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.detail-caption {
  margin: 13px 0 0; padding: 0 2px; color: var(--body); opacity: 0;
  font-family: 'EB Garamond', var(--serif); font-size: 16px; font-weight: 400; line-height: 1.65;
  letter-spacing: .16em; text-align: center; overflow-wrap: anywhere;
}
.detail-grid[data-count='3'] .detail-ingredient:last-child { grid-column: 1/-1; justify-self: center; width: min(72%, 245px); }
.detail-grid[data-count='7'] .detail-ingredient:last-child { grid-column: 1/-1; justify-self: center; width: calc((100% - 24px)/2); }
.detail-grid[data-count='7'] { --portrait-size: clamp(115px, 33vw, 155px); row-gap: 36px; }
.detail-vessel-anchor { position: relative; width: min(80vw, 340px); height: 200px; margin-top: 5px; flex-shrink: 0; }
.detail-ground-shadow {
  position: absolute; top: 80%; left: 5%; width: 88%; height: 20%; opacity: 0; filter: blur(9px);
  background: radial-gradient(ellipse, rgb(42 37 32/.19), rgb(42 37 32/.06) 45%, transparent 73%);
}
.detail-vessel { position: absolute; z-index: 5; opacity: 0; pointer-events: none; }
.detail-vessel img { display: block; width: 100%; height: 100%; clip-path: ellipse(46% 45% at 50% 50%); }
.detail-vessel[data-vessel='plate'] img { clip-path: ellipse(46% 46% at 50% 50%); }
.detail-title { position: relative; z-index: 20; margin: 0; width: 100%; font-size: clamp(27px, 7.4vw, 36px); font-weight: 400; line-height: 1.6; letter-spacing: .07em; text-align: center; overflow-wrap: anywhere; }
.detail-source, .detail-cooked-frame { position: absolute; pointer-events: none; }
.detail-source { z-index: 16; }
.detail-source img, .detail-residue { display: block; width: 100%; height: 100%; object-fit: contain; }
.detail-cooked-frame { z-index: 18; }
.detail-residue { position: absolute; inset: 0; }
.detail-slice { position: absolute; opacity: 0; background-repeat: no-repeat; }
.detail-loading { position: relative; z-index: 25; margin: 0; color: var(--body); font-size: 14px; line-height: 1.9; text-align: center; }
.ingredient-dialog[data-phase='loading'] .detail-title { opacity: 0; }
.ingredient-dialog[data-phase='loading'] .detail-ground-shadow { opacity: 0; }
.ingredient-dialog[data-phase='ready'] .detail-raw-float { animation: detail-levitate var(--duration, 6s) ease-in-out infinite; }
.ingredient-dialog.is-paused .detail-raw-float { animation-play-state: paused; }
@keyframes detail-levitate { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(1px,-5px,0) rotate(.3deg); } }

@media (min-width: 700px) {
  .detail-header { padding-top: 36px; padding-inline: 6.5%; }
  .detail-wordmark { font-size: 31px; }
  .detail-close { font-size: 16px; }
  .detail-body { width: min(100%, 1000px); gap: 24px; padding: 32px 8% 36px; }
  .detail-grid { width: min(100%, 640px); column-gap: 60px; row-gap: 22px; --portrait-size: 160px; }
  .detail-grid[data-count='3'] .detail-ingredient:last-child { width: 270px; }
  .detail-grid[data-count='7'] { grid-template-columns: repeat(4, minmax(0,1fr)); width: 100%; column-gap: 28px; --portrait-size: 160px; }
  .detail-grid[data-count='7'] .detail-ingredient:last-child { grid-column: auto; width: 100%; }
  .detail-caption { font-size: 18px; }
  .detail-vessel-anchor { width: 380px; height: 228px; }
}
@media (max-width: 359px) {
  .detail-header { padding-inline: 7%; }
  .detail-wordmark { font-size: 23px; }
  .detail-close { font-size: 13px; }
  .detail-body { padding-inline: 7%; gap: 28px; }
  .detail-grid { column-gap: 18px; row-gap: 28px; --portrait-size: 128px; }
  .detail-caption { font-size: 15px; }
  .detail-vessel-anchor { height: 170px; }
  .detail-grid[data-count='7'] .detail-ingredient:last-child { width: calc((100% - 18px)/2); }
}
@media (prefers-reduced-motion: reduce) {
  .ingredient-dialog .detail-raw-float { animation: none !important; }
  .detail-raw-parallax { transition: none; }
}