/* ─────────────────────────────────────────────────────────────
   MOBILE NAV — folded strata panel
   ─────────────────────────────────────────────────────────────
   Metaphoric scaffolding (worn lightly):
   - Icon: three layers held distinct under tension. On open the
     middle layer recedes and the outer two refract — the layers
     do not flatten into a unified X, they fold apart.
   - Panel: vertical strata, each link a discrete layer with
     gold-saturated edge light raking across. Not a blob menu.
   - Stagger: each link reveals on a tic-bound delay because
     audience / operator / lens / scope are distinct identity
     slots, not a homogeneous list.
   - Reduced-motion: motion is expression of structure, not the
     structure itself. When motion is reduced, structure remains.
   - Visible only below the existing lg: breakpoint. Desktop nav
     untouched.
   ───────────────────────────────────────────────────────────── */

.pf-mobile-trigger{
  display:none;
  position:relative;
  width:44px;height:44px;
  background:transparent;border:none;
  cursor:pointer;
  padding:0;margin:0;
  z-index:60;
  -webkit-tap-highlight-color:transparent;
}
@media(max-width:1023px){
  .pf-mobile-trigger{display:inline-flex;align-items:center;justify-content:center;}
}

/* Icon — three folded layers, not three uniform bars.
   Subtle width differential reads as strata, not as a unified rule.
   The outer two carry a faint forge tint at rest; middle stays steel —
   the same posture as the cover-image canon (gold edges, steel core). */
