/* ============================================================
   nav-mega.css  —  Zodianimal.com card-free glyph mega-nav
   ------------------------------------------------------------
   Phase 3. The bar hosts seven typographic groups. Each group's
   panel is a single wide almanac sheet that drops under the bar:
   no cards, no boxes, no shadows on rows. Hierarchy comes only
   from the type scale (serif name over muted sub-label) and the
   brass hairlines (--line). Each row is anchored by an inline SVG
   glyph that inherits currentColor and the row's hover state.

   Markup contract (pre-rendered by build/apply-nav.mjs, Agent A):
     header.pn-bar > .pn-inner > nav.pn-nav
       .pn-item > button.pn-trigger[data-group][aria-haspopup][aria-expanded]
       .pn-tools > .pn-orb[data-orb]           (hidden; Phase 5 fills it)
       .pn-tools > a.pn-id[data-id-chip] + .pn-moonwrap + a.pn-ring[data-ring-slot]
                 + button.pn-theme + a.pn-cta  (right cluster; nav-core.css.
                 NOTE: the bar chips do NOT use .pn-chip — that class is
                 the 32px round PANEL wing-strip chip below, glyph only)
     .pn-panel[data-group][data-accent] hidden
       .pn-panel-eyebrow
       .pn-cols > .pn-col > (.pn-col-title)
         a.pn-row > span.pn-glyph>svg + span.pn-row-name + span.pn-row-sub
       .pn-panel-foot
     nav.pn-crawl  (hidden flat mirror, no-JS routing fallback)

   Panels are shown by nav.js via a `.open` class (hidden removed).
   All tokens come from tokens.css; no hard-coded hex here. Copy in
   ::before/::after content never uses arrows or dashes.
   ============================================================ */

/* ------------------------------------------------------------
   1. Trigger bar (7 groups). Serif-adjacent, quiet chrome that
   recedes. Reuses .pn-trigger geometry from nav-core.css; here
   we only refine the open state, focus ring, and touch target.
   ------------------------------------------------------------ */
.pn-item { position: relative; }

.pn-trigger {
  min-height: 44px;                 /* touch target */
  color: var(--muted);
  /* geometry (headlight ::before bloom, drawing underline, 1px lift) is
     inherited from nav-core.css; keep this transition list in sync so the
     hover ACCENTUATES (brighten + glow + lift), never sits in a flat box. */
  transition: color var(--dur-fast) var(--ease-io),
              transform var(--dur-fast) var(--ease-io);
}
/* brighten toward moon + a soft accent halo; the lift + bloom come from
   nav-core. No flat wash box (that would read as "dim box on hover"). */
.pn-trigger:hover,
.pn-trigger:focus-visible {
  color: var(--moon);
  background: transparent;
  text-shadow: 0 0 10px var(--accent-soft);
}

/* the open group takes the domain accent so the bar echoes the panel */
.pn-trigger[aria-expanded="true"] {
  color: var(--accent-bright);
  background: transparent;
  text-shadow: 0 0 12px var(--accent-soft);
}
.pn-trigger[aria-expanded="true"] .chev { transform: rotate(-135deg) translateY(1px); }

/* visible keyboard focus, brass-bright, never removed */
.pn-trigger:focus-visible,
.pn-row:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* legacy dropdown mount left in the shell by the build; keep it inert */
.pn-dd { display: none; }
/* the accent of the trigger follows its own group so the bar hint matches */
.pn-item[data-accent="jade"]     .pn-trigger { --accent: var(--jade);     --accent-bright: var(--jade-bright); }
.pn-item[data-accent="silver"]   .pn-trigger { --accent: var(--silver);   --accent-bright: var(--silver-bright); }
.pn-item[data-accent="amethyst"] .pn-trigger { --accent: var(--amethyst); --accent-bright: var(--amethyst-bright); }
.pn-item[data-accent="rose"]     .pn-trigger { --accent: var(--rose);     --accent-bright: var(--rose-bright); }
.pn-item[data-accent="teal"]     .pn-trigger { --accent: var(--teal);     --accent-bright: var(--teal-bright); }
.pn-item[data-accent="brass"]    .pn-trigger { --accent: var(--brass);    --accent-bright: var(--brass-bright); }

