/* =====================================================================
   PLOTNUA · GLOBAL HEADER · v2 (founder approval, 23 Oct 2026)
   ---------------------------------------------------------------------
   The one stylesheet for the one header. Markup comes only from
   atlas-tools/pn_header.py; atlas-tools/prove-global-header.py keeps both
   in step on every approved page. Every rule is scoped to body.pn-hdr-on
   (guard G8), so the file is inert anywhere else.

   Search is the generated rail (search.css / search.js, hash-pinned and
   untouched): this file only seats its pill in the bar and styles it as a
   member of the family. Its function, panel, keyboard and focus are theirs.

   Height: --pn-hdr-h is the bar's height. Anything sticky inside a page
   reads it, so nothing ever sits under the bar.
   ===================================================================== */
body.pn-hdr-on{
  --h-bg:rgba(27,28,30,.96); --h-line:rgba(194,189,181,.10);
  --h-raised:#2E3033; --h-raised-hi:#35373B; --h-edge:rgba(194,189,181,.16);
  --h-ivory:#F2EBE0; --h-stone:#C2BDB5; --h-terra-text:#CF8566; --h-bronze:#97785A;
  --h-serif:'Instrument Serif',Georgia,serif; --h-sans:'Hanken Grotesk',system-ui,sans-serif;
  --pn-hdr-h:68px; --h-pad:clamp(16px,3vw,40px); --h-btn:44px;
}
/* the floating PlotNua tile is now inside the bar; the old element stays in the page, unseen */
body.pn-hdr-on .brand-mark{ display:none !important; }

body.pn-hdr-on .pn-hdr{ position:sticky; top:0; z-index:60; background:var(--h-bg);
  -webkit-backdrop-filter:saturate(1.2) blur(14px); backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid var(--h-line); }
body.pn-hdr-on .pn-hdr-in{ height:var(--pn-hdr-h); padding:0 var(--h-pad); display:flex; align-items:center; gap:10px; box-sizing:border-box; }

/* 1 · brand: the approved tile and wordmark, a size down */
body.pn-hdr-on .pn-hdr-brand{ display:inline-flex; align-items:center; gap:11px; min-height:44px; min-width:44px; text-decoration:none; color:var(--h-ivory);
  padding:0 6px 0 0; border-radius:12px; }
body.pn-hdr-on .pn-hdr-tile{ width:36px; height:36px; border-radius:10px; background:#F8F5EC; display:grid; place-items:center;
  box-shadow:0 1px 2px rgba(0,0,0,.3); flex:none; }
body.pn-hdr-on .pn-hdr-tile img{ width:28px; height:28px; border-radius:7px; display:block; }
body.pn-hdr-on .pn-hdr-word{ font-family:var(--h-serif); font-size:28px; line-height:1; letter-spacing:-.01em; }
body.pn-hdr-on .pn-hdr-brand:focus-visible{ outline:2px solid var(--h-terra-text); outline-offset:3px; }
body.pn-hdr-on .pn-hdr-nav{ display:flex; align-items:center; gap:8px; margin-left:auto; }

/* 2 · the control family: one height, one radius, one type */
body.pn-hdr-on .pn-hdr-btn, body.pn-hdr-on .pn-hdr-wa{ display:inline-flex; align-items:center; gap:9px; height:var(--h-btn);
  padding:0 17px 0 13px; border-radius:999px; text-decoration:none; white-space:nowrap; box-sizing:border-box;
  font-family:var(--h-sans); font-weight:600; font-size:14.5px; line-height:1; letter-spacing:.005em; color:var(--h-ivory);
  border:1px solid var(--h-edge); background:transparent;
  transition:background .2s ease, border-color .2s ease, color .2s ease; }
body.pn-hdr-on .pn-hdr-btn svg{ width:18px; height:18px; flex:none; }
/* Discovery Library, the primary action: raised surface, terracotta icon */
body.pn-hdr-on .pn-hdr-btn.is-primary{ background:var(--h-raised);
  box-shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 22px -16px rgba(0,0,0,.8); }
