/* The Collection, featuring Christina’s own custom-menu examples. */
.finishing-page{padding-block:56px 64px}
.finishing-intro{text-align:center}
.finishing-intro h1{font-size:clamp(38px,4.5vw,64px);font-weight:400;line-height:1.08;letter-spacing:-.045em}
.finishing-intro p{font-size:21px;line-height:1.5;color:var(--muted);margin-top:16px}
.finishing-intro .standalone-note{max-width:650px;margin:16px auto 0;font-size:18px}
.finishing-intro .customization-note{font-size:17px;font-style:italic;line-height:1.5;margin:12px auto 0;max-width:850px}
.finishing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:22px;max-width:900px;margin:18px auto 0}
.finishing-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid var(--line);background:var(--cream);padding:36px 30px;min-height:168px}
.finishing-card--menus{grid-column:auto;grid-row:auto}
.finishing-preview-note{max-width:900px;margin:28px auto 0;text-align:center;font-size:18px;font-style:italic;line-height:1.4;color:var(--muted);align-self:start}
.finishing-card:not(.finishing-card--menus){min-height:128px;padding:22px 26px}
.finishing-card:not(.finishing-card--menus) h2{font-size:28px}
.finishing-card:not(.finishing-card--menus) p{font-size:18px;line-height:1.45}
.finishing-card--idea .text-link{font-size:17px;min-height:44px;margin-top:12px}
.custom-menu-gallery{display:grid;grid-template-columns:minmax(0,1.5017fr) minmax(0,1fr);gap:16px;width:100%;margin-top:24px;align-items:start}
.custom-menu-gallery figure{min-width:0;margin:0}
.custom-menu-gallery .menu-image-trigger{appearance:none;display:flex;justify-content:center;align-items:flex-start;width:100%;padding:0;border:0;background:transparent;color:inherit;cursor:zoom-in;line-height:0}
.menu-image-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* Hide the uploaded black borders without changing the source images. */
.menu-image-window{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:var(--menu-image-width) / var(--menu-image-height)}
.menu-image-window--mahjong{--menu-image-width:1500;--menu-image-height:2100;--menu-image-top:0%}
.menu-image-window--design{--menu-image-width:914;--menu-image-height:1240;--menu-image-top:0%}
.menu-image-window--table{--menu-image-width:591;--menu-image-height:1204;--menu-image-top:-3.15614618%}
.menu-image-window img{display:block;position:absolute;left:0;top:var(--menu-image-top);width:100%;max-width:none;height:auto;max-height:none;object-fit:contain}
.custom-menu-gallery figcaption{font-size:16px;font-style:italic;line-height:1.4;color:var(--muted);margin-top:10px}
.finishing-card h2{font-size:30px;line-height:1.2;font-weight:400}
.finishing-card .favor-description{max-width:none}
.finishing-card p{max-width:360px;font-size:19px;line-height:1.5;color:var(--muted);margin-top:12px}
@media(max-width:600px){
 .finishing-page{padding-block:36px 48px}
 .finishing-intro h1{font-size:clamp(34px,9.4vw,52px);line-height:1.11}
 .finishing-intro p{font-size:20px;margin-top:14px}
 .finishing-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:18px;margin-top:20px}
 .finishing-card{padding:28px 22px;min-height:150px}
 .finishing-card h2{font-size:28px}
 .finishing-card p{font-size:18px}
 .finishing-card--menus{grid-column:auto;grid-row:auto}
 .finishing-preview-note{grid-column:auto;grid-row:auto;margin-top:8px}
 .custom-menu-gallery{grid-template-columns:1fr;gap:24px}
 .custom-menu-gallery .menu-image-window{width:min(100%,calc(480px * var(--menu-image-width) / var(--menu-image-height)))}
}

