/* C112 + C113 preview shell, brand v8. Tokens from 35_Brand_Identity.md section 3. PREVIEW ONLY. */
@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/Inter-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/Inter-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#05060F;--mid:#0B1020;--panel:#121A32;--line:#1E2447;
  --ink:#F6F3EE;--soft:#E7E7EA;--muted:#A3A6C2;--dim:#7C80A0;
  --blue:#5868FF;--sblue:#7D9CFF;--violet:#9B5CFF;--purple:#C178E8;--warm:#F3B47C;--onwarm:#05060F;
  --green:#5FD394;--red:#FF7A80;
  --sans:Satoshi,system-ui,-apple-system,'Segoe UI',sans-serif;--data:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --tab:64px;--gut:16px;--max:1320px;
  --hero-img:url(/next/bg/d3.jpg);--hero-pos:50% 60%;--hero-tint:rgba(88,104,255,.14);--hero-op:.9;
}
/* C114 spacing scale: 4 px steps, every padding / margin / gap uses one of these */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:28px;--s8:32px;--s9:36px;--s10:40px;--s11:44px;--s12:48px;--s14:56px;--s16:64px;--s18:72px;--s24:96px;}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;min-height:100dvh;background:transparent;color:var(--ink);font:400 16px/1.45 var(--sans);font-variant-numeric:tabular-nums;
  padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom) + 16px);overflow-x:hidden;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
a{color:inherit;text-decoration:none;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
a:active,button:active{opacity:.7}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
img{max-width:100%}
.micro{font:500 12px/16px var(--data);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(5,6,15,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.bar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:56px;padding:0 var(--s2);max-width:var(--max);margin:0 auto}
.ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--ink)}
.logo{display:flex;justify-content:center;align-items:center;gap:var(--s2);height:44px}
.logo .m{height:24px;width:auto;display:block}
.logo .w{height:19px;width:auto;display:block}
.dnav,.dicons{display:none}
.searchrow{padding:0 var(--gut) var(--s3);max-width:var(--max);margin:0 auto;position:relative}
.search{display:flex;align-items:center;gap:var(--s3);height:48px;border:1px solid #2B3366;border-radius:3px;padding:0 var(--s4);background:rgba(18,26,50,.7);color:var(--muted)}
.search:focus-within{border-color:var(--blue)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:400 16px var(--sans)}
.search input::placeholder{color:var(--dim)}
#res{max-height:calc(100dvh - 190px);overflow-y:auto;overscroll-behavior:contain;position:absolute;left:var(--gut);right:var(--gut);top:54px;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:none;z-index:30}
#res a{display:flex;flex-direction:column;gap:2px;padding:var(--s3) var(--s4);min-height:44px;border-top:1px solid var(--line)}
#res a:first-child{border-top:0}
#res small{color:var(--muted);font-size:13px}

main{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* hero */
.hero{position:relative;margin:0 calc(var(--gut) * -1);padding:var(--s9) var(--gut) var(--s10);overflow:hidden;isolation:isolate;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hero-img) var(--hero-pos)/cover no-repeat;transform:scale(1.1)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,6,15,.55) 0%,rgba(5,6,15,.35) 40%,var(--bg) 100%),linear-gradient(90deg,rgba(5,6,15,.7),transparent 80%),var(--hero-tint)}
.hero h1{margin:0;font:400 44px/1.12 var(--sans);letter-spacing:-.02em}
.hero h1 i{font-style:italic;color:#B48CFF}
.hero p{margin:var(--s4) 0 0;max-width:34ch;font-size:17px;line-height:1.5;color:var(--soft)}
.ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);min-height:48px;padding:0 var(--s6);border:1px solid rgba(246,243,238,.55);border-radius:3px;font:500 15px var(--sans);color:var(--ink);background:rgba(5,6,15,.35)}
.btn.buy{background:var(--warm);color:var(--onwarm);border-color:var(--warm);font-weight:700}
.btn.ghost{border-color:var(--line);background:transparent}