body.pn-hdr-on .pn-hdr-btn.is-primary svg{ color:var(--h-terra-text); }
/* Your Plot, the related secondary action: outline only */
body.pn-hdr-on .pn-hdr-btn.is-secondary svg{ color:var(--h-stone); }
/* the active page: terracotta edge and a fine underline inside the pill */
body.pn-hdr-on .pn-hdr-btn[aria-current]{ position:relative; border-color:rgba(207,133,102,.7); }
body.pn-hdr-on .pn-hdr-btn[aria-current]::after{ content:""; position:absolute; left:42px; right:17px; bottom:8px; height:1.5px;
  border-radius:2px; background:var(--h-terra-text); }
body.pn-hdr-on .pn-hdr-sep{ width:1px; height:24px; background:var(--h-line); margin:0 6px; flex:none; }

/* 3 · WhatsApp: the approved PlotNua bubble and bronze outline */
body.pn-hdr-on .pn-hdr-wa{ padding:0 17px 0 6px; border-color:var(--h-bronze); }
body.pn-hdr-on .pn-hdr-wa-ico{ position:relative; display:block; width:32px; height:32px; flex:none; }
body.pn-hdr-on .pn-hdr-wa-ico svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
body.pn-hdr-on .pn-hdr-wa-ico img{ position:absolute; left:10.625%; top:6.25%; width:75%; height:75%; display:block; }

/* hover and focus: quiet, no movement */
body.pn-hdr-on :is(.pn-hdr-btn,.pn-hdr-wa):hover{ background:var(--h-raised-hi); border-color:rgba(242,235,224,.32); }
body.pn-hdr-on .pn-hdr-wa:hover{ border-color:var(--h-ivory); }
body.pn-hdr-on :is(.pn-hdr-btn,.pn-hdr-wa):focus-visible{ outline:2px solid var(--h-terra-text); outline-offset:3px; }

/* 4 · Search: the existing control, seated at the end of the bar */
body.pn-hdr-on .pn-hdr-search-slot{ width:120px; height:var(--h-btn); flex:none; }
html body.pn-hdr-on .pns-pill{ position:fixed; top:calc((var(--pn-hdr-h) - var(--h-btn)) / 2); right:var(--h-pad); z-index:61; opacity:1;
  height:var(--h-btn); width:120px; padding:0 14px 0 6px; gap:8px; border-radius:999px; justify-content:flex-start;
  background:var(--h-raised); color:var(--h-ivory); border:1px solid var(--h-edge); box-shadow:none; }
html body.pn-hdr-on .pns-pill::after{ display:none; }
html body.pn-hdr-on .pns-pill:hover{ background:var(--h-raised-hi); border-color:rgba(242,235,224,.32); box-shadow:none; }
html body.pn-hdr-on .pns-pill:focus-visible{ outline:2px solid var(--h-terra-text); outline-offset:3px; }
html body.pn-hdr-on .pns-pill-ico-wrap{ width:32px; height:32px; background:rgba(242,235,224,.08); }
html body.pn-hdr-on .pns-pill-ico{ width:14px; height:14px; color:var(--h-ivory); }
/* the visible word is "Search"; the link's accessible name stays "Search PlotNua" (its aria-label) */
html body.pn-hdr-on .pns-pill-label{ position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; clip-path:none; font-size:0; }
html body.pn-hdr-on .pns-pill-label::before{ content:"Search"; font-family:var(--h-sans); font-weight:600; font-size:14.5px; letter-spacing:.005em; }
html body.pn-hdr-on .pns-pill-cue{ display:none; }
html body.pn-hdr-on .pns-pill[data-pns-current="true"]{ border-color:rgba(207,133,102,.7); box-shadow:none; }

/* the homepage (i): seated beside the brand, its panel opens below the bar */
html body.pn-hdr-on .pn-hdr .brand-info.brand-info{ position:relative; top:auto; left:auto; right:auto; opacity:1; flex:none;
  margin:0 0 0 -2px; width:24px; height:24px; }