/* ------------------------------------------------------------
   2. The panel drop surface. One wide typographic sheet anchored
   to the bar, spanning the viewport. --panel background, a single
   hairline at the top for separation from the bar. No border, no
   radius, no card. It fades and rises on open (motion gated below).
   ------------------------------------------------------------ */
.pn-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 119;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 22px 22px;     /* canvas drop-sheet corners */
  box-shadow: var(--e-2);           /* soft drop under the sheet, not on rows */
  padding: var(--s-5) 0 var(--s-6);
}
/* hidden until hydrated; nav.js removes [hidden] and adds .open */
.pn-panel[hidden] { display: none; }

/* the panel's direct children are the content rail; center them to the
   bar's measure and pad the gutters. The panel itself stays full-bleed. */
.pn-panel > .pn-panel-eyebrow,
.pn-panel > .pn-cols,
.pn-panel > .pn-panel-foot {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  box-sizing: border-box;
}

/* the eyebrow: uppercase kicker in the domain accent, doc 01 voice */
.pn-panel-eyebrow {
  font: 600 var(--fs-eyebrow, .72rem)/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--accent);
  margin: 0 0 var(--s-5);
  max-width: 52ch;
}

/* ------------------------------------------------------------
   3. Columns. Responsive multi-column layout. Hairlines between
   columns carry the structure (never boxes). .pn-cols-2 / -3 are
   optional density hints; the base is auto-fit so it always fits.
   ------------------------------------------------------------ */
.pn-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 var(--s-6);
}
.pn-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pn-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pn-col { min-width: 0; }
/* hairline rule between columns from the second column onward */
.pn-col + .pn-col { border-left: 1px solid var(--line-soft); padding-left: var(--s-6); }

/* canvas column titles: mono uppercase in the seasonal second hue,
   led by a small glyph marker (✦ ◆ ❦ ☾ ⌂) */
.pn-col-title {
  font: 400 .7rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--season, var(--muted));
  margin: 0 0 var(--s-3);
}
.pn-col-mark { margin-right: 2px; }

/* ------------------------------------------------------------
   4. Rows. The heart of the card-free design: a fixed glyph box +
   serif name + muted sub-label. Separation is a hairline between
   rows and a soft accent wash on hover, nothing more.
   ------------------------------------------------------------ */
.pn-row {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: var(--s-3);
  min-height: 44px;                 /* touch target */
  padding: var(--s-2) var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  border-radius: var(--r-1);
  text-decoration: none;
  color: var(--ivory);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur-fast) var(--ease-io),
              color var(--dur-fast) var(--ease-io),
              box-shadow var(--dur-fast) var(--ease-io),
              transform var(--dur-fast) var(--ease-io);
}
.pn-row:last-child { border-bottom: 0; }

/* hovered rows IGNITE (pick me): brighten to moon, warm wash, an accent
   inset glow + a soft outer bloom, and the canvas nudge. Never a dim box. */
.pn-row:hover,
.pn-row:focus-visible {
  background: var(--accent-soft);
  color: var(--moon);
  transform: translateX(3px);       /* canvas row nudge */
  box-shadow:
    inset 0 0 0 1px var(--accent-soft),
    0 0 18px -6px var(--accent-soft);
}
.pn-row:hover .pn-row-name,
.pn-row:focus-visible .pn-row-name { color: var(--moon); }
.pn-row:hover .pn-row-sub,
.pn-row:focus-visible .pn-row-sub { color: var(--ivory); }
/* current page marker: accent name + italic, so meaning is not color-only */
.pn-row.active,
.pn-row[aria-current="page"] { color: var(--moon); }
.pn-row.active .pn-row-name,
.pn-row[aria-current="page"] .pn-row-name { color: var(--accent-bright); font-style: italic; }
.pn-row.active .pn-glyph,
.pn-row[aria-current="page"] .pn-glyph { color: var(--accent-bright); }

/* the glyph box: fixed size, spans both rows, inherits currentColor */
.pn-glyph {
  grid-row: 1 / 3;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  color: var(--accent);
  flex: 0 0 auto;
  transition: color var(--dur-fast) var(--ease-io);
}
.pn-glyph svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; }
.pn-glyph svg [fill]:not([fill="none"]) { fill: currentColor; }
.pn-row:hover .pn-glyph { color: var(--accent-bright); }