.pf-mobile-trigger .pf-line{
  position:absolute;left:11px;
  height:1.5px;
  background:#e9e8e3;
  border-radius:0;
  transform-origin:center;
  transition:
    transform .42s cubic-bezier(.7,0,.25,1),
    width    .42s cubic-bezier(.7,0,.25,1),
    opacity  .28s ease,
    background-color .3s ease;
}
.pf-mobile-trigger .pf-line-1{ top:14px; width:22px; background:linear-gradient(90deg,#e9e8e3 0%,#e9e8e3 70%,rgba(245,185,74,.7) 100%); }
.pf-mobile-trigger .pf-line-2{ top:21px; width:18px; }   /* shorter, steel — strata are not uniform */
.pf-mobile-trigger .pf-line-3{ top:28px; width:22px; background:linear-gradient(90deg,rgba(245,185,74,.7) 0%,#e9e8e3 30%,#e9e8e3 100%); }

.pf-mobile-trigger:hover .pf-line,
.pf-mobile-trigger:focus-visible .pf-line{ background:#f5b94a; }
.pf-mobile-trigger:focus-visible{ outline:1px solid rgba(245,185,74,.4); outline-offset:2px; }

/* Open state — middle layer recedes; outer two fold across the centerline.
   Result reads as 'layers held distinct' rather than a clean X. */
.pf-mobile-trigger[aria-expanded="true"] .pf-line-1{
  top:21px; width:22px;
  transform:rotate(45deg);
  background:#f5b94a;
}
.pf-mobile-trigger[aria-expanded="true"] .pf-line-2{
  opacity:0;
  transform:translateX(-4px);
}
.pf-mobile-trigger[aria-expanded="true"] .pf-line-3{
  top:21px; width:22px;
  transform:rotate(-45deg);
  background:#f5b94a;
}

/* Panel — full-bleed, strata layout */
.pf-mobile-panel{
  position:fixed;
  inset:0;
  z-index:55;
  background:rgba(4,4,5,0.96);
  backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  overflow-y:auto;
  padding:96px 0 48px;
}
.pf-mobile-panel[data-open="true"]{
  opacity:1;
  pointer-events:auto;
}

/* When panel is open: lift the nav header above the panel so the
   trigger (the X) remains tappable for close. The trigger's z-index
   is scoped inside the header's stacking context, so we lift the
   whole stacking context. Targets the header that actually contains
   the trigger — works whether the header has id="nav" or not. */
body.pf-mobile-lock header:has(.pf-mobile-trigger){
  z-index:60 !important;
}
/* Fallback for browsers without :has() — IDs we use on the real surfaces */
body.pf-mobile-lock #nav{
  z-index:60 !important;
}

/* Strata — vertical layers, each link a discrete layer with
   gold edge light raking across when active. */
.pf-mobile-stratum{
  display:block;
  padding:22px 32px;
  border-bottom:1px solid rgba(233,232,227,0.04);
  position:relative;
  color:rgba(233,232,227,0.88);
  text-decoration:none;
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(1.4rem,5vw,1.85rem);
  font-weight:300;
  letter-spacing:-0.015em;
  line-height:1.1;
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity .55s cubic-bezier(.2,.6,.2,1),
    transform .55s cubic-bezier(.2,.6,.2,1),
    color .3s ease,
    border-color .3s ease,
    background .3s ease;
}
.pf-mobile-panel[data-open="true"] .pf-mobile-stratum{
  opacity:1;
  transform:translateY(0);
}
/* Tic-bound stagger — each stratum has its own moment of resolution */
.pf-mobile-panel[data-open="true"] .pf-mobile-stratum:nth-child(1){ transition-delay:.08s; }
.pf-mobile-panel[data-open="true"] .pf-mobile-stratum:nth-child(2){ transition-delay:.13s; }
.pf-mobile-panel[data-open="true"] .pf-mobile-stratum:nth-child(3){ transition-delay:.18s; }
.pf-mobile-panel[data-open="true"] .pf-mobile-stratum:nth-child(4){ transition-delay:.23s; }
.pf-mobile-panel[data-open="true"] .pf-mobile-stratum:nth-child(5){ transition-delay:.28s; }
.pf-mobile-panel[data-open="true"] .pf-mobile-stratum:nth-child(6){ transition-delay:.33s; }
.pf-mobile-panel[data-open="true"] .pf-mobile-stratum:nth-child(7){ transition-delay:.38s; }
.pf-mobile-panel[data-open="true"] .pf-mobile-stratum:nth-child(8){ transition-delay:.43s; }

/* Edge-light marker — a single hairline of forge gold that catches
   the left edge of each stratum. Not a bullet, not a chevron.
   Light raking across the fold. */
.pf-mobile-stratum::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:0; height:1px;
  background:linear-gradient(90deg,#f5b94a,transparent);
  transform:translateY(-50%);
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.pf-mobile-stratum:hover,
.pf-mobile-stratum:focus-visible{
  color:#fff;
  border-bottom-color:rgba(245,185,74,0.15);
  background:rgba(245,185,74,0.025);
  outline:none;
}
.pf-mobile-stratum:hover::before,
.pf-mobile-stratum:focus-visible::before{
  width:18px;
}

/* Eyebrow label above each stratum group — small, paginated reading */
.pf-mobile-eyebrow{
  display:block;
  padding:8px 32px 4px;
  font-family:'Inter Tight',sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(245,185,74,0.45);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .5s ease,transform .5s ease;
}
.pf-mobile-panel[data-open="true"] .pf-mobile-eyebrow{
  opacity:1;
  transform:translateY(0);
  transition-delay:.04s;
}

/* CTA stratum — closing clause, italic serif accent, gold-saturated */
.pf-mobile-cta{
  margin-top:24px;
  padding:26px 32px;
  border-top:1px solid rgba(245,185,74,0.12);
  border-bottom:none;
  color:#f5b94a;
}
.pf-mobile-cta .pf-mobile-cta-em{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-weight:400;
}
.pf-mobile-cta:hover,
.pf-mobile-cta:focus-visible{
  color:#ffe9a8;
  background:rgba(245,185,74,0.04);
  border-bottom:none;
}

/* Closing footer rule inside panel — a thin wave consistent with the body wave divider */
.pf-mobile-foot{
  display:flex;justify-content:center;
  padding:36px 32px 0;
  opacity:0;
  transition:opacity .6s ease .5s;
}
.pf-mobile-panel[data-open="true"] .pf-mobile-foot{ opacity:1; }
.pf-mobile-foot-wave{
  width:min(320px,60%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,185,74,0.3),transparent);
}

/* Body lock while open */
body.pf-mobile-lock{ overflow:hidden; touch-action:none; }

/* Reduced motion — structure preserved, motion dropped */
@media(prefers-reduced-motion:reduce){
  .pf-mobile-trigger .pf-line,
  .pf-mobile-panel,
  .pf-mobile-stratum,
  .pf-mobile-stratum::before,
  .pf-mobile-eyebrow,
  .pf-mobile-foot{
    transition:none;
  }
  .pf-mobile-panel[data-open="true"] .pf-mobile-stratum,
  .pf-mobile-panel[data-open="true"] .pf-mobile-eyebrow,
  .pf-mobile-panel[data-open="true"] .pf-mobile-foot{
    transition-delay:0s;
  }
}