/* Thank-you page and later journey additions. Uses the tokens of gente.css and the building blocks of fragrance.css; nothing here changes existing pages. */
.danke-page .nav .btn.mini,.danke-page .menu-cta{display:none}
.danke{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7%;align-items:center;max-width:1296px;margin:0 auto;padding:calc(var(--nav-h) + var(--sec-y)) var(--pad) var(--sec-y)}
.danke h1{font-size:clamp(44px,6vw,84px);font-weight:200;line-height:1.04;margin:18px 0 26px;letter-spacing:0}.danke h1 b{font-weight:600}.danke h1 i{font-style:normal}
.danke-lede{font-size:clamp(17px,1.2vw + 10px,21px);line-height:1.7;color:var(--ink2);max-width:44ch}
.danke-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.danke-note{font-size:13px;color:var(--ink2);margin-top:26px}
.danke-img{margin:0;min-width:0}.danke-img img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;max-height:78vh}
@media(max-width:820px){.danke{grid-template-columns:1fr;gap:36px}.danke-img img{aspect-ratio:4/5;object-position:50% 45%;max-height:none}}
@media(min-width:561px) and (max-width:820px){.danke-img img{aspect-ratio:1/1;object-position:50% 48%}}

/* Brand pillars bar, production block and scent facts (brand guide of 12 Oct 2026) */
.iconbar{background:var(--bg);border-top:1px solid var(--foil);border-bottom:1px solid var(--foil)}
.iconbar ul{list-style:none;margin:0 auto;padding:22px var(--pad);max-width:calc(1296px + 2*var(--pad));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.iconbar li{display:flex;align-items:center;gap:16px;min-width:0}
.ib-i{color:var(--foil);flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--foil);border-radius:50%}
.ib-t{display:flex;flex-direction:column;gap:2px;min-width:0}.ib-t b{font:500 13px/1.3 var(--f-d);letter-spacing:.14em;text-transform:uppercase}.ib-t span{font-size:13px;color:var(--ink2)}
.manufaktur{background:var(--bg2);padding:var(--sec-y) var(--pad)}
.mf-in{max-width:1296px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:7%;align-items:center}
.mf-copy h2{text-wrap:balance;font-size:clamp(34px,4.4vw,56px);font-weight:200;line-height:1.08;letter-spacing:0;margin:18px 0 28px}
.mf-steps{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:0}
.mf-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:18px 0;border-top:1px solid var(--foil)}
.mf-steps li .mono{grid-row:1/3;color:var(--ink2);padding-top:3px}.mf-steps li b{font:600 17px/1.3 var(--f-d)}.mf-steps li span:last-child{color:var(--ink2);font-size:16px;line-height:1.6}
.mf-fig{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}.mf-fig img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;min-width:0}
.hook{font:normal 300 15px/1.5 var(--f-b);color:var(--ink2);margin:20px 0 4px;letter-spacing:.06em}
.scent-facts{margin:24px 0 0;display:grid;gap:0;border-top:1px solid var(--foil)}.scent-facts div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.scent-facts dt{font:500 11px/1.6 var(--f-d);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}.scent-facts dd{margin:0;font-size:15px;line-height:1.55}
@media(max-width:820px){.iconbar ul{grid-template-columns:1fr;gap:14px;padding-top:18px;padding-bottom:18px}.mf-in{grid-template-columns:1fr;gap:34px}.mf-fig{grid-template-columns:1fr 1fr}.scent-facts div{grid-template-columns:1fr;gap:2px}}
.nw{white-space:nowrap}

