/* Straight photographic frames: no dome masks. */
.art-object{top:14%;right:6%;width:45%;height:63%;transform:translate(var(--px,0px),var(--py,0px)) rotate(-3deg)}.art-object>img{clip-path:none;border-radius:0;box-shadow:0 20px 45px #1b211514;object-fit:cover}.art-object:hover{transform:translate(var(--px,0px),var(--py,0px)) rotate(0deg)}.object-sticker{transform:rotate(3deg);right:-20px;bottom:8%}.object-rail{gap:9px}.object-rail button{width:65px;height:65px;opacity:.58;border:0;border-bottom:1px solid transparent;padding:1px 3px 8px;display:flex;align-items:center;flex-direction:column;justify-content:center}.object-rail button[aria-pressed=true]{border-bottom-color:currentColor;transform:translateY(-3px);opacity:1}.product-sketch{display:block;width:58px;height:44px;background-image:url('assets/product-sketches.png');background-size:400% 200%;background-position:var(--sketch-x) var(--sketch-y);background-repeat:no-repeat;mix-blend-mode:multiply}.sketch-number{font-size:9px;letter-spacing:1px;margin-top:3px}.stage-controls{padding-top:14px;bottom:15px}.stage-caption{bottom:24%}
body[data-view=products]{background:var(--family-paper,#e6e3dc)}#products{background:var(--family-paper);color:var(--family-ink);transition:background .45s;min-height:calc(100svh - 130px);padding-top:35px}body[data-view=products] header{background:#eeece6}#products .section-heading{margin-bottom:28px;align-items:center}#products h2{font-size:clamp(50px,5.8vw,88px);line-height:1;letter-spacing:-4px}#products h2 em{font-family:Georgia,serif;font-weight:400}#products .section-heading>p{font-size:13px}#products .catalog-bar{padding-bottom:13px;border-color:#0002}#products .filters button{font-size:12px;padding:8px 12px}#products .filters button[aria-pressed=true]{background:var(--family-ink);color:var(--family-paper)}#products .result-count{font-size:10px;letter-spacing:1px;margin:16px 0}#product-grid{display:grid;grid-template-columns:.85fr 1.35fr;gap:8%;align-items:start}.exhibit-index{padding-top:14px}.exhibit-index>button{display:flex;width:100%;align-items:center;gap:22px;border:0;border-top:1px solid #0003;background:transparent;color:inherit;text-align:left;padding:15px 0;transition:padding .25s,background .25s}.exhibit-index>button[aria-pressed=true]{padding-left:18px;padding-right:18px;background:var(--row-ink);color:var(--row-paper)}.index-number{font-size:11px;align-self:start;padding-top:7px}.index-name{font-family:Manrope,sans-serif;font-size:clamp(19px,2.1vw,33px);letter-spacing:-1px;font-weight:600}.index-name small{display:block;font:10px 'DM Sans',sans-serif;letter-spacing:.8px;margin-top:4px;opacity:.7}.index-symbol{margin-left:auto;font-size:20px;font-weight:400}.exhibit-index>button[aria-pressed=true] .index-symbol{transform:rotate(45deg)}.index-note{font-size:12px;line-height:1.6;margin-top:25px;opacity:.65}.exhibit-folio{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;border-top:1px solid #0003;padding-top:15px}.exhibit-photo{position:relative;padding:30px 6% 24px 12%}.exhibit-watermark{position:absolute;left:-3%;top:15px;font-size:clamp(130px,20vw,290px);line-height:1;color:var(--family-ink);opacity:.09;font-weight:800;letter-spacing:-20px}.exhibit-photo>button{display:block;position:relative;padding:0;border:0;width:100%;background:none;transform:rotate(2deg);transition:transform .35s;color:inherit}.exhibit-photo>button:hover{transform:rotate(0)}.exhibit-photo img{width:100%;height:clamp(300px,39vw,550px);object-fit:cover;display:block;filter:saturate(.65);border-radius:0;clip-path:none;box-shadow:0 20px 40px #0001}.exhibit-open{position:absolute;bottom:18px;left:18px;right:18px;background:var(--family-paper);color:var(--family-ink);display:flex;align-items:center;justify-content:space-between;padding:13px 16px;font-size:12px}.exhibit-open b{font-size:22px;font-weight:400}.exhibit-caption{display:flex;justify-content:space-between;align-items:end;padding:12px 6% 0 12%;gap:20px}.exhibit-caption .eyebrow{font-size:9px;letter-spacing:1px}.exhibit-caption h3{font-size:18px;margin:6px 0;line-height:1.4}.exhibit-caption .add-link{white-space:nowrap;font-size:12px}#product-dialog{background:var(--family-paper);color:var(--family-ink)}#product-dialog .detail-copy{color:var(--family-ink)}#product-dialog .detail-copy>.button,#product-dialog .sizes button[aria-pressed=true]{background:var(--family-ink);color:var(--family-paper)}#product-dialog .close{background:var(--family-paper);color:var(--family-ink)}#product-dialog .spec-row{border-color:#0003}#product-dialog .detail-copy>p{color:inherit;opacity:.8}.selected-item{background:var(--family-paper);color:var(--family-ink);padding:12px;margin-bottom:6px;border:0}.selected-item button{color:inherit}
@media(max-width:1000px){.object-rail{gap:4px}.object-rail button{width:48px;height:57px}.product-sketch{width:45px;height:36px}.art-object{height:58%;top:19%}.exhibit-index>button{gap:12px}.index-name{font-size:22px}#product-grid{gap:5%}.exhibit-photo{padding-left:6%}.exhibit-caption{padding-left:6%}.exhibit-caption{display:block}.exhibit-photo img{height:400px}}
@media(max-width:650px){.art-object{top:29%;right:8%;width:59%;height:34%;transform:rotate(-3deg)}.art-object:hover{transform:rotate(0)}.object-sticker{right:-10px;width:73px;height:73px}.stage-caption{bottom:24%;max-width:53%}.object-rail button{width:37px;height:51px;padding:0}.product-sketch{width:36px;height:33px}.sketch-number{font-size:8px}.stage-controls{gap:12px}#products{padding-top:30px}#products h2{font-size:53px;letter-spacing:-2.8px}#products .section-heading>p{margin-top:18px}.exhibit-index{display:flex;overflow-x:auto;gap:8px;padding:10px 0 16px;scroll-snap-type:x mandatory}.exhibit-index>button{flex:0 0 160px;border:1px solid #0003;padding:12px;gap:10px;scroll-snap-align:start}.exhibit-index>button[aria-pressed=true]{padding:12px}.index-name{font-size:19px}.index-symbol,.index-note{display:none}#product-grid{display:flex;flex-direction:column;gap:16px}#product-grid>div{width:100%}.exhibit-photo{padding:25px 4% 18px 8%}.exhibit-photo img{height:350px}.exhibit-caption{padding-left:8%}.exhibit-watermark{font-size:170px;letter-spacing:-12px}.exhibit-folio{font-size:8px}.exhibit-caption h3{font-size:18px}.exhibit-caption .add-link{margin-top:12px}}
#exhibit-display{position:sticky;top:110px}@media(max-width:650px){#exhibit-display{position:static}}
.object-rail button{opacity:1;mix-blend-mode:multiply}.product-sketch{width:50px;height:50px;mix-blend-mode:multiply}.object-rail button[aria-pressed=true]{border-bottom-width:2px}.object-rail button:not([aria-pressed=true]) .product-sketch{opacity:.62}@media(max-width:1000px){.product-sketch{width:43px;height:43px}}@media(max-width:650px){.product-sketch{width:34px;height:34px}}
.object-rail,.object-rail button{background:transparent;isolation:auto}.object-rail button{opacity:1;mix-blend-mode:multiply}.original-sketch{display:block!important;width:58px!important;height:50px!important;object-fit:contain!important;filter:none!important;mix-blend-mode:multiply}.original-sketch.alpha-sketch{filter:brightness(0)!important}.object-rail button:not([aria-pressed=true]) .product-sketch{opacity:1}.product-sketch{mix-blend-mode:multiply;filter:contrast(1.3)}@media(max-width:1000px){.original-sketch{width:43px!important;height:43px!important}}@media(max-width:650px){.original-sketch{width:34px!important;height:34px!important}}
.stage-controls{background:var(--scene)}.object-rail{background:var(--scene)}.object-rail button{background:var(--scene);mix-blend-mode:multiply}.product-sketch,.original-sketch{mix-blend-mode:multiply}
.object-rail button{background:transparent;mix-blend-mode:normal}.object-rail button .product-sketch,.object-rail button .original-sketch{mix-blend-mode:multiply}
.object-rail button{background:var(--scene);mix-blend-mode:normal}
#stage-image[src$="deli.png"],.exhibit-photo img[src$="deli.png"],.detail-image[src$="deli.png"]{object-fit:contain;mix-blend-mode:multiply;background:transparent;box-shadow:none}.art-object:has(#stage-image[src$="deli.png"]){background:var(--scene)}.exhibit-photo button:has(img[src$="deli.png"]){background:var(--family-paper)}
/* Product-only presentation throughout every family. */
.art-object,.art-object:hover{background:var(--scene);transform:translate(var(--px,0px),var(--py,0px));right:4%;width:43%;top:18%;height:57%}
#stage-image,.art-object>img{object-fit:contain;clip-path:none;border-radius:0;box-shadow:none;filter:none;mix-blend-mode:multiply}
.object-sticker{transform:none;right:0;bottom:4%}.exhibit-photo>button,.exhibit-photo>button:hover{transform:none;background:var(--family-paper)}.exhibit-photo img{object-fit:contain;mix-blend-mode:multiply;filter:none;box-shadow:none}.exhibit-watermark{opacity:.035}.detail-image{object-fit:contain;mix-blend-mode:multiply;filter:none;padding:25px;min-height:520px}.selected-item img{object-fit:contain;mix-blend-mode:multiply}.exhibit-open{bottom:0}
@media(max-width:650px){.art-object,.art-object:hover{top:29%;right:5%;width:61%;height:32%;transform:none}.object-sticker{right:-2%;bottom:0}.detail-image{min-height:0;height:260px;padding:20px}.exhibit-photo img{height:350px}}
.stage-type h1{font-size:clamp(100px,16vw,290px)}.art-object,.art-object:hover{right:3%;width:39%}.stage-type{top:20%}.art-object{top:18%}@media(max-width:650px){.stage-type{top:12%}.stage-type h1{font-size:27vw}.art-object,.art-object:hover{top:29%;right:5%;width:61%}}
/* Avoid rectangular compositing layers during palette and image changes. */
body,header,#products,.stage-controls,.object-rail,.object-rail button{transition-property:transform,color,border-color;}
.hero.enter .art-object>img,#stage-image,.exhibit-photo img,.detail-image{animation:none!important;opacity:1;transform:none;transition:none;box-shadow:none!important;border:0;border-radius:0;}
.art-object,.art-object:hover,.exhibit-photo>button,.exhibit-photo>button:hover{box-shadow:none;border:0;border-radius:0;}

/* Direct manipulation without changing the product image's compositing. */
#stage{touch-action:pan-y;cursor:grab}
#stage .stage-type,#stage .stage-caption,#stage .art-object{translate:var(--drag-x,0px) 0;transition:translate .25s ease}
#stage.is-dragging,#stage.is-dragging *{cursor:grabbing!important;user-select:none}
#stage.is-dragging .stage-type,#stage.is-dragging .stage-caption,#stage.is-dragging .art-object{transition:none}
#stage img{-webkit-user-drag:none;user-select:none}
.drag-hint{position:absolute;bottom:115px;right:3%;font-size:9px;letter-spacing:1.6px;opacity:.55;pointer-events:none}
@media(max-width:650px){.drag-hint{bottom:155px;font-size:8px}}
@media(prefers-reduced-motion:reduce){#stage .stage-type,#stage .stage-caption,#stage .art-object{transition:none}}

/* Actual product cutouts in the scene selector. */
.object-rail button .product-thumbnail{display:block;width:60px;height:48px;object-fit:contain;background:transparent;mix-blend-mode:multiply;filter:none;opacity:1;border:0;border-radius:0;box-shadow:none;transition:transform .2s ease}
.object-rail button:hover .product-thumbnail{transform:translateY(-3px)}
@media(max-width:1000px){.object-rail button .product-thumbnail{width:45px;height:41px}}
@media(max-width:650px){.object-rail button .product-thumbnail{width:35px;height:34px}}
@media(prefers-reduced-motion:reduce){.object-rail button .product-thumbnail{transition:none}}
/* Preserve the original product colors rather than multiplying by the scene. */
#stage-image:not([src$="deli.png"]):not([src$="dual.png"]){mix-blend-mode:normal;filter:none}
#stage-image{mix-blend-mode:normal!important;filter:none!important}
/* Silhouette mask keeps the original 32 oz photograph's neutral body intact. */
#stage-image[src$="deli.png"]{mask-image:url('assets/deli-silhouette.svg');mask-size:contain;mask-position:center;mask-repeat:no-repeat}
#stage[data-product="portion"] .stage-type h1{font-size:clamp(70px,11.3vw,215px);white-space:nowrap}
@media(max-width:650px){#stage[data-product="portion"] .stage-type h1{font-size:19vw}}
#stage[data-product="portion"] .stage-type h1{white-space:pre-line;font-size:clamp(70px,11.3vw,215px);line-height:.85}
@media(max-width:650px){#stage[data-product="portion"] .stage-type h1{font-size:19vw}}
#stage[data-product="portion"] .stage-type{top:14%}
#stage[data-product="portion"] .stage-type h1{font-size:clamp(70px,10vw,180px)}
@media(max-width:650px){#stage[data-product="portion"] .stage-type{top:10%}#stage[data-product="portion"] .stage-type h1{font-size:19vw}}
/* Restore the original headline scale for LITTLE / DIP. */
#stage[data-product="portion"] .stage-type h1{font-size:clamp(100px,16vw,290px)}
@media(max-width:650px){#stage[data-product="portion"] .stage-type h1{font-size:27vw}}
/* Let the two-line portion headline and caption share normal document flow. */
#stage[data-product="portion"]{height:auto;min-height:calc(100svh - 130px);padding-top:25px;padding-bottom:150px}
#stage[data-product="portion"] .stage-type{position:relative;left:auto;top:auto;margin-top:55px;width:max-content;max-width:100%}
#stage[data-product="portion"] .stage-caption{position:relative;left:auto;bottom:auto;margin-top:30px;max-width:55%}
#stage[data-product="portion"] .stage-caption>p{margin-bottom:20px}
@media(max-width:650px){#stage[data-product="portion"]{min-height:calc(100svh - 146px);padding-top:20px;padding-bottom:160px}#stage[data-product="portion"] .stage-type{margin-top:35px}#stage[data-product="portion"] .stage-caption{margin-top:25px;max-width:55%}#stage[data-product="portion"] .art-object{top:33%;height:30%}}
/* Two-line round slogan follows the same flowing composition as LITTLE DIP. */
#stage[data-product="round"]{height:auto;min-height:calc(100svh - 130px);padding-top:25px;padding-bottom:150px}
#stage[data-product="round"] .stage-type{position:relative;left:auto;top:auto;margin-top:55px;width:max-content;max-width:100%}
#stage[data-product="round"] .stage-type h1{white-space:pre-line;font-size:clamp(100px,14vw,260px);line-height:.85}
#stage[data-product="round"] .stage-caption{position:relative;left:auto;bottom:auto;margin-top:30px;max-width:55%}
@media(max-width:650px){#stage[data-product="round"]{min-height:calc(100svh - 146px);padding-top:20px;padding-bottom:160px}#stage[data-product="round"] .stage-type{margin-top:35px}#stage[data-product="round"] .stage-type h1{font-size:23vw}#stage[data-product="round"] .stage-caption{margin-top:25px;max-width:55%}#stage[data-product="round"] .art-object{top:33%;height:30%}}
/* DAILY / DELI: full-size headline with supporting copy in normal flow. */
#stage[data-product="deli"]{height:auto;min-height:calc(100svh - 130px);padding-top:25px;padding-bottom:150px}
#stage[data-product="deli"] .stage-type{position:relative;left:auto;top:auto;margin-top:55px;width:max-content;max-width:100%}
#stage[data-product="deli"] .stage-type h1{white-space:pre-line;font-size:clamp(100px,16vw,290px);line-height:.85}
#stage[data-product="deli"] .stage-caption{position:relative;left:auto;bottom:auto;margin-top:30px;max-width:55%}
@media(max-width:650px){#stage[data-product="deli"]{min-height:calc(100svh - 146px);padding-top:20px;padding-bottom:160px}#stage[data-product="deli"] .stage-type{margin-top:35px}#stage[data-product="deli"] .stage-type h1{font-size:27vw}#stage[data-product="deli"] .stage-caption{margin-top:25px;max-width:55%}#stage[data-product="deli"] .art-object{top:33%;height:30%}}
/* Product chooser uses natural colors, matching the main product cutouts. */
.object-rail button .product-thumbnail{mix-blend-mode:normal!important;filter:none!important}
.object-rail button .product-thumbnail[src$="deli.png"]{mask-image:url('assets/deli-silhouette.svg');mask-size:contain;mask-position:center;mask-repeat:no-repeat}

/* Keep the action below the cutout so it cannot cover the product or shadow. */
.exhibit-open{position:relative;inset:auto;margin:8px 18px 0;background:transparent}

/* Interpolate a shared color so all background surfaces stay in sync. */
@property --scene{syntax:'<color>';inherits:true;initial-value:#e6e3dc}
@property --family-paper{syntax:'<color>';inherits:true;initial-value:#e6e3dc}
:root{transition:--scene .45s ease}
#products{transition:--family-paper .45s ease}
@media(prefers-reduced-motion:reduce){:root,#products{transition:none}}

/* Keep the round headline clear of the product silhouette. */
@media(min-width:651px){#stage[data-product="round"] .stage-type h1{font-size:clamp(60px,10.8vw,205px)}}
/* Two-line rectangle headline, with the caption following its height. */
#stage[data-product="rectangle"]{height:auto;min-height:calc(100svh - 130px);padding-top:25px;padding-bottom:150px}
#stage[data-product="rectangle"] .stage-type{position:relative;left:auto;top:auto;margin-top:55px;width:max-content;max-width:100%}
#stage[data-product="rectangle"] .stage-type h1{white-space:pre-line;font-size:clamp(60px,10.8vw,205px);line-height:.85}
#stage[data-product="rectangle"] .stage-caption{position:relative;left:auto;bottom:auto;margin-top:30px;max-width:55%}
@media(max-width:650px){#stage[data-product="rectangle"]{min-height:calc(100svh - 146px);padding-top:20px;padding-bottom:160px}#stage[data-product="rectangle"] .stage-type{margin-top:35px}#stage[data-product="rectangle"] .stage-type h1{font-size:23vw}#stage[data-product="rectangle"] .stage-caption{margin-top:25px;max-width:55%}#stage[data-product="rectangle"] .art-object{top:33%;height:30%}}
/* Match the portion slide to the other two-line homepage compositions. */
#stage[data-product="portion"] .stage-type h1{font-size:clamp(60px,10.8vw,205px)}
@media(max-width:650px){#stage[data-product="portion"] .stage-type h1{font-size:23vw}}
/* Keep the deli slide consistent with the other two-line homepage titles. */
#stage[data-product="deli"] .stage-type h1{font-size:clamp(60px,10.8vw,205px)}
@media(max-width:650px){#stage[data-product="deli"] .stage-type h1{font-size:23vw}}
.home-detail-transition{position:fixed;inset:0;z-index:99999;background:#18251c;pointer-events:auto}

/* Give the plate headline the same clear image boundary as the round collection. */
@media(min-width:651px){#stage[data-product="plates"] .stage-type h1{font-size:clamp(60px,13vw,245px)}}
/* Phone composition: separate flowing rows keep every collection clear at any text height. */
@media (max-width:650px), (max-width:950px) and (max-height:500px) {
  #stage[data-product] {display:flex;flex-direction:column;height:auto;min-height:0;padding:20px 5% 24px;gap:0;overflow:hidden}
  #stage[data-product] .stage-topline {position:relative;font-size:8px;line-height:1.6;letter-spacing:.8px;padding-right:28px}
  #stage[data-product] .stage-topline span:last-child {display:none}
  #stage[data-product] .art-number {top:22px;right:5%;writing-mode:horizontal-tb;font-size:10px;letter-spacing:1px}
  #stage[data-product] .stage-type {position:relative;inset:auto;margin:28px 0 0;width:100%;max-width:100%;order:1}
  #stage[data-product] .stage-type .eyebrow {font-size:9px;letter-spacing:1.5px;line-height:1.5;margin:0 0 12px}
  #stage[data-product] .stage-type h1 {font-size:clamp(48px,17vw,110px);line-height:.9;letter-spacing:-.075em;white-space:pre-line}
  #stage[data-product] .art-object,#stage[data-product] .art-object:hover {position:relative;inset:auto;order:2;width:100%;height:clamp(220px,67vw,340px);margin:16px 0 0;padding:0 18px 45px;transform:none!important;background:transparent}
  #stage[data-product] .art-object>img {display:block;width:100%;height:100%;object-fit:contain}
  #stage[data-product] .object-sticker {right:0;bottom:0;width:64px;height:64px;font-size:7px;letter-spacing:.6px;transform:none}
  #stage[data-product] .object-sticker b {font-size:20px}
  #stage[data-product] .stage-caption {position:relative;inset:auto;order:3;margin:20px 0 0;max-width:100%;width:100%}
  #stage[data-product] .stage-caption>p {font-size:clamp(24px,6.4vw,32px);line-height:1.15;letter-spacing:-.8px;margin:0 0 12px}
  #stage[data-product] .stage-caption>span {font-size:11px;line-height:1.65}
  #stage[data-product] .drag-hint {position:relative;inset:auto;order:4;text-align:right;margin:22px 0 14px;font-size:8px}
  #stage[data-product] .stage-controls {position:relative;inset:auto;order:5;width:100%;margin:0;padding-top:14px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
  #stage[data-product] .sequence {gap:12px}
  #stage[data-product] .sequence button {width:40px;height:40px}
  #stage[data-product] .sequence>span {font-size:10px;letter-spacing:1px}
  #stage[data-product] .all-objects {margin-left:auto;font-size:9px;gap:8px;min-height:40px;align-items:center}
  #stage[data-product] .object-rail {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;width:100%;order:3}
  #stage[data-product] .object-rail button {width:100%;min-width:0;height:54px;padding:2px 0 6px;color:inherit;-webkit-appearance:none;appearance:none}
  #stage[data-product] .object-rail button .product-thumbnail {width:100%;max-width:48px;height:34px}
  #stage[data-product] .object-rail button[aria-pressed=true] {transform:none}
  body[data-view=stage] .edition-bar {height:auto;min-height:54px;gap:14px;padding:12px 5%;font-size:7px;letter-spacing:.8px}
}
@media (max-width:950px) and (max-height:500px) and (min-width:651px) {
  #stage[data-product] .stage-type h1 {font-size:90px}
  #stage[data-product] .art-object,#stage[data-product] .art-object:hover {height:280px;max-width:520px;align-self:center}
}
/* The entire exhibit is a swipe surface, including its image button and title. */
#stage .stage-type,#stage .stage-caption{pointer-events:auto}
#stage .stage-type,#stage .stage-caption,#stage .art-object,#stage .art-object>img{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#stage{touch-action:pan-y pinch-zoom}