/* sections */
.hd{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin:var(--s10) 0 var(--s4)}
.hd h2{margin:0;font:500 26px/1.15 var(--sans);letter-spacing:-.01em}
.hd .micro{display:block;margin-bottom:var(--s2)}
.hd a{font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.rail{display:flex;gap:var(--s3);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-snap-type:x proximity;scroll-padding-left:var(--gut);margin:0 calc(var(--gut) * -1);padding:0 var(--gut) var(--s1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail .card{flex:none;width:156px;scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s3)}

/* card */
.card{display:block;position:relative;min-width:0}
.tile{background:#fff;border-radius:8px;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:var(--s3);position:relative}
.tile img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.badge{position:absolute;left:8px;top:8px;font:700 12px/1 var(--sans);color:var(--green);background:rgba(5,6,15,.88);border:1px solid rgba(95,211,148,.45);border-radius:3px;padding:var(--s1) var(--s2)}
.meta{padding:var(--s3) 2px 0}
.price{display:flex;align-items:baseline;gap:var(--s2);white-space:nowrap;font:700 18px/1.2 var(--sans)}
.price s{font:400 13px var(--sans);color:var(--dim)}
/* 29 Oct (his call): perfume name first and bold, house second and muted, on every card (same as next/cards.css) */
.name{margin-top:var(--s1);font:700 14px/1.25 var(--sans);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:var(--s10)}
.house{margin-top:2px;font:400 13px/1.3 var(--sans);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--s10)}
.heart{position:absolute;right:-6px;bottom:-4px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--muted)}
.heart svg{transition:transform .25s cubic-bezier(.2,.8,.2,1),fill .2s}
.heart:active svg{transform:scale(.85)}
.heart.on{color:#E5484D}.heart.on svg{fill:currentColor;animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.3)}}
.toast{position:fixed;left:50%;bottom:calc(var(--tab) + env(safe-area-inset-bottom) + 18px);transform:translate(-50%,12px);z-index:60;max-width:calc(100vw - 32px);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:500 14px/1.4 var(--sans);text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:768px){.toast{bottom:28px}}
@media (prefers-reduced-motion:reduce){.heart.on svg{animation:none}}

/* explore + lists */
.tabsw{display:flex;border:1px solid var(--line);border-radius:3px;padding:var(--s1);margin:var(--s5) 0 0;max-width:340px;background:var(--mid)}
.tabsw a{flex:1;min-height:42px;display:flex;align-items:center;justify-content:center;font:500 15px var(--sans);color:var(--muted);border-radius:2px}
.tabsw a.on{background:var(--panel);color:var(--ink)}
.mapcard{display:block;position:relative;margin-top:var(--s4);border:1px solid var(--line);border-radius:8px;overflow:hidden;padding:var(--s6) var(--s5);min-height:170px;isolation:isolate;background:var(--mid)}
.mapcard::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/next/bg/map.jpg) 60% 50%/cover;filter:brightness(1.7) saturate(1.3)}
.mapcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,6,15,.92) 30%,rgba(5,6,15,.05))}
.mapcard b{display:block;font:500 24px/1.15 var(--sans)}
.mapcard span{display:block;margin-top:var(--s2);max-width:26ch;color:var(--soft);font-size:15px;line-height:1.45}
.mapcard i{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s2);font:500 15px var(--sans);font-style:normal;border-bottom:1px solid var(--ink)}
.banner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:84px;border-radius:8px;padding:0 var(--s5);margin-top:var(--s3);overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.banner b{font:500 24px var(--sans)}
.banner.txt{min-height:64px;color:var(--soft)}.banner.txt b{font-size:20px}
/* F14 shop tiles (Explore): logo centred in a fixed band, count on a quiet line below; three different logos, one weight */
.banners.shops{grid-template-columns:1fr}
.banner.shoptile{flex-direction:column;align-items:stretch;justify-content:space-between;gap:var(--s4);min-height:136px;padding:var(--s6)}
.banner.shoptile .lg{height:72px;display:flex;align-items:center}
.banner.shoptile .lg img{display:block;height:28px;width:auto;max-width:100%;object-fit:contain}.banner.shoptile.niche-story .lg img{height:56px}
.banner.shoptile .mt{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);font:400 14px var(--sans);color:var(--muted)}
.banner.shoptile .mt svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.banner.shoptile:hover .mt svg{transform:translateX(4px)}}
@media (min-width:600px){.banners.shops{grid-template-columns:repeat(3,1fr)}}
.banner .th{display:flex;gap:var(--s2)}
.banner .th span{width:44px;height:56px;background:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:var(--s1)}
.banner .th img{max-width:100%;max-height:100%;object-fit:contain}
.rowlist{margin-top:var(--s1)}
.rowlist .gl{flex:none;display:inline-flex;width:24px;justify-content:center}
.rowlist a{display:flex;align-items:center;gap:var(--s4);min-height:56px;padding:0 2px;border-top:1px solid var(--line);font-size:17px}
.rowlist a:last-child{border-bottom:1px solid var(--line)}
.rowlist .dot{width:12px;height:12px;border-radius:50%;flex:none}
.rowlist small{margin-left:auto;color:var(--muted);font:400 13px var(--data)}
.rowlist svg{flex:none;color:var(--muted)}
.houses{display:flex;gap:var(--s4);overflow-x:auto;padding:2px 0 var(--s2);scrollbar-width:none}
.houses::-webkit-scrollbar{display:none}
.houses a{flex:none;width:76px;text-align:center;font-size:13px;color:var(--muted)}
.houses .c{width:76px;height:76px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:var(--s2);margin-bottom:var(--s2);border:2px solid var(--line)}
.houses .c img{max-width:100%;max-height:100%;object-fit:contain}
.houses em{font-style:normal;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips a{min-height:44px;display:inline-flex;align-items:center;padding:0 var(--s4);border:1px solid #2B3366;border-radius:3px;font-size:15px;color:var(--soft)}
.note{margin:var(--s11) 0 0;padding:var(--s4);border:1px dashed var(--line);border-radius:8px;color:var(--dim);font-size:13px;line-height:1.5;text-align:center}
.title{display:none}

/* perfume */
.pf-top{display:grid;gap:var(--s5);padding-top:var(--s4)}
.stage{position:relative;border-radius:8px;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;max-height:70vh;background:#fff}
.stage img{max-width:84%;max-height:90%;object-fit:contain}
.fam{display:flex;align-items:center;gap:var(--s3);font:500 14px var(--sans);color:var(--muted)}
.fam i{width:10px;height:10px;border-radius:50%}
.pf h1{margin:var(--s2) 0 0;font:500 38px/1.12 var(--sans);letter-spacing:-.02em;overflow-wrap:anywhere}
.pf .sub{margin-top:var(--s2);color:var(--muted);font-size:15px}
.pf .big{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.pf .big b{font:700 40px/1 var(--sans);letter-spacing:-.01em}
.pf .big span{color:var(--muted);font-size:14px}
.pf .val{margin-top:var(--s2);font-size:14px;color:var(--green)}
.pf .chk{margin-top:var(--s2);font:400 13px var(--data);color:var(--dim)}
.pf .acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.pf .acts .btn{flex:1 1 100%}
.pf .acts .btn.sm{flex:1 1 calc(50% - 6px);font-size:14px}
.sec{margin-top:var(--s9)}
.sec h2{margin:0 0 var(--s3);font:500 24px var(--sans);letter-spacing:-.01em}
.shop{display:grid;grid-template-columns:1fr auto;gap:2px var(--s3);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--line);font-family:var(--data)}
.shop:last-of-type{border-bottom:1px solid var(--line)}
.shop .s{font:500 15px var(--sans)}
.shop .z{color:var(--muted);font-size:13px}
.shop .p{font:700 17px var(--sans);text-align:right}
.shop .pm{color:var(--muted);font-size:13px;text-align:right}
.shop .pm em{font-style:normal;color:var(--green);margin-left:var(--s2)}
.shop a{grid-column:1/-1;margin-top:var(--s2);min-height:44px}
.acc{display:grid;gap:var(--s3)}
.acc div span:first-child{font-size:14px;color:var(--soft)}
.acc .bar2{display:block;height:6px;background:#10153A;margin-top:var(--s2);border-radius:1px;overflow:hidden}
.acc .bar2 span{display:block;height:6px}
.pyr{display:grid;gap:var(--s3)}
.pyr div{display:flex;gap:var(--s3);align-items:baseline;border-top:1px solid var(--line);padding-top:var(--s3)}
.pyr b{flex:0 0 52px;font:500 11px var(--data);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.pyr span{color:var(--soft);font-size:15px}
.similar{display:grid;gap:0}
.similar a{display:flex;align-items:center;gap:var(--s4);min-height:88px;border-top:1px solid var(--line)}
.similar a:last-child{border-bottom:1px solid var(--line)}
.similar .im{width:56px;height:70px;background:#fff;border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center;padding:var(--s1)}
.similar .im img{max-width:100%;max-height:100%;object-fit:contain}
.similar .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.similar .t small{color:var(--muted);font-size:13px}
.similar .t span{font:500 17px var(--sans)}
.similar .pr{font:700 16px var(--sans)}
.legal{margin-top:var(--s3);font:400 12px/1.5 var(--data);color:var(--dim)}

/* tab bar (phone) */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:25;height:calc(var(--tab) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(5,6,15,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:stretch}
.tabs a{flex:1;max-width:160px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);font:500 12px var(--sans);color:var(--dim)}
.tabs a.on{color:var(--ink)}.tabs a.on svg{fill:currentColor;fill-opacity:.15}


.skel{background:linear-gradient(90deg,#0B1020,#161F3E,#0B1020);background-size:200% 100%;animation:sh 1.4s infinite;border-radius:8px;aspect-ratio:4/5}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}.hero::before{transform:none}}
@media (max-width:767px){body.explore .logo{display:none}body.explore .title{display:block;text-align:center;font:500 24px var(--sans)}}

/* tablet and desktop: designed, not a stretched phone. Header with sub-nav from 768. */
@media (min-width:768px){
  :root{--gut:28px}
  body{padding-bottom:var(--s12)}
  .tabs{display:none}
  .top{padding-top:0}
  .bar{grid-template-columns:auto auto 1fr auto;gap:var(--s6);height:68px;padding:0 var(--gut)}
  .logo{justify-content:flex-start}.logo .m{height:28px}.logo .w{height:22px}
  .bar .l,.bar .title{display:none!important}
  .dnav{display:flex;gap:var(--s2)}
  .dnav a{display:flex;align-items:center;min-height:44px;padding:0 var(--s3);font:500 15px var(--sans);color:var(--muted)}
  .dnav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue)}
  .dicons{display:flex;justify-content:flex-end;gap:0}
  .bar>.ico.acct{display:none}
  .searchrow{padding:0 var(--gut) var(--s3)}
  .search{height:44px}
  #res{left:var(--gut);right:var(--gut);top:50px}
  .dicons .ico:first-child{display:none}
  .hero{margin:0 calc(50% - 50vw);padding:72px max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));min-height:460px;justify-content:center}
  .hero h1{font-size:64px;max-width:11ch}
  .hero p{font-size:19px;max-width:38ch}
  .hero::after{background:linear-gradient(90deg,rgba(5,6,15,.88) 15%,rgba(5,6,15,.2) 80%),linear-gradient(180deg,transparent 70%,var(--bg)),var(--hero-tint)}
  .hd h2{font-size:32px}
  .rail{margin:0;padding:0 0 var(--s1)}.rail .card{width:190px}
  .grid{grid-template-columns:repeat(3,1fr);gap:var(--s7) var(--s4)}
  .banners{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}.banners>*{margin-top:var(--s3)}
  .rowlist{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s10);align-content:start}
  .rowlist a:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--line)}
  .pf-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s12);padding-top:var(--s8);align-items:center}
  .stage{max-height:none}
  .pf h1{font-size:56px}.pf .big b{font-size:52px}
  .pf .acts .btn{flex:0 0 auto;min-width:240px}.pf .acts .btn.sm{flex:0 0 auto;min-width:0}
  .pfcols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s14)}
  .shop{grid-template-columns:1.2fr .7fr 1fr 1fr auto;gap:var(--s4)}
  .shop a{grid-column:auto;margin:0}
  .shop .p,.shop .pm{text-align:left}
  .similar{grid-template-columns:1fr 1fr;column-gap:var(--s10)}
  .similar a:nth-last-child(2){border-bottom:1px solid var(--line)}
}
@media (min-width:1024px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .rail{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6) var(--s4);overflow:visible}.rail .card{width:auto}
  .rail .card:nth-child(n+5){display:none}
  .banners{grid-template-columns:repeat(4,1fr)}
  .hero{padding-top:var(--s24);padding-bottom:var(--s24);min-height:520px}.hero h1{font-size:72px}
  .searchrow{position:absolute;left:50%;top:12px;width:min(420px,32vw);padding:0;transform:translateX(-10%)}
  #res{left:0;right:0}
  .dicons .ico:first-child{display:flex}
}
@media (min-width:1280px){
  .grid{grid-template-columns:repeat(5,1fr)}
  .rail{grid-template-columns:repeat(6,1fr)}.rail .card:nth-child(n+5){display:block}.rail .card:nth-child(n+7){display:none}
  .hero{min-height:560px}
}
.pf{position:relative;isolation:isolate}
.pf::before{content:"";position:fixed;left:0;right:0;top:0;height:560px;background:var(--hero-img) center/cover;opacity:.4;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);z-index:-1}
.pf .acts .btn.full{flex:1 1 100%}
.btn.heart{position:static;width:auto;height:auto;min-height:48px;border:1px solid var(--line);color:var(--ink);background:transparent;padding:0 var(--s6)}

