/* Header glass v03: local exploration inspired by light passing through glass. */
:root { --header-height:76px; }
.site-header {
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom:1px solid #151515;
  box-shadow:none;
  color:#151515;
}
body::before {
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--header-height);
  z-index:19;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(21,21,21,.08);
}
/* Use either approved logo color according to the actual background. */
.site-header .brand img { filter:drop-shadow(0 1px 1px rgba(255,255,255,.3)); }
.site-header .brand.is-glass-dark img { filter:invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.site-header nav button { color:#151515; text-shadow:0 1px 3px rgba(255,255,255,.3); }
.site-header nav button.is-glass-dark { color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.site-header nav button:hover,.site-header nav button:focus-visible { border-color:currentColor; }
.site-header #cartCount { background:#151515; color:#fff; text-shadow:none; }
.site-header .is-glass-dark #cartCount { background:#fff; color:#151515; }
/* Only the immersive home starts beneath the header; other pages retain their spacing. */
#app:has(> .light-story) { margin-top:calc(-1 * var(--header-height)); }
#app > .light-story .story-stage { top:0; height:100svh; }
#app > [data-story="obj001"] { height:200svh; }
#app > [data-story="obj001"] .story-visual { top:var(--header-height); }
#app > [data-story="obj001"] .portada-frame { width:max(100%,calc((100svh - var(--header-height)) * 16 / 9)); }
#app > .light-story .story-topline { top:calc(var(--header-height) + 26px); }
@media(max-width:820px) {
  :root { --header-height:66px; }
  body::before { -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); }
  #app > [data-story="obj001"] .portada-frame { width:max(100%,calc((100svh - var(--header-height)) / 2)); }
  #app > [data-story="obj001"] .story-title { top:calc(var(--header-height) + 24px); }
  #app > [data-story="obj001"] .scroll-cue { top:calc(var(--header-height) + 86px); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  body::before { background:rgba(244,243,239,.96); }
}
@media(prefers-reduced-transparency:reduce) {
  body::before { background:#f4f3ef; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media(prefers-reduced-motion:reduce) {
  #app > [data-story="obj001"] { height:auto; }
}