html body.pn-hdr-on .pn-hdr .brand-info.brand-info::after{ width:44px; height:44px; }
html body.pn-hdr-on .brand-info-pop.brand-info-pop{ top:calc(var(--pn-hdr-h) + 10px); left:var(--h-pad); }

/* the phone row: hidden above 720px */
body.pn-hdr-on .pn-hdr-dest{ display:none; }

/* 5 · anchors and sticky elements sit below the bar */
body.pn-hdr-on [id]{ scroll-margin-top:calc(var(--pn-hdr-h) + 16px); }
/* Premium sections: the in-page nav now sits below the bar, so a jump keeps the production
   gap beneath it (the page pins its own section margins by id, hence the weight) */
html body.pn-hdr-on.pn-pd .pd-section{ scroll-margin-top:calc(var(--pn-hdr-h) + 84px) !important; }
html body.pn-hdr-on.pn-pd .hfa-nav-wrap{ top:calc(var(--pn-hdr-h) + 12px); }
html body.pn-hdr-on.pn-pd .pd-sticky{ top:calc(var(--pn-hdr-h) + 36px); }
/* House as a Power Station: the full-height drawing stays whole beneath the bar */
html body.pn-hdr-on .lag-canvas{ top:var(--pn-hdr-h); height:calc(100vh - var(--pn-hdr-h)); }