/* live hero: the real Main-page particles (universe.js, ?embed=1) inside the new Home */
.hero.live{min-height:0;display:block;padding:0;margin:0 calc(var(--gut) * -1)}
.hero.live::before{opacity:var(--hero-op,.5)}
.pstage{pointer-events:none;display:block;width:100%;height:340px;border:0;background:transparent}
.hero.live .copy{position:relative;padding:var(--s2) var(--gut) var(--s9)}
.hero.live h1{font-size:40px}
.hsearch{position:relative;display:flex;gap:var(--s2);margin-top:var(--s5)}
.hsearch .search{flex:1;min-width:0;background:rgba(5,6,15,.6)}
.hsug{display:none;position:absolute;left:0;right:0;top:54px;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:30}
.hsug a{display:flex;flex-direction:column;gap:2px;padding:var(--s3) var(--s4);min-height:44px;border-top:1px solid var(--line)}
.hsug a:first-child{border-top:0}.hsug small{color:var(--muted);font-size:13px}
.hfound{margin:var(--s2) var(--gut) 0;text-align:center}.hfound .fam{justify-content:center}.hfound .fn{font:500 30px/1.1 var(--sans);letter-spacing:-.01em;margin-top:var(--s2)}
.hfound .fl a.btn{background:var(--warm);color:var(--onwarm);border:1px solid var(--warm);font-weight:700;padding:0 var(--s6);text-decoration:none;min-height:48px}
.hfound .fl{display:flex;gap:var(--s5);align-items:center;justify-content:center;margin-top:var(--s2)}.hfound .fl a,.hfound .fl button{min-height:44px;display:inline-flex;align-items:center;background:none;border:0;color:var(--muted);font:500 15px var(--sans);text-decoration:underline;text-underline-offset:4px;padding:0}
.hfound[hidden]{display:none}
@media (min-width:768px){
  .hero.live{margin:0 calc(50% - 50vw);padding:0}
  .pstage{height:380px;max-width:520px;margin:0 auto}
  .hero.live .copy{padding:8px max(var(--gut),calc((100vw - var(--max))/2 + var(--gut))) 48px}
  .hero.live h1{font-size:56px;max-width:14ch}
  .hero.live::after{background:linear-gradient(180deg,rgba(5,6,15,.4),var(--bg) 95%),var(--hero-tint)}
}
@media (min-width:1024px){
  .hero.live{height:620px}
  .pstage{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0}
  .hero.live .copy{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding-top:0;padding-bottom:0;max-width:calc(var(--max));margin:0 auto;pointer-events:none;padding-left:var(--gut);padding-right:var(--gut)}
  .hero.live .copy>*{pointer-events:auto;max-width:560px}
  .hero.live h1{font-size:64px;max-width:11ch}
  .hero.live::after{background:linear-gradient(90deg,rgba(5,6,15,.85) 12%,rgba(5,6,15,.1) 70%),linear-gradient(180deg,transparent 75%,var(--bg))}
  .pstage{z-index:0}.hero.live::after{z-index:-1}
  /* the found perfume's name sits under the particle bottle (the stage draws it at 79% of the width, centred vertically) */
  .hfound{position:absolute;left:79%;top:calc(50% + 150px);transform:translateX(-50%);width:min(420px,38vw);margin:0;z-index:5}
}

