/* Each opening follows a different editorial composition; detail-story art stays independent. */
body[data-opening]{--opening-ink:#28362c;--opening-soft:#435246;--opening-paper:#f3f0e7}
body[data-opening] .hero{color:var(--opening-ink);background:var(--opening-paper);height:max(760px,100svh);min-height:760px}
body[data-opening] .hero-art picture>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;position:absolute}
body[data-opening] .hero-copy{top:19%;width:34%;max-width:560px;z-index:2}
body[data-opening] .hero h1{font-size:clamp(60px,6.2vw,112px);line-height:1.02;letter-spacing:-.055em;margin-bottom:22px;text-wrap:balance}
body[data-opening] .hero-copy>.eyebrow{color:var(--opening-soft);margin-bottom:22px;font-size:10px}
body[data-opening] .hero-copy>p{color:var(--opening-soft);font-size:clamp(16px,1.2vw,20px);line-height:1.6;text-shadow:none;max-width:360px;margin-bottom:16px;text-wrap:pretty}
body[data-opening] .explore-link{font-size:13px;color:var(--opening-ink);border-color:currentColor;text-shadow:none}
body[data-opening] .explore-link:hover{opacity:.7}
body[data-opening] .hero-identity{top:auto;bottom:140px;right:var(--inset);color:var(--opening-ink);border-left-color:currentColor;background:color-mix(in srgb,var(--opening-paper) 88%,transparent);backdrop-filter:blur(12px)}
body[data-opening] .hero-identity small{color:var(--opening-soft)}
body[data-opening] .hero-bottom{color:var(--opening-ink);z-index:3}
body[data-opening] .hero-bottom .scene-rail{background:color-mix(in srgb,var(--opening-paper) 93%,transparent);width:330px;border:1px solid color-mix(in srgb,var(--opening-ink) 20%,transparent)}
body[data-opening] .hero-bottom .scene-rail>a{color:var(--opening-soft);border-color:color-mix(in srgb,var(--opening-ink) 45%,transparent)}
body[data-opening] .hero-bottom .scene-rail>a>span{color:var(--opening-ink);background:var(--opening-paper);border-color:var(--opening-soft)}
body[data-opening] .hero-bottom .scene-rail>a[aria-current=step]{color:var(--opening-ink)}
body[data-opening] .hero-bottom .scene-rail>a[aria-current=step]>span{background:var(--opening-ink);color:var(--opening-paper)}
body[data-opening] .hero-bottom .art-note{color:var(--opening-ink);background:color-mix(in srgb,var(--opening-paper) 93%,transparent);font-size:10px;padding:8px 12px}
body[data-opening][data-reading=false] .site-header{color:var(--opening-ink);mix-blend-mode:multiply}
body[data-opening][data-reading=false] .site-header .brand{mix-blend-mode:multiply}
body[data-opening][data-reading=false] .site-header .brand img{filter:none}
body[data-opening][data-reading=false] .site-header nav{background:color-mix(in srgb,var(--opening-paper) 88%,transparent)}
body[data-opening=morning-overhead]{--opening-paper:#f5efe2;--opening-ink:#293d38;--opening-soft:#40594e}
body[data-opening=morning-overhead] .hero-copy{top:21%;width:36%}
body[data-opening=morning-overhead] .hero h1{font-size:clamp(65px,7.1vw,118px)}
body[data-opening=morning-overhead] .hero-copy>p{max-width:300px}
body[data-opening=morning-overhead] .hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,239,226,.96),rgba(245,239,226,.88) 24%,transparent 53%);pointer-events:none}
body[data-opening=urban-product-left]{--opening-paper:#f3dfce;--opening-ink:#343628;--opening-soft:#4e5042}
body[data-opening=urban-product-left] .hero-copy{left:auto;right:6%;top:28%;width:30%}
body[data-opening=urban-product-left] .hero h1{font-size:clamp(58px,5.4vw,98px)}
body[data-opening=urban-product-left] .hero-identity{left:var(--inset);right:auto;bottom:135px}
body[data-opening=urban-product-left] .hero-bottom .scene-rail{margin-left:auto;margin-right:0}
body[data-opening=urban-product-left] .hero-bottom{flex-direction:row-reverse}
body[data-opening=prep-grid]{--opening-paper:#e6e9e8;--opening-ink:#233c3c;--opening-soft:#3b5353}
body[data-opening=prep-grid] .hero-copy{left:auto;right:5%;width:29%;top:29%;border-top:1px solid #607472;padding-top:22px}
body[data-opening=prep-grid] .hero h1{font-size:clamp(56px,5.7vw,100px)}
body[data-opening=prep-grid] .hero-identity{left:var(--inset);right:auto;bottom:145px}
body[data-opening=prep-grid] .hero-bottom .scene-rail{margin-left:auto;margin-right:0}
body[data-opening=prep-grid] .hero-bottom{flex-direction:row-reverse}
body[data-opening=vibrant-diagonal]{--opening-paper:#3b1e30;--opening-ink:#fff0e1;--opening-soft:#f0d5ca}
body[data-opening=vibrant-diagonal] .hero-copy{top:17%;width:33%}
body[data-opening=vibrant-diagonal] .hero h1{font-size:clamp(60px,6.6vw,116px);font-style:italic}
body[data-opening=vibrant-diagonal] .hero h1 em{font-style:normal}
body[data-opening=vibrant-diagonal] .hero-identity{bottom:135px;right:5%}
body[data-opening=vibrant-diagonal] .hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(42,16,32,.9),rgba(42,16,32,.6) 26%,transparent 55%);pointer-events:none}
body[data-opening=vibrant-diagonal][data-reading=false] .site-header .brand,body[data-opening=evening-fullbleed][data-reading=false] .site-header .brand,body[data-opening=ridge-gallery][data-reading=false] .site-header .brand{mix-blend-mode:screen}
body[data-opening=vibrant-diagonal][data-reading=false] .site-header .brand img,body[data-opening=evening-fullbleed][data-reading=false] .site-header .brand img,body[data-opening=ridge-gallery][data-reading=false] .site-header .brand img{filter:invert(1)}
body[data-opening=vibrant-diagonal][data-reading=false] .site-header,body[data-opening=evening-fullbleed][data-reading=false] .site-header,body[data-opening=ridge-gallery][data-reading=false] .site-header{mix-blend-mode:screen}
body[data-opening=shared-table-diptych]{--opening-paper:#f4e7d4;--opening-ink:#3d3428;--opening-soft:#584b3a}
body[data-opening=shared-table-diptych] .hero-copy{left:0;top:0;bottom:0;width:36%;max-width:none;padding:22vh 3.8% 135px;background:rgba(247,235,215,.91);display:flex;flex-direction:column;justify-content:center;border-right:1px solid #d6c8b0}
body[data-opening=shared-table-diptych] .hero h1{font-size:clamp(58px,5.8vw,102px)}
body[data-opening=shared-table-diptych] .explore-link{align-self:flex-start}
body[data-opening=weekend-centered]{--opening-paper:#f9dfa0;--opening-ink:#493d29;--opening-soft:#5d5036}
body[data-opening=weekend-centered] .hero-copy{top:13%;left:15%;width:70%;max-width:none;text-align:center}
body[data-opening=weekend-centered] .hero h1{font-size:clamp(62px,6.2vw,110px);line-height:1}
body[data-opening=weekend-centered] .hero-copy>p{margin-inline:auto;max-width:500px}
body[data-opening=weekend-centered] .hero-identity{left:var(--inset);right:auto;bottom:145px}
body[data-opening=sauce-ritual-portrait]{--opening-paper:#f5e9d3;--opening-ink:#49432d;--opening-soft:#5a543b}
body[data-opening=sauce-ritual-portrait] .hero-copy{left:auto;right:5%;width:30%;top:24%;border-left:1px solid #a4997a;padding-left:28px}
body[data-opening=sauce-ritual-portrait] .hero h1{font-size:clamp(58px,5.6vw,102px)}
body[data-opening=sauce-ritual-portrait] .hero-identity{left:var(--inset);right:auto;bottom:145px}
body[data-opening=sauce-ritual-portrait] .hero-bottom .scene-rail{margin-left:auto;margin-right:0}
body[data-opening=sauce-ritual-portrait] .hero-bottom{flex-direction:row-reverse}
body[data-opening=evening-fullbleed]{--opening-paper:#122236;--opening-ink:#f7e8d5;--opening-soft:#dbd7d0}
body[data-opening=evening-fullbleed] .hero-copy{top:24%;width:33%}
body[data-opening=evening-fullbleed] .hero h1{font-size:clamp(66px,7.2vw,128px)}
body[data-opening=working-counter]{--opening-paper:#eff2ef;--opening-ink:#273e35;--opening-soft:#41574e}
body[data-opening=working-counter] .hero-copy{left:6%;top:14%;width:80%;max-width:none;display:grid;grid-template-columns:1.2fr 1fr;gap:0 7%;align-items:start}
body[data-opening=working-counter] .hero-copy>.eyebrow{grid-column:1/-1}
body[data-opening=working-counter] .hero h1{font-size:clamp(60px,6vw,105px);grid-row:2/4}
body[data-opening=working-counter] .hero-copy>p{padding-top:7px;max-width:380px}
body[data-opening=working-counter] .explore-link{justify-self:start}
body[data-opening=working-counter] .hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(239,242,239,.95),rgba(239,242,239,.85) 28%,transparent 55%);pointer-events:none}
body[data-opening=ridge-gallery]{--opening-paper:#1d2423;--opening-ink:#f2eddf;--opening-soft:#d7decf}
body[data-opening=ridge-gallery] .hero-copy{left:auto;right:5%;top:23%;width:29%}
body[data-opening=ridge-gallery] .hero h1{font-size:clamp(55px,5vw,92px)}
body[data-opening=ridge-gallery] .hero-identity{left:var(--inset);right:auto;bottom:145px}
body[data-opening=ridge-gallery] .hero-bottom .scene-rail{margin-left:auto;margin-right:0}
body[data-opening=ridge-gallery] .hero-bottom{flex-direction:row-reverse}
@media(min-width:901px) and (max-width:1150px){body[data-opening] .hero{height:800px}body[data-opening] .hero h1{font-size:60px}body[data-opening] .hero-copy{top:21%}body[data-opening=working-counter] .hero-copy,body[data-opening=weekend-centered] .hero-copy{top:14%}}
@media(max-width:900px){
 body[data-opening] .hero{height:max(860px,100svh);min-height:860px}
 body[data-opening] .hero-art{transform:none}
 body[data-opening=vibrant-diagonal] .hero-art::after,body[data-opening=morning-overhead] .hero-art::after,body[data-opening=working-counter] .hero-art::after{display:none}
 body[data-opening] .hero-art picture>img{inset:auto 0 92px;width:100%;height:auto;max-height:calc(100% - 92px);object-fit:contain;object-position:center bottom;mask-image:linear-gradient(to bottom,transparent,#000 18%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%)}
 body[data-opening] .hero-copy{display:block;left:7%;right:auto;top:112px;bottom:auto;width:86%;max-width:none;text-align:left;padding:0;border:0;background:none}
 body[data-opening] .hero h1{font-size:clamp(46px,7.8vw,70px);line-height:1.02;max-width:650px;margin-bottom:15px}
 body[data-opening] .hero-copy>.eyebrow{font-size:9px;margin-bottom:15px;max-width:none}
 body[data-opening] .hero-copy>p{font-size:16px;line-height:1.45;max-width:430px;margin:0 0 8px;padding:0}
 body[data-opening] .explore-link{font-size:12px;min-height:44px;padding-block:10px}
 body[data-opening] .hero-identity{left:7%;right:auto;bottom:130px;top:auto;max-width:75%;padding:8px 13px;font-size:11px}
 body[data-opening] .hero-identity em{font-size:19px}.hero-identity small{font-size:10px}
 body[data-opening] .hero-bottom{left:5%;right:5%;bottom:20px;display:block;background:color-mix(in srgb,var(--opening-paper) 95%,transparent);border:1px solid color-mix(in srgb,var(--opening-ink) 25%,transparent);padding:20px 14px 9px;border-radius:14px;color:var(--opening-ink)}
 body[data-opening] .hero-bottom .scene-rail{width:100%;border:0;background:none;margin:0;padding:0}
 body[data-opening] .hero-bottom .art-note{display:block;max-width:none;text-align:center;font-size:9px;line-height:1.3;margin-top:6px;background:none;padding:0}
 body[data-opening] .hero-bottom .scroll-note{display:none}
 body[data-opening] .hero-bottom .scene-rail>a{font-size:11px;min-height:52px;gap:5px}
 body[data-opening] .site-header{height:80px;gap:16px;padding-inline:7%}
 body[data-opening] .site-header .brand{width:135px}
 body[data-opening] .site-header nav{gap:17px;background:none!important;padding:0;backdrop-filter:none}
 body[data-opening] .site-header nav a,body[data-opening] .site-header nav button{font-size:11px}
 body[data-opening=weekend-centered] .hero-copy{text-align:center}
 body[data-opening=weekend-centered] .hero-copy>p{margin-inline:auto}
 body[data-opening=prep-grid] .hero-copy{border-top:1px solid var(--opening-soft);padding-top:13px;top:102px}
 body[data-opening=sauce-ritual-portrait] .hero-copy{border-left:1px solid var(--opening-soft);padding-left:16px;width:82%}
 body[data-opening=shared-table-diptych] .hero-copy{background:rgba(247,235,215,.82);padding:15px 18px 5px;left:5%;width:90%;top:96px}
}
@media(max-width:600px){
 body[data-opening] .hero{height:860px;min-height:860px}
 body[data-opening] .hero-copy{top:104px}
 body[data-opening] .hero h1{font-size:clamp(43px,12vw,62px);line-height:1.01;letter-spacing:-.055em}
 body[data-opening] .hero-copy>p{font-size:15px;line-height:1.5;max-width:340px}
 body[data-opening] .hero-copy>.eyebrow{font-size:8px;letter-spacing:.11em;margin-bottom:13px}
 body[data-opening] .hero-identity{display:flex;bottom:126px;max-width:63%;font-size:10px;gap:3px}
 body[data-opening] .site-header .brand{width:113px}
 body[data-opening] .site-header nav{gap:14px}
 body[data-opening] .site-header nav a,body[data-opening] .site-header nav button{font-size:10px}
 body[data-opening] .site-header nav a[href="#details"]{display:none}
 body[data-opening=sauce-ritual-portrait] .hero-copy{top:96px;width:86%;padding:14px 16px;background:rgba(245,233,211,.94)}
 body[data-opening=sauce-ritual-portrait] .hero h1{font-size:43px}
 body[data-opening=working-counter] .hero .explore-link{background:rgba(239,242,239,.94);padding-inline:8px}
}
@media(max-width:360px){body[data-opening] .hero h1{font-size:42px}body[data-opening] .hero-copy>p{font-size:14px}body[data-opening] .hero-copy>.eyebrow{font-size:7px}body[data-opening] .site-header nav{gap:11px}body[data-opening] .site-header nav a,body[data-opening] .site-header nav button{font-size:9px}}

/* Keep the opening logo legible without covering the rest of the photograph. */
body[data-opening][data-reading=false] .site-header{mix-blend-mode:normal;isolation:isolate}
body[data-opening][data-reading=false] .site-header::before{content:"";position:absolute;top:0;left:0;z-index:-1;width:clamp(280px,42vw,520px);height:clamp(130px,18vw,210px);background:radial-gradient(ellipse at top left,#fff 0%,rgba(255,255,255,.94) 32%,rgba(255,255,255,.6) 52%,rgba(255,255,255,0) 76%);pointer-events:none}
body[data-opening][data-reading=false] .site-header .brand,body[data-opening][data-reading=false] .site-header .brand img{mix-blend-mode:normal}
body[data-opening][data-reading=false] .site-header .brand img{filter:none}

/* One checkpoint navigator follows the reader only after the complete opening hero. */
body[data-opening] .hero-bottom .scene-rail,body[data-opening] .scene-bottom .scene-rail{display:none}
body[data-opening]>.scene-rail--floating{position:fixed;left:var(--inset);bottom:24px;z-index:34;width:min(330px,calc(100vw - 2*var(--inset)));margin:0;padding:22px 14px 8px;border:1px solid color-mix(in srgb,var(--opening-ink) 20%,transparent);border-radius:34px;background:color-mix(in srgb,var(--opening-paper) 95%,transparent);backdrop-filter:blur(12px);visibility:hidden;opacity:0;pointer-events:none}
body[data-opening][data-hero-passed=true]>.scene-rail--floating{visibility:visible;opacity:1;pointer-events:auto}
body[data-opening]>.scene-rail--floating>a{min-height:52px;font-size:10px;gap:8px;color:var(--opening-soft);border-color:color-mix(in srgb,var(--opening-ink) 45%,transparent)}
body[data-opening]>.scene-rail--floating>a>span{color:var(--opening-ink);background:var(--opening-paper);border-color:var(--opening-soft)}
body[data-opening]>.scene-rail--floating>a[aria-current=step]{color:var(--opening-ink)}
body[data-opening]>.scene-rail--floating>a[aria-current=step]>span{background:var(--opening-ink);color:var(--opening-paper)}
@media(max-width:900px){body[data-opening]>.scene-rail--floating{left:20px;bottom:calc(100px + env(safe-area-inset-bottom,0px));width:min(330px,calc(100vw - 40px))}}