.pn-row-name {
  grid-column: 2;
  font: 500 1.02rem/1.3 var(--serif);   /* canvas scale: quiet serif rows */
  color: inherit;
}
.pn-row-sub {
  grid-column: 2;
  font: 400 .7rem/1.3 var(--sans);
  letter-spacing: .06em;
  color: var(--muted);
  margin-top: 2px;
}

/* ------------------------------------------------------------
   4b. Chip strip. Round glyph chips under the columns (the canvas
   "wing" strips: ♈…♓ on Western Signs, 鼠…猪 on Chinese Years).
   Same centered measure as the other panel children.
   ------------------------------------------------------------ */
.pn-chips {
  max-width: var(--maxw);
  margin: var(--s-5) auto 0;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pn-chips-label {
  font: 400 .64rem/1.2 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-right: 2px;
}
.pn-chip {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  color: var(--accent);
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-io),
              background var(--dur-fast) var(--ease-io),
              color var(--dur-fast) var(--ease-io),
              box-shadow var(--dur-fast) var(--ease-io),
              transform var(--dur-fast) var(--ease-io);
}
/* chip ignites: brass rim, accent core, a lift, and a soft bloom */
.pn-chip:hover,
.pn-chip:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-bright);
  transform: translateY(-2px);
  box-shadow: 0 0 16px -2px var(--accent-soft);
}
.pn-chip:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
  border-radius: 50%;
}
/* two stacked wing strips (Explore): tighten the gap between them */
.pn-chips + .pn-chips { margin-top: var(--s-3); }
/* the Eastern strip chips glow brass; the Western strip stays seasonal */
.pn-chips .pn-chip { color: var(--season, var(--accent)); }
.pn-chips + .pn-chips .pn-chip { color: var(--accent); }

/* ------------------------------------------------------------
   4c. Canvas layouts. `layout` in PNAV.MAP is only ever a class:
   pn-panel-explore  the five-column catalog + wing strips
   pn-panel-wings    Menagerie: two 2-up wing columns + begin col
   pn-panel-cards    Bonds: rows rendered as description cards
   pn-panel-moon     Tonight column + the eight phases grid
   ------------------------------------------------------------ */

/* Explore: five tight columns, no glyph boxes, no column hairlines */
.pn-panel-explore .pn-cols {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4) clamp(16px, 2.5vw, 32px);
}
.pn-panel-explore .pn-col + .pn-col { border-left: 0; padding-left: 0; }
.pn-panel-explore .pn-glyph { display: none; }
.pn-panel-explore .pn-row {
  grid-template-columns: 1fr;
  min-height: 40px;
  padding-block: 6px;
}
.pn-panel-explore .pn-row-name,
.pn-panel-explore .pn-row-sub { grid-column: 1; }
.pn-panel-explore .pn-row-name { font-size: .95rem; }

/* Menagerie wings: both wings run 2-up inside their column; the
   date/year sub-labels stay in the DOM (crawl + drawer) but hide
   here so the sheet stays shallow, per the canvas */
.pn-panel-wings .pn-cols { grid-template-columns: 1.2fr 1.2fr 1fr; gap: clamp(20px, 3vw, 44px); }
.pn-panel-wings .pn-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-4);
  align-content: start;
}
.pn-panel-wings .pn-col-title { grid-column: 1 / -1; }
.pn-panel-wings .pn-col:last-child { grid-template-columns: 1fr; }
.pn-panel-wings .pn-col:last-child .pn-row-sub { display: block; }
.pn-panel-wings .pn-row { border-bottom: 0; min-height: 40px; padding-block: 5px; }
.pn-panel-wings .pn-row-sub { display: none; }
.pn-panel-wings .pn-row-name { font-size: .92rem; }
@media (max-width: 1120px) {
  .pn-panel-wings .pn-cols { grid-template-columns: 1fr 1fr; }
  .pn-panel-wings .pn-col:last-child { grid-column: 1 / -1; }
}

