/**
 * Shared Alma touches: gentle sound + device hint (all main pages).
 * Keep copy minimal — quiet, not loud.
 */

/* Neutral liquid glass — warm moonlight on charcoal; no tech blue */
:root {
  --alma-liquid-shine: linear-gradient(
    168deg,
    rgba(255, 252, 248, 0.11) 0%,
    rgba(255, 255, 255, 0.05) 38%,
    rgba(22, 22, 26, 0.04) 100%
  );
  --alma-liquid-veil: rgba(6, 6, 8, 0.38);
  --alma-liquid-border: rgba(255, 255, 255, 0.14);
  --alma-liquid-inset: rgba(255, 255, 255, 0.06);
  --alma-liquid-blur: 22px;
  --alma-liquid-sat: 1.05;
  --alma-liquid-shadow: 0 0 56px rgba(0, 0, 0, 0.35);
  /* Compact controls (footer / intro segments): lighter footprint than full dock pills */
  --alma-liquid-shadow-ui: 0 6px 28px rgba(0, 0, 0, 0.32);
}

/* Standard vs Rich: tune glass on html only (Save keeps :root defaults for nav parity) */
html[data-alma-media="medium"] {
  --alma-liquid-blur: 18px;
  --alma-liquid-sat: 1.03;
  --alma-liquid-border: rgba(255, 255, 255, 0.12);
  --alma-liquid-veil: rgba(6, 6, 9, 0.44);
  --alma-liquid-inset: rgba(255, 255, 255, 0.055);
}

html[data-alma-media="super"] {
  --alma-liquid-blur: 26px;
  --alma-liquid-sat: 1.12;
  --alma-liquid-border: rgba(255, 250, 245, 0.17);
  --alma-liquid-veil: rgba(5, 5, 8, 0.34);
  --alma-liquid-inset: rgba(255, 255, 255, 0.075);
}

/*
 * Centered pills: (1) main strip with all sections, (2) Gallery — same glass language, no glow.
 */
.top-glass-dock {
  position: fixed;
  top: max(0.65rem, calc(env(safe-area-inset-top) + 0.35rem));
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.32rem, 1.1vw, 0.52rem);
  max-width: calc(100vw - 1rem);
  pointer-events: none;
}

.top-glass-dock > * {
  pointer-events: auto;
}

/* Pills inside the dock are not independently fixed — the dock carries position */
.top-glass-dock > .top-glass {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  flex: 0 1 auto;
}

/* Satellite pill: Gallery — matches inner link tone, no nebula */
a.top-glass.top-glass--gallery {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
  padding: 0.42rem clamp(0.65rem, 1.8vw, 0.95rem);
  border-radius: 9999px;
  font-size: clamp(0.52rem, 1.05vw, 0.62rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.42);
  background: var(--glass-bg, rgba(255, 255, 255, 0.028));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.078));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 1px 0 var(--glass-inner, rgba(255, 255, 255, 0.022)) inset;
  backdrop-filter: blur(14px) saturate(1.04);
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
  transition: color 0.45s cubic-bezier(0.45, 0, 0.55, 1), background 0.45s cubic-bezier(0.45, 0, 0.55, 1);
}

a.top-glass.top-glass--gallery:hover,
a.top-glass.top-glass--gallery:focus-visible {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.05);
}

a.top-glass.top-glass--gallery:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.22);
  outline-offset: 2px;
}

a.top-glass.top-glass--gallery.top-glass__here {
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.06);
}

@media (pointer: coarse) {
  a.top-glass.top-glass--gallery {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  a.top-glass.top-glass--gallery {
    letter-spacing: 0.08em;
    padding-block: 0.35rem;
    padding-inline: clamp(0.42rem, 2vw, 0.62rem);
  }
}

/* Phones: clearer space between Core / Gadget / Gallery pills and wrapped section links */
@media (max-width: 640px) {
  .top-glass-dock {
    gap: clamp(0.45rem, 2.4vw, 0.82rem);
    row-gap: 0.55rem;
  }

  .top-glass-dock > .top-glass nav {
    gap: 0.28rem 0.48rem;
    row-gap: 0.52rem;
    justify-content: center;
  }
}

/* Legacy portal removed from markup; hide if any old HTML remains */
.alma-gallery-portal {
  display: none !important;
}

/* Device / sound hints live on the intro overlay only */
.alma-sound-whisper {
  display: none !important;
}

/* —— Footer shell (site-wide): quiet strip; liquid glass only on .alma-media-foot--segments —— */
.bottom-glass {
  position: fixed;
  bottom: max(0.55rem, calc(env(safe-area-inset-bottom) + 0.35rem));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1180;
  max-width: min(96vw, 52rem);
  padding: 0.2rem 0.5rem;
  pointer-events: auto;
  text-align: center;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-sizing: border-box;
}

/* —— Footer: credit line + media load (save on device) —— */
.bottom-glass__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 1.15rem;
  max-width: min(96vw, 52rem);
  margin: 0 auto;
}