/* live map backdrop: the real nebula (/nebula/?embed=1) drifting behind the card, loaded when the card nears the screen */
.mapcard{min-height:200px}
.mapcard .live{position:absolute;left:50%;top:50%;width:max(100%,900px);height:640px;transform:translate(-50%,-50%);border:0;opacity:0;transition:opacity 1.2s ease;pointer-events:none;z-index:-1}
.mapcard .live.on{opacity:1}
@media (min-width:768px){.mapcard{min-height:240px}}

.pstage{opacity:0;transition:opacity 1.4s ease}.pstage.ready{opacity:1}
@media (prefers-reduced-motion:reduce){.pstage{transition:none}}

.hrow{background:rgba(88,104,255,.08)}
#res a.hrow span,.hsug a.hrow span{font-weight:700}
.hero.live .hsearch{z-index:40}
.hero.live .ctas{position:relative;z-index:1}
.hsug{background:#121A32}


/* hover (desktop mouse only): the card rises as a soft panel and the bottle lifts, like the reference shop */
.card{border-radius:10px;padding:var(--s2);margin:-8px;transition:background .3s ease,box-shadow .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.tile img{transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease}
@media (hover:hover) and (pointer:fine){
  .card:hover{background:rgba(246,243,238,.045);box-shadow:0 22px 44px -14px rgba(0,0,0,.65),0 0 0 1px rgba(246,243,238,.08);transform:translateY(-2px)}
  .card:hover .tile img{transform:translateY(-7px) scale(1.05)}
  .card:hover .house{color:var(--soft)}
}
@media (prefers-reduced-motion:reduce){.card,.tile img{transition:none}.card:hover{transform:none}.card:hover .tile img{transform:none}}

.foot{max-width:var(--max);margin:var(--s14) auto 0;padding:var(--s6) var(--gut) var(--s2);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s8);justify-content:space-between;color:var(--dim);font:400 12px/1.5 var(--data)}
.foot a{text-decoration:underline;text-underline-offset:3px;color:var(--muted)}
@media(max-width:760px){.foot a{display:inline-block;padding:var(--s4) var(--s2)}}

#dust{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:-1;pointer-events:none}
/* C120 (his ask 2026-10-14): everything clickable answers the pointer, Explore first. One lift for all: the hairline-navy
   step behind it, its border and text up to ivory, 180 ms; same on tap (:active). No glow, scale or colour accents (C114). */
.tabsw a,.mapcard,.banner,.rowlist a,.chips a,.houses a,.houses .c,.hd a{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.tabsw a:not(.on):active,.banner:active,.chips a:active,.rowlist a:active{background-color:rgba(30,36,71,.55)}
.mapcard:active,.banner:active,.chips a:active{border-color:#8A8DAA}
@media (hover:hover){
  .tabsw a:not(.on):hover{background:rgba(30,36,71,.55);color:var(--ink)}
  .mapcard:hover{border-color:#8A8DAA}.mapcard:hover i{border-bottom-width:2px}
  .banner:hover{border-color:#8A8DAA;background-color:rgba(30,36,71,.55);color:var(--ink)}
  .rowlist a:hover{background:rgba(30,36,71,.55);box-shadow:-12px 0 0 rgba(30,36,71,.55),12px 0 0 rgba(30,36,71,.55);color:var(--ink)}
  .chips a:hover{border-color:#8A8DAA;background:rgba(30,36,71,.55);color:var(--ink)}
  .houses a:hover{color:var(--ink)}.houses a:hover .c{border-color:#8A8DAA}
  .hd a:hover{color:var(--ink)}
}

/* C109 round 2 (2026-10-15): phone header slides away on scroll down (shell.js sets body.hdrhide) */
@media (max-width:767px){.top{transition:transform .25s ease}body.hdrhide .top{transform:translateY(-100%)}}
@media (prefers-reduced-motion:reduce){.top{transition:none}}
/* catalogue phone body has its own live search: no second search box in the header */
@media (max-width:1023px){body:has(#pc-search) .searchrow{display:none}}