/* Bonds: each row is a canvas description card */
.pn-panel-cards .pn-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.pn-panel-cards .pn-glyph { display: none; }
.pn-panel-cards .pn-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-inline: 0;
  padding: 16px 18px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2);
  transition: border-color var(--dur-fast) var(--ease-io),
              transform var(--dur-fast) var(--ease-io),
              box-shadow var(--dur-fast) var(--ease-io);
}
/* card hover ignites: brass border, a lift, and an accent bloom (not a
   flat darker box). Title glows toward moon, body brightens. */
.pn-panel-cards .pn-row:hover,
.pn-panel-cards .pn-row:focus-visible {
  background: var(--panel-2);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow:
    0 8px 22px -4px var(--accent-soft),
    inset 0 0 0 1px var(--accent-soft);
}
.pn-panel-cards .pn-row:hover .pn-row-name,
.pn-panel-cards .pn-row:focus-visible .pn-row-name {
  color: var(--moon);
  text-shadow: 0 0 12px var(--accent-soft);
}
.pn-panel-cards .pn-row:hover .pn-row-sub,
.pn-panel-cards .pn-row:focus-visible .pn-row-sub { color: var(--ivory); }
.pn-panel-cards .pn-row-name { font: 600 1.05rem/1.3 var(--serif); color: var(--moon); }
.pn-panel-cards .pn-row-sub {
  font: 400 .82rem/1.5 var(--sans);
  letter-spacing: 0;
  color: var(--body-text);
  text-transform: none;
}

/* Moon: the Tonight column beside the eight-phase grid */
.pn-panel-moon .pn-cols {
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
}
.pn-panel-moon .pn-col:last-child {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  column-gap: var(--s-3);
  align-content: start;
}
.pn-panel-moon .pn-col:last-child .pn-col-title { grid-column: 1 / -1; }
.pn-panel-moon .pn-col:last-child .pn-row { border-bottom: 0; min-height: 40px; padding-block: 5px; }
.pn-panel-moon .pn-row-name { font-size: .95rem; }
@media (max-width: 1000px) {
  .pn-panel-moon .pn-cols { grid-template-columns: 1fr; }
  .pn-panel-moon .pn-col + .pn-col { border-left: 0; padding-left: 0; }
}

/* the moon LIGHTS UP on the hovered phase: only the hovered/focused row's
   disc brightens, blooms silver, and scales a hair — so running down the
   eight phases feels like each moon igniting under the cursor. The rest
   rest quietly. drop-shadow (filter) + transform only; 60fps. */
