/* =========================================================================
   Northern UI — Apple × Anvogue layer for XSiter 2 / ImagiNorthern
   =========================================================================
   Loaded last, and only when Settings `ui_style` = 'northern'. Every rule is
   scoped to `body.ui-northern`, so turning the setting off restores the
   previous look with nothing left behind.

   Apple:   system type, tight tracking, frosted bars, quiet greys, pill CTAs,
            lots of air.
   Anvogue: soft pastel tints, rounded image cards with gentle zoom, underline
            "→" links, playful date tiles and chips.

     1. Tokens              7. Cards (home + listings)
     2. Base & type         8. Call to action, gallery, supporters
     3. Buttons, chips      9. Forms, sign-in
     4. Navigation         10. Footer, cookie banner
     5. Home hero          11. Motion
     6. Page heroes, heads 12. Portal & admin shell
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
body.ui-northern {
  --nu-brand:   var(--in-primary, #5d579e);
  --nu-teal:    var(--in-accent, #01696f);
  --nu-ink:     #1d1d1f;
  --nu-ink-2:   #424245;
  --nu-mute:    #6e6e73;
  --nu-faint:   #86868b;
  --nu-line:    rgba(0, 0, 0, .08);
  --nu-line-2:  rgba(0, 0, 0, .12);
  --nu-bg:      #fbfbfd;
  --nu-surface: #ffffff;
  --nu-gray:    #f5f5f7;

  /* Pastels — each pairs a wash with an ink that passes 4.5:1 on it. */
  --nu-lilac: #f1eefc;  --nu-lilac-ink: #4b4590;
  --nu-mint:  #e5f4f0;  --nu-mint-ink:  #0b5e57;
  --nu-peach: #fdefe6;  --nu-peach-ink: #8a4516;
  --nu-sky:   #e8f1fc;  --nu-sky-ink:   #1d4f8c;
  --nu-blush: #fcebee;  --nu-blush-ink: #8e2a44;

  --nu-r-sm: 12px;
  --nu-r:    20px;
  --nu-r-lg: 28px;
  --nu-shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
  --nu-shadow-2: 0 2px 6px rgba(0,0,0,.04), 0 18px 40px -12px rgba(29,29,31,.18);
  --nu-ease: cubic-bezier(.22, .61, .36, 1);

  --nu-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nu-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nu-nav-h: 60px;
}