/* Native modal viewer keeps each image centered on the current page. */
html.menu-viewer-open{overflow:hidden}
.menu-lightbox{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:8px;border:1px solid var(--line);border-radius:4px;background:var(--cream);color:var(--ink);overflow:auto;box-shadow:0 16px 60px #0003}
.menu-lightbox:not([open]){display:none}
.menu-lightbox[open]{display:flex;flex-direction:column;align-items:center}
.menu-lightbox::backdrop{background:#24151bd1}
.menu-lightbox-toolbar{position:absolute;top:8px;right:8px;z-index:1}
.menu-lightbox-close{appearance:none;display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--cream);color:var(--ink);font:28px/1 Arial,sans-serif;cursor:pointer}
.menu-lightbox-close:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.menu-lightbox>.menu-image-window{flex:none;width:min(calc(100vw - 42px),calc(624px * var(--menu-image-width) / var(--menu-image-height)),calc((99.84dvh - 37.44px) * var(--menu-image-width) / var(--menu-image-height)))}

/* Equal visible photo heights align their upper edges and captions. */
.finishing-card .menu-description{max-width:none}
.menu-description span{display:block}
@media(max-width:600px){.finishing-card .menu-description{font-size:clamp(16px,4.4vw,18px)}}

/* A full-width invitation beneath the product examples leaves room for photographs. */
.finishing-card.finishing-card--idea{max-width:900px;margin:22px auto 0;background:var(--blush);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 32px;text-align:left;justify-items:start}
.finishing-card--idea h2,.finishing-card--idea p{grid-column:1}
.finishing-card--idea p{max-width:none;margin:0}
.finishing-card--idea .text-link{grid-column:2;grid-row:1 / span 2;align-self:center;margin:0}
.favor-tag-gallery{width:100%;max-width:240px;margin:20px 0 0}
.favor-tag-gallery .menu-image-trigger{appearance:none;display:flex;justify-content:center;align-items:flex-start;width:100%;padding:0;border:0;background:transparent;color:inherit;cursor:zoom-in;line-height:0}
.menu-image-window--favor{--menu-image-width:853;--menu-image-height:1280;--menu-image-top:0%}
.menu-image-window--favor img{width:calc(100% * 1280 / 853);left:100%;top:0;transform:rotate(90deg);transform-origin:top left}
.menu-image-window--halloween{--menu-image-width:1086;--menu-image-height:1448;--menu-image-top:0%}
/* Match the tag itself to the Thanksgiving example within the same photo frame. */
.menu-image-window--halloween img{width:112%;left:-6%;top:-9.2%}
.menu-image-window--holidays{--menu-image-width:1086;--menu-image-height:1448;--menu-image-top:0%}
.menu-image-window--birthday{--menu-image-width:1086;--menu-image-height:1448;--menu-image-top:0%}
.menu-image-window--birthday img{width:112%;left:-6%;top:-9.2%}
@media(max-width:600px){.finishing-card.finishing-card--idea{grid-row:auto;grid-template-columns:1fr;text-align:center;justify-items:center}.finishing-card--idea .text-link{grid-column:1;grid-row:auto;margin-top:8px}}

.finishing-grid .finishing-card{justify-content:flex-start;padding:18px 22px}
.finishing-grid .finishing-card h2{font-size:28px}
.finishing-grid .finishing-card p{font-size:18px;line-height:1.45}

/* Compact previews are sized independently from the modal viewer. */
.finishing-grid .custom-menu-gallery{margin-top:16px;gap:12px;grid-template-columns:minmax(0,1.5017fr) minmax(0,1fr)}
.finishing-grid .custom-menu-gallery .menu-image-window{width:min(100%,calc(140px * var(--menu-image-width) / var(--menu-image-height)))}
.photo-carousel{display:grid;grid-template-columns:44px minmax(0,228px) 44px;align-items:center;gap:8px;width:100%;max-width:332px;min-width:0}
.finishing-grid .favor-tag-gallery{display:flex;grid-column:2;grid-row:1;align-items:flex-start;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin:0;max-width:228px}
.favor-tag-gallery::-webkit-scrollbar{display:none}
.favor-tag-gallery figure{flex:0 0 105px;width:105px;min-width:0;margin:0;scroll-snap-align:start}
.favor-tag-gallery figure:first-child .menu-image-trigger,.favor-tag-gallery figure:first-child figcaption{width:calc(140px * 853 / 1280)}
.photo-carousel>button{display:grid;place-items:center;width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--ink);font:28px/1 Georgia,serif;cursor:pointer}
.photo-carousel>button[hidden]{display:none}
.photo-carousel>button:disabled{opacity:.25;cursor:default}
.photo-carousel>button:focus-visible,.favor-tag-gallery:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.favor-tag-gallery .menu-image-trigger:focus-visible{outline-offset:-2px}
.favor-tag-gallery figcaption{margin-top:6px;font-size:16px;font-style:italic;line-height:1.4;text-align:center;color:var(--muted)}
.finishing-grid .favor-tag-gallery .menu-image-trigger{width:100%}