.pn-panel-moon .pn-glyph {
  transition: color var(--dur-fast) var(--ease-io),
              filter var(--dur-fast) var(--ease-io),
              transform var(--dur-fast) var(--ease-io);
}
.pn-panel-moon .pn-row:hover .pn-glyph,
.pn-panel-moon .pn-row:focus-visible .pn-glyph {
  color: var(--silver-bright, #d6e2f5);
  transform: scale(1.12);
  filter:
    drop-shadow(0 0 6px oklch(0.92 0.05 250 / .85))
    drop-shadow(0 0 12px oklch(0.80 0.06 250 / .5));
}
@supports not (color: oklch(from white l c h)) {
  .pn-panel-moon .pn-row:hover .pn-glyph,
  .pn-panel-moon .pn-row:focus-visible .pn-glyph {
    filter:
      drop-shadow(0 0 6px var(--silver-bright, #d6e2f5))
      drop-shadow(0 0 12px var(--silver, #aebfe0));
  }
}

/* ------------------------------------------------------------
   5. Panel foot. The canvas closing link: small, bold, accent,
   pushed to the right end of its hairline row.
   ------------------------------------------------------------ */
.pn-panel-foot {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: flex-end;
}
.pn-panel-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 600 .85rem/1.2 var(--sans);
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-io),
              transform var(--dur-fast) var(--ease-io),
              text-shadow var(--dur-fast) var(--ease-io);
}
/* ignite: brighten + a warm glow + a small forward nudge */
.pn-panel-foot a:hover,
.pn-panel-foot a:focus-visible {
  color: var(--accent-bright);
  transform: translateX(2px);
  text-shadow: 0 0 12px var(--accent-soft);
}
.pn-panel-foot a:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* ------------------------------------------------------------
   6. Per-element accent scoping. Each panel glows its own domain
   hue by re-pointing --accent (and its ramp) from the matched
   tokens. --accent-soft re-derives from the new --accent in OKLCH
   browsers automatically. Six ramps.
   ------------------------------------------------------------ */
.pn-panel[data-accent="jade"]     { --accent: var(--jade);     --accent-bright: var(--jade-bright);     --accent-dim: var(--jade-dim); }
.pn-panel[data-accent="silver"]   { --accent: var(--silver);   --accent-bright: var(--silver-bright);   --accent-dim: var(--silver-dim); }
.pn-panel[data-accent="amethyst"] { --accent: var(--amethyst); --accent-bright: var(--amethyst-bright); --accent-dim: var(--amethyst-dim); }
.pn-panel[data-accent="rose"]     { --accent: var(--rose);     --accent-bright: var(--rose-bright);     --accent-dim: var(--rose-dim); }
.pn-panel[data-accent="teal"]     { --accent: var(--teal);     --accent-bright: var(--teal-bright);     --accent-dim: var(--teal-dim); }
.pn-panel[data-accent="brass"]    { --accent: var(--brass);    --accent-bright: var(--brass-bright);    --accent-dim: var(--brass-dim); }

/* ------------------------------------------------------------
   7. The nav orb slot (Phase 5 fills it). Kept out of the flow
   until then so the bar reads clean.
   ------------------------------------------------------------ */
.pn-orb[data-orb] { display: none; }

/* ------------------------------------------------------------
   8. The crawlable flat mirror stays visually hidden. It is the
   no-JS routing fallback: real anchors, off-screen but in the DOM.
   ------------------------------------------------------------ */
.pn-crawl {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.pn-crawl[hidden] { display: none; }

/* ------------------------------------------------------------
   9. Motion. Fade up 6px on open, 160ms ease-out (doc 03 sec 6).
   Only inside no-preference; reduced motion gets an instant,
   opacity-only appearance with no transform.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .pn-panel.open {
    animation: pnPanelIn 160ms var(--ease-out) both;
  }
  @keyframes pnPanelIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .pn-panel,
  .pn-trigger,
  .pn-row,
  .pn-glyph,
  .pn-chip,
  .pn-panel-foot,
  .pn-panel-foot a { transition: none; animation: none; }
  /* transforms off; color/glow on :hover still land (brightening kept) */
  .pn-chip:hover,
  .pn-chip:focus-visible { transform: none; }
  .pn-row:hover,
  .pn-row:focus-visible,
  .pn-panel-cards .pn-row:hover,
  .pn-panel-cards .pn-row:focus-visible { transform: none; }
  .pn-panel-foot a:hover,
  .pn-panel-foot a:focus-visible { transform: none; }
  /* the moon disc still brightens/blooms; drop only the scale */
  .pn-panel-moon .pn-row:hover .pn-glyph,
  .pn-panel-moon .pn-row:focus-visible .pn-glyph { transform: none; }
}

/* ------------------------------------------------------------
   11. Astral Weld extensions — the Zodiac / Horoscope split (sign
   list beside a feature aside), Chinese calligraphy glyphs, the
   featured row + tag, the feature aside itself, and the Sage Wisdom
   free e-book card. Ported from concept-1-astral-weld.html, adapted
   to the real grid-based .pn-row. Tokens only.
   ------------------------------------------------------------ */

/* the two-up split: a sign/animal list beside the feature aside */
.pn-panel-east > .pn-split,
.pn-panel-west > .pn-split {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 980px) {
  .pn-panel-east > .pn-split,
  .pn-panel-west > .pn-split { grid-template-columns: 1fr; }
}
/* the list runs two columns of rows */
.pn-split .pn-list { display: flex; flex-direction: column; min-width: 0; }
.pn-split .pn-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--s-5);
}
@media (max-width: 620px) { .pn-split .pn-two { grid-template-columns: 1fr; } }
.pn-split .pn-row { border-bottom: 1px solid var(--line-soft); }

/* the Chinese calligraphy character, rendered large in the glyph box */
.pn-glyph.pn-cal {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
}
.pn-row:hover .pn-glyph.pn-cal,
.pn-row:focus-visible .pn-glyph.pn-cal { color: var(--accent-bright); }

/* the featured row (the Fire Horse, today's Western sign). Rows that
   carry a .pn-tag switch from the base grid to a flex line so the
   glyph, name, and end-pinned tag sit cleanly on one baseline. */
.pn-row.is-featured {
  border: 1px solid var(--accent-dim);
  background: var(--accent-soft);
  border-radius: var(--r-1);
}
.pn-row.is-featured .pn-row-name { color: var(--moon); }
.pn-split .pn-row:has(.pn-tag) {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.pn-split .pn-row:has(.pn-tag) .pn-glyph { align-self: center; }
/* the featured tag pill (2026 · Fire Horse) sits at the row's end */
.pn-tag {
  margin-left: auto;
  align-self: center;
  font: 400 .5rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-bright);
  border: 1px solid var(--accent-dim);
  padding: 2px 6px;
  border-radius: var(--r-pill, 999px);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* the FEATURE aside (right side of the split). A watermark calligraphy
   glyph sits behind the copy. Accentuates via the panel's --accent. */
.pn-feature {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-2);
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: linear-gradient(150deg, var(--accent-soft), var(--panel));
}
.pn-feature-cal {
  position: absolute;
  right: -6px;
  bottom: -30px;
  z-index: 0;
  pointer-events: none;
  font-family: var(--serif);
  font-size: 120px;
  line-height: 1;
  color: var(--accent-soft);
  user-select: none;
}
.pn-feature > * { position: relative; z-index: 1; }
.pn-feature-eyebrow {
  margin: 0 0 var(--s-2);
  font: 400 .6rem/1.3 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-dim);
}
.pn-feature-title {
  margin: 0 0 var(--s-3);
  font: 560 1.4rem/1.1 var(--serif);
  color: var(--moon);
}
.pn-feature-body {
  margin: 0 0 var(--s-4);
  font: 400 .86rem/1.6 var(--sans);
  color: var(--body-text);
}
.pn-feature-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 600 .82rem/1.2 var(--sans);
  color: var(--accent-bright);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-io),
              transform var(--dur-fast) var(--ease-io),
              text-shadow var(--dur-fast) var(--ease-io);
}
/* ignite: brighten to moon + a warm glow + a small forward nudge */
.pn-feature-link:hover,
.pn-feature-link:focus-visible {
  color: var(--moon);
  transform: translateX(2px);
  text-shadow: 0 0 12px var(--accent-soft);
}
.pn-feature-link:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* the calligraphic panel chip (Chinese character): serif, accent-tinted */
.pn-chip.pn-cal { font-family: var(--serif); font-size: 1.05rem; }

