/* SHOWA responsive brand/navigation pass — official logo assets, mobile-first overrides */
:root{--showa-logo-light:url('https://drive.google.com/thumbnail?id=1MpWZL3CAY6KlEXmggVS4Q15ZNpyu6vrv&sz=w1200');--showa-logo-dark:url('https://drive.google.com/thumbnail?id=1vRewfL9sfzxAx8GiRJ66mqlwT2AqHeei&sz=w1200')}

/* Official SHOWA signature. The source PNG contains large transparent margins;
   the fixed viewport + cover crop preserves the artwork while restoring its intended visual weight. */
.brand.brand-logo,.brand.store-brand-logo{display:block;position:relative;width:clamp(220px,18vw,290px);height:68px;overflow:hidden;flex:0 0 auto;letter-spacing:0;text-decoration:none}
.brand.brand-logo img,.brand.store-brand-logo img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;display:block}
.site-header{min-height:96px;padding-top:10px;padding-bottom:10px;background:rgba(242,239,233,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-header .nav a,.site-header .contact{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.site-header .contact{padding:0 14px;border:1px solid rgba(30,58,52,.24);text-decoration:none;color:var(--green);transition:background .18s ease,color .18s ease,border-color .18s ease}
.site-header .contact:hover{background:var(--green);color:var(--paper);border-color:var(--green)}

/* Logo repeats in the footer to increase brand recall without adding extra copy. */
.site-footer-logo{display:block;width:150px;height:40px;overflow:hidden;flex:0 0 auto}
.site-footer-logo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* Home: photographs remain legible instead of being aggressively cropped. */
.hero-card{background:#eee8de}
.hero-card img{object-fit:contain;background:#eee8de}

/* Store: explicit brand watermark uses the official signature rather than a typed SHOWA word. */
.store-story-hero-copy:before{content:""!important;width:230px!important;height:62px!important;right:22px!important;top:20px!important;background-image:var(--showa-logo-light)!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;opacity:.065!important;color:transparent!important}

/* Improve touch targets in rails/navigation. */
.store-brand-tile,.store-nav-tile,.curated-watch-card{touch-action:manipulation}
.store-brand-tile-footer{min-height:48px}
.store-brand-tile-footer strong{min-height:32px;display:inline-flex;align-items:center}
.product-story-more-photos,.text-link{min-height:40px;display:inline-flex;align-items:center}

@media(max-width:980px){
  .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand contact" "nav nav";gap:4px 16px;padding:9px 5vw 8px;min-height:auto;position:sticky;top:0;background:rgba(242,239,233,.97);box-shadow:0 1px 0 rgba(43,43,43,.10)}
  .site-header .brand{grid-area:brand;align-self:center}
  .site-header .contact{grid-area:contact;align-self:center;justify-self:end}
  .site-header .nav{grid-area:nav;width:100%;display:flex!important;gap:4px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 0}
  .site-header .nav::-webkit-scrollbar{display:none}
  .site-header .nav a{flex:0 0 auto;padding:0 12px;min-height:42px;text-decoration:none;border-bottom:2px solid transparent}
  .site-header .nav a[aria-current="page"]{border-bottom-color:var(--earth)}
  .brand.brand-logo,.brand.store-brand-logo{width:220px;height:58px}

  .editorial-hero{padding-top:44px;gap:28px}
  .archive-experience{gap:40px}
  .manifesto{gap:32px}
}

@media(max-width:680px){
  .hml-banner{padding:7px 4vw;font-size:.58rem;letter-spacing:.09em;line-height:1.35}
  .site-header{padding:8px 4vw 7px;gap:3px 8px}
  .brand.brand-logo,.brand.store-brand-logo{width:178px;height:50px}
  .site-header .contact{min-height:40px;padding:0 10px;font-size:.68rem}
  .site-header .nav{font-size:.72rem}
  .site-header .nav a{min-height:40px;padding:0 10px}

  .home-main,.store-main{width:min(92vw,680px)}
  .editorial-hero{padding:34px 0 52px;gap:26px}
  .editorial-hero h1{font-size:clamp(3.1rem,16vw,4.8rem);line-height:.86}
  .lead{font-size:1.08rem;line-height:1.5}
  .hero-actions{display:grid;gap:10px;margin-top:26px}
  .hero-actions .button{width:100%;min-height:48px}
  .hero-actions .text-link{justify-self:start}

  /* Replace the absolute collage with a swipeable visual rail on phones. */
  .hero-gallery{min-height:0!important;display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;padding:6px 1px 16px;scrollbar-width:none}
  .hero-gallery::-webkit-scrollbar{display:none}
  .hero-card,.hero-card-a,.hero-card-b,.hero-card-c,.hero-card-d{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;aspect-ratio:4/5;transform:none!important;scroll-snap-align:start;box-shadow:0 12px 28px rgba(21,34,29,.12)}
  .hero-card img{width:100%;height:100%;object-fit:contain}
  .hero-seal{display:none}
  .statement-band{margin-inline:calc(50% - 50vw);padding:20px 5vw}
  .statement-band p{font-size:1.5rem}
  .statement-band span{font-size:.61rem;line-height:1.5}

  .section{padding:62px 0}
  .split-heading{gap:18px}
  .section-heading h2,.archive-copy h2{font-size:clamp(2.35rem,11vw,3.4rem)}
  .archive-experience{padding:62px 0;gap:28px}
  .archive-visual{min-height:410px;overflow:hidden}
  .archive-frame{padding:24px}
  .archive-frame-back{width:78%;height:54%;left:0;transform:rotate(-3deg)}
  .archive-frame-mid{width:76%;height:54%;right:0;transform:rotate(3deg)}
  .archive-frame-front{width:84%;left:8%;top:15%;transform:none}
  .archive-frame-front h3{font-size:2.35rem}
  .steps article{min-height:0;padding:24px}
  .steps h3{margin-top:34px}
  .manifesto{margin-bottom:58px;padding:34px 26px}
  .manifesto .quote{font-size:2.45rem}

  .store-story-hero{margin-top:14px;margin-bottom:42px}
  .store-story-hero-media{min-height:80vw;padding:20px}
  .store-story-hero-media img{max-width:96%;max-height:74vw}
  .store-story-hero-copy{padding:28px 22px 32px}
  .store-story-hero-copy:before{width:150px!important;height:42px!important;right:12px!important;top:12px!important}
  .store-story-hero h1{font-size:clamp(2.75rem,13vw,3.5rem);line-height:.9}
  .store-story-hero-actions{margin-top:24px}
  .store-story-hero-actions .button{min-height:48px}
  .store-curated-summary{padding:14px 0;font-size:.82rem}
  .store-collection-nav{grid-auto-columns:78vw}
  .store-brand-tile{min-height:170px}
  .store-brand-logo-box{min-height:120px}
  .store-brand-tile img{max-height:82px;max-width:94%}
  .store-rail{grid-auto-columns:84vw}
  .curated-watch-image{aspect-ratio:1/1.15}

  .product-story-page{padding-top:24px}
  .product-story-main-trigger{min-height:0;height:58vh;max-height:560px}
  .product-story-page .product-detail-info h1{font-size:clamp(2.75rem,13vw,3.5rem)}
  .product-story-links{gap:10px}
  .product-story-info-card{min-height:96px;padding:18px 16px}
  .spec-row{grid-template-columns:minmax(92px,38%) 1fr;gap:12px}

  footer{margin-top:58px;padding:28px 5vw;gap:10px}
  .site-footer-logo{width:165px;height:44px;margin-bottom:6px}
}

@media(max-width:390px){
  .brand.brand-logo,.brand.store-brand-logo{width:158px;height:46px}
  .site-header .contact{font-size:.64rem;padding-inline:8px}
  .site-header .nav a{padding-inline:8px}
  .store-collection-nav{grid-auto-columns:82vw}
  .store-rail{grid-auto-columns:88vw}
  .product-story-main-trigger{height:54vh}
}