/* Place the forthcoming-examples note over the right-hand offering column. */
.finishing-preview-note{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.finishing-preview-note span{grid-column:2}
@media(max-width:600px){.finishing-preview-note{grid-template-columns:1fr}.finishing-preview-note span{grid-column:1}}

/* An open sequence of horizontal offering rows, separated by fine rules. */
.finishing-grid{--finishing-photo-pair-width:calc(280px * 1086 / 1448 + 18px);grid-template-columns:1fr;grid-auto-rows:auto;gap:0}
.finishing-grid .finishing-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 36px;align-items:center;min-height:80px;padding:20px 0;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left}
.finishing-grid .finishing-card h2,.finishing-grid .finishing-card>p{grid-column:1;margin:0;max-width:none}
.finishing-grid .finishing-card h2{align-self:end}
.finishing-grid .finishing-card>p{align-self:start}
.finishing-grid .custom-menu-gallery{grid-column:2;grid-row:1 / span 2;margin:0}
.finishing-grid .finishing-card--favors .photo-carousel{grid-column:2;grid-row:1 / span 2;margin:0 auto}
.finishing-grid .finishing-card--favors h2,.finishing-grid .finishing-card--favors>p{grid-column:1}
.finishing-grid .finishing-card:not(.finishing-card--menus):not(.finishing-card--favors)>p{grid-column:1;grid-row:2;align-self:start}
@media(max-width:600px){
 .finishing-grid .finishing-card{grid-template-columns:1fr;gap:8px;text-align:center;padding:20px 0}
 .finishing-grid .finishing-card h2,.finishing-grid .finishing-card>p,.finishing-grid .finishing-card:not(.finishing-card--menus):not(.finishing-card--favors)>p{grid-column:1;grid-row:auto}
 .finishing-grid .custom-menu-gallery,.finishing-grid .finishing-card--favors .photo-carousel{grid-column:1;grid-row:auto;margin:8px auto 0}
}
@media(max-width:360px){.photo-carousel{max-width:228px;grid-template-columns:44px minmax(0,1fr) 44px;gap:0 8px}.photo-carousel .favor-tag-gallery{grid-column:1 / -1;grid-row:1}.photo-carousel-previous{grid-column:1;grid-row:2}.photo-carousel-next{grid-column:3;grid-row:2}}

/* Keep the menu captions centered beneath their own closely paired photos. */
.finishing-grid .custom-menu-gallery{max-width:var(--finishing-photo-pair-width);grid-template-columns:calc(140px * 914 / 1240) calc(140px * 591 / 1204);justify-self:center;gap:18px}
.custom-menu-gallery figure{text-align:center}

.custom-menu-gallery figcaption{white-space:nowrap}

/* Compact, consistent preview frames; original-size modal framing stays separate. */
.finishing-grid{--finishing-photo-width:100px;--finishing-photo-height:140px;--finishing-photo-pair-width:calc(2 * var(--finishing-photo-width) + 18px)}
.finishing-grid .custom-menu-gallery{grid-template-columns:repeat(2,var(--finishing-photo-width))}
.finishing-grid .custom-menu-gallery .menu-image-window{width:100%}
.photo-carousel{grid-template-columns:44px minmax(0,var(--finishing-photo-pair-width)) 44px;max-width:calc(var(--finishing-photo-pair-width) + 104px)}
.finishing-grid .favor-tag-gallery{max-width:var(--finishing-photo-pair-width)}
.favor-tag-gallery figure{flex-basis:var(--finishing-photo-width);width:var(--finishing-photo-width)}
.favor-tag-gallery figure:first-child .menu-image-trigger,.favor-tag-gallery figure:first-child figcaption{width:100%}
@media(max-width:360px){.photo-carousel{max-width:var(--finishing-photo-pair-width);grid-template-columns:44px minmax(0,1fr) 44px}}

/* All thumbnail frames share the same size, including desktop view on a phone.
   Crop only the previews, using proportional image scaling and protected focal areas. */
.finishing-grid .menu-image-window{height:var(--finishing-photo-height);aspect-ratio:5 / 7}
.finishing-grid .menu-image-window--design img{width:103.1935484%;left:-1.5967742%;top:0}
/* Keep the full foreground menu and plate, and exclude the source's black bands. */
.finishing-grid .menu-image-window--table img{width:100%;left:0;top:calc(var(--finishing-photo-height) - var(--finishing-photo-width) * 1240 / 591)}
.finishing-grid .menu-image-window--favor img{top:calc((var(--finishing-photo-height) - var(--finishing-photo-width) * 1280 / 853) / 2)}
.finishing-grid .menu-image-window--holidays img{width:105%;left:-2.5%;top:0}
.finishing-grid .menu-image-window--halloween img,.finishing-grid .menu-image-window--birthday img{width:112%;left:-6%;top:-3.3333333%}

