/* Isolated, reversible scent-gallery prototype. */
.scent-explorer{background:#e8e3da;color:#302d27;padding:110px 5% 36px;position:relative}
.scent-heading{max-width:1440px;margin:0 auto 68px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.scent-heading .eyebrow{color:#786044;margin-bottom:22px}.scent-heading h2{font-size:clamp(2.1rem,4vw,4.2rem);line-height:1.4;font-weight:400}
.scent-intro{font-size:1rem;line-height:1.9;padding-bottom:8px}.scent-instruction{font-size:.75rem;color:#716b62;margin-top:22px}
.scent-grid{max-width:1440px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:transparent;border-top:1px solid #b8b0a4;gap:0}
.scent-card{background:#e8e3da;position:relative;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:20px;padding:48px 32px;min-height:282px;border-bottom:1px solid #b8b0a4}
.scent-disc-button{width:100%;aspect-ratio:1;position:relative;display:block;padding:0;border:0;border-radius:50%;background:transparent;isolation:isolate;cursor:pointer}
.scent-disc-button::before{content:'';position:absolute;inset:22% 11% 3%;border-radius:50%;background:#4e4334;filter:blur(13px);opacity:.16;transform:translate(0,10px) scale(.9);transition:transform .9s,opacity .9s}
.scent-disc{display:block;position:absolute;inset:-4% -8%;transform:rotate(-8deg);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);isolation:isolate}
.scent-refill-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:saturate(.6);}
.scent-refill-tint{position:absolute;left:17%;right:17%;top:13%;bottom:13%;border-radius:50%;background:var(--scent-color);mix-blend-mode:multiply;opacity:.28;filter:blur(5px);pointer-events:none}
.scent-disc-button:hover .scent-disc,.scent-disc-button:focus-visible .scent-disc{transform:translateY(-5px) rotate(-4deg)}
.scent-disc-button:hover::before{opacity:.12;transform:translate(1px,14px) scale(.92)}
.scent-card-label{font-size:.6rem;letter-spacing:.15em;color:#6e665a;margin-bottom:12px}.scent-card h3{font-family:var(--serif);font-size:clamp(1.2rem,1.65vw,1.8rem);font-weight:400;margin-bottom:10px}.scent-card-summary{color:#726a5e;font-size:.72rem;line-height:1.8}.scent-card-arrow{display:block;font-size:1.25rem;margin-top:17px;color:#766a58}
.scent-footnote{max-width:1440px;margin:25px auto 0;display:flex;justify-content:space-between;gap:20px;color:#746b5d;font-size:.65rem}.scent-footnote>span{letter-spacing:.12em}
.scent-dialog{position:fixed;inset:0;margin:0;padding:0;border:0;width:100vw;max-width:none;height:100dvh;max-height:none;background:var(--scent-color,#738979);color:#fff9ef;overflow:hidden;overscroll-behavior:contain;box-shadow:none}
.scent-dialog::backdrop{background:transparent}.scent-film-stage,.scent-film,.scent-film-wash{position:absolute;inset:0;width:100%;height:100%}.scent-film{object-fit:cover}.scent-film-stage{background:radial-gradient(ellipse at 78% 18%,#ffffff20,transparent 58%),var(--scent-color)}.scent-film-wash{background:linear-gradient(90deg,#191b19a6 0%,#191b1955 55%,#191b1920),linear-gradient(0deg,#17191366,transparent 60%)}
.scent-dialog-ui{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:30px 5% 28px;opacity:0;transition:opacity .35s;overflow-y:auto}.scent-dialog.is-revealed .scent-dialog-ui{opacity:1}.scent-dialog-top,.scent-dialog-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0}.scent-dialog-top>span,.scent-dialog-bottom>span{font-size:.65rem;letter-spacing:.15em}.scent-close,.scent-back,.scent-play{background:transparent;border:0;color:inherit;padding:12px 0;font-size:.8rem}.scent-close{display:flex;align-items:center;gap:25px;min-width:80px;justify-content:flex-end}.scent-close span{font-size:1.9rem;font-weight:200;line-height:1}.scent-detail{width:min(560px,85%);margin:auto 0;padding:65px 0}.scent-detail-index{font-size:.7rem;letter-spacing:.22em;margin-bottom:22px;color:#f4ead4}.scent-detail h2{font:400 clamp(3.5rem,8vw,8rem)/1.2 var(--serif);margin-bottom:30px}.scent-detail>p:last-of-type{font-size:clamp(.95rem,1.2vw,1.15rem);line-height:2;color:#f2eadf;max-width:430px}.scent-media-status{display:flex;gap:12px;align-items:center;margin-top:40px;font-size:.7rem;color:#eee6d8}.scent-status-dot{width:6px;height:6px;border:1px solid currentColor;border-radius:50%}.scent-play{margin-top:18px;border-bottom:1px solid #ffffff77}.scent-dialog-bottom{border-top:1px solid #ffffff35;padding-top:14px}.scent-back{font-size:.75rem}
.scent-disc-button:focus-visible{outline:2px solid #3c362c;outline-offset:8px}.scent-dialog button:focus-visible{outline:2px solid #fff9ef;outline-offset:6px}
@media(min-width:1600px){.scent-card{padding:52px 34px;gap:26px}}
@media(max-width:1050px){.scent-card{padding:32px 18px;gap:15px;grid-template-columns:1fr;min-height:0}.scent-disc-button{width:78%;margin:0 auto 12px}.scent-card-copy{text-align:center}.scent-card-summary{font-size:.75rem}.scent-card-arrow{margin-top:9px}.scent-disc-number{font-size:3.7rem}.scent-disc-wordmark{font-size:.7rem}}
@media(max-width:650px){.scent-explorer{padding:70px 6% 28px}.scent-heading{display:block;margin-bottom:36px}.scent-heading .eyebrow{font-size:.65rem}.scent-heading h2{font-size:2.2rem}.scent-intro{font-size:.875rem;margin-top:25px}.scent-instruction{font-size:.7rem;margin-top:12px}.scent-grid{grid-template-columns:1fr}.scent-card{grid-template-columns:1fr 1fr;padding:28px 24px;gap:28px}.scent-disc-button{width:100%;max-width:165px;margin:0 auto}.scent-card-copy{text-align:left}.scent-card h3{font-size:1.5rem}.scent-disc-number{font-size:3.2rem}.scent-footnote{display:block;font-size:.6rem;line-height:1.8}.scent-footnote p{margin-top:7px}.scent-dialog-ui{padding:max(16px,env(safe-area-inset-top)) 7% max(18px,env(safe-area-inset-bottom))}.scent-detail{width:100%;padding:45px 0}.scent-dialog-bottom{align-items:flex-start;flex-direction:column;gap:0}.scent-detail h2{font-size:4.5rem}.scent-dialog-top>span{font-size:.55rem}.scent-media-status{line-height:1.7}}
@media(prefers-reduced-motion:reduce){.scent-disc,.scent-dialog-ui,.scent-disc-button::before{transition:none}.scent-disc-button:hover .scent-disc,.scent-disc-button:focus-visible .scent-disc{transform:none}}
.scent-media-controls{display:flex;align-items:baseline;gap:26px;flex-wrap:wrap}.scent-source{font-size:.65rem;color:#eee6d8;text-decoration:underline;text-underline-offset:4px}

/* Photographic refill material, restrained gallery and glass-to-film reveal. */
.scent-card:not(:nth-child(3n)){border-right:1px solid #c8c0b4}
.scent-glass{position:absolute;inset:-8%;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(117deg,transparent 20%,#fff9e64d 35%,#fffef6b3 37%,#e7dac34d 39%,transparent 49%,#fff8e51f 67%,transparent 78%);background-size:180% 100%;box-shadow:inset 0 0 100px #fff9df55;will-change:opacity,backdrop-filter,transform}
@media(max-width:650px){.scent-card:not(:nth-child(3n)){border-right:0}.scent-card{padding:32px 18px;gap:24px;min-height:210px}.scent-refill-tint{opacity:.25}}
@media(prefers-reduced-motion:reduce){.scent-disc{transition:none}.scent-glass{display:none}.scent-disc-button:hover .scent-disc,.scent-disc-button:focus-visible .scent-disc{transform:rotate(-8deg)}}

.scent-glass-rim{position:absolute;z-index:3;pointer-events:none;opacity:0;border-radius:50%;border:1px solid #fff9e3bb;box-shadow:inset 0 0 8px 2px #fff8df77,0 0 9px #e8f4ff55;will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.scent-glass-rim{display:none}}

/* Continuous material atmosphere: match the surrounding #211d1a scenes. */
#material-closeup .scene-stage::after{content:'';position:absolute;inset:auto 0 0;height:24%;background:linear-gradient(180deg,transparent,#211d1a);pointer-events:none;z-index:1}
#material-closeup .scene-bottom{z-index:2}
.scent-explorer{background:radial-gradient(ellipse at 50% 47%,#77726418,transparent 68%),linear-gradient(180deg,#211d1a 0%,#2b2925 15%,#3b3933 38%,#383630 65%,#292622 86%,#211d1a 100%);color:#e9e3d9;padding-top:145px;padding-bottom:100px}
.scent-heading .eyebrow{color:#b4a28d}.scent-intro{color:#d4cec3}.scent-instruction{color:#aca69b}
.scent-grid{border:0;background:transparent;column-gap:24px;row-gap:20px}
.scent-card{background:radial-gradient(ellipse at 28% 50%,#e5d4ad0c 0%,transparent 67%);border:0;padding:42px 25px;min-height:270px}
.scent-card:not(:nth-child(3n)){border-right:0}
.scent-refill-image{filter:saturate(.5) brightness(.83);}
.scent-disc-button::before{background:#0c0b09;opacity:.32;filter:blur(17px)}
.scent-disc-button:hover::before{opacity:.22}
.scent-card-label{color:#b8ac9a}.scent-card-summary{color:#bcb5a9}.scent-card-arrow{color:#c9b89f}.scent-footnote{color:#a59c8e;margin-top:35px}
.scent-disc-button:focus-visible{outline:1px solid #d6c5ab;outline-offset:7px}
@media(max-width:1050px){.scent-card{background:radial-gradient(ellipse at 50% 32%,#e5d4ad0c,transparent 65%)}}
@media(max-width:650px){.scent-explorer{padding-top:95px;padding-bottom:65px}.scent-grid{gap:14px}.scent-card{padding:30px 8px;min-height:210px;background:radial-gradient(ellipse at 24% 50%,#e5d4ad0c,transparent 68%)}.scent-footnote{font-size:.6rem}.scent-heading{margin-bottom:26px}}

/* Keep illumination circular; never reveal rectangular card boundaries. */
.scent-card{background:transparent}
.scent-disc-button::after{content:"";position:absolute;inset:-38%;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#e5d4ad0d,transparent 66%)}

/* Colored fill stays inside the clear photographic rim. */
.scent-refill-tint{left:19%;right:19%;top:15%;bottom:15%;opacity:.68;mix-blend-mode:color;filter:blur(3px);background:radial-gradient(ellipse at 40% 34%,color-mix(in srgb,var(--scent-color),white 12%),var(--scent-color) 65%)}
.scent-refill-tint::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--scent-color);mix-blend-mode:soft-light;opacity:.48}
.scent-refill-image{filter:saturate(.65) brightness(.94)}
.scent-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scent-film{opacity:0;transition:opacity .35s ease}
.scent-film.is-frame-ready{opacity:1}
.scent-dialog-ui{transition:opacity .35s .18s}
@media(prefers-reduced-motion:reduce){.scent-film,.scent-dialog-ui{transition:none}}
/* A small mechanical cabinet of fragrances: orbit, detent, then unseal. */
.scent-explorer{overflow:hidden;padding-top:110px;background:radial-gradient(ellipse at 50% 44%,#4e4a3f44,transparent 58%),linear-gradient(#211d1a,#302e28 48%,#211d1a)}
.scent-heading{max-width:1240px;margin-bottom:14px}.scent-heading h2{font-size:clamp(2rem,3.7vw,3.7rem)}
.scent-grid{display:block;position:relative;max-width:1240px;height:460px;perspective:1100px;touch-action:pan-y;cursor:grab;isolation:isolate;user-select:none;-webkit-user-select:none}
.scent-grid.is-dragging{cursor:grabbing}.scent-grid::before{content:'';position:absolute;left:9%;right:9%;bottom:1%;height:17%;border-radius:50%;background:#08070699;filter:blur(28px);transform:scaleY(.7);pointer-events:none}
.hanger-spindle{position:absolute;left:calc(50% - 4px);top:6px;height:116px;width:8px;background:linear-gradient(90deg,#514d45,#c4bdb0 45%,#625e55 70%,#37342f);z-index:0;border-radius:4px;box-shadow:2px 0 5px #0004}
.hanger-spindle::before{content:'';position:absolute;left:-12px;top:-2px;width:32px;height:9px;background:linear-gradient(#9f988b,#36332d);border-radius:50%;box-shadow:0 3px 3px #0006}
.hanger-rail{position:absolute;left:14%;right:14%;top:60px;height:100px;border-radius:50%;border:3px solid #928878;border-top-color:#554e43;border-bottom-color:#b9ad97;box-shadow:0 3px 3px #08070577,inset 0 1px 1px #e0d5bb55;z-index:0;pointer-events:none}
.hanger-rail::before{content:'';position:absolute;left:0;right:0;top:47%;height:3px;background:linear-gradient(90deg,#716959,#c6bba0 50%,#625b4e);opacity:.65;transform:rotate(-6deg)}
.hanger-rail::after{content:'';position:absolute;left:calc(50% - 10px);top:calc(50% - 8px);height:14px;width:20px;border-radius:50%;background:linear-gradient(#c0b69f,#514a3e);box-shadow:0 4px 3px #0006}
.scent-hanger{position:absolute;inset:0;perspective:1000px;transform-style:preserve-3d}
.hanger-card.scent-card{position:absolute;left:50%;top:59%;width:310px;height:310px;min-height:0;display:block;padding:0;margin:0;border:0;background:none;will-change:transform;transform-style:preserve-3d;transition:opacity .3s,filter .3s}
.hanger-card .scent-disc-button{width:100%;height:100%;margin:0;max-width:none;perspective:800px;touch-action:pan-y;cursor:inherit}
.hanger-card .scent-disc{inset:0;transform:rotate(0);transform-style:preserve-3d;transition:transform .7s}
.hanger-card .scent-disc-button:hover .scent-disc,.hanger-card .scent-disc-button:focus-visible .scent-disc{transform:none}
.hanger-card .scent-refill-image{pointer-events:none;-webkit-user-drag:none;filter:saturate(.65) brightness(.95);}
.hanger-card .scent-refill-tint{left:20%;right:20%;top:18%;bottom:18%;filter:blur(1px);opacity:.85}
.hanger-card .refill-core{position:absolute;inset:21% 23%;border-radius:50%;background:radial-gradient(ellipse at 35% 20%,#ffffff44,transparent 65%),var(--scent-color);opacity:.25;filter:blur(6px)}
.refill-hook{position:absolute;left:calc(50% - 2px);bottom:77%;width:4px;height:var(--hanger-length,64px);background:linear-gradient(90deg,#645e51,#d8cdb5 50%,#676050);border-radius:3px;z-index:-1;box-shadow:2px 1px 2px #0004}
.refill-hook::before{content:'';position:absolute;left:-8px;top:-8px;width:20px;height:13px;border:3px solid #b4a78d;border-bottom-color:#585145;border-radius:50%;box-shadow:0 1px 2px #0009}
.refill-hook::after{content:'';position:absolute;left:-10px;bottom:-2px;width:24px;height:13px;border-radius:4px;background:linear-gradient(#b5aa95,#514b42);box-shadow:0 2px 4px #0006}
.refill-lid{position:absolute;inset:15% 17%;border-radius:50%;transform-origin:50% 0%;transform:rotateX(0deg);background:linear-gradient(132deg,#ffffff04 22%,#ffffff34 25%,#ffffff04 29%,#ffffff00 47%,#ffffff11 74%);border:1px solid #eee7da66;box-shadow:inset 0 0 0 4px #d8d4c21c,inset 1px 2px 5px #fff9e044,2px 4px 4px #0003;transition:transform .85s cubic-bezier(.25,.7,.3,1),background .6s;backface-visibility:visible;pointer-events:none}
.refill-lid-rim{position:absolute;inset:3px;border:1px solid #fff9df33;border-radius:50%}.refill-lid-glint{position:absolute;inset:6px;border-radius:50%;border-top:2px solid #ffffff77;transform:rotate(-25deg)}
.hanger-card.is-unsealing .refill-lid{transform:rotateX(112deg);background:linear-gradient(145deg,#ffffff42,#ffffff07);box-shadow:inset 0 0 0 4px #e8e2cc33,0 5px 12px #0004}
.scent-grid.is-unsealing .hanger-card:not(.is-selected){opacity:.13!important;filter:blur(2px)!important}
.hanger-card.is-selected .scent-disc-button{cursor:pointer}.hanger-card.is-selected .scent-disc-button::after{inset:-10%;background:radial-gradient(ellipse,color-mix(in srgb,var(--scent-color),transparent 88%),transparent 65%)}
.hanger-selection{text-align:center;position:relative;z-index:2;min-height:116px;margin:4px auto 16px}.hanger-count{font-size:12px;font-variant-numeric:tabular-nums;color:#a59a87;letter-spacing:.06em}.hanger-selection h3{font:400 clamp(1.8rem,3vw,2.5rem)/1.5 var(--serif);margin:8px 0 6px;color:#f0eadf}.hanger-selection p{font-size:15px;color:#bfb7a9;line-height:1.7}
.hanger-controls{display:flex;align-items:center;justify-content:center;gap:30px}.hanger-controls button{font:500 14px/1.5 var(--sans);color:#e3dacb;cursor:pointer}.hanger-step{height:44px;width:44px;border:1px solid #b6a99055;border-radius:50%;background:transparent;font-size:21px!important;transition:background .2s}.hanger-step:hover{background:#a99c7f22}.hanger-open{background:transparent;border:0;border-bottom:1px solid #b6a99088;padding:12px 3px}.hanger-open:hover{color:#fff}.hanger-open:disabled{opacity:.55}
.hanger-markers{display:flex;gap:13px;justify-content:center;align-items:center;margin:35px auto 0;min-height:28px}.hanger-marker{border:0;background:transparent;width:23px;height:28px;padding:7px;cursor:pointer;position:relative}.hanger-marker::before{content:'';display:block;width:9px;height:9px;border-radius:50%;background:var(--scent-color);opacity:.5;transition:transform .25s,opacity .25s}.hanger-marker[aria-pressed=true]::before{opacity:1;transform:scale(1.3)}.hanger-marker[aria-pressed=true]::after{content:'';position:absolute;inset:2px 0;border:1px solid #d9ccb278;border-radius:50%}
.hanger-step:focus-visible,.hanger-open:focus-visible,.hanger-marker:focus-visible{outline:2px solid #e5d5b6;outline-offset:5px}.scent-footnote{max-width:1240px;margin-top:48px}
@keyframes detent{0%{transform:translateY(0)}40%{transform:translateY(2px)}100%{transform:translateY(0)}}.is-detent .hanger-rail{animation:detent .14s ease-out}
@media(max-width:650px){.scent-explorer{padding:75px 6% 60px}.scent-heading{margin-bottom:12px}.scent-heading h2{font-size:2.25rem}.scent-intro{margin-top:20px}.scent-grid{width:calc(100% + 13.64%);margin-left:-6.82%;height:330px}.hanger-card.scent-card{width:230px;height:230px;top:61%}.hanger-spindle{height:95px;top:8px}.hanger-rail{top:47px;left:10%;right:10%;height:65px}.hanger-selection{margin-top:8px;min-height:108px}.hanger-selection h3{font-size:1.9rem}.hanger-selection p{font-size:14px}.hanger-controls{gap:20px}.hanger-markers{gap:9px;margin-top:27px}.scent-footnote{margin-top:35px}.refill-hook{height:calc(var(--hanger-length)*.7)}}
@media(prefers-reduced-motion:reduce){.refill-lid,.hanger-card.scent-card,.hanger-marker::before{transition:none}.is-detent .hanger-rail{animation:none}}

/* Separate stacking planes keep rear refills occluded rather than ghosting through. */
.scent-hanger{transform-style:flat}

/* Refill-only composition: no rack, spindle, or hooks. */
.scent-grid{height:380px}
.hanger-card.scent-card{top:52%}
.scent-grid::before{bottom:8%;left:16%;right:16%}
.hanger-card.is-selected{z-index:110!important}
.scent-grid.is-unsealing .hanger-card:not(.is-selected){opacity:1!important;filter:brightness(.4)!important}
@media(max-width:650px){.scent-grid{height:280px}.hanger-card.scent-card{top:52%}.scent-grid::before{bottom:6%}}

/* Wider horizontal presentation, with quiet gaps between front refills. */
.scent-grid{max-width:1600px;width:calc(100% + 8%);margin-left:-4%}
.hanger-card.scent-card{width:280px;height:280px}
@media(max-width:650px){.scent-grid{width:calc(100% + 13.64%);margin-left:-6.82%}.hanger-card.scent-card{width:205px;height:205px}}