/*
 * Immersive detail v1 extends the approved shared foundation.
 * All colour, glass and photographic depth come from foundation.css tokens.
 * Natural document scrolling is essential for narrow phones and Dynamic Type.
 */
.detail-shell .masthead{min-height:90px;padding:calc(5px + env(safe-area-inset-top)) 17px 8px}
.detail-shell .masthead .crest{height:43px;width:73px;margin:0 auto -4px}
.detail-shell .masthead .brand{font-size:20px}
.detail-shell .masthead .context-glass{top:calc(8px + env(safe-area-inset-top));right:11px;padding:5px 8px}
.taste-detail{position:relative;max-width:780px;margin:0 auto;padding:3px 17px calc(28px + env(safe-area-inset-bottom))}
.taste-detail .detail-toolbar{height:39px;padding:0 1px 5px}
.taste-detail .detail-toolbar .quiet-icon{min-width:44px;min-height:44px}
.taste-detail .detail-time{font-size:12px;color:var(--sub);letter-spacing:.15px}
.taste-detail .detail-swipe{position:relative;z-index:3;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.taste-detail .detail-photo{
 position:relative;isolation:isolate;width:100%;
 height:clamp(272px,39svh,425px);
 aspect-ratio:auto;border-radius:var(--surface-radius);overflow:hidden;
 background:#c5bba9;box-shadow:var(--surface-shadow);
}
.taste-detail .detail-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.taste-detail .detail-photo>.image-placeholder{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(ellipse at 45% 30%,rgba(239,235,219,.96),transparent 77%),linear-gradient(155deg,#c3c8c4,#97a9aa);color:#263c46;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;padding:0 16px 38px}
body[data-period="evening"] .taste-detail .detail-photo>.image-placeholder{background:#667986;color:#fff8e8}
.taste-detail .detail-grad{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--photo-gradient)}
.taste-detail .detail-photo-copy{
 position:absolute;left:21px;right:18px;bottom:23px;z-index:4;
 color:#fff9ec;text-shadow:0 2px 16px rgba(0,0,0,.65);pointer-events:none
}
.taste-detail .detail-photo-type{font-size:10px;font-weight:700;letter-spacing:2.1px;color:#ffe0a9}
.taste-detail .detail-photo-copy h1{
 margin:8px 0 0;font:400 clamp(29px,7.4vw,46px)/1.1 var(--serif);
 letter-spacing:-.7px;overflow-wrap:anywhere;color:#fff9ec
}
.taste-detail .detail-photo .mark-icon,.taste-detail .detail-photo .flag-food{
 z-index:5;top:15px;left:15px;
 display:flex;justify-content:center;align-items:center;
 width:42px;height:42px;border-radius:50%;color:#f3d7a8;
 background:rgba(10,27,40,.44);border:1px solid rgba(255,234,201,.35);
 filter:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.taste-detail .detail-photo .flag-food{color:#daefc3}
.taste-detail .detail-photo .heart-btn{
 z-index:6;right:12px;top:12px;
 display:flex;justify-content:center;align-items:center;
 min-width:48px;min-height:48px;border-radius:50%;padding:9px;
 color:#fff8e8;background:rgba(10,27,40,.42);
 filter:none;border:1px solid rgba(255,234,201,.35);
 -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
}
.taste-detail .detail-photo .heart-btn .fill-heart{fill:var(--lagoon-amber);stroke:var(--lagoon-amber)}
.taste-detail .detail-lead{
 margin:13px 3px 11px;color:var(--sub);font-size:13px;
 line-height:1.5;letter-spacing:.13px;
}
.taste-detail .detail-sensory{
 margin:0 0 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:8px;align-items:stretch;
}
.taste-detail .sensory-facet{
 margin:0;padding:11px 12px 12px;border:1px solid var(--glass-edge);
 background:var(--glass-bg);border-radius:15px;box-shadow:var(--glass-shadow);
 min-width:0;min-height:73px;display:flex;flex-direction:column;gap:5px;
 -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.taste-detail .sensory-facet dt{
 font-size:clamp(10px,.66rem,12px);line-height:1.25;letter-spacing:1.05px;font-weight:750;color:var(--accent);
}
.taste-detail .sensory-facet dd{
 margin:0;font-size:clamp(12.5px,.8rem,15px);line-height:1.42;color:var(--ink);overflow-wrap:anywhere;
}
.taste-detail .detail-single-cue{
 margin:5px 3px 16px;font-size:13px;line-height:1.6;color:var(--ink)
}
.taste-detail .detail-envelope-frame{position:relative;z-index:2;max-width:100%}
.taste-detail .reveal-btn{
 position:relative;z-index:3;width:100%;min-height:52px;padding:13px 16px;
 border-radius:17px;background:linear-gradient(125deg,#d6a86b,#edc58c);
 color:#342719;font-size:14px;box-shadow:0 7px 19px rgba(64,37,18,.19)
}
.taste-detail .reveal-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.taste-detail .detail-help{margin:5px 7px 0;color:var(--sub);font-size:11px;line-height:1.55}
.taste-detail .detail-envelope{
 position:relative;z-index:2;margin:-10px 0 0;padding-top:11px;
 transform-origin:center top;
 animation:detail-envelope-reveal .34s cubic-bezier(.19,.8,.2,1) both;
}
@keyframes detail-envelope-reveal{
 from{opacity:.2;transform:translateY(-27px) scaleY(.975)}
 to{opacity:1;transform:translateY(0) scaleY(1)}
}
.taste-detail .detail-expansion{
 margin:0;border:1px solid var(--glass-edge);border-top:1px solid var(--glass-edge);
 border-radius:0 0 23px 23px;animation:none;
 padding:24px 17px 25px;background:var(--glass-bg);
 -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
 box-shadow:var(--glass-shadow);color:var(--ink)
}
.taste-detail .detail-sheet-intro{padding-bottom:14px}
.taste-detail .spark{font-size:15px;line-height:1.62;margin:10px 0 0;color:var(--ink)}
.taste-detail .detail-facts{
 display:grid;gap:0;border-top:1px solid var(--outline);border-bottom:1px solid var(--outline);
 margin:4px 0 15px
}
.taste-detail .detail-facts>div{
 display:grid;grid-template-columns:minmax(92px,33%) 1fr;align-items:start;
 gap:12px;padding:12px 0;border-bottom:1px solid var(--outline);
 font-size:12px;line-height:1.48;min-width:0;overflow-wrap:anywhere
}
.taste-detail .detail-facts>div:last-child{border-bottom:none}
.taste-detail .fact-label{color:var(--accent);font-weight:700;display:flex;align-items:center;gap:4px}
.taste-detail .detail-expansion .source-scope{font-size:12px;line-height:1.6;margin:11px 0;color:var(--sub)}
.taste-detail .detail-recipes{margin:18px 0 8px}
.taste-detail .detail-recipes h3{font:700 11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:1.2px}
.taste-detail .recipe-row span{font-size:13px;line-height:1.42}
.taste-detail .detail-actions{margin:20px 0 8px}
.taste-detail .detail-actions .gold-btn{min-height:48px}
.taste-detail .pairing{padding-top:17px;margin-top:16px}
.taste-detail .pairing-choices button{min-height:44px}
@media(max-width:360px){
 .taste-detail{padding-left:13px;padding-right:13px}
 .detail-shell .masthead{min-height:80px;padding:calc(4px + env(safe-area-inset-top)) 12px 5px}
 .detail-shell .masthead .crest{height:37px;width:64px;margin:0 auto -2px}
 .detail-shell .masthead .brand{font-size:18px}
 .detail-shell .masthead .context-glass{right:9px;top:calc(6px + env(safe-area-inset-top))}
 .taste-detail .detail-photo{height:clamp(228px,31svh,278px)}
 .taste-detail .detail-photo-copy{left:16px;right:13px;bottom:17px}
 .taste-detail .detail-photo-copy h1{font-size:clamp(27px,8vw,34px)}
 .taste-detail .detail-sensory{gap:7px}
 .taste-detail .sensory-facet{padding:8px 9px;min-height:65px;gap:3px}
 .taste-detail .sensory-facet dd{font-size:clamp(12px,.77rem,14px);line-height:1.4}
 .taste-detail .detail-help{display:none} /* CTA and palm navigation must not overlap on 320px phones. */
 .taste-detail .detail-facts>div{grid-template-columns:minmax(81px,33%) 1fr;gap:8px}
}
@media(min-width:950px) and (orientation:landscape){
 .taste-detail{max-width:805px;padding:8px 18px 65px}
 .taste-detail .detail-photo{height:min(47vh,430px)}
 .taste-detail .detail-sensory{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:13px}
 .taste-detail .sensory-facet{min-height:78px}
 .taste-detail .detail-photo-copy h1{font-size:44px}
}
@media(prefers-reduced-motion:reduce){
 .taste-detail .detail-envelope{animation:none}
 .taste-detail .reveal-btn svg{transition:none}
}
@media(prefers-reduced-transparency:reduce){
 .taste-detail .sensory-facet,.taste-detail .detail-expansion{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Nonliteral lagoon-lighting composition. Deliberately no dish or bottle. */
.taste-detail .detail-photo>.intentional-neutral{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 padding:0 28px 54px;overflow:hidden;
 background:
  radial-gradient(ellipse 80% 59% at 52% 22%,rgba(247,234,201,.73),transparent 83%),
  radial-gradient(ellipse 112% 88% at 10% 100%,rgba(69,125,133,.59),transparent 76%),
  linear-gradient(155deg,#b8c6c3 0%,#8faeaf 46%,#3c6170 100%);
 color:#244452;text-transform:none;font-size:initial;letter-spacing:normal
}
body[data-period="evening"] .taste-detail .detail-photo>.intentional-neutral{
 background:
  radial-gradient(ellipse 79% 60% at 70% 30%,rgba(226,176,105,.34),transparent 85%),
  radial-gradient(ellipse 95% 90% at 0% 100%,rgba(24,93,108,.63),transparent 80%),
  linear-gradient(165deg,#203f53 0%,#102a40 53%,#0d1a30 100%);
 color:#f2dcba
}
.taste-detail .neutral-media-art{
 position:relative;display:block;width:clamp(94px,29%,154px);
 aspect-ratio:1;margin:0 0 18px;
 border-radius:50%;border:1px solid currentColor;opacity:.52;
 box-shadow:0 0 55px rgba(237,202,147,.14),inset 0 0 36px rgba(255,255,245,.1)
}
.taste-detail .neutral-media-art::before{
 content:"";position:absolute;inset:17%;border-radius:50%;
 border:1px solid currentColor;opacity:.55
}
.taste-detail .neutral-media-art::after{
 content:"";position:absolute;left:24%;right:24%;top:49%;
 border-top:1px solid currentColor;transform:rotate(-18deg);opacity:.67
}
.taste-detail .neutral-media-caption{
 position:relative;z-index:1;display:block;font-size:10px;font-weight:650;
 letter-spacing:1.6px;text-transform:uppercase;text-align:center;line-height:1.5;
 color:inherit;text-shadow:0 1px 7px rgba(255,255,255,.18)
}
.taste-detail .detail-photo:has(.intentional-neutral) .detail-grad{
 background:linear-gradient(0deg,rgba(11,25,34,.82),rgba(11,25,34,.08) 42%,transparent 72%)
}
@media(max-width:360px){
 .taste-detail .neutral-media-art{width:82px;margin-bottom:11px}
 .taste-detail .neutral-media-caption{font-size:9px;letter-spacing:1.25px}
}
@media(prefers-reduced-transparency:reduce){
 .taste-detail .detail-photo>.intentional-neutral{background:linear-gradient(145deg,#aac6c6,#31515f)}
 body[data-period="evening"] .taste-detail .detail-photo>.intentional-neutral{background:linear-gradient(145deg,#2a4b61,#101f32)}
}