/* The header's companions on the case studies and Stories (components/site/menu.tsx), as the carried pages have them:
   a phone's menu button and the full-window menu it opens; no blur behind the header, as the reference has none. */

.qs-header-blur { display: none !important; }
/* The header's blur, as Depo Luxe's own (its #Header__blur > .top, on its Talent and Contact pages; Lorenzo, 2026-11-09:
   "the background of menu needs to absolutely have a blur ... same as depoluxe.xyz/talent/"): one band under the header,
   10vw tall (30vw on a phone), blurred 40px under a 5% black and fading out downward. It comes in once the page scrolls
   under the menu, so a page's own name and line are never blurred at rest. One layer only, as the reference has: the
   four-layer blur tried before cost a third of every scrolling frame; this one is measured against depoluxe.xyz. */
body.qs::before, .qw-headblur { content: ""; position: fixed; left: 0; right: 0; top: -1px; height: 10vw; z-index: 79; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); background: rgba(0, 0, 0, 0.05); -webkit-mask-image: linear-gradient(180deg, #000 10%, rgba(0, 0, 0, 0)); mask-image: linear-gradient(180deg, #000 10%, rgba(0, 0, 0, 0)); opacity: 0; pointer-events: none; transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.qw-headblur { z-index: 119; }
body.qs.qs-scrolled::before, html.st-top-folded .qw-headblur { opacity: 1; }
/* (and while it scrolls, the rows and pictures under a still pointer do not light up: stories.js) */
body.qs-scrolling .qs-story-list, body.qs-scrolling .qs-featured, body.qs-scrolling .qp-grid { pointer-events: none; }
/* and it folds as the reference's does, its words moving and nothing resized under them (a height in transition lays the
   page out again on every frame of the fold) */
.qs-header { transition: none !important; }

/* the button: two hairlines, a phone's only */
.qw-burger { display: none; place-content: center; gap: 7px; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qw-burger span { display: block; width: 22px; height: 1px; background: currentColor; pointer-events: none; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.qw-burger:active span:first-child { transform: translateY(1px); }
.qw-burger:active span:last-child { transform: translateY(-1px); }

/* a carried page's button, lifted out of the reference's header (menu.js): fixed beside the name, above every layer */
body .qw-burger.qw-burger--lifted { position: fixed; top: max(16px, calc(env(safe-area-inset-top) + 4px)); right: 6px; z-index: 390; transform: translateZ(60px); color: #fff; }
body.palette-secondary .qw-burger.qw-burger--lifted { color: #000; }
html.qw-sheet-open .qw-burger--lifted { visibility: hidden; }

/* the menu: white, the five places large, the current one in bold, "Close" in the corner (the reference's side menu) */
.qw-sheet { position: fixed; inset: 0; z-index: 400; transform: translateZ(60px); display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; padding: 96px 16px max(32px, env(safe-area-inset-bottom)); background: #fff; color: #000; font-family: "EB Garamond", Georgia, serif; opacity: 0; transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.qw-sheet[hidden] { display: none; }
.qw-sheet.is-open { opacity: 1; }
.qw-sheet__close { position: absolute; top: 20px; right: 16px; padding: 10px 0 10px 16px; border: 0; background: none; color: inherit; font: 400 16px/1 "EB Garamond", Georgia, serif; letter-spacing: -0.01em; cursor: pointer; }
.qw-sheet__list { display: flex; flex-direction: column; }
.qw-sheet__list a { display: block; padding: 2px 0; color: inherit; text-decoration: none; font-size: clamp(40px, 12.5vw, 72px); line-height: 1.12; letter-spacing: -0.015em; opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(80ms + var(--i, 0) * 55ms); }
.qw-sheet.is-open .qw-sheet__list a { opacity: 1; transform: none; }
.qw-sheet__list a[aria-current] { font-weight: 700; }
.qw-sheet__line { font-size: 13px; line-height: 1.35; color: #555; max-width: 22em; }
html.qw-sheet-open { overflow: hidden; }

/* a phone: the name and the button; the line and the menu make way, and the name stays as the page scrolls */
@media (max-width: 760px) {
  .qw-burger { display: grid; }
  .st-top__holder { width: calc(100% - 32px); max-width: none; flex-direction: row; align-items: center; justify-content: space-between; }
  .st-top__title { justify-content: flex-start; gap: 0.3em; padding-bottom: 0; }
  .st-top__claim, .st-top .st-nav { display: none; }
  html.st-top-folded .st-top__title { transform: none; opacity: 1; pointer-events: auto; }
  .st-top { padding-top: 24px; }
  .st-top .qw-burger, .qs-header .qw-burger { position: fixed; top: max(16px, calc(env(safe-area-inset-top) + 4px)); right: 6px; margin: 0; z-index: 130; }
  .qs-header { height: auto !important; display: flex; align-items: center; justify-content: space-between; }
  .qs-header > p, .qs-header nav { display: none; }
  .qs-wordmark, .qs-scrolled .qs-wordmark { justify-content: flex-start; gap: 0.3em; padding-bottom: 0; transform: none; opacity: 1; pointer-events: auto; }
  .qs-header { padding-top: 24px !important; }
  /* a phone keeps the name and the menu button at the top as the page scrolls: the reference's band, 30vw, behind them */
  body.qs::before, .qw-headblur { height: 30vw; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .qw-sheet, .qw-sheet__list a, .qw-burger span { transition: none; }
}