/* The page mast: one cinematic band under the nav, shared by the big rooms.
   Same recipe as the dashboard's: art, a scrim that melts into the page, CSS
   light beams, and a gold-gradient display title. */

.pm{
  position:relative; overflow:clip; min-height:clamp(190px,24vw,280px);
  display:flex; align-items:flex-end;
  border-bottom:1px solid rgba(255,210,30,.16);
  margin-bottom:var(--sp-5);
}
.pm-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 45%;
}
.pm-grade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,9,7,.5), rgba(6,9,7,.16) 36%, rgba(6,9,7,.85) 82%, var(--bg)),
    radial-gradient(70% 90% at 50% 110%, rgba(49,173,109,.12), transparent 60%);
}
.pm-grade::after{
  content:''; position:absolute; inset:-20% 0 0;
  background:
    conic-gradient(from 190deg at 16% -8%, transparent 0 8deg, rgba(255,210,30,.05) 8deg 13deg, transparent 13deg),
    conic-gradient(from 162deg at 86% -8%, transparent 0 8deg, rgba(255,255,255,.045) 8deg 12deg, transparent 12deg);
  mix-blend-mode:screen; pointer-events:none;
}
.pm-in{ position:relative; padding-top:var(--sp-6); padding-bottom:var(--sp-5); width:100% }
.pm-k{
  font-size:var(--fs-2); font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--turf-ink); margin-bottom:var(--sp-2);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.pm-t{
  font-family:var(--disp); font-size:clamp(34px,5.6vw,58px); line-height:.9;
  text-transform:uppercase; color:var(--chalk);
  text-shadow:0 4px 28px rgba(0,0,0,.7);
}
.pm-t em{
  font-style:normal;
  background:linear-gradient(175deg,#ffe98a 8%,var(--yellow) 40%,#b8940f 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 14px rgba(255,210,30,.26));
}
.pm-s{
  font-size:var(--fs-5); color:var(--muted); margin-top:var(--sp-2); max-width:60ch;
  line-height:1.6; text-shadow:0 1px 6px rgba(0,0,0,.85);
}