/* ---------- 2. Base & type ----------------------------------------------- */
body.ui-northern {
  background: var(--nu-bg) !important;
  color: var(--nu-ink-2);
  font-family: var(--nu-font);
  font-size: 16px;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.ui-northern h1, body.ui-northern h2, body.ui-northern h3,
body.ui-northern h4, body.ui-northern h5, body.ui-northern h6,
body.ui-northern .h1, body.ui-northern .h2, body.ui-northern .h3, body.ui-northern .h4 {
  font-family: var(--nu-font-display);
  color: var(--nu-ink);
  letter-spacing: -0.022em;
  font-weight: 650;
}
body.ui-northern .text-muted { color: var(--nu-mute) !important; }
body.ui-northern a { color: var(--nu-brand); text-underline-offset: 3px; }
body.ui-northern ::selection { background: var(--nu-lilac); color: var(--nu-ink); }
body.ui-northern :focus-visible { outline: 3px solid color-mix(in oklab, var(--nu-brand) 45%, white); outline-offset: 2px; border-radius: 8px; }
body.ui-northern .container { max-width: 1240px; }

/* ---------- 3. Buttons, chips -------------------------------------------- */
body.ui-northern .btn {
  border-radius: 980px;
  font-weight: 560;
  letter-spacing: -0.01em;
  padding: .56rem 1.2rem;
  transition: transform .2s var(--nu-ease), background-color .2s, color .2s, box-shadow .2s;
  box-shadow: none;
}
body.ui-northern .btn-lg { padding: .8rem 1.6rem; font-size: 1.02rem; }
body.ui-northern .btn-sm { padding: .36rem .9rem; font-size: .84rem; }
body.ui-northern .btn:active { transform: scale(.97); }
body.ui-northern .btn-in-primary,
body.ui-northern .btn-primary {
  background: var(--nu-brand) !important;
  border-color: transparent !important;
  color: #fff !important;
}
body.ui-northern .btn-in-primary:hover,
body.ui-northern .btn-primary:hover { background: color-mix(in oklab, var(--nu-brand) 86%, black) !important; }
body.ui-northern .btn-outline-secondary,
body.ui-northern .btn-outline-primary {
  background: var(--nu-gray) !important;
  border-color: transparent !important;
  color: var(--nu-ink) !important;
}
body.ui-northern .btn-outline-secondary:hover,
body.ui-northern .btn-outline-primary:hover { background: #e8e8ed !important; }
body.ui-northern .btn-light { background: #fff !important; color: var(--nu-ink) !important; border: 0 !important; }
body.ui-northern .btn-light:hover { background: #f2f2f4 !important; }
body.ui-northern .btn-outline-light {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body.ui-northern .btn-outline-light:hover { background: rgba(255,255,255,.26) !important; }

body.ui-northern .badge {
  border-radius: 980px;
  font-weight: 600;
  letter-spacing: 0;
  padding: .36em .75em;
}
body.ui-northern .badge.bg-secondary,
body.ui-northern .badge.bg-light { background: var(--nu-lilac) !important; color: var(--nu-lilac-ink) !important; }
body.ui-northern .badge.bg-success { background: var(--nu-mint) !important; color: var(--nu-mint-ink) !important; }
body.ui-northern .badge.bg-warning { background: var(--nu-peach) !important; color: var(--nu-peach-ink) !important; }
body.ui-northern .badge.bg-info,
body.ui-northern .badge.bg-primary { background: var(--nu-sky) !important; color: var(--nu-sky-ink) !important; }
body.ui-northern .badge.bg-danger { background: var(--nu-blush) !important; color: var(--nu-blush-ink) !important; }

/* Anvogue underline link: "View all →" */
body.ui-northern .in-section-head .btn,
body.ui-northern .nu-link {
  background: none !important;
  border: 0 !important;
  padding: .2rem 0 !important;
  border-radius: 0;
  color: var(--nu-ink) !important;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: inset 0 -1.5px 0 currentColor;
}
body.ui-northern .in-section-head .btn::after,
body.ui-northern .nu-link::after { content: " \2192"; transition: margin .2s var(--nu-ease); }
body.ui-northern .in-section-head .btn:hover::after,
body.ui-northern .nu-link:hover::after { margin-left: .25rem; }

/* ---------- 4. Navigation ------------------------------------------------ */
body.ui-northern .in-navbar {
  background: rgba(251, 251, 253, .72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--nu-line) !important;
  box-shadow: none !important;
  min-height: var(--nu-nav-h);
  padding-block: .2rem;
  transition: background .3s, box-shadow .3s;
}
body.ui-northern.nu-scrolled .in-navbar { background: rgba(251, 251, 253, .86) !important; box-shadow: 0 1px 0 var(--nu-line), 0 8px 24px -18px rgba(0,0,0,.25) !important; }
body.ui-northern .in-navbar .in-logo { max-height: 30px; width: auto; }
body.ui-northern .in-navbar .nav-link {
  color: var(--nu-ink-2) !important;
  font-size: .9rem;
  font-weight: 500;
  padding: .45rem .8rem !important;
  border-radius: 980px;
  background: transparent !important;
}
body.ui-northern .in-navbar .nav-link:hover { color: var(--nu-ink) !important; background: rgba(0,0,0,.04) !important; }
body.ui-northern .in-navbar .nav-link.active,
body.ui-northern .in-navbar .active > .nav-link { color: var(--nu-ink) !important; background: rgba(0,0,0,.06) !important; }
body.ui-northern .in-navbar .nav-link.active::before,
body.ui-northern .in-navbar .nav-link.active::after { display: none !important; }
body.ui-northern .in-navbar .dropdown-menu {
  border: 1px solid var(--nu-line);
  border-radius: 18px;
  padding: .5rem;
  box-shadow: var(--nu-shadow-2);
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
body.ui-northern .in-navbar .dropdown-item { border-radius: 10px; padding: .5rem .8rem; font-size: .92rem; color: var(--nu-ink-2); }
body.ui-northern .in-navbar .dropdown-item:hover { background: var(--nu-gray); color: var(--nu-ink); }
body.ui-northern .in-nav-actions .btn,
body.ui-northern .in-nav-actions .btn-in-primary { background: var(--nu-ink) !important; color: #fff !important; }
body.ui-northern .in-nav-actions .btn:hover { background: #000 !important; }
body.ui-northern .pns-trigger,
body.ui-northern .in-nav-actions [class*="search"] > a,
body.ui-northern .in-nav-actions button[class*="search"] {
  border-radius: 980px !important;
  background: rgba(0,0,0,.05) !important;
  border-color: transparent !important;
}

/* ---------- 5. Home hero (carousel + intro) ------------------------------ */
body.ui-northern .in-carousel-section { padding: 12px 12px 0 !important; }
body.ui-northern .in-hero-carousel {
  border-radius: var(--nu-r-lg);
  overflow: hidden;
  isolation: isolate;
}
body.ui-northern .in-carousel-slide-wrap { min-height: min(80vh, 760px); display: flex; align-items: flex-end; }
body.ui-northern .in-carousel-slide-wrap > .container { position: relative; z-index: 2; padding-bottom: clamp(2.5rem, 7vh, 5rem); }
body.ui-northern .in-carousel-overlay-layer { background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%) !important; mix-blend-mode: normal !important; }
body.ui-northern .in-carousel-title {
  font-size: clamp(2.6rem, 6.2vw, 5.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
  color: #fff !important;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
body.ui-northern .in-carousel-text { font-size: clamp(1.02rem, 1.5vw, 1.25rem); color: rgba(255,255,255,.9) !important; max-width: 36rem; }
body.ui-northern .in-carousel-badge {
  display: inline-block;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 980px;
  padding: .38rem .85rem;
  font-size: .8rem; font-weight: 600;
  margin-bottom: 1rem;
}
body.ui-northern .in-carousel-btn { background: #fff !important; color: var(--nu-ink) !important; }
body.ui-northern .in-hero-carousel .carousel-indicators { margin-bottom: 1.4rem; gap: 6px; }
body.ui-northern .in-hero-carousel .carousel-indicators [data-bs-target] {
  width: 8px; height: 8px; border-radius: 99px; border: 0; margin: 0;
  background: rgba(255,255,255,.55); opacity: 1; transition: width .35s var(--nu-ease);
}
body.ui-northern .in-hero-carousel .carousel-indicators .active { width: 28px; background: #fff; }
body.ui-northern .in-hero-carousel .carousel-control-prev,
body.ui-northern .in-hero-carousel .carousel-control-next {
  width: 44px; height: 44px; top: 50%; transform: translateY(-50%);
  margin: 0 18px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .3s;
}
body.ui-northern .in-hero-carousel:hover .carousel-control-prev,
body.ui-northern .in-hero-carousel:hover .carousel-control-next { opacity: 1; }
body.ui-northern .in-hero-carousel .carousel-control-prev-icon,
body.ui-northern .in-hero-carousel .carousel-control-next-icon { width: 1rem; height: 1rem; }

/* The intro/page hero: Apple statement on a pastel mesh, dark ink text. */
body.ui-northern .in-hero:not(.in-hero-carousel):not(.in-hero-video) {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 12% 10%, var(--nu-lilac) 0%, transparent 60%),
    radial-gradient(50% 70% at 92% 20%, var(--nu-mint) 0%, transparent 62%),
    radial-gradient(40% 60% at 70% 110%, var(--nu-peach) 0%, transparent 60%),
    var(--nu-bg) !important;
  color: var(--nu-ink-2) !important;
  border-radius: 0 !important;
  padding-block: calc(var(--nu-nav-h) + clamp(3.5rem, 9vw, 7rem)) clamp(3rem, 7vw, 5.5rem) !important;
  margin: 0 !important;
  text-align: center;
}
body.ui-northern .in-carousel-section + .in-hero,
body.ui-northern .in-hero-carousel + .in-hero { padding-top: clamp(4rem, 9vw, 7rem) !important; }
body.ui-northern .in-hero::before,
body.ui-northern .in-hero::after { display: none !important; }
body.ui-northern .in-hero:not(.in-hero-carousel):not(.in-hero-video) .row { justify-content: center; }
body.ui-northern .in-hero:not(.in-hero-carousel):not(.in-hero-video) [class*="col-lg-7"],
body.ui-northern .in-hero:not(.in-hero-carousel):not(.in-hero-video) [class*="col-lg-8"] { flex: 0 0 auto; width: min(100%, 860px); }
body.ui-northern .in-hero:not(.in-hero-carousel):not(.in-hero-video) h1 {
  color: var(--nu-ink) !important;
  font-size: clamp(2.5rem, 6vw, 4.6rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.04em !important;
  font-weight: 700 !important;
  margin-inline: auto;
  max-width: 16ch;
}
body.ui-northern .in-hero:not(.in-hero-carousel):not(.in-hero-video) h1 .nu-grad,
body.ui-northern .nu-grad {
  background: linear-gradient(100deg, var(--nu-brand) 10%, var(--nu-teal) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.ui-northern .in-hero:not(.in-hero-carousel):not(.in-hero-video) p,
body.ui-northern .in-hero:not(.in-hero-carousel):not(.in-hero-video) .lead {
  color: var(--nu-mute) !important;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem) !important;
  line-height: 1.5;
  max-width: 40rem;
  margin-inline: auto;
}
body.ui-northern .in-hero:not(.in-hero-carousel):not(.in-hero-video) .d-flex { justify-content: center; }
body.ui-northern .in-hero .badge-in,
body.ui-northern .in-hero .badge {
  background: #fff !important;
  color: var(--nu-brand) !important;
  border: 1px solid var(--nu-line);
  box-shadow: var(--nu-shadow-1);
  font-size: .8rem;
}
body.ui-northern .in-hero .btn-outline-secondary,
body.ui-northern .in-hero .btn-outline-light { background: #fff !important; color: var(--nu-ink) !important; border: 1px solid var(--nu-line) !important; }

/* ---------- 6. Sections & headings --------------------------------------- */
body.ui-northern .in-section,
body.ui-northern .in-section-premium { padding-block: clamp(3.5rem, 8vw, 6rem) !important; background: transparent; }
body.ui-northern .in-section.pt-0 { padding-top: 0 !important; }
body.ui-northern .in-hero + .in-section.pt-0 { padding-top: clamp(2rem, 4vw, 3rem) !important; }
body.ui-northern .in-section-premium.alt { background: var(--nu-gray) !important; border: 0 !important; }
body.ui-northern .in-section-head { margin-bottom: clamp(1.5rem, 3vw, 2.4rem) !important; gap: 1rem; flex-wrap: wrap; }
body.ui-northern .in-section-title {
  font-size: clamp(2rem, 3.6vw, 3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08;
  margin-bottom: .35rem;
}
body.ui-northern .in-section-title::after { display: none !important; }
body.ui-northern .in-section-head p { font-size: 1.08rem; color: var(--nu-mute) !important; }

/* ---------- 7. Cards ----------------------------------------------------- */
body.ui-northern .in-cover-card,
body.ui-northern .public-entity-card,
body.ui-northern .in-card,
body.ui-northern .gallery-card,
body.ui-northern .in-touch-card,
body.ui-northern .in-touch-form-card {
  position: relative;
  background: var(--nu-surface) !important;
  border: 1px solid var(--nu-line) !important;
  border-radius: var(--nu-r) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: transform .45s var(--nu-ease), box-shadow .45s var(--nu-ease);
}
body.ui-northern .in-section-premium.alt .in-cover-card { border-color: transparent !important; }
body.ui-northern .in-cover-card:hover,
body.ui-northern a.public-entity-card:hover,
body.ui-northern .gallery-card:hover { transform: translateY(-4px); box-shadow: var(--nu-shadow-2) !important; }

/* Image area: inset, rounded, zooms gently on hover (Anvogue). */
body.ui-northern .in-cover-card .cover-img,
body.ui-northern .in-cover-card .cover-initials,
body.ui-northern .public-cover-card {
  height: auto !important;
  aspect-ratio: 4 / 3;
  margin: 10px 10px 0;
  border-radius: 14px !important;
  overflow: hidden;
  transition: transform .8s var(--nu-ease);
}
body.ui-northern .in-cover-card .cover-img::after { display: none !important; }
body.ui-northern .in-cover-card:hover .cover-img,
body.ui-northern .public-entity-card:hover .public-cover-card { transform: scale(1.025); }
body.ui-northern .in-cover-card .card-body,
body.ui-northern .public-entity-card .card-body { padding: 1.1rem 1.25rem 1.35rem !important; }
body.ui-northern .in-cover-card h5,
body.ui-northern .public-entity-card h5 { font-size: 1.14rem; font-weight: 650; letter-spacing: -0.02em; margin-bottom: .35rem; }

/* Placeholder art: pastel wash + brand-ink icon instead of flat purple. */
body.ui-northern .in-cover-card .cover-initials,
body.ui-northern .public-cover-card:not([style*="url("]) {
  display: grid !important;
  place-items: center;
  background: var(--nu-lilac) !important;
  color: var(--nu-lilac-ink) !important;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
body.ui-northern .row > :nth-child(4n+2) .cover-initials,
body.ui-northern .row > :nth-child(4n+2) .public-cover-card:not([style*="url("]) { background: var(--nu-mint) !important; color: var(--nu-mint-ink) !important; }
body.ui-northern .row > :nth-child(4n+3) .cover-initials,
body.ui-northern .row > :nth-child(4n+3) .public-cover-card:not([style*="url("]) { background: var(--nu-peach) !important; color: var(--nu-peach-ink) !important; }
body.ui-northern .row > :nth-child(4n+4) .cover-initials,
body.ui-northern .row > :nth-child(4n+4) .public-cover-card:not([style*="url("]) { background: var(--nu-sky) !important; color: var(--nu-sky-ink) !important; }
body.ui-northern .cover-initials .ti { font-size: 2.4rem; opacity: .9; }

/* Calendar tile for events without a photo. */
body.ui-northern .nu-date {
  display: grid; place-items: center;
  width: 92px; height: 100px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.25);
  line-height: 1;
}
body.ui-northern .nu-date-m { display: block; width: 100%; padding: .45rem 0 .3rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: #e5484d; border-radius: 18px 18px 0 0; text-align: center; }
body.ui-northern .nu-date-d { font-size: 2.6rem; font-weight: 700; color: var(--nu-ink); letter-spacing: -0.04em; padding-bottom: .5rem; }

/* Clickable cards with one link (whole card is the target). */
body.ui-northern .nu-card-link { color: inherit !important; text-decoration: none; }
body.ui-northern .nu-card-link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
body.ui-northern .in-cover-card .btn { position: relative; z-index: 2; }

/* Project progress: slim Apple bar. */
body.ui-northern .progress-in { height: 6px !important; background: #ececf0 !important; border-radius: 99px; overflow: hidden; margin-top: .6rem; }
body.ui-northern .progress-in .bar { background: linear-gradient(90deg, var(--nu-brand), var(--nu-teal)) !important; border-radius: 99px; }

/* Entity list pages (events, projects, communities). */
body.ui-northern .public-entity-card { color: var(--nu-ink-2) !important; }
body.ui-northern .public-entity-card .btn { align-self: flex-start; }

/* ---------- 8. CTA, gallery, supporters ---------------------------------- */
body.ui-northern .in-cta-premium {
  position: relative;
  overflow: hidden;
  border-radius: var(--nu-r-lg) !important;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem) !important;
  text-align: center;
  background:
    radial-gradient(60% 90% at 0% 0%, color-mix(in oklab, var(--nu-brand) 85%, white) 0%, transparent 60%),
    radial-gradient(50% 80% at 100% 100%, color-mix(in oklab, var(--nu-teal) 90%, white) 0%, transparent 60%),
    #1d1b33 !important;
  box-shadow: none !important;
}
body.ui-northern .in-cta-premium::before { display: none !important; }
body.ui-northern .in-cta-premium h2 {
  color: #fff !important;
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  letter-spacing: -0.04em !important;
  font-weight: 700 !important;
}
body.ui-northern .in-cta-premium p { color: rgba(255,255,255,.82) !important; font-size: 1.15rem; max-width: 34rem; margin-inline: auto; }
body.ui-northern .in-cta-premium .btn { margin: .3rem; }

body.ui-northern .gallery-card img,
body.ui-northern .gallery-thumb { border-radius: 14px; }

/* ---------- 9. Forms & sign-in ------------------------------------------- */
body.ui-northern .form-control,
body.ui-northern .form-select {
  background-color: var(--nu-gray);
  border: 1px solid transparent;
  border-radius: var(--nu-r-sm);
  color: var(--nu-ink);
  padding: .7rem .9rem;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
body.ui-northern .form-control-lg { padding: .85rem 1rem; font-size: 1.02rem; }
body.ui-northern .form-control:focus,
body.ui-northern .form-select:focus {
  background-color: #fff;
  border-color: color-mix(in oklab, var(--nu-brand) 55%, white);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--nu-brand) 16%, transparent);
}
body.ui-northern .form-label { color: var(--nu-ink); font-weight: 560; font-size: .9rem; }
body.ui-northern .form-check-input:checked { background-color: var(--nu-brand); border-color: var(--nu-brand); }

body.ui-northern.auth-body {
  background:
    radial-gradient(50% 60% at 10% 0%, var(--nu-lilac) 0%, transparent 60%),
    radial-gradient(45% 55% at 100% 30%, var(--nu-mint) 0%, transparent 60%),
    radial-gradient(40% 50% at 40% 100%, var(--nu-peach) 0%, transparent 60%),
    var(--nu-bg) !important;
}
body.ui-northern .in-auth-header { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.ui-northern .in-auth-brand img { max-height: 32px; }
body.ui-northern .auth-card {
  background: rgba(255,255,255,.78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: var(--nu-r-lg) !important;
  box-shadow: 0 30px 80px -30px rgba(29,29,31,.28) !important;
  padding: clamp(1.8rem, 4vw, 2.8rem) !important;
}
body.ui-northern .auth-card h4 { font-size: 1.9rem; letter-spacing: -0.035em; font-weight: 700; }
body.ui-northern .auth-logo {
  width: 56px !important; height: 56px !important;
  border-radius: 16px !important;
  display: grid !important; place-items: center;
  background: linear-gradient(135deg, var(--nu-brand), var(--nu-teal)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -10px var(--nu-brand) !important;
}
body.ui-northern .auth-card .form-control { background-color: rgba(0,0,0,.04); }

/* ---------- 10. Footer & cookie banner ----------------------------------- */
body.ui-northern .in-footer {
  background: var(--nu-gray) !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--nu-line);
  margin-top: 0 !important;
  padding-block: 3.5rem 2rem !important;
}
body.ui-northern .in-footer,
body.ui-northern .in-footer p, body.ui-northern .in-footer li,
body.ui-northern .in-footer small, body.ui-northern .in-footer .small,
body.ui-northern .in-footer span, body.ui-northern .in-footer .text-muted { color: var(--nu-mute) !important; font-size: .86rem; }
body.ui-northern .in-footer a { color: var(--nu-ink-2) !important; font-size: .86rem; }
body.ui-northern .in-footer a:hover { color: var(--nu-ink) !important; text-decoration: underline; }
body.ui-northern .in-footer h6,
body.ui-northern .in-footer .text-white { color: var(--nu-ink) !important; font-size: .78rem !important; font-weight: 650; letter-spacing: .02em; text-transform: none !important; }
body.ui-northern .in-footer .footer-brand { color: var(--nu-ink) !important; font-size: 1.2rem; letter-spacing: -0.02em; }
body.ui-northern .in-footer hr { border-color: var(--nu-line-2) !important; opacity: 1; }
body.ui-northern .in-footer-social {
  width: 36px; height: 36px; display: inline-grid; place-items: center;
  border-radius: 50%; background: #fff; border: 1px solid var(--nu-line);
}
body.ui-northern main.in-main-content { padding-bottom: 0; }
body.ui-northern main.in-main-content > .in-home-premium > section:last-child { padding-bottom: clamp(3.5rem, 8vw, 6rem) !important; }

body.ui-northern .cookie-consent {
  left: 16px !important; right: auto !important; bottom: 16px !important;
  top: auto !important; transform: none !important;
  width: min(380px, calc(100vw - 32px)) !important; max-width: none !important;
  margin: 0 !important;
}
body.ui-northern .cookie-consent-inner {
  background: rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--nu-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--nu-shadow-2) !important;
  padding: 1rem 1.1rem !important;
  flex-direction: column; align-items: stretch !important; gap: .75rem;
}
body.ui-northern .cookie-consent-msg { font-size: .86rem !important; line-height: 1.45 !important; color: var(--nu-mute) !important; }
body.ui-northern .cookie-consent-copy strong,
body.ui-northern .cookie-consent-copy h6 { font-size: .95rem; color: var(--nu-ink); }

/* ---------- 11. Motion --------------------------------------------------- */
body.ui-northern .nu-reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--nu-ease), transform .8s var(--nu-ease); }
body.ui-northern .nu-reveal.nu-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.ui-northern *, body.ui-northern *::before, body.ui-northern *::after { transition: none !important; animation: none !important; }
  body.ui-northern .nu-reveal { opacity: 1; transform: none; }
}

/* Phone */
@media (max-width: 767.98px) {
  body.ui-northern { font-size: 15.5px; }
  body.ui-northern .in-carousel-section { padding: 8px 8px 0 !important; }
  body.ui-northern .in-hero-carousel { border-radius: 22px; }
  body.ui-northern .in-carousel-slide-wrap { min-height: 72vh; }
  body.ui-northern .in-section-head { align-items: flex-start !important; }
  body.ui-northern .in-navbar .navbar-collapse {
    background: rgba(251,251,253,.96); border-radius: 18px; margin-top: .5rem; padding: .5rem; box-shadow: var(--nu-shadow-2);
  }
  body.ui-northern .in-cta-premium { border-radius: 22px !important; }
}

/* ---------- 12. Portal & admin shell ------------------------------------- */
body.ui-northern .pc-container,
body.ui-northern .pc-content { background: var(--nu-gray) !important; }
body.ui-northern[data-pc-theme="light"] { background: var(--nu-gray) !important; }

body.ui-northern .pc-sidebar {
  background: rgba(250, 250, 252, .82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border-right: 1px solid var(--nu-line) !important;
  box-shadow: none !important;
}
body.ui-northern .pc-sidebar .m-header { border: 0 !important; background: transparent !important; }
body.ui-northern .pc-sidebar #pc-nav-filter { border-radius: 10px; background: rgba(0,0,0,.05); border: 0; padding: .5rem .75rem; font-size: .86rem; }
body.ui-northern .pc-sidebar .pc-link {
  border-radius: 10px !important;
  margin: 1px 10px !important;
  padding: .5rem .7rem !important;
  color: var(--nu-ink-2) !important;
  font-size: .9rem;
  font-weight: 500;
  background: transparent !important;
  transition: background .15s;
}
body.ui-northern .pc-sidebar .pc-link:hover { background: rgba(0,0,0,.05) !important; color: var(--nu-ink) !important; }
body.ui-northern .pc-sidebar .pc-link.active,
body.ui-northern .pc-sidebar .pc-item.active > .pc-link {
  background: #fff !important;
  color: var(--nu-ink) !important;
  font-weight: 600;
  box-shadow: var(--nu-shadow-1) !important;
}
body.ui-northern .pc-sidebar .pc-link.active .pc-micon,
body.ui-northern .pc-sidebar .pc-link.active .pc-micon i { color: var(--portal-accent, var(--nu-brand)) !important; }
body.ui-northern .pc-sidebar .pc-link::before,
body.ui-northern .pc-sidebar .pc-link::after { display: none !important; }
body.ui-northern .pc-sidebar .pc-hasmenu > .pc-link {
  font-size: .72rem !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--nu-faint) !important;
  font-weight: 650;
  margin-top: .6rem !important;
}
body.ui-northern .pc-sidebar .pc-hasmenu > .pc-link .pc-micon { display: none; }
body.ui-northern .pc-sidebar .pc-micon i,
body.ui-northern .pc-sidebar .pc-micon { color: var(--nu-mute); }

body.ui-northern .pc-header {
  background: rgba(245, 245, 247, .78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--nu-line) !important;
  box-shadow: none !important;
}
body.ui-northern .pc-header .pc-head-link { border-radius: 10px; }

body.ui-northern .pc-content .card {
  border: 1px solid var(--nu-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  background: #fff;
}
body.ui-northern .pc-content .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--nu-line) !important;
  padding: 1rem 1.25rem;
}
body.ui-northern .pc-content .card-header h5,
body.ui-northern .pc-content .card-header h6,
body.ui-northern .dash-panel-title { font-size: .98rem !important; font-weight: 650; letter-spacing: -0.015em; color: var(--nu-ink) !important; }
body.ui-northern .page-header { background: transparent !important; box-shadow: none !important; }
body.ui-northern .page-header h2,
body.ui-northern .page-header .page-block h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -0.03em; font-weight: 700; }

body.ui-northern .pc-content .table { --bs-table-bg: transparent; }
body.ui-northern .pc-content .table thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--nu-faint) !important; font-weight: 650;
  background: transparent !important; border-bottom: 1px solid var(--nu-line) !important;
}
body.ui-northern .pc-content .table td { border-color: var(--nu-line) !important; }

/* Dashboard hero: white card, accent orb, big friendly greeting. */
body.ui-northern .dash-hero-v2 .dash-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(45% 120% at 100% 0%, color-mix(in oklab, var(--dash-accent, var(--nu-brand)) 16%, white) 0%, transparent 70%),
    radial-gradient(35% 90% at 0% 100%, var(--nu-mint) 0%, transparent 70%),
    #fff !important;
  color: var(--nu-ink-2) !important;
  border: 1px solid var(--nu-line) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  padding: clamp(1.4rem, 3vw, 2.2rem) !important;
}
body.ui-northern .dash-hero-v2 .dash-hero::before,
body.ui-northern .dash-hero-v2 .dash-hero::after { display: none !important; }
body.ui-northern .dash-hero-title {
  color: var(--nu-ink) !important;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
}
body.ui-northern .dash-hero-sub { color: var(--nu-mute) !important; font-size: 1.02rem; }
body.ui-northern .dash-hero-avatar { border-radius: 50% !important; border: 3px solid #fff !important; box-shadow: var(--nu-shadow-1); }
body.ui-northern .dash-hero-badge {
  background: color-mix(in oklab, var(--dash-accent, var(--nu-brand)) 12%, white) !important;
  color: color-mix(in oklab, var(--dash-accent, var(--nu-brand)) 80%, black) !important;
  border: 0 !important; border-radius: 980px !important; font-weight: 650;
}
body.ui-northern .dash-live-clock { color: var(--nu-mute) !important; background: rgba(0,0,0,.04) !important; border-radius: 980px; }
body.ui-northern .dash-glance-item {
  background: rgba(255,255,255,.8) !important;
  border: 1px solid var(--nu-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
body.ui-northern .dash-glance-val { color: var(--nu-ink) !important; font-weight: 700; letter-spacing: -0.03em; }
body.ui-northern .dash-glance-lbl { color: var(--nu-mute) !important; }
body.ui-northern .dash-insight { border-radius: 14px !important; border: 1px solid var(--nu-line) !important; background: rgba(255,255,255,.75) !important; color: var(--nu-ink-2) !important; }
body.ui-northern .dash-command-strip { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-inline: 0 !important; }
body.ui-northern .dash-command-label { color: var(--nu-mute) !important; }
body.ui-northern .dash-cmd-btn {
  border-radius: 980px !important;
  background: #fff !important;
  border: 1px solid var(--nu-line) !important;
  color: var(--nu-ink) !important;
  box-shadow: none !important;
  font-weight: 560;
}
body.ui-northern .dash-cmd-btn:hover { background: var(--nu-gray) !important; }
body.ui-northern .dash-cmd-btn.is-primary { background: var(--nu-ink) !important; color: #fff !important; border-color: var(--nu-ink) !important; }
body.ui-northern .dash-panel.card { border-radius: 20px !important; }
body.ui-northern .dash-toolbar .btn-group .btn { border-radius: 980px !important; margin-right: 4px; }

/* Lanes: the four jobs each portal exists for. */
body.ui-northern .nu-lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 1.1rem 0 1.4rem;
}
body.ui-northern .nu-lane {
  position: relative;
  border-radius: 22px;
  padding: 1.2rem 1.25rem 1.1rem;
  background: var(--nu-lane-bg);
  color: var(--nu-lane-ink);
  transition: transform .35s var(--nu-ease), box-shadow .35s var(--nu-ease);
}
body.ui-northern .nu-lane:hover { transform: translateY(-3px); box-shadow: var(--nu-shadow-2); }
body.ui-northern .nu-tone-lilac { --nu-lane-bg: var(--nu-lilac); --nu-lane-ink: var(--nu-lilac-ink); }
body.ui-northern .nu-tone-mint  { --nu-lane-bg: var(--nu-mint);  --nu-lane-ink: var(--nu-mint-ink); }
body.ui-northern .nu-tone-peach { --nu-lane-bg: var(--nu-peach); --nu-lane-ink: var(--nu-peach-ink); }
body.ui-northern .nu-tone-sky   { --nu-lane-bg: var(--nu-sky);   --nu-lane-ink: var(--nu-sky-ink); }
body.ui-northern .nu-lane-icon {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 13px;
  background: #fff; color: var(--nu-lane-ink);
  font-size: 1.3rem; margin-bottom: .8rem;
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.35);
}
body.ui-northern .nu-lane-title { font-size: 1.12rem !important; margin: 0 0 .25rem; letter-spacing: -0.02em; }
body.ui-northern .nu-lane-title a { color: var(--nu-ink) !important; text-decoration: none; }
body.ui-northern .nu-lane-title a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
body.ui-northern .nu-lane-text { font-size: .88rem; color: var(--nu-lane-ink); opacity: .85; margin: 0 0 .8rem; }
body.ui-northern .nu-lane-links { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
body.ui-northern .nu-lane-links a {
  font-size: .8rem; font-weight: 600;
  padding: .3rem .7rem; border-radius: 980px;
  background: rgba(255,255,255,.75); color: var(--nu-lane-ink) !important;
  text-decoration: none;
}
body.ui-northern .nu-lane-links a:hover { background: #fff; }
@media print { body.ui-northern .nu-reveal { opacity: 1 !important; transform: none !important; } }

/* Cookie banner: one frame, not two. */
body.ui-northern .cookie-consent { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* Listing placeholders carry an icon or initials. */
body.ui-northern .public-cover-card .ti { font-size: 2.4rem; }
/* The legacy hero wrapper drew a second frame around hero + quick launch. */
body.ui-northern .dash-shell.dash-hero-v2 { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
body.ui-northern .dash-smart-insights { background: transparent !important; border-top: 1px solid var(--nu-line) !important; padding-inline: 0 !important; }
body.ui-northern .dash-command-strip { margin-top: .9rem; }
body.ui-northern .pc-container .pc-content { padding: clamp(16px, 2.2vw, 28px) !important; }

/* ---------- 13. Coloured heroes (donate, entity pages, encyclopedia) ------ */
/* White titles stay white on photo/gradient heroes (the ink heading rule above
   must not reach them), and the heroes become inset rounded cards. */
body.ui-northern .dn-hero h1, body.ui-northern .dn-hero h2, body.ui-northern .dn-hero .h1,
body.ui-northern .pe-hero h1, body.ui-northern .pe-hero h2 { color: #fff !important; letter-spacing: -0.04em; }
body.ui-northern .dn-hero {
  margin: 12px 12px 0;
  border-radius: var(--nu-r-lg) !important;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem) !important;
  background:
    radial-gradient(60% 90% at 0% 0%, color-mix(in oklab, var(--nu-brand) 85%, white) 0%, transparent 60%),
    radial-gradient(50% 80% at 100% 100%, color-mix(in oklab, var(--nu-teal) 90%, white) 0%, transparent 60%),
    #1d1b33 !important;
}
body.ui-northern .dn-hero::after { opacity: .15; }
body.ui-northern .dn-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem) !important; font-weight: 700 !important; }
body.ui-northern .pe-hero {
  margin: 12px 12px 2rem;
  border-radius: var(--nu-r-lg) !important;
  min-height: 340px;
}
body.ui-northern .pe-hero .container { padding-top: 5rem; }
body.ui-northern .pe-hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; }
body.ui-northern .pe-hero-bg[style*="linear-gradient"] {
  background:
    radial-gradient(60% 90% at 0% 0%, color-mix(in oklab, var(--nu-brand) 85%, white) 0%, transparent 60%),
    radial-gradient(50% 80% at 100% 100%, color-mix(in oklab, var(--nu-teal) 90%, white) 0%, transparent 60%),
    #1d1b33 !important;
}
body.ui-northern .pe-kicker { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

body.ui-northern .imagi-hero {
  background:
    radial-gradient(60% 120% at 0% 0%, var(--nu-lilac) 0%, transparent 60%),
    radial-gradient(50% 120% at 100% 0%, var(--nu-mint) 0%, transparent 62%),
    #fff !important;
  border: 1px solid var(--nu-line);
  box-shadow: none !important;
  border-radius: var(--nu-r-lg) !important;
  color: var(--nu-ink) !important;
}
body.ui-northern .imagi-hero::after { display: none; }
body.ui-northern .imagi-hero *:not(input):not(button):not(.btn) { color: var(--nu-ink) !important; }
body.ui-northern .imagi-hero .text-white-50, body.ui-northern .imagi-hero small, body.ui-northern .imagi-hero p { color: var(--nu-mute) !important; }
body.ui-northern .imagi-hero input { background: #fff !important; border: 1px solid var(--nu-line) !important; color: var(--nu-ink) !important; border-radius: 980px !important; }
body.ui-northern .imagi-hero .imagi-brand { font-weight: 700; font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
body.ui-northern .dn-hero p, body.ui-northern .dn-hero .dn-lead, body.ui-northern .dn-hero .small,
body.ui-northern .dn-hero .fw-bold, body.ui-northern .dn-hero .dn-eyebrow { color: rgba(255,255,255,.88) !important; }