/* Native snapping leaves oversized chapters readable in normal document flow. */
@media screen {
  html:has(> .dinner-site){scroll-snap-type:y mandatory;scroll-padding:0}
  .dinner-site .chapter{min-height:var(--screen-height,100dvh);scroll-snap-align:start;scroll-snap-stop:always}
  .dinner-site .cover{overflow:visible}
  .dinner-site .story-menu-link{position:fixed;top:max(8px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));z-index:12;display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 6px;font:14px/1.5 var(--body);letter-spacing:0;color:#fff;mix-blend-mode:difference;text-decoration:none}
  .dinner-site .story-menu-link:hover{text-decoration:underline;text-underline-offset:4px}
  .dinner-site .story-menu-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}
  .dinner-site[data-screen-mode="follow"] .story-menu-link,
  .dinner-site[data-presentation-pending] .story-menu-link{display:none}
  .dinner-site .course-dessert{display:flex;flex-direction:column;justify-content:center}
  .dinner-site .dessert-figure{width:100%;max-width:620px}
  /* Keep programmatic admin scrolling, but remove native viewer scrolling. */
  html:has(> .dinner-site[data-screen-mode="follow"]){overflow:hidden;overscroll-behavior:none;scroll-snap-type:none}
  .dinner-site[data-screen-mode="follow"]{overflow:hidden;overscroll-behavior:none;touch-action:pinch-zoom}
  .dinner-site[data-screen-mode="follow"] .page{padding-bottom:var(--screen-tail,0px)}
  html:has(> .dinner-site[data-screen-mode="follow"][data-screen-settled]),
  .dinner-site[data-screen-mode="follow"][data-screen-settled]{background:var(--screen-paper,var(--paper))}
  .dinner-site[data-screen-mode="follow"][data-screen-settled] .chapter:not(.is-screen-current){visibility:hidden}
  .dinner-site[data-screen-mode="follow"] .chapter{pointer-events:none}
  .dinner-site[data-screen-mode="follow"] .skip-link,
  .dinner-site[data-screen-mode="follow"] .menu-overview-return{visibility:hidden}
  .dinner-site[data-presentation-pending] main,
  .dinner-site[data-presentation-pending] .fixed-moon{visibility:hidden}
}
.screen-connection{position:fixed;bottom:12px;left:12px;z-index:10;margin:0;padding:6px 10px;border-radius:3px;background:#080d0b;color:#faf7ef;font:14px/1.5 var(--body)}
.screen-connection:empty{display:none}
.fixed-moon .moon-freehand-image{opacity:0;transition:opacity .45s ease}
.fixed-moon.is-mask-visible .moon-freehand-image{opacity:1;transition-duration:2.8s}
.fixed-moon:not(.is-mask-enabled) .moon-freehand-image{transition:none;opacity:0}
.fixed-moon.is-mask-enabled{pointer-events:all;cursor:pointer;touch-action:manipulation}
.fixed-moon:focus-visible{outline:2px solid currentColor;outline-offset:6px}
@media screen and (max-width:760px){
  .dinner-site .chapter{padding:24px;align-content:center}
  .dinner-site .course-jang{gap:16px}
  .dinner-site .jang-platter{max-width:300px}
  .dinner-site .jang-platter img{max-height:calc(var(--screen-height,100dvh) * .20);object-fit:contain}
  .dinner-site .bite-list,.dinner-site .trio-notes{gap:16px}
  .dinner-site .course p.dish-description{font-size:14px;line-height:1.6;margin-top:6px}
  .dinner-site .course p.dish-ingredients{font-size:12px;line-height:1.6;margin-top:4px}
  .dinner-site .bite-copy h3,.dinner-site .dessert-notes h3{font-size:20px;line-height:1.35}
  .dinner-site .dessert-figure{margin:16px auto}
  .dinner-site .dessert-figure img{max-height:calc(var(--screen-height,100dvh) * .21)}
  .dinner-site .trio-notes{margin:0}
  .dinner-site .course-split{justify-content:center}
  .dinner-site .course-split .dish-copy > h2,
  .dinner-site .course-split .dish-copy > .dish-description,
  .dinner-site .course-split:not(#course-04) .dish-copy > .dish-ingredients,
  .dinner-site .course-intro,
  .dinner-site .course-heading{text-align:center}
  .dinner-site .course-heading{justify-content:center}
  .dinner-site .course-split .dish-description{ text-wrap:balance }
  .dinner-site .dish-figure img{max-height:calc(var(--screen-height,100dvh) * .32)}
  .dinner-site .field-notes{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
  .dinner-site .field-notes .eyebrow,.dinner-site .field-notes h2{margin:0}
  .dinner-site .field-notes h2{font-size:30px;line-height:1.2}
  .dinner-site .field-notes p{font-size:14px;line-height:1.55;margin-bottom:12px}
  .dinner-site .field-notes .eyebrow{font-size:12px}
  .dinner-site .field-notes .handwritten{font-size:18px;margin-top:16px}
  .dinner-site .menu-overview-return{margin-top:0}
}
@media screen and (max-width:760px) and (max-height:650px){
  .dinner-site .chapter{padding:18px}
  .dinner-site .course-jang{gap:10px}
  .dinner-site .jang-platter img{max-height:calc(var(--screen-height,100dvh) * .15)}
  .dinner-site .bite-list,.dinner-site .trio-notes{gap:12px}
  .dinner-site .dessert-figure{margin:10px auto}
  .dinner-site .dessert-figure img{max-height:calc(var(--screen-height,100dvh) * .17)}
}
@media screen and (min-width:761px) and (max-height:700px){
  .dinner-site .chapter{padding-block:20px}
  .dinner-site .course-jang,.dinner-site .field-notes{row-gap:12px}
  .dinner-site .course h2,.dinner-site .course-jang .course-intro h2,.dinner-site .dish-copy h2,.dinner-site .field-notes h2{font-size:30px}
  .dinner-site .course p.dish-description{font-size:14px;line-height:1.55;margin-top:6px}
  .dinner-site .course p.dish-ingredients{font-size:12px;line-height:1.5;margin-top:4px}
  .dinner-site .bite-list{gap:14px}
  .dinner-site .bite-copy h3,.dinner-site .dessert-notes h3{font-size:20px;line-height:1.3}
  .dinner-site .jang-platter img,.dinner-site .dish-figure img{max-height:calc(var(--screen-height,100dvh) * .44);object-fit:contain}
  .dinner-site .dessert-figure{margin:8px auto}
  .dinner-site .dessert-figure img{max-height:calc(var(--screen-height,100dvh) * .30)}
  .dinner-site .trio-notes{margin-top:8px;gap:20px}
  .dinner-site .field-notes p{font-size:14px;line-height:1.5;margin-bottom:10px}
  .dinner-site .field-notes .handwritten{font-size:18px;margin-top:12px}
  .dinner-site .field-notes .eyebrow{margin:0;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.fixed-moon .moon-freehand-image,.fixed-moon.is-mask-visible .moon-freehand-image{transition:none}}
/* Reserve the same corner space in both modes so releasing the event does not reflow a chapter. */
@media screen{.dinner-site .chapter{padding-top:max(64px,calc(env(safe-area-inset-top) + 56px))}}
@media(forced-colors:active){.dinner-site .story-menu-link{color:LinkText;mix-blend-mode:normal}}
@media print{html:has(> .dinner-site){scroll-snap-type:none}.screen-connection,.story-menu-link{display:none}}
@media print,(forced-colors:active){.fixed-moon .moon-freehand-image{display:none}}

/* The final chapter gathers the dinner into one illustration. */
.dinner-site .field-notes.banquet-finale{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.dinner-site #field-notes .banquet-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dinner-site .banquet-figure{width:min(100%,max(120px,calc(var(--screen-height,100dvh) - 168px)),780px);margin:0;flex:none}
.dinner-site .banquet-figure img{display:block;width:100%;height:auto;object-fit:contain;mix-blend-mode:normal}
.dinner-site .banquet-finale .menu-overview-return{margin:0;flex:none}
@media print{.dinner-site .banquet-figure{width:100%;max-width:480px;margin-inline:auto}}