.bottom-glass__line {
  margin: 0;
  font-size: clamp(0.52rem, 1.05vw, 0.62rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
}

.bottom-glass__line .nbulai {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 0.35s cubic-bezier(0.45, 0, 0.55, 1), border-color 0.35s cubic-bezier(0.45, 0, 0.55, 1);
}

.bottom-glass__line .nbulai:hover,
.bottom-glass__line .nbulai:focus-visible {
  color: rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.28);
}

.bottom-glass__line .nbulai:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.22);
  outline-offset: 3px;
  border-radius: 2px;
}

.alma-media-foot {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.28rem 0.4rem;
  padding: 0.15rem 0.35rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Neat segmented control (footer) — liquid glass; blur stays on this shell only (not on media / motion layers) */
.alma-media-foot--segments {
  gap: 0.4rem 0.55rem;
  padding: 4px 5px 4px 8px;
  border-radius: 11px;
  background:
    var(--alma-liquid-shine),
    var(--alma-liquid-veil);
  border: 1px solid var(--alma-liquid-border);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.32) inset,
    0 1px 0 var(--alma-liquid-inset) inset,
    var(--alma-liquid-shadow-ui);
  backdrop-filter: blur(var(--alma-liquid-blur)) saturate(var(--alma-liquid-sat));
  -webkit-backdrop-filter: blur(var(--alma-liquid-blur)) saturate(var(--alma-liquid-sat));
}

.alma-media-foot__label {
  font-size: clamp(0.45rem, 0.88vw, 0.52rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  padding-right: 0.15rem;
}

.alma-media-foot--segments .alma-media-foot__label {
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.14em;
}

.alma-media-foot__btn {
  font: inherit;
  font-size: clamp(0.45rem, 0.88vw, 0.54rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.38rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.48);
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.alma-media-foot--segments .alma-media-foot__btn {
  border-radius: 8px;
  border: none;
  margin: 0;
  background: transparent;
  padding: 0.4rem 0.58rem;
  font-size: clamp(0.48rem, 0.92vw, 0.56rem);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.44);
}

.alma-media-foot__btn[aria-pressed="true"] {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(200, 190, 255, 0.35);
}

.alma-media-foot--segments .alma-media-foot__btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.94);
}

.alma-media-foot__btn:hover,
.alma-media-foot__btn:focus-visible {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.07);
}

.alma-media-foot--segments .alma-media-foot__btn:hover,
.alma-media-foot--segments .alma-media-foot__btn:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}

.alma-media-foot__btn:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.28);
  outline-offset: 2px;
}

/* Save data = playful “pixel-print / fax” chrome (site-wide, tongue-in-cheek) */
html[data-alma-media="save"] .alma-media-foot--segments {
  background: repeating-linear-gradient(
      -12deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 3px
    ),
    var(--alma-liquid-shine),
    rgba(22, 20, 18, 0.42);
  border: 1px dashed rgba(255, 185, 130, 0.28);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3) inset,
    0 1px 0 var(--alma-liquid-inset) inset,
    var(--alma-liquid-shadow-ui);
  backdrop-filter: blur(16px) saturate(1.03);
  -webkit-backdrop-filter: blur(16px) saturate(1.03);
}

html[data-alma-media="save"] .alma-media-foot--segments .alma-media-foot__btn[data-alma-media="save"][aria-pressed="true"] {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  color: rgba(255, 235, 210, 0.95) !important;
  background: rgba(55, 48, 40, 0.85) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 140, 0.22),
    1px 1px 0 rgba(0, 0, 0, 0.35) !important;
  image-rendering: pixelated;
}

@media (max-width: 520px) {
  .bottom-glass__inner {
    flex-direction: column;
    gap: 0.55rem;
  }

  .alma-media-foot {
    max-width: 100%;
    justify-content: center;
  }

  .alma-media-foot__btn {
    min-height: 44px;
    padding-inline: 0.65rem;
  }
}

/* Intro overlay: media load (text, raster, video, audio, vector — synced with footer) */
.alma-intro__media-block {
  margin: 0;
  max-width: none;
  padding: 0;
  box-sizing: border-box;
}

.alma-intro__media-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.65rem;
}