/* Sage Wisdom: text columns; the e-book card sits below in its own
   hairline strip. Base .pn-cols handles the columns. The Stones, Feng
   shui and Proverb Pond columns run glyph-free; the twelve pond rows
   (Section 11b) opt their glyph box back in to carry a colored dot. */
.pn-panel-sage .pn-glyph { display: none; }
.pn-panel-sage .pn-col + .pn-col { border-left: 0; padding-left: 0; }
.pn-panel-sage .pn-cols { gap: var(--s-4) clamp(16px, 2.5vw, 40px); }

/* ------------------------------------------------------------
   11b. The twelve proverb ponds in the Sage panel. Each pond row
   shows a small dot in ITS OWN pond accent (POND_ACCENT, mirrored
   from build/proverb-nav.mjs), so the dropdown reads as a colored,
   organized menu rather than a flat list. The dot lives in the row's
   otherwise-empty .pn-glyph box; we re-show that box (Sage hides it by
   default) and paint the disc via ::before so no markup change is
   needed. Hover keeps the pond's own hue, not the panel accent.
   ------------------------------------------------------------ */
.pn-panel-sage .pn-row.pond .pn-glyph,
.pn-panel-sage .pn-row[href="/proverbs/the-way-of-water/"] .pn-glyph,
.pn-panel-sage .pn-row[href="/proverbs/timing-and-fortune/"] .pn-glyph,
.pn-panel-sage .pn-row[href="/proverbs/perseverance/"] .pn-glyph,
.pn-panel-sage .pn-row[href="/proverbs/courage/"] .pn-glyph,
.pn-panel-sage .pn-row[href="/proverbs/home-and-family/"] .pn-glyph,
.pn-panel-sage .pn-row[href="/proverbs/wisdom-and-learning/"] .pn-glyph,
.pn-panel-sage .pn-row[href="/proverbs/harmony-and-virtue/"] .pn-glyph,
.pn-panel-sage .pn-row[href="/proverbs/wealth-and-work/"] .pn-glyph,
.pn-panel-sage .pn-row[href="/proverbs/friendship-and-trust/"] .pn-glyph,
.pn-panel-sage .pn-row[href="/proverbs/humility-and-self-mastery/"] .pn-glyph,
.pn-panel-sage .pn-row[href="/proverbs/adversity-and-resilience/"] .pn-glyph,
.pn-panel-sage .pn-row[href="/proverbs/nature-and-seasons/"] .pn-glyph {
  display: inline-flex;
  position: relative;
  color: inherit;                 /* the dot owns its color, not --accent */
}
.pn-panel-sage .pn-row[href="/proverbs/the-way-of-water/"] .pn-glyph::before,
.pn-panel-sage .pn-row[href="/proverbs/timing-and-fortune/"] .pn-glyph::before,
.pn-panel-sage .pn-row[href="/proverbs/perseverance/"] .pn-glyph::before,
.pn-panel-sage .pn-row[href="/proverbs/courage/"] .pn-glyph::before,
.pn-panel-sage .pn-row[href="/proverbs/home-and-family/"] .pn-glyph::before,
.pn-panel-sage .pn-row[href="/proverbs/wisdom-and-learning/"] .pn-glyph::before,
.pn-panel-sage .pn-row[href="/proverbs/harmony-and-virtue/"] .pn-glyph::before,
.pn-panel-sage .pn-row[href="/proverbs/wealth-and-work/"] .pn-glyph::before,
.pn-panel-sage .pn-row[href="/proverbs/friendship-and-trust/"] .pn-glyph::before,
.pn-panel-sage .pn-row[href="/proverbs/humility-and-self-mastery/"] .pn-glyph::before,
.pn-panel-sage .pn-row[href="/proverbs/adversity-and-resilience/"] .pn-glyph::before,
.pn-panel-sage .pn-row[href="/proverbs/nature-and-seasons/"] .pn-glyph::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pond, #d6c18c);
  box-shadow: 0 0 8px color-mix(in srgb, var(--pond, #d6c18c) 55%, transparent);
}
/* engines without color-mix() still get a readable glow */
@supports not (color: color-mix(in srgb, red, blue)) {
  .pn-panel-sage .pn-row[href="/proverbs/the-way-of-water/"] .pn-glyph::before,
  .pn-panel-sage .pn-row[href="/proverbs/timing-and-fortune/"] .pn-glyph::before,
  .pn-panel-sage .pn-row[href="/proverbs/perseverance/"] .pn-glyph::before,
  .pn-panel-sage .pn-row[href="/proverbs/courage/"] .pn-glyph::before,
  .pn-panel-sage .pn-row[href="/proverbs/home-and-family/"] .pn-glyph::before,
  .pn-panel-sage .pn-row[href="/proverbs/wisdom-and-learning/"] .pn-glyph::before,
  .pn-panel-sage .pn-row[href="/proverbs/harmony-and-virtue/"] .pn-glyph::before,
  .pn-panel-sage .pn-row[href="/proverbs/wealth-and-work/"] .pn-glyph::before,
  .pn-panel-sage .pn-row[href="/proverbs/friendship-and-trust/"] .pn-glyph::before,
  .pn-panel-sage .pn-row[href="/proverbs/humility-and-self-mastery/"] .pn-glyph::before,
  .pn-panel-sage .pn-row[href="/proverbs/adversity-and-resilience/"] .pn-glyph::before,
  .pn-panel-sage .pn-row[href="/proverbs/nature-and-seasons/"] .pn-glyph::before {
    box-shadow: 0 0 8px var(--pond, #d6c18c);
  }
}
/* the twelve pond accents (slug -> hex), one --pond per href */
.pn-panel-sage .pn-row[href="/proverbs/the-way-of-water/"]          .pn-glyph { --pond: #2FB8C6; }
.pn-panel-sage .pn-row[href="/proverbs/timing-and-fortune/"]        .pn-glyph { --pond: #9B7BD8; }
.pn-panel-sage .pn-row[href="/proverbs/perseverance/"]              .pn-glyph { --pond: #D19A4E; }
.pn-panel-sage .pn-row[href="/proverbs/courage/"]                   .pn-glyph { --pond: #D9534F; }
.pn-panel-sage .pn-row[href="/proverbs/home-and-family/"]           .pn-glyph { --pond: #5FBF8F; }
.pn-panel-sage .pn-row[href="/proverbs/wisdom-and-learning/"]       .pn-glyph { --pond: #6C7BD6; }
.pn-panel-sage .pn-row[href="/proverbs/harmony-and-virtue/"]        .pn-glyph { --pond: #E0C471; }
.pn-panel-sage .pn-row[href="/proverbs/wealth-and-work/"]           .pn-glyph { --pond: #E8B53A; }
.pn-panel-sage .pn-row[href="/proverbs/friendship-and-trust/"]      .pn-glyph { --pond: #E08AA0; }
.pn-panel-sage .pn-row[href="/proverbs/humility-and-self-mastery/"] .pn-glyph { --pond: #8FA3BF; }
.pn-panel-sage .pn-row[href="/proverbs/adversity-and-resilience/"]  .pn-glyph { --pond: #4F9E77; }
.pn-panel-sage .pn-row[href="/proverbs/nature-and-seasons/"]        .pn-glyph { --pond: #93B06A; }

/* the free e-book CTA card, in its own strip under the Sage columns */
.pn-panel-cta {
  max-width: var(--maxw);
  margin: var(--s-5) auto 0;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  box-sizing: border-box;
}
.pn-ebook {
  position: relative;
  max-width: 460px;
  background: var(--panel-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-2);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--dur-fast) var(--ease-io),
              transform var(--dur-fast) var(--ease-io),
              box-shadow var(--dur-fast) var(--ease-io);
}
.pn-ebook:hover,
.pn-ebook:focus-within {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px oklch(0 0 0 / .35), 0 0 16px var(--accent-soft);
}
.pn-ebook-tag {
  align-self: flex-start;
  font: 400 .5rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-bright);
  border: 1px solid var(--accent-dim);
  padding: 3px 7px;
  border-radius: var(--r-pill, 999px);
}
.pn-ebook-title { margin: 0; font: 500 1rem/1.15 var(--serif); color: var(--moon); }
.pn-ebook-body { margin: 0; font: 400 .78rem/1.55 var(--sans); color: var(--muted); }
.pn-ebook-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 2px;
  font: 600 .78rem/1.2 var(--sans);
  color: var(--accent-bright);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-io),
              transform var(--dur-fast) var(--ease-io),
              text-shadow var(--dur-fast) var(--ease-io);
}
/* ignite: brighten to moon + a warm glow + a small forward nudge */
.pn-ebook-link:hover,
.pn-ebook-link:focus-visible {
  color: var(--moon);
  transform: translateX(2px);
  text-shadow: 0 0 12px var(--accent-soft);
}
.pn-ebook-link:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
.pn-ebook-note {
  font: 400 .62rem/1 var(--mono);
  letter-spacing: .04em;
  text-transform: none;
  color: var(--faint);
}

/* fallback for engines without relative-color oklch(): the feature and
   e-book washes fall back to the flat token accent-soft (set above), and
   the drop shadow loses only its color-mix; nothing breaks. */

@media (prefers-reduced-motion: reduce) {
  .pn-feature-link,
  .pn-ebook,
  .pn-ebook-link { transition: none; }
  .pn-ebook:hover,
  .pn-ebook:focus-within { transform: none; }
  /* still brighten (color set on :hover), just drop the nudge */
  .pn-feature-link:hover,
  .pn-feature-link:focus-visible,
  .pn-ebook-link:hover,
  .pn-ebook-link:focus-visible { transform: none; }
}

/* ------------------------------------------------------------
   12. Below the bar breakpoint the panels never show inline; the
   mobile drawer (nav-drawer.css) takes over. Hide panels + bar nav
   so a stray .open cannot leak onto a small screen.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .pn-panel { display: none !important; }
}