/* Mobile keeps photography behind the content, as on desktop. */
@media (max-width: 700px) {
  html[lang] main > [data-scene] { background-position: var(--mobile-focus, 50% 50%); }
  [data-scene="home-hero"] { --mobile-focus: 70% center; }
  [data-scene="home-intro"] { --mobile-focus: 68% center; }
  [data-scene="home-story"] { --mobile-focus: 65% center; }
  [data-scene="home-uk"] { --mobile-focus: 65% center; }
  html[lang] main > [data-tone="light"] { background-color: #e7dfd1; }
  html[lang] main > [data-tone="dark"] { background-color: #606060; }
  html[lang] main > .portrait-interlude { background: #000; }
  html[lang] .raoyi-page > .raoyi-hero { background-position: 72% center; background-color: #666; }
  html[lang] .raoyi-page > .raoyi-craft { background-position: 65% center; }
  html[lang] .product-showcase .product-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 28px 8px;
  }
  html[lang] .product-showcase .product-card { grid-column: span 2; margin: 0; }
  html[lang] .product-showcase .product-card:nth-child(-n+2) { grid-column: span 3; }
  html[lang] .product-showcase .product-card figcaption {
    font-size: clamp(11px,3.1vw,16px);
    line-height: 1.65;
    letter-spacing: 0;
    padding-top: 8px;
    text-align: center;
  }
  html[lang] .product-showcase .product-card figcaption span { margin-inline: auto; }
}
@media (max-width:700px) {
 html[lang] main>[data-scene="home-hero"] { --scene:url('/assets/mobile-eastern/hero.jpg'); background-position:center; min-height:760px; padding:100px 7% 165px; align-items:center; background-color:#a0a0a0; }
 html[lang] main>[data-scene="home-intro"] { --scene:url('/assets/mobile-eastern/intro.jpg'); background-position:center; padding-block:65px 115px; background-color:#827d73; }
 html[lang] main>[data-scene="home-story"] { --scene:url('/assets/mobile-eastern/story.jpg'); background-position:70% center; padding-bottom:75px; background-color:#c6baaa; }
 html[lang] main>[data-scene="home-clients"] { --scene:url('/assets/mobile-eastern/clients.jpg'); background-position:center; padding-bottom:100px; background-color:#a1998c; }
 html[lang] main>[data-scene="home-uk"] { --scene:url('/assets/mobile-eastern/uk.jpg'); background-position:center; background-color:#909090; }
 html[lang] footer[data-scene="footer-home"] { --scene:url('/assets/mobile-eastern/footer.jpg'); background-position:center; }
 html[lang] .raoyi-page>.raoyi-hero, html[lang] .raoyi-page>.raoyi-craft { background-image:url('/assets/mobile-eastern/wire-dark.jpg'); background-position:center; }
 html[lang] .raoyi-page>.raoyi-story, html[lang] .raoyi-page>.raoyi-ending { background-image:url('/assets/mobile-eastern/wire-light.jpg'); background-position:center; }
}
@media (max-width:700px) {
 html[lang] main>[data-scene="home-intro"] { background-position:center bottom; }
}

/* Keep case photography uncluttered on every screen. */
html[lang] main>[data-scene="bespoke-cases"]{background-image:none;background-color:#000;padding-bottom:0;}
html[lang] main>[data-scene="bespoke-contact"]{background-size:cover;background-position:center;margin:0;width:100%;max-width:none;}
.header .nav>.series-nav>summary{font-family:var(--font-serif);font-weight:400;}
@media(max-width:700px){
 body:has(main>.hero) .header{position:absolute;inset:0 0 auto;background:transparent;border-bottom:1px solid #ffffff20;}
 body:has(main>.hero) .header.menu-open,.header.menu-open{background:#10110ff5;backdrop-filter:blur(18px);}
 .header{padding:15px 6%;min-height:90px;}
 .header .menu-toggle{border:0;}
 .header .nav{display:grid;grid-template-columns:1fr;gap:0;padding:18px 0 12px;max-height:calc(100svh - 110px);overflow-y:auto;}
 .header .nav>a,.header .nav>.series-nav>summary{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;padding:12px 30px;font-family:var(--font-serif);font-size:21px;font-weight:400;line-height:1.5;letter-spacing:.04em;border-bottom:1px solid #bdb49d30;}
 .header .nav>.series-nav{width:100%;}
 .header .nav>.series-nav>summary::after{right:calc(50% - 72px);top:25px;width:6px;height:6px;}
 .header .nav>.series-nav .series-menu{border:0;background:#ffffff05;margin:0;padding:8px 0 12px;max-width:none;}
 .header .nav>.series-nav .series-menu a{font-family:var(--font-serif);font-size:17px;min-height:44px;padding:10px;color:#d7c69f;}
 html[lang] main>[data-scene="home-hero"]{padding-top:165px;min-height:850px;}
}

/* Optical alignment measured from visible alpha pixels, not transparent canvas. */
.footer-signature{transform:translateX(-2.24%);}
.raoyi-grid #thread>img{transform:translateX(3.74%);}
/* Compact mobile reading rhythm and vertically balanced opening. */
@media(max-width:700px){
 html[lang] main>[data-scene="home-hero"]{min-height:740px;min-height:max(680px,100svh);padding:135px 7% 75px;justify-content:center;}
 html[lang] main p:not(.eyebrow):not(.statement):not(.raoyi-motto):not(.hero-note):not(.raoyi-kind):not(.raoyi-note){font-size:14px;}
 html[lang] main .hero-description{font-size:14px;}
 html[lang] main .showcase-contact>p,html[lang] main .shop-purchase>p,html[lang] main .bespoke-description{font-size:12px;}
}

/* Let the opening scene extend to the safe-area edge on iPhone. */
@media(max-width:700px){
 html:has(main>.hero){background:#352719 url('/assets/mobile-eastern/hero-open.jpg') center top/100% auto no-repeat;}
 body:has(main>.hero){background:transparent;}
 html[lang] main>[data-scene="home-hero"]{--scene:url('/assets/mobile-eastern/hero-open.jpg');padding-top:calc(135px + env(safe-area-inset-top,0px));}
 body:has(main>.hero) .header{padding-top:calc(15px + env(safe-area-inset-top,0px));}
}

/* Nature, Unbound uses its own portrait art direction on phones. */
@media(max-width:700px){
 html[lang] .nature-page.raoyi-page>.nature-hero{background-image:url('/assets/nature/nature-unbound-mobile.jpg');background-size:auto 118%;background-position:center top;background-color:#090a0b;background-blend-mode:normal;}
 html[lang] .nature-page.raoyi-page>.nature-craft{background-image:url('/assets/nature/nature-craft-mobile-v1.jpg');background-size:cover;background-position:center;background-color:#11110f;background-blend-mode:normal;min-height:0;padding-bottom:280px;align-items:start;}
}

/* Keep the Nature, Unbound closing copy on its own dark portrait scene,
   instead of inheriting the light wire photograph used by other collections. */
@media(max-width:700px){
 html[lang] .nature-page.raoyi-page>.nature-story{
  background-image:none;
  background-color:#11110f;
  background-blend-mode:normal;
 }
 html[lang] .nature-page.raoyi-page>.nature-ending{
  background-image:url('/assets/nature/nature-unbound-mobile.jpg');
  background-size:auto 150%;
  background-position:center top;
  background-repeat:no-repeat;
  background-color:#090a0b;
  background-blend-mode:normal;
 }
}