/* The complete identity leads the narrow-screen opening. */
.mobile-opening{display:none}
@media(max-width:900px),(max-aspect-ratio:3/4){
  :root{--opening-height:max(560px,100svh)}
  .nav,.nav.is-scrolled{min-height:84px;height:84px;padding-block:10px;background:rgba(5,5,6,.5)}
  .nav.is-scrolled{background:rgba(5,5,6,.93)}
  .nav__logo,.nav.is-scrolled .nav__logo{width:128px;height:54px;object-fit:contain}
  .nav__brand picture{display:block}
  .nav__links{display:none}.nav__burger{display:block}
  .mobile-opening{position:relative;display:block;height:var(--opening-height);width:100%;min-height:560px;background:radial-gradient(ellipse at 50% 58%,rgba(232,116,59,.045),transparent 72%)}
  .mobile-opening__identity{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:min(84vw,430px,55svh);pointer-events:none;z-index:2;will-change:opacity,translate}
  .mobile-opening__identity img{display:block;width:100%;height:auto}
  .mobile-opening__bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:max(30px,env(safe-area-inset-bottom));z-index:2}
  .mobile-opening__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mobile-opening__actions .btn{min-height:58px;padding:12px 8px;font-size:11px;letter-spacing:.08em;white-space:normal;text-align:center;line-height:1.6}
  .mobile-opening__actions .btn:hover,.mobile-opening__actions .btn:focus-visible{background:var(--ember);border-color:var(--ember);color:var(--charcoal)}
  .mobile-opening__cue{display:flex;align-items:center;justify-content:center;gap:15px;min-height:44px;margin-top:14px;color:rgba(244,241,234,.65);font-size:11px;letter-spacing:.08em}
  .mobile-opening__cue span{color:var(--ember)}
  .mobile-categories{top:var(--opening-height);scrollbar-width:none}
  .mobile-categories::-webkit-scrollbar{display:none}
  .candle-world{top:calc(var(--opening-height) + 52px)!important}
  .hero.candle-scene{padding-top:calc(150vw + 92px)}
  .ignite__brand{width:min(84vw,430px,55svh)}
}
@media(max-width:360px){.nav__logo,.nav.is-scrolled .nav__logo{width:108px}.mobile-opening__actions .btn{font-size:10px}}