/* Each menu theme owns its design and its table photograph in one compact tile. */
.custom-menu-gallery .menu-theme-button{position:relative;height:var(--finishing-photo-height)}
.menu-theme-button>.menu-theme-photo{position:absolute;inset:0;width:100%;transition:opacity .18s ease}
.menu-theme-photo--back{opacity:0}
@media(hover:hover){.menu-theme-button:hover>.menu-theme-photo--front:has(+.menu-theme-photo--back){opacity:0}.menu-theme-button:hover>.menu-theme-photo--back{opacity:1}}
@media(prefers-reduced-motion:reduce){.menu-theme-button>.menu-theme-photo{transition:none}}
.custom-menu-gallery .menu-theme figcaption{margin-top:6px;text-align:center}
.menu-lightbox-previous,.menu-lightbox-next{position:absolute;top:50%;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;transform:translateY(-50%);border:1px solid var(--line);border-radius:50%;background:var(--cream);color:var(--ink);font:28px/1 Georgia,serif;cursor:pointer}
.menu-lightbox-previous{left:8px}.menu-lightbox-next{right:8px}
.menu-lightbox-previous[hidden],.menu-lightbox-next[hidden]{display:none}
.menu-lightbox-previous:disabled,.menu-lightbox-next:disabled{opacity:.3;cursor:default}
.menu-lightbox-previous:focus-visible,.menu-lightbox-next:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Direct access to a theme's table photo also works without hover on phones. */
.menu-theme-context{display:block;width:100%;min-height:44px;margin:0;padding:6px 0;appearance:none;border:0;background:transparent;color:var(--ink);font:13px/1.35 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.menu-theme-context:hover{color:var(--accent)}
.menu-theme-context:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Give the custom-idea invitation a deeper blush fill with clear dark copy. */
.finishing-card.finishing-card--idea{background:#cfb6a3}
.finishing-card--idea p{color:var(--ink)}

/* Preserve all four place cards in both the compact preview and modal. */
.menu-image-window--place-cards{--menu-image-width:591;--menu-image-height:580;--menu-image-top:0%}
.place-card-gallery{grid-column:2;grid-row:1 / span 2;justify-self:center;margin:0;width:var(--finishing-photo-width)}
.place-card-gallery figure{margin:0;text-align:center}
.place-card-gallery .menu-image-trigger{appearance:none;display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;cursor:zoom-in;line-height:0}
.finishing-grid .menu-image-window--place-cards img{position:static;width:100%;height:100%;object-fit:contain}
.place-card-gallery figcaption{margin-top:6px;font-size:16px;font-style:italic;line-height:1.4;text-align:center;color:var(--muted)}
@media(max-width:600px){.place-card-gallery{grid-column:1;grid-row:auto;margin:8px auto 0}}

/* Shared photo band: equal previews and the same first-photo left edge. */
.menu-image-window--hostess-gift{--menu-image-width:1016;--menu-image-height:1280;--menu-image-top:0%}
.hostess-gift-gallery{grid-column:2;grid-row:1 / span 2;justify-self:center;margin:0;width:var(--finishing-photo-width)}
.hostess-gift-gallery figure{margin:0;text-align:center}
.hostess-gift-gallery .menu-image-trigger{appearance:none;display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;cursor:zoom-in;line-height:0}
.hostess-gift-gallery figcaption{margin-top:6px;font-size:16px;font-style:italic;line-height:1.4;text-align:center;color:var(--muted)}
.finishing-grid .menu-image-window--place-cards img,.finishing-grid .menu-image-window--hostess-gift img{position:static;width:100%;height:100%;object-fit:cover}
.finishing-grid .menu-image-window--place-cards img{object-position:55% center}
.place-card-gallery figure,.hostess-gift-gallery figure{width:var(--finishing-photo-width)}
@media(min-width:601px){
 .finishing-grid .finishing-card{grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);column-gap:24px}
 .finishing-grid .custom-menu-gallery,.place-card-gallery,.hostess-gift-gallery{justify-self:start;margin-left:52px}
 .finishing-grid .finishing-card--favors .photo-carousel{justify-self:start;margin:0;max-width:none;grid-template-columns:44px minmax(0,1fr) 44px}
 .finishing-grid .favor-tag-gallery{max-width:none}
}
@media(max-width:600px){
 .place-card-gallery,.hostess-gift-gallery{grid-column:1;grid-row:auto;justify-self:center;width:var(--finishing-photo-pair-width);margin:8px auto 0}
}