.alma-intro__media-head {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

@media (min-width: 480px) {
  .alma-intro__media-head {
    flex: 1 1 10rem;
    max-width: 15rem;
  }
}

.alma-intro__media-title {
  font-size: clamp(0.5rem, 1vw, 0.58rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.alma-intro__media-sub {
  font-size: clamp(0.46rem, 0.92vw, 0.53rem);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.34);
}

.alma-intro__media-label {
  font-size: clamp(0.48rem, 1.05vw, 0.56rem);
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  flex: 0 0 auto;
}

.alma-intro__media-note {
  font-size: clamp(0.46rem, 1.02vw, 0.54rem);
  font-weight: 300;
  letter-spacing: 0.025em;
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.36);
  text-align: center;
  margin: 0.4rem 0 0;
}

.alma-intro__media-note strong {
  font-weight: 500;
  color: rgba(255, 252, 248, 0.72);
}

/* Legacy long hint above buttons */
.alma-intro__media-hint {
  font-size: clamp(0.52rem, 1.35vw, 0.62rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.36);
  text-align: center;
  margin: 0 0 0.65rem;
}

.alma-intro__media-hint strong {
  font-weight: 400;
  color: rgba(255, 252, 248, 0.72);
}

.alma-intro__media-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.32rem 0.42rem;
  padding: 0.32rem 0.4rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex: 1 1 10rem;
}

.alma-intro__media-tier--segments {
  flex-wrap: nowrap;
  gap: 0;
  padding: 3px;
  border-radius: 10px;
  background:
    var(--alma-liquid-shine),
    var(--alma-liquid-veil);
  border: 1px solid var(--alma-liquid-border);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.32) inset,
    0 1px 0 var(--alma-liquid-inset) inset,
    var(--alma-liquid-shadow-ui);
  backdrop-filter: blur(var(--alma-liquid-blur)) saturate(var(--alma-liquid-sat));
  -webkit-backdrop-filter: blur(var(--alma-liquid-blur)) saturate(var(--alma-liquid-sat));
  flex: 1 1 auto;
  min-width: min(100%, 15.5rem);
}

.alma-intro__media-row .alma-intro__media-tier {
  justify-content: flex-end;
}

.alma-intro__media-btn {
  font: inherit;
  font-size: clamp(0.45rem, 1.05vw, 0.52rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.42rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.46);
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.alma-intro__media-tier--segments .alma-intro__media-btn {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 7px;
  border: none;
  margin: 0;
  background: transparent;
  padding: 0.42rem 0.5rem;
  font-size: clamp(0.48rem, 1vw, 0.56rem);
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.44);
}

.alma-intro__media-btn[aria-pressed="true"] {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(200, 190, 255, 0.38);
}

.alma-intro__media-tier--segments .alma-intro__media-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.95);
}

.alma-intro__media-btn:hover,
.alma-intro__media-btn:focus-visible {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.07);
}

.alma-intro__media-tier--segments .alma-intro__media-btn:hover,
.alma-intro__media-tier--segments .alma-intro__media-btn:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.alma-intro__media-btn:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.28);
  outline-offset: 2px;
}

html[data-alma-media="save"] .alma-intro__media-tier--segments {
  background: repeating-linear-gradient(
      -12deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 3px
    ),
    var(--alma-liquid-shine),
    rgba(24, 22, 20, 0.42);
  border: 1px dashed rgba(255, 185, 130, 0.3);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3) inset,
    0 1px 0 var(--alma-liquid-inset) inset,
    var(--alma-liquid-shadow-ui);
  backdrop-filter: blur(16px) saturate(1.03);
  -webkit-backdrop-filter: blur(16px) saturate(1.03);
}

html[data-alma-media="save"] .alma-intro__media-tier--segments .alma-intro__media-btn[data-alma-intro-media="save"][aria-pressed="true"] {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  color: rgba(255, 235, 210, 0.96) !important;
  background: rgba(52, 46, 40, 0.9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 140, 0.25),
    1px 1px 0 rgba(0, 0, 0, 0.35) !important;
  image-rendering: pixelated;
}

@media (max-width: 520px) {
  .alma-intro__media-btn {
    min-height: 40px;
    padding-inline: 0.62rem;
  }

  .alma-intro__media-tier--segments .alma-intro__media-btn {
    min-height: 40px;
    padding-inline: 0.45rem;
  }
}

/* --------------------------------------------------------------------------
   Media tiers (footer + intro): Save data · Standard · Rich
   Save = chunky text + pixel-crisp rasters/video + stepped vectors + scanlines.
   Standard = normal rendering. Rich = extra legibility + saturated clarity.
   Opt out per asset: class alma-media-crisp on img/video/canvas.
   -------------------------------------------------------------------------- */