/* A quiet filmstrip surrounds the complete, uncropped photograph. */
.portrait-viewer[open]{grid-template-rows:auto minmax(50px,1fr) auto auto;gap:12px;padding:14px max(18px,3vw) max(12px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 35%,#17140f 0,#080808 65%);isolation:isolate}
.viewer-top{grid-row:1;background:transparent;min-height:44px}
.viewer-brand img{display:block;width:108px;height:40px;object-fit:contain}
.portrait-viewer .viewer-close{display:flex;align-items:center;gap:16px;font-size:26px;padding:0 4px 0 14px;min-height:44px}
.viewer-close span:first-child{font:12px var(--ui);letter-spacing:.04em}
.viewer-stage{grid-row:2;position:relative;inset:auto;isolation:isolate}
.viewer-image{position:absolute;z-index:1;object-fit:contain;box-shadow:0 12px 60px rgba(0,0,0,.25)}
.is-zoomed .viewer-stage{overflow:hidden}
.viewer-bottom{grid-row:3;flex-direction:row;align-items:center;padding-top:12px;gap:16px;background:transparent;border-color:rgba(244,241,234,.13)}
.viewer-title{font-size:clamp(20px,2.1vw,28px);line-height:1.15;margin-bottom:6px}
.viewer-status{font-size:11px;letter-spacing:.1em}
.viewer-actions{width:auto;flex-wrap:nowrap;gap:8px;flex-shrink:0}
.portrait-viewer button{background:transparent;min-height:44px;font-size:12px}
.portrait-viewer .viewer-prev,.portrait-viewer .viewer-next{font-size:22px}
.viewer-version[hidden]{display:none}
.viewer-filmstrip{grid-row:4;position:relative;min-width:0;overflow:hidden;padding-top:4px;z-index:3;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.viewer-rail{display:flex;align-items:center;gap:10px;overflow-x:auto;overscroll-behavior:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:7px calc(50% - 31px) 8px;touch-action:pan-x;cursor:grab}
.viewer-rail::-webkit-scrollbar{display:none}
.viewer-rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.portrait-viewer .viewer-thumb{position:relative;flex:0 0 62px;min-width:62px;min-height:0;height:81px;border:0;padding:0 0 10px;opacity:.4;transition:opacity .25s;scroll-snap-align:center;cursor:pointer}
.viewer-thumb picture,.viewer-thumb img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 0;pointer-events:none;user-select:none}
.viewer-thumb::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:1px;background:transparent;transition:background .25s}
.portrait-viewer .viewer-thumb:hover,.portrait-viewer .viewer-thumb:focus-visible{opacity:.8}
.portrait-viewer .viewer-thumb[aria-current=true]{opacity:1}
.viewer-thumb[aria-current=true]::after{background:var(--ember)}
.portrait-viewer .viewer-thumb:focus-visible{outline-offset:3px}
.portrait-viewer .viewer-peek{display:none}
.viewer-open{cursor:auto!important}.viewer-open .vapor{visibility:hidden}
@media(min-width:1050px) and (min-height:600px){
  .portrait-viewer .viewer-peek{position:absolute;top:14%;bottom:14%;display:block;width:12%;padding:0;border:0;opacity:.3;overflow:hidden;transition:opacity .3s,transform .4s;z-index:0}
  .viewer-peek--previous{left:0}.viewer-peek--next{right:0}
  .viewer-peek img{width:100%;height:100%;object-fit:contain;pointer-events:none}
  .portrait-viewer .viewer-peek:hover,.portrait-viewer .viewer-peek:focus-visible{opacity:.75;transform:translateY(-3px)}
  .is-zoomed .viewer-peek{visibility:hidden}
}
@media(max-width:600px){
  .portrait-viewer[open]{gap:10px;padding:10px 16px max(10px,env(safe-area-inset-bottom))}
  .viewer-brand img{width:96px;height:36px}.viewer-close span:first-child{font-size:11px}
  .viewer-bottom{flex-direction:column;align-items:stretch;gap:12px;padding-top:10px}
  .viewer-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .viewer-title{font-size:22px;margin:0;max-width:75%}.viewer-status{font-size:10px;white-space:nowrap}
  .viewer-actions{width:100%;gap:8px;justify-content:space-between}.viewer-zoom{flex:1}
  .portrait-viewer .viewer-thumb{flex-basis:47px;min-width:47px;height:66px}
  .viewer-rail{gap:8px;padding-inline:calc(50% - 23.5px)}
  .viewer-filmstrip{padding-top:0}.portrait-viewer button{min-width:42px}
}
@media(max-height:500px){
  .portrait-viewer[open]{gap:5px;padding-top:4px;padding-bottom:4px;grid-template-rows:auto minmax(40px,1fr) auto auto}
  .viewer-top{min-height:36px}.viewer-brand img{height:28px;width:84px}
  .portrait-viewer .viewer-close{min-height:36px}.viewer-close span:first-child{font-size:11px}
  .viewer-bottom{flex-direction:row;align-items:center;padding-top:5px;gap:12px}.viewer-meta{display:flex;align-items:baseline;gap:12px}
  .viewer-title{font-size:18px;margin:0;max-width:none}.viewer-status{font-size:9px;white-space:nowrap}
  .viewer-actions{width:auto;gap:6px}.portrait-viewer button{min-height:36px;padding:5px 9px}.viewer-zoom{flex:initial}
  .viewer-filmstrip{padding:0}.viewer-rail{gap:8px;padding:2px calc(50% - 17px) 3px}
  .portrait-viewer .viewer-thumb{flex-basis:34px;min-width:34px;height:43px;padding-bottom:5px}
}
@media(prefers-reduced-motion:reduce){.mobile-opening__identity{will-change:auto}.viewer-thumb,.viewer-thumb::after,.viewer-peek{transition:none!important}}
@media(max-width:360px) and (min-height:501px){
  .viewer-actions{display:grid;grid-template-columns:42px minmax(0,1fr) 42px}
  .viewer-version{grid-column:1/-1}.viewer-actions .viewer-zoom{min-width:0}
}
@media(max-width:320px){
  .nav{padding-inline:12px;gap:8px}.nav__logo,.nav.is-scrolled .nav__logo{width:80px}
  .language{gap:0}.language button{min-width:24px;font-size:10px}
  .viewer-close span:first-child{font-size:10px}.portrait-viewer .viewer-close{gap:8px;padding-left:0}
}
