/* ============================================================
   Header DROPDOWN design variants
   ------------------------------------------------------------
   Applied via  <header data-nav-dropdown="editorial|grid|minimal">
   Restyles ONLY the dropdown panels. The top bar and the menu
   toggles are untouched, and every real menu item is preserved.
   Panel WIDTH stays full-bleed (as built). Contact menu keeps its
   own bespoke layout in every style.
   ============================================================ */

/* ============================================================
   EDITORIAL — 3-column redesign (the artifact editorial look)
   left  = the real menu items (scrollable)
   mid   = a unique featured card (per menu)
   right = a latest / highlights list (per menu)
   The featured + latest are injected by partials/headers/editorial-aside;
   the header script wraps the real items into .nde__left.
   ============================================================ */
header[data-nav-dropdown="editorial"]{ --nd-accent:#BB5A18; }

@media (min-width: 769px){
  /* The app wraps panel content in .app-nav-menu-scroll > .app-nav-menu-group
     (a repeat(3,1fr) grid). So the 3 columns are the GROUP's children
     (.nde__left / .nde__featured / .nde__latest) — NOT the panel's.
     :has(.nde__left) scopes these to editorial panels only, leaving the
     guest sign-in / contact panels alone. */

  /* Force the panel to a simple block box of fixed height. The app's base makes
     it a two-col grid with repeat(6,44px) rows, which breaks the height chain so
     the scroll area never resolves — that was the last-item cutoff bug. */
  header[data-nav-dropdown="editorial"] .app-nav-menu--mega.is-open:has(.nde__left){
    display: block !important;
    grid-template-columns: none !important; grid-template-rows: none !important; grid-auto-flow: row !important;
    height: min(78vh, 500px) !important; max-height: min(78vh, 500px) !important; overflow: hidden !important;
    background:
      radial-gradient(120% 130% at 0% -12%, color-mix(in srgb, var(--nd-accent) 12%, #fff) 0%, #ffffff 42%),
      #ffffff !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
  }
  /* neutralise the whole-panel scroll so each column scrolls itself */
  header[data-nav-dropdown="editorial"] .app-nav-menu-scroll:has(.nde__left){
    display:block !important; height:100% !important; max-height:100% !important;
    overflow:hidden !important; padding:0 !important; margin:0 !important; width:100% !important; gap:0 !important;
  }
  /* the 3 real columns — pin the single row to the panel height so each
     column becomes its own scroll viewport (fixes the last-item cutoff) */
  header[data-nav-dropdown="editorial"] .app-nav-menu-group:has(> .nde__left){
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr) minmax(0, .85fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    align-items: stretch !important; gap: 0 !important; height: 100% !important; min-height: 0 !important;
  }
  /* LEFT — items scroll inside their own column */
  header[data-nav-dropdown="editorial"] .nde__left{
    min-height: 0 !important; box-sizing:border-box !important; align-self: start !important; height: min(78vh, 500px) !important; max-height: min(78vh, 500px) !important;
    overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important;
    display: flex !important; flex-direction: column !important; gap: 4px !important;
    padding: 18px 18px 26px 22px !important; border-right: 1px solid rgba(20,22,28,.08) !important; min-width: 0 !important;
  }
}

header[data-nav-dropdown="editorial"] .nde__left .app-nav-section-title{
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace !important;
  font-size:.65rem !important; letter-spacing:.16em !important; text-transform:uppercase !important;
  color:#6b7280 !important; font-weight:700 !important; padding:14px 2px 5px !important; border:0 !important;
}
header[data-nav-dropdown="editorial"] .nde__left .app-nav-section-title:first-child{ padding-top:2px !important; }
header[data-nav-dropdown="editorial"] .nde__left .app-nav-item{
  display:flex !important; align-items:center !important; gap:13px !important; width:100% !important;
  /* base clips items to a fixed 64px card w/ overflow:hidden — undo all of it */
  height:auto !important; min-height:54px !important; max-height:none !important;
  align-self:auto !important; overflow:visible !important; break-inside:auto !important;
  padding:9px 12px !important; margin:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:11px !important;
  white-space:normal !important; color:#1f2430 !important;
  transition: background .14s ease !important;
}
header[data-nav-dropdown="editorial"] .nde__left .nde-text{
  display:flex !important; flex-direction:column !important; gap:1px !important; min-width:0 !important;
}
header[data-nav-dropdown="editorial"] .nde__left .app-nav-item-desc{
  font-size:12px !important; font-weight:400 !important; color:#8a8f99 !important; line-height:1.35 !important;
}
header[data-nav-dropdown="editorial"] .nde__left .app-nav-item:hover{ background:color-mix(in srgb,var(--nd-accent) 9%,transparent)!important; }
header[data-nav-dropdown="editorial"] .nde__left .app-nav-item.active{ background:color-mix(in srgb,var(--nd-accent) 13%,transparent)!important; font-weight:600 !important; }
header[data-nav-dropdown="editorial"] .nde__left .app-nav-item-label{ display:block !important; flex:0 0 auto !important; flex-wrap:nowrap !important; font-weight:600 !important; font-size:.9rem !important; line-height:1.25 !important; }
header[data-nav-dropdown="editorial"] .nde__left .app-nav-icon{
  width:36px !important; height:36px !important; min-width:36px !important; flex:0 0 36px !important;
  display:grid !important; place-items:center !important; border-radius:10px !important; font-size:15px !important;
  color:var(--nd-accent)!important; background:color-mix(in srgb,var(--nd-accent) 13%,transparent)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nd-accent) 18%,transparent)!important;
}

/* MIDDLE — 3 cards, each a DIFFERENT treatment (hero + two supporting) */
header[data-nav-dropdown="editorial"] .nde__mid{
  box-sizing:border-box !important; align-self:start !important; height:min(78vh, 500px) !important; max-height:min(78vh, 500px) !important; min-height:0 !important; overflow-y:auto !important; overscroll-behavior:contain !important;
  display:flex !important; flex-direction:column !important; gap:12px !important;
  padding:18px 18px 22px !important; min-width:0 !important;
}
/* cards keep their natural height — the column scrolls instead of squeezing them */
header[data-nav-dropdown="editorial"] .nde__mid > .nde__card{ flex: 0 0 auto !important; }
header[data-nav-dropdown="editorial"] .nde__card{
  position:relative !important; display:flex !important; flex-direction:column !important; gap:6px !important;
  padding:16px 18px !important; border-radius:14px !important; text-decoration:none !important; color:#191a1f !important;
  overflow:hidden !important; transition: box-shadow .16s ease, transform .16s ease, background .16s ease !important;
}
header[data-nav-dropdown="editorial"] .nde__card:hover{ transform: translateY(-1px) !important; }

/* Card 1 — HERO: filled gradient, prominent, grows to use spare space */
header[data-nav-dropdown="editorial"] .nde__card:first-child{
  gap:9px !important; padding:20px !important;
  background: linear-gradient(150deg, color-mix(in srgb,var(--nd-accent) 22%, #fff), color-mix(in srgb,var(--nd-accent) 7%, #fff)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--nd-accent) 22%, transparent) !important;
}
header[data-nav-dropdown="editorial"] .nde__card:first-child .nde__card-title{ font-size:19px !important; }
header[data-nav-dropdown="editorial"] .nde__card:first-child:hover{
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--nd-accent) 40%, transparent),
              0 18px 34px -20px color-mix(in srgb,var(--nd-accent) 70%, transparent) !important;
}

/* Card 2 — SPINE: white with a thick accent left rail */
header[data-nav-dropdown="editorial"] .nde__card:nth-child(2){
  background:#ffffff !important; box-shadow: inset 0 0 0 1px rgba(20,22,28,.10) !important;
  border-left:4px solid var(--nd-accent) !important; border-radius:4px 14px 14px 4px !important;
}
header[data-nav-dropdown="editorial"] .nde__card:nth-child(2):hover{ box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--nd-accent) 40%, transparent) !important; background: color-mix(in srgb,var(--nd-accent) 4%, #fff) !important; }

/* Card 3 — TINT: soft accent wash, arrow affordance, no border */
header[data-nav-dropdown="editorial"] .nde__card:nth-child(3){
  background: color-mix(in srgb,var(--nd-accent) 9%, #fff) !important; box-shadow:none !important;
}
header[data-nav-dropdown="editorial"] .nde__card:nth-child(3)::after{
  content:"→"; position:absolute; top:14px; right:16px; color:var(--nd-accent); font-weight:700; opacity:.55; transition:transform .16s ease;
}
header[data-nav-dropdown="editorial"] .nde__card:nth-child(3):hover{ background: color-mix(in srgb,var(--nd-accent) 15%, #fff) !important; }
header[data-nav-dropdown="editorial"] .nde__card:nth-child(3):hover::after{ transform:translateX(3px); }

header[data-nav-dropdown="editorial"] .nde__chip{
  align-self:flex-start; font-family:ui-monospace,Menlo,monospace; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; color:var(--nd-accent);
  background:color-mix(in srgb,var(--nd-accent) 16%, transparent); padding:3px 8px; border-radius:6px;
}
header[data-nav-dropdown="editorial"] .nde__card-title{ font-size:15px; font-weight:700; letter-spacing:-.01em; line-height:1.2; color:#14161b; }
header[data-nav-dropdown="editorial"] .nde__card-desc{ font-size:12.5px; color:#4c505a; line-height:1.45; }
header[data-nav-dropdown="editorial"] .nde__card-meta{ font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:#7a7f8a; letter-spacing:.03em; margin-top:1px; }

/* Card 4 — PORTALS: a dark "console" card, deliberately unlike the light cards */
header[data-nav-dropdown="editorial"] .nde__card--portals{
  background: linear-gradient(158deg, #1c1f28 0%, #0f1116 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 38px -24px rgba(0,0,0,.75) !important;
  color:#f4f4f2 !important; gap:5px !important; padding:18px !important;
}
header[data-nav-dropdown="editorial"] .nde__card--portals::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb,var(--nd-accent) 30%, transparent) 0%, transparent 55%);
  opacity:.5;
}
header[data-nav-dropdown="editorial"] .nde__card--portals > *{ position:relative; z-index:1; }
header[data-nav-dropdown="editorial"] .nde__card--portals .nde__chip{
  color:#fff !important; background:color-mix(in srgb, var(--nd-accent) 55%, transparent) !important;
}
header[data-nav-dropdown="editorial"] .nde__card--portals .nde__card-title{ color:#ffffff !important; }
header[data-nav-dropdown="editorial"] .nde__card--portals .nde__card-desc{ color:rgba(255,255,255,.55) !important; }
header[data-nav-dropdown="editorial"] .nde__portals{ display:flex; flex-direction:column; gap:8px; margin-top:9px; position:relative; z-index:1; }
header[data-nav-dropdown="editorial"] .nde__portal{
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px; text-decoration:none;
  background:rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
  color:#f4f4f2; font-weight:600; font-size:13.5px;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
header[data-nav-dropdown="editorial"] .nde__portal:hover{
  background:color-mix(in srgb, var(--nd-accent) 24%, rgba(255,255,255,.05));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nd-accent) 60%, transparent);
  transform: translateX(2px);
}
header[data-nav-dropdown="editorial"] .nde__portal-ic{
  width:30px; height:30px; min-width:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:9px; font-size:13px;
  color:var(--nd-accent); background:color-mix(in srgb, var(--nd-accent) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nd-accent) 30%, transparent);
}
header[data-nav-dropdown="editorial"] .nde__portal-txt{ flex:1 1 auto; min-width:0; }
header[data-nav-dropdown="editorial"] .nde__portal-go{ color:var(--nd-accent); font-weight:700; opacity:.7; transition:transform .16s ease, opacity .16s ease; }
header[data-nav-dropdown="editorial"] .nde__portal:hover .nde__portal-go{ transform:translateX(3px); opacity:1; }
/* The portals card keeps its dark design in ANY slot — beats the nth-child
   (hero/rail/tint) rules on specificity, and drops the tint card's ::after arrow. */
header[data-nav-dropdown="editorial"] .nde__mid .nde__card--portals,
header[data-nav-dropdown="editorial"] .nde__mid .nde__card--portals:hover{
  background: linear-gradient(158deg, #1c1f28 0%, #0f1116 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 38px -24px rgba(0,0,0,.75) !important;
  border-left: 0 !important; transform: none !important;
}
header[data-nav-dropdown="editorial"] .nde__mid .nde__card--portals::after{ content: none !important; }

/* Card 4 — ACADEMY spotlight: bold accent-filled card with a short paragraph */
header[data-nav-dropdown="editorial"] .nde__mid .nde__card--academy{
  flex: 0 0 auto !important; gap:8px !important; padding:18px !important; overflow:visible !important; color:#fff !important;
  background: linear-gradient(140deg, var(--nd-accent) 0%, color-mix(in srgb, var(--nd-accent) 60%, #6a2f06) 100%) !important;
  box-shadow: 0 20px 36px -20px color-mix(in srgb, var(--nd-accent) 85%, transparent), inset 0 0 0 1px rgba(255,255,255,.14) !important;
}
header[data-nav-dropdown="editorial"] .nde__mid .nde__card--academy:hover{
  transform: translateY(-1px) !important;
  /* re-assert the dark gradient (beats the nth-child(3) tint :hover) */
  background: linear-gradient(140deg, color-mix(in srgb, var(--nd-accent) 92%, #fff) 0%, color-mix(in srgb, var(--nd-accent) 55%, #6a2f06) 100%) !important;
  box-shadow: 0 24px 42px -20px color-mix(in srgb, var(--nd-accent) 90%, transparent), inset 0 0 0 1px rgba(255,255,255,.22) !important;
}
header[data-nav-dropdown="editorial"] .nde__mid .nde__card--academy::after{ content:none !important; }
header[data-nav-dropdown="editorial"] .nde__ac-head{ display:flex; align-items:center; gap:10px; }
/* chip sits centered next to the icon (base .nde__chip is align-self:flex-start) */
header[data-nav-dropdown="editorial"] .nde__card--academy .nde__chip{ align-self:center !important; }
header[data-nav-dropdown="editorial"] .nde__ac-ic{
  width:34px; height:34px; min-width:34px; display:grid; place-items:center; border-radius:10px; font-size:15px;
  color:#fff; background:rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
header[data-nav-dropdown="editorial"] .nde__card--academy .nde__chip{ color:#fff !important; background:rgba(255,255,255,.22) !important; }
header[data-nav-dropdown="editorial"] .nde__card--academy .nde__card-title{ color:#fff !important; font-size:17px !important; }
header[data-nav-dropdown="editorial"] .nde__card--academy .nde__card-desc{
  color:rgba(255,255,255,.88) !important; font-size:12.5px !important; line-height:1.45 !important;
  white-space:normal !important; overflow:visible !important; overflow-wrap:anywhere !important;
  display:block !important; max-height:none !important;
}
header[data-nav-dropdown="editorial"] .nde__ac-cta{ margin-top:3px; font-family:ui-monospace,Menlo,monospace; font-size:11px; font-weight:700; letter-spacing:.04em; color:#fff; display:inline-flex; align-items:center; gap:6px; }
header[data-nav-dropdown="editorial"] .nde__card--academy:hover .nde__ac-cta{ text-decoration:underline; }

/* narrow CONNECTORS card — a compact "integration" row with a dotted texture */
header[data-nav-dropdown="editorial"] .nde__mid .nde__card--connectors{
  flex-direction: row !important; align-items: flex-start !important; gap: 13px !important;
  padding: 14px 15px !important; overflow: hidden !important; color: #1f2430 !important;
  background-color: #ffffff !important;
  background-image: radial-gradient(color-mix(in srgb, var(--nd-accent) 16%, transparent) 1.3px, transparent 1.3px) !important;
  background-size: 13px 13px !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--nd-accent) 30%, transparent) !important;
}
header[data-nav-dropdown="editorial"] .nde__mid .nde__card--connectors:hover{
  background-color: color-mix(in srgb, var(--nd-accent) 6%, #fff) !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--nd-accent) 55%, transparent), 0 12px 22px -16px color-mix(in srgb, var(--nd-accent) 60%, transparent) !important;
  transform: none !important;
}
header[data-nav-dropdown="editorial"] .nde__mid .nde__card--connectors::after{ content: none !important; }
header[data-nav-dropdown="editorial"] .nde__cn-ic{
  width:36px; height:36px; min-width:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:10px; font-size:15px;
  color:var(--nd-accent); background:color-mix(in srgb, var(--nd-accent) 14%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nd-accent) 26%, transparent);
}
header[data-nav-dropdown="editorial"] .nde__cn-body{ display:flex; flex-direction:column; gap:1px; flex:1 1 auto; min-width:0; }
header[data-nav-dropdown="editorial"] .nde__cn-title{ font-size:14px; font-weight:700; color:#14161b; line-height:1.2; }
header[data-nav-dropdown="editorial"] .nde__cn-desc{ font-size:12px; color:#5a6472; line-height:1.35; }
header[data-nav-dropdown="editorial"] .nde__cn-go{ color:var(--nd-accent); font-weight:700; opacity:.65; transition:transform .16s ease, opacity .16s ease; margin-top:6px; }
header[data-nav-dropdown="editorial"] .nde__card--connectors:hover .nde__cn-go{ transform:translateX(3px); opacity:1; }
/* example connector chips */
header[data-nav-dropdown="editorial"] .nde__cn-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
header[data-nav-dropdown="editorial"] .nde__cn-tag{
  font-family:ui-monospace,Menlo,monospace; font-size:10px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  color:var(--nd-accent); background:color-mix(in srgb, var(--nd-accent) 12%, #fff);
  border:1px solid color-mix(in srgb, var(--nd-accent) 24%, transparent); padding:2px 7px; border-radius:20px;
}
header[data-nav-dropdown="editorial"] .nde__cn-tag--more{ color:#6b7480; background:transparent; border-color:rgba(20,22,28,.14); }

/* RIGHT — latest list */
header[data-nav-dropdown="editorial"] .nde__latest{
  box-sizing:border-box !important; align-self:start !important; height:min(78vh, 500px) !important; max-height:min(78vh, 500px) !important; min-height:0 !important; overflow-y:auto !important;
  padding:18px 22px !important; border-left:1px solid rgba(20,22,28,.08) !important;
  display:flex !important; flex-direction:column !important; min-width:0 !important;
}
header[data-nav-dropdown="editorial"] .nde__eyebrow{
  font-family:ui-monospace,Menlo,monospace; font-size:.65rem; letter-spacing:.16em; text-transform:uppercase;
  color:#6b7280; font-weight:700; margin-bottom:6px;
}
header[data-nav-dropdown="editorial"] .nde__post{
  padding:11px 0 !important; border-top:1px solid rgba(20,22,28,.08); display:flex; flex-direction:column; gap:3px; text-decoration:none;
  position:relative;
}
header[data-nav-dropdown="editorial"] .nde__post:first-of-type{ border-top:0; }
header[data-nav-dropdown="editorial"] .nde__post-title{ font-size:13.5px; font-weight:600; color:#1f2430; line-height:1.35; transition:color .14s; }
header[data-nav-dropdown="editorial"] .nde__post:hover .nde__post-title{ color:var(--nd-accent); }
header[data-nav-dropdown="editorial"] .nde__post-meta{ font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:#7a7f8a; letter-spacing:.04em; text-transform:uppercase; }

/* --- Active state: current page in the editorial dropdown --- */
header[data-nav-dropdown="editorial"] .nde__post.is-active{
  padding-left:10px !important;
  background:color-mix(in srgb, var(--nd-accent) 6%, transparent);
  border-radius:6px;
}
header[data-nav-dropdown="editorial"] .nde__post.is-active::before{
  content:""; position:absolute; left:0; top:11px; bottom:11px; width:3px; border-radius:3px;
  background:var(--nd-accent);
}
header[data-nav-dropdown="editorial"] .nde__post.is-active .nde__post-title{
  color:var(--nd-accent) !important; font-weight:800;
}
header[data-nav-dropdown="editorial"] .nde__post.is-active .nde__post-meta{
  color:color-mix(in srgb, var(--nd-accent) 70%, #555) !important;
}
header[data-nav-dropdown="editorial"] .nde__card.is-active{
  outline:2px solid var(--nd-accent);
  outline-offset:-2px;
}
header[data-nav-dropdown="editorial"] .nde__portal.is-active{
  background:color-mix(in srgb, var(--nd-accent) 10%, transparent);
  color:var(--nd-accent);
  font-weight:800;
}

/* --- Contact + Sign In: share the editorial SKIN so the family is consistent.
   These panels keep their own (non 3-column) content, they just adopt the same
   light ground, squared top, accent and compact item styling. --- */
header[data-nav-dropdown="editorial"] .app-nav-menu--contact,
header[data-nav-dropdown="editorial"] .app-nav-menu--signin{ --nd-accent:#BB5A18; }

@media (min-width: 769px){
  header[data-nav-dropdown="editorial"] .app-nav-menu--contact.is-open,
  header[data-nav-dropdown="editorial"] .app-nav-menu--signin.is-open{
    background:
      radial-gradient(120% 130% at 0% -12%, color-mix(in srgb, var(--nd-accent) 12%, #fff) 0%, #ffffff 42%),
      #ffffff !important;
    border-top-left-radius:0 !important; border-top-right-radius:0 !important;
    border-bottom-left-radius:18px !important; border-bottom-right-radius:18px !important;
  }
}
header[data-nav-dropdown="editorial"] .app-nav-menu--contact .app-nav-section-title,
header[data-nav-dropdown="editorial"] .app-nav-menu--signin .app-nav-section-title{
  font-family:ui-monospace,Menlo,monospace !important; font-size:.65rem !important; letter-spacing:.16em !important;
  text-transform:uppercase !important; color:#6b7280 !important; font-weight:700 !important;
}
header[data-nav-dropdown="editorial"] .app-nav-menu--contact .app-nav-item,
header[data-nav-dropdown="editorial"] .app-nav-menu--signin .app-nav-item{
  height:auto !important; min-height:0 !important; align-items:center !important; gap:11px !important;
  padding:9px 11px !important; background:transparent !important; border:0 !important; box-shadow:none !important;
  border-radius:10px !important; color:#1f2430 !important; white-space:normal !important; transition:background .14s ease !important;
}
header[data-nav-dropdown="editorial"] .app-nav-menu--contact .app-nav-item:hover,
header[data-nav-dropdown="editorial"] .app-nav-menu--signin .app-nav-item:hover{
  background:color-mix(in srgb,var(--nd-accent) 9%,transparent)!important; color:#111827 !important;
}
header[data-nav-dropdown="editorial"] .app-nav-menu--contact .app-nav-item-label,
header[data-nav-dropdown="editorial"] .app-nav-menu--signin .app-nav-item-label{ font-weight:600 !important; }
header[data-nav-dropdown="editorial"] .app-nav-menu--contact .app-nav-icon,
header[data-nav-dropdown="editorial"] .app-nav-menu--signin .app-nav-icon{
  width:30px !important; height:30px !important; min-width:30px !important; flex:0 0 30px !important;
  display:grid !important; place-items:center !important; border-radius:9px !important; font-size:13px !important;
  color:var(--nd-accent)!important; background:color-mix(in srgb,var(--nd-accent) 13%,transparent)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nd-accent) 18%,transparent)!important;
}

/* editorial on mobile: stack (left items, then featured, then latest) */
@media (max-width: 768px){
  header[data-nav-dropdown="editorial"] .nde__mid{ padding:12px 0 !important; }
  header[data-nav-dropdown="editorial"] .nde__latest{ border-left:0 !important; padding:8px 0 !important; }
  header[data-nav-dropdown="editorial"] .nde__left{ border-right:0 !important; padding:4px 0 !important; }
}

/* Mobile drawer has a DARK background — make the left-column link text legible.
   Cards keep their own styling and are intentionally left untouched. */
@media (max-width: 1200px){
  /* mobile drawer stacks the columns — don't force the desktop fixed height,
     which left a big empty box (esp. the scrollable column 3). Let them size to content. */
  header[data-nav-dropdown="editorial"] .nde__left,
  header[data-nav-dropdown="editorial"] .nde__mid,
  header[data-nav-dropdown="editorial"] .nde__latest{
    height: auto !important; max-height: none !important; overflow: visible !important;
  }
  header[data-nav-dropdown="editorial"] .nde__left .app-nav-item-label{ color:#f1f5f9 !important; }
  header[data-nav-dropdown="editorial"] .nde__left .app-nav-item-desc{ color:rgba(255,255,255,.62) !important; }
  header[data-nav-dropdown="editorial"] .nde__left .app-nav-section-title{ color:rgba(255,255,255,.55) !important; border-top-color:rgba(255,255,255,.12) !important; }
  header[data-nav-dropdown="editorial"] .nde__left .app-nav-item{ color:#f1f5f9 !important; }
  header[data-nav-dropdown="editorial"] .nde__left .app-nav-item:hover{ background:rgba(255,255,255,.08) !important; }
  header[data-nav-dropdown="editorial"] .nde__left .app-nav-item.active{ background:rgba(255,255,255,.14) !important; }
  header[data-nav-dropdown="editorial"] .nde__left .app-nav-icon{
    color:#fff !important; background:rgba(255,255,255,.14) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22) !important;
  }
  /* column 3 (Explore links list) — also links, not a card */
  header[data-nav-dropdown="editorial"] .nde__latest .nde__eyebrow{ color:rgba(255,255,255,.55) !important; }
  header[data-nav-dropdown="editorial"] .nde__post{ border-top-color:rgba(255,255,255,.1) !important; }
  header[data-nav-dropdown="editorial"] .nde__post-title{ color:#f1f5f9 !important; }
  header[data-nav-dropdown="editorial"] .nde__post:hover .nde__post-title{ color:#fff !important; }
  header[data-nav-dropdown="editorial"] .nde__post-meta{ color:rgba(255,255,255,.5) !important; }

  /* Contact + Sign In panels are also dark-drawer here — light their links up */
  header[data-nav-dropdown="editorial"] .app-nav-menu--contact,
  header[data-nav-dropdown="editorial"] .app-nav-menu--signin{ color:#f1f5f9 !important; }
  header[data-nav-dropdown="editorial"] .app-nav-menu--contact .app-nav-item,
  header[data-nav-dropdown="editorial"] .app-nav-menu--signin .app-nav-item,
  header[data-nav-dropdown="editorial"] .app-nav-menu--contact .app-nav-item-label,
  header[data-nav-dropdown="editorial"] .app-nav-menu--signin .app-nav-item-label{ color:#f1f5f9 !important; }
  header[data-nav-dropdown="editorial"] .app-nav-menu--contact .app-nav-section-title,
  header[data-nav-dropdown="editorial"] .app-nav-menu--signin .app-nav-section-title{ color:rgba(255,255,255,.55) !important; }
  header[data-nav-dropdown="editorial"] .app-nav-menu--contact .app-nav-item:hover,
  header[data-nav-dropdown="editorial"] .app-nav-menu--signin .app-nav-item:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
  header[data-nav-dropdown="editorial"] .app-nav-menu--contact .app-nav-icon,
  header[data-nav-dropdown="editorial"] .app-nav-menu--signin .app-nav-icon{
    color:#fff !important; background:rgba(255,255,255,.14) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22) !important;
  }
}

/* Slim, subtle scrollbars on the editorial columns (kills the thick native bar,
   stays scrollable + discoverable). For a FULLY hidden bar instead, swap the
   scrollbar-width to `none` and add `::-webkit-scrollbar{display:none}`. */
header[data-nav-dropdown="editorial"] .nde__left,
header[data-nav-dropdown="editorial"] .nde__mid,
header[data-nav-dropdown="editorial"] .nde__latest{
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in srgb, var(--nd-accent) 38%, #d7d9df) transparent !important;
}
header[data-nav-dropdown="editorial"] .nde__left::-webkit-scrollbar,
header[data-nav-dropdown="editorial"] .nde__mid::-webkit-scrollbar,
header[data-nav-dropdown="editorial"] .nde__latest::-webkit-scrollbar{ width:5px; height:5px; }
header[data-nav-dropdown="editorial"] .nde__left::-webkit-scrollbar-track,
header[data-nav-dropdown="editorial"] .nde__mid::-webkit-scrollbar-track,
header[data-nav-dropdown="editorial"] .nde__latest::-webkit-scrollbar-track{ background: transparent; }
header[data-nav-dropdown="editorial"] .nde__left::-webkit-scrollbar-thumb,
header[data-nav-dropdown="editorial"] .nde__mid::-webkit-scrollbar-thumb,
header[data-nav-dropdown="editorial"] .nde__latest::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--nd-accent) 34%, transparent);
  border-radius: 10px; border: 1px solid transparent; background-clip: content-box;
}
header[data-nav-dropdown="editorial"] .nde__left:hover::-webkit-scrollbar-thumb,
header[data-nav-dropdown="editorial"] .nde__mid:hover::-webkit-scrollbar-thumb,
header[data-nav-dropdown="editorial"] .nde__latest:hover::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--nd-accent) 55%, transparent); background-clip: content-box;
}

/* ============================================================
   GRID (cobalt) — compact multi-column quick-links
   ============================================================ */
header[data-nav-dropdown="grid"]{ --nd-accent:#3E63DD; }
header[data-nav-dropdown="minimal"]{ --nd-accent:#6D4AE0; }

@media (min-width: 769px){
  header[data-nav-dropdown="grid"]    .app-nav-menu--mega:not(.app-nav-menu--contact).is-open,
  header[data-nav-dropdown="minimal"] .app-nav-menu--mega:not(.app-nav-menu--contact).is-open{
    height: auto !important;
    max-height: calc(100vh - var(--header-height, 72px) - 8px) !important;
    overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important;
    grid-auto-flow: row !important; grid-template-rows: none !important; grid-auto-rows: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px 22px !important; padding: 22px 30px 26px !important; background:#ffffff !important;
    border-radius: 0 0 18px 18px !important; box-shadow: 0 30px 60px -34px rgba(20,22,28,.32) !important;
  }
}
header[data-nav-dropdown="grid"] .app-nav-menu--mega:not(.app-nav-menu--contact) .app-nav-section-title,
header[data-nav-dropdown="minimal"] .app-nav-menu--mega:not(.app-nav-menu--contact) .app-nav-section-title{
  grid-column:1/-1 !important; font-family:ui-monospace,Menlo,monospace !important; font-size:.66rem !important;
  letter-spacing:.16em !important; text-transform:uppercase !important; color:#6b7280 !important;
  font-weight:700 !important; padding:15px 2px 5px !important;
}
header[data-nav-dropdown="grid"] .app-nav-menu--mega:not(.app-nav-menu--contact) .app-nav-item,
header[data-nav-dropdown="minimal"] .app-nav-menu--mega:not(.app-nav-menu--contact) .app-nav-item{
  height:auto !important; min-height:0 !important; align-items:center !important; gap:11px !important;
  padding:8px 10px !important; background:transparent !important; border:0 !important; box-shadow:none !important;
  border-radius:9px !important; white-space:normal !important; color:#1f2430 !important; transition:background .14s ease !important;
}
header[data-nav-dropdown="grid"] .app-nav-menu--mega:not(.app-nav-menu--contact) .app-nav-item:hover,
header[data-nav-dropdown="minimal"] .app-nav-menu--mega:not(.app-nav-menu--contact) .app-nav-item:hover{
  background:color-mix(in srgb,var(--nd-accent) 9%,transparent)!important;
}
header[data-nav-dropdown="grid"] .app-nav-menu--mega:not(.app-nav-menu--contact) .app-nav-item-label,
header[data-nav-dropdown="minimal"] .app-nav-menu--mega:not(.app-nav-menu--contact) .app-nav-item-label{
  font-weight:600 !important; font-size:.88rem !important;
}
/* grid keeps the tinted icon tile; minimal drops it to a plain inline glyph */
header[data-nav-dropdown="grid"] .app-nav-menu--mega:not(.app-nav-menu--contact) .app-nav-icon{
  width:28px !important; height:28px !important; min-width:28px !important; flex:0 0 28px !important;
  display:grid !important; place-items:center !important; border-radius:8px !important; font-size:12px !important;
  color:var(--nd-accent)!important; background:color-mix(in srgb,var(--nd-accent) 13%,transparent)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nd-accent) 18%,transparent)!important;
}
header[data-nav-dropdown="minimal"] .app-nav-menu--mega:not(.app-nav-menu--contact) .app-nav-icon{
  width:auto !important; height:auto !important; min-width:0 !important; flex:0 0 auto !important;
  background:transparent !important; box-shadow:none !important; color:var(--nd-accent)!important; font-size:13px !important;
}

/* guest sign-in trust block spans full width where present */
header[data-nav-dropdown="grid"]      .app-nav-menu--mega .app-nav-signin-trust,
header[data-nav-dropdown="minimal"]   .app-nav-menu--mega .app-nav-signin-trust{ grid-column:1/-1 !important; }