/* Cinema persistent chrome — layered on every non-home page for continuity with /. */

/* Hide the legacy nav header on non-home pages — cinema has none */
body:not(.home) header.site-nav,
body:not(.home) header.qm-nav,
body:not(.home) > header:first-of-type { display: none !important; }

/* Fixed logo lockup — top-left */
.qm-lockup {
  position: fixed; top: 22px; left: 24px; z-index: 180;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--pa, #F5EFE3); text-decoration: none;
  transition: transform .3s;
}
.qm-lockup:hover { transform: scale(1.03); }
.qm-lockup svg { width: 34px; height: 34px; }
.qm-lockup .qm-lockup-text { display: flex; flex-direction: column; line-height: 1.05; }
.qm-lockup-text .qm-lu-1 { font-family: 'Bricolage Grotesque', serif; font-weight: 500; font-size: 16px; letter-spacing: -.02em; }
.qm-lockup-text .qm-lu-2 { font-family: 'Jura', monospace; font-weight: 600; font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: #C7743A; }

/* Utility cluster — bottom-right pills */
.qm-utility { position: fixed; right: 20px; bottom: 20px; z-index: 180; display: flex; gap: 8px; }
.qm-utility .qm-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(245,239,227,.06);
  border: 1px solid rgba(245,239,227,.16);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 999px;
  color: var(--pa, #F5EFE3);
  font-family: 'Jura', monospace; font-weight: 500; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s;
}
.qm-utility .qm-pill:hover { border-color: #C7743A; }
.qm-utility .qm-prog-bar { width: 22px; height: 2px; background: rgba(245,239,227,.2); border-radius: 999px; overflow: hidden; }
.qm-utility .qm-prog-bar > i { display: block; height: 100%; width: 0%; background: linear-gradient(93deg,#C7743A,#E08B47); }

/* Film grain */
.qm-grain {
  position: fixed; inset: -20%; pointer-events: none; z-index: 179;
  opacity: .05; mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 2px),
    repeating-linear-gradient(90deg, transparent 0, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px);
  animation: qmGrain 1.1s steps(4) infinite;
}
@keyframes qmGrain {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-2%,1%); }
  50%  { transform: translate(1%,-2%); }
  75%  { transform: translate(-1%,-1%); }
  100% { transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce) { .qm-grain { animation: none; } }

/* Give body top padding so hero content clears the logo lockup */
body { padding-top: 0; }

/* --- Page-level cinema hero pattern (opt-in via .qm-hero) --- */
.qm-hero {
  position: relative;
  min-height: 82vh;
  padding: clamp(90px,10vh,140px) clamp(20px,5vw,64px) clamp(60px,7vh,100px);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  color: var(--pa, #F5EFE3);
  text-align: left;
}
.qm-hero::before {
  content: ""; position: absolute; inset: -10%;
  filter: blur(60px); transform: scale(1.13);
  background:
    radial-gradient(circle at 32% 42%, rgba(199,116,58,.34) 0%, transparent 50%),
    radial-gradient(circle at 78% 62%, rgba(44,42,107,.44) 0%, transparent 48%),
    #0B0B0C;
  z-index: 0;
}
.qm-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 68% 54% at 50% 48%, transparent 26%, rgba(0,0,0,.6) 100%);
  z-index: 1;
}
.qm-hero > * { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; width: 100%; }
.qm-hero .qm-kicker {
  font-family: 'Jura', monospace; font-weight: 600; font-size: 10.5px;
  letter-spacing: .28em; text-transform: uppercase; color: #C7743A;
  margin-bottom: 22px;
}
.qm-hero h1 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(36px,6vw,84px); font-weight: 500;
  letter-spacing: -.04em; line-height: 1; margin: 0 0 22px;
  max-width: 22ch;
}
.qm-hero h1 em { font-style: normal; color: #E08B47; }
.qm-hero .qm-lede {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(16px,1.6vw,20px); font-weight: 400;
  line-height: 1.55; color: rgba(245,239,227,.7);
  max-width: 60ch; margin-bottom: 32px;
}
.qm-hero .qm-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.qm-hero .qm-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 28px; border-radius: 999px;
  background: linear-gradient(93deg,#C7743A 6.4%,#E08B47 94.64%);
  color: #1a0e05; font-family: 'Jura', monospace; font-weight: 600;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; transition: transform .3s;
  border: none;
}
.qm-hero .qm-cta:hover { transform: translateY(-2px); }
.qm-hero .qm-cta.ghost {
  background: transparent; color: var(--pa, #F5EFE3);
  border: 1px solid rgba(245,239,227,.26);
}
.qm-hero .qm-cta.ghost:hover { border-color: #C7743A; color: #E08B47; }

/* Post-hero band uses same near-black shell + glass cards */
.qm-band {
  padding: clamp(70px,9vh,120px) clamp(20px,5vw,64px);
  background: #0B0B0C;
  color: var(--pa, #F5EFE3);
  position: relative;
}
.qm-band > .qm-wrap { max-width: 1240px; margin: 0 auto; }
.qm-band h2 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(28px,3.6vw,50px); font-weight: 500;
  letter-spacing: -.035em; line-height: 1.04;
  margin: 0 0 22px;
}
.qm-band h2 em { font-style: normal; color: #E08B47; }
.qm-band .qm-kicker {
  font-family: 'Jura', monospace; font-weight: 600; font-size: 10.5px;
  letter-spacing: .28em; text-transform: uppercase; color: #C7743A;
  display: block; margin-bottom: 14px;
}
.qm-band p { color: rgba(245,239,227,.66); line-height: 1.6; max-width: 62ch; }
.qm-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 12px; }
.qm-card {
  padding: 26px 24px;
  background: rgba(245,239,227,.05);
  border: 1px solid rgba(245,239,227,.12);
  border-radius: 28px;
  backdrop-filter: blur(28px);
  transition: transform .4s, border-color .4s;
}
.qm-card:hover { transform: translateY(-6px); border-color: #C7743A; }
.qm-card h3 { font-family: 'Bricolage Grotesque', serif; font-size: 20px; font-weight: 500; margin: 0 0 8px; color: var(--pa, #F5EFE3); }
.qm-card p { font-size: 13.5px; line-height: 1.5; color: rgba(245,239,227,.6); margin: 0; }
.qm-card .qm-kicker { margin-bottom: 8px; }

/* Chips row */
.qm-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.qm-chip {
  padding: 9px 14px; border-radius: 999px;
  background: rgba(245,239,227,.03);
  border: 1px solid rgba(245,239,227,.14);
  color: rgba(245,239,227,.72);
  font-family: 'Jura', monospace; font-size: 12px;
  letter-spacing: .06em;
}
.qm-chip:hover { border-color: #C7743A; color: #E08B47; }

/* Site-wide footer */
.qm-footer {
  position: relative;
  padding: 44px clamp(20px,5vw,64px) 60px;
  background: #08080A;
  border-top: 1px solid rgba(245,239,227,.08);
  color: rgba(245,239,227,.65);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  z-index: 2;
}
.qm-footer-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 12px 32px;
  align-items: center;
}
.qm-footer-brand { display: inline-flex; align-items: center; gap: 10px; grid-row: 1; }
.qm-footer-brand svg { width: 30px; height: 30px; color: #F5EFE3; }
.qm-footer-brand span { display: flex; flex-direction: column; line-height: 1.05; color: #F5EFE3; }
.qm-footer-brand .qm-lu-1 { font-family: 'Bricolage Grotesque', serif; font-weight: 500; font-size: 15px; letter-spacing: -.02em; }
.qm-footer-brand .qm-lu-2 { font-family: 'Jura', monospace; font-weight: 600; font-size: 8px; letter-spacing: .22em; text-transform: uppercase; color: #C7743A; }
.qm-footer-address {
  grid-row: 1; text-align: center;
  font-family: 'Jura', monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,239,227,.55);
}
.qm-footer-links { grid-row: 1; display: inline-flex; gap: 18px; justify-self: end; }
.qm-footer-links a {
  font-family: 'Jura', monospace; font-weight: 500; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,239,227,.6); text-decoration: none;
}
.qm-footer-links a:hover { color: #C7743A; }
.qm-footer-legal {
  grid-row: 2; grid-column: 1 / -1;
  text-align: center;
  font-family: 'Jura', monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,239,227,.4);
  padding-top: 14px;
  border-top: 1px solid rgba(245,239,227,.06);
  margin-top: 4px;
}
.qm-footer-legal a { color: rgba(245,239,227,.55); text-decoration: none; margin: 0 4px; }
.qm-footer-legal a:hover { color: #C7743A; }
@media (max-width: 720px) {
  .qm-footer-inner { grid-template-columns: 1fr; text-align: center; }
  .qm-footer-brand, .qm-footer-links { justify-self: center; }
  .qm-footer-address { text-align: center; }
}

/* Utility cluster sits above the footer, not overlapping */
body { padding-bottom: 0; }

/* Right-side vertical scroller menu — pinned mid-right, hover-expand */
.qm-rail {
  position: fixed;
  top: 50%; right: 20px;
  transform: translateY(-50%);
  z-index: 178;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(11,11,12,.55);
  border: 1px solid rgba(245,239,227,.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 999px;
  max-height: 78vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.qm-rail::-webkit-scrollbar { display: none; }

.qm-rail-item {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 10px 10px;
  border-radius: 999px;
  color: rgba(245,239,227,.6);
  font-family: 'Jura', monospace;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s, background .25s, padding .35s cubic-bezier(.16,1,.3,1);
}
.qm-rail-item .qm-rail-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(245,239,227,.28);
  transition: background .25s, transform .25s, box-shadow .25s;
  flex: none;
}
.qm-rail-item .qm-rail-label {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width .35s cubic-bezier(.16,1,.3,1), opacity .25s, margin .35s;
  margin-left: 0;
  color: inherit;
}
.qm-rail:hover .qm-rail-label,
.qm-rail-item:focus-visible .qm-rail-label {
  max-width: 220px; opacity: 1; margin-left: 10px;
}
.qm-rail-item:hover { color: #F5EFE3; background: rgba(245,239,227,.05); }
.qm-rail-item:hover .qm-rail-dot { background: #C7743A; transform: scale(1.4); box-shadow: 0 0 0 4px rgba(199,116,58,.15); }
.qm-rail-item[aria-current="page"] { color: #F5EFE3; }
.qm-rail-item[aria-current="page"] .qm-rail-dot {
  background: linear-gradient(93deg, #C7743A, #E08B47);
  transform: scale(1.6);
  box-shadow: 0 0 0 4px rgba(199,116,58,.22);
}

/* Divider between primary + secondary items */
.qm-rail-divider {
  height: 1px; margin: 4px 8px;
  background: rgba(245,239,227,.10);
}

/* On smaller screens, tuck it away */
@media (max-width: 640px) {
  .qm-rail { top: auto; bottom: 78px; right: 12px; transform: none; padding: 8px 6px; }
  .qm-rail-item { padding: 8px 8px; }
  .qm-rail-item .qm-rail-label { display: none; }
}