/* One picture language on the start page: the older cinematic bottle scene behind the sign-up form is gone (it showed the bottles a second time next to the studio collage); the section gets a calm burgundy ground taken from the After Sunset studio motif. Documentary photos of the production share a warm grade with the studio motifs. */
.presave .ps-bg{background:radial-gradient(120% 90% at 16% 0%,rgba(96,38,48,.55) 0%,rgba(20,9,13,0) 62%),radial-gradient(90% 70% at 100% 100%,rgba(120,60,40,.22) 0%,rgba(20,9,13,0) 60%),linear-gradient(180deg,#1f0f14 0%,#14090d 100%)}
.presave-studio img{box-shadow:0 34px 70px -28px rgba(0,0,0,.65)}
.mf-fig img{filter:saturate(.86) sepia(.13) contrast(.98)}

/* ===== Cinematic shop and new pages in one (13 Oct 2026) ===== */
/* scent pages start with the film: header transparent over the film, then the page's own colour world */
.scent-page .crumb{padding-top:36px}
.scent-page .sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.scent-page .journey .lanes{margin-top:40px}
.jn-note{margin-top:24px}
.ritual-go{margin-top:44px}
.nextscent{background:var(--bg2);padding:var(--sec-y) var(--pad)}
.ns-in{max-width:1296px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:8%;align-items:center}
.ns-img{display:block;max-width:420px;overflow:hidden}
.ns-img img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;transition:transform .7s var(--e1)}
.ns-img:hover img{transform:scale(1.025)}
.ns-copy h2{font-size:clamp(38px,5vw,64px);font-weight:200;line-height:1.05;margin:18px 0}
.ns-copy h2 b{font-weight:600}.ns-copy h2 i{font-style:normal}
.ns-copy>p{color:var(--ink2);font-size:18px;max-width:34ch;margin-bottom:28px}
.ns-copy .text-link{display:flex;width:fit-content}
@media(max-width:820px){.ns-in{grid-template-columns:1fr;gap:28px}.ns-img{max-width:none}.ns-img img{aspect-ratio:4/5}}
/* the page is never left invisible: if the script has not released it after 3.4 s (blocked or failed), CSS shows it; anchors stop below the header */
@keyframes gShow{to{opacity:1}}
body:not(.ready){animation:gShow .01s linear 3.4s forwards}
#duftreise,#ritual,#how{scroll-margin-top:var(--nav-h)}
/* scent page without a visible film (reduced motion or film failed): the header is solid and the page starts below it */

/* ===== Review fixes (13 Oct 2026) ===== */
/* ghost button on the film gets its own ground so the label stays readable over bright frames */
.band .btn.ghost,.band.settle .cta-row .btn.ghost{background:rgba(8,10,14,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* keyboard focus: visible on every ground */
body[data-theme="sunkissed"] :focus-visible{outline-color:var(--ink)}
body[data-theme] footer :focus-visible{outline-color:currentColor}
.ps-form input:focus-visible{outline:2px solid var(--foil);outline-offset:4px}
@media (pointer:coarse){footer ul a,.crumb a{min-height:44px;display:inline-flex;align-items:center}}
/* the plus sign of the FAQ is decoration, it does not belong to the accessible name */
.faq summary::after,.full summary::after{content:"+" / ""}
/* one content column from top to bottom (cards, pillars and text blocks share the same left edge) */
.mani .wrap,.how .wrap,.faq .wrap,.journey .wrap,.ritual .wrap,.presave .wrap,footer .wrap{max-width:calc(1296px + 2*var(--pad))}
.crumb{max-width:calc(1296px + 2*var(--pad));margin-inline:auto}
.store-strip{max-width:none;margin-inline:0;padding-inline:max(var(--pad),calc((100% - 1296px)/2))}
.crumb{align-items:center}
.mani .idx{margin-top:clamp(36px,4vw,64px)}
@media (min-width:721px) and (max-width:1045px){.card-meta>.mono{display:block;min-height:2.8em}.card-meta>p:not(.card-tax){min-height:3.3em}}
.card-meta .card-tax{font-size:12px;line-height:1.5;color:var(--ink2);margin-top:12px}
.card-tax a{text-underline-offset:3px}
/* scent pages: the footer continues the dark sign-up section above it */
.scent-page footer{background:#0E0609;color:#F3E7E2}
/* if the script never starts (blocked or failed), the empty film stage does not stay as a black void */
@keyframes gHeroOff{to{height:0;min-height:0;overflow:hidden}}
body:not(.ready) .hero{animation:gHeroOff .01s linear 3.4s forwards}
.band.settle h2{opacity:var(--ex,1)}
.band.settle .sub{opacity:calc(var(--ks,1)*var(--ex,1))}
.band.settle .cta-row{opacity:calc(var(--kb,1)*var(--ex2,1))}
.band :focus-visible{outline-color:#fff}

/* ===== Brand guide pass 13 Oct: Perfekt-für icons, story accordion, closing line of the next-scent block ===== */
.pf{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.pf li{display:inline-flex;align-items:center;gap:9px;font-size:15px;line-height:1.4}
.pf-i{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--foil);border-radius:50%;color:var(--foil);flex:none}
.pf-i svg{width:16px;height:16px}
.composition-story .full{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.composition-story .full summary{cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;list-style:none;font:500 12px/1.4 var(--f-d);letter-spacing:.2em;text-transform:uppercase;padding:14px 0;min-height:44px}
.composition-story .full summary::-webkit-details-marker{display:none}
.composition-story .full div{padding-bottom:6px}
.ns-also{margin-top:22px;font-size:14px;color:var(--ink2)}
.ns-also a{color:inherit;text-underline-offset:4px}

/* ===== Second review (13 Oct 2026) ===== */
/* closing film band on tall screens: the buttons sit below the bottle instead of over it */
@media (min-width:721px) and (orientation:portrait){.band.settle.solo .cta-row{position:static;margin-top:clamp(18px,3vh,32px)}}
/* skip link and anchors land below the fixed header */
main{scroll-margin-top:var(--nav-h)}
/* the page is shown at once with reduced motion, and also when the script has not started after 3.4 s (class set by the small inline timer of the page) */
@media (prefers-reduced-motion:reduce){body:not(.ready){opacity:1}}
body.gfail{opacity:1}
body.gfail .hero{display:none}
body.gfail .rv .r{opacity:1;transform:none}

/* ===== Product gallery (13/14 Oct 2026): studio picture + three model photographs, no film on the product pages ===== */
.scent-page .product-detail{align-items:start}
.pgal{display:grid;gap:14px;min-width:0}
.pg-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;aspect-ratio:4/5;background:var(--bg2);outline-offset:4px}
.pg-track::-webkit-scrollbar{display:none}
.pg-slide{flex:0 0 100%;scroll-snap-align:center;margin:0;position:relative;display:grid;place-items:center;overflow:hidden;min-width:0}
.pg-slide img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-thumbs{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,92px));gap:10px}
.pg-thumb{appearance:none;border:1px solid var(--line);background:var(--bg2);padding:0;aspect-ratio:1/1;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);overflow:hidden;cursor:pointer;opacity:.62;transition:opacity .4s var(--e1),border-color .4s var(--e1)}
.pg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pg-thumb.on{opacity:1;border-color:var(--foil)}
@media (hover:hover){.pg-thumb:hover{opacity:1;border-color:var(--foil)}}
/* the picture buttons only show once the script runs: without it they would be dead */
.pgal:not(.is-live) .pg-thumbs{visibility:hidden}
/* counter: always in the accessibility tree ("Bild 2 von 4"), visible on phones only */
.pg-count{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-ai{position:absolute;left:12px;bottom:12px;z-index:1;padding:5px 9px;font:500 11px/1 var(--f-d);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(20,16,12,.6);pointer-events:none}
.pg-note{margin:0;font-size:11px;letter-spacing:.06em;color:var(--ink2)}
@media (max-width:720px){.pg-thumbs{display:grid;grid-template-columns:repeat(var(--n,4),44px);gap:8px;justify-content:center;padding-inline:var(--pad)}
  .pg-thumb{min-width:44px;min-height:44px;position:relative;aspect-ratio:auto;border:0;background:transparent;opacity:1}
  .pg-thumb img{display:none}
  .pg-thumb::before{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.35}
  .pg-thumb.on::before{opacity:1}
  .pg-track:focus-visible{outline-offset:-4px}
  .pgal{margin-inline:calc(var(--pad)*-1)}
  .pg-count{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;text-align:right;color:var(--ink2);padding-inline:var(--pad)}
  .pg-note{padding-inline:var(--pad)}}
/* desktop: the picture buttons stand as a column beside the picture, so they are on the first screen */
@media (min-width:960px){.pgal{grid-template-columns:92px minmax(0,1fr);column-gap:14px;align-items:start}
  .pg-track{grid-column:2;grid-row:1}.pg-thumbs{grid-column:1;grid-row:1;grid-template-columns:92px;align-content:start}
  .pg-note{grid-column:2;grid-row:2}}
/* the gallery stays in view while the text scrolls: tablets too, but not on short or landscape-phone windows */
@media (min-width:721px) and (min-height:680px){.product-gallery{position:sticky;top:calc(var(--nav-h) + 24px)}}
@media (prefers-reduced-motion:reduce){.pg-track{scroll-behavior:auto}}
/* gallery images ignore the generic product-image rule (aspect-ratio 3/4) of fragrance.css */
.pgal .pg-slide>img{aspect-ratio:auto;height:100%;width:100%}
.pgal .pg-thumb>img{aspect-ratio:auto;height:100%;width:100%}
.pgal .pg-slide>img,.pgal .pg-thumb>img{max-height:none}
/* one picture style: the three scent cards stand on one line (no staggered middle card) */
@media(min-width:960px){.claude-home .scent-card:nth-child(2){padding-top:0}}
/* the paper grain covered only some transparent sections and drew a darker panel with hard edges on wide screens: the three scent cards stand on the flat page colour like every section around them (14 Oct) */
.collection-section{background-image:none}
/* ===== Full pass (14 Oct 2026) ===== */
/* paper grain on max-width sections drew visible panels and a seam under the crumb on wide screens: the scent pages are flat like the page around them */
.scent-page .product-detail,.scent-page .composition-story,.scent-page .faq{background-image:none}
/* the warm glow of the sign-up section ends in the colour of the footer instead of a straight cut */
.presave .ps-bg::after{content:"";position:absolute;inset:auto 0 0;height:180px;pointer-events:none;background:linear-gradient(180deg,rgba(14,6,9,0),#0E0609)}
/* phones: the headline and the first button come higher */
@media (max-width:720px){.scent-page .crumb{padding:14px var(--pad) 8px}}
.danke-page .danke{background-image:none}
/* ===== Home film bands (14 Oct 2026): the words keep off the product ===== */
/* header: one compact block above the three caps; the button sits below the bottles */
.hero-pre .band.head{justify-content:flex-start;padding-top:calc(var(--nav-h) + 1.4vh)}
.hero-pre .band.head h2{font-size:clamp(30px,min(4.3vw,6.4vh),62px);max-width:none}
.hero-pre .band.head .sub{max-width:none;font-size:clamp(13px,min(1.2vw,2vh),18px);margin-top:clamp(8px,1.4vh,14px)}
.hero-pre .band.head .cta-row{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 6vh);margin:0;justify-content:center}
.hero-pre .band.head::before{background:linear-gradient(180deg,rgba(5,5,10,calc(var(--sa)*.95)) 0%,rgba(5,5,10,calc(var(--sa)*.55)) 24%,rgba(5,5,10,0) 44%);inset:0;height:auto}
/* chapters: notes and mood stand beside the bottle, on the side that is free */
.hero-pre .band.sb{justify-content:center;padding:calc(var(--nav-h) + 2vh) clamp(32px,7vw,120px) 26vh}
.hero-pre .band.sb.cr{align-items:flex-end;text-align:right;padding-left:56%}
.hero-pre .band.sb.cl{align-items:flex-start;text-align:left;padding-right:56%}
.hero-pre .band.sb h2{font-size:clamp(34px,min(5vw,8.4vh),86px);max-width:none}
.hero-pre .band.sb .kick{margin-bottom:clamp(8px,1.4vh,14px)}
.hero-pre .band.sb .sub{max-width:none;font-size:clamp(15px,min(1.5vw,2.7vh),22px)}
.hero-pre .band.sb .cta-row{margin-top:clamp(14px,2.6vh,28px)}
.hero-pre .band.sb::before{inset:0;height:auto;background:radial-gradient(ellipse 46% 44% at 78% 36%,rgba(5,5,10,calc(var(--sa)*.82)) 0%,rgba(5,5,10,0) 100%)}
.hero-pre .band.sb.cl::before{background:radial-gradient(ellipse 46% 44% at 22% 34%,rgba(5,5,10,calc(var(--sa)*.82)) 0%,rgba(5,5,10,0) 100%)}
@media (max-width:720px),(orientation:portrait){
  .hero-pre .band.head{padding-top:calc(var(--nav-h) + 1vh)}
  .hero-pre .band.head h2{font-size:clamp(26px,8.2vw,40px)}
  .hero-pre .band.head .sub{font-size:clamp(12px,3.4vw,15px);max-width:34ch}
  .hero-pre .band.head .cta-row{bottom:calc(env(safe-area-inset-bottom) + 5vh)}
  .hero-pre .band.sb,.hero-pre .band.sb.cr,.hero-pre .band.sb.cl{justify-content:flex-end;align-items:center;text-align:center;padding:0 var(--pad) calc(env(safe-area-inset-bottom) + 4.5vh)}
  .hero-pre .band.sb h2{font-size:clamp(30px,9.4vw,46px)}
  .hero-pre .band.sb .sub{font-size:clamp(14px,3.9vw,18px)}
  .hero-pre .band.sb .cta-row{display:none}
  .hero-pre .band.sb::before,.hero-pre .band.sb.cl::before{inset:auto 0 0 0;height:46%;background:linear-gradient(0deg,rgba(5,5,10,.8) 0%,rgba(5,5,10,.52) 55%,rgba(5,5,10,0) 100%)}
}


/* the poster fades in when it is decoded (dark ground until then) */
.stage .poster{opacity:0;transition:opacity .7s var(--e1)}
.stage .poster.on,.hero.is-static .stage .poster{opacity:1}

/* ===== Start page hero (14 Oct 2026): real photographs of the real packs, no film ===== */
.rhero{position:relative;background:var(--bg);color:var(--ink);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:calc(var(--nav-h) + clamp(20px,3.6vh,48px)) 0 clamp(30px,5vh,64px)}
.rh-in{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--pad);display:grid;gap:clamp(20px,3.8vh,44px)}
.rh-head{display:grid;gap:clamp(8px,1.4vh,16px)}
.rh-eyebrow{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.rh-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 36px}
.rh-h{font:200 clamp(36px,4.9vw,72px)/1 var(--f-d);letter-spacing:-.022em;margin:0}
.rh-h b{font-weight:700}
.rh-sub{margin:0;max-width:62ch;color:var(--ink2);font-size:clamp(15px,1.2vw,18px);line-height:1.55}
.rh-cta{display:flex;flex-wrap:wrap;gap:10px}
.rh-trip{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:clamp(12px,1.7vw,26px);--ph:clamp(220px,calc(100svh - 372px),700px)}
.rh-ph{flex:0 0 auto;width:calc(var(--ph) * .75)}
.rh-ph a{display:block;color:inherit;text-decoration:none}
.rh-ph figure{margin:0;overflow:hidden;aspect-ratio:3/4;background:var(--bg2)}
.rh-ph img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.04);will-change:transform}
.rh-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 14px;margin-top:12px}
.rh-cap b{font:600 clamp(15px,1.3vw,19px)/1.2 var(--f-d);letter-spacing:.01em;text-transform:uppercase}
.rh-cap i{font-style:normal;font-weight:300}
.rh-cap .mono{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.rh-ph a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
body.ready .rh-ph{animation:rh-up 1.1s var(--e1) both;animation-delay:calc(var(--i) * .13s + .1s)}
@keyframes rh-up{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@media (max-width:720px){
  .rhero{min-height:0;padding-bottom:36px}
  .rh-cta .btn{min-height:46px;padding:0 18px;font-size:11px}
  .rh-trip{--ph:calc(74vw * 4 / 3);justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));padding:0 var(--pad);scroll-padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rh-trip::-webkit-scrollbar{display:none}
  .rh-ph{width:74vw;scroll-snap-align:start}
}
/* short laptops: one line of headline and buttons, bigger pictures */
@media (min-width:721px) and (max-height:760px){.rh-sub{display:none}.rh-h{font-size:clamp(34px,4.2vw,60px)}.rh-trip{--ph:clamp(220px,calc(100svh - 270px),700px)}}
@media (prefers-reduced-motion:reduce){body.ready .rh-ph{animation:none}.rh-ph img{transform:none!important}}

/* ===== light film (real photographs on pale walls, 14 Oct 2026): dark text, no dark scrim, solid navigation (gente.js skips .is-light heroes) ===== */
.hero.is-light .band{color:#2B2820;text-shadow:none}
.hero.is-light .band::before,.hero.is-light .scrim{display:none}
.hero.is-light .band .btn:not(.ghost){background:#2B2820;color:#F4EEE2}
@media (hover:hover){.hero.is-light .band .btn:not(.ghost):hover{background:#000}}
.hero.is-light .band .btn.ghost{color:#2B2820;border-color:rgba(43,40,32,.55);background:rgba(244,238,226,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero.is-light .ring,.hero.is-light .chev{color:#2B2820}
.hero.is-light .band.head .cta-row{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 3.6vh);margin:0}
.hero.is-light .stage{background:#E9E4DA}
/* static view of the light film (reduced motion, slow connection, script failure): the first picture of the film instead of the AI scene of the dark film */
.hero.is-light.is-static .stage .poster{background-image:url(home-poster-m.webp)!important;background-position:center}
@media (min-width:721px) and (orientation:landscape){.hero.is-light.is-static .stage .poster{background-image:url(home-poster-d.webp)!important}}
/* studio film: the evening chapters are dark, their text stays white */
.hero.is-light .band.dk{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hero.is-light .band.dk .btn:not(.ghost){background:#F4EEE2;color:#2B2820}
.hero.is-light .band.dk .btn.ghost{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(20,14,12,.4)}
/* phones: the pictures leave their empty wall at the top, so the scent texts sit up there */
@media (max-width:720px),(orientation:portrait){.hero.is-light .band.sb{justify-content:flex-start;padding-top:calc(var(--nav-h) + 3vh);padding-bottom:0}}
/* studio film: sturdier small type on the pictures (review: the thin subline and the eyebrow vanished on mid-tone walls) */
.hero.is-light .band .sub{font-weight:400;font-size:clamp(15px,1.45vw,19px)}
.hero.is-light .band .kick{font-weight:600;opacity:1;color:#2A1B12}
.hero.is-light .band.dk .kick{color:#fff}
.hero.is-light .band.sb .sub{color:#2A1B12}
.hero.is-light .band.dk.sb .sub{color:#fff}
/* closing chapter: headline and subline keep their air above the bottle caps */
.hero.is-light .band.homefin{padding-top:calc(var(--nav-h) + 1vh)}
.hero.is-light .band.homefin h2{font-size:clamp(30px,4.4vw,64px)}
.hero.is-light .band.homefin .sub{margin-top:6px}
@media (max-width:720px),(orientation:portrait){.hero.is-light .band.homefin h2{font-size:clamp(28px,8vw,50px)}}
/* studio film: more air under the navigation for the first and last headline, text edges on the navigation grid, softer shadow on white text */
.hero.is-light .band.head,.hero.is-light .band.homefin{padding-top:calc(var(--nav-h) + 3.4vh)}
.hero.is-light.hero-pre .band.sb{padding-inline:var(--pad)}
.hero.is-light .band.dk{text-shadow:0 1px 10px rgba(0,0,0,.25)}

/* start page strip with real photographs (14 Oct 2026) */
.real-strip{padding:clamp(48px,8vw,110px) var(--pad)}
.rs-trip{list-style:none;margin:clamp(24px,3vw,44px) auto 0;padding:0;max-width:1240px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,28px)}
.rs-ph a{display:block;color:inherit;text-decoration:none}
.rs-ph figure{margin:0;overflow:hidden;aspect-ratio:3/4;background:var(--bg2)}
.rs-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e1)}
@media (hover:hover){.rs-ph a:hover img{transform:scale(1.03)}}
.rs-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 14px;margin-top:12px}
.rs-cap b{font:600 clamp(15px,1.3vw,19px)/1.2 var(--f-d);letter-spacing:.01em;text-transform:uppercase}
.rs-cap i{font-style:normal;font-weight:300}
.rs-cap .mono{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.rs-ph a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
@media (max-width:720px){.rs-trip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--pad));padding:0 var(--pad);scroll-padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}.rs-trip::-webkit-scrollbar{display:none}.rs-ph{flex:0 0 74vw;scroll-snap-align:start}}