/* ---------------------------------------------------------------- tablet */
@media (max-width:1080px){
  body.pn-hdr-on .pn-hdr-wa{ width:var(--h-btn); padding:0; justify-content:center; }
  body.pn-hdr-on .pn-hdr-wa .pn-hdr-lb{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  body.pn-hdr-on .pn-hdr-sep{ display:none; }
}
@media (max-width:880px){
  html body.pn-hdr-on .lag-canvas{ height:auto; }
}
@media (max-width:860px){
  body.pn-hdr-on .pn-hdr-btn{ padding:0 14px 0 11px; font-size:14px; }
  body.pn-hdr-on .pn-hdr-btn[aria-current]::after{ left:40px; right:14px; }
  body.pn-hdr-on .pn-hdr-word{ font-size:25px; }
}
/* ----------------------------------------------------------------- phone */
@media (max-width:720px){
  body.pn-hdr-on{ --pn-hdr-h:60px; --h-pad:14px; }
  body.pn-hdr-on .pn-hdr{ transition:transform .28s cubic-bezier(.4,0,.2,1); }
  body.pn-hdr-on .pn-hdr-nav{ display:none; }
  body.pn-hdr-on .pn-hdr-wa{ margin-left:auto; }
  body.pn-hdr-on .pn-hdr-tile{ width:34px; height:34px; }
  body.pn-hdr-on .pn-hdr-tile img{ width:26px; height:26px; }
  body.pn-hdr-on .pn-hdr-word{ font-size:24px; }
  body.pn-hdr-on .pn-hdr-search-slot{ width:106px; }
  html body.pn-hdr-on .pns-pill{ width:106px; padding:0 12px 0 5px; }
  /* the existing scroll tuck (search.js) now moves the whole bar, so nothing floats on its own */
  html.pns-nav-tuck body.pn-hdr-on .pn-hdr{ transform:translateY(-100%); }
  html.pns-nav-tuck body.pn-hdr-on .pns-pill{ opacity:0 !important; transform:translateY(-72px); pointer-events:none; }
  /* a keyboard focus inside the bar keeps it in view (search.js only knows the old controls) */
  html.pns-nav-tuck body.pn-hdr-on .pn-hdr:focus-within{ transform:none; }
  /* row 2: the two destinations, 44px targets, as compact as that allows */
  body.pn-hdr-on .pn-hdr-dest{ display:grid; grid-template-columns:auto auto auto; gap:6px; padding:6px 10px 8px;
    background:#1B1C1E; border-bottom:1px solid var(--h-line); }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-btn{ justify-content:center; padding:0 10px; font-size:14px; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-btn[aria-current]::after{ left:22%; right:22%; }
  /* phones: a jump up brings the bar back with the in-page nav beneath it, so the
     section lands below both (production's 66px plus the bar) */
  html body.pn-hdr-on.pn-pd .pd-section{ scroll-margin-top:calc(var(--pn-hdr-h) + 66px) !important; }
  body.pn-hdr-on.pn-pd .hfa-nav-wrap{ top:10px; }
  html:not(.pns-nav-tuck) body.pn-hdr-on.pn-pd .hfa-nav-wrap{ top:calc(var(--pn-hdr-h) + 8px); }
  html.pns-nav-tuck body.pn-hdr-on .lag-canvas{ top:0; }
}
@media (max-width:480px){
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-btn svg{ display:none; }
}
@media (max-width:374px){
  body.pn-hdr-on .pn-hdr-word{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-btn svg{ display:none; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-btn[aria-current]::after{ left:18%; right:18%; }
}
@media (prefers-reduced-motion:reduce){
  body.pn-hdr-on :is(.pn-hdr,.pn-hdr-btn,.pn-hdr-wa){ transition:none !important; }
  /* with reduced motion the bar simply stays: no tuck, and Search and (i) stay with it */
  html.pns-nav-tuck body.pn-hdr-on .pn-hdr{ transform:none; }
  html.pns-nav-tuck body.pn-hdr-on :is(.pns-pill,.brand-info){ opacity:1 !important; transform:none !important; pointer-events:auto !important; }
  html.pns-nav-tuck body.pn-hdr-on.pn-pd .hfa-nav-wrap{ top:calc(var(--pn-hdr-h) + 8px); }
  html.pns-nav-tuck body.pn-hdr-on .lag-canvas{ top:var(--pn-hdr-h); }
}

/* ===== Three destinations, three identities · Direction C, hybrid (founder approval 28 Oct 2026) =====
   Discovery Library: the primary PlotNua destination, solid PlotNua green with a compass.
   PlotArt: its own creative sub-brand, a softly rectangular terracotta frame in Instrument Serif.
   My Plot: a compact charcoal personal utility; a filled red heart and a count when saved. */
body.pn-hdr-on .pn-hdr-btn.is-primary{ background:#1F3B2E; border-color:#2F5442; color:#F2EBE0; font-weight:700;
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 22px -16px rgba(0,0,0,.8); }
body.pn-hdr-on .pn-hdr-btn.is-primary svg{ color:#B9D3C2; }
body.pn-hdr-on .pn-hdr-btn.is-primary:hover{ background:#264738; border-color:#3B6651; }
body.pn-hdr-on .pn-hdr-btn.is-primary[aria-current]{ border-color:#5C8C74; }
body.pn-hdr-on .pn-hdr-btn.is-primary[aria-current]::after{ background:#B9D3C2; }
body.pn-hdr-on .pn-hdr-btn.is-art{ border-radius:8px; font-family:var(--h-serif); font-weight:400; font-size:19px; letter-spacing:.01em; color:#F6DFD1;
  background:rgba(174,98,69,.20); border:1px solid #B4684A; }
body.pn-hdr-on .pn-hdr-btn.is-art svg{ color:#E9A383; }
body.pn-hdr-on .pn-hdr-btn .pn-hdr-art{ width:20px; height:20px; flex:none; display:block; border-radius:5px; box-shadow:0 0 0 1px rgba(242,235,224,.10); }   /* PlotArt logo (31 Oct 2026) */
body.pn-hdr-on .pn-hdr-btn.is-art:hover{ background:rgba(174,98,69,.32); border-color:#CF8566; }
/* My Plot, nothing saved: compact, subdued, an outline heart. It always opens My Plot. */
body.pn-hdr-on .pn-hdr-btn.is-myplot{ background:#1B1C1E; border-color:rgba(242,235,224,.10); color:rgba(242,235,224,.74);
  font-size:13px; font-weight:600; gap:6px; }
body.pn-hdr-on .pn-hdr-btn.is-myplot svg{ width:16px; height:16px; color:rgba(242,235,224,.55); }
body.pn-hdr-on .pn-hdr-btn.is-myplot:hover{ background:#232427; color:var(--h-ivory); }
/* My Plot, items saved: a filled red heart and the count */
body.pn-hdr-on .pn-hdr-btn.is-myplot.is-saved{ background:#211D1E; color:var(--h-ivory); border-color:rgba(227,93,82,.5); }
body.pn-hdr-on .pn-hdr-btn.is-myplot.is-saved svg{ color:#E35D52; }
body.pn-hdr-on .pn-hdr-btn.is-myplot.is-saved .pn-heart{ fill:#E35D52; }
body.pn-hdr-on .pn-hdr-count{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  margin-left:-2px; border-radius:999px; background:#C23B33; color:#fff; font-size:12px; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums; box-sizing:border-box; }
body.pn-hdr-on .pn-hdr-count[hidden]{ display:none; }
/* desktop and tablet: Discovery Library a little wider, My Plot a little tighter */
@media (min-width:721px){
  body.pn-hdr-on .pn-hdr-nav .pn-hdr-btn.is-primary{ padding:0 19px 0 14px; }
  body.pn-hdr-on .pn-hdr-nav .pn-hdr-btn.is-art{ padding:0 16px 0 12px; }
  body.pn-hdr-on .pn-hdr-nav .pn-hdr-btn.is-myplot{ padding:0 12px 0 11px; }
}
@media (max-width:720px){
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-btn.is-art{ font-size:18px; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-btn.is-myplot{ font-size:13px; }
}
@media (max-width:480px){
  /* phones keep the red heart when something is saved: it is the signal */
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-btn.is-myplot.is-saved svg{ display:block; width:16px; height:16px; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-btn{ gap:6px; }
  body.pn-hdr-on .pn-hdr-count{ min-width:18px; height:18px; font-size:11px; padding:0 5px; }
}
@media (max-width:374px){
  /* the smallest phones: the three pills and a count (up to "99+") fit on one line */
  body.pn-hdr-on .pn-hdr-dest{ gap:4px; padding:6px 8px 8px; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-btn{ padding:0 7px; gap:5px; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-btn.is-myplot.is-saved svg{ display:none; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-count{ min-width:16px; height:16px; font-size:10.5px; padding:0 4px; margin-left:0; }
}
/* ===== GridNua · the fourth destination (founder authorisation 29 Oct 2026) =====
   GridNua's own identity: weathered bronze, a fine grid glyph with a warm centre.
   Distinct from PlotArt's terracotta frame and the Library's green. */
body.pn-hdr-on .pn-hdr-btn.is-grid{ background:rgba(151,120,90,.16); border-color:#97785A; color:#EADBC6; font-weight:600; letter-spacing:.01em; }
body.pn-hdr-on .pn-hdr-btn.is-grid svg{ color:#C9AC8C; }
body.pn-hdr-on .pn-hdr-btn.is-grid .pn-grid-core{ color:#C47E4E; }
body.pn-hdr-on .pn-hdr-btn.is-grid:hover{ background:rgba(151,120,90,.28); border-color:#B39272; color:#F2EBE0; }
body.pn-hdr-on .pn-hdr-btn.is-grid[aria-current]::after{ background:#C9AC8C; }
@media (min-width:721px){
  body.pn-hdr-on .pn-hdr-nav .pn-hdr-btn.is-grid{ padding:0 15px 0 12px; }
}
/* four destinations: keep the bar on one line down to the phone breakpoint */
@media (max-width:1180px) and (min-width:721px){
  body.pn-hdr-on .pn-hdr-nav{ gap:6px; }
  body.pn-hdr-on .pn-hdr-nav .pn-hdr-btn.is-primary{ padding:0 14px 0 11px; }
  body.pn-hdr-on .pn-hdr-nav .pn-hdr-btn.is-art{ padding:0 12px 0 10px; font-size:17.5px; }
  body.pn-hdr-on .pn-hdr-nav .pn-hdr-btn.is-grid{ padding:0 12px 0 10px; }
}
@media (max-width:960px) and (min-width:721px){
  body.pn-hdr-on .pn-hdr-nav .pn-hdr-btn:not(.is-myplot) svg{ display:none; }
  body.pn-hdr-on .pn-hdr-nav .pn-hdr-btn{ padding:0 11px !important; font-size:13.5px; }
  body.pn-hdr-on .pn-hdr-nav .pn-hdr-btn.is-art{ font-size:16.5px; }
  body.pn-hdr-on .pn-hdr-nav .pn-hdr-btn[aria-current]::after{ left:11px; right:11px; }
}
/* phones: the four destinations in two rows of two, 44px targets */
@media (max-width:720px){
  body.pn-hdr-on .pn-hdr-dest{ grid-template-columns:1fr 1fr; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-btn{ min-width:0; }
}
@media (max-width:800px) and (min-width:721px){
  body.pn-hdr-on .pn-hdr-word{ font-size:22px; }
  body.pn-hdr-on .pn-hdr-nav{ gap:4px; }
  body.pn-hdr-on .pn-hdr-nav .pn-hdr-btn{ padding:0 9px !important; }
}

/* ===== PHONE MENU · one-row bar (founder approval 30 Oct 2026) =====================
   Below 721px the bar is a single row: PlotNua · Search · Menu. The Menu is a native
   <details> in the ROW block; its summary is seated in the bar (fixed, like Search) and
   its panel drops below the bar. The four destinations keep their identities; WhatsApp
   and Contact sit under "Talk to PlotNua". Without JavaScript the disclosure still opens
   and closes; assets/identity/pn-menu.js only adds Escape / outside-tap / scroll closing. */
body.pn-hdr-on .pn-hdr-menu > summary{ list-style:none; }
body.pn-hdr-on .pn-hdr-menu > summary::-webkit-details-marker{ display:none; }
@media (max-width:720px){
  body.pn-hdr-on{ --h-menu-w:92px; }
  body.pn-hdr-on .pn-hdr-in .pn-hdr-wa{ display:none; }
  html body.pn-hdr-on .pns-pill{ right:calc(var(--h-pad) + var(--h-menu-w) + 8px); width:104px; }
  body.pn-hdr-on .pn-hdr-search-slot{ width:calc(104px + var(--h-menu-w) + 8px); }
  body.pn-hdr-on .pn-hdr-dest{ display:block; padding:0; margin:0; background:none; border:0; height:0; }
  body.pn-hdr-on .pn-hdr-menu-btn{ position:fixed; z-index:62; top:calc((var(--pn-hdr-h) - var(--h-btn)) / 2); right:var(--h-pad);
    display:inline-flex; align-items:center; justify-content:center; gap:8px; width:var(--h-menu-w); height:var(--h-btn); box-sizing:border-box;
    padding:0 14px 0 12px; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent;
    font-family:var(--h-sans); font-weight:600; font-size:14.5px; letter-spacing:.005em; color:var(--h-ivory);
    background:var(--h-raised); border:1px solid var(--h-edge);
    transition:background .2s ease, border-color .2s ease, opacity .2s ease, transform .28s cubic-bezier(.4,0,.2,1); }
  body.pn-hdr-on .pn-hdr-menu-btn:hover{ background:var(--h-raised-hi); border-color:rgba(242,235,224,.32); }
  body.pn-hdr-on .pn-hdr-menu-btn:focus-visible{ outline:2px solid var(--h-terra-text); outline-offset:3px; }
  body.pn-hdr-on .pn-hdr-menu-btn svg{ width:18px; height:18px; flex:none; overflow:visible; }
  body.pn-hdr-on .pn-hdr-menu-btn svg path{ transform-origin:10px 10px; transition:transform .22s ease, opacity .18s ease; }
  body.pn-hdr-on .pn-hdr-menu[open] .pn-hdr-menu-btn{ background:var(--h-ivory); color:#1B1C1E; border-color:var(--h-ivory); }
  body.pn-hdr-on .pn-hdr-menu[open] .pn-menu-l1{ transform:rotate(45deg) translateY(4px); }
  body.pn-hdr-on .pn-hdr-menu[open] .pn-menu-l2{ opacity:0; }
  body.pn-hdr-on .pn-hdr-menu[open] .pn-menu-l3{ transform:rotate(-45deg) translateY(-4px); }
  /* the scroll tuck takes Menu with the bar; an open Menu keeps the bar in view */
  html.pns-nav-tuck body.pn-hdr-on .pn-hdr-menu-btn{ opacity:0; transform:translateY(-72px); pointer-events:none; }
  html.pn-menu-open.pns-nav-tuck body.pn-hdr-on .pn-hdr{ transform:none; }
  html.pn-menu-open.pns-nav-tuck body.pn-hdr-on :is(.pn-hdr-menu-btn,.pns-pill){ opacity:1 !important; transform:none; pointer-events:auto; }
  /* the panel */
  body.pn-hdr-on .pn-hdr-panel{ position:fixed; z-index:59; top:var(--pn-hdr-h); left:0; right:0; box-sizing:border-box;
    max-height:calc(100svh - var(--pn-hdr-h)); overflow:auto; overscroll-behavior:contain;
    display:grid; grid-template-columns:1fr; gap:8px; padding:14px var(--h-pad) 18px;
    background:rgba(27,28,30,.985); border-bottom:1px solid var(--h-line);
    box-shadow:0 24px 48px -12px rgba(0,0,0,.6); }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-panel .pn-hdr-btn{ width:100%; height:52px; justify-content:flex-start; gap:12px;
    padding:0 18px !important; font-size:16px; border-radius:14px; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-panel .pn-hdr-btn svg{ display:block; width:20px; height:20px; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-panel .pn-hdr-btn.is-art{ font-size:21px; border-radius:10px; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-panel .pn-hdr-btn.is-myplot{ font-size:15px; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-panel .pn-hdr-btn.is-myplot.is-saved svg{ display:block; width:20px; height:20px; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-panel .pn-hdr-btn[aria-current]::after{ left:50px; right:auto; width:28px; bottom:9px; }
  body.pn-hdr-on .pn-hdr-dest .pn-hdr-panel .pn-hdr-count{ margin-left:auto; min-width:22px; height:22px; font-size:12px; }
  body.pn-hdr-on .pn-hdr-panel-k{ margin:10px 4px 0; font-family:var(--h-sans); font-weight:700; font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--h-stone); }
  body.pn-hdr-on .pn-hdr-panel-contact{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  body.pn-hdr-on .pn-hdr-pl{ display:flex; align-items:center; justify-content:center; gap:9px; height:48px; border-radius:999px;
    text-decoration:none; font-family:var(--h-sans); font-weight:600; font-size:15px; color:var(--h-ivory);
    border:1px solid var(--h-edge); background:transparent; }
  body.pn-hdr-on .pn-hdr-pl svg{ width:18px; height:18px; color:var(--h-stone); }
  body.pn-hdr-on .pn-hdr-pl--wa{ border-color:var(--h-bronze); padding-left:6px; }
  body.pn-hdr-on .pn-hdr-pl--wa .pn-hdr-wa-ico{ width:30px; height:30px; }
  body.pn-hdr-on .pn-hdr-pl[aria-current]{ border-color:rgba(207,133,102,.7); }
  body.pn-hdr-on .pn-hdr-pl:hover{ background:var(--h-raised-hi); }
  body.pn-hdr-on .pn-hdr-pl:focus-visible{ outline:2px solid var(--h-terra-text); outline-offset:3px; }
}
@media (max-width:374px){
  body.pn-hdr-on{ --h-menu-w:84px; }
  html body.pn-hdr-on .pns-pill{ width:96px; }
}
@media (prefers-reduced-motion:reduce){
  body.pn-hdr-on :is(.pn-hdr-menu-btn,.pn-hdr-menu-btn svg path){ transition:none !important; }
}