html[data-alma-media="save"] body {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  font-synthesis: none;
}

html[data-alma-media="save"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0.06;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.14) 2px,
    rgba(0, 0, 0, 0.14) 3px
  );
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  html[data-alma-media="save"] body::after {
    opacity: 0.035;
  }
}

html[data-alma-media="save"] img:not(.alma-media-crisp),
html[data-alma-media="save"] picture img:not(.alma-media-crisp),
html[data-alma-media="save"] video:not(.alma-media-crisp),
html[data-alma-media="save"] canvas:not(.alma-media-crisp) {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  filter: saturate(0.88) contrast(1.08);
}

html[data-alma-media="save"] video:not(.alma-media-crisp) {
  filter: saturate(0.82) contrast(1.1) brightness(0.97);
}

/* Audio has no painted output — filters are unreliable and can confuse playback; keep decoding neutral. */
html[data-alma-media="save"] audio,
html[data-alma-media="medium"] audio,
html[data-alma-media="super"] audio {
  filter: none;
  opacity: 1;
}

/* Content SVGs: fax-machine edges; keep chrome icons smooth */
html[data-alma-media="save"] body svg:not(.top-glass-dock svg):not(.bottom-glass svg):not(.audio-corner svg):not(.alma-intro svg) {
  shape-rendering: crispEdges;
}

html[data-alma-media="save"] .top-glass-dock svg,
html[data-alma-media="save"] .bottom-glass svg,
html[data-alma-media="save"] .audio-corner svg,
html[data-alma-media="save"] .alma-intro svg {
  shape-rendering: geometricPrecision;
}

html[data-alma-media="medium"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: auto;
  font-synthesis: weight style;
}

html[data-alma-media="medium"] body::after {
  content: none;
  display: none;
}

html[data-alma-media="medium"] img,
html[data-alma-media="medium"] picture img,
html[data-alma-media="medium"] video,
html[data-alma-media="medium"] canvas {
  image-rendering: auto;
  filter: none;
}

html[data-alma-media="medium"] body svg {
  shape-rendering: auto;
}

html[data-alma-media="super"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  font-synthesis: weight style;
}

html[data-alma-media="super"] body::after {
  content: none;
  display: none;
}

html[data-alma-media="super"] img,
html[data-alma-media="super"] picture img,
html[data-alma-media="super"] video,
html[data-alma-media="super"] canvas {
  image-rendering: auto;
  filter: saturate(1.05) contrast(1.03);
}

html[data-alma-media="super"] video {
  filter: saturate(1.07) contrast(1.04) brightness(1.01);
}

html[data-alma-media="super"] body svg {
  shape-rendering: geometricPrecision;
}

/* Rich: slightly warmer “selected” slab in tier controls (still no animation overrides) */
html[data-alma-media="super"] .alma-media-foot--segments .alma-media-foot__btn[aria-pressed="true"] {
  background: rgba(255, 252, 248, 0.15);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 22px rgba(200, 185, 255, 0.07);
}

html[data-alma-media="super"] .alma-intro__media-tier--segments .alma-intro__media-btn[aria-pressed="true"] {
  background: rgba(255, 252, 248, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 22px rgba(200, 185, 255, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  .alma-media-foot--segments,
  .alma-intro__media-tier--segments {
    backdrop-filter: blur(10px) saturate(1.02);
    -webkit-backdrop-filter: blur(10px) saturate(1.02);
  }

  html[data-alma-media="save"] .alma-media-foot--segments,
  html[data-alma-media="save"] .alma-intro__media-tier--segments {
    backdrop-filter: blur(8px) saturate(1.02);
    -webkit-backdrop-filter: blur(8px) saturate(1.02);
  }
}

/* Phones: clear fixed nav dock (often two rows) so the page title / hero is visible */
@media (max-width: 640px) {
  .gallery-scroll {
    padding-top: max(clamp(6.35rem, 36vw, 9.75rem), calc(env(safe-area-inset-top) + 5.35rem)) !important;
  }

  .gadget-main {
    padding-top: max(clamp(6.35rem, 36vw, 9.75rem), calc(env(safe-area-inset-top) + 5.35rem)) !important;
  }

  .schedule-hero {
    padding-top: max(clamp(6.35rem, 34vw, 9.25rem), calc(env(safe-area-inset-top) + 5.35rem)) !important;
  }

  .creations-page .main {
    padding-top: max(clamp(6.35rem, 34vw, 9.25rem), calc(env(safe-area-inset-top) + 5.35rem)) !important;
  }
}