/*
Theme Name: UKRIC
Theme URI: https://ukric.org
Author: Ukraine Invention Convention
Author URI: https://ukric.org
Description: Official theme for UKRIC — Ukraine Invention Convention.
Version: 6.9.11
License: GNU General Public License v2 or later
Text Domain: ukric
*/

/* ── Fonts (self-hosted variable) ────────────────────────────────── */
@font-face{font-family:'Nunito';src:url('assets/fonts/Nunito-VariableFont_wght.ttf') format('truetype-variations');font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito';src:url('assets/fonts/Nunito-Italic-VariableFont_wght.ttf') format('truetype-variations');font-weight:200 1000;font-style:italic;font-display:swap}
@font-face{font-family:'Outfit';src:url('assets/fonts/Outfit-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap}

/* ── Selection ───────────────────────────────────────────────────── */
::selection { background: var(--yellow); color: var(--blue); }
::-moz-selection { background: var(--yellow); color: var(--blue); }

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; }

:root {
  /* colours — 2.0 palette on the legacy token names */
  --cream:   #FFFFFF;
  --cream2:  #E9F0FA;
  --blue:    #00337A;
  /* Type tokens: display is Nunito (the mark's own geometry), body is Outfit.
     Both were referenced across the sheet but never defined, so every rule
     using them silently fell back — and several fell back to Outfit for
     display type, which is the wrong face. */
  --font-display: 'Nunito', system-ui, sans-serif;
  --font-sans:    'Outfit', 'Nunito', system-ui, sans-serif;
  --blue2:   #4E7BB8;
  --navy:    #001E4A;
  --yellow:  #FFC302;
  --white:   #ffffff;
  --text:    #3A414B;
  --muted:   #6B7689;
  --border:  rgba(0,51,122,.10);
  /* radii */
  --r-sm:    8px;
  --r-md:    16px;
  --r-lg:    24px;
  --r-xl:    32px;
  --r-pill:  999px;
  /* shadows / transitions */
  --shadow:  0 8px 24px rgba(0,51,122,.10);
  --shadow2: 0 2px 8px rgba(0,51,122,.06);
  --trans:   all 200ms cubic-bezier(.2,.8,.2,1);
  /* spacing — unchanged, these were already right */
  --px:         32px;
  --section-py: 96px;
  --section-py-sm: 56px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--blue); text-decoration: none; transition: var(--trans); }
a:hover { color: var(--navy); }

/* ── Typography ──────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  color: var(--blue);
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: 1.25rem; font-weight: 800; }
h4 { font-size: 1rem; font-weight: 700; }

p { margin-bottom: 1rem; color: var(--muted); }
p:last-child { margin-bottom: 0; }

/* Yellow text highlight (like marker) */
.highlight {
  background: var(--yellow);
  padding: 0 6px 2px;
  border-radius: 4px;
  color: var(--blue);
}

/* Pill eyebrow tag */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,51,122,.08);
  color: var(--blue);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  margin-bottom: 20px;
}
.eyebrow-pill::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--blue);
  border-radius: 50%;
}
.eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .75rem;
}

/* ── Layout ──────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--px);
}
.section     { padding: var(--section-py) 0; }
.section--sm { padding: var(--section-py-sm) 0; }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--blue  { background: var(--blue); }
.section--navy  { background: var(--navy); }
.section--yellow { background: var(--yellow); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  transition: var(--trans);
  border: 2px solid transparent;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.btn-blue {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.btn-blue:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,51,122,.30);
}
.btn-yellow {
  background: var(--yellow);
  color: var(--blue);
  border-color: var(--yellow);
}
.btn-yellow:hover {
  background: #E5AE00;
  border-color: #E5AE00;
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: none;
}
.btn-outline-blue {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-outline-blue:hover {
  background: var(--blue);
  color: var(--white);
}
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.5);
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--blue);
  border-color: var(--white);
}
.btn-white {
  background: var(--white);
  color: var(--blue);
  border-color: var(--white);
}
.btn-white:hover {
  background: var(--cream);
  color: var(--navy);
}
.btn-arrow::after { content: ' →'; }

/* ── Navigation ──────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--white);
  /* No hairline: on white the header reads as part of the page, and the
     scrolled shadow is what separates it once there is content under it. */
  border-bottom: 0;
  transition: var(--trans);
}
.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(0,51,122,.08);
}
/* The fixed header must clear the WordPress admin bar for logged-in admins —
   otherwise its top 32px hides behind the bar AND a 32px empty gap opens between
   the header and the page content (html gets margin-top:32 but the fixed header
   stays at top:0). Public visitors have no admin bar, so this never applies to
   them. Breakpoints match WP's admin bar: 32px desktop, 46px ≤782px, and ≤600px
   the bar becomes position:absolute (scrolls away) so the header returns to 0. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar .site-header { top: 0; } }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding-right: 14px;   /* brand clear space: ≥ one dot diameter of the lockup */
}

/* Nav right group */
.nav-right {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}

/* Menu — DS Header: plain labels, active gets a 2px gold underline. */
.nav-menu {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 32px;
  margin-right: 32px;
}
.nav-menu li a {
  position: relative;
  color: var(--text);
  /* Nunito covers BOTH Latin and Cyrillic. The body font (Outfit) has no
     Cyrillic, so English nav rendered in Outfit while Ukrainian fell back to
     Nunito — same weight, different typeface, visibly different boldness.
     Pinning the nav to Nunito makes both languages identical. */
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 0;          /* real hit area — the underline is drawn by ::after */
  border-radius: 0;
  background: none;
  transition: color .2s;
  display: block;
}
.nav-menu li a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  height: 2px;
  background: transparent;
  transition: background .2s;
}
.nav-menu li a:hover {
  color: var(--text);         /* the underline does the work — the label keeps its charcoal */
  background: none;
}
.nav-menu li a:hover::after { background: var(--yellow); }
.nav-menu li.current-menu-item > a {
  color: var(--blue);
  background: none;
}
.nav-menu li.current-menu-item > a::after { background: var(--yellow); }
.nav-menu li.nav-donate > a {
  background: var(--blue);
  color: var(--white);
  padding: 10px 22px;
  margin-left: 8px;
}
.nav-menu li.nav-donate > a:hover {
  background: var(--navy);
  color: var(--white);
}
.nav-menu li.nav-donate > a::after {
  content: ' ♥';
  font-size: .8em;
}
.site-header .nav-donate-btn {
  display: inline-flex;
  align-items: center;
  align-self: center;
  background: var(--blue);
  color: #fff !important;
  font-size: .9375rem;
  font-weight: 800;
  padding: 10px 26px;
  border-radius: var(--r-pill);
  margin-left: 10px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,51,122,.28);
  transition: var(--trans);
}
.site-header .nav-donate-btn:hover {
  background: var(--blue);
  color: #fff !important;
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: var(--trans);
}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  background: var(--cream);
  padding: 140px 0 100px;
  overflow: hidden;
  position: relative;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Left: image block */
.hero-image-block {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* Yellow blob top-left */
.hero-blob-tl {
  position: absolute;
  width: 220px; height: 220px;
  background: var(--yellow);
  border-radius: 50%;
  top: -30px; left: -30px;
  z-index: 0;
}
/* Yellow blob bottom-right (smaller) */
.hero-blob-br {
  position: absolute;
  width: 120px; height: 120px;
  background: var(--yellow);
  border-radius: 50%;
  bottom: -20px; right: -10px;
  z-index: 0;
  opacity: .6;
}
.hero-img-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4/4.5;
  background: var(--cream2);
}
.hero-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  background: linear-gradient(135deg, var(--cream2), var(--cream));
}
/* Award badge */
.hero-award-badge {
  position: absolute;
  bottom: -16px; left: 24px;
  z-index: 2;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 14px 20px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}
.badge-icon {
  width: 40px; height: 40px;
  background: var(--yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.badge-text strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--blue);
  line-height: 1;
}
.badge-text span {
  font-size: .72rem;
  color: var(--muted);
  display: block;
  margin-top: 2px;
  line-height: 1.3;
}

/* Right: hero content */
.hero-content { padding-bottom: 16px; }
.hero-content h1 { margin-bottom: 20px; }
.hero-content p {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 480px;
  margin-bottom: 36px;
  line-height: 1.7;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Stats Bar ───────────────────────────────────────────────────── */
.stats-bar {
  background: var(--white);
  padding: 48px 0 69px;
  position: relative;
  overflow: hidden;
}
.stats-bar::after { content: none; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
  z-index: 1;
  padding-top: 56px;
}
/* The rail: one hairline across the row, a golden dot marking each stat. */
.stats-grid::before {
  content: '';
  position: absolute;
  top: 6px; left: 0; right: 0;
  height: 1px;
  background: #D3E1F4;
}
/* DS StatCard, plain tone: the number is the hero, the icon is quiet support. */
.stat-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  align-items: start;
  text-align: left;
  padding: 0;
  border-right: none;
}
.stat-item::before {
  content: '';
  position: absolute;
  top: -56px;                /* centres the dot on the rail (grid padding-top 56, rail at 6) */
  left: 56px;                /* lines up with the number, past the icon column */
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--yellow);
}
.stat-icon {
  grid-row: span 2;
  width: 40px; height: 40px;
  display: block;
  margin-top: 4px;
}
.stat-number {
  display: block;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: clamp(1.875rem, 2.6vw, 2.5rem);
  font-weight: 800;
  color: var(--blue);
  line-height: 1.08;
  margin-bottom: 12px;
  letter-spacing: -.016em;
}
.stat-label {
  display: block;
  font-size: 15px;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.6;
  max-width: 26ch;
  text-wrap: pretty;
}

/* ── Section titles ──────────────────────────────────────────────── */
.section-title {
  text-align: center;
  margin-bottom: 56px;
}
.section-title h2 { margin-bottom: 14px; }
.section-title p {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
}

/* ── Cards (generic) ─────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid rgba(0,51,122,.06);
  transition: var(--trans);
}
.card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.card-img-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--cream2), #ddd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.card-body { padding: 28px; }
.card-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(0,51,122,.08);
  color: var(--blue);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 12px;
}
.card h3 { color: var(--blue); margin-bottom: 8px; font-size: 1.05rem; }
.card p  { font-size: .9rem; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem;
  font-weight: 700;
  color: var(--blue);
  margin-top: 16px;
  transition: var(--trans);
}
.card-link::after { content: ' →'; transition: var(--trans); }
.card:hover .card-link { gap: 10px; }

/* ── Inventor cards ──────────────────────────────────────────────── */
.inventor-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid rgba(0,51,122,.06);
  transition: var(--trans);
}
.inventor-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.inventor-card .inv-photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--cream2);
}
.inventor-card .inv-photo-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #E9F0FA, #d0c8b8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}
.inventor-card .inv-body { padding: 24px; }
.award-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  font-weight: 800;
  color: #6b4900;
  background: var(--yellow);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}
.inventor-card h3 { color: var(--blue); margin-bottom: 4px; }
.invention-name {
  font-size: .72rem;
  font-weight: 800;
  color: var(--blue2);
  text-transform: uppercase;
  letter-spacing: .1em;
  display: block;
  margin-bottom: 10px;
}
.inventor-card p { font-size: .88rem; line-height: 1.6; }

/* ── In the News section ─────────────────────────────────────────── */
.news {
  background: var(--cream);
  padding: 100px 40px;
  /* Inter is not in this system — body type is Outfit. */
  font-family: var(--font-sans);
}
.news__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 50px;
}
.news__eyebrow {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
}
.news__title {
  margin-top: 10px;
  font-weight: 900;
  font-size: 46px;
  letter-spacing: -1.5px;
  color: var(--blue);
}
.news__lead {
  max-width: 360px;
  font-size: 15px;
  line-height: 1.55;
  color: #16213E;
  opacity: .65;
}
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Card */
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-radius: 28px;
  overflow: hidden;
  position: relative; /* for the stretched CTA link below */
  cursor: pointer;
}
/* Make the whole card clickable via the CTA link (no nested buttons here). */
.news-card__cta::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.news-card { transition: transform .15s ease, box-shadow .15s ease; }
.news-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(22,33,62,.16); }
.news-card__media { position: relative; }
.news-card__thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.news-card__thumb--placeholder {
  background: #dcd4c2
    repeating-linear-gradient(135deg, transparent 0 16px, rgba(0,51,122,.06) 16px 32px);
}
.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 28px;
}
.news-card__headline {
  margin-bottom: 18px;
  min-height: 99px; /* reserves ~4 lines so every CTA aligns on the same baseline */
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.5px;
  color: #16213E;
}
.news-card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.news-card__cta:hover {
  /* no transform here: it would make the button the containing block for its
     stretched ::after, causing a hover/position flicker. Lift the card instead. */
  background: #16309a;
}

/* All news */
.news__all {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.news__all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 34px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.news__all-btn:hover {
  transform: translateY(-2px);
  background: #16309a;
  color: var(--white); /* keep text white; beats the global a:hover color */
}

@media (max-width: 768px) {
  .news { padding: 60px 20px; }
  .news__grid { grid-template-columns: 1fr; }
  .news-card__headline { min-height: 0; }
  .news__title { font-size: 34px; }
}

/* ── Partners ────────────────────────────────────────────────────── */
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.partner-tag {
  background: var(--white);
  color: var(--blue);
  font-size: .8rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(0,51,122,.15);
  transition: var(--trans);
}
.partner-tag:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

/* ── Home partners grid ──────────────────────────────────────────── */
.hp-partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) { .hp-partners-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .hp-partners-grid { grid-template-columns: 1fr; } }
.hp-partner-card {
  background: var(--white);
  border: 1.5px solid rgba(0,51,122,.1);
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.hp-partner-card:hover { border-color: var(--yellow); box-shadow: 0 8px 24px rgba(22,33,62,.08); }
.hp-partner-initial {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--blue); color: var(--yellow);
  font-weight: 900; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.hp-partner-logo {
  flex: none;
  height: 40px;
  max-width: 160px;
  border-radius: 6px;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.hp-partner-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.hp-partner-card span {
  font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--text);
  min-width: 0; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ── Mission strip ───────────────────────────────────────────────── */
.mission-strip {
  background: var(--yellow);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.mission-strip::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  top: -80px; right: 6%;
}
.mission-strip blockquote {
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 800;
  color: var(--navy);
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.45;
  position: relative;
  z-index: 1;
  letter-spacing: -.02em;
}

/* ── CTA banner ──────────────────────────────────────────────────── */
.cta-banner {
  background: var(--blue);
  padding: 88px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: rgba(0,51,122,.08);
  border-radius: 50%;
  top: -120px; right: 8%;
}
.cta-banner::after {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
  bottom: -80px; left: 6%;
}
.cta-banner h2 { color: var(--white); margin-bottom: 14px; position: relative; z-index: 1; }
.cta-banner p  { color: rgba(255,255,255,.75); max-width: 520px; margin: 0 auto 36px; font-size: 1.05rem; position: relative; z-index: 1; }
.cta-banner .btn-wrap { --cta-h: 64px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

/* ── Photo footer strip ──────────────────────────────────────────── */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 200px;
  overflow: hidden;
}
.photo-strip-item {
  overflow: hidden;
  position: relative;
}
.photo-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.photo-strip-item:hover img { transform: scale(1.06); }
.photo-strip-item .strip-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,51,122,.3);
  transition: var(--trans);
}
.photo-strip-item:hover .strip-overlay {
  background: rgba(0,51,122,.1);
}

/* ── Page hero ───────────────────────────────────────────────────── */
.page-hero {
  background: var(--cream);
  padding: 148px 0 80px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  background: var(--yellow);
  border-radius: 50%;
  top: -60px; right: -40px;
  opacity: .45;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { margin-bottom: 14px; }
.page-hero > .container > p { font-size: 1.1rem; max-width: 560px; }

/* ── Step cards ──────────────────────────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  counter-reset: step;
}
.step-item {
  background: var(--white);
  text-align: center;
  padding: 32px 16px 28px;
  border-radius: var(--r-lg);
  border: 1.5px solid rgba(0,51,122,.07);
  transition: var(--trans);
}
.step-item:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.step-item::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 900;
  font-size: 1rem;
  border-radius: 50%;
  margin: 0 auto 18px;
}
.step-item h4 { color: var(--blue); font-size: .95rem; margin-bottom: 7px; }
.step-item p  { font-size: .8rem; color: var(--muted); }

/* ── Team cards ──────────────────────────────────────────────────── */
.team-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid rgba(0,51,122,.07);
  transition: var(--trans);
}
.team-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.team-card .team-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.team-card .team-photo-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--yellow);
}
.team-card .team-body {
  padding: 24px;
  text-align: center;
}
.team-card h3 { color: var(--blue); margin-bottom: 4px; }
.team-card .role {
  font-size: .78rem;
  font-weight: 700;
  color: var(--blue2);
  text-transform: uppercase;
  letter-spacing: .07em;
  display: block;
  margin-bottom: 12px;
}
.team-card p { font-size: .88rem; }

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,.65);
  padding: 72px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 52px;
  padding-bottom: 56px;
}
.footer-brand p {
  font-size: .875rem;
  line-height: 1.7;
  max-width: 280px;
  margin-top: 16px;
}
.footer-col h4 {
  color: var(--white);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 700;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
  color: rgba(255,255,255,.55);
  font-size: .875rem;
  transition: var(--trans);
}
.footer-col ul li a:hover { color: var(--yellow); }
.footer-link--disabled { color: rgba(255,255,255,.28); font-size: .875rem; cursor: default; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom a { color: var(--yellow); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-image-block { max-width: 480px; margin: 0 auto; width: 100%; }
  .hero-content { order: -1; text-align: center; }
  .hero-content p { max-width: 100%; }
  .hero-ctas { justify-content: center; }
  .grid-2 { grid-template-columns: 1fr; gap: 36px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 48px; padding-top: 0; }
  .stats-grid::before, .stat-item::before { content: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .photo-strip { grid-template-columns: repeat(3, 1fr); }
  .photo-strip-item:nth-child(n+4) { display: none; }
}

@media (max-width: 768px) {
  :root { --px: 20px; --section-py: 64px; --section-py-sm: 40px; }
  .grid-3 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .nav-menu { display: none; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: var(--cream); padding: 16px 20px 24px; border-bottom: 1px solid var(--border); gap: 4px; margin-right: 0; align-items: flex-start; }
  .nav-menu li a { padding: 12px 0; }
  .nav-menu li a::after { display: none; }
  .nav-menu.is-open { display: flex; }
  .nav-toggle { display: flex; }
  .nav-donate-btn { margin-right: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .photo-strip { grid-template-columns: 1fr 1fr; height: 160px; }
  .photo-strip-item:nth-child(n+3) { display: none; }
  .hero { padding: 120px 0 80px; }
}

@media (max-width: 480px) {
  :root { --px: 16px; --section-py: 48px; }
  .stats-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .lang-switch { margin-right: 8px; }
  .lang-switch__item { padding: 4px 2px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO SLIDER  v4
   ═══════════════════════════════════════════════════════════════════ */

.hero-slider-wrap {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  background: var(--navy);
  margin-top: 72px; /* header height */
}

.hero-slider {
  display: flex;
  width: 100%;
  transition: transform .65s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* Each slide is a fixed-height box with background-image */
.hero-slide {
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  flex-shrink: 0;
  position: relative;
  min-height: 0;
  height: 540px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--navy);
  overflow: hidden;
}

/* ── Overlay layers (on top of background image) ────────────────── */
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(14, 30, 100, 0.15);
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    95deg,
    rgba(10, 20, 70, 0.55) 0%,
    rgba(10, 20, 70, 0.28) 55%,
    rgba(10, 20, 70, 0.04) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* ── Slide content ───────────────────────────────────────────────── */
.hero-slide .container {
  min-width: 0;
  box-sizing: border-box;
}
.hero-slide-content {
  position: relative;
  z-index: 3;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 32px 0;
  overflow: hidden;
}
.hero-slide-content .eyebrow-pill {
  background: rgba(255,255,255,.16);
  color: var(--yellow);
  border: 1px solid rgba(0,51,122,.4);
}
.hero-slide-content .eyebrow-pill::before { background: var(--yellow); }

.hero-slide-content h1 {
  color: var(--white);
  margin-bottom: 20px;
  text-shadow: 0 2px 16px rgba(0,0,0,.25);
  font-size: clamp(1.3rem, 3.5vw, 2.8rem);
  word-break: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  white-space: normal;
}
.hero-slide-content h1 .highlight {
  background: var(--yellow);
  color: var(--navy);
}
.hero-slide-content p {
  color: rgba(255,255,255,.85);
  font-size: 1.15rem;
  margin-bottom: 40px;
  max-width: 520px;
  line-height: 1.75;
}
.hero-slide-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-slide-ctas .btn-yellow {
  background: transparent;
  color: var(--yellow);
  border-color: var(--yellow);
}
.hero-slide-ctas .btn-yellow:hover {
  background: var(--yellow);
  color: var(--navy);
  border-color: var(--yellow);
}

/* ── No-image state: rich branded background ─────────────────────── */
.hero-slide--no-image {
  background:
    radial-gradient(ellipse 70% 80% at 80% 50%, rgba(0,51,122,.10) 0%, transparent 70%),
    linear-gradient(135deg, var(--blue) 0%, var(--navy) 60%, #060f2e 100%);
}
/* decorative yellow arc (bottom-right) */
.hero-slide--no-image::before {
  content: '';
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 80px solid rgba(0,51,122,.18);
  mix-blend-mode: normal;
  z-index: 1;
  pointer-events: none;
}
/* decorative smaller circle (top-right) */
.hero-slide--no-image::after {
  content: '';
  position: absolute;
  right: 180px;
  top: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 48px solid rgba(0,51,122,.10);
  background: transparent;
  mix-blend-mode: normal;
  z-index: 1;
  pointer-events: none;
}

/* ── Navigation arrows ───────────────────────────────────────────── */
.slider-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,.13);
  border: 2px solid rgba(255,255,255,.35);
  color: var(--white);
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--trans);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.slider-arrow:hover {
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.7);
  transform: translateY(-50%) scale(1.07);
}
.slider-arrow-prev { left: 24px; }
.slider-arrow-next { right: 24px; }

/* ── Dots ────────────────────────────────────────────────────────── */
.slider-dots {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
  align-items: center;
}
.slider-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.38);
  border: none;
  cursor: pointer;
  transition: var(--trans);
  padding: 0;
}
.slider-dot.active { background: var(--yellow); transform: scale(1.35); }
.slider-dot:hover  { background: rgba(255,255,255,.7); }

/* ── Progress bar ────────────────────────────────────────────────── */
.slider-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 4px;
  background: var(--yellow);
  z-index: 10;
  transition: width linear;
  opacity: .85;
}

/* ── Responsive ──────────────────────────────────────────────────── */
/* Desktop: restore larger padding, centered alignment, constrained width */
@media (min-width: 769px) {
  .hero-slide { align-items: center; }
  .hero-slide-content {
    padding: 0 72px;
    max-width: 680px;
    overflow: visible;
  }
}
@media (max-width: 768px) {
  .hero-slide {
    height: auto !important;
    min-height: 360px;
    align-items: flex-start;
  }
  .hero-slide-content { padding: 32px 0; }
  .hero-slide-content .eyebrow-pill { font-size: 0.58rem; }
  .hero-slide-content p { font-size: 0.9rem; margin-bottom: 28px; }
  .slider-arrow { width: 38px; height: 38px; font-size: 1rem; }
  .btn { padding: 12px 22px; font-size: .82rem; }
}
@media (max-width: 480px) {
  .hero-slide-content h1 { font-size: 20px; }
  .hero-slide-ctas { flex-direction: column; align-items: flex-start; }
  .slider-arrow-prev { left: 6px; }
  .slider-arrow-next { right: 6px; }
}

/* ════════════════════════════════════════════════════════════════════
   INVENTORS ARCHIVE (archive-inventor.php)
   ════════════════════════════════════════════════════════════════════ */

/* Hero */
.inv-hero {
  position: relative;
  padding: 120px 0 70px;   /* 72px header + 48px top gap (unified across pages) */
}
.inv-hero__blob {
  position: absolute;
  border-radius: 50%;
  background: var(--yellow);
  z-index: 0;
}
.inv-hero__blob--lg { width: 360px; height: 360px; top: 70px; right: -90px; }
.inv-hero__blob--sm { width: 110px; height: 110px; top: 150px; right: 270px; background: var(--navy); opacity: .10; }

.inv-hero__inner { position: relative; z-index: 1; max-width: 760px; }

.inv-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,51,122,.08);
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 26px;
  letter-spacing: .5px;
}
.inv-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  display: inline-block;
  flex-shrink: 0;
}

.inv-hero__h1 {
  font-weight: 900;
  font-size: 72px;
  line-height: 1.0;
  letter-spacing: -2px;
  color: var(--blue);
  margin-bottom: 24px;
}
.inv-hero__highlight {
  background: var(--yellow);
  padding: 0 12px;
  border-radius: 12px;
  color: var(--blue);
}
.inv-hero__sub {
  font-size: 22px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 640px;
}

/* Filter bar */
.inv-filter-bar {
  position: sticky;
  top: 78px;
  z-index: 150;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,51,122,.08);
  border-bottom: 1px solid rgba(0,51,122,.08);
  box-shadow: 0 8px 24px rgba(22,33,62,.05);
}
.inv-filter-bar .container { padding-top: 18px; padding-bottom: 18px; }

.inv-filter-form {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.inv-filter-search {
  position: relative;
  flex: 1 1 280px;
  min-width: 240px;
}
.inv-filter-search input {
  width: 100%;
  border: 1.5px solid rgba(0,51,122,.14);
  background: var(--cream);
  border-radius: 999px;
  padding: 13px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  outline: none;
  transition: var(--trans);
}
.inv-filter-search input:focus { border-color: var(--blue); background: #fff; }

.inv-filter-select-wrap {
  position: relative;
}
.inv-filter-select-wrap select {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  background: var(--cream);
  border: 1.5px solid rgba(0,51,122,.14);
  border-radius: 999px;
  padding: 13px 38px 13px 20px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: var(--trans);
}
.inv-filter-select-wrap select:focus { border-color: var(--blue); }
.inv-select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 11px;
  color: var(--blue);
}

.inv-clear-all {
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  text-decoration: underline;
  opacity: .7;
  white-space: nowrap;
}
.inv-clear-all:hover { opacity: 1; }

.inv-active-chips {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.inv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: var(--trans);
}
.inv-chip:hover { background: var(--navy); color: #fff; }

/* Grid */
.inv-grid-section { max-width: 1280px; margin: 0 auto; padding: 56px 40px 90px; }
.inv-count { font-weight: 700; font-size: 15px; color: var(--muted); margin-bottom: 28px; }

.inv-empty { text-align: center; padding: 70px 20px; }
.inv-empty h3 { font-weight: 900; font-size: 26px; color: var(--blue); margin-bottom: 10px; }
.inv-empty p  { font-size: 16px; color: var(--muted); }

.inv-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.inv-card {
  background: #fff;
  border: 2px solid transparent;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(22,33,62,.08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.inv-card:hover {
  transform: translateY(-6px);
  border-color: var(--yellow);
  box-shadow: 0 24px 56px rgba(0,51,122,.16);
}

.inv-card__photo {
  position: relative;
  height: 230px;
  overflow: hidden;
}
.inv-card__photo-lines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.06) 14px 28px);
}
.inv-card__award {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--yellow);
  color: var(--text);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .2px;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,30,74,.3);
}
/* (Retired: .inv-card__overlay / .inv-card__invention cobalt emoji band.
   The invention name now lives in the card body — see .inv-card__invention-name below.) */

.inv-card__body { padding: 24px 24px 26px; }

.inv-card__name-row {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 0;
}
.inv-card__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid var(--yellow);
  overflow: hidden;
  position: relative;
}
.inv-card__avatar-lines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(255,255,255,.08) 7px 14px);
}
/* Smaller than .inv-card__invention-name (28px) on purpose — the inventor's
   name is a byline under the headline invention title, not a second title.
   Sized up from an earlier 15px so it reads proportionate to the 48px
   avatar next to it, not lost beside it. */
.inv-card__name { font-weight: 700; font-size: 17px; color: var(--blue); letter-spacing: -.1px; }
.inv-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
/* UKRIC 2.0: emoji prefixes retired — a middot separates the meta items instead. */
.inv-card__meta span + span::before { content: '·'; margin-right: 14px; color: var(--muted); }
.inv-card__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start; /* .inv-card__body is a flex column now — without this the pill would stretch to the card's full width instead of staying badge-sized */
  gap: 6px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .3px;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
/* 4 lines reserved always (even for text short enough to fit in 2), same
   fixed-block reasoning as .inv-card__invention-name's 2-line reservation
   above — so .inv-card__link (margin-top:auto below) lands on the same
   bottom line across every card regardless of description length. */
.inv-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 18px;
  min-height: 6.2em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.inv-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start; /* same reason as .inv-card__tag above */
  margin-top: auto; /* pushes the link to the bottom of the flex-column body, flush with every other card's link regardless of how much text precedes it */
  gap: 6px;
  text-decoration: none;
  color: var(--blue);
  font-weight: 800;
  font-size: 14.5px;
  transition: gap .2s;
}
.inv-card__link:hover { gap: 10px; color: var(--blue); }

/* CTA */
.inv-cta-wrap { max-width: 1280px; margin: 0 auto 90px; padding: 0 40px; }
.inv-cta {
  position: relative;
  background: var(--navy);
  border-radius: 40px;
  padding: 90px 60px;
  text-align: center;
  overflow: hidden;
}
.inv-cta__blob {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: var(--yellow);
}
.inv-cta__blob--l { opacity: .16; top: -100px; left: -60px; }
.inv-cta__blob--r { opacity: .12; bottom: -90px; right: -50px; width: 240px; height: 240px; }
.inv-cta__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.inv-cta h2 { font-weight: 900; font-size: 52px; letter-spacing: -1.5px; color: #fff; margin-bottom: 20px; line-height: 1.05; }
.inv-cta p  { font-size: 19px; line-height: 1.6; color: #fff; opacity: .82; margin-bottom: 40px; }
.inv-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Apply page ───────────────────────────────────────────────────── */
.apply-hero {
  position: relative;
  background: var(--cream);
  padding: 150px 0 60px;
  overflow: hidden;
}
.apply-hero__inner { position: relative; z-index: 1; max-width: 700px; }
.apply-hero__h1 { font-weight: 900; font-size: 58px; line-height: 1.05; letter-spacing: -2px; color: var(--blue); margin-bottom: 18px; }
.apply-hero__sub { font-size: 20px; line-height: 1.5; color: var(--muted); }

.apply-form-section { padding: 60px 0 100px; }
.apply-form-container { max-width: 760px; }

.apply-errors {
  background: #fff0f0;
  border: 1.5px solid #e57373;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 28px;
  color: #c62828;
  font-weight: 600;
  font-size: 14px;
}
.apply-errors p + p { margin-top: 6px; }

.apply-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
.apply-field { display: flex; flex-direction: column; gap: 8px; }
.apply-field--full { grid-column: 1 / -1; }
.apply-field label { font-weight: 700; font-size: 14px; color: var(--text); }
.apply-field label span { color: #e53935; }
.apply-field label small { font-weight: 500; opacity: .6; }
.apply-field input,
.apply-field textarea {
  border: 1.5px solid rgba(0,51,122,.18);
  border-radius: 14px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: var(--trans);
}
.apply-field input:focus,
.apply-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,51,122,.08); }
.apply-field textarea { resize: vertical; min-height: 140px; }
.apply-field__hint { font-size: 12px; color: var(--muted); margin: 0; }

.apply-select-wrap { position: relative; }
.apply-select-wrap select {
  width: 100%;
  border: 1.5px solid rgba(0,51,122,.18);
  border-radius: 14px;
  padding: 13px 40px 13px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: #fff;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: var(--trans);
}
.apply-select-wrap select:focus { border-color: var(--blue); }
.apply-select-wrap > span {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 11px;
  color: var(--blue);
}

.apply-form__footer { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.apply-form__note { font-size: 13px; color: var(--muted); max-width: 480px; }

.apply-success {
  text-align: center;
  padding: 60px 20px;
  max-width: 520px;
  margin: 0 auto;
}
.apply-success__icon { font-size: 60px; margin-bottom: 24px; }
.apply-success h2 { font-weight: 900; font-size: 38px; color: var(--blue); margin-bottom: 16px; }
.apply-success p  { font-size: 18px; line-height: 1.6; color: var(--muted); margin-bottom: 32px; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .inv-cards-grid { grid-template-columns: 1fr 1fr; }
  .inv-hero__h1 { font-size: 52px; }
}
@media (max-width: 768px) {
  .inv-hero { padding: 112px 0 50px; }
  .inv-hero__h1 { font-size: 38px; }
  .inv-hero__sub { font-size: 17px; }
  .inv-hero__blob--lg { width: 220px; height: 220px; top: 60px; right: -80px; }
  .inv-hero__blob--sm { display: none; }
  .inv-filter-bar { top: 64px; }
  .inv-filter-form { flex-wrap: wrap; gap: 8px; }
  .inv-filter-search { flex: 1 1 100%; min-width: 0; }
  .inv-filter-select-wrap { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .inv-filter-select-wrap select { width: 100%; font-size: 13px; padding: 11px 30px 11px 14px; }
  .inv-filter-bar .container { padding-top: 14px; padding-bottom: 14px; }
  .inv-filter-form .btn { width: 100%; justify-content: center; }
  .inv-cards-grid { grid-template-columns: 1fr; }
  .inv-grid-section { padding: 32px 0 60px; }
  .inv-cta-wrap { padding: 0; margin-bottom: 50px; }
  .inv-cta { padding: 44px 24px; border-radius: 28px; }
  .inv-cta h2 { font-size: 26px; letter-spacing: -0.5px; margin-bottom: 14px; }
  .inv-cta p  { font-size: 15px; margin-bottom: 28px; }
  .inv-cta__btns { flex-direction: column; align-items: center; }
  .inv-cta__btns .btn { width: 100%; justify-content: center; }
  .apply-form__grid { grid-template-columns: 1fr; }
  .apply-hero__h1 { font-size: 38px; }
}

/* ============================================================
   INVENTOR PROFILE (single-inventor.php)
   ============================================================ */

.sprof-page { padding-top: 78px; }

/* breadcrumb */
/* ── Publish + Manage Invention row ─────────────────────────────── */
.pm-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 20px var(--px); font-family: var(--font-sans,Onest,system-ui,sans-serif); background: var(--cream); }
.pm-back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--blue); font-weight: 700; font-size: 14px; opacity: 0.7; }
.pm-back:hover { opacity: 1; }
.pm-owner { position: relative; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-hint { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,51,122,.08); color: var(--blue); font-weight: 700; font-size: 12px; padding: 7px 14px; border-radius: 999px; }
.pm-publish, .pm-badge--draft, .pm-badge--review, .pm-badge--public { display: none; }
.pm-owner.is-draft .pm-publish { display: inline-flex; }
.pm-owner.is-draft .pm-badge--draft { display: inline-flex; }
.pm-owner.is-review .pm-badge--review { display: inline-flex; }
.pm-owner.is-public .pm-badge--public { display: inline-flex; }
.pm-publish { align-items: center; gap: 7px; background: var(--blue); border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 12px; color: #fff; padding: 8px 16px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,30,74,.22); transition: filter .15s, transform .15s; }
.pm-publish:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pm-badge--draft, .pm-badge--review, .pm-badge--public { align-items: center; gap: 6px; background: rgba(22,33,62,.06); color: var(--text); font-weight: 700; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; opacity: .7; border: none; }
.pm-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(22,33,62,.4); }
.pm-dot--yellow { background: #e6a817; }
.pm-dot--green { background: #22a06b; }
.pm-manage { position: relative; }
.pm-btn { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1.5px solid rgba(0,51,122,.14); cursor: pointer; font-family: inherit; font-weight: 700; font-size: 12px; color: var(--navy); padding: 7px 14px; border-radius: 999px; transition: background .15s, border-color .15s; }
.pm-btn:hover { border-color: var(--blue); background: rgba(0,51,122,.08); }
.pm-menu { position: absolute; top: 44px; right: 0; z-index: 55; min-width: 200px; padding: 6px; background: #fff; border: 1px solid rgba(0,51,122,.14); border-radius: 12px; box-shadow: 0 14px 34px rgba(22,33,62,.20); }
.pm-menu[hidden] { display: none !important; }
.pm-item { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 13.5px; color: var(--text); transition: background .15s; }
.pm-item:hover { background: rgba(0,51,122,.08); }
.pm-item svg { flex: none; opacity: .7; }
.pm-item--danger { color: #B23B3B; }
.pm-item--danger svg { opacity: 1; }
.pm-item--danger:hover { background: rgba(178,59,59,.08); }
.pm-divider { display: block; height: 1px; background: rgba(0,51,122,.14); margin: 4px 8px; }
@media (max-width: 768px) { .pm-hint { display: none; } }

.sprof-breadcrumb { padding: 24px 0 0; }
.sprof-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-weight: 700;
  font-size: 14px;
  opacity: .7;
  text-decoration: none;
  transition: var(--trans);
}
.sprof-back:hover { opacity: 1; gap: 9px; }

/* hero */
.sprof-hero { padding: 28px 0 80px; }
.sprof-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 1025px) {
  .sprof-hero__grid { grid-template-columns: 1.05fr 1fr; gap: 64px; }
}

/* media side */
.sprof-hero__media { position: relative; }
.sprof-blob {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}
.sprof-blob--yellow { width: 300px; height: 300px; background: var(--yellow); top: -36px; left: -44px; }
.sprof-blob--blue   { width: 110px; height: 110px; background: var(--navy); opacity: .10; bottom: -28px; right: 16px; }

.sprof-hero__photo-wrap { position: relative; z-index: 1; border-radius: 32px; overflow: hidden; }
.sprof-hero__photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 32px;
  display: block;
  box-shadow: 0 30px 70px rgba(0,30,74,.22);
}
.sprof-hero__photo--placeholder {
  background: linear-gradient(150deg, var(--blue), var(--navy));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
}

/* like button */
.sprof-like-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.95);
  border: none;
  border-radius: 999px;
  padding: 10px 16px 10px 13px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,30,74,.25);
  font-family: inherit;
  transition: transform .15s ease;
}
.sprof-like-btn:hover { transform: scale(1.05); }
.sprof-like-btn:active { transform: scale(.94); }
.sprof-like-btn--active { cursor: default; }
.sprof-like-btn__heart { font-size: 20px; line-height: 1; transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.sprof-like-btn__count { font-weight: 800; font-size: 15px; color: var(--blue); }
.sprof-like-btn--pop .sprof-like-btn__heart { transform: scale(1.4); }

/* mini-card overlay */
.sprof-mini-card {
  position: absolute;
  z-index: 2;
  bottom: -24px;
  right: -16px;
  background: #fff;
  border-radius: 20px;
  padding: 14px 18px;
  box-shadow: 0 20px 44px rgba(22,33,62,.2);
  display: flex;
  align-items: center;
  gap: 13px;
}
.sprof-mini-card__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2.5px solid var(--yellow);
  background: linear-gradient(150deg, var(--blue), var(--navy));
  flex: none;
  position: relative;
  overflow: hidden;
}
.sprof-mini-card__name { font-weight: 900; font-size: 15px; color: var(--blue); line-height: 1.2; }
.sprof-mini-card__name-link { color: inherit; text-decoration: none; }
.sprof-mini-card__name-link:hover { text-decoration: underline; }
.sprof-mini-card__avatar-link { display: block; }
.sprof-mini-card__sub  { font-weight: 600; font-size: 12px; color: var(--text); opacity: .6; }

/* text side */
.sprof-hero__text { padding-bottom: 28px; order: -1; min-width: 0; }
.sprof-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,51,122,.08);
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.sprof-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
}
.sprof-hero__h1-row { display: flex; align-items: flex-start; gap: 12px; }
.sprof-hero__h1-row .sprof-edit-btn--title { margin-top: 10px; flex: none; }
.sprof-hero__h1 {
  font-size: 58px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -2px;
  color: var(--blue);
  margin-bottom: 22px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.sprof-highlight {
  background: var(--yellow);
  padding: 0 10px;
  border-radius: 10px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.sprof-hero__sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 26px;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 520px;
}
.sprof-editable-wrap--editing {
  max-width: 728px !important;
}
.sprof-hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.sprof-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s;
}
a.sprof-tag:hover { opacity: .75; }
.sprof-tag--white {
  background: #fff;
  border: 1.5px solid rgba(0,51,122,.12);
  color: var(--text);
}
.sprof-tag--uid {
  background: rgba(0,51,122,.06);
  border: 1.5px solid rgba(0,51,122,.18);
  color: var(--navy);
  font-family: monospace;
  letter-spacing: .5px;
  font-size: 12px;
  cursor: default;
}
.sprof-hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* award strip */
.sprof-award-strip {
  background: var(--navy);
  padding: 26px 0;
}
.sprof-award-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  color: #fff;
}
.sprof-award-strip__icon { font-size: 24px; }
.sprof-award-strip__text { font-weight: 800; font-size: 16px; }
.sprof-award-strip__divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.25);
}
.sprof-award-strip__year { font-weight: 600; font-size: 14px; color: var(--yellow); }

/* problem section */
.sprof-problem {
  background: #fff;
  padding: 90px 0;
}

/* ===== How it works section ===== */
.sprof-how {
  background: var(--cream);
  padding: var(--section-py) 0;
}
.sprof-how .sprof-section-eyebrow { margin-bottom: 10px; }
.sprof-how .sprof-section-title   { margin-bottom: 36px; max-width: 680px; }
.sprof-how__body {
  max-width: none;
}
.sprof-how__body p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  opacity: 0.8;
  margin-bottom: 16px;
}
.sprof-how__body p:last-child { margin-bottom: 0; }
.sprof-how .sprof-inline-edit { max-width: none; }
.sprof-how .sprof-edit-ce { background: var(--cream); }
.sprof-how .sprof-fmt-toolbar { background: color-mix(in srgb, var(--cream) 80%, #000 6%); }
@media (max-width: 768px) {
  .sprof-how { padding: var(--section-py-sm) 0; }
}
.sprof-problem__title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.sprof-problem__title-row .sprof-section-title { margin-bottom: 0; }
.sprof-problem__flow::after { content: ""; display: block; clear: both; }
.sprof-problem__sidebar { min-width: 0; position: relative; z-index: 2; }
.sprof-problem--has-sidebar .sprof-problem__sidebar {
  float: right;
  width: 46%;
  margin: 6px 0 24px 40px;
}
/* problem flow: editable-wrap must be block (not flex) so text flows beside the float.
   The inline-edit block box extends full-width (overlapping the float sidebar), so we
   disable pointer-events on the div itself and restore them on all children. */
.sprof-problem__flow .sprof-editable-wrap { display: block; }
.sprof-problem__flow > .sprof-inline-edit .sprof-edit-btn { display: none; }
/* Full-width block boxes (.sprof-inline-edit, .sprof-editable-wrap, .sprof-inline-edit__view)
   overlap the float sidebar — make them all transparent to clicks */
.sprof-problem__flow > .sprof-inline-edit,
.sprof-problem__flow > .sprof-inline-edit .sprof-editable-wrap,
.sprof-problem__flow > .sprof-inline-edit .sprof-inline-edit__view { pointer-events: none; }
/* Restore clicks only on actual interactive elements */
.sprof-problem__flow > .sprof-inline-edit .sprof-edit-btn,
.sprof-problem__flow > .sprof-inline-edit .sprof-inline-edit__form,
.sprof-problem__flow > .sprof-inline-edit .sprof-inline-edit__form * { pointer-events: auto; }

/* sidebar toggle buttons inside toolbar */
.sprof-fmt-sidebar-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 2px 0 4px;
  white-space: nowrap;
}
.sprof-fmt-sidebar-btn {
  min-width: 32px;
  font-size: 15px;
}
.sprof-fmt-sidebar-btn.is-active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* sidebar photo */
.sprof-prob-photo-wrap { display: flex; flex-direction: column; gap: 14px; }
.sprof-prob-photo__frame { position: relative; display: block; border-radius: 32px; overflow: hidden; }
.sprof-prob-photo__img { width: 100%; aspect-ratio: 4/3; border-radius: 32px; object-fit: cover; display: block; box-shadow: 0 30px 70px rgba(0,30,74,.22); }
/* photo placeholder (empty state) — shared base */
.ph-drop--hero {
  border-radius: 32px !important;
  border: 2px dashed rgba(0,51,122,0.26);
  background: linear-gradient(150deg, #fff 0%, var(--cream) 100%) !important;
  box-shadow: 0 12px 28px rgba(22,33,62,0.10) !important;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  display: block;
  position: relative;
  overflow: hidden;
}
.ph-drop--hero:hover {
  border-color: var(--blue);
  box-shadow: 0 20px 44px rgba(22,33,62,0.18) !important;
  transform: translateY(-3px);
}
.ph-drop--hero .ph-drop-inner { position: absolute; }

.sprof-prob-photo__empty.ph-drop {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(150deg, #fff 0%, var(--cream) 100%);
  border: 2px dashed rgba(0,51,122,0.26);
  box-shadow: 0 12px 28px rgba(22,33,62,0.10);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.sprof-prob-photo__empty.ph-drop:hover {
  border-color: var(--blue);
  box-shadow: 0 20px 44px rgba(22,33,62,0.18);
  transform: translateY(-3px);
}
.ph-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.ph-blob--gold { width: 220px; height: 220px; background: var(--yellow); opacity: 0.12; top: -70px; right: -60px; }
.ph-blob--navy { width: 130px; height: 130px; background: var(--blue); opacity: 0.06; bottom: -50px; left: -30px; }
.ph-drop-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 6px; padding: 32px;
}
.ph-icon {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; margin-bottom: 16px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 10px 24px rgba(0,51,122,0.28);
  animation: ph-float 4.5s ease-in-out infinite;
}
.ph-drop-title {
  font-weight: 800; font-size: 20px;
  letter-spacing: -0.3px; color: var(--blue);
}
.ph-drop-text {
  max-width: 260px; font-size: 14.5px; line-height: 1.55;
  color: var(--text); opacity: 0.6;
}
.ph-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 12px 24px;
  border-radius: 999px;
  background: var(--blue); color: #fff;
  font-weight: 700; font-size: 14.5px;
  box-shadow: 0 6px 18px rgba(0,30,74,0.24);
  transition: background .15s, transform .15s;
}
.ph-drop:hover .ph-btn { background: var(--navy); transform: translateY(-1px); }
.ph-hint {
  margin: 12px 0 0; text-align: center;
  font-size: 12.5px; color: var(--text); opacity: 0.5;
}
@keyframes ph-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .ph-icon { animation: none; }
  .ph-drop, .ph-btn { transition: none; }
}
.sprof-prob-photo__btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--blue);
  color: #fff;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: opacity .15s;
}
.sprof-prob-photo__btn:hover { opacity: .85; }
.sprof-section-eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sprof-section-title {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--blue);
  line-height: 1.1;
  margin-bottom: 22px;
}
.sprof-problem__flow p,
.sprof-problem__flow .sprof-inline-edit__view,
.sprof-how__body,
.sprof-how .sprof-inline-edit__view {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}
.sprof-problem__flow p,
.sprof-how__body p {
  margin-bottom: 16px;
}
.sprof-problem__flow p:last-child,
.sprof-how__body p:last-child { margin-bottom: 0; }

/* quote card */
.sprof-quote-card {
  background: var(--cream);
  border-radius: 28px;
  padding: 40px 36px;
  border-left: 6px solid var(--yellow);
  overflow: hidden;
}
.sprof-quote-card__icon { font-size: 44px; margin-bottom: 14px; }
.sprof-quote-card__text {
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  color: var(--blue);
  letter-spacing: -.3px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.sprof-quote-card__attr {
  margin-top: 20px;
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
}

/* no content placeholder */
.sprof-no-content {
  background: #fff;
  padding: 70px 0;
}
.sprof-no-content__inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.sprof-no-content__icon { font-size: 48px; margin-bottom: 16px; }
.sprof-no-content h3 {
  font-size: 26px;
  font-weight: 900;
  color: var(--blue);
  margin-bottom: 12px;
}
.sprof-no-content p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* inventor bio card (when no quote) */
.sprof-inventor-bio {
  background: var(--cream);
  border-radius: 28px;
  padding: 40px 36px;
  text-align: center;
}
.sprof-inventor-bio__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid var(--yellow);
  margin: 0 auto 18px;
  background: linear-gradient(150deg, var(--blue), var(--navy));
}
.sprof-inventor-bio__name {
  font-weight: 900;
  font-size: 20px;
  color: var(--blue);
  margin-bottom: 10px;
}
.sprof-inventor-bio__meta {
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 6px;
}

@media (max-width: 1024px) {
  .sprof-hero__text { order: -1; }
  .sprof-hero__h1 { font-size: 42px; }
  .sprof-edit-ce--title { font-size: 42px; }

}

@media (max-width: 768px) {
  /* hero layout */
  .sprof-hero { padding: 20px 0 50px; }
  .sprof-hero__grid { gap: 24px; }
  .sprof-hero__text { order: -1; padding-bottom: 0; }
  .sprof-hero__media { margin-top: 0; }
  .sprof-mini-card { right: 12px; left: auto; bottom: 12px; }
  .sprof-blob--yellow { width: 160px; height: 160px; top: auto; bottom: -20px; left: -20px; }
  .sprof-blob--blue { width: 90px; height: 90px; }

  /* hero typography */
  .sprof-eyebrow { font-size: 11px; padding: 6px 12px; margin-bottom: 14px; }
  .sprof-hero__h1 { font-size: 32px; letter-spacing: -0.5px; margin-bottom: 14px; }
  .sprof-edit-ce--title { font-size: 32px; letter-spacing: -0.5px; }
  .sprof-hero__sub { font-size: 15px; margin-bottom: 18px; }

  /* tags & cta */
  .sprof-hero__tags { gap: 8px; margin-bottom: 20px; }
  .sprof-tag { font-size: 12px; padding: 7px 13px; }
  .sprof-hero__cta { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .sprof-hero__cta .btn { font-size: 14px; padding: 12px 20px; }

  /* problem section */
  .sprof-problem { padding: 44px 0; }
  .sprof-problem--has-sidebar .sprof-problem__sidebar { float: none; width: 100%; margin: 0 0 24px 0; }
  .sprof-section-eyebrow { font-size: 11px; }
  .sprof-section-title { font-size: 26px; margin-bottom: 16px; }
  .sprof-problem__flow p { font-size: 15px; }

  /* quote card */
  .sprof-quote-card { padding: 28px 22px; border-radius: 20px; }
  .sprof-quote-card__icon { font-size: 34px; margin-bottom: 10px; }
  .sprof-quote-card__text { font-size: 18px; }

  /* award strip */
  .sprof-award-strip { padding: 18px 0; }
  .sprof-award-strip__text { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   APPLY PAGE
═══════════════════════════════════════════════════════════════ */

/* Hero — blue bg, centered, orbs */
.apply-hero {
  background: var(--blue);
  color: var(--white);
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.apply-hero::before {
  content: ''; position: absolute; left: -60px; top: -70px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,51,122,.14) 0%, transparent 70%);
  pointer-events: none;
}
.apply-hero::after {
  content: ''; position: absolute; right: -40px; bottom: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,51,122,.10) 0%, transparent 70%);
  pointer-events: none;
}
.apply-hero__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }

/* Yellow eyebrow pill */
.apply-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,51,122,.08); color: var(--blue);
  font-weight: 700; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; padding: 8px 18px;
  border-radius: 999px; margin-bottom: 24px;
}
.apply-eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex-shrink: 0;
}
.apply-hero__h1 {
  font-size: 58px; font-weight: 800; letter-spacing: -2px;
  margin: 0 0 20px; color: var(--white); line-height: 1.05;
}
.apply-hero__sub {
  font-size: 19px; color: rgba(255,255,255,.8);
  max-width: 520px; margin: 0 auto; line-height: 1.55;
}

/* Form section */
.apply-form-section { padding: 70px 0 120px; background: var(--cream); }
.apply-form-container { max-width: 760px; }

/* Step cards — each step is a white card */
.apply-step-card {
  background: var(--white);
  border-radius: 28px;
  box-shadow: 0 14px 40px rgba(22,33,62,.1);
  padding: 40px 44px;
  margin-bottom: 28px;
}

/* Step label — blue pill inside card */
.apply-section-label {
  display: inline-flex; align-items: center;
  background: rgba(0,51,122,.08); color: var(--navy);
  font-weight: 700; font-size: 14px; letter-spacing: .3px;
  padding: 10px 22px; border-radius: 999px;
  margin-bottom: 28px;
}

.apply-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.apply-field { display: flex; flex-direction: column; gap: 8px; }
.apply-field--full { grid-column: 1 / -1; }
.apply-field label {
  display: block; font-weight: 700; font-size: 13px;
  color: var(--navy); margin-bottom: 0;
}
.apply-field label span { color: #d94040; }
.apply-field label small { font-weight: 500; color: #999; font-size: 12px; }

/* All inputs/selects — pill, cream bg */
.apply-field input[type=text],
.apply-field input[type=email],
.apply-field input[type=password] {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 15px; font-weight: 500;
  color: var(--text);
  background: var(--cream);
  border: 1.5px solid rgba(0,51,122,.14);
  border-radius: 999px;
  padding: 14px 22px;
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.apply-field textarea {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 15px; font-weight: 400;
  color: var(--text); line-height: 1.55;
  background: var(--cream);
  border: 1.5px solid rgba(0,51,122,.14);
  border-radius: 28px;
  padding: 18px 24px;
  outline: none; resize: vertical; min-height: 140px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.apply-field input:focus,
.apply-field textarea:focus {
  border-color: var(--blue); background: var(--white);
  box-shadow: 0 0 0 3px rgba(0,51,122,.1);
}
.apply-field__hint { font-size: 12px; color: #aaa; margin: 0; }

.apply-select-wrap { position: relative; }
.apply-select-wrap select {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--navy);
  background: var(--cream);
  border: 1.5px solid rgba(0,51,122,.14);
  border-radius: 999px;
  padding: 14px 44px 14px 22px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer; outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.apply-select-wrap select:focus {
  border-color: var(--blue); background: var(--white);
  box-shadow: 0 0 0 3px rgba(0,51,122,.1);
}
.apply-select-wrap > span {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: 11px; color: var(--navy);
}

/* Submit button */
.apply-submit-wrap { margin-top: 24px; }
.apply-submit-wrap .btn-blue {
  width: 100%; justify-content: center;
  border-radius: 999px; padding: 17px 44px;
  font-size: 17px; box-shadow: 0 10px 28px rgba(0,51,122,.32);
}
.apply-submit-wrap .btn-blue:hover {
  box-shadow: 0 14px 36px rgba(0,51,122,.42); transform: translateY(-1px);
}
.apply-signin-note {
  text-align: center; margin-top: 22px;
  font-size: 15px; color: var(--text); opacity: .8;
}
.apply-signin-note a { font-weight: 700; color: var(--blue); text-decoration: none; }

.apply-errors {
  background: #fff4f4; border: 1.5px solid rgba(217,64,64,.25);
  border-radius: 16px; padding: 18px 22px; margin-bottom: 28px;
}
.apply-errors p { margin: 0 0 6px; color: #c00; font-size: 14px; }
.apply-errors p:last-child { margin: 0; }

.apply-no-competitions {
  text-align: center; padding: 60px 40px;
  background: var(--white); border-radius: 28px;
  box-shadow: 0 14px 40px rgba(22,33,62,.08);
}
.apply-no-competitions h2 { font-size: 30px; font-weight: 700; letter-spacing: -1px; margin: 0 0 14px; color: var(--navy); }
.apply-no-competitions p { color: var(--text); opacity: .7; margin-bottom: 32px; font-size: 16px; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════════════════════ */
.dash-header {
  background: var(--navy); color: var(--white); padding: 48px 0 44px;
  position: relative; overflow: hidden;
}
.dash-header::after {
  content: ''; position: absolute; right: -60px; top: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,51,122,.12) 0%, transparent 70%);
  pointer-events: none;
}
.dash-header__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; position: relative; z-index: 1; }
.dash-header__h1 { font-size: 38px; font-weight: 800; margin: 12px 0 0; color: var(--white); letter-spacing: -1px; }
.dash-logout {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.65);
  text-decoration: none; border: 1.5px solid rgba(255,255,255,.2);
  padding: 10px 20px; border-radius: 999px; transition: all .2s; white-space: nowrap;
}
.dash-logout:hover { color: var(--white); border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }

.dash-body { padding: 52px 0 100px; background: var(--cream); min-height: 60vh; }
.dash-body__inner { max-width: 900px; }

.dash-banner {
  border-radius: 16px; padding: 18px 22px; margin-bottom: 28px; font-size: 15px; font-weight: 600;
}
.dash-banner--success { background: #eafaf2; border: 1.5px solid rgba(11,92,42,.2); color: #0b5c2a; }
.dash-banner--error   { background: #fff4f4; border: 1.5px solid rgba(217,64,64,.2); color: #c00; }

.dash-empty {
  text-align: center; padding: 80px 40px;
  background: var(--white); border-radius: 28px;
  box-shadow: 0 14px 40px rgba(22,33,62,.08);
}
.dash-empty h2 { font-size: 28px; font-weight: 800; margin: 0 0 10px; color: var(--navy); }
.dash-empty p  { color: #888; margin-bottom: 28px; font-size: 16px; }

.dash-layout { display: flex; flex-direction: column; gap: 20px; }

/* Status card */
.dash-status-card {
  background: var(--white); border-radius: 28px; padding: 32px 36px;
  display: flex; align-items: flex-start; gap: 28px;
  box-shadow: 0 14px 40px rgba(22,33,62,.1);
}
.dash-status-icon { font-size: 56px; line-height: 1; flex-shrink: 0; }
.dash-status-info { flex: 1; min-width: 0; }
.dash-status-name { font-size: 24px; font-weight: 800; color: var(--navy); margin-bottom: 4px; letter-spacing: -.5px; }
.dash-status-invention { font-size: 16px; color: var(--blue); font-weight: 700; margin-bottom: 14px; }
.dash-status-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dash-competition { font-size: 13px; color: #999; }
.dash-competition strong { color: var(--text); font-weight: 700; }
.dash-comp-status--open   { color: #0b5c2a; font-weight: 700; margin-left: 8px; }
.dash-comp-status--closed { color: #aaa; font-weight: 600; margin-left: 8px; }

.dash-app-status {
  flex-shrink: 0; font-size: 13px; font-weight: 700;
  padding: 10px 18px; border-radius: 999px;
}
.dash-app-status--pending { background: #fff8df; color: #8a6000; }
.dash-app-status--publish { background: #eafaf2; color: #0b5c2a; }

/* Edit card */
.dash-edit-card {
  background: var(--white); border-radius: 28px; padding: 36px 40px;
  box-shadow: 0 14px 40px rgba(22,33,62,.1);
}
.dash-edit-title { font-size: 24px; font-weight: 800; margin: 0 0 6px; color: var(--navy); letter-spacing: -.5px; }
.dash-edit-note  { font-size: 14px; color: #aaa; margin: 0 0 32px; }
.dash-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dash-form__footer { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* reuse apply-field styles for dash form */
.dash-edit-card .apply-field input[type=text],
.dash-edit-card .apply-field input[type=file],
.dash-edit-card .apply-field textarea {
  border: 1.5px solid rgba(0,51,122,.18);
  border-radius: 16px; padding: 13px 18px;
  font-size: 15px; font-family: inherit; background: var(--cream);
  color: var(--text); width: 100%; box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.dash-edit-card .apply-field input:focus,
.dash-edit-card .apply-field textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,51,122,.1);
  background: var(--white);
}

.dash-current-photo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 13px; color: #999; }

/* Dashboard Save button */
.dash-form .btn-blue { border-radius: 999px; padding: 14px 36px; box-shadow: 0 8px 22px rgba(0,51,122,.28); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--blue); color: var(--blue); background: transparent;
  padding: 13px 28px; border-radius: 999px; font-size: 15px; font-weight: 700;
  text-decoration: none; transition: all .2s;
}
.btn-outline:hover { background: var(--blue); color: var(--white); transform: translateY(-1px); }

@media (max-width: 768px) {
  .apply-hero { padding: 90px 0 52px; }
  .apply-hero__h1 { font-size: 34px; letter-spacing: -1px; }
  .apply-hero__sub { font-size: 16px; }
  .apply-step-card { padding: 28px 22px; }
  .apply-form__grid { grid-template-columns: 1fr; }
  .apply-field--full { grid-column: 1; }
  .dash-form__grid { grid-template-columns: 1fr; }
  .dash-status-card { flex-direction: column; gap: 16px; }
  .dash-app-status { align-self: flex-start; }
  .dash-header__inner { flex-direction: column; align-items: flex-start; }
  .dash-edit-card { padding: 24px 20px; }
  .dash-header__h1 { font-size: 28px; }
}

/* Language switcher — DS Header: EN | UA, no pills. */
.lang-switch {
  display: flex; align-items: center; gap: 8px;
  margin-right: 24px; flex-shrink: 0;
}
.lang-switch__item {
  display: inline-flex; align-items: center;
  padding: 2px;
  font-size: 15px; font-weight: 500; line-height: 1.4;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color .15s;
}
.lang-switch__item + .lang-switch__item::before {
  content: '|';
  color: #D3E1F4;
  margin-right: 8px;
}
.lang-switch__item:hover { color: var(--blue); }
.lang-switch__item.is-active { color: var(--blue); font-weight: 700; }

/* Nav login/cabinet button — the header's single action, cobalt (never gold). */
.nav-login-btn {
  display: inline-flex; align-items: center;
  /* Same reason as .nav-menu li a: Nunito for both scripts so "Sign In" and
     "Увійти" render at the same weight. */
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 15px; font-weight: 600; line-height: 1.4;
  color: var(--white); background: var(--blue);
  border: 2px solid transparent; border-radius: 999px;
  padding: 10px 20px; text-decoration: none;
  transition: background .2s; white-space: nowrap;
}
.nav-login-btn:hover { background: #002A66; color: var(--white); }

/* Nav avatar — shown when logged in */
.nav-avatar {
  display: block; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--blue);
  overflow: hidden; text-decoration: none;
  margin-left: 14px;
  transition: border-color .2s, transform .2s;
  background: linear-gradient(150deg, #00337A, #001E4A);
}
.nav-avatar:hover { border-color: var(--navy); transform: scale(1.08); }
.nav-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-avatar__initials {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 15px; font-weight: 800; color: var(--white);
  line-height: 1;
}

/* ===================================================
   MY PAGE / DASHBOARD (v2 — social-network style)
   =================================================== */

/* Wrap */
.mypage-wrap { min-height: 100vh; background: var(--cream); }

/* Header */
.mypage-header {
  background: var(--navy);
  padding: 48px 0 0;
  position: relative;
}
.mypage-header::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 10% 50%, rgba(0,51,122,.35) 0%, transparent 70%);
  pointer-events: none;
}
.mypage-header__inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; position: relative; z-index: 1; padding-bottom: 28px;
}
.mypage-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: var(--yellow); text-transform: uppercase; margin-bottom: 10px;
}
.mypage-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }
.mypage-header__h1 {
  font-size: 36px; font-weight: 800; color: var(--white); margin: 0;
  letter-spacing: -1px; line-height: 1.1;
}
.mypage-header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; position: relative; z-index: 1; }
.mypage-action-btn {
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 700; border-radius: 999px;
  padding: 10px 22px; text-decoration: none; transition: all .2s; white-space: nowrap;
}
.mypage-action-btn--outline {
  border: 1.5px solid rgba(255,255,255,.5); color: var(--white);
}
.mypage-action-btn--outline:hover { background: rgba(255,255,255,.1); border-color: var(--white); }
.mypage-action-btn--ghost { color: rgba(255,255,255,.55); }
.mypage-action-btn--ghost:hover { color: var(--white); }

/* Tabs */
.mypage-tabs {
  display: flex; gap: 4px; position: relative; z-index: 1;
}
.mypage-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700;
  padding: 14px 24px; border-radius: 14px 14px 0 0;
  text-decoration: none; color: rgba(255,255,255,.6);
  transition: all .2s;
}
.mypage-tab:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.06); }
.mypage-tab--active {
  background: var(--cream); color: var(--navy);
}
.mypage-tab--active:hover { color: var(--navy); }

/* Body */
.mypage-body { padding: 52px 0 100px; }
.mypage-body .container { max-width: 780px; }

/* Banners */
.mypage-banner {
  border-radius: 14px; padding: 16px 22px; margin-bottom: 28px;
  font-size: 15px; font-weight: 600;
}
.mypage-banner--success { background: #eafaf2; border: 1.5px solid rgba(11,92,42,.2); color: #0b5c2a; }
.mypage-banner--error   { background: #fff4f4; border: 1.5px solid rgba(217,64,64,.2); color: #c00; }

/* Empty state */
.mypage-empty {
  text-align: center; padding: 80px 40px;
  background: var(--white); border-radius: 28px;
  box-shadow: 0 14px 40px rgba(22,33,62,.08);
}
.mypage-empty h2 { font-size: 28px; font-weight: 800; margin: 0 0 10px; color: var(--navy); }
.mypage-empty p  { color: #888; margin-bottom: 28px; font-size: 16px; }

/* ---- MY CABINET TAB ---- */
.cabinet-layout { display: flex; flex-direction: column; gap: 20px; }
.cabinet-card {
  background: var(--white); border-radius: 28px;
  padding: 36px 40px; display: flex; gap: 24px; align-items: flex-start;
  box-shadow: 0 14px 40px rgba(22,33,62,.08);
}
.cabinet-card__icon { font-size: 60px; line-height: 1; flex-shrink: 0; }
.cabinet-card__info { flex: 1; min-width: 0; }
.cabinet-card__name { font-size: 24px; font-weight: 800; color: var(--navy); margin-bottom: 4px; letter-spacing: -.5px; }
.cabinet-card__invention { font-size: 16px; font-weight: 700; color: var(--blue); margin-bottom: 14px; }
.cabinet-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cabinet-card__comp { font-size: 13px; color: #999; }
.cabinet-card__comp strong { color: var(--text); font-weight: 700; }
.cabinet-comp-badge { font-weight: 700; margin-left: 8px; }
.cabinet-comp-badge--open   { color: #0b5c2a; }
.cabinet-comp-badge--closed { color: #aaa; }
.cabinet-status {
  flex-shrink: 0; padding: 8px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 800; white-space: nowrap;
}
.cabinet-status--pending { background: #fff8df; color: #8a6000; }
.cabinet-status--publish { background: #eafaf2; color: #0b5c2a; }

.cabinet-info-box {
  background: var(--white); border-radius: 20px;
  padding: 28px 32px; font-size: 15px; line-height: 1.65; color: #666;
  box-shadow: 0 8px 24px rgba(22,33,62,.06);
  border-left: 4px solid var(--yellow);
}
.cabinet-info-box__title { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); margin-bottom: 10px; }
.cabinet-info-box strong { color: var(--text); }

/* ---- MY PAGE TAB ---- */
.mypage-form { display: flex; flex-direction: column; gap: 16px; }

/* Blocks */
.mpblock {
  background: var(--white); border-radius: 24px;
  padding: 32px 36px;
  box-shadow: 0 14px 40px rgba(22,33,62,.08);
}

/* Hero block */
.mpblock--hero { padding: 32px 36px; }
.mpblock__hero-preview {
  display: flex; gap: 20px; align-items: center; margin-bottom: 28px;
}
.mpblock__avatar {
  flex-shrink: 0; width: 100px; height: 100px; border-radius: 50%;
  overflow: hidden; background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(0,51,122,.12);
}
.mpblock__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.mpblock__avatar-placeholder { font-size: 48px; line-height: 1; }
.mpblock__hero-info { flex: 1; }
.mpblock__hero-name { font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -.5px; margin-bottom: 4px; }
.mpblock__hero-invention { font-size: 16px; font-weight: 700; color: var(--blue); margin-bottom: 14px; }
.mpblock__hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.mpblock__divider { height: 1px; background: rgba(0,51,122,.08); margin: 4px 0 24px; }
.mpblock__edit-label {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 16px;
}
.mpblock__edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Regular blocks */
.mpblock__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mpblock__section-label {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 8px;
}
.mpblock__preview-text {
  font-size: 15px; line-height: 1.6; color: var(--text); max-width: 560px;
}
.mpblock__empty { color: #aaa; font-style: italic; }
.mpblock__quote-preview { font-style: italic; color: var(--navy); font-weight: 600; }

.mpblock__edit-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,51,122,.07); border: none; border-radius: 999px;
  padding: 8px 18px; font-size: 13px; font-weight: 700; color: var(--blue);
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.mpblock__edit-btn:hover { background: var(--blue); color: var(--white); }

/* Edit panels — hidden by default, visible when --open */
.mpblock__edit-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease, padding-top .3s ease;
  padding-top: 0;
}
.mpblock__edit-panel--open {
  max-height: 600px;
  padding-top: 24px;
}

/* Fields inside mpblock */
.mpfield { display: flex; flex-direction: column; gap: 8px; }
.mpfield label { font-size: 13px; font-weight: 700; color: var(--navy); }
.mpfield label small { font-weight: 400; color: #aaa; }
.mpfield textarea,
.mpfield input[type="text"] {
  width: 100%; box-sizing: border-box;
  padding: 13px 18px;
  background: var(--cream); color: var(--text);
  border: 1.5px solid rgba(0,51,122,.18);
  border-radius: 16px; font-size: 15px; font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
  resize: vertical;
}
.mpfield textarea:focus,
.mpfield input[type="text"]:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,51,122,.1);
  background: var(--white);
}
.mpfield__emoji { max-width: 100px; text-align: center; font-size: 24px !important; border-radius: 999px !important; }
.mpfield__file { font-size: 14px; color: #666; }
.mpfield__hint { font-size: 12px; color: #aaa; margin: 0; }
.mpfield__current-photo { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #999; }

/* Save bar */
.mypage-save-bar {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 24px 0 0;
}

/* ===================================================
   SIGN IN PAGE
   =================================================== */
.signin-container { max-width: 480px; }

.signin-card {
  background: var(--white); border-radius: 28px;
  padding: 44px 48px;
  box-shadow: 0 14px 40px rgba(22,33,62,.1);
}

.signin-form { display: flex; flex-direction: column; gap: 18px; }
.signin-form .apply-field input {
  border-radius: 999px;
  background: var(--cream);
  padding: 15px 22px;
  font-size: 16px;
  border: 1.5px solid rgba(0,51,122,.15);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.signin-form .apply-field input:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(0,51,122,.1);
}
.signin-form .apply-field label {
  font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 6px; display: block;
}

.signin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.signin-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
}
.signin-remember input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); }
.signin-forgot {
  font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: none;
}
.signin-forgot:hover { text-decoration: underline; }

.signin-submit {
  width: 100%; justify-content: center;
  padding: 16px; font-size: 16px; margin-top: 6px;
}

.signin-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 0 22px; color: #bbb; font-size: 13px; font-weight: 600;
}
.signin-divider::before,
.signin-divider::after { content: ''; flex: 1; height: 1px; background: rgba(0,51,122,.1); }

.signin-apply-link {
  display: block; text-align: center;
  background: rgba(0,51,122,.06); border: 1.5px solid rgba(0,51,122,.15);
  border-radius: 999px; padding: 14px 24px;
  font-size: 15px; font-weight: 700; color: var(--blue); text-decoration: none;
  transition: all .2s;
}
.signin-apply-link:hover {
  background: var(--blue); color: var(--white); border-color: var(--blue);
}

@media (max-width: 480px) {
  .signin-card { padding: 28px 22px; }
}

/* ===================================================
   INLINE PROFILE EDITING (single-inventor.php)
   =================================================== */

/* Edit bar — sticky yellow bar at top for the owner */
.sprof-edit-bar {
  background: var(--yellow); padding: 12px 0;
  position: sticky; top: 0; z-index: 300;
  box-shadow: 0 2px 12px rgba(22,33,62,.12);
}
.sprof-edit-bar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sprof-edit-bar__label {
  font-size: 14px; font-weight: 700; color: var(--navy);
}
.sprof-edit-bar__actions { display: flex; align-items: center; gap: 12px; }
.sprof-edit-bar__back {
  font-size: 14px; font-weight: 700; color: var(--navy);
  opacity: .65; text-decoration: none;
}
.sprof-edit-bar__back:hover { opacity: 1; }

/* Save notice */
.sprof-save-notice {
  background: #eafaf2; border-bottom: 1.5px solid rgba(11,92,42,.2);
  color: #0b5c2a; font-size: 14px; font-weight: 700;
  padding: 12px 0; text-align: center;
}
.sprof-save-notice--error { background: #fff4f4; border-color: rgba(217,64,64,.2); color: #c00; }

/* "Edit photo" pill button — на головному фото та аватарці */
.sprof-edit-photo {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--navy);
  border-radius: 999px;
  font-weight: 700; cursor: pointer;
  box-shadow: 0 20px 44px rgba(22,33,62,.22);
  transition: background .15s, transform .15s;
  white-space: nowrap;
  border: none;
}
.sprof-edit-photo:hover { background: rgba(255,255,255,1); transform: scale(1.03); }

/* Large — на головному фото (bottom-left) */
.sprof-edit-photo--lg {
  bottom: 18px; left: 18px;
  padding: 10px 18px 10px 14px;
  font-size: 13px;
}
.sprof-edit-photo--lg .sprof-edit-photo__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue); color: #fff; flex-shrink: 0;
}

/* Avatar wrap — position:relative + overflow:visible щоб badge виходив за межі */
.sprof-mini-card__avatar-wrap {
  position: relative; flex-shrink: 0;
  width: 50px; height: 50px;
  overflow: visible;
}

/* Camera badge — точно як у дизайні: 21px жовтий кружечок bottom-right */
.sprof-avatar-cam-badge {
  position: absolute;
  bottom: -3px; right: -3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 20px 44px rgba(22,33,62,.22);
  z-index: 4;
  transition: transform .15s;
}
.sprof-avatar-cam-badge:hover { transform: scale(1.12); }

/* ✏️ edit button floating on element */
.sprof-editable-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sprof-editable-wrap > *:first-child { flex: 1; min-width: 0; }
/* Matches .na-btn--ghost-line (the "Edit article" pill on the news editor)
   so every inline-edit affordance site-wide looks the same. */
.sprof-edit-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 18px; border-radius: var(--r-pill);
  border: 1.5px solid rgba(0,51,122,.20); background: var(--white);
  font-family: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer; color: var(--blue);
  transition: background .15s, color .15s, transform .15s;
}
.sprof-edit-btn:hover { background: rgba(0,51,122,.06); color: var(--blue); transform: translateY(-1px); }

/* Inline edit block — view / form toggle */
.sprof-inline-edit { position: relative; }
.sprof-inline-edit__form { display: none; }
.sprof-inline-edit.is-editing .sprof-editable-wrap { display: none !important; }

.sprof-edit-textarea {
  width: 100%; box-sizing: border-box;
  padding: 14px 18px; background: rgba(0,51,122,.05);
  border: 2px solid var(--blue); border-radius: 16px;
  font-size: 16px; font-family: inherit; line-height: 1.6;
  color: var(--text); resize: vertical;
  transition: box-shadow .2s;
}
.sprof-edit-textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(0,51,122,.12); }
.sprof-edit-textarea--inline { display: block; width: 100%; margin: 8px 0; min-height: 160px; }

/* Matches .na-btn--primary (the "✓ Done" pill on the news editor). */
.sprof-edit-done,
.sprof-edit-done-inline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue); color: var(--white);
  border: none; border-radius: var(--r-pill);
  padding: 12px 24px; font-family: inherit; font-size: 15px; font-weight: 800;
  cursor: pointer; margin: 0; transition: background .15s, transform .15s;
}
.sprof-edit-done:hover,
.sprof-edit-done-inline:hover { background: #16309a; transform: translateY(-2px); }

.sprof-edit-hint { color: #bbb; font-style: italic; font-size: 15px; }

/* ---- Rich text toolbar ---- */
.sprof-fmt-toolbar {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px; margin-bottom: 4px;
  background: #f7f8fa; border: 1px solid rgba(0,0,0,0.10);
  border-radius: 10px 10px 0 0; flex-wrap: wrap;
}
.sprof-fmt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid transparent; background: transparent;
  font-size: 14px; cursor: pointer; color: #3a3a4a;
  transition: background .12s, border-color .12s;
}
.sprof-fmt-btn:hover { background: #e8eaf0; border-color: rgba(0,0,0,0.10); }
.sprof-fmt-btn--emoji { font-size: 16px; width: 36px; }
.sprof-fmt-sep {
  width: 1px; height: 20px; background: rgba(0,0,0,0.12); margin: 0 4px;
}
.sprof-emoji-wrap { position: relative; }
.sprof-emoji-picker {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 2px; padding: 8px; width: 256px;
  background: #fff; border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.sprof-emoji-picker[hidden] { display: none; }
.sprof-emoji-picker span {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  font-size: 18px; cursor: pointer; transition: background .1s;
}
.sprof-emoji-picker span:hover { background: #f0f2f7; }

/* Contenteditable desc editor */
.sprof-edit-ce {
  display: block; width: 100%; min-height: 160px;
  padding: 16px 18px;
  font-size: 19px; line-height: 1.55; color: var(--muted);
  font-family: inherit;
  border: 1px solid rgba(0,0,0,0.10); border-top: none;
  border-radius: 0 0 10px 10px; background: #fff;
  outline: none;
  resize: none;
  overflow: auto;
}
.sprof-edit-ce:empty::before {
  content: attr(data-placeholder);
  color: #aaa; pointer-events: none;
}
.sprof-edit-ce-wrap { margin-bottom: 20px; }
.sprof-edit-ce-wrap .sprof-edit-done-inline { margin-top: 10px; }
.sprof-edit-combo-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 18px 0 6px;
}
.sprof-edit-combo-label:first-child { margin-top: 0; }
.sprof-char-counter {
  font-size: 12px; font-weight: 600; color: #999;
  text-align: right; padding: 4px 2px 0;
}
.sprof-char-counter--warn { color: #e07b00; }
.sprof-char-counter--over { color: #c0392b; }
.sprof-edit-ce--problem {
  font-size: 17px; line-height: 1.65; color: var(--text); min-height: 180px;
  overflow: visible; /* no BFC — allows text to flow beside the float sidebar */
  width: auto;
}
.sprof-edit-ce--title {
  height: 160px; min-height: 0; max-height: 160px; overflow-y: auto; overflow-x: hidden;
  width: 100%; max-width: 100%; box-sizing: border-box;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  font-size: 58px; font-weight: 900; line-height: 1.15; letter-spacing: -2px;
  color: var(--blue); border-radius: 10px;
}

/* bulleted list — editor + display */
.sprof-edit-ce ul,
.sprof-problem__flow ul,
.sprof-how__body ul,
.sprof-inline-edit__view ul {
  list-style: none;
  margin: 8px 0;
  padding: 0 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sprof-edit-ce ul li,
.sprof-problem__flow ul li,
.sprof-how__body ul li,
.sprof-inline-edit__view ul li {
  position: relative;
  padding-left: 20px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  opacity: 0.85;
}
.sprof-edit-ce ul li::before,
.sprof-problem__flow ul li::before,
.sprof-how__body ul li::before,
.sprof-inline-edit__view ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
}
.sprof-inline-edit__form .sprof-fmt-toolbar { border-radius: 10px 10px 0 0; }
.sprof-inline-edit__form .sprof-edit-ce { border-radius: 0 0 10px 10px; margin-bottom: 12px; }
.sprof-inline-edit__form .sprof-edit-done { margin-top: 0; }

/* Mobile */
@media (max-width: 768px) {
  .sprof-edit-bar__label { font-size: 12px; }
  .sprof-edit-bar__actions .btn { padding: 8px 18px; font-size: 13px; }
}

/* Mobile */
@media (max-width: 768px) {
  .mypage-header { padding-top: 36px; }
  .mypage-header__inner { flex-direction: column; align-items: flex-start; padding-bottom: 20px; }
  .mypage-header__h1 { font-size: 26px; }
  .mypage-header__actions { gap: 8px; }
  .mypage-tab { font-size: 13px; padding: 12px 16px; }
  .cabinet-card { flex-direction: column; gap: 16px; padding: 24px 20px; }
  .cabinet-status { align-self: flex-start; }
  .mpblock { padding: 24px 20px; }
  .mpblock__edit-grid { grid-template-columns: 1fr; }
  .mpblock__hero-preview { flex-direction: column; align-items: flex-start; }
  .mypage-header__actions .mypage-action-btn--outline { display: none; }
}

/* ===== Avatar Crop Modal ===== */
.sprof-crop-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
}
.sprof-crop-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,30,74,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sprof-crop-card {
  position: relative; z-index: 1;
  background: #fff; border-radius: 20px;
  padding: 24px 20px 20px;
  width: min(380px, calc(100vw - 32px));
  box-shadow: 0 24px 64px rgba(0,30,74,.32);
  display: flex; flex-direction: column; gap: 16px;
}
.sprof-crop-hint {
  margin: 0; text-align: center; font-size: 13px; color: #888;
}
.sprof-crop-stage {
  position: relative;
  width: 100%; aspect-ratio: 1/1;
  border-radius: 12px; overflow: hidden;
  background: #111; cursor: grab; touch-action: none;
}
.sprof-crop-stage:active { cursor: grabbing; }
#sprof-crop-canvas {
  display: block; width: 100%; height: 100%; touch-action: none;
}
.sprof-crop-ring {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
}
.sprof-crop-zoom-row {
  display: flex; align-items: center; gap: 10px;
}
.sprof-crop-zoom-row svg { flex-shrink: 0; }
.sprof-crop-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--blue) 0%, var(--blue) 0%, #ddd 0%, #ddd 100%);
  outline: none; cursor: pointer;
}
.sprof-crop-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); cursor: pointer;
}
.sprof-crop-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); cursor: pointer;
}
.sprof-crop-actions {
  display: flex; gap: 10px;
}
.sprof-crop-actions .btn { flex: 1; text-align: center; justify-content: center; }
@media (max-width: 480px) {
  .sprof-crop-card { padding: 20px 16px 16px; }
}

/* ===== Account menu (two-level) ===== */
.am-user { position: relative; flex: none; }
.am-avatar { display: block; width: 38px; height: 38px; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer; border: 2px solid #00337A; background: none; }
.am-avatar img, .am-avatar svg { display: block; width: 100%; height: 100%; }
.am-chevron { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid rgba(0,51,122,.14); box-shadow: 0 1px 4px rgba(22,33,62,.18); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #00337A; transition: transform .18s ease; }
.am-user.is-open .am-chevron { transform: rotate(180deg); }
.am-menu { position: absolute; top: 46px; right: 0; z-index: 200; width: 288px; padding: 8px; background: #fff; border: 1px solid rgba(0,51,122,.14); border-radius: 16px; box-shadow: 0 16px 40px rgba(22,33,62,.16); overflow: hidden; }
.am-menu[hidden] { display: none; }
.am-view[hidden] { display: none; }
.am-profile { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; text-decoration: none; border-radius: 12px; transition: background .15s; }
.am-profile:hover { background: rgba(0,51,122,.06); }
.am-profile-av { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #00337A; overflow: hidden; display: block; }
.am-profile-av img, .am-profile-av svg { display: block; width: 100%; height: 100%; }
.am-profile-txt { min-width: 0; }
.am-profile-name { display: block; font-family: var(--font-display,Outfit,sans-serif); font-weight: 800; font-size: 15.5px; color: #00337A; line-height: 1.2; letter-spacing: -.2px; }
.am-profile-sub { display: block; font-size: 12px; color: #16213E; opacity: .5; }
.am-section-label { margin: 0; padding: 0 10px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #16213E; opacity: .4; }
.am-item { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; text-decoration: none; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 13.5px; color: #16213E; transition: background .15s ease; }
.am-item:hover { background: rgba(0,51,122,.08); }
.am-ico { flex: none; opacity: .65; }
.am-invention { gap: 11px; padding: 8px 10px; }
.am-invention--lg { gap: 12px; padding: 9px 10px; }
.am-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-invention--lg .am-item-name { font-weight: 700; font-size: 14px; }
.am-item-name--strong { flex: 0 1 auto; font-weight: 700; font-size: 14px; color: #00337A; }
.am-badge { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1.5px solid #00337A; display: flex; align-items: center; justify-content: center; font-family: var(--font-display,Outfit,sans-serif); font-weight: 800; font-size: 13px; color: #00337A; }
.am-badge--lg { width: 34px; height: 34px; font-size: 14px; }
.am-badge--dashed { border-style: dashed; border-color: rgba(0,51,122,.14); }
.am-check { flex: none; color: #00337A; }
.am-seeall { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 14px; background: none; border: 1px solid rgba(0,51,122,.14); border-radius: 10px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; color: #00337A; transition: background .15s, border-color .15s; }
.am-seeall:hover { background: rgba(0,51,122,.08); border-color: transparent; }
.am-seeall > span:first-child { flex: 1; text-align: left; }
.am-seeall svg { flex: none; opacity: .6; }
.am-count { flex: none; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: rgba(0,51,122,.08); color: #00337A; font-size: 11.5px; font-weight: 800; }
/* scroll zone — inventions view full list */
.am-scroll { max-height: min(58vh, 400px); overflow-y: auto; margin: 0 -2px; padding: 0 2px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.am-scroll::-webkit-scrollbar { width: 8px; }
.am-scroll::-webkit-scrollbar-thumb { background: rgba(0,51,122,.22); border-radius: 999px; border: 2px solid #fff; }
.am-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,51,122,.38); }
.am-scroll { scrollbar-width: thin; scrollbar-color: rgba(0,51,122,.28) transparent; }
/* two-line invention row */
.am-invention--row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; text-decoration: none; transition: background .15s ease; }
.am-invention--row:hover { background: rgba(0,51,122,.08); }
.am-rowtext { flex: 1; min-width: 0; }
.am-rowname { display: block; font-weight: 700; font-size: 14px; color: #00337A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.am-rstatus { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: #16213E; opacity: .6; }
.am-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.am-dot--approved { background: #1E8A5B; }
.am-dot--review   { background: #E0A400; }
.am-dot--draft    { background: rgba(22,33,62,.35); }
.am-divider { display: block; height: 1px; background: rgba(0,51,122,.14); margin: 8px 6px; }
.am-subhead { display: flex; align-items: center; gap: 6px; padding: 4px 6px 12px; }
.am-back { flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #00337A; transition: background .15s; }
.am-back:hover { background: rgba(0,51,122,.08); }
.am-subtitle { font-family: var(--font-display,Outfit,sans-serif); font-weight: 800; font-size: 16.5px; color: #00337A; letter-spacing: -.2px; }
.am-status { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.am-status--draft  { background: rgba(22,33,62,.07); color: #555; }
.am-status--review { background: rgba(230,168,23,.15); color: #a07010; }
.am-status--public { background: rgba(34,160,107,.12); color: #1a7a50; }

/* ── Confirm Dialog ─────────────────────────────────────────────── */
.uc-overlay { position: fixed; inset: 0; background: rgba(0,30,74,.45); backdrop-filter: blur(3px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.uc-overlay[hidden] { display: none !important; }
.uc-dialog { background: #fff; border-radius: 20px; padding: 32px 28px 24px; width: 100%; max-width: 380px; box-shadow: 0 24px 64px rgba(0,30,74,.18); }
.uc-msg { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 24px; line-height: 1.5; }
.uc-actions { display: flex; gap: 10px; justify-content: flex-end; }
.uc-btn { padding: 10px 20px; border-radius: 10px; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; border: none; transition: background .15s; }
.uc-btn--cancel { background: rgba(0,51,122,.08); color: var(--navy); }
.uc-btn--cancel:hover { background: rgba(0,51,122,.14); }
.uc-btn--ok { background: rgba(0,51,122,.08); color: var(--navy); }
.uc-btn--ok:hover { background: rgba(0,51,122,.14); }
.uc-btn--primary { background: var(--blue); color: #fff; }
.uc-btn--primary:hover { background: var(--navy); }
.uc-btn--danger { background: #B23B3B; color: #fff; }
.uc-btn--danger:hover { background: #8f2e2e; }

/* ── New Invention Modal ─────────────────────────────────────────── */
.ni-overlay { position: fixed; inset: 0; background: rgba(0,30,74,.45); backdrop-filter: blur(3px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ni-overlay[hidden] { display: none !important; }
.ni-dialog { background: #fff; border-radius: 20px; padding: 36px 32px 28px; width: 100%; max-width: 420px; box-shadow: 0 24px 64px rgba(0,30,74,.18); }
.ni-title { font-family: var(--font-display,Outfit,sans-serif); font-size: 22px; font-weight: 800; color: var(--navy); margin: 0 0 6px; }
.ni-desc { font-size: 14.5px; color: #555; margin: 0 0 20px; }
.ni-input { width: 100%; box-sizing: border-box; border: 1.5px solid rgba(0,51,122,.22); border-radius: 12px; padding: 12px 16px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text); outline: none; transition: border-color .15s; }
.ni-input:focus { border-color: var(--blue); }
.ni-counter { text-align: right; font-size: 12.5px; color: #888; margin-top: 6px; }
.ni-select { margin-top: 10px; background: #fff; cursor: pointer; }
.ni-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.ni-btn { padding: 10px 22px; border-radius: 10px; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; border: none; transition: background .15s, opacity .15s; }
.ni-btn--cancel { background: rgba(0,51,122,.08); color: var(--navy); }
.ni-btn--cancel:hover { background: rgba(0,51,122,.14); }
.ni-btn--create { background: var(--blue); color: #fff; }
.ni-btn--create:hover { background: var(--navy); }
.ni-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════
   Inventor Public Profile — pp-* (page-inventor-profile.php)
   ══════════════════════════════════════════════════════════════════ */
.pp-wrap { max-width: 1100px; margin: 0 auto; padding: 40px var(--px) 100px; }

/* profile card */
.pp-card { background: #fff; border-radius: 32px; box-shadow: 0 8px 24px rgba(22,33,62,.10); overflow: hidden; }
.pp-cover { position: relative; height: 220px; background: var(--blue); overflow: hidden; }
.pp-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.pp-blob--accent { top: -80px; right: -60px; width: 320px; height: 320px; background: var(--yellow); opacity: .9; }
.pp-blob--soft   { bottom: -110px; left: 8%; width: 220px; height: 220px; background: rgba(255,255,255,.06); }

.pp-edit-cover { position: absolute; bottom: 18px; right: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); color: var(--navy); border: none; border-radius: 999px; padding: 10px 18px 10px 14px; font-family: inherit; font-weight: 700; font-size: 13px; box-shadow: 0 4px 14px rgba(22,33,62,.16); cursor: pointer; }
.pp-cam { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #fff; }

.pp-header { padding: 0 36px 32px; }
.pp-header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: -62px; }
.pp-identity { display: flex; align-items: flex-end; gap: 20px; min-width: 0; }

.pp-avatar-wrap { position: relative; flex: none; }
.pp-avatar { position: relative; width: 140px; height: 140px; border-radius: 50%; border: 5px solid #fff; background: var(--blue) center/cover; box-shadow: 0 8px 24px rgba(22,33,62,.10); overflow: hidden; }
.pp-edit-avatar { position: absolute; right: 4px; bottom: 4px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); border: 3px solid #fff; box-shadow: 0 4px 14px rgba(22,33,62,.16); color: var(--blue); cursor: pointer; }

.pp-namewrap { min-width: 0; padding-bottom: 8px; }
.pp-name { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--font-display,Outfit,sans-serif); font-weight: 800; font-size: 32px; letter-spacing: -1px; color: var(--blue); line-height: 1.05; }
.pp-verified { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); }
.pp-tagline { margin: 6px 0 0; font-size: 15px; font-weight: 600; opacity: .72; }

.pp-actions { display: flex; gap: 10px; flex: none; padding-bottom: 8px; }
.pp-contact-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: #fff; font-family: inherit; font-weight: 800; font-size: 15px; padding: 12px 24px; border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 16px rgba(0,51,122,.28); white-space: nowrap; transition: background .15s, transform .15s; text-decoration: none; }
.pp-contact-btn:hover { background: var(--navy); color: #fff; transform: translateY(-1px); }
.pp-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,51,122,.08); color: var(--blue); border: none; cursor: pointer; transition: background .15s; }
.pp-share-btn:hover { background: rgba(0,51,122,.14); }

.pp-contact-panel { margin-top: 20px; border: 1px solid rgba(0,51,122,.14); border-radius: 20px; padding: 20px 22px; background: rgba(0,51,122,.06); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.pp-contact-panel[hidden] { display: none; }
.pp-contact-title { font-family: var(--font-display,Outfit,sans-serif); font-weight: 700; font-size: 17px; color: var(--blue); }
.pp-contact-sub { font-size: 14px; opacity: .7; margin-top: 4px; max-width: 42ch; }
.pp-contact-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-btn-ghost { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid rgba(0,51,122,.14); color: var(--blue); font-weight: 700; font-size: 14px; padding: 11px 20px; border-radius: 999px; }
.pp-btn-ghost:hover { background: rgba(0,51,122,.08); }

/* two-column grid */
.pp-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; margin-top: 24px; align-items: start; }
.pp-side { display: flex; flex-direction: column; gap: 24px; }
.pp-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.pp-block { background: #fff; border-radius: 24px; box-shadow: 0 8px 24px rgba(22,33,62,.10); padding: 26px; }
.pp-main > .pp-block { padding: 28px 30px; }
.pp-block-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.pp-main .pp-block-head { margin-bottom: 20px; }
.pp-block-title { margin: 0; font-family: var(--font-display,Outfit,sans-serif); font-weight: 700; font-size: 18px; color: var(--blue); }
.pp-block-title--lg { font-size: 22px; letter-spacing: -.5px; }
.pp-count { font-size: 12.5px; font-weight: 700; color: var(--blue); background: rgba(0,51,122,.08); padding: 3px 10px; border-radius: 999px; }

.pp-about { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; opacity: .8; }
.pp-about--empty { opacity: .4; font-style: italic; }
.pp-details { display: flex; flex-direction: column; gap: 14px; }
.pp-detail { display: flex; align-items: center; gap: 12px; }
.pp-detail-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(0,51,122,.08); display: flex; align-items: center; justify-content: center; color: var(--blue); }
.pp-detail-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; opacity: .5; }
.pp-detail-value { display: block; font-size: 14.5px; font-weight: 600; }
.pp-detail-value--empty { opacity: .35; font-weight: 400; }

.pp-hobbies { display: flex; flex-wrap: wrap; gap: 9px; }
.pp-hobby { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,51,122,.08); color: var(--blue); font-weight: 700; font-size: 13.5px; padding: 8px 14px; border-radius: 999px; }

/* inventions grid */
.pp-inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pp-inv-card { text-decoration: none; display: block; background: var(--cream); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 24px rgba(22,33,62,.10); transition: transform .2s ease, box-shadow .2s ease; }
.pp-inv-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(22,33,62,.16); }
.pp-inv-thumb { position: relative; height: 160px; background: rgba(0,51,122,.08) center/cover; }
.pp-award { position: absolute; top: 12px; left: 12px; background: var(--yellow); color: var(--navy); font-weight: 800; font-size: 12px; padding: 5px 12px; border-radius: 999px; }
.pp-inv-body { padding: 16px 18px 20px; }
.pp-status { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 12px; font-weight: 700; opacity: .6; }
.pp-dot { width: 8px; height: 8px; border-radius: 50%; }
.pp-inv-name { margin: 0 0 6px; font-family: var(--font-display,Outfit,sans-serif); font-weight: 700; font-size: 17px; color: var(--blue); letter-spacing: -.3px; }
.pp-inv-desc { margin: 0; font-size: 13.5px; line-height: 1.5; opacity: .72; }

/* expand/collapse */
.pp-toggle { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,51,122,.08); color: var(--blue); font-family: inherit; font-weight: 700; font-size: 13.5px; padding: 8px 16px; border: none; border-radius: 999px; cursor: pointer; transition: background .15s; }
.pp-toggle:hover { background: rgba(0,51,122,.14); }
.pp-toggle-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; }
.pp-inv-card.is-extra { display: none; }
.pp-grid.is-expanded .pp-inv-card.is-extra { display: block; }

/* responsive */
@media (max-width: 900px) {
  .pp-grid { grid-template-columns: 1fr; }
  .pp-inv-grid { grid-template-columns: 1fr; }
  .pp-header-row { flex-direction: column; align-items: flex-start; }
  .pp-actions { width: 100%; }
  .pp-wrap { padding-top: 24px; }
  .pp-header { padding: 0 20px 24px; }
}
@media (max-width: 480px) {
  .pp-cover { height: 160px; }
  .pp-avatar { width: 110px; height: 110px; }
  .pp-name { font-size: 24px; }
}

/* ── Photo spinner (shared: single-inventor + public profile) ─── */
.sprof-photo-spinner { position: absolute; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; }
.sprof-photo-spinner__ring { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; animation: sprof-spin .75s linear infinite; }
@keyframes sprof-spin { to { transform: rotate(360deg); } }

/* Profile cover crop modal */
/* ── About block inline edit ──────────────────────────────────── */
.pp-block-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pp-block-hd .pp-block-title { margin-bottom:0; }

.pp-details-form { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.pdf-field { display:flex; flex-direction:column; gap:4px; }
.pdf-label { font-size:11px; font-weight:700; letter-spacing:.06em; color:#888; text-transform:uppercase; }
.pdf-input, .pdf-select {
  width:100%; padding:8px 10px; border:1.5px solid #e0ddd6; border-radius:10px;
  font-size:14px; font-family:inherit; color:var(--text); background:#fff;
  outline:none; transition:border-color .15s; box-sizing:border-box;
}
.pdf-input:focus, .pdf-select:focus { border-color:#00337A; }
.pdf-search-wrap { position:relative; }
.pdf-dropdown {
  display:none; position:absolute; left:0; right:0; top:calc(100% + 4px);
  background:#fff; border:1.5px solid #e0ddd6; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,30,74,.1); z-index:200;
  max-height:180px; overflow-y:auto; list-style:none; margin:0; padding:4px 0;
}
.pdf-dropdown li { padding:8px 12px; font-size:14px; cursor:pointer; color:var(--text); }
.pdf-dropdown li:hover { background:#f0f4ff; }
.pdf-actions { display:flex; gap:8px; margin-top:4px; }
.pdf-actions .btn { flex:1; text-align:center; justify-content:center; padding:8px 14px; font-size:13px; }

/* Cover crop stage overrides */
#pp-cover-stage { aspect-ratio: 16/5; border-radius: 8px; }
#pp-cover-canvas { display:block; width:100%; height:100%; touch-action:none; }

.pp-crop-modal { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; background:rgba(0,0,0,.7); padding:20px; }
.pp-crop-box { background:#fff; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; max-width:900px; width:100%; }
.pp-crop-box canvas { display:block; width:100%; cursor:grab; }
.pp-crop-box canvas:active { cursor:grabbing; }
.pp-crop-controls { padding:16px 20px; display:flex; flex-direction:column; gap:12px; }
.pp-crop-zoom-label { font-size:13px; font-weight:600; color:#3A414B; display:flex; align-items:center; gap:10px; }
.pp-crop-zoom-label input[type=range] { flex:1; accent-color:#00337A; }
.pp-crop-actions { display:flex; gap:10px; justify-content:flex-end; }
.pp-crop-btn { padding:9px 22px; border-radius:50px; font-size:14px; font-weight:700; border:none; cursor:pointer; }
.pp-crop-btn--cancel { background:#f0f0f0; color:#333; }
.pp-crop-btn--save   { background:#00337A; color:#fff; }

/* ══ All News page (/news) ═══════════════════════════════════════════ */
/* pa- tokens are global so news cards work outside /news too (e.g. homepage). */
:root {
  --pa-ink: #16213E;
  --pa-shadow: 0 14px 40px rgba(22,33,62,.10);
  --pa-shadow-hover: 0 24px 60px rgba(22,33,62,.16);
  --pa-hairline: rgba(0,51,122,.14);
  --pa-blue-hover: #16309a;
}
.page-allnews {
  font-family: 'Inter', 'Onest', 'Helvetica Neue', Arial, sans-serif;
}
.page-allnews a { text-decoration: none; }

/* Placeholder thumbnail */
.page-allnews .thumb {
  background: #dcd4c2
    repeating-linear-gradient(135deg, transparent 0 16px, rgba(0,51,122,.06) 16px 32px);
  display: block;
  width: 100%;
  height: 100%;
}

/* Page header */
.pa-head {
  position: relative;
  overflow: hidden;  /* clips the decorative blob to the VIEWPORT edge (full-bleed), not mid-content */
  margin: 0 auto;
  padding: 120px 0 50px;  /* full-width so the blob bleeds off the right edge; .pa-head__inner centres the content */
}
.pa-head__blob {
  position: absolute; top: -80px; right: -40px;
  width: 300px; height: 300px; border-radius: 50%;
  background: var(--yellow); opacity: .9; z-index: 0;
}
.pa-head__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 var(--px); display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }  /* = .container: content aligns with every other page (177px @1440) */
.pa-head__text { max-width: 720px; }
.pa-eyebrow {
  font-weight: 700; font-size: 14px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--blue); margin: 0 0 16px;
}
.pa-head__title {
  font-weight: 900; font-size: 58px; line-height: 1.02;
  letter-spacing: -2.5px; color: var(--blue); margin: 0 0 22px;
}
.pa-head__lead {
  font-size: 19px; line-height: 1.55; color: var(--pa-ink);
  opacity: .78; max-width: 620px; margin: 0;
}

/* Toolbar */
.pa-toolbar {
  max-width: 1180px; margin: 0 auto;
  padding: 0 32px 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.pa-toolbar__filters { display: flex; gap: 10px; flex-wrap: wrap; }
.pa-chip {
  cursor: pointer; border: 1px solid var(--pa-hairline);
  background: var(--white); color: var(--pa-ink);
  font-family: inherit; font-weight: 600; font-size: 14px;
  padding: 9px 20px; border-radius: var(--r-pill);
  transition: background .15s ease, color .15s ease;
}
.pa-chip:hover { background: rgba(0,51,122,.06); }
.pa-chip--active { border-color: transparent; background: var(--blue); color: var(--white); font-weight: 700; }
.pa-toolbar__right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pa-search {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--pa-hairline);
  border-radius: var(--r-pill); padding: 10px 20px; min-width: 260px;
}
.pa-search__icon { display: inline-flex; color: var(--pa-ink); opacity: .45; }
.pa-search__input {
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 15px; color: var(--pa-ink); width: 100%;
}
.pa-toolbar__count { font-size: 14px; color: var(--pa-ink); opacity: .6; margin: 0; white-space: nowrap; }

/* Stories */
.pa-stories { max-width: 1180px; margin: 0 auto; padding: 24px 32px 90px; }

/* Featured */
.pa-feature {
  display: grid; grid-template-columns: 1.1fr 1fr;
  background: var(--white); border-radius: 32px; overflow: visible;
  box-shadow: var(--pa-shadow); margin-bottom: 40px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pa-feature:hover { transform: translateY(-6px); box-shadow: var(--pa-shadow-hover); }
.pa-feature__media { position: relative; min-height: 320px; border-radius: 32px 0 0 32px; overflow: hidden; }
.pa-feature__body { padding: 46px 48px; display: flex; flex-direction: column; justify-content: center; }
.pa-feature__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pa-feature__source { font-weight: 700; font-size: 13px; color: var(--pa-ink); opacity: .55; }
.pa-feature__title {
  font-weight: 900; font-size: 32px; line-height: 1.15; letter-spacing: -1px;
  color: var(--pa-ink); margin: 0 0 16px;
}
.pa-feature__excerpt { font-size: 16px; line-height: 1.55; color: var(--pa-ink); opacity: .7; margin: 0 0 26px; }

.pa-tag { font-weight: 800; font-size: 12px; padding: 6px 14px; border-radius: var(--r-pill); letter-spacing: .5px; }
.pa-tag--featured { background: var(--yellow); color: var(--blue); }

/* Grid */
.pa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.pa-card {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: 28px; overflow: visible;
  box-shadow: var(--pa-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pa-card:hover { transform: translateY(-6px); box-shadow: var(--pa-shadow-hover); }
.pa-card, .pa-feature { cursor: pointer; }
.pa-card__media { position: relative; width: 100%; height: 200px; border-radius: 28px 28px 0 0; overflow: hidden; }
.pa-card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.pa-card__source { font-weight: 700; font-size: 12px; color: var(--pa-ink); opacity: .55; margin-bottom: 12px; }
.pa-card__title {
  font-weight: 800; font-size: 19px; line-height: 1.3; letter-spacing: -.5px;
  color: var(--pa-ink); margin: 0 0 18px; min-height: 99px;
}

/* Buttons */
.pa-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer; font-family: inherit; text-decoration: none;
  border-radius: var(--r-pill); transition: transform .15s ease, background .15s ease;
}
.pa-btn--primary { background: var(--blue); color: var(--white); font-weight: 700; font-size: 15px; padding: 13px 28px; }
.pa-btn--primary:hover { color: var(--white); transform: translateY(-2px); background: var(--pa-blue-hover); }
.pa-btn--sm { font-size: 14px; padding: 11px 22px; }
.pa-btn--ghost {
  background: var(--white); color: var(--blue); font-weight: 700; font-size: 16px;
  padding: 15px 34px; box-shadow: var(--pa-shadow);
}
.pa-btn--ghost:hover { transform: translateY(-2px); }
.pa-load-more { display: flex; justify-content: center; margin-top: 56px; }

/* Responsive */
@media (max-width: 900px) {
  .pa-grid { grid-template-columns: repeat(2, 1fr); }
  .pa-feature { grid-template-columns: 1fr; }
  .pa-feature__media { min-height: 220px; border-radius: 32px 32px 0 0; }
}
@media (max-width: 768px) {
  .pa-head { padding: 88px 0 30px; }  /* L/R handled by .pa-head__inner (--px); clear the fixed header on mobile */
  .pa-head__title { font-size: 42px; letter-spacing: -1.5px; }
  .pa-toolbar { padding: 0 20px 16px; }
  .pa-stories { padding: 20px 20px 70px; }
  .pa-grid { grid-template-columns: 1fr; }
  .pa-card__title { min-height: 0; }
  .pa-feature__body { padding: 32px 26px; }
  .pa-feature__title { font-size: 26px; }
}

/* ══ News article page (single.php) ══════════════════════════════════ */
.na-article-page {
  font-family: 'Inter', 'Onest', 'Helvetica Neue', Arial, sans-serif;
  padding-top: 72px; /* clear the fixed site header */
  --na-ink: #16213E;
  --na-shadow: 0 14px 40px rgba(22,33,62,.10);
  --na-shadow-hover: 0 24px 60px rgba(22,33,62,.16);
  --na-hairline: rgba(0,51,122,.14);
  --na-rule: rgba(0,51,122,.10);
  --na-read: 800px;
  --na-media: 1040px;
  --na-gutter: 40px;
  color: var(--na-ink);
}
.na-article-page a { text-decoration: none; }
.na-thumb-fill {
  width: 100%; height: 100%;
  background: #dcd4c2
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(0,51,122,.06) 18px 36px);
}

/* Article head */
.na-article { max-width: var(--na-read); margin: 0 auto; padding: 10px var(--na-gutter) 0; }
.na-back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; color: var(--blue); margin-bottom: 28px;
}
.na-back-link:hover { color: #16309a; }
.na-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.na-tag { font-weight: 800; font-size: 12px; padding: 6px 14px; border-radius: var(--r-pill); letter-spacing: .5px; }
.na-tag--category { background: var(--yellow); color: var(--blue); }
.na-date { font-weight: 700; font-size: 14px; color: var(--na-ink); opacity: .55; }
.na-title {
  font-weight: 900; font-size: 46px; line-height: 1.08; letter-spacing: -1.8px;
  color: var(--blue); margin: 0 0 22px;
}
.na-standfirst { font-size: 21px; line-height: 1.5; color: var(--na-ink); opacity: .8; margin: 0 0 30px; }

/* Byline */
.na-byline {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 0; margin-bottom: 36px;
  border-top: 1px solid var(--na-rule); border-bottom: 1px solid var(--na-rule);
}
.na-byline__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #dcd4c2; }
.na-byline__text { line-height: 1.3; }
.na-byline__name { font-weight: 800; font-size: 15px; }
.na-byline__place { font-weight: 600; font-size: 13px; opacity: .55; }
.na-byline__auto { margin-left: 8px; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--na-ink); opacity: .4; background: rgba(0,51,122,.08); padding: 2px 7px; border-radius: 5px; vertical-align: middle; }
.na-byline__dateline { align-items: center; gap: 7px; margin-top: 6px; color: var(--blue); }
.na-byline__dateline > svg { flex: 0 0 auto; opacity: .7; }
.na-byline__dateline-input { border: 1.5px dashed rgba(0,51,122,.30); border-radius: var(--r-pill); padding: 6px 14px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--na-ink); background: var(--white); outline: none; min-width: 260px; }
.na-byline__dateline-input:focus { border-color: var(--blue); }
/* Google Places autocomplete dropdown above the fixed header */
.pac-container { z-index: 100000; border-radius: 12px; box-shadow: var(--na-shadow, 0 14px 40px rgba(22,33,62,.10)); font-family: 'Inter', sans-serif; }
/* Share bar — one segmented pill on a subtle navy-tinted background (blends into
   the cream page, no shadow). FB / LinkedIn / Instagram icon buttons + divider +
   labelled Copy-link. Icon hover = motion only (scale, no filled disc). */
.na-share {
  margin-left: auto; display: inline-flex; align-items: center;
  background: rgba(0,51,122,.05); border: 1px solid rgba(0,51,122,.10);
  border-radius: 999px; padding: 4px;
}
.na-share__btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: none;
  color: var(--blue); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.na-share__btn:hover { color: #16309a; transform: scale(1.18); }
.na-share__divider { width: 1px; height: 20px; background: rgba(0,51,122,.12); margin: 0 4px; }
.na-share__copy {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 16px 0 13px; border-radius: 999px; border: none;
  background: none; color: var(--blue); cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 13px;
  transition: background .18s ease, color .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.na-share__copy:hover { background: var(--blue); color: #fff; transform: translateY(-1px); }
.na-share__icon-check, .na-share__label-copied { display: none; }
.na-share__copy.is-copied { background: var(--blue); color: #fff; }
.na-share__copy.is-copied .na-share__icon-link, .na-share__copy.is-copied .na-share__label { display: none; }
.na-share__copy.is-copied .na-share__icon-check,
.na-share__copy.is-copied .na-share__label-copied { display: inline-flex; align-items: center; }

/* Hero */
.na-hero { max-width: var(--na-read); margin: 0 auto 12px; padding: 0 var(--na-gutter); }
.na-hero__imgwrap { position: relative; }
/* Ring-only spinner (no overlay / blur / background) */
.na-spinner {
  width: 44px; height: 44px;
  border: 4px solid rgba(0,51,122,.18);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: na-spin .8s linear infinite;
  pointer-events: none;
}
@keyframes na-spin { to { transform: rotate(360deg); } }
/* Hero photo upload — spinner fixed & centered on screen */
#na-upload-spinner {
  position: fixed; top: 50%; left: 50%; margin: -22px 0 0 -22px; z-index: 9999;
  border-color: rgba(255,255,255,.85); border-top-color: var(--blue);
}
.na-hero__img { display: block; width: 100%; height: 440px; object-fit: cover; border-radius: 24px; box-shadow: var(--na-shadow); }
.na-hero__caption { font-size: 13px; opacity: .55; margin-top: 14px; text-align: center; }
.na-hero__caption:empty { display: none; }
.na-is-editing .na-hero__caption { display: block; cursor: text; outline: none; }
.na-is-editing .na-hero__caption:empty::before { content: 'Add a caption for the photo'; opacity: .55; }
.na-is-editing .na-hero__caption:focus { opacity: .85; }

/* Prose (CMS rich text — style the_content() children) */
.na-prose-wrap { position: relative; }
.na-prose { padding: 30px 0 30px; font-size: 18px; line-height: 1.72; color: var(--na-ink); }
/* h1/h2 carry a large margin-top (see below); with nothing to collapse
   against, that margin shows as a sudden empty gap above the FIRST block —
   converting the very first line to a heading (formatBlock) then reads as
   the caret/text jumping down a line instead of just changing its style. */
.na-prose > *:first-child { margin-top: 0 !important; }
/* Plain typed content in the editor's contentEditable lands as unclassed <div>
   (Chrome's default paragraph separator), which correctly inherits --na-ink
   from .na-prose. A real <p> — e.g. produced by toggling Quote off via
   execCommand('formatBlock', false, 'p') — matches the site-wide base
   `p { color: var(--muted) }` rule directly, which wins over inheritance
   regardless of specificity, turning the paragraph gray. Pin it explicitly so
   both element types render identically. */
.na-prose p { margin: 0 0 24px; color: inherit; }
/* Chrome's contentEditable default paragraph separator is <div>, so EVERY
   regular typed paragraph (not just pasted content) lands here — give it the
   same spacing as .na-prose p. (No longer neutralizing bold/underline inside
   these divs: paste is already stripped to clean <p> text before insertion —
   see the editor's paste handler — so a <b>/<u> found here now is always
   something the editor's own toolbar genuinely applied, and hiding it made
   the toolbar's active-state highlight lie about what's on screen.) */
.na-prose div:not([class]) { margin: 0 0 24px; }
.na-prose h1 u, .na-prose h1 i,
.na-prose h2 u, .na-prose h2 i,
.na-prose h3 u, .na-prose h3 i { text-decoration: none; font-style: normal; }
/* Strip inline colours/fonts pasted from external docs — enforce theme styling. */
.na-prose [style] { color: inherit !important; background-color: transparent !important; font-family: inherit !important; }
/* Inside headings, ignore any leftover inline size/weight/spacing — the tag alone styles it
   (prevents "grey but big" when a heading carries a nested <span style="font-size:28px">). */
.na-prose h1 [style], .na-prose h2 [style], .na-prose h3 [style] {
  font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important;
}
.na-prose img { display: block; width: 100%; max-height: 440px; object-fit: cover; border-radius: 24px; margin: 32px 0; box-shadow: var(--na-shadow); }
.na-prose figure { margin: 32px 0; }
.na-is-editing .na-prose figure { position: relative; }
.na-fig-del {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,16,32,.55); color: #fff; font-size: 18px; line-height: 1;
}
.na-fig-del:hover { background: rgba(11,16,32,.8); }
.na-prose figure img { margin: 0; }
.na-prose figcaption, .na-prose .wp-element-caption {
  font-size: 13px; opacity: .55; margin-top: 12px; text-align: center;
}
.na-prose .aligncenter { text-align: center; }
.na-prose .alignright { float: right; margin: 0 0 20px 24px; max-width: 50%; }
.na-prose .alignleft  { float: left;  margin: 0 24px 20px 0; max-width: 50%; }
.na-prose a { color: var(--blue); text-decoration: underline; }
.na-prose u { text-decoration: underline; }
/* Quill's toolbar H1/H2 buttons produce REAL <h1>/<h2> tags (value="1"/"2"
   on the ql-header format) matching their labels directly — unlike the
   pre-Quill editor, which used custom .na-inline-h2/.na-inline-h3 SPANS
   with an internal H1-looks-like-h2, H2-looks-like-h3 mapping (removed
   below along with those now-dead classes). h1 got NO rule here until this
   fix, so it fell through to the browser's raw default <h1> size — fine
   inside the editor (quill.snow.css has its own reasonable h1 default) but
   huge and uncontrolled on the published page, which only ever sees
   .na-prose's own styling. h3 is kept as a fallback for any legacy content
   that predates the inline-span redesign and still has a real <h3>. */
.na-prose h1 { font-weight: 900; font-size: 28px; letter-spacing: -.8px; color: var(--blue); margin: 44px 0 18px; line-height: 1.2; }
.na-prose h2, .na-prose h3 { font-weight: 800; font-size: 20px; color: var(--muted); margin: 36px 0 14px; letter-spacing: -.3px; line-height: 1.3; }
.na-prose ul { margin: 0 0 24px; padding-left: 26px; list-style: disc; }
.na-prose ol { margin: 0 0 24px; padding-left: 26px; list-style: decimal; }
.na-prose li { margin-bottom: 12px; padding-left: 4px; }
.na-prose li::marker { color: var(--blue); }
.na-prose blockquote {
  margin: 36px 0; padding: 8px 0 8px 28px;
  border-left: 4px solid var(--yellow);
  font-style: italic; font-weight: 800; font-size: 26px; line-height: 1.35;
  letter-spacing: -.5px; color: var(--blue);
}
.na-prose blockquote p { margin: 0; font-size: inherit; }
.na-prose blockquote cite { display: block; margin-top: 16px; font-style: normal; font-weight: 700; font-size: 15px; color: var(--na-ink); opacity: .6; }
.na-watch {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: var(--white) !important; text-decoration: none !important;
  font-weight: 700; font-size: 15px; padding: 12px 24px; border-radius: var(--r-pill);
  transition: transform .15s ease, background .15s ease;
}
.na-watch:hover { transform: translateY(-2px); background: #16309a; }

/* Tags */
.na-tags { max-width: var(--na-read); margin: 0 auto; padding: 0 var(--na-gutter) 40px; display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.na-tags__label { font-weight: 700; font-size: 13px; opacity: .5; margin-right: 4px; padding-top: 8px; }
/* min-width:0 lets these flex items actually shrink to the row's available
   width instead of forcing it to overflow past --na-read — a single very
   long tag name otherwise stretched the whole tags row (and the chip's own
   white-space:nowrap kept its text on one un-wrapped line regardless). */
.na-tags__view { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.na-chip {
  display: inline-flex; align-items: center; white-space: normal; max-width: 100%;
  background: var(--white); border: 1px solid var(--na-hairline);
  color: var(--na-ink); font-weight: 600; font-size: 13px; line-height: 1.2;
  padding: 7px 16px; border-radius: var(--r-pill); transition: background .15s ease;
}
.na-chip:hover { color: var(--na-ink); background: rgba(0,51,122,.06); }

/* Related */
.na-related { max-width: var(--na-media); margin: 0 auto; padding: 20px var(--na-gutter) 90px; }
.na-related__title { font-weight: 900; font-size: 30px; letter-spacing: -1px; color: var(--blue); margin: 0 0 28px; }
.na-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.na-mini-card {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: 28px; overflow: hidden;
  box-shadow: var(--na-shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.na-mini-card:hover { transform: translateY(-6px); box-shadow: var(--na-shadow-hover); }
.na-mini-card__thumb { width: 100%; height: 170px; }
.na-mini-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.na-mini-card__source { font-weight: 700; font-size: 12px; opacity: .55; margin-bottom: 10px; }
.na-mini-card__title { font-weight: 800; font-size: 18px; line-height: 1.3; letter-spacing: -.5px; color: var(--na-ink); margin: 0; min-height: 70px; }

/* Responsive */
@media (max-width: 900px) {
  .na-related__grid { grid-template-columns: 1fr; }
  .na-mini-card__title { min-height: 0; }
}
@media (max-width: 768px) {
  .na-article { padding: 7px 20px 0; }
  .na-title { font-size: 34px; letter-spacing: -1px; }
  .na-standfirst { font-size: 18px; }
  .na-hero { padding: 0 20px; }
  .na-hero__img { height: 240px; }
  .na-body-wrap { padding: 0 20px; }
  .na-prose { padding: 24px 0 48px; font-size: 17px; }
  #na-body.ql-container { font-size: 17px; }
  .na-prose h1 { font-size: 24px; }
  .na-prose blockquote { font-size: 22px; }
  .na-tags, .na-related { padding-left: 20px; padding-right: 20px; }
}

/* ══ All News — admin (manage) layer ═════════════════════════════════ */
/* Gated: hidden by default, shown only inside .pa-is-admin */
.pa-admin-only { display: none; }
.pa-is-admin .pa-admin-only { display: revert; }
.pa-is-admin .pa-status.pa-admin-only { display: inline-flex; }
.pa-is-admin .pa-actions__menu.pa-admin-only { display: block; }
.pa-is-admin .pa-add-btn.pa-admin-only { display: inline-flex; }

/* + Add news button */
.pa-add-btn { font-size: 16px; padding: 15px 28px; gap: 10px; box-shadow: var(--pa-shadow); align-self: center; }

/* Read more + actions row */
.pa-feature__actions { position: relative; display: flex; align-items: center; gap: 12px; }
.pa-actions { margin-top: auto; position: relative; display: flex; align-items: center; gap: 8px; }
.pa-btn--read { flex: 1; font-size: 14px; padding: 11px 16px; }
.pa-card--draft .pa-card__title { opacity: .85; }

/* Status badge */
.pa-status {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 800; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill); z-index: 2;
}
.pa-status__dot { width: 7px; height: 7px; border-radius: 50%; }
.pa-status--published { background: rgba(11,122,59,.12); color: #0B7A3B; }
.pa-status--published .pa-status__dot { background: #0B7A3B; }
.pa-status--draft { background: rgba(180,130,0,.14); color: #8A6400; }
.pa-status--draft .pa-status__dot { background: #E0A400; }

/* Card edited-meta line */
.pa-card__meta { font-size: 12px; opacity: .45; margin-bottom: 16px; }

/* Kebab + overflow menu */
.pa-actions__menu { position: relative; }
.pa-kebab {
  flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid var(--pa-hairline);
  background: var(--white); border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blue); transition: background .15s ease;
}
.pa-kebab:hover, .pa-kebab.is-open { background: rgba(0,51,122,.08); }
.pa-menu {
  position: absolute; bottom: 52px; right: 0; width: 200px;
  background: var(--white); border: 1px solid rgba(0,51,122,.10); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(22,33,62,.20); padding: 8px; z-index: 20; display: none;
}
.pa-menu--from-left { left: 0; right: auto; }
.pa-menu--open { display: block; }
.pa-menu__item {
  width: 100%; cursor: pointer; font-family: inherit; text-align: left;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: none; background: transparent; border-radius: 10px;
  color: var(--na-ink, #16213E); font-weight: 600; font-size: 14px; text-decoration: none;
  transition: background .12s ease;
}
.pa-menu__item:hover { background: rgba(0,51,122,.06); color: var(--na-ink, #16213E); }
.pa-menu__item--accent { color: var(--blue); font-weight: 700; }
.pa-menu__item--accent:hover { color: var(--blue); }
.pa-menu__item--danger { color: #C8102E; }
.pa-menu__item--danger:hover { background: rgba(200,16,46,.08); color: #C8102E; }
.pa-menu__item svg { flex: 0 0 16px; }
.pa-menu__divider { height: 1px; background: rgba(0,51,122,.10); margin: 6px 8px; }

@media (max-width: 768px) {
  .pa-add-btn { align-self: flex-start; }
}

/* ══ News article — inline admin editor ══════════════════════════════ */
/* Gating — hidden by default, revealed with the element's correct display
   value (never `revert`, which would clobber custom display like the hero
   label). Editing rules come after admin rules so they win when both apply. */
.na-admin-only { display: none; }
.na-edit-only  { display: none; }

/* admin (view) reveals */
.na-is-admin .na-status { display: inline-flex; }
.na-is-admin .na-edit-toggle { display: inline-flex; }

/* editing reveals / hides */
.na-is-editing .na-view-only { display: none; }
.na-is-editing .na-field { display: block; }
.na-is-editing .na-field-wrap { display: block; position: relative; }
.na-field-count {
  position: absolute; right: -6px; bottom: -6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #fff; border: 1.5px solid #D3E1F4;
  box-shadow: 0 2px 6px rgba(0,20,50,.10);
  font-family: 'Outfit', system-ui, sans-serif; font-size: 11px; font-weight: 700; line-height: 1;
  color: #00337A; z-index: 1; pointer-events: none;
}
.na-field-count--over { color: #B3261E; border-color: #F2C6C2; }
/* The article body's badge has no wrapping .na-edit-only element (it sits
   next to #na-body, which must stay visible outside edit mode too) — id
   rules keep this reliable regardless of source order against the shared
   .na-field-count { display: inline-flex } declaration above. */
#na-charcount { display: none; }
.na-is-editing #na-charcount { display: inline-flex; }
.na-is-editing .na-field-pill { display: inline-block; }
.na-is-editing .na-rt-toolbar { display: flex; }
.na-is-editing .na-tags__edit { display: inline-flex; }
.na-is-editing .na-hero__drop:not([hidden]) { display: block; }
.na-is-editing .na-byline__dateline { display: inline-flex; }
.na-is-editing .na-byline__auto { display: inline-block; }

/* Buttons (article scope) */
.na-btn { cursor: pointer; font-family: inherit; border: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-pill); transition: transform .15s ease, background .15s ease; }
.na-btn--primary { background: var(--blue); color: var(--white); font-weight: 800; font-size: 15px; padding: 12px 24px; }
.na-btn--primary:hover { color: var(--white); transform: translateY(-2px); background: #16309a; }
.na-btn--sm { font-size: 13px; padding: 7px 16px; font-weight: 700; }
.na-btn--ghost-line { background: var(--white); color: var(--blue); font-weight: 700; font-size: 14px; padding: 10px 20px; border: 1.5px solid rgba(0,51,122,.20); gap: 9px; }
.na-btn--ghost-line:hover { color: var(--blue); background: rgba(0,51,122,.06); }

/* Top bar */
.na-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.na-bar .na-back-link { margin-bottom: 0; }

/* Status badge */
.na-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill); }
.na-status__dot { width: 7px; height: 7px; border-radius: 50%; }
.na-status--published { background: rgba(11,122,59,.12); color: #0B7A3B; }
.na-status--published .na-status__dot { background: #0B7A3B; }
.na-status--draft { background: rgba(180,130,0,.14); color: #8A6400; }
.na-status--draft .na-status__dot { background: #E0A400; }

/* Meta edit fields */
.na-field-pill { font-family: inherit; border-radius: var(--r-pill); padding: 6px 14px; outline: none; }
.na-field-pill--category { font-weight: 800; font-size: 12px; letter-spacing: .5px; color: var(--blue); background: #FFF7CC; border: 1.5px solid var(--yellow); width: 160px; }
.na-field-pill--date { font-weight: 700; font-size: 14px; color: var(--na-ink); background: var(--white); border: 1.5px dashed rgba(0,51,122,.30); width: 220px; }
.na-field-pill--type { font-weight: 800; font-size: 12px; letter-spacing: .5px; color: var(--blue); background: var(--white); border: 1.5px solid rgba(0,51,122,.30); width: auto; cursor: pointer; }
.na-field-pill--video { font-weight: 600; font-size: 13px; color: var(--na-ink); background: var(--white); border: 1.5px dashed rgba(0,51,122,.30); width: 260px; }
.na-field-pill:focus { border-color: var(--blue); }

/* Title / standfirst edit fields */
.na-field { width: 100%; box-sizing: border-box; font-family: inherit; border: 1.5px solid rgba(0,51,122,.20); border-radius: 12px; padding: 12px 16px; resize: vertical; background: var(--white); }
.na-field:focus { outline: none; border-color: var(--blue); }
.na-field--title { font-weight: 900; font-size: 40px; line-height: 1.08; letter-spacing: -1.8px; color: var(--blue); margin: 0 0 18px; }
.na-field--standfirst { font-size: 21px; line-height: 1.5; color: var(--na-ink); margin: 0 0 30px; }

/* Hero replace + empty-state upload */
.na-hero__replace {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(0,30,74,.72); color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: var(--r-pill);
  backdrop-filter: blur(4px); transition: background .15s ease;
}
.na-hero__replace:hover { background: rgba(0,30,74,.9); }
@keyframes na-ph-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.na-hero__drop {
  position: relative; width: 100%; height: 440px; border-radius: 24px; overflow: hidden; cursor: pointer;
  background: linear-gradient(150deg, #fff 0%, var(--cream) 100%);
  border: 2px dashed rgba(0,51,122,.26); box-shadow: var(--na-shadow);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.na-hero__drop:hover { border-color: var(--blue); box-shadow: var(--na-shadow-hover); transform: translateY(-3px); }
.na-hero__blob { position: absolute; border-radius: 50%; }
.na-hero__blob--gold { width: 300px; height: 300px; background: var(--yellow); opacity: .14; top: -100px; right: -70px; }
.na-hero__blob--navy { width: 180px; height: 180px; background: var(--blue); opacity: .06; bottom: -70px; left: -40px; }
.na-hero__inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; gap: 6px; }
.na-hero__cam { width: 76px; height: 76px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,30,74,.28); margin-bottom: 16px; animation: na-ph-float 4.5s ease-in-out infinite; }
.na-hero__ptitle { font-weight: 900; font-size: 22px; color: var(--blue); letter-spacing: -.3px; }
.na-hero__sub { font-size: 15px; line-height: 1.55; color: var(--na-ink); opacity: .6; max-width: 300px; }
.na-hero__cta { margin-top: 18px; box-shadow: 0 6px 18px rgba(0,30,74,.24); }

/* Rich-text toolbar */
.na-body-wrap { max-width: var(--na-read); margin: 0 auto; padding: 0 var(--na-gutter); position: relative; }
.na-rt-toolbar { position: sticky; top: 72px; z-index: 20; align-items: center; gap: 6px; padding: 10px 12px; background: var(--white); border: 1.5px solid rgba(0,51,122,.20); border-bottom: none; border-radius: 12px 12px 0 0; flex-wrap: wrap; }
.na-rt-btn { width: 34px; height: 34px; border: none; background: none; cursor: pointer; border-radius: 8px; font-size: 15px; color: var(--blue); display: inline-flex; align-items: center; justify-content: center; }
.na-rt-btn:hover { background: rgba(0,51,122,.08); }
.na-rt-btn--wide { width: auto; padding: 0 10px; font-weight: 800; font-size: 14px; }
.na-rt-sep { width: 1px; height: 20px; background: rgba(0,51,122,.15); margin: 0 4px; }
.na-rt-done { margin-left: auto; font-size: 13px; padding: 9px 20px; }
/* Quill's own toolbar/button chrome (quill.snow.css, loaded after this
   stylesheet) would otherwise win ties on equal specificity — #na-toolbar's
   ID gives these enough specificity to always win regardless of load order,
   without needing !important. is-active renamed to Quill's own ql-active,
   which it toggles natively (see CLAUDE.md's news-editor section — this
   replaced ~700 lines of hand-rolled contentEditable/execCommand toggling). */
#na-toolbar.ql-toolbar.ql-snow { border: 1.5px solid rgba(0,51,122,.20); border-bottom: none; padding: 10px 12px; }
#na-toolbar .na-rt-btn.ql-active { background: var(--blue); color: #fff; }
#na-toolbar .ql-stroke { stroke: currentColor; }
#na-toolbar .ql-fill { fill: currentColor; }
#na-toolbar .ql-picker { color: currentColor; }

/* Quill editor body in edit mode — #na-body's ID likewise beats
   .ql-container.ql-snow's own border/padding/font defaults. Quill also adds
   the "ql-container" class directly onto #na-body itself, and quill.snow.css
   has a bare `.ql-container{font-size:13px}` rule — same specificity as
   `.na-prose{font-size:18px}`, so without restating the size here it silently
   won the tie and every plain paragraph (no explicit font-size of its own,
   unlike h1/h2/h3/blockquote below) inherited 13px instead of 18px. */
#na-body.ql-container { border: none; font-family: inherit; font-size: 18px; line-height: 1.72; }
#na-body .ql-editor { font-family: inherit; font-size: inherit; line-height: inherit; outline: none; }
/* quill.snow.css ships its own defaults for p/h1-h6/blockquote/lists (e.g.
   .ql-editor blockquote{border-left:4px solid #ccc;...}, .ql-editor
   h1{font-size:2em}, .ql-editor p{margin:0}) that tie with .na-prose's own
   rules on specificity (both are one class + one tag) — quill.snow.css loads
   after this stylesheet, so it silently won every tie: grey blockquote
   border instead of gold, headings sized off the browser's em-relative
   defaults instead of .na-prose's branded sizes, paragraphs losing their
   24px bottom margin entirely. Reported live: text styled correctly once
   published, but visibly different (smaller, cramped, wrong colours) while
   actually editing. #na-body's ID on every rule below guarantees OUR
   typography wins here too, so the editor is genuinely WYSIWYG — these are
   exact duplicates of the .na-prose rules above, not new values. */
#na-body .ql-editor p { margin: 0 0 24px; padding: 0; color: inherit; }
#na-body .ql-editor h1 { font-weight: 900; font-size: 28px; letter-spacing: -.8px; color: var(--blue); margin: 44px 0 18px; padding: 0; line-height: 1.2; }
#na-body .ql-editor h2, #na-body .ql-editor h3 { font-weight: 800; font-size: 20px; color: var(--muted); margin: 36px 0 14px; padding: 0; letter-spacing: -.3px; line-height: 1.3; }
#na-body .ql-editor ul { margin: 0 0 24px; padding-left: 26px; list-style: disc; }
#na-body .ql-editor ol { margin: 0 0 24px; padding-left: 26px; list-style: decimal; }
#na-body .ql-editor li { margin-bottom: 12px; padding-left: 4px; }
#na-body .ql-editor blockquote {
  margin: 36px 0; padding: 8px 0 8px 28px;
  border-left: 4px solid var(--yellow);
  font-style: italic; font-weight: 800; font-size: 26px; line-height: 1.35;
  letter-spacing: -.5px; color: var(--blue);
}
#na-body .ql-editor blockquote p { margin: 0; padding: 0; font-size: inherit; }
/* h1/h2/h3/blockquote carry a large top margin meant to separate them from
   a PRECEDING paragraph — fine on the published page, but when one of them
   is the very first block right under the toolbar it just reads as a big
   dead gap inside the bordered editor box. Zero it only for the first child
   here; the published .na-prose rules above are untouched. */
#na-body .ql-editor > *:first-child { margin-top: 0; }
/* .na-prose#na-body (not just .na-prose) so this border beats the
   #na-body.ql-container reset above on specificity — both are ID-scoped now,
   so source order no longer matters. Without this, the reset's border:none
   silently won every time (class selector loses to ID+class regardless of
   which comes later), leaving only the toolbar's own border visible and the
   body looking like its frame was cut off right below the toolbar. */
.na-is-editing .na-prose#na-body { min-height: 320px; padding: 20px 22px; background: var(--white); border: 1.5px solid rgba(0,51,122,.20); border-radius: 0 0 12px 12px; }
.na-is-editing .na-prose .ql-editor { padding: 0; }
.na-is-editing .na-prose:focus-within { border-color: var(--blue); }
/* The bordered box's own bottom padding (above) is INSIDE the border, so it
   doesn't create any gap between the border and whatever sits below (Tags
   has no top spacing of its own) — the box ran straight into the Tags row.
   Only needed while editing: view mode has no border to crowd against. */
.na-is-editing .na-body-wrap { margin-bottom: 28px; }
/* Empty caption: hidden in the view; editable placeholder while editing. */
.na-prose figcaption:empty { display: none; }
.na-is-editing .na-prose figcaption { display: block; }
.na-is-editing .na-prose figcaption.na-cap-empty::before { content: 'Add a caption for the photo'; opacity: .55; }

/* Tag editor */
.na-tags__edit { display: none; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.na-tags__chips { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.na-tag-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,51,122,.06); border: 1px solid var(--na-hairline); color: var(--blue); font-weight: 600; font-size: 13px; padding: 6px 8px 6px 14px; border-radius: var(--r-pill); max-width: 100%; white-space: normal; }
.na-tag-chip__x { width: 20px; height: 20px; border: none; cursor: pointer; background: rgba(0,51,122,.12); color: var(--blue); border-radius: 50%; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.na-tag-input { border: 1.5px dashed rgba(0,51,122,.30); outline: none; background: var(--white); font-family: inherit; font-size: 13px; color: var(--na-ink); padding: 7px 14px; border-radius: var(--r-pill); width: 150px; }
.na-tag-input:disabled, #na-tag-add:disabled { opacity: .5; cursor: not-allowed; }
/* Existing-tag autocomplete dropdown */
.na-tag-inputwrap { position: relative; display: inline-block; }
.na-tag-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 200px; max-height: 240px; overflow-y: auto;
  background: var(--white); border: 1px solid var(--na-hairline);
  border-radius: 12px; box-shadow: var(--na-shadow); padding: 6px;
}
.na-tag-suggest__item {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--na-ink); cursor: pointer;
  padding: 8px 12px; border-radius: 8px;
}
.na-tag-suggest__item:hover { background: rgba(0,51,122,.06); }

@media (max-width: 768px) {
  .na-field--title { font-size: 30px; }
  .na-hero__drop { height: 240px; }
  .na-field-pill--category, .na-field-pill--date, .na-field-pill--video { width: 100%; }
}

/* ══ In-article YouTube embed + modal ════════════════════════════════ */
.na-prose figure.yt-figure { margin: 32px 0; }
.na-prose .yt-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 24px; overflow: hidden; margin: 0;
  box-shadow: var(--na-shadow); background: #0b1020; cursor: pointer;
}
.na-prose .yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.na-prose .yt-embed .yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; max-height: none; border-radius: 0; box-shadow: none; }
.na-prose .yt-embed .yt-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,16,32,.05) 0%, rgba(11,16,32,.35) 100%); }
.na-prose .yt-embed .yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 82px; height: 82px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 6px 24px rgba(11,16,32,.4), 0 0 0 8px rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.na-prose .yt-embed .yt-play:hover {
  transform: translate(-50%,-50%) scale(1.08); background: #fff;
  box-shadow: 0 8px 30px rgba(11,16,32,.5), 0 0 0 10px rgba(255,255,255,.24);
}
.na-prose .yt-embed .yt-play svg { margin-left: 5px; }

/* Embed modal (editor chrome) */
.na-yt-modal { position: fixed; inset: 0; z-index: 60; background: rgba(19,27,69,.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.na-yt-modal[hidden] { display: none; }
.na-yt-modal__card { width: 100%; max-width: 480px; background: #fff; border-radius: 24px; box-shadow: 0 30px 80px rgba(19,27,69,.4); padding: 30px 30px 26px; }
.na-yt-modal__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.na-yt-modal__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(0,51,122,.08); display: flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; }
.na-yt-modal__title { font-weight: 900; font-size: 19px; color: var(--blue); letter-spacing: -.4px; }
.na-yt-modal__sub { font-size: 13px; color: var(--na-ink); opacity: .6; }
.na-yt-modal__input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 15px; color: var(--na-ink); background: #fff; border: 1.5px solid rgba(0,51,122,.25); border-radius: 12px; padding: 13px 16px; outline: none; }
.na-yt-modal__input:focus { border-color: var(--blue); }
.na-yt-modal__error { font-size: 13px; color: #C8102E; font-weight: 600; margin-top: 10px; }
.na-yt-modal__error[hidden] { display: none; }
.na-yt-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.na-yt-btn { cursor: pointer; font-family: inherit; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; }
.na-yt-btn--outline { border: 1.5px solid rgba(0,51,122,.20); background: #fff; color: var(--blue); font-weight: 700; font-size: 14px; padding: 11px 22px; }
.na-yt-btn--primary { border: none; background: var(--blue); color: #fff; font-weight: 800; font-size: 14px; padding: 11px 24px; }
.na-yt-btn--primary:hover { background: #16309a; color: #fff; }

/* ============================================================
   Sign-in modal (popup) — replaces the /sign-in/ page.
   Navy/gold/cream; cream-filled inputs → white + navy border on focus.
   ============================================================ */
.signin[hidden] { display: none; }
.signin__scrim {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0,30,74,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  /* The scrim itself scrolls; the card centres via margin:auto when it fits and
     stays fully reachable (head → footer) when it's taller than the viewport.
     Avoids the mobile 100vh + flex-centering clipping. */
  display: flex; justify-content: center; padding: 56px 32px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: signin-fade .2s ease;
  font-family: 'Outfit','Onest','Inter',sans-serif; color: var(--text);
}
.signin__card {
  position: relative; width: 100%; max-width: 460px; margin: auto; box-sizing: border-box;
  background: #fff; border-radius: 28px;
  box-shadow: 0 40px 100px rgba(0,30,74,.42);
  animation: signin-pop .28s cubic-bezier(.34,1.4,.5,1);
}
/* No overflow:hidden on the card — a custom dropdown list must be able to spill
   past its edge. The head rounds its own top corners to match instead. */

/* Cobalt header band with the compact white mark + a D-curved bottom-right corner. */
.signin__head {
  position: relative; background: var(--blue);
  padding: 30px 40px 34px; border-radius: 28px 28px 96px 0;
}
.signin__logo { display: flex; align-items: center; }
.signin__close {
  position: absolute; top: 22px; right: 22px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.signin__close:hover { background: rgba(255,255,255,.26); }

.signin__body { position: relative; z-index: 1; padding: 34px 40px 32px; }

.signin__title { font-family: 'Nunito','Outfit','Inter',sans-serif; font-weight: 800; font-size: 32px; line-height: 1.2; letter-spacing: -.008em; color: var(--blue); margin: 0 0 10px; }
.signin__lead { font-size: 15px; line-height: 1.6; color: #5C6675; margin: 0 0 26px; }

.signin__error {
  background: rgba(211,47,47,.08); border: 1px solid rgba(211,47,47,.25); color: #b3261e;
  font-size: 13.5px; font-weight: 600; border-radius: 12px; padding: 11px 14px; margin: 0 0 18px;
}

.btn-google {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 52px; border: 1px solid #D3E1F4; cursor: pointer;
  font-family: 'Outfit','Onest','Inter',sans-serif; background: #fff; color: var(--blue); font-weight: 500; font-size: 17px;
  border-radius: 999px; transition: background .15s ease, border-color .15s ease;
}
.btn-google:hover { background: #E9F0FA; border-color: #9FB6DB; }

.signin__or { display: flex; align-items: center; gap: 14px; margin: 22px 0; font-size: 13px; color: #687385; }
.signin__or span { flex: 1; height: 1px; background: #D3E1F4; }

/* Views (signin / register / reset / sent) swap in place with a slide+fade. */
.signin__view { display: none; }
/* Google + divider are sign-in only (existing accounts). */
.signin:not(.mode-signin) .btn-google,
.signin:not(.mode-signin) .signin__or { display: none; }
/* Every view except signin/register carries its own heading inside the view —
   hide the shared one there. */
.signin:not(.mode-signin):not(.mode-register) .signin__title:not(.signin__title--inview),
.signin:not(.mode-signin):not(.mode-register) .signin__lead:not(.signin__lead--inview) { display: none; }
.signin.mode-signin     .signin__view--signin     { display: block; animation: form-in-left .3s ease; }
.signin.mode-register   .signin__view--register   { display: block; animation: form-in-right .3s ease; }
.signin.mode-reset      .signin__view--reset       { display: block; animation: form-in-right .3s ease; }
.signin.mode-sent       .signin__view--sent        { display: block; animation: form-in-right .3s ease; }
.signin.mode-setpw      .signin__view--setpw       { display: block; animation: form-in-right .3s ease; }
.signin.mode-setpwdone  .signin__view--setpwdone   { display: block; animation: form-in-right .3s ease; }
.signin.mode-setpwbad   .signin__view--setpwbad    { display: block; animation: form-in-right .3s ease; }

/* Reset view — back link, email hint. */
.signin__back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; font-family: 'Outfit','Onest','Inter',sans-serif; font-weight: 500; font-size: 15px; color: var(--blue); text-decoration: none; }
.signin__back:hover { color: var(--navy); }
.signin__view--reset .signin__input { margin-bottom: 8px; }
.signin__hint { display: block; margin-bottom: 10px; font-size: 13px; line-height: 1.5; color: #5C6675; font-family: 'Outfit','Onest','Inter',sans-serif; }

/* Sent view — mail badge + stacked actions. */
.signin__sent-icon { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; margin: 6px 0 24px; border-radius: 50%; background: #E9F0FA; color: var(--blue); }
.signin__sent-email { font-weight: 600; color: var(--blue); }
.signin__sent-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.signin__sent-actions .btn-primary, .signin__sent-actions .btn-google { text-decoration: none; }
.signin__stop { color: var(--yellow); }
.signin__sent-icon--warn { background: #FDECEC; color: #b3261e; }

/* Standalone "set a new password" page (/reset-password/) — the sign-in card,
   centred on its own page instead of in the popup scrim. */
.rp-page {
  min-height: 68vh; display: flex; align-items: center; justify-content: center;
  padding: 48px 24px 80px; background: #FDFCFA;
  font-family: 'Outfit','Onest','Inter',sans-serif; color: var(--text);
}
.rp-page .signin__close { text-decoration: none; }
.signin__grid { display: flex; gap: 14px; }
.signin__grid > div:first-child { flex: 1 1 auto; min-width: 0; }
.signin__grade { flex: 0 0 132px; }
.signin__terms { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; color: var(--text); margin: 4px 0 6px; line-height: 1.5; font-family: 'Outfit','Onest','Inter',sans-serif; }
.signin__terms input { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; margin-top: 2px; flex-shrink: 0; }
.signin__terms a { color: var(--blue); }

/* School autocomplete dropdown (schools in Ukraine, EDBO registry) */
.school-ac-wrap { position: relative; }
/* setupAutocomplete() inserts this wrapper between the field and its flex
   parent — the signin modal's own .signin__input already sets width:100%
   directly on the <input>, so it was never affected there, but .ip-field
   input (page-inventor-profile.php's "About" edit form) relies on flex
   stretch from being a direct child, which the wrapper breaks the same way
   .inv-char-field did elsewhere — same fix. */
.school-ac-wrap input { width: 100%; box-sizing: border-box; }
.school-ac {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: #fff; border: 1px solid #D3E1F4; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,51,122,.14); padding: 8px; overflow: hidden;
  max-height: 240px; overflow-y: auto;
}
.school-ac__item {
  display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  font-family: 'Outfit','Onest','Inter',sans-serif; font-size: 15px; color: var(--text);
  padding: 10px 12px; border-radius: 10px; line-height: 1.3;
  overflow-wrap: anywhere; word-break: break-word;
}
.school-ac__item:hover, .school-ac__item.is-active { background: #E9F0FA; color: var(--blue); }

.signin__label { display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 15px; color: var(--blue); margin-bottom: 8px; font-family: 'Outfit','Onest','Inter',sans-serif; }
/* Required fields carry a golden dot, never an asterisk. */
.signin__label--req::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }
.signin__input {
  width: 100%; box-sizing: border-box; height: 48px; font-family: 'Outfit','Onest','Inter',sans-serif; font-size: 17px; color: var(--text);
  background: #E9F0FA; border: 1px solid #D3E1F4; border-radius: 8px; padding: 0 16px; outline: none;
  margin-bottom: 18px; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
select.signin__input { cursor: pointer; }
.signin__input:focus { background: #fff; border: 2px solid var(--blue); box-shadow: 0 0 0 3px rgba(255,195,2,.55); }

/* Custom dropdown (enhances a <select>) — the open list matches the site's
   .school-ac / design listbox (white, 16px, soft shadow, gold dot on selected)
   instead of the native OS menu. JS hides the <select> and drives this. */
.signin__dd { position: relative; margin-bottom: 18px; }
.signin__dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; margin-bottom: 0; }
.signin__dd-btn.is-placeholder { color: #6B7689; }
.signin__dd-caret { flex-shrink: 0; transition: transform .18s ease; color: var(--blue); }
.signin__dd.is-open .signin__dd-caret { transform: rotate(180deg); }
.signin__dd.is-open .signin__dd-btn { background: #fff; border: 2px solid var(--blue); box-shadow: 0 0 0 3px rgba(255,195,2,.55); }
.signin__dd-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  display: flex; flex-direction: column; min-width: 100%; max-height: 240px; overflow-y: auto;
  padding: 8px; background: #fff; border: 1px solid #D3E1F4; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,51,122,.14);
}
/* display:flex above beats the UA [hidden]{display:none}; restore it so JS's
   `list.hidden = true` actually closes the list. */
.signin__dd-list[hidden] { display: none; }
.signin__dd-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: none; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font-family: 'Outfit','Onest','Inter',sans-serif; font-size: 15px; color: var(--text);
}
.signin__dd-opt:hover, .signin__dd-opt.is-active { background: #E9F0FA; }
.signin__dd-opt.is-sel { color: var(--blue); }
.signin__dd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: transparent; }
.signin__dd-opt.is-sel .signin__dd-dot { background: var(--yellow); }
.signin__pw { position: relative; margin-bottom: 18px; }
.signin__pw .signin__input { margin-bottom: 0; padding-right: 48px; }
.signin__pw-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  color: var(--blue); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.signin__pw-toggle:hover { background: #D3E1F4; }

.signin__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 12px; }
.signin__remember { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; color: var(--text); font-family: 'Outfit','Onest','Inter',sans-serif; }
.signin__remember input { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }
.signin__link { font-weight: 500; font-size: 15px; color: var(--blue); text-decoration: none; }
.signin__row .signin__link { border-bottom: 1px solid #D3E1F4; }
.signin__link:hover { color: var(--navy); }

/* Global primary button (used on the Program page apply CTA, etc.). */
.btn-primary {
  width: 100%; border: none; cursor: pointer; font-family: 'Onest','Inter',sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--blue); color: #fff; font-weight: 800; font-size: 16px;
  padding: 16px; border-radius: 999px; transition: background .15s ease, transform .15s ease;
}
.btn-primary:hover { background: #16309a; transform: translateY(-2px); }
.btn-primary:disabled { opacity: .7; cursor: default; transform: none; }

/* Modal-scoped primary button — pill CTA overrides for the sign-in/register popup. */
.signin .btn-primary {
  width: 100%; height: 56px; border: none; cursor: pointer; font-family: 'Outfit','Onest','Inter',sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--blue); color: #fff; font-weight: 500; font-size: 17px;
  padding: 0; margin-top: 8px; border-radius: 999px; transition: background .15s ease, transform .1s ease;
}
.signin .btn-primary:hover { background: #00265C; transform: none; }
.signin .btn-primary:active { transform: scale(.985); }
.signin .btn-primary:disabled { opacity: .7; cursor: default; transform: none; }

.signin__foot {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid #D3E1F4; font-size: 15px; color: #5C6675;
  font-family: 'Outfit','Onest','Inter',sans-serif;
}
.signin__foot span { color: #5C6675; }
.signin__foot .signin__link { text-decoration: underline; }

@keyframes signin-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes signin-pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes form-in-right { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes form-in-left  { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 620px) {
  .signin__scrim { padding: 20px 12px; }
  .signin__card { border-radius: 22px; }
  .signin__head { padding: 24px 22px 28px; border-radius: 22px 22px 72px 0; }
  .signin__body { padding: 28px 22px 26px; }
  .signin__title { font-size: 27px; }
  .signin__grid { flex-direction: column; }
  .signin__grade { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   UKRIC 2.0 — corrections the token swap cannot reach.
   Each rule below fixes a specific brand-rule violation in the legacy CSS.
   ═══════════════════════════════════════════════════════════════════ */

/* Gold is never a text colour. */

.footer-col ul li a:hover { color: var(--white); }
.footer-bottom a { color: var(--white); }
.inv-card__award { background: var(--cream2); color: var(--blue); }
.award-badge { background: var(--cream2); color: var(--blue); }

/* Gold is never a background for text. */
/* The quote sits on a quiet sky panel, not a cobalt wall — the page keeps its air. */
.mission-strip { background: var(--white); padding: 0 0 96px; }
.mission-strip::before { content: none; }
/* DS QuoteCard, light tone: golden left rule, Nunito bold italic, ranged left. */
.mission-strip blockquote {
  color: var(--blue);
  font-family: 'Nunito', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.375rem, 2.1vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  background: var(--cream2);
  border-left: 4px solid var(--yellow);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 40px 48px;
  margin: 0;
  max-width: 46ch;
}
.mission-strip blockquote::before,
.mission-strip blockquote::after { content: none; }
.ab-section--yellow { background: var(--blue); }
.ab-section--yellow .ab-h2, .ab-section--yellow .ab-lead { color: var(--white); }
.section--yellow { background: var(--blue); }

/* One gold CTA per viewport. The header is sticky, so its CTA goes cobalt. */
.site-header .nav-donate-btn { background: var(--blue) !important; box-shadow: none; }
.nav-menu li.nav-donate > a { background: var(--blue); }
.nav-menu li.nav-donate > a::after { content: none; }

/* Flat by default: colour and space separate, not shadow. */
.btn-blue:hover, .btn-yellow:hover { transform: none; box-shadow: none; }
.btn-yellow:hover { background: #E5AE00; color: var(--blue); }
.btn-blue:hover { background: #002A66; }
.card:hover, .inventor-card:hover, .inv-card:hover,
.team-card:hover, .step-item:hover, .news-card:hover,
.hp-partner-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.inv-card:hover { border-color: var(--border); }
.hp-partner-card:hover { border-color: var(--border); }

/* No blobs, no gradients, no hatching, no decorative circles. */
.hero-blob-tl, .hero-blob-br,
.inv-hero__blob, .inv-hero__blob--lg, .inv-hero__blob--sm,
.sprof-blob, .sprof-blob--yellow, .sprof-blob--blue,
.inv-cta__blob, .inv-cta__blob--l, .inv-cta__blob--r,
.ab-hero__ball1, .ab-hero__ball2,
.inv-card__photo-lines, .inv-card__avatar-lines { display: none; }

.stats-bar::after, .mission-strip::before,
.cta-banner::before, .cta-banner::after,
.page-hero::before, .inv-cta::before,
.hero-slide--no-image::before, .hero-slide--no-image::after { content: none; display: none; }

.hero-slide--no-image { background: var(--blue); }
.news-card__thumb--placeholder { background: var(--cream2); }
.hero-img-placeholder, .card-img-placeholder,
.inventor-card .inv-photo-placeholder,
.team-card .team-photo-placeholder,
.sprof-hero__photo--placeholder,
.ab-origin-placeholder, .ab-founder-photo-placeholder,
.sprof-mini-card__avatar, .inv-card__avatar {
  background: var(--cream2); background-image: none;
}

/* No scrim over invention photos — the cobalt band + emoji label were removed. */
.inv-card__photo { position: relative; }
.inv-card__photo::after { content: none; }
.inv-card__award { z-index: 2; }

/* The marker highlight is retired; cobalt carries the emphasis. */
.highlight, .inv-hero__highlight, .sprof-highlight, .ab-hl {
  background: none; padding: 0; border-radius: 0; color: var(--blue);
}
.hero-slide-content h1 .highlight { color: var(--white); }

/* Media is masked by system geometry, never a bare rectangle. */
.card-img, .card-img-placeholder,
.news-card__thumb, .news-card__thumb--placeholder,
.inv-card__photo { border-radius: var(--r-md) var(--r-md) 0 var(--r-xl); }
.ab-origin-photo, .sprof-hero__photo, .sprof-hero__photo-wrap {
  border-radius: var(--r-xl) var(--r-xl) 0 var(--r-xl);
}

/* Avatars keep a cobalt ring, not gold. */
.inv-card__avatar, .sprof-mini-card__avatar { border-color: var(--blue); }
.am-avatar { border-color: var(--blue); }

/* Inputs are 8px, never pills — pills are actions. */
.inv-filter-search input,
.inv-filter-select-wrap select { border-radius: var(--r-sm); }
.apply-field input, .apply-field textarea,
.apply-select-wrap select, .signin__input { border-radius: var(--r-sm); }

/* Focus: 3px gold ring at 2px offset. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 2px;
}

/* Status dots — cobalt / slate / amber. Amber is a process state, not a category. */
.pm-dot { background: var(--muted); }
.pm-dot--yellow { background: #C97A00; }
.pm-dot--green  { background: var(--blue); }
.am-dot--draft    { background: var(--muted); }
.am-dot--review   { background: #C97A00; }
.am-dot--approved { background: var(--blue); }

/* Slider: the progress bar is not a CTA, so it is not gold. */
.slider-progress { background: rgba(255,255,255,.4); }
.slider-dot.active { background: var(--yellow); }

/* Page-level headlines end in a golden full stop. CSS, never PHP: these
   headings come from Customizer meta (ukric_get_home_slides,
   ukric_get_mission_quote, ukric_get_about_meta), so a hardcoded period in a
   template silently stops working the moment an editor saves a value. */
.hero-slide-content h1::after,
.page-hero h1::after,
.inv-hero__h1::after,
.ab-h1::after,
.apply-hero__h1::after { content: '.'; color: var(--yellow); }

/* Escape hatch for a heading that ends in a question mark. */
.no-stop::after { content: none !important; }


/* ═════════════════════════════════════════════════════════════════
   HERO — U-frame (2.0). Replaces the full-bleed .hero-slider block.
   ═════════════════════════════════════════════════════════════════ */
.hero-u {
  background: var(--white);
  margin-top: 72px;            /* header height */
  padding: 56px 0 28px;
  position: relative;
}
/* Admin-only control: it rides the photo's bottom-right corner instead of
   taking a band of page under the slider. Anchored to the media, so it follows
   the frame at every width and on every slide shape. */
.hero-u__editbar {
  position: absolute;
  right: 0;
  bottom: 16px;
  z-index: 7;
  width: max-content;
  /* The wrapper must not become an invisible shield over the photo controls. */
  pointer-events: none;
}
.hero-u__editbar button {
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(0,51,122,.22);
}
@media (max-width: 600px) {
  .hero-u__editbar { bottom: 8px; }
}
/* The stage stacks every slide in the same grid cell (grid-area 1/1 below),
   so its row height is always the TALLEST slide, active or not. Without this,
   each slide is a normal-flow block and the section's height follows whichever
   slide happens to be showing — a short slide (or a placeholder with no
   subtext) makes the whole page jump up when autoplay switches to it, then
   jump back down. Stacking removes the jump: the frame's height never changes,
   only which slide is visible inside it. */
[data-hero-stage] { display: grid; }
.hero-u__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  grid-area: 1 / 1;
}
/* Non-active slides are marked [hidden] server-side + by the slider JS. A
   hidden slide must stay in normal grid flow (display:grid, not none) so it
   still counts toward the stage's height — only visibility actually hides it.
   Without this the `display:grid` above out-specifies the UA [hidden] rule,
   so every slide stacked visibly when the JS hadn't run (e.g. a stale cached
   main.js on mobile). */
.hero-u__inner[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
.hero-u__eyebrow {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.hero-u__h1 {
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--blue);
  max-width: 20ch;             /* wider cap so longer-word languages (e.g. Ukrainian) wrap to fewer lines */
  margin-bottom: 16px;
  text-wrap: pretty;
}
.hero-u__lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 44ch;
  margin-bottom: 22px;
}
/* One source of truth for the CTA row height: the pill sets it, the text
   link's row borrows it, so the edit tools under both line up without a
   magic constant and the row can still wrap. */
.hero-u__ctas {
  --cta-h: 64px;
  display: flex;
  /* View mode: the "Meet all inventors" link centres against the tall gold
     pill instead of floating at its top edge. Edit mode flips back to
     flex-start below, so the per-button tool stacks line up by their pills. */
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-u__ctas .btn { min-height: var(--cta-h); }
/* Room for the focus ring lives on the row, not on the button wrappers —
   padding inside a wrapper would eat its own min-height floor. */
.hero-u.is-editing .hero-u__ctas { padding: 8px; margin: -8px; align-items: flex-start; }
.hero-u__link {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--blue);
}
.hero-u__link:hover { color: var(--navy); }

/* One device per composition. The disc: a circle is not the mark, so it may be
   whole — and whole is calmer than a cropped letterform beside running copy. */
.hero-u__media {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  margin-left: auto;
}
.hero-u__rim { display: none; }
.hero-u__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--cream2);
  border-radius: 50%;
}
.hero-u__frame img { width: 100%; height: 100%; object-fit: cover; }
/* Slide 3: a plain square, corners on the 8-grid (3× the base unit). The arch
   ran taller than the copy column and left the frame reading as a lozenge. */
.hero-u__frame--arch {
  inset: 0;
  border-radius: 24px;
}
.hero-u__frame--arch ~ .hero-u__dot { top: 7%; right: 7%; }
/* Gold beside a gold CTA must stay at dot scale, never canvas scale — a large
   gold shape next to the button steals the click. The dot rides the disc's
   upper-right edge: 12% inset is where the 45° point of a circle sits. */
.hero-u__dot {
  position: absolute;
  top: 14%; right: 14%;
  width: 13%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  background: var(--yellow);
}

@media (max-width: 1100px) {
  .hero-u__h1, .hero-u__lead { max-width: none; }
  .hero-u__inner { grid-template-columns: minmax(0, 1fr) minmax(300px, 460px); }
}
@media (max-width: 900px) {
  .hero-u { padding: 39px 0 50px; }
  .hero-u__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-u__h1, .hero-u__lead { max-width: none; }
  .hero-u__media { max-width: 440px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .hero-u { padding: 28px 0 39px; }
}


/* ── Hero slider nav (sits under the CTAs) ───────────────────────── */
.hero-u__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 72px;
}
.hero-u__dots { display: flex; align-items: center; gap: 2px; }
/* 10px pill, 24px+ hit box — the pill is drawn by ::before so the button can be big. */
.hero-u__dot-btn {
  width: auto; height: auto;
  padding: 12px 6px;
  border: none;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.hero-u__dot-btn::before {
  content: '';
  display: block;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: #D3E1F4;
  transition: width .2s, background .2s;
}
.hero-u__dot-btn.is-active::before { width: 32px; background: var(--yellow); }
@media (max-width: 600px) {
  .hero-u__nav { margin-top: 28px; }
}


/* ── Hero slide transition: the arc opens, the copy rises ──────────
   The photo is revealed by a circle growing from the arc's own centre —
   the U opening — while the copy rises in a stagger behind it. */
@keyframes hero-arc-open {
  from { clip-path: circle(6% at 50% 50%); opacity: 0; transform: scale(1.14); }
  55%  { opacity: 1; }
  to   { clip-path: circle(75% at 50% 50%); opacity: 1; transform: scale(1); }
}
@keyframes hero-rim-in {
  from { transform: translate(-48px, 56px) scale(.92); opacity: 0; }
  70%  { transform: translate(4px, -4px) scale(1.01); opacity: 1; }
  to   { transform: none; opacity: 1; }
}
@keyframes hero-dot-pop {
  from { transform: scale(0) translate(-24px, 24px); opacity: 0; }
  65%  { transform: scale(1.28) translate(0, 0); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes hero-copy-rise {
  from { transform: translateY(32px); opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { transform: none; opacity: 1; clip-path: inset(0 0 -20% 0); }
}
@keyframes hero-symbol-in {
  from { transform: scale(.42) rotate(-14deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(3deg); opacity: 1; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

.hero-u__inner.is-entering .hero-u__frame {
  animation: hero-arc-open .95s cubic-bezier(.16,1,.3,1) both;
}
/* On the mark-only slide the arc wipe has nothing to reveal — the mark animates itself. */
.hero-u__inner.is-entering .hero-u__frame--symbol { animation: none; }
.hero-u__inner.is-entering .hero-u__rim {
  animation: hero-rim-in .85s cubic-bezier(.16,1,.3,1) both;
}
.hero-u__inner.is-entering .hero-u__dot {
  animation: hero-dot-pop .7s cubic-bezier(.16,1,.3,1) .3s both;
}
.hero-u__inner.is-entering .hero-u__symbol {
  animation: hero-symbol-in .9s cubic-bezier(.16,1,.3,1) .18s both;
}
.hero-u__inner.is-entering .hero-u__eyebrow { animation: hero-copy-rise .7s cubic-bezier(.16,1,.3,1) both; }
.hero-u__inner.is-entering .hero-u__h1      { animation: hero-copy-rise .8s cubic-bezier(.16,1,.3,1) .09s both; }
.hero-u__inner.is-entering .hero-u__lead    { animation: hero-copy-rise .7s cubic-bezier(.16,1,.3,1) .2s both; }
.hero-u__inner.is-entering .hero-u__ctas    { animation: hero-copy-rise .7s cubic-bezier(.16,1,.3,1) .3s both; }

/* Slide 1: the mark alone on white — no panel, no arc, no floating dot. */
.hero-u__frame--symbol {
  background: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-u__frame--symbol ~ .hero-u__dot,
.hero-u__frame--symbol ~ .hero-u__rim,
.hero-u__media:has(.hero-u__frame--symbol) .hero-u__rim { display: none; }
.hero-u__frame .hero-u__symbol {
  width: 58%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero-u__inner.is-entering .hero-u__frame,
  .hero-u__inner.is-entering .hero-u__rim,
  .hero-u__inner.is-entering .hero-u__dot,
  .hero-u__inner.is-entering .hero-u__symbol,
  .hero-u__inner.is-entering .hero-u__eyebrow,
  .hero-u__inner.is-entering .hero-u__h1,
  .hero-u__inner.is-entering .hero-u__lead,
  .hero-u__inner.is-entering .hero-u__ctas { animation: none; }
}


/* ═════════════════════════════════════════════════════════════════
   GROUNDS — the documented 40 white / 35 cobalt / 15 sky / 10 gold.
   White is working space; sky quiets one panel; cobalt is a surface.
   ═════════════════════════════════════════════════════════════════ */
/* Sky panel: the news band is the one quiet ground on the page. */
.news { background: var(--cream2); }
.news .news-card,
.news .na-card { background: var(--white); }
/* Cobalt surfaces stay the closing pair — banner at Deep Cobalt,
   footer one step deeper (cobalt-900) for cobalt-on-cobalt depth. */
.cta-banner  { background: var(--blue); }
.site-footer { background: var(--navy); }
/* Everything above the banner is white. No tints, no gradients. */
.hero-u,
.stats-bar,
.mission-strip,
.section--white { background: var(--white); }


/* ═════════════════════════════════════════════════════════════════
   2.0 corrections, home page — cards, tags, news, placeholders.
   ═════════════════════════════════════════════════════════════════ */

/* Placeholder policy: an empty image slot is a sky-tint block that SAYS what
   belongs there. Never a stock photo, never a gradient, never fake texture. */
.pa-card__thumb,
.thumb {
  background: var(--cream2) !important;
  background-image: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* The invention card DOES show its real featured image (rendered inline as a
   background-image); it falls back to the sky tint + note only when no photo is
   set. (Per request — overrides the blanket "no image on cards" policy for this
   one slot; background-color, not the shorthand, so the inline image shows.) */
.inv-card__photo {
  background-color: var(--cream2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.pa-card__media .thumb { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-note {
  font-size: 13px;
  line-height: 1.5;
  /* --text-muted, not --text-caption: a caption at 13px on sky is only 4.0:1,
     and these notes carry information. 5.1:1 here. */
  color: #5C6675;
  padding: 0 24px;
  max-width: 22ch;
}
/* The invention name sits over the media, so the note steps aside for it. */
.inv-card__photo .ph-note { align-self: flex-start; margin-top: 64px; }

/* No scrim over invention photos (the cobalt band + emoji label were retired). */
.inv-card__photo::after { content: none !important; }

/* Categories are encoded by words plus the golden dot, never by a hue of their
   own — the ten per-industry colours are retired. */
.inv-card__tag {
  background: var(--cream2) !important;
  color: var(--blue) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
}
.inv-card__tag-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  flex: none;
}

/* A ContentCard carries ONE text action. Three filled cobalt pills in a row
   read as three primary buttons competing inside one section. */
.pa-card__read {
  align-self: flex-start;
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}
.pa-card__read:hover { color: var(--navy); }
.pa-card__source { color: var(--muted); }


/* ── On-cobalt surfaces: one cobalt, and the on-brand tokens ─────────
   The footer was #001E4A — a sixth colour. Cobalt is the only cobalt.
   Secondary text on cobalt is --text-on-brand-muted (#9FB6DB), never white
   at partial opacity and never a light-ground slate. */
.site-footer { background: var(--blue); }
.site-footer,
.footer-brand p,
.footer-col ul li a,
.footer-bottom,
.footer-bottom span,
.cta-banner p {
  color: #9FB6DB;
}
.footer-col ul li a:hover,
.footer-bottom a { color: var(--white); }
.footer-link--disabled { color: #9FB6DB; opacity: .7; }
.footer-bottom { border-top-color: rgba(159,182,219,.28); }


/* ── The golden full stop ─────────────────────────────────────────────
   One per composition, on the section's PRIMARY display headline only —
   never on sub-headings, card titles, body, captions or list items.
   The glyph is drawn by CSS so the copy itself stays punctuation-free and
   translators never have to carry it. A headline that does not end in a
   letter (a question, an exclamation, a bracket, a number) is marked
   data-fullstop="off" and gets nothing: the move is a statement's full stop. */
.hero-u__h1::after,
.section-title h2::after,
.news__title::after,
.cta-banner h2::after {
  content: '.';
  color: var(--yellow);
  /* Display type tracks tight and negative, which pulls the glyph into the
     last letter. The stop is a mark, not a letter — give it its own air. */
  margin-left: .06em;
  letter-spacing: 0;
}
[data-fullstop="off"]::after { content: none !important; }


/* ── Mission quote ───────────────────────────────────────────────────
   One sky panel, edge to edge: the gold disc carries the quote mark, the
   quote sits beside it. The disc is the dot at scale — the only gold in this
   view, and no CTA competes with it here. The glyph on gold is punctuation
   acting as a mark, the same licence the golden full stop has; no words ever
   go on gold. The panel replaces the golden left rule so the composition
   keeps ONE gold element. */
.mission-strip {
  background: var(--white);
  padding: 0 0 32px;
}
.mission-strip__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  background: var(--cream2);
  border-radius: var(--r-lg);
  padding: 37px 64px;
}
.mission-strip__mark {
  flex: none;
  width: 128px; height: 128px;
  border-radius: 50%;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 84px;
  line-height: 1;
  color: var(--blue);
  /* The glyph hangs high on its own baseline — nudge it to optical centre. */
  padding-top: 42px;
  box-sizing: border-box;
  user-select: none;
}
.mission-strip blockquote {
  background: none;
  border-left: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--blue);
  max-width: 52ch;
  text-wrap: pretty;
}
.mission-strip blockquote::before,
.mission-strip blockquote::after { content: none; }

@media (max-width: 900px) {
  .mission-strip { padding: 0 0 24px; }
  .mission-strip__inner { gap: 28px; padding: 36px 32px; align-items: flex-start; }
  .mission-strip__mark { width: 88px; height: 88px; font-size: 60px; padding-top: 30px; }
}
@media (max-width: 640px) {
  .mission-strip__inner { flex-direction: column; }
}


/* Superseded by the vertical-rhythm block at the end of this file: the quote
   panel carries the whole 96px, the section below it starts at 0. */


/* ── Button and nav labels = --type-button ────────────────────────────
   Outfit 500 / 17px / normal tracking. They were Outfit 800 at 15.2px with
   negative tracking (display-type treatment on a label), and everything in
   the news block inherited Inter, which is not in this system at all. */
.btn,
.hero-u__link,
.inv-card__link,
.pa-card__read,
.news__all-btn,
.nav-donate-btn,
.pa-btn {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: normal;
}
/* Small, dense actions keep the same face and weight, one step down. */
.pa-card__read,
.inv-card__link { font-size: 16px; }


/* ── Header labels ───────────────────────────────────────────────────
   Nav links are already --type-button (Outfit 500/17). Two things were not:
   the language codes sat at 15px/700 with half the eyebrow's tracking — they
   are a caps micro-label, so they take --type-eyebrow exactly — and the
   header CTA sat two steps below the nav beside it. */
.lang-switch__item {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* The eyebrow size (13px) made a two-letter control too small to hit or
     read. Back to 15px, with a real 44px target drawn by padding. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
}
.lang-switch__item:not(.is-active) { font-weight: 500; }
.nav-login-btn { font-size: 17px; padding: 10px 22px; }


/* The divider used to live INSIDE the second item's box, after its left
   padding, so it sat 14px from EN and 8px from UA. Both codes are centred in
   equal 44px targets, so the only place the rule reads as centred is exactly
   on the boundary between the two boxes — take it out of the flow and pin it
   there. */
.lang-switch { gap: 0; }
.lang-switch__item + .lang-switch__item { position: relative; }
.lang-switch__item + .lang-switch__item::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  line-height: 1;
  pointer-events: none;
}


/* ── Frosted header ──────────────────────────────────────────────────
   White at 72% with a blur behind it: the page reads through the bar as
   texture, not as colour, so the palette is untouched. Saturation is pushed
   slightly so cobalt and gold passing under it stay themselves instead of
   going milky. Browsers without backdrop-filter keep opaque white. */
.site-header {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--white); }
}
/* Scrolled, the bar carries a hairline instead of a shadow — on glass a
   shadow reads as dirt. */
.site-header.scrolled {
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 1px 0 rgba(0, 51, 122, .10);
}


/* ═════════════════════════════════════════════════════════════════
   Mobile pass
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* The news block carried its own 20/40px gutter while every other section
     used --px. One gutter for the whole page. */
  .news { padding: 64px var(--px); }
  .news__inner { padding: 0; }


  /* Hamburger was 36×28 — under the 44px minimum target. */
  .nav-toggle {
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
}
@media (max-width: 600px) {
  /* One CTA per line: at 390px the pill and the text link were sharing a row
     and the link fell to a second line anyway. */
  .hero-u__ctas { --cta-h: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero-u__ctas .btn { width: 100%; justify-content: center; }
  .cta-banner .btn-wrap { --cta-h: 56px; flex-direction: column; align-items: stretch; }
  /* The per-button wrapper stops `stretch` at itself — pass it through. */
  .cta-banner .btn-wrap > span { width: 100%; align-items: stretch; }
  .cta-banner .btn { justify-content: center; }
}


/* The slide-entry animation scales the frame to 1.14 before settling; without
   a clip that overshoot widened the document on narrow screens and flashed a
   horizontal scrollbar. */
.hero-u { overflow: hidden; }
/* Sizing only — the toggle APPEARS at 768, where the menu actually becomes a
   dropdown. Showing it at 900 put a hamburger next to a full horizontal menu. */
@media (max-width: 900px) {
  .nav-toggle { width: 44px; height: 44px; padding: 0; }
}
@media (min-width: 769px) {
  .nav-toggle { display: none; }
}


/* ── Touch targets ───────────────────────────────────────────────────
   On mobile every action clears 44px. These are text links, so the target is
   drawn by vertical padding rather than by growing the type. */
@media (max-width: 900px) {
  .hero-u__link,
  .inv-card__link,
  .pa-card__read,
  .news__all-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col ul li a,
  .footer-col ul li span,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col ul { display: flex; flex-direction: column; gap: 0; }
  .hero-u__dot-btn { padding: 17px 6px; }
  .lang-switch__item { min-width: 44px; min-height: 44px; }
}


/* ── Mobile header rhythm ─────────────────────────────────────────────
   Four things share one 390px bar: mark, language, action, menu. They were
   packed hard against each other on the right with 17px of slack wasted at
   the edge. Now the row spans the full gutter, the language pair is pushed
   off the mark and floats in the middle, and the action is compact so it
   stops crowding the menu. */
@media (max-width: 900px) {
  .nav-inner { width: 100%; justify-content: space-between; gap: 10px; }
  /* nav-right owns everything after the mark, so the language pair can only
     reach the middle from inside it — auto margin does that. */
  .nav-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
  .lang-switch { margin: 0 auto; }
  .nav-login-btn {
    font-size: 15px;
    padding: 0 16px;
    min-height: 44px;
    margin: 0;
  }
  /* The action is filled, the menu is three bare lines — they need more air
     between them than two neighbouring labels would. */
  .nav-toggle { margin: 0 -8px 0 8px; flex: none; }
}
@media (max-width: 420px) {
  .nav-inner { gap: 6px; }
  .nav-right { gap: 6px; }
  .lang-switch__item { min-width: 36px; padding: 0 2px; }
  /* Narrower, never shorter: the crowding was horizontal, and 44px is the floor. */
  .nav-login-btn { font-size: 14px; padding: 0 13px; min-height: 44px; }
}


/* The eyebrow and the award badge were still on legacy rem/em sizes and fell
   to 11.5px and 11px on mobile. The scale has no step under 13px, and tracked
   uppercase micro-copy is the least forgiving place to go below it. */
.eyebrow,
.news__eyebrow,
.hero-u__eyebrow {
  font-size: 13px;
  letter-spacing: .12em;
}
.inv-card__award { font-size: 13px; }


/* ── The stats rail, adapted ──────────────────────────────────────────
   On desktop one hairline runs the width of the row with a golden dot over
   each stat. Below 900px it used to be deleted outright, which threw away the
   dot — the element the whole identity is built on. It is not deleted now, it
   is re-cut for the new grid.

   Two columns: the rail breaks into one segment per stat, each still marked by
   its dot, so the row reads as four measured entries rather than four
   paragraphs. */
@media (max-width: 900px) {
  .stats-grid { padding-top: 0; row-gap: 44px; }
  .stats-grid::before { content: none; }
  .stat-item {
    border-top: 1px solid #D3E1F4;
    border-right: none;
    padding: 26px 0 0;
  }
  .stat-item::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--yellow);
  }
}
/* One column: the rail turns through 90° and becomes the Vertical — a single
   hairline down the side with a dot at every stat. Same device, same meaning,
   read top to bottom instead of left to right. */
@media (max-width: 480px) {
  .stats-grid {
    position: relative;
    padding-left: 30px;
    row-gap: 36px;
  }
  .stats-grid::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    width: 1px;
    height: calc(100% - 16px);
    background: #D3E1F4;
  }
  .stat-item {
    border-top: none;
    padding: 0;
  }
  .stat-item::before {
    top: 12px;
    left: -30px;
  }
}


/* ── Closing CTA on white ─────────────────────────────────────────────
   Cobalt banner directly above a cobalt footer read as one tall blue block,
   so the closing ask lost its own edges. On white it separates cleanly, the
   gold pill still owns the view, and the page keeps its 40% white share.
   The second action can no longer be an on-brand outline — it goes cobalt. */
.cta-banner { background: var(--white); }
.cta-banner h2 { color: var(--blue); }
.cta-banner p { color: var(--text); }
.cta-banner .btn-outline-white {
  border-color: var(--blue);
  color: var(--blue);
  background: none;
}
.cta-banner .btn-outline-white:hover {
  background: var(--blue);
  color: var(--white);
}


/* The dropdown panel styling must live in the SAME breakpoint that turns the
   menu into a dropdown (768), not at 900 — between 769 and 900 the menu is
   still a horizontal row, and it was picking up a white panel behind it. */
@media (max-width: 768px) {
  .nav-menu {
    background: var(--white);
    border-bottom: 1px solid #D3E1F4;
    box-shadow: 0 12px 24px rgba(0,51,122,.08);
  }
  .nav-menu li a { padding: 14px 0; }
}


/* Nav labels stay on --type-button (17px). The gap is a touch tighter than
   the original 32px so five items, the language pair and the action share the
   bar without crowding. */
@media (min-width: 769px) {
  .nav-menu { gap: 28px; }
}


/* ── Front-end slider editor: responsive grid ─────────────────────────
   The only two layout rules the panel cannot express inline, because they
   need breakpoints. Everything else in the panel stays inline. */
.sl-edit__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
}
.sl-edit__btnrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
}
@media (max-width: 860px) {
  /* A fixed 300px track next to a shrink-to-zero flexible one collapses the
     fields entirely. Below this width the panel is a single column. */
  .sl-edit__cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sl-edit__btnrow { grid-template-columns: minmax(0, 1fr) 44px; }
  .sl-edit__btnrow > input:first-of-type { grid-column: 1 / -1; }
}


/* ── Front-end slider editor ──────────────────────────────────────────
   Editing happens on the slide itself. The media column grows a little to
   hold the shape chips and the image field under the frame, and the frame
   stops clipping so the controls can sit over its edge. */
.hero-u.is-editing { padding-bottom: 132px; }
.hero-u.is-editing .hero-u__media { overflow: visible; }
.hero-u.is-editing [contenteditable]:focus {
  outline: 2px solid #00337A;
  outline-offset: 8px;
}


/* An empty body line still needs to say what it is. */
/* The hole renders into a wrapper span, so :empty never matches — the empty
   state is carried by the attribute itself instead. */
.hero-u.is-editing [data-ph]:not([data-ph=""])::before {
  content: attr(data-ph);
  color: #6B7689;
}


/* ═════════════════════════════════════════════════════════════════
   INVENTION CARD — lightened to the DS ContentCard.
   The cobalt slab under the photo (a full-bleed scrim carrying the
   invention name in white) was invented weight: it read as a dark bar
   across every card and buried the photograph. The system's card is
   FLAT, on white, with a sky hairline — media, then title in cobalt,
   then body. Cobalt is the ink here, not the surface.
   ═════════════════════════════════════════════════════════════════ */
.inv-card {
  background: var(--white);
  border: 1px solid #D3E1F4;
  border-radius: 24px;
  box-shadow: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.inv-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 10px 30px rgba(0,51,122,.10);
}
/* The arc bites the photo's bottom-left — system geometry, not a rectangle. */
.inv-card__photo {
  height: 200px;
  border-radius: 23px 23px 0 88px;
  overflow: hidden;
}
.inv-card__photo::after { content: none; }
.inv-card__photo-lines { display: none; }
/* The student's emoji sits over the photo at the size of a dot. */
/* Inventor-icon emoji badge removed from the card by request. Kept as a hidden
   rule (not deleted) so it stays gone even if front-page.php is re-skinned and
   the markup returns. */
.inv-card__emoji { display: none; }

/* Whole invention card is clickable (stretched-link pattern): the existing
   "View invention →" anchor is stretched to cover the card, so there are no
   nested <a>s and the link text stays for screen readers. z-index:3 clears the
   award badge (z-index:2). Applies to the homepage + inventors-archive cards. */
.inv-card { position: relative; }
.inv-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
/* .inv-card__link is pinned to the card's bottom via flex + margin-top:auto
   (see .inv-card/.inv-card__body above), so row alignment no longer depends
   on reserving a full two-line title height here — that reservation left a
   large dead gap above the avatar for the common one-line-title case. Kept
   a small buffer (not 0) so a rare two-line title doesn't visually jump the
   avatar row down too abruptly card-to-card. */
.inv-card__invention-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -.008em;
  color: var(--blue);
  margin: 0 0 8px;
  min-height: 1.3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
/* Card is a flex column so .inv-card__link (margin-top:auto below) always
   sits on the same bottom line across every card in a row, regardless of
   how much title/meta/description text precedes it — .inv-cards-grid
   already stretches grid items to the row's tallest card by default, this
   just distributes that height inside each one. */
.inv-card { display: flex; flex-direction: column; }
.inv-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
@media (max-width: 600px) {
  .inv-card__invention-name { font-size: 22px; }
}


/* ═════════════════════════════════════════════════════════════════
   VERTICAL RHYTHM — one scale for the whole page.
   96px between distinct sections · 48px between blocks that read as
   one unit (hero and its stats rail) · 48px from a section's title to
   its content. All steps land on the 8px base unit. Section padding is
   carried by ONE side of each boundary, never added from both, so the
   gap is the number written here.
   ═════════════════════════════════════════════════════════════════ */
.hero-u        { padding: 48px 0 48px; }   /* → stats: one unit; top gap unified across pages */
.stats-bar     { padding: 0 0 96px; }
.mission-strip { padding: 0 0 96px; }
section.section--white { padding-top: 0; padding-bottom: 96px; }
.section-title { margin-bottom: 48px; }
.news          { padding: 96px var(--px); }
.cta-banner    { padding: 96px 0; }
.site-footer   { padding-top: 72px; }

@media (max-width: 900px) {
  .hero-u        { padding: 40px 0 40px; }
  .stats-bar     { padding: 0 0 72px; }
  .mission-strip { padding: 0 0 72px; }
  section.section--white { padding-bottom: 72px; }
  .section-title { margin-bottom: 40px; }
  .news          { padding: 72px var(--px); }
  .cta-banner    { padding: 72px 0; }
  .site-footer   { padding-top: 56px; }
}
@media (max-width: 600px) {
  .hero-u        { padding: 32px 0 32px; }
  .stats-bar     { padding: 0 0 56px; }
  .mission-strip { padding: 0 0 56px; }
  section.section--white { padding-bottom: 56px; }
  .section-title { margin-bottom: 32px; }
  .news          { padding: 56px var(--px); }
  .cta-banner    { padding: 56px 0; }
  .site-footer   { padding-top: 48px; }
}


/* ═════════════════════════════════════════════════════════════════
   ABOUT PAGE 2.0 — layout is inline-styled in page-about.php (measured,
   final); this layer carries only what a media query or a pseudo-element
   must own: the two diagrams' vertical turn, the golden full stops, the
   inline-editor guides, and the panel/section responsive rhythm.
   ═════════════════════════════════════════════════════════════════ */

/* Golden full stop after the display headings — punctuation as a mark,
   never typed into the copy (the strings come from meta / the translator).
   The template strips any trailing period; a heading not ending in a letter
   still gets a dot, an accepted cosmetic edge for admin-entered oddities. */
.about-page .ab-fullstop::after { content: '.'; color: #FFC302; margin-left: .06em; }

/* ── The 7-step process path ──────────────────────────────────────
   Desktop: a horizontal snake, icons on the axis, text alternating
   above and below. ≤1040px the same steps stand up as the Vertical —
   one hairline, icon left, copy right. */
.ab-wave__step { display: contents; }
.ab-wave { overflow: hidden; }

@media (max-width: 1040px) {
  .ab-wave__scroller { overflow: visible !important; }
  .ab-wave { display: block !important; min-width: 0 !important; }
  .ab-wave__svg,
  .ab-wave__axis-dot { display: none !important; }

  .ab-wave__step {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
    position: relative;
    padding: 16px 0 24px;
  }
  .ab-wave__step::before {
    content: '';
    position: absolute;
    left: 26px; top: 0; bottom: 0;
    width: 3px; background: #B8CCE9; border-radius: 999px;
  }
  .ab-wave__step:first-of-type::before { top: 44px; }
  .ab-wave__step:last-of-type::before  { bottom: calc(100% - 44px); }

  .ab-wave__disc {
    grid-column: 1 !important; grid-row: auto !important;
    justify-self: start !important; align-self: start !important;
    width: 56px !important; height: 56px !important;
  }
  .ab-wave__disc img { width: 28px !important; height: 28px !important; }
  .ab-wave__text {
    grid-column: 2 !important; grid-row: auto !important;
    padding-right: 0 !important;
  }
}

/* ── Roadmap growth columns → horizontal bars ≤1040px (same breakpoint
   as the method path, so both diagrams turn together). */
.ab-roadmap__item { display: contents; }

@media (max-width: 1040px) {
  .ab-roadmap { display: block !important; }
  .ab-roadmap__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
    padding: 18px 0 26px 48px;
    position: relative;
  }
  .ab-roadmap__item::before {
    content: '';
    position: absolute;
    left: 10px; top: 0; bottom: 0;
    border-left: 2.5px dashed #FFC302;
  }
  .ab-roadmap__item:first-of-type::before { top: 29px; }
  .ab-roadmap__item:last-of-type::before  { bottom: calc(100% - 29px); }
  .ab-roadmap__item::after {
    content: '';
    position: absolute;
    left: 0; top: 18px;
    width: 22px; height: 22px;
    border-radius: 50%; background: #fff; border: 3px solid #FFC302;
  }
  .ab-roadmap__foot { order: 1; }
  .ab-roadmap__num  { order: 2; }
  .ab-roadmap__bar  { order: 3; }
  .ab-roadmap__num {
    grid-column: 1 !important; grid-row: auto !important;
    align-self: start !important; justify-self: start !important;
    margin-bottom: 0 !important;
  }
  .ab-roadmap__bar {
    grid-column: 1 !important; grid-row: auto !important;
    align-self: start !important;
    height: 14px !important; width: var(--w); min-width: 24px;
    border-radius: 999px !important;
  }
  .ab-roadmap__trend, .ab-roadmap__ring { display: none !important; }
  .ab-roadmap__foot {
    grid-column: 1 !important; grid-row: auto !important;
    border-top: 0 !important; padding-top: 0 !important;
  }
  .ab-roadmap__foot span { margin-bottom: 4px !important; }
}

/* ── Inline editor: the caret's own frame. The theme gives every focusable
   element a gold ring; on a block of copy being typed that reads as a gold
   box, and gold is never a container in 2.0. Scoped to .about-page so the
   home hero / news body keep their own outlines. */
.about-page [contenteditable="true"],
.about-page [contenteditable="true"]:focus,
.about-page [contenteditable="true"]:focus-visible {
  outline: 1px dashed #9FB6DB;
  outline-offset: 6px;
}
.about-page [contenteditable="true"]:not(.btn) { border-radius: 4px; }
.about-page .ab-on-brand [contenteditable="true"],
.about-page .ab-on-brand [contenteditable="true"]:focus,
.about-page .ab-on-brand [contenteditable="true"]:focus-visible {
  outline-color: rgba(255,255,255,.55);
}
.about-page .ph-note {
  font-family: 'Outfit', 'Nunito', system-ui, sans-serif;
  font-size: 14px; line-height: 1.5; color: #687385; text-align: center;
}

/* ── Responsive rhythm. The panels and section paddings are inline (they
   come from the design), so the tablet/phone steps have to out-specify
   them — same 96 → 56px / 32 → 16px rhythm as the home page. */
@media (max-width: 900px) {
  .about-page .ab-panel { padding: 56px 40px !important; }
  .about-page .ab-mission-grid { max-width: 100% !important; }
  .about-page .ab-on-brand .ab-dot { display: none !important; }
}
@media (max-width: 600px) {
  .about-page .ab-section { padding-bottom: 56px !important; }
  .about-page .ab-section--hero { padding: 24px 0 56px !important; }
  .about-page .ab-panel { padding: 40px 24px !important; }
  .about-page .ab-person {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 24px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SINGLE INVENTION 2.0  (inv-* — single-inventor.php)
   Self-contained re-skin. Responsive is expressed with the flex/grid
   idioms from the design (flex:1 1 Xpx + min-width:min(100%,Xpx);
   grid auto-fit,minmax(min(100%,Xpx),1fr)); only paddings/type step
   down in the two @media blocks at the very end of this section.
   ═════════════════════════════════════════════════════════════════ */
.inv-page {
  --paper:#FDFCFA; --blue:#00337A; --navy:#001E4A; --gold:#FFC302; --gold-h:#FFD34D;
  --sky:#E9F0FA; --sky-b1:#D3E1F4; --sky-b2:#B8CCE9; --sky-3:#9FB6DB;
  --ink:#3A414B; --m1:#5C6675; --m2:#687385; --danger:#B23B3B; --ph:#B8CCE9;
  --field-b:rgba(0,51,122,.20); --lock-bg:#F5F8FD;
  --fd:'Nunito',system-ui,sans-serif; --fs:'Outfit',system-ui,sans-serif;
  background:var(--paper); padding-top:78px; overflow-x:hidden;
}
.inv-relative { position:relative; }
.inv-dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--gold); }

/* ---- shared buttons ---- */
.inv-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:0 22px; border-radius:999px; border:0; cursor:pointer;
  font-family:var(--fs); font-weight:500; font-size:15px; line-height:1; text-decoration:none;
  transition:background .2s ease, transform .2s ease, border-color .2s ease, filter .2s ease; }
.inv-btn--primary { background:var(--blue); color:#fff; }
.inv-btn--primary:hover { background:var(--navy); }
.inv-btn--ghost { background:#fff; color:var(--blue); border:1.5px solid var(--sky-b1); }
.inv-btn--ghost:hover { border-color:var(--blue); }
.inv-btn--gold { background:var(--gold); color:var(--blue); font-size:17px; min-height:52px; padding:0 30px; }
.inv-btn--gold:hover { background:var(--gold-h); transform:translateY(-2px); }
.inv-btn--outline { background:transparent; color:var(--blue); border:1.5px solid var(--blue); font-size:17px; min-height:50px; padding:0 28px; }
.inv-btn--outline:hover { background:var(--sky); transform:translateY(-2px); }
.inv-btn--outline-white { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6); font-size:17px; min-height:50px; padding:0 28px; }
.inv-btn--outline-white:hover { border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px); }
.inv-btn--danger { border:1.5px solid var(--danger); background:var(--danger); color:#fff; }
.inv-btn svg { display:block; flex:none; }

/* ---- top row + owner bar ---- */
.inv-toprow { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-top:28px; }
.inv-back { display:inline-flex; align-items:center; gap:8px; font-family:var(--fs); font-weight:500; font-size:15px; color:var(--m1); text-decoration:none; }
.inv-back:hover { color:var(--blue); }
/* margin-left:auto keeps the owner bar right-aligned (level with the hero's
   Edit pencil) even when it wraps onto its own line under the back-link, where
   the toprow's space-between would otherwise leave it left-aligned. */
.inv-ownerbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-left:auto; }
.inv-hintpill { display:inline-flex; align-items:center; gap:10px; background:var(--sky); color:var(--blue); font-family:var(--fs); font-size:15px; padding:9px 18px; border-radius:999px; }
.inv-statuspill { display:inline-flex; align-items:center; gap:9px; border:1px solid var(--sky-b2); color:var(--m1); font-family:var(--fs); font-weight:500; font-size:13px; letter-spacing:.08em; text-transform:uppercase; padding:8px 16px; border-radius:999px; }
.inv-statuspill__dot { width:8px; height:8px; border-radius:50%; background:var(--ph); }
#inv-pm.is-review .inv-statuspill__dot { background:var(--gold); }
#inv-pm.is-public .inv-statuspill__dot { background:var(--blue); }
#inv-pm .inv-pm-publish { display:none; }
#inv-pm.is-draft .inv-pm-publish { display:inline-flex; }
.inv-manage { position:relative; }
.inv-manage__menu { position:absolute; top:52px; right:0; z-index:55; min-width:220px; padding:8px; background:#fff; border:1px solid var(--sky-b1); border-radius:16px; box-shadow:0 18px 44px rgba(0,51,122,.18); }
.inv-manage__menu[hidden] { display:none; }
.inv-menuitem { width:100%; box-sizing:border-box; display:flex; align-items:center; min-height:44px; padding:0 14px; border:0; border-radius:10px; background:none; color:var(--ink); font-family:var(--fs); font-size:15px; text-align:left; cursor:pointer; }
.inv-menuitem:hover { background:var(--sky); }
.inv-menuitem--danger { color:var(--danger); }
.inv-menuitem--danger:hover { background:rgba(178,59,59,.08); }
.inv-menudiv { display:block; height:1px; background:var(--sky); margin:6px 8px; }

/* ---- edit pencil (shared) ---- matches .na-btn--ghost-line / .na-btn--primary
   (the "Edit article" / "✓ Done" pill on the news editor) so every inline-edit
   affordance site-wide looks the same, instead of a bare icon-only circle. */
.inv-pencil {
  position:absolute; top:0; right:0;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px; border-radius:var(--r-pill); white-space:nowrap;
  border:1.5px solid var(--sky-b1); background:#fff;
  font-family:inherit; font-weight:700; font-size:13px;
  color:var(--blue); cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.inv-pencil:hover { background:var(--sky); color:var(--blue); transform:translateY(-1px); }
.inv-pencil.is-open { background:var(--blue); color:#fff; border-color:var(--blue); }
.inv-pencil.is-open:hover { background:var(--navy); color:#fff; }

/* ---- HERO ---- */
.inv-section--hero { padding:32px 0 96px; }
.inv-hero-grid { display:flex; flex-wrap:wrap; gap:64px; align-items:center; }
.inv-hero__media { position:relative; flex:1 1 460px; min-width:min(100%,460px); margin-left:calc(50% - 50vw); height:clamp(360px,34vw,500px); }
.inv-hero__frame { position:absolute; inset:0; border-radius:0 clamp(180px,24vw,320px) clamp(180px,24vw,320px) 0; overflow:hidden; background:var(--sky); display:flex; align-items:center; justify-content:center; }
.inv-hero__frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.inv-photo-note { background:#fff; padding:8px 16px; border-radius:999px; font-family:var(--fs); font-size:13px; color:var(--blue); text-align:center; max-width:80%; }
.inv-hero__accent { position:absolute; top:32px; right:14%; width:64px; height:64px; border-radius:50%; background:var(--gold); }
.inv-hero__photo-btn { position:absolute; bottom:28px; left:32px; z-index:3; }
.inv-author { position:absolute; bottom:24px; right:24px; display:flex; align-items:center; gap:14px; background:#fff; border-radius:16px; padding:14px 20px 14px 14px; box-shadow:0 12px 32px rgba(0,51,122,.14); }
.inv-author__av { display:block; flex:none; width:48px; height:48px; border-radius:50%; background:var(--sky); overflow:hidden; }
.inv-author__av img { width:100%; height:100%; object-fit:cover; display:block; }
.inv-author__name { display:block; font-family:var(--fd); font-weight:800; font-size:16px; color:var(--blue); text-decoration:none; line-height:1.3; }
.inv-author__name:hover { text-decoration:underline; }
.inv-author__sub { display:block; font-family:var(--fs); font-size:13px; color:var(--m2); }
.inv-hero__text { position:relative; flex:1 1 440px; min-width:min(100%,440px); padding-right:32px; }
.inv-eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--fs); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--m1); }
.inv-eyebrow .inv-dot { width:8px; height:8px; }
.inv-h1 { font-family:var(--fd); font-weight:900; font-size:clamp(2.5rem,4.3vw,3.625rem); line-height:1.04; letter-spacing:-.022em; color:var(--blue); margin:20px 0 24px; max-width:20ch; text-wrap:balance; }
.inv-h1__stop { color:var(--gold); }
.inv-lead { font-family:var(--fs); font-size:1.25rem; line-height:1.6; color:var(--ink); margin:0 0 20px; max-width:42ch; text-wrap:pretty; }
.inv-meta { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.inv-chip { display:inline-flex; align-items:center; gap:8px; background:var(--sky); color:var(--blue); font-family:var(--fs); font-weight:500; font-size:15px; padding:8px 16px 8px 12px; border-radius:999px; text-decoration:none; transition:background .2s ease, transform .2s ease; }
.inv-chip:hover { background:var(--sky-b1); transform:translateY(-2px); }
.inv-chip img { width:20px; height:20px; display:block; }
.inv-chip--industry { background:var(--blue); color:#fff; padding:8px 18px; gap:9px; }
.inv-chip--industry:hover { background:var(--navy); }
.inv-cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.inv-count-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px; }
.inv-like, .inv-ccount { display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--sky-b2); border-radius:999px; padding:11px 20px 11px 14px; font-family:var(--fs); font-size:16px; text-decoration:none; cursor:pointer; transition:border-color .2s ease, transform .2s ease; }
.inv-like:hover, .inv-ccount:hover { border-color:var(--blue); transform:translateY(-2px); }
.inv-like.is-liked { background:var(--sky); }
.inv-like[disabled] { cursor:default; }
.inv-like__count, .inv-ccount__count { font-family:var(--fd); font-weight:800; font-size:16px; line-height:1; color:var(--blue); }
.inv-like [data-like-heart] path { fill:none; transition:fill .25s ease; }
.inv-like.is-liked [data-like-heart] path { fill:var(--blue); }
.inv-like.is-pop [data-like-heart] { animation:inv-like-pop .42s ease; transform-origin:center; }
@keyframes inv-like-pop { 0%{transform:scale(1)} 40%{transform:scale(1.28)} 70%{transform:scale(.94)} 100%{transform:scale(1)} }
/* hero owner edit fields */
.inv-hero__editfields { margin:0 0 28px; max-width:46ch; }
.inv-input-name, .inv-input-lead { width:100%; box-sizing:border-box; font-family:var(--fd); font-weight:900; font-size:clamp(1.75rem,2.6vw,2.25rem); line-height:1.1; letter-spacing:-.018em; color:var(--blue); background:#fff; border:1.5px solid var(--field-b); border-radius:12px; padding:12px 16px; }
.inv-input-name { margin:0 0 14px; }
.inv-input-lead { font-family:var(--fs); font-weight:400; font-size:1.1875rem; line-height:1.5; letter-spacing:normal; resize:vertical; }
.inv-input-name:focus, .inv-input-lead:focus { outline:none; border-color:var(--blue); }

/* ---- AWARD strip ---- */
.inv-award { background:var(--blue); padding:24px 0; }
.inv-award__row { display:flex; align-items:center; justify-content:center; gap:20px; max-width:1080px; margin:0 auto; }
.inv-award__row > svg { flex:none; align-self:center; }
.inv-award__grid { display:grid; gap:12px 16px; flex:0 1 auto; }
.inv-award__grid--1 { grid-template-columns:repeat(1,minmax(0,min(520px,100%))); }
.inv-award__grid--2 { grid-template-columns:repeat(2,minmax(0,min(520px,100%))); }
.inv-award__item { display:flex; align-items:baseline; justify-content:space-between; gap:16px; background:rgba(255,255,255,.10); border-radius:999px; padding:12px 22px; }
.inv-award__title { font-family:var(--fs); font-weight:500; font-size:16px; line-height:1.35; color:#fff; text-wrap:pretty; }
.inv-award__year { font-family:var(--fs); font-size:14px; color:var(--sky-3); white-space:nowrap; }

/* ---- section chrome ---- */
.inv-section--pad { padding:0 0 96px; } /* top carried by the hero's bottom — one side per boundary (no doubling) */
.inv-kicker { display:block; font-family:var(--fs); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--m1); margin-bottom:.75rem; }
.inv-h2 { font-family:var(--fd); font-weight:800; font-size:clamp(2rem,3.4vw,3.5rem); line-height:1.08; letter-spacing:-.016em; color:var(--blue); margin:16px 0 48px; max-width:32ch; text-wrap:pretty; }
.inv-h2__stop { color:var(--gold); }
.inv-edit-help { font-family:var(--fs); font-size:15px; line-height:1.55; color:var(--m2); margin:0 0 24px; max-width:62ch; }

/* ---- flow (rich body + block column) ---- */
.inv-flow { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:64px; align-items:start; }
.inv-how-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:32px; align-items:start; }
.inv-rich p { font-family:var(--fs); font-size:1.0625rem; line-height:1.65; color:var(--ink); margin:0 0 20px; max-width:62ch; text-wrap:pretty; }
.inv-rich p:last-child { margin-bottom:0; }
.inv-rich blockquote { margin:0 0 24px; padding:4px 0 4px 20px; border-left:4px solid var(--gold); max-width:58ch; font-family:var(--fd); font-style:italic; font-weight:800; font-size:1.375rem; line-height:1.35; color:var(--blue); }
.inv-rich blockquote p { margin:0; padding:0; font:inherit; color:inherit; max-width:none; }
.inv-rich ul, .inv-rich ol { margin:0 0 24px; padding-left:26px; max-width:58ch; list-style:disc; }
.inv-rich li { margin:0 0 12px; font-family:var(--fs); font-size:1.0625rem; line-height:1.6; color:var(--ink); }
.inv-rich li::marker { color:var(--gold); }
/* Quill initializes directly ON .inv-rich (same "no extra wrapper" pattern
   as the news editor's #na-body) — its snow theme adds ql-container + ql-snow
   classes to it. Those two classes stacked on .inv-rich give 3 classes total,
   which deterministically beats quill.snow.css's own same-named 1-2 class
   rules regardless of stylesheet load order (no ID needed here, unlike
   #na-body, since .inv-rich already carries 2 of its own extra classes). */
.inv-rich.ql-container.ql-snow {
  min-height:260px; padding:20px 22px; background:#fff;
  border:1.5px solid var(--field-b); border-radius:0 0 12px 12px;
  font-family:inherit; font-size:1.0625rem;
}
.inv-rich.ql-container.ql-snow .ql-editor { font-family:inherit; padding:0; outline:none; }
/* Duplicate the .inv-rich p/blockquote/li rules above, scoped through
   .ql-editor, so the editor reads identically to the published article
   (same root cause + fix as single.php's #na-body .ql-editor block).
   Lists are the one exception: Quill always represents both list types as
   <ol data-list="bullet|ordered"><li> with list-style:none + its own
   .ql-ui:before marker while editing (see getCleanRichHtml() in
   invention.js for why) — so list-style/padding-left/position on li are
   left alone here, only typography is restated; the marker color is tinted
   to match the published gold ::marker separately below. */
.inv-rich.ql-container.ql-snow .ql-editor p { font-family:inherit; font-size:1.0625rem; line-height:1.65; color:var(--ink); margin:0 0 20px; padding:0; max-width:62ch; }
.inv-rich.ql-container.ql-snow .ql-editor blockquote { margin:0 0 24px; padding:4px 0 4px 20px; border-left:4px solid var(--gold); max-width:58ch; font-family:var(--fd); font-style:italic; font-weight:800; font-size:1.375rem; line-height:1.35; color:var(--blue); }
.inv-rich.ql-container.ql-snow .ql-editor blockquote p { margin:0; padding:0; font:inherit; color:inherit; max-width:none; }
.inv-rich.ql-container.ql-snow .ql-editor ol { margin:0 0 24px; max-width:58ch; }
.inv-rich.ql-container.ql-snow .ql-editor li { font-family:inherit; font-size:1.0625rem; line-height:1.6; color:var(--ink); margin:0 0 12px; }
.inv-rich.ql-container.ql-snow .ql-editor li[data-list="bullet"] > .ql-ui:before { color:var(--gold); }

/* editable-cell affordance (dashed hairline on the copy itself) */
.inv-page [data-f][contenteditable="true"], .inv-page [data-cap][contenteditable="true"] { outline:1px dashed var(--sky-3); outline-offset:6px; }
.inv-page [data-f][contenteditable="true"]:empty::before, .inv-page [data-cap][contenteditable="true"]:empty::before { content:attr(data-ph); color:var(--ph); }
.inv-counter { margin:8px 0 0; text-align:right; font-family:var(--fs); font-size:12px; color:var(--m2); }
/* Corner countdown badge on the problem/how rich body, matching the news
   editor's #na-charcount — .inv-rich-wrap is the position:relative anchor
   built around just the text box (not the toolbar) in invention.js. */
.inv-rich-wrap { position:relative; }
.inv-field-count {
  position:absolute; right:-6px; bottom:-6px;
  min-width:20px; height:20px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:#fff; border:1.5px solid var(--field-b, rgba(0,51,122,.20));
  box-shadow:0 2px 6px rgba(0,20,50,.10);
  font-family:var(--fs, 'Outfit',system-ui,sans-serif); font-size:11px; font-weight:700; line-height:1;
  color:var(--blue); z-index:1; pointer-events:none;
}
.inv-field-count--over { color:#B3261E; border-color:#F2C6C2; }

/* ---- rich toolbar ---- */
.inv-toolbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:10px 12px; background:#fff; border:1.5px solid var(--field-b); border-bottom:none; border-radius:12px 12px 0 0; }
/* Quill's snow theme adds ql-toolbar + ql-snow — 3 classes total here beats
   quill.snow.css's own 2-class .ql-toolbar.ql-snow rule (border/padding),
   same reasoning as .inv-rich.ql-container.ql-snow above. */
.inv-toolbar.ql-toolbar.ql-snow { border:1.5px solid var(--field-b); border-bottom:none; padding:10px 12px; border-radius:12px 12px 0 0; }
.inv-tb-btn { width:34px; height:34px; border:none; background:none; cursor:pointer; border-radius:8px; font-family:var(--fs); font-size:15px; color:var(--blue); display:inline-flex; align-items:center; justify-content:center; }
.inv-tb-btn:hover { background:rgba(0,51,122,.08); }
.inv-tb-btn.ql-active { background:var(--blue); color:#fff; }
/* 3 classes (.inv-toolbar .inv-tb-btn .ql-stroke) needed, not 2 — quill.snow.css's
   own .ql-snow .ql-stroke{stroke:#444} is also 2 classes and ties/wins on load
   order otherwise (same lesson as #na-toolbar .ql-stroke in the news editor,
   which could use an ID instead since #na-toolbar is a real unique element;
   .inv-toolbar here is a class shared by 2 dynamically-built toolbars). */
.inv-toolbar .inv-tb-btn .ql-stroke { stroke:currentColor; }
.inv-toolbar .inv-tb-btn .ql-fill, .inv-toolbar .inv-tb-btn .ql-stroke.ql-fill { fill:currentColor; }
.inv-tb-sep { width:1px; height:20px; background:rgba(0,51,122,.15); margin:0 4px; }
/* The invention Quill editor chrome above reads tokens scoped to .inv-page, but
   the SAME classes are reused by the competition overview editor (a .cmp- page
   with no .inv-page ancestor), where those tokens are undefined — borders/colors
   would drop out. Re-declare the few the editor needs on the .inv-rich-edit
   wrapper itself; on the invention page these shadow identical .inv-page values
   (no visual change), on the competition page they supply the missing ones. */
.inv-rich-edit {
  --ink:#3A414B; --m2:#687385; --gold:#FFC302; --field-b:rgba(0,51,122,.20);
  --fd:'Nunito',system-ui,sans-serif; --fs:'Outfit',system-ui,sans-serif;
}

/* ---- block column ---- */
.inv-column { display:flex; flex-direction:column; gap:24px; }
.inv-block { position:relative; }
.inv-block__tools { display:flex; justify-content:flex-end; gap:8px; margin-bottom:10px; }
.inv-tool { width:44px; height:44px; border-radius:50%; border:1px solid var(--sky-b2); background:#fff; color:var(--blue); font-size:16px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.inv-tool:hover { border-color:var(--blue); }
.inv-tool--remove { color:var(--m1); }
.inv-tool--remove:hover { border-color:var(--danger); color:var(--danger); }
.inv-media-frame { position:relative; aspect-ratio:4/3; border-radius:32px 32px 0 32px; overflow:hidden; background:var(--sky); display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; }
.inv-media-frame--video { aspect-ratio:16/9; }
.inv-section--how .inv-media-frame { background:#fff; }
.inv-media-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.inv-media-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.inv-media-note { font-family:var(--fs); font-size:15px; line-height:1.5; color:var(--m1); max-width:26ch; }
.inv-media-btn { position:absolute; bottom:20px; left:20px; z-index:2; }
.inv-vurl { width:100%; box-sizing:border-box; margin:14px 0 0; font-family:var(--fs); font-size:15px; line-height:1.5; color:var(--ink); background:#fff; border:1.5px solid var(--field-b); border-radius:12px; padding:11px 16px; }
.inv-vurl:focus { outline:none; border-color:var(--blue); }
.inv-vhint { display:block; margin-top:8px; font-family:var(--fs); font-size:13px; line-height:1.45; color:var(--m2); }
.inv-vhint.is-bad { color:var(--danger); }
/* facts */
.inv-facts { position:relative; background:#fff; border-radius:20px; padding:40px; }
.inv-facts__kicker { display:block; font-family:var(--fs); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--m2); margin-bottom:24px; }
.inv-facts__accent { position:absolute; top:28px; right:28px; width:44px; height:44px; border-radius:50%; background:var(--gold); }
.inv-facts__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:40px 36px; }
/* A value over 4 chars doesn't fit the 2-up grid cleanly — stack every tile
   full-width instead (added to .inv-facts__grid, not per-tile, so the whole
   set switches together rather than mixing stacked/side-by-side tiles). */
.inv-facts__grid--stacked { grid-template-columns:1fr; }
.inv-fact { position:relative; min-width:0; }
/* Edit-mode only: invention.js wraps .inv-fact__v/.inv-fact__l each in their
   own .inv-char-field box (position:relative anchor for their own corner
   countdown badge, same .inv-field-count pattern used elsewhere) — no layout
   change in the published view, where the wrapper is never added. */
.inv-char-field { position:relative; }
/* wireInputLimit()/wireCharField() insert this wrapper between a field's
   flex/grid parent and the field itself — an <input>/<textarea> doesn't
   auto-stretch to fill a plain block parent's width the way it would as a
   direct flex child (e.g. .ip-field's flex column), so it silently reverts
   to the browser's narrow default size unless told to fill the wrapper. */
.inv-char-field input, .inv-char-field textarea { width: 100%; box-sizing: border-box; }
.inv-fact__v { display:block; font-family:var(--fd); font-weight:800; font-size:clamp(2.5rem,3.6vw,3.5rem); line-height:1; letter-spacing:-.016em; color:var(--blue); overflow-wrap:break-word; }
.inv-fact__l { display:block; font-family:var(--fs); font-size:1.0625rem; line-height:1.5; color:var(--m1); margin-top:12px; max-width:24ch; overflow-wrap:break-word; text-wrap:pretty; }
/* While editing: drop the published-view 24ch cap so the label's box matches
   the value box's full width (and its .inv-char-field wrapper — full-width
   since it has no cap of its own — stops floating the corner badge off to the
   right of the visibly narrower 24ch text). Also widen the gap between the
   two: the dashed contenteditable outline's 6px offset (.inv-page
   [data-f][contenteditable="true"]) eats into margin-top from both sides,
   leaving 0px visible gap at the original 12px. */
.inv-page .inv-fact__l[contenteditable="true"] { max-width:none; margin-top:28px; }
.inv-fact__remove { position:absolute; top:-6px; right:-6px; width:44px; height:44px; border-radius:50%; border:1px solid var(--sky-b2); background:#fff; color:var(--m1); cursor:pointer; }
.inv-fact__remove:hover { border-color:var(--danger); color:var(--danger); }
.inv-fact-add { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:24px; padding:0 18px; border-radius:999px; border:1.5px dashed var(--sky-b2); background:#fff; color:var(--blue); font-family:var(--fs); font-size:15px; cursor:pointer; }
.inv-fact-add:hover { border-color:var(--blue); }
/* quote */
.inv-quote { background:#fff; border-radius:20px; padding:40px 40px 40px 34px; border-left:6px solid var(--gold); }
.inv-quote__text { font-family:var(--fd); font-style:italic; font-weight:800; font-size:1.5rem; line-height:1.35; color:var(--blue); margin:0; text-wrap:pretty; overflow-wrap:break-word; }
.inv-quote__attr { display:block; font-family:var(--fs); font-size:15px; color:var(--m1); margin-top:24px; }
.inv-quote__hint { display:block; font-family:var(--fs); font-size:15px; line-height:1.5; color:var(--m2); margin-top:12px; }

/* ---- block picker ---- */
.inv-addcard { border:2px dashed var(--sky-b2); border-radius:20px; padding:32px; }
.inv-addcard__h { font-family:var(--fd); font-weight:800; font-size:20px; line-height:1.35; color:var(--blue); margin:0 0 8px; }
.inv-addcard__p { font-family:var(--fs); font-size:15px; line-height:1.55; color:var(--m1); margin:0 0 20px; max-width:40ch; }
.inv-addcard__row { display:flex; flex-wrap:wrap; gap:10px; }
.inv-pick { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 18px; border-radius:999px; border:1.5px solid var(--sky-b1); background:#fff; color:var(--blue); font-family:var(--fs); font-size:15px; cursor:pointer; }
.inv-pick img { width:20px; height:20px; display:block; }
.inv-pick.is-on { border-color:var(--blue); background:var(--sky); }
.inv-pick.is-locked { border-color:var(--sky); background:var(--lock-bg); color:var(--sky-3); cursor:default; }

/* ---- HOW panel ---- */
.inv-section--how { padding:0 0 96px; }
.inv-panel { position:relative; background:var(--sky); border-radius:24px; padding:72px 64px; }
.inv-panel .inv-pencil { top:24px; right:24px; }
.inv-how-card { background:#fff; border-radius:20px; padding:40px; }

/* ---- GALLERY ---- */
.inv-section--gallery { padding:0 0 96px; }
/* Gallery edit chrome shows only in edit mode (pencil pressed) — like every
   other block. In view mode the owner sees the clean gallery. */
.inv-section--gallery:not(.is-editing) .inv-tool--remove,
.inv-section--gallery:not(.is-editing) .inv-gcell__lead-btn,
.inv-section--gallery:not(.is-editing) [data-gallery-add],
.inv-section--gallery:not(.is-editing) .inv-gcell--ph { display:none; }
.inv-section--gallery:not(.is-editing) [data-gallery-cap] { pointer-events:none; }
.inv-section--gallery:not(.is-editing) [data-gallery-cap]:empty { display:none; }
.inv-section--gallery:not(.is-editing) .inv-gcell--small { cursor:pointer; }
.inv-section--gallery:not(.is-editing) .inv-gcell--small .inv-gcell__frame { transition:filter .15s ease; }
.inv-section--gallery:not(.is-editing) .inv-gcell--small:hover .inv-gcell__frame { filter:brightness(1.04); }
.inv-gallery__grid { display:grid; gap:24px; }
.inv-gallery__grid--multi { grid-template-columns:2fr 1fr; grid-template-rows:repeat(3,minmax(0,1fr)); aspect-ratio:16/9; }
.inv-gallery__grid--single { grid-template-columns:minmax(0,1fr); aspect-ratio:16/10; }
.inv-gcell { position:relative; }
.inv-gcell--lead { grid-row:span 3; }
.inv-gcell__frame { position:absolute; inset:0; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:16px; background:var(--sky); border-radius:20px; }
.inv-gcell--lead .inv-gcell__frame { border-radius:32px 32px 0 32px; }
.inv-gcell__frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.inv-gcell__frame--empty { border:2px dashed var(--sky-b2); background:var(--sky); }
.inv-gcell--ph { cursor:pointer; }
.inv-gcell--ph .inv-media-note { color:var(--blue); font-weight:500; }
.inv-gcell--ph:hover .inv-gcell__frame--empty { border-color:var(--blue); background:#fff; }
.inv-gcell__accent { position:absolute; top:-20px; right:8%; width:56px; height:56px; border-radius:50%; background:var(--gold); z-index:2; }
.inv-gcell--small { cursor:pointer; transition:transform .18s ease; }
.inv-gcell--small:hover { transform:translateY(-3px); }
.inv-gcell__promote { position:absolute; inset:0; border:0; background:none; cursor:pointer; z-index:3; }
.inv-gcap { display:block; margin-top:16px; font-family:var(--fs); font-size:15px; line-height:1.6; color:var(--m1); max-width:62ch; }

/* ---- COMMENTS ---- */
.inv-section--comments { padding:0 0 96px; }
.inv-comments__pending { border:2px dashed var(--sky-b2); border-radius:20px; padding:32px; margin-bottom:40px; }
.inv-comments__pending-h { font-family:var(--fd); font-weight:800; font-size:20px; line-height:1.35; color:var(--blue); margin:0 0 8px; }
.inv-comments__pending-p { font-family:var(--fs); font-size:15px; color:var(--m1); margin:0 0 20px; }
.inv-comments__new { display:flex; gap:16px; align-items:flex-start; margin-bottom:48px; }
.inv-av { flex:none; width:44px; height:44px; border-radius:50%; background:var(--sky); overflow:hidden; }
.inv-av img { width:100%; height:100%; object-fit:cover; display:block; }
.inv-comments__field { flex:1; min-width:0; }
.inv-comment-ta { width:100%; box-sizing:border-box; font-family:var(--fs); font-size:1.0625rem; line-height:1.6; color:var(--ink); background:var(--sky); border:1.5px solid transparent; border-radius:8px; padding:14px 16px; resize:vertical; }
.inv-comment-ta:focus { outline:none; background:#fff; border-color:var(--blue); }
.inv-comments__actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; }
.inv-comments__note { font-family:var(--fs); font-size:13px; color:var(--m2); }
.inv-thread { display:flex; flex-direction:column; gap:40px; }
.inv-comment { display:flex; gap:16px; align-items:flex-start; }
.inv-comment__body { flex:1; min-width:0; }
.inv-comment__head { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.inv-comment__name { font-family:var(--fd); font-weight:800; font-size:16px; color:var(--blue); }
.inv-comment__time { font-family:var(--fs); font-size:13px; color:var(--m2); }
.inv-comment__pendingtag { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--sky-b2); color:var(--m1); font-family:var(--fs); font-size:12px; text-transform:uppercase; letter-spacing:.08em; padding:4px 12px; border-radius:999px; }
.inv-comment__pendingtag .inv-dot { width:7px; height:7px; }
/* overflow-wrap: a comment with no spaces (one long run of characters) has
   no whitespace for the browser's default wrapping to break at, so it ran
   past the card's right edge instead of onto a new line. */
.inv-comment__text { font-family:var(--fs); font-size:1.0625rem; line-height:1.6; color:var(--ink); margin:8px 0 0; max-width:70ch; text-wrap:pretty; overflow-wrap:break-word; }
.inv-comment__acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.inv-cact { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:999px; border:0; background:none; color:var(--m1); font-family:var(--fs); font-size:14px; cursor:pointer; }
.inv-cact:hover { background:var(--sky); color:var(--blue); }
.inv-cact--like { font-family:var(--fd); font-weight:800; color:var(--blue); }
.inv-cact--like.is-liked { background:var(--sky); }
.inv-cact--pub { border:1.5px solid var(--blue); background:var(--blue); color:#fff; }
.inv-cact--unpub { border:1.5px solid var(--sky-b1); background:#fff; color:var(--blue); }
.inv-cact--del:hover { background:rgba(178,59,59,.08); color:var(--danger); }
.inv-comment__replybox { display:flex; gap:12px; margin-top:16px; }
/* invention.js wraps the <input> in .inv-char-field for the char-limit
   corner badge — that wrapper is now the flex item, not the input itself. */
.inv-comment__replybox .inv-char-field { flex:1; min-width:0; }
.inv-comment__replybox input { width:100%; box-sizing:border-box; font-family:var(--fs); font-size:15px; color:var(--ink); background:var(--sky); border:1.5px solid transparent; border-radius:999px; padding:11px 18px; }
.inv-comment__replybox input:focus { outline:none; background:#fff; border-color:var(--blue); }
.inv-comment__replies { display:flex; flex-direction:column; gap:28px; margin:24px 0 0 60px; padding-left:24px; border-left:2px solid var(--sky); }
.inv-comments__more { display:inline-flex; align-items:center; min-height:44px; margin-top:32px; padding:0 24px; border:1.5px solid var(--sky-b1); border-radius:999px; background:#fff; color:var(--blue); font-family:var(--fs); font-size:15px; cursor:pointer; }
.inv-comments__more:hover { border-color:var(--blue); }

/* ---- closing CTA ---- */
.inv-section--cta { padding:0 0 96px; }
.inv-closing { position:relative; overflow:hidden; background:var(--blue); border-radius:24px; padding:80px 64px; text-align:center; }
.inv-closing__mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:clamp(180px,28%,320px); opacity:.07; }
.inv-closing__inner { position:relative; max-width:44ch; margin:0 auto; }
.inv-closing h2 { font-family:var(--fd); font-weight:800; font-size:clamp(2rem,3.4vw,3.5rem); line-height:1.08; letter-spacing:-.016em; color:#fff; margin:0 0 24px; }
.inv-closing p { font-family:var(--fs); font-size:1.0625rem; line-height:1.65; color:var(--sky-3); margin:0 0 40px; }
.inv-closing__btns { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ---- modals ---- */
.inv-modal { position:fixed; inset:0; z-index:70; background:rgba(0,20,50,.55); display:flex; align-items:center; justify-content:center; padding:24px; }
.inv-modal[hidden] { display:none; }
.inv-confirm { background:#fff; border-radius:24px; padding:32px; max-width:460px; width:100%; }
.inv-confirm__msg { font-family:var(--fs); font-size:1.0625rem; line-height:1.6; color:var(--ink); margin:0 0 28px; }
.inv-confirm__btns { display:flex; justify-content:flex-end; gap:12px; }
.inv-crop { z-index:60; }
.inv-crop__card { background:#fff; border-radius:24px; padding:32px; max-width:560px; width:100%; }
.inv-crop__kicker { display:block; font-family:var(--fs); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--m2); }
.inv-crop__h { font-family:var(--fd); font-weight:800; font-size:24px; color:var(--blue); margin:6px 0 20px; }
.inv-crop__window { position:relative; overflow:hidden; background:var(--sky); cursor:grab; width:100%; }
.inv-crop__window:active { cursor:grabbing; }
.inv-crop__window img { position:absolute; left:50%; top:50%; transform-origin:center center; will-change:transform; max-width:none; }
.inv-crop__zoom { display:block; width:100%; margin:20px 0; accent-color:var(--blue); }
.inv-crop__btns { display:flex; justify-content:flex-end; gap:12px; }

/* Shared Cropper.js modal (assets/js/ukric-crop.js) — one cropper for the site. */
.ukcrop { position:fixed; inset:0; z-index:1300; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,20,50,.55); }
.ukcrop[hidden] { display:none; }
.ukcrop__card { background:#fff; border-radius:24px; padding:32px; max-width:560px; width:100%; box-shadow:0 24px 70px rgba(0,20,60,.28); }
.ukcrop__kicker { display:block; font-family:var(--fs); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--m2); }
.ukcrop__h { font-family:var(--fd); font-weight:800; font-size:24px; color:var(--blue); margin:6px 0 20px; }
.ukcrop__stage { position:relative; width:100%; max-height:56vh; margin:0 auto 20px; background:var(--sky); border-radius:16px; overflow:hidden; }
.ukcrop__stage > img { display:block; max-width:100%; }
.ukcrop__zoom { display:block; width:100%; margin:0 0 20px; accent-color:var(--blue); }
.ukcrop__btns { display:flex; justify-content:flex-end; gap:12px; }
.ukcrop__btn { font-family:var(--fs); font-weight:600; font-size:16px; padding:12px 26px; border-radius:999px; cursor:pointer; border:1.5px solid transparent; }
.ukcrop__btn--ghost { background:#fff; border-color:#D3E1F4; color:var(--blue); }
.ukcrop__btn--ghost:hover { background:#F4F8FD; }
.ukcrop__btn--primary { background:var(--blue); color:#fff; }
.ukcrop__btn--primary:hover { filter:brightness(1.05); }
.ukcrop__btn:disabled { opacity:.6; cursor:default; }
/* Cropper chrome: hide the rectangular crop outline/handles so the only visible
   boundary is the stage's shape (D-arch / circle / rounded), applied via clip. */
.ukcrop .cropper-view-box { outline:0; box-shadow:none; }
.ukcrop .cropper-line, .ukcrop .cropper-point, .ukcrop .cropper-center { display:none; }
.ukcrop .cropper-modal { opacity:0; }

@media (prefers-reduced-motion: reduce) {
  .inv-like.is-pop [data-like-heart] { animation:none !important; }
}

/* ---- responsive paddings / type step-down (layout itself wraps via the
        flex/grid idioms above) ---- */
@media (max-width: 768px) {
  .inv-section--hero { padding:24px 0 64px; }
  .inv-section--pad { padding:0 0 64px; }
  .inv-hero__text { padding-right:0; }
  .inv-panel { padding:48px 24px; }
  .inv-how-card { padding:28px; }
  .inv-facts { padding:28px; }
  .inv-quote { padding:28px 28px 28px 24px; }
  .inv-closing { padding:56px 28px; }
  .inv-author { bottom:16px; right:16px; padding:10px 16px 10px 10px; gap:10px; }
  .inv-author__av { width:40px; height:40px; }
  .inv-hero__photo-btn { bottom:20px; left:20px; }
  .inv-comment__replies { margin-left:24px; padding-left:16px; }
}
@media (max-width: 480px) {
  .inv-award__row { flex-direction:column; gap:16px; }
  .inv-facts { padding:24px; }
  .inv-addcard { padding:24px; }
  .inv-comments__new { gap:12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   UKRIC LOADING SPINNER (ping-pong U) — site-wide standard loader.
   Design handoff "UKRIC loading spinner". Build the markup with
   window.ukricSpinner (assets/js/ukric-image.js) and show it only during a
   real async pause (uploads / saves). Requires assets/logo/ukric-u-mask.svg.
   ═════════════════════════════════════════════════════════════════ */
:root {
  --ukric-spinner-bounce: 0.98s;
  --ukric-spinner-half: 0.49s;
  --ukric-spinner-mask: url("assets/logo/ukric-u-mask.svg");
}
.ukric-spinner {
  display: block; position: relative;
  width: var(--ukric-spinner-size, 64px);
  aspect-ratio: 285 / 343; flex: none;
}
.ukric-spinner__u {
  position: absolute; inset: 0;
  background: var(--ukric-spinner-color, #00337A);
  -webkit-mask: var(--ukric-spinner-mask) center / contain no-repeat;
          mask: var(--ukric-spinner-mask) center / contain no-repeat;
  transform-origin: 50% 88%;
  animation: ukric-spinner-paddle var(--ukric-spinner-bounce) cubic-bezier(.33,.06,.3,1) infinite;
}
.ukric-spinner__dot-slot {
  position: absolute; left: 87.32%; top: 19.8%;
  width: 25.12%; aspect-ratio: 1; transform: translate(-50%, -50%);
}
.ukric-spinner__hop {
  display: block; width: 100%; height: 100%;
  animation: ukric-spinner-hop var(--ukric-spinner-half) cubic-bezier(.12,.62,.38,1) infinite alternate;
}
.ukric-spinner__dot {
  display: block; width: 100%; height: 100%; border-radius: 50%; background: #FFC302;
  animation: ukric-spinner-squash var(--ukric-spinner-bounce) cubic-bezier(.3,0,.3,1) infinite;
}
.ukric-spinner--on-brand { --ukric-spinner-color: #FFFFFF; }
@keyframes ukric-spinner-hop { from { transform: translateY(0); } to { transform: translateY(-128%); } }
@keyframes ukric-spinner-squash {
  0%       { transform: scale(1.26, 0.74); }
  10%      { transform: scale(0.94, 1.06); }
  35%, 65% { transform: scale(1, 1); }
  90%      { transform: scale(0.94, 1.06); }
  100%     { transform: scale(1.26, 0.74); }
}
@keyframes ukric-spinner-paddle {
  0%   { transform: scaleY(0.9)   scaleX(1.055) translateY(3.4%); }
  9%   { transform: scaleY(0.94)  scaleX(1.035) translateY(2.2%); }
  20%  { transform: scaleY(1.045) scaleX(0.982) translateY(-1.6%); }
  32%  { transform: scaleY(0.985) scaleX(1.008) translateY(0.5%); }
  44%  { transform: scaleY(1.014) scaleX(0.995) translateY(-0.5%); }
  56%  { transform: scaleY(0.996) scaleX(1.002) translateY(0.15%); }
  68%  { transform: scaleY(1.004) scaleX(0.999) translateY(-0.05%); }
  84%  { transform: scaleY(1)     scaleX(1)     translateY(0); }
  100% { transform: scaleY(0.9)   scaleX(1.055) translateY(3.4%); }
}
@media (prefers-reduced-motion: reduce) {
  .ukric-spinner__u, .ukric-spinner__hop, .ukric-spinner__dot { animation: none; }
  .ukric-spinner__dot-slot { top: 10.44%; }
}
/* cobalt overlay over content being loaded/replaced */
.ukric-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(0, 51, 122, .88);
  opacity: 1; transition: opacity .3s ease; border-radius: inherit;
}
.ukric-overlay[hidden] { display: none; }
.ukric-overlay__label { font: 400 16px/1.5 "Outfit", system-ui, sans-serif; color: #9FB6DB; text-align: center; padding: 0 16px; }
/* empty media slot: spinner inside a placeholder until the image arrives */
.ukric-slot { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 16px; overflow: hidden; background: #E9F0FA; }
.ukric-slot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.ukric-slot.is-loaded .ukric-slot__img { opacity: 1; }
.ukric-slot__loader { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; opacity: 1; transition: opacity .3s ease; }
.ukric-slot.is-loaded .ukric-slot__loader { opacity: 0; }
.ukric-slot__label { font: 400 13px/1.5 "Outfit", system-ui, sans-serif; color: #5C6675; }

/* ════════════════════════════════════════════════════════════════════
   INVENTOR PROFILE 2.0  (ip-*)  +  notifications bell/sheet (am-bell/ukn-*)
   ════════════════════════════════════════════════════════════════════ */
.ip-page { background:var(--cream); padding-top:72px; overflow-x:clip; font-family:'Outfit',system-ui,sans-serif; }
.ip-topbar { padding-top:24px; }
.ip-back { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-left:-8px; padding:0 8px; font-weight:500; font-size:15px; color:#5C6675; text-decoration:none; }
.ip-back:hover { color:#00337A; }
.ip-shell { display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,56px); align-items:flex-start; padding-top:28px; padding-bottom:clamp(48px,6vw,80px); }
.ip-aside { flex:1 1 320px; min-width:min(100%,290px); display:flex; flex-direction:column; gap:24px; }
.ip-main { flex:2 1 440px; min-width:min(100%,320px); }
.ip-h2 { margin:0; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:clamp(24px,2.4vw,32px); line-height:1.2; letter-spacing:-.008em; color:#00337A; }
.ip-empty { margin:0; font-size:15px; line-height:1.6; color:#5C6675; }

/* Buttons */
.ip-btn-ghost,.ip-btn-outline,.ip-btn-primary { display:inline-flex; align-items:center; gap:8px; font-family:'Outfit',system-ui,sans-serif; cursor:pointer; }
.ip-btn-ghost { min-height:40px; padding:0 18px; border:1.5px solid #D3E1F4; border-radius:999px; background:#fff; font-weight:500; font-size:15px; color:#00337A; }
.ip-btn-ghost:hover { border-color:#00337A; }
.ip-btn-outline { min-height:52px; padding:0 26px; border:1.5px solid #D3E1F4; border-radius:999px; background:#fff; font-size:17px; color:#00337A; }
.ip-btn-outline:hover { border-color:#00337A; }
.ip-btn-primary { min-height:48px; padding:0 26px; border:0; border-radius:999px; background:#00337A; color:#fff; font-size:17px; }
.ip-btn-primary:hover { background:#001E4A; }
.ip-btn-primary:disabled { opacity:.6; cursor:default; }
.ip-btn-link { display:inline-flex; align-items:center; min-height:44px; padding:0 8px; margin:-12px -8px -12px 0; border:0; background:none; font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#00337A; cursor:pointer; text-decoration:none; }
.ip-btn-link:hover { color:#001E4A; }

/* Identity */
.ip-id { display:flex; align-items:center; gap:16px; }
.ip-avatar-wrap { position:relative; flex:none; width:112px; height:112px; }
.ip-avatar { display:block; width:100%; height:100%; border-radius:50%; background:#D3E1F4 center/cover no-repeat; box-shadow:0 0 0 8px #E9F0FA; position:relative; }
.ip-avatar-badge { position:absolute; top:2px; right:0; width:26px; height:26px; border-radius:50%; background:#FFC302; }
.ip-avatar-spin { position:absolute; inset:0; border-radius:50%; background:rgba(255,255,255,.6); }
.ip-avatar-spin::after { content:""; position:absolute; top:50%; left:50%; width:28px; height:28px; margin:-14px 0 0 -14px; border:3px solid #D3E1F4; border-top-color:#00337A; border-radius:50%; animation:ip-spin .8s linear infinite; }
@keyframes ip-spin { to { transform:rotate(360deg); } }
.ip-id-txt { flex:1 1 auto; min-width:0; }
.ip-name { margin:0; font-family:'Nunito',system-ui,sans-serif; font-weight:900; font-size:clamp(28px,3vw,36px); line-height:1.1; letter-spacing:-.016em; color:#00337A; }
.ip-meta { display:block; margin-top:8px; font-size:15px; line-height:1.5; color:#5C6675; }
.ip-share { flex:none; align-self:flex-start; margin-top:-6px; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1.5px solid #D3E1F4; border-radius:50%; background:#fff; color:#00337A; cursor:pointer; }
.ip-share:hover { border-color:#00337A; }
.ip-change-photo { align-self:flex-start; }

/* Cards */
.ip-card { background:#fff; border:1px solid #E9F0FA; border-radius:24px; padding:22px 24px; }
.ip-card--soft { background:#E9F0FA; border-color:transparent; }
.ip-card-hd { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ip-kicker { margin:0; font-weight:700; font-size:13px; line-height:1.2; letter-spacing:.12em; text-transform:uppercase; color:#5C6675; }

/* About details */
.ip-detail-list { }
.ip-detail { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid #E9F0FA; }
.ip-detail:last-child { border-bottom:0; }
.ip-detail-ico { flex:none; width:24px; height:24px; display:block; }
.ip-detail-k { flex:0 0 72px; font-size:15px; color:#687385; }
.ip-detail-v { flex:1 1 auto; min-width:0; font-size:17px; color:#00337A; }
.ip-field { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; font-weight:500; font-size:15px; color:#3A414B; }
.ip-field input,.ip-field select,.ip-field textarea { min-height:48px; padding:0 16px; border:1.5px solid transparent; border-radius:8px; background:#E9F0FA; font-family:'Outfit',system-ui,sans-serif; font-size:17px; color:#3A414B; }
.ip-card--soft .ip-field input,.ip-card--soft .ip-field textarea { background:#fff; }
.ip-field textarea { padding:14px 16px; line-height:1.6; resize:vertical; min-height:auto; }
.ip-field input:focus,.ip-field select:focus,.ip-field textarea:focus { outline:none; border-color:#00337A; }
.ip-field--sm { flex:0 0 90px; }
.ip-form-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }

/* Hobbies */
.ip-hobbies { display:flex; flex-wrap:wrap; gap:10px; }
.ip-hobby { display:inline-flex; align-items:center; gap:10px; background:#fff; border-radius:999px; padding:8px 16px 8px 10px; font-size:15px; color:#3A414B; }
.ip-hobby img { display:block; width:22px; height:22px; }
.ip-hobby-hint { margin:0 0 12px; font-size:15px; line-height:1.5; color:#5C6675; }
.ip-hobby-count { color:#00337A; }
.ip-hobby-search { width:100%; box-sizing:border-box; min-height:48px; padding:0 16px; margin-bottom:16px; border:1.5px solid transparent; border-radius:8px; background:#fff; font-family:'Outfit',system-ui,sans-serif; font-size:17px; color:#3A414B; }
.ip-hobby-search:focus { outline:none; border-color:#00337A; }
.ip-hobby-options { display:flex; flex-wrap:wrap; gap:10px; max-height:320px; overflow:auto; padding:2px; }
.ip-hobby-opt { display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; border:1.5px solid #D3E1F4; border-radius:999px; background:#fff; font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#3A414B; cursor:pointer; }
.ip-hobby-opt img { display:block; width:22px; height:22px; }
.ip-hobby-opt.is-on { border-color:#00337A; background:#00337A; color:#fff; }
.ip-hobby-opt.is-on img { filter:brightness(0) invert(1); }
.ip-hobby-opt.is-disabled { opacity:.45; cursor:not-allowed; }
.ip-hobby-opt[hidden] { display:none; } /* class display:inline-flex otherwise overrides [hidden] */
.ip-hobby-opt.ip-hobby-extra { display:none; } /* beyond top-15 — revealed only while searching */
.ip-hobby-opt.ip-hobby-add { padding-left:14px; border-style:dashed; border-color:#9FB6DB; color:#00337A; font-weight:600; }
.ip-hobby-opt.ip-hobby-add .ip-hobby-add-plus { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#EAF1FB; font-size:16px; line-height:1; }

/* Visitor actions */
.ip-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.ip-follow { min-height:52px; padding:0 30px; border:0; border-radius:999px; background:#FFC302; color:#00337A; font-family:'Outfit',system-ui,sans-serif; font-size:17px; cursor:pointer; white-space:nowrap; }
.ip-follow.is-following { padding:0 28px; border:1.5px solid #00337A; background:#fff; color:#00337A; }
.ip-follow--sm { min-height:40px; padding:0 18px; font-weight:500; font-size:15px; }
.ip-follow--sm.is-following { padding:0 18px; }

/* Contact */
.ip-contact-form { border-color:#D3E1F4; }
.ip-contact-title { margin:0 0 4px; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:22px; line-height:1.3; color:#00337A; }
.ip-contact-lead { margin:0 0 18px; font-size:15px; line-height:1.6; color:#5C6675; }
.ip-contact-count { margin:8px 0 0; text-align:right; font-size:13px; color:#687385; }
.ip-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.ip-contact-sent .ip-sent-title { margin:0; display:flex; align-items:center; gap:12px; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:22px; line-height:1.3; color:#00337A; }
.ip-sent-dot { flex:none; width:12px; height:12px; border-radius:50%; background:#FFC302; }
.ip-sent-sub { margin:10px 0 16px; font-size:17px; line-height:1.6; color:#3A414B; }

/* Follow card + rows */
.ip-follow-row { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid #E9F0FA; text-decoration:none; }
.ip-follow-row:last-child { border-bottom:0; }
.ip-follow-av { flex:none; width:44px; height:44px; border-radius:50%; background:#D3E1F4 center/cover no-repeat; }
.ip-follow-av--lg { width:56px; height:56px; }
.ip-follow-txt { min-width:0; text-decoration:none; }
.ip-follow-name { display:block; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:17px; line-height:1.3; color:#00337A; }
.ip-follow-meta { display:block; margin-top:2px; font-size:15px; line-height:1.4; color:#5C6675; }

/* Following full view */
.ip-back-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:0 0 12px -8px; padding:0 8px; border:0; background:none; font-family:'Outfit',system-ui,sans-serif; font-weight:500; font-size:15px; color:#5C6675; cursor:pointer; }
.ip-back-link:hover { color:#00337A; }
.ip-following-hd { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:28px; }
.ip-following-count { font-size:17px; color:#5C6675; }
.ip-following-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:16px; }
.ip-follow-tile { display:flex; align-items:center; gap:14px; padding:16px 18px; background:#fff; border:1px solid #E9F0FA; border-radius:20px; }
.ip-follow-tile .ip-follow-txt { flex:1 1 auto; min-width:0; }
.ip-follow-tile .ip-follow { flex:none; }
.ip-follow-name { overflow-wrap:break-word; hyphens:auto; }

/* In their words */
.ip-words { }
/* 25/500/25-char caps on the owner's editor (page-inventor-profile.php)
   keep new saves within these bounds, but published text stays within its
   frame regardless — single line for quote/mentor, 8 lines for bio. */
.ip-quote { margin:0; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:clamp(24px,2.4vw,32px); line-height:1.25; letter-spacing:-.008em; color:#00337A; max-width:32ch; text-wrap:balance; overflow-wrap:break-word; }
/* overflow-wrap: text with no spaces (one long run of characters) has no
   whitespace for the browser's default wrapping to break at, so it ran
   past the frame on one line instead of onto a new one — same fix as
   .inv-comment__text / .inv-fact__v elsewhere on the site. */
.ip-bio { margin:20px 0 0; font-size:17px; line-height:1.65; color:#3A414B; max-width:58ch; display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; text-wrap:pretty; }
.ip-mentor { margin:14px 0 0; font-size:15px; line-height:1.6; color:#5C6675; max-width:58ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Tabs */
.ip-tabs-wrap { position:sticky; top:72px; z-index:20; margin-top:36px; background:var(--cream); border-top:1px solid #E9F0FA; border-bottom:1px solid #E9F0FA; overflow-x:auto; }
.ip-tabs { display:flex; gap:clamp(20px,3vw,40px); }
.ip-tab { display:inline-flex; align-items:center; min-height:56px; padding:0; border:0; border-bottom:2px solid transparent; background:none; font-family:'Outfit',system-ui,sans-serif; font-size:17px; color:#5C6675; cursor:pointer; white-space:nowrap; }
.ip-tab.is-active { border-bottom-color:#FFC302; color:#00337A; }
.ip-panel { padding-top:32px; }
.ip-panel-tools { display:flex; align-items:center; justify-content:flex-end; gap:16px; margin-bottom:12px; }
.ip-gallery-tools { justify-content:space-between; }
.ip-gallery-hint { font-size:15px; line-height:1.5; color:#5C6675; }

/* Invention cards */
.ip-inv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.ip-inv-card { display:block; background:#fff; border:1px solid #E9F0FA; border-radius:24px; overflow:hidden; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; }
.ip-inv-card:hover { transform:translateY(-2px); box-shadow:0 18px 44px rgba(0,51,122,.14); }
.ip-inv-thumb { position:relative; display:block; height:180px; background:#E9F0FA center/cover no-repeat; border-radius:0 0 88px 0; }
.ip-inv-badge { position:absolute; top:16px; right:16px; width:26px; height:26px; border-radius:50%; background:#FFC302; }
.ip-inv-body { display:block; padding:20px 22px 22px; }
.ip-inv-status { display:flex; align-items:center; gap:9px; margin-bottom:10px; font-weight:700; font-size:13px; line-height:1.2; letter-spacing:.12em; text-transform:uppercase; color:#5C6675; }
.ip-dot { flex:none; display:inline-block; width:8px; height:8px; border-radius:50%; background:#00337A; }
.ip-inv-name { display:block; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:24px; line-height:1.3; letter-spacing:-.008em; color:#00337A; }
.ip-inv-desc { display:block; margin-top:10px; font-size:15px; line-height:1.6; color:#3A414B; }
.ip-inv-link { display:inline-block; margin-top:16px; font-size:17px; color:#00337A; }

/* Competitions */
.ip-comp { padding:24px 0; border-bottom:1px solid #E9F0FA; }
.ip-comp-top { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; }
.ip-comp-year { font-weight:700; font-size:13px; line-height:1.2; letter-spacing:.12em; text-transform:uppercase; color:#5C6675; }
.ip-comp-name { margin:0; flex:1 1 260px; min-width:min(100%,240px); font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:22px; line-height:1.3; letter-spacing:-.008em; color:#00337A; }
.ip-comp-name a { color:inherit; text-decoration:none; }
.ip-comp-name a:hover { text-decoration:underline; }
.ip-comp-place { font-size:15px; line-height:1.4; color:#5C6675; }
.ip-comp-entry { margin:8px 0 0; font-size:17px; line-height:1.6; color:#3A414B; }
.ip-comp-outcome { margin:10px 0 0; display:flex; align-items:center; gap:10px; font-size:17px; line-height:1.5; color:#00337A; }
.ip-comp-edit-row { display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-bottom:1px solid #E9F0FA; }
.ip-comp-fields { flex:1 1 auto; display:flex; flex-wrap:wrap; gap:12px; }
.ip-check { display:flex; align-items:center; gap:8px; font-size:15px; color:#3A414B; }

/* Gallery */
.ip-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.ip-gtile { position:relative; margin:0; aspect-ratio:4/3; overflow:hidden; background:#E9F0FA; border-radius:24px; }
.ip-gtile img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.ip-gtile.is-editing img { cursor:default; }
.ip-gcover { position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:#fff; font-weight:500; font-size:13px; color:#00337A; }
.ip-gcover::before { content:""; width:8px; height:8px; border-radius:50%; background:#FFC302; }
.ip-gtile-tools { position:absolute; inset:auto 0 0 0; display:flex; flex-direction:column; gap:10px; padding:14px; background:linear-gradient(to top,rgba(0,30,74,.82),rgba(0,30,74,0)); }
.ip-gcap { width:100%; box-sizing:border-box; min-height:40px; padding:0 14px; border:0; border-radius:8px; background:rgba(255,255,255,.94); font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#3A414B; }
.ip-gtile-btns { display:flex; gap:8px; }
.ip-gtile-btns button { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border:0; border-radius:999px; background:#fff; color:#00337A; font-family:'Outfit',system-ui,sans-serif; font-size:15px; cursor:pointer; }
.ip-gtile-btns .ip-btn-ghost { margin-left:auto; }
.ip-gadd { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:240px; border:2px dashed #B8CCE9; border-radius:24px; background:#fff; cursor:pointer; padding:20px; box-sizing:border-box; text-align:center; }
.ip-gadd:hover { border-color:#00337A; }
.ip-gadd-plus { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:#E9F0FA; font-size:24px; color:#00337A; }
.ip-gadd span:nth-child(2) { font-size:17px; color:#00337A; }
.ip-gadd-hint { font-size:13px; line-height:1.5; color:#5C6675; }

/* More inventors */
.ip-more { background:#E9F0FA; padding:clamp(44px,5vw,72px) 0; }
.ip-more-hd { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:28px; }
.ip-more-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.ip-more-card { display:flex; align-items:center; gap:16px; padding:16px 18px; background:#fff; border-radius:20px; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; }
.ip-more-card:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,51,122,.12); }
.ip-more-card .ip-follow-av { width:56px; height:56px; }

/* Lightbox */
.ip-lightbox { position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:clamp(16px,4vw,32px); box-sizing:border-box; background:rgba(0,20,50,.72); backdrop-filter:blur(6px); }
.ip-lightbox[hidden] { display:none; }
.ip-lb-img { max-width:min(1100px,calc(100vw - 32px)); max-height:74vh; object-fit:contain; display:block; border-radius:16px; }
.ip-lb-nav { position:absolute; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:clamp(44px,10vw,52px); height:clamp(44px,10vw,52px); border:1.5px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(0,20,50,.45); color:#fff; font-size:20px; cursor:pointer; }
.ip-lb-nav:hover { border-color:#fff; background:rgba(255,255,255,.16); }
.ip-lb-prev { left:clamp(8px,2vw,28px); }
.ip-lb-next { right:clamp(8px,2vw,28px); }
.ip-lb-close { position:absolute; top:24px; right:24px; display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border:1.5px solid rgba(255,255,255,.4); border-radius:50%; background:none; color:#fff; font-size:18px; cursor:pointer; }
.ip-lb-close:hover { border-color:#fff; background:rgba(255,255,255,.1); }
.ip-lb-cap { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:16px; text-align:center; font-size:17px; line-height:1.6; color:#fff; max-width:58ch; }
.ip-lb-count { font-size:15px; color:#9FB6DB; }

/* ── Notifications bell (header) ── */
.am-bell { position:relative; display:inline-flex; flex:none; }
.am-bell-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:50%; background:none; color:#00337A; cursor:pointer; }
.am-bell-btn:hover { background:#E9F0FA; }
.am-bell-btn:focus-visible { outline:3px solid #FFC302; outline-offset:2px; }
/* Pivot at the bell crown — makes the swing read as a bell, not a wobbling square. */
.am-bell-icon { display:block; transform-origin:50% 4px; }
/* Golden count badge; pointer-events:none so it never steals a click from the 44px button. */
.am-bell-badge { position:absolute; top:2px; right:0; display:none; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 5px; box-sizing:border-box; border-radius:999px; background:#FFC302; box-shadow:0 0 0 2px #fff; font-family:'Outfit',system-ui,sans-serif; font-weight:500; font-size:12px; line-height:1; color:#00337A; pointer-events:none; }
.am-bell--unread .am-bell-badge { display:inline-flex; }
/* One damped swing per 7s cycle; 74% of the cycle is stillness (constant shaking reads as a bug). */
@keyframes am-bell-ring {
  0%, 74%, 100% { transform:rotate(0); }
  77% { transform:rotate(-11deg); }
  80% { transform:rotate(9deg); }
  83% { transform:rotate(-7deg); }
  86% { transform:rotate(5deg); }
  89% { transform:rotate(-3deg); }
  92% { transform:rotate(1.5deg); }
}
/* Halo via box-shadow (not scale) so the number stays still + readable; keeps the 2px keyline. */
@keyframes am-bell-pulse {
  0%, 70%, 100% { box-shadow:0 0 0 0 rgba(255,195,2,.55), 0 0 0 2px #fff; }
  82%           { box-shadow:0 0 0 7px rgba(255,195,2,0),  0 0 0 2px #fff; }
}
.am-bell--unread .am-bell-icon  { animation:am-bell-ring 7s ease-in-out infinite; }
.am-bell--unread .am-bell-badge { animation:am-bell-pulse 7s ease-in-out infinite; }
/* One immediate swing when a new notification lands (JS adds/removes the class). */
.am-bell--arrived .am-bell-icon { animation:am-bell-ring 1.8s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) {
  .am-bell--unread .am-bell-icon,
  .am-bell--unread .am-bell-badge,
  .am-bell--arrived .am-bell-icon { animation:none; }
}
/* Mobile: the avatar carries the dot (see the 768px swap below). Sits outside the avatar crop. */
.am-avatar-dot { position:absolute; top:-1px; right:-1px; width:12px; height:12px; border-radius:50%; background:#FFC302; box-shadow:0 0 0 2px #fff; pointer-events:none; display:none; z-index:3; }
.am-bell-menu { position:absolute; top:52px; right:0; z-index:60; width:min(380px,80vw); background:#fff; border:1px solid #E9F0FA; border-radius:20px; box-shadow:0 24px 60px rgba(0,51,122,.16); overflow:hidden; }
.am-bell-menu[hidden] { display:none; }
.ukn-menu-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid #E9F0FA; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#5C6675; }
.ukn-menu-markall { border:0; background:none; padding:0; font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#00337A; cursor:pointer; }
.ukn-menu-loading,.ukn-menu-empty { margin:0; padding:20px; font-size:15px; color:#687385; }
.ukn-drow { display:flex; align-items:flex-start; gap:12px; padding:14px 20px; text-decoration:none; border-bottom:1px solid #E9F0FA; background:#fff; }
.ukn-drow.is-unread { background:#F7FAFE; }
.ukn-drow-dot { flex:none; width:8px; height:8px; margin-top:7px; border-radius:50%; background:#D3E1F4; }
.ukn-drow.is-unread .ukn-drow-dot { background:#FFC302; }
.ukn-drow-main { display:block; font-size:15px; line-height:1.5; color:#3A414B; }
.ukn-drow-time { display:block; margin-top:3px; font-size:13px; line-height:1.4; color:#687385; }
.ukn-menu-all { display:block; width:100%; padding:16px 20px; border:0; border-top:1px solid #E9F0FA; background:none; font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#00337A; text-align:left; cursor:pointer; }
.ukn-menu-all:hover { background:#F7FAFE; }

/* ── Notifications slide-over sheet ── */
.ukn-sheet { position:fixed; inset:0; z-index:1100; }
.ukn-sheet[hidden] { display:none; }
.ukn-scrim { position:absolute; inset:0; background:rgba(0,20,50,.4); }
.ukn-panel { position:absolute; top:0; right:0; bottom:0; width:min(520px,100vw); display:flex; flex-direction:column; background:#FDFCFA; box-shadow:-24px 0 60px rgba(0,20,50,.18); }
.ukn-head { flex:none; padding:20px 24px 0; background:#FDFCFA; }
.ukn-back { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:0 0 4px -8px; padding:0 8px; border:0; background:none; font-family:'Outfit',system-ui,sans-serif; font-weight:500; font-size:15px; color:#5C6675; cursor:pointer; }
.ukn-back[hidden] { display:none; }
.ukn-head-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ukn-title { margin:0; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:28px; line-height:1.2; letter-spacing:-.008em; color:#00337A; }
.ukn-close { flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1.5px solid #D3E1F4; border-radius:50%; background:#fff; color:#00337A; cursor:pointer; }
.ukn-close:hover { border-color:#00337A; }
.ukn-filters { display:flex; gap:8px; margin-top:16px; padding-bottom:16px; overflow-x:auto; border-bottom:1px solid #E9F0FA; }
.ukn-filters[hidden] { display:none; }
.ukn-chip { flex:none; display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border:1.5px solid #D3E1F4; border-radius:999px; background:#fff; font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#00337A; cursor:pointer; white-space:nowrap; }
.ukn-chip.is-active { border-color:#00337A; background:#00337A; color:#fff; }
.ukn-list { flex:1 1 auto; overflow-y:auto; padding:8px 16px 24px; }
.ukn-list[hidden] { display:none; }
.ukn-group { margin:0 0 4px; padding:12px 8px 0; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#5C6675; }
.ukn-srow { display:flex; align-items:flex-start; gap:14px; padding:16px; border-radius:16px; text-decoration:none; }
.ukn-srow.is-unread { background:#F2F7FD; }
.ukn-av { flex:none; width:44px; height:44px; border-radius:50%; overflow:hidden; background:#D3E1F4; }
.ukn-av img { width:100%; height:100%; object-fit:cover; display:block; }
.ukn-av--letter { display:flex; align-items:center; justify-content:center; background:#E9F0FA; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:17px; color:#00337A; }
.ukn-srow-txt { flex:1 1 auto; min-width:0; }
.ukn-srow-main { display:block; font-size:17px; line-height:1.5; color:#3A414B; }
.ukn-srow-meta { display:block; margin-top:4px; font-size:13px; line-height:1.4; color:#687385; }
.ukn-srow-dot { flex:none; width:10px; height:10px; margin-top:8px; border-radius:50%; background:#FFC302; }
.ukn-empty { padding:48px 16px; text-align:center; }
.ukn-empty-title { margin:0; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:22px; line-height:1.3; color:#00337A; }
.ukn-empty-sub { margin:8px 0 0; font-size:17px; line-height:1.6; color:#5C6675; }
.ukn-foot { flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; border-top:1px solid #E9F0FA; background:#fff; }
.ukn-foot[hidden] { display:none; }
.ukn-markall,.ukn-open-settings { min-height:44px; padding:0; border:0; background:none; font-family:'Outfit',system-ui,sans-serif; font-size:15px; cursor:pointer; }
.ukn-markall { color:#00337A; }
.ukn-open-settings { color:#5C6675; }
.ukn-open-settings:hover { color:#00337A; }
.ukn-settings { flex:1 1 auto; overflow-y:auto; padding:16px 24px 24px; }
.ukn-settings[hidden] { display:none; }
.ukn-set-head { margin:0 0 6px; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#5C6675; }
.ukn-set-note { margin:0 0 12px; font-size:15px; line-height:1.6; color:#5C6675; }
.ukn-set-row { display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid #E9F0FA; }
.ukn-set-label { flex:1 1 auto; min-width:0; font-size:17px; line-height:1.5; color:#3A414B; }
.ukn-switch { flex:none; display:inline-flex; align-items:center; width:52px; height:32px; padding:3px; border:0; border-radius:999px; box-sizing:border-box; cursor:pointer; background:#D3E1F4; justify-content:flex-start; transition:background .18s ease; }
.ukn-switch.is-on { background:#00337A; justify-content:flex-end; }
.ukn-knob { display:block; width:26px; height:26px; border-radius:50%; background:#fff; }
.ukn-modes { display:flex; flex-wrap:wrap; gap:8px; }
.ukn-mode { display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border:1.5px solid #D3E1F4; border-radius:999px; background:#fff; font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#00337A; cursor:pointer; }
.ukn-mode.is-active { border-color:#00337A; background:#00337A; color:#fff; }

@media (max-width:768px) {
  .ip-tabs-wrap { top:64px; }
  /* The bell leaves the bar; the account avatar carries the unread dot instead,
     so the state is never signalled twice. */
  .am-bell { display:none; }
  .am-avatar-dot.is-unread { display:block; }
}
@media (max-width:480px) {
  .ip-avatar-wrap { width:88px; height:88px; }
  .ip-card { padding:20px; }
  .am-bell-btn { width:40px; height:40px; }
  .am-bell-menu { right:-40px; }
}

/* ═════════════════════════════════════════════════════════════════
   COMPETITIONS 2.0  (cmp-*)  — public list + detail
   Cobalt #00337A · Gold #FFC302 · Sky #E9F0FA · Line #D3E1F4
   ════════════════════════════════════════════════════════════════ */
.cmp-list, .cmp-detail { background:#fff; }
.cmp-h1, .cmp-h2, .cmp-dh1 { font-family:'Nunito',system-ui,sans-serif; color:#00337A; }
.cmp-tag, .cmp-pill, .cmp-chip, .cmp-btn-primary, .cmp-btn-outline, .cmp-btn-gold, .cmp-card__cta, .cmp-btn-mini { font-family:'Outfit',system-ui,sans-serif; }
.cmp-dot { color:#FFC302; }
.cmp-muted { color:#6B7689; font-family:'Outfit',system-ui,sans-serif; }

/* ── Hero ── */
.cmp-hero-sec { padding:clamp(104px,10vw,120px) 0 8px; overflow:hidden; }  /* 72px header + 32–48px top gap (unified) */
.cmp-hero { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(16px,3vw,48px); align-items:center; }
.cmp-eyebrow { display:block; font-family:'Outfit',system-ui,sans-serif; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#6B7689; margin-bottom:20px; }
.cmp-h1 { font-weight:900; font-size:clamp(48px,7vw,72px); line-height:1.05; letter-spacing:-.02em; max-width:14ch; margin:0; }
.cmp-lead { margin:20px 0 0; max-width:42ch; font-family:'Outfit',system-ui,sans-serif; font-size:clamp(17px,2vw,20px); line-height:1.6; color:#3A414B; }
.cmp-stats { display:flex; flex-wrap:nowrap; align-items:stretch; gap:12px; margin:40px 0 0; }
.cmp-stat { display:flex; align-items:center; flex:1 1 auto; gap:10px; padding:12px 14px; border:1px solid #D3E1F4; min-width:0; border-radius:20px; background:#fff; }
.cmp-stat__ico { flex:none; width:34px; height:34px; border-radius:50%; background-color:#E9F0FA; background-repeat:no-repeat; background-position:center; background-size:24px 24px; }
.cmp-stat__n { display:block; font-family:'Nunito',system-ui,sans-serif; font-weight:900; font-size:24px; line-height:1.1; color:#00337A; }
.cmp-stat__label { display:block; font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#5C6675; white-space:nowrap; }
.cmp-filters { display:flex; align-items:center; gap:10px; margin-top:44px; flex-wrap:wrap; }
.cmp-chip { height:40px; padding:0 20px; border-radius:999px; border:1px solid #D3E1F4; background:#fff; color:#00337A; font-size:15px; cursor:pointer; transition:background .15s,border-color .15s; }
.cmp-chip:hover { background:#E9F0FA; }
.cmp-chip.is-active { background:#00337A; border-color:#00337A; color:#fff; }
.cmp-collage { justify-self:end; position:relative; width:100%; max-width:560px; aspect-ratio:560/470; pointer-events:none; }
.cmp-collage__deco { position:absolute; inset:0; display:block; }
.cmp-bubble { position:absolute; aspect-ratio:1; border-radius:50%; background:#fff; border:2px solid #D3E1F4; background-repeat:no-repeat; background-position:center; background-size:52%; }
.cmp-bubble--tint { background-color:#E9F0FA; border:0; }

/* ── Sections ── */
.cmp-sec { padding:96px 0 56px; }  /* unified with the site's 96/56 section rhythm */
.cmp-sec--tint { background:#F4F8FD; }
.cmp-sechead { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
/* Section headings — design value: Nunito 800 / 32px, 32px below (was glued). */
.cmp-h2 { font-weight:800; font-size:clamp(26px,3.4vw,32px); line-height:1.2; letter-spacing:-.012em; margin:0 0 32px; }
.cmp-inv-head .cmp-h2, .cmp-sechead .cmp-h2 { margin:0; }
.cmp-sechead__right { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.cmp-note { font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#6B7689; }
.cmp-plus { font-size:20px; line-height:1; margin-right:2px; }

/* ── Buttons ── */
.cmp-btn-primary { display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 22px; border-radius:999px; border:0; background:#00337A; color:#fff; cursor:pointer; font-weight:500; font-size:17px; white-space:nowrap; }
.cmp-btn-primary:hover { background:#00265C; }
.cmp-btn-outline { display:inline-flex; align-items:center; gap:6px; height:52px; padding:0 30px; border-radius:999px; border:2px solid #00337A; background:#fff; color:#00337A; font-family:'Outfit',system-ui,sans-serif; font-weight:500; font-size:17px; cursor:pointer; }
.cmp-btn-outline:hover { background:#E9F0FA; }
.cmp-btn-gold { display:inline-flex; align-items:center; height:52px; padding:0 30px; border-radius:999px; background:#FFC302; color:#00337A; font-weight:500; font-size:17px; text-decoration:none; }
.cmp-btn-gold:hover { background:#FFD64D; }
.cmp-btn-gold.is-disabled { background:#E9F0FA; color:#9FB6DB; cursor:not-allowed; }
.cmp-btn-mini { height:34px; padding:0 16px; border-radius:999px; border:1px solid #00337A; background:#00337A; color:#fff; cursor:pointer; white-space:nowrap; font-weight:500; font-size:14px; }
.cmp-btn-mini:hover { background:#00265C; }

/* ── Cards ── */
.cmp-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px; }
.cmp-card { display:flex; flex-direction:column; background:#fff; border:1px solid #D3E1F4; border-radius:24px; min-width:0; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; overflow:hidden; }
.cmp-card:hover { transform:translateY(-2px); box-shadow:0 18px 44px rgba(0,51,122,.12); }
.cmp-card--draft { border:1px dashed #9FB6DB; }
.cmp-card__media { position:relative; aspect-ratio:16/10; background-color:#E9F0FA; border-radius:24px 24px 0 96px; background-size:cover; background-position:center; }
/* Only recolour the placeholder tint — must NOT use the `background` shorthand,
   which resets background-size/position and top-left-crops the thumbnail. */
.cmp-card--draft .cmp-card__media { background-color:#F4F8FD; }
.cmp-card__arrow { position:absolute; top:16px; right:16px; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#00337A; color:#fff; font-size:15px; }
.cmp-pill { position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 14px; border-radius:999px; background:#fff; font-weight:500; font-size:13px; color:#00337A; }
.cmp-pill__dot { width:7px; height:7px; border-radius:50%; background:#FFC302; }
.cmp-pill--soon .cmp-pill__dot { background:#9FB6DB; }
.cmp-pill--draft { border:1px solid #9FB6DB; color:#5C6675; }
.cmp-pill--draft .cmp-pill__dot { background:#9FB6DB; }
.cmp-pill--done { background:#00337A; color:#fff; }
.cmp-card__body { display:flex; flex-direction:column; flex:1; padding:24px 26px 26px; }
.cmp-card__dates { font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#6B7689; }
.cmp-card__title { margin:8px 0 10px; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:24px; line-height:1.3; letter-spacing:-.008em; color:#00337A; }
.cmp-card__desc { margin:0; font-family:'Outfit',system-ui,sans-serif; font-size:15px; line-height:1.6; color:#3A414B; }
.cmp-card__tags { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.cmp-tag { display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:999px; background:#E9F0FA; font-size:13px; color:#00337A; }
.cmp-card__foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; padding-top:18px; }
.cmp-card__foot > .cmp-card__teams { padding-top:0; }
.cmp-card__teams { white-space:nowrap; font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#6B7689; }
.cmp-card__foot-actions { display:flex; align-items:center; gap:14px; }
.cmp-card__cta { flex:none; white-space:nowrap; font-family:'Outfit',system-ui,sans-serif; font-weight:500; font-size:15px; color:#00337A; }

/* Kebab */
.cmp-kebab-wrap { position:relative; display:inline-flex; }
.cmp-kebab { display:flex; align-items:center; justify-content:center; gap:3px; width:34px; height:34px; border-radius:50%; border:1px solid #D3E1F4; background:#fff; cursor:pointer; padding:0; }
.cmp-kebab:hover { background:#E9F0FA; }
.cmp-kebab span { width:4px; height:4px; border-radius:50%; background:#00337A; }
.cmp-kebab-menu { position:absolute; right:0; bottom:44px; z-index:6; display:flex; flex-direction:column; width:220px; padding:8px; border:1px solid #D3E1F4; border-radius:16px; background:#fff; box-shadow:0 18px 44px rgba(0,51,122,.14); }
.cmp-kebab-menu[hidden] { display:none; }
.cmp-kebab-menu button { text-align:left; padding:11px 12px; border:0; border-radius:10px; background:none; cursor:pointer; font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#00337A; }
.cmp-kebab-menu button:hover { background:#E9F0FA; }
.cmp-kebab-menu .cmp-danger { color:#C0392B; }
.cmp-kebab-menu .cmp-danger:hover { background:#FBECEA; }

/* Empty states */
.cmp-empty { border:1px dashed #D3E1F4; border-radius:24px; padding:64px 40px; text-align:center; }
.cmp-empty__dot { display:inline-block; width:14px; height:14px; border-radius:50%; background:#FFC302; margin-bottom:20px; }
.cmp-empty h3 { margin:0 0 10px; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:28px; line-height:1.2; color:#00337A; }
.cmp-empty p { margin:0; font-family:'Outfit',system-ui,sans-serif; font-size:17px; line-height:1.65; color:#3A414B; }

/* Delete confirm */
.cmp-confirm { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,38,92,.45); }
.cmp-confirm[hidden] { display:none; }
.cmp-confirm__card { width:100%; max-width:440px; padding:32px; border-radius:24px; background:#fff; }
.cmp-confirm__card h3 { margin:0 0 10px; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:24px; color:#00337A; }
.cmp-confirm__card p { margin:0 0 26px; font-family:'Outfit',system-ui,sans-serif; font-size:17px; line-height:1.6; color:#3A414B; }
.cmp-confirm__actions { display:flex; gap:12px; justify-content:flex-end; }
.cmp-btn-danger { height:44px; padding:0 22px; border-radius:999px; border:0; background:#C0392B; color:#fff; cursor:pointer; font-family:'Outfit',system-ui,sans-serif; font-weight:500; font-size:17px; }
.cmp-btn-danger:hover { background:#A93226; }
.cmp-confirm .cmp-btn-outline { height:44px; }

/* Open-lecture apply confirmation popup (the CTA note + Register / Cancel) */
.cmp-applymodal { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:24px; }
.cmp-applymodal[hidden] { display:none; }
.cmp-applymodal__scrim { position:absolute; inset:0; background:rgba(0,38,92,.45); }
.cmp-applymodal__card { position:relative; width:100%; max-width:460px; padding:32px; border-radius:24px; background:#fff; box-shadow:0 24px 70px rgba(0,20,50,.28); }
.cmp-applymodal__text { margin:0 0 26px; font-family:'Outfit',system-ui,sans-serif; font-size:16px; line-height:1.6; color:#3A414B; }
.cmp-applymodal__btns { display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; }
.cmp-applymodal .cmp-btn-outline, .cmp-applymodal .cmp-btn-gold { height:46px; }

/* ── Detail ── */
.cmp-detail { padding-top:72px; }
.cmp-topbar { padding-top:28px; }
.cmp-back { display:inline-flex; align-items:center; gap:10px; font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#5C6675; text-decoration:none; }
.cmp-back:hover { color:#00337A; }
.cmp-dhero-sec { padding:48px 0 56px; }  /* 72px header (on .cmp-detail) + 48px top gap (unified) */
.cmp-dhero { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(28px,4vw,56px); align-items:start; }  /* media pinned to the top, not vertically centred */
.cmp-dhero__meta { display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.cmp-pill--static { position:static; }
.cmp-dhero__meta .cmp-pill { position:static; background:#E9F0FA; }
.cmp-dhero__meta .cmp-pill--done { background:#00337A; color:#fff; }
.cmp-dhero__dates { font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#6B7689; }
.cmp-dh1 { margin:0; font-weight:900; font-size:clamp(40px,6vw,56px); line-height:1.08; letter-spacing:-.018em; max-width:14ch; overflow-wrap:break-word; }
.cmp-dlead { margin:20px 0 0; max-width:46ch; font-family:'Outfit',system-ui,sans-serif; font-size:clamp(17px,2vw,20px); line-height:1.6; color:#3A414B; overflow-wrap:break-word; }
.cmp-dtags { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:24px 0 30px; }
.cmp-dtags .cmp-tag { height:30px; }
.cmp-dcta { display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.cmp-dcta__row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
/* Apply + Share sit side by side when there's room and wrap to stack when the
   column gets cramped; the note always drops to its own line below them. */
.cmp-dcta__note { max-width:230px; font-family:'Outfit',system-ui,sans-serif; font-size:13px; line-height:1.45; color:#6B7689; order:1; flex-basis:100%; }
.cmp-dhero__photo { position:relative; aspect-ratio:4/3; background:#E9F0FA; border-radius:24px 24px 24px 140px; overflow:hidden; }
.cmp-dhero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:center center; will-change:transform; }
.cmp-dhero__accent { position:absolute; z-index:2; top:26px; right:26px; width:56px; height:56px; border-radius:50%; background:#FFC302; }

/* Tabs */
.cmp-tabbar-wrap { position:sticky; top:0; z-index:20; background:#fff; border-top:1px solid #E9F0FA; border-bottom:1px solid #E9F0FA; }
.cmp-tabbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cmp-tabs { display:flex; align-items:center; gap:clamp(20px,3vw,40px); overflow:auto; flex:1 1 auto; min-width:0; }
.cmp-edittools { margin-left:auto; }
.cmp-tab { display:inline-flex; align-items:center; min-height:56px; padding:0; border:0; border-bottom:2px solid transparent; background:none; font-family:'Outfit',system-ui,sans-serif; font-size:17px; cursor:pointer; color:#5C6675; white-space:nowrap; }
.cmp-tab.is-active { color:#00337A; border-bottom-color:#FFC302; }
/* Open-lecture phase: extra tabs (phases/awards/gallery) exist only for admins and
   stay hidden until edit mode, so a browsing admin sees just Overview + Registered. */
.cmp-tab--edit-only { display:none; color:#98A2B3; } /* lighter — signals an edit-only (revealed) tab */
.cmp-editing .cmp-tab--edit-only,
.cmp-inv-editing .cmp-tab--edit-only,
.cmp-reg-editing .cmp-tab--edit-only { display:inline-flex; }

/* Panels */
.cmp-panel { padding:48px 0 96px; }  /* tighter top under the tab bar (which already separates); full 96 bottom before the footer */
.cmp-panel[hidden] { display:none; }
.cmp-two { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:clamp(32px,5vw,64px); align-items:start; }
.cmp-two .cmp-h2 { margin:0 0 28px; font-size:clamp(24px,3vw,32px); }
.cmp-prose { font-family:'Outfit',system-ui,sans-serif; font-size:17px; line-height:1.7; color:#3A414B; }
/* Explicit colour: a global `p { color:var(--muted) }` rule (0,0,1) otherwise
   wins over .cmp-prose's inherited colour and greys the body out, unlike the
   hero .cmp-dlead which is a class. Match the hero description (#3A414B). */
.cmp-prose p { margin:0 0 18px; color:#3A414B; }
.cmp-prose p:last-child { margin:0; }
/* Rich body (Quill output): bold/italic/underline + bulleted/numbered lists. */
.cmp-prose strong, .cmp-prose b { font-weight:700; }
.cmp-prose em, .cmp-prose i { font-style:italic; }
.cmp-prose u { text-decoration:underline; }
.cmp-prose ul, .cmp-prose ol { margin:0 0 18px; padding-left:24px; }
.cmp-prose ul { list-style:disc; }
.cmp-prose ol { list-style:decimal; }
.cmp-prose li { margin:0 0 8px; }
.cmp-prose li:last-child { margin:0; }
.cmp-prose ul li::marker { color:#FFC302; }
.cmp-glance__row { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:56px; padding:12px 0; border-top:1px solid #E9F0FA; }
/* An unfilled glance row (e.g. Open lectures with no dates) is hidden in view,
   revealed in edit mode so the admin can fill it in. */
.cmp-glance__row--empty { display:none; }
.cmp-editing .cmp-glance__row--empty { display:flex; }
.cmp-glance__row:last-child { border-bottom:1px solid #E9F0FA; }
.cmp-glance__row span { font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#6B7689; }
.cmp-glance__row b { font-family:'Outfit',system-ui,sans-serif; font-weight:500; font-size:17px; color:#00337A; }
.cmp-glance__row b[data-cf="regions"] { text-align:right; }
/* .cmp-glance__row span above is a generic label-span rule that also (unintentionally)
   matched the nested .inv-field-count countdown badge span, overriding its own
   color/font-size — restore the shared badge look here (2 classes beats 1 class + 1 tag). */
.cmp-glance__row .inv-field-count { font-size:11px; color:var(--blue); }
.cmp-glance__row .inv-field-count.inv-field-count--over { color:#B3261E; }

/* Phases */
/* Phases — exact values from the design handoff (phases-spec.md / phases.css).
   Card is white with a #D3E1F4 border; the one phase happening now is a solid
   cobalt card with a gold dot; dates are sentence case (never uppercase). */
.cmp-phases { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:24px; align-items:start; }
.cmp-phase { position:relative; min-width:0; padding:28px 26px 26px; border:1px solid #D3E1F4; border-radius:20px; background:#fff; }
.cmp-phase--now { background:#00337A; border-color:transparent; }
.cmp-phase--done { background:#fff; }
.cmp-phase__dot { display:block; width:14px; height:14px; border-radius:50%; background:#D3E1F4; margin-bottom:18px; }
.cmp-phase--now .cmp-phase__dot { background:#FFC302; }
.cmp-phase--done .cmp-phase__dot { background:#00337A; }
.cmp-phase__dates { display:block; font-family:'Outfit',system-ui,sans-serif; font-weight:400; font-size:13px; letter-spacing:normal; text-transform:none; color:#6B7689; }
.cmp-phase__title { margin:8px 0 10px; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:20px; line-height:1.35; color:#00337A; }
.cmp-phase__body { margin:0; font-family:'Outfit',system-ui,sans-serif; font-size:15px; line-height:1.6; color:#3A414B; }
.cmp-phase--now .cmp-phase__dates { color:#9FB6DB; }
.cmp-phase--now .cmp-phase__title { color:#fff; }
.cmp-phase--now .cmp-phase__body { color:#9FB6DB; }

/* Awards / grand */
/* Awards & winners — exact values from the Competitions 2.0 prototype. */
.cmp-grand { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); background:#00337A; border-radius:24px; overflow:hidden; margin-bottom:72px; }
.cmp-grand__body { padding:40px 40px 44px; min-width:0; color:#fff; }
.cmp-grand__eyebrow { display:inline-flex; align-items:center; gap:10px; height:34px; padding:0 16px; border-radius:999px; background:rgba(255,255,255,.12); margin-bottom:24px; font-family:'Outfit',system-ui,sans-serif; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#fff; }
.cmp-grand__eyedot { width:8px; height:8px; border-radius:50%; background:#FFC302; }
.cmp-grand__inv { margin:0 0 16px; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:32px; line-height:1.2; letter-spacing:-.008em; color:#fff; }
.cmp-grand__desc { margin:0 0 24px; max-width:34ch; font-family:'Outfit',system-ui,sans-serif; font-size:17px; line-height:1.65; color:#9FB6DB; }
.cmp-grand__winners { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.cmp-winner-chip { display:inline-block; padding:6px 14px; border-radius:12px; background:rgba(255,255,255,.10); font-family:'Outfit',system-ui,sans-serif; font-weight:400; font-size:13px; line-height:1.45; color:#E9F0FA; }
/* Parts flow as one text run — long chips wrap at the line end, not per item. */
.cmp-winner-chip__inv, .cmp-winner-chip__sep, .cmp-winner-chip__meta { display:inline; }
.cmp-winner-chip--empty { background:transparent; border:1px dashed rgba(255,255,255,.35); font-weight:400; font-size:13px; color:#9FB6DB; }
.cmp-winner-chip__inv { font-weight:600; }
.cmp-winner-chip__sep { margin:0 5px; color:#FFC302; font-weight:700; }
.cmp-grand__prize { margin:0; font-family:'Outfit',system-ui,sans-serif; font-weight:500; font-size:17px; line-height:1.5; color:#fff; }
.cmp-grand__photo { position:relative; min-height:360px; background:#012E6E; background-size:cover; background-position:center; overflow:hidden; }
.cmp-grand__accent { position:absolute; z-index:3; top:26px; right:26px; width:56px; height:56px; border-radius:50%; background:#FFC302; }
/* "Special awards" block: hidden in view mode when there are no awards yet,
   revealed in edit mode (main.cmp-editing) so the admin can add the first one. */
.cmp-awards-block--empty { display:none; }
.cmp-editing .cmp-awards-block--empty { display:block; }
.cmp-awards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px; align-items:stretch; }
.cmp-award { display:flex; flex-direction:column; gap:14px; min-width:0; padding:24px 22px; border:1px solid #D3E1F4; border-radius:20px; background:#fff; }
.cmp-award:hover { border-color:#9FB6DB; }
.cmp-award__head { display:flex; align-items:flex-start; gap:10px; min-height:46px; }
.cmp-award__dot { flex:none; width:8px; height:8px; border-radius:50%; background:#FFC302; margin-top:7px; }
.cmp-award__name { font-family:'Outfit',system-ui,sans-serif; font-weight:600; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:#00337A; }
.cmp-award__wins { display:flex; flex-direction:column; gap:10px; }
.cmp-award__win { display:flex; flex-direction:column; gap:2px; min-width:0; padding:12px 14px; border-radius:14px; background:#F4F8FD; }
.cmp-award__inv { font-family:'Outfit',system-ui,sans-serif; font-weight:500; font-size:16px; color:#00337A; }
.cmp-award__by { font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#6B7689; }
.cmp-award__empty { display:flex; align-items:center; min-height:44px; padding:12px 14px; border:1px dashed #D3E1F4; border-radius:14px; font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#6B7689; }

/* Inventions table — exact design: Invention | Inventor·City | Current phase | Progress */
.cmp-sechead__meta { margin-left:auto; font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#6B7689; }
.cmp-apply-closed { border:1px dashed #9FB6DB; border-radius:20px; padding:40px; text-align:center; font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#6B7689; }
.cmp-invtools { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.cmp-invchips { display:flex; gap:8px; flex-wrap:wrap; }
.cmp-invchip { height:34px; padding:0 16px; border-radius:999px; border:1px solid #D3E1F4; background:#fff; cursor:pointer; font-family:'Outfit',system-ui,sans-serif; font-size:14px; color:#00337A; }
.cmp-invchip:hover { background:#E9F0FA; }
.cmp-invchip.is-active { background:#00337A; border-color:#00337A; color:#fff; }
.cmp-invsearch { width:300px; max-width:100%; height:38px; box-sizing:border-box; border:1px solid #D3E1F4; border-radius:999px; padding:0 18px; background:#fff; outline:none; font-family:'Outfit',system-ui,sans-serif; font-size:14px; color:#00337A; }
.cmp-invsearch:focus { border-color:#00337A; }
.cmp-invsearch-none { margin:20px 0 0; text-align:center; color:#6B7689; font-family:'Outfit',system-ui,sans-serif; }

/* Registered tab — lecture registrants (Name / City / School), 3-col variant of .cmp-table */
.cmp-table--reg .cmp-thead, .cmp-table--reg .cmp-trow { grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,2.2fr); }
.cmp-table--reg .cmp-trow__inv { font-weight:600; }
.cmp-table--reg .cmp-trow__inv a { color:inherit; text-decoration:none; }
/* Long unbreakable Ukrainian words (e.g. "Дніпропетровська") must break inside
   their cell instead of spilling into the next column. */
.cmp-table--reg .cmp-trow__inv, .cmp-table--reg .cmp-trow__by { overflow-wrap:anywhere; }
/* The remove column exists only in edit mode (admin clicked "Edit" on the Registered
   tab). Dedicated class so nothing else sets its display and the hide always wins. */
.cmp-reg-rm { display:none; align-items:center; justify-content:flex-end; }
.cmp-reg-editing .cmp-reg-rm { display:flex; }
.cmp-reg-editing .cmp-table--reg-admin .cmp-thead, .cmp-reg-editing .cmp-table--reg-admin .cmp-trow { grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,2.2fr) 44px; }

.cmp-table { border:1px solid #E9F0FA; border-radius:20px; overflow:hidden; }
.cmp-thead, .cmp-trow { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,2fr) 190px 230px; gap:16px; align-items:center; }
.cmp-thead { padding:12px 24px; background:#F4F8FD; font-family:'Outfit',system-ui,sans-serif; font-weight:400; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#6B7689; }
.cmp-trow { padding:14px 24px; border-top:1px solid #E9F0FA; font-family:'Outfit',system-ui,sans-serif; }
.cmp-trow[hidden] { display:none; }
.cmp-trow:hover { background:#F9FBFE; }
.cmp-col-right { text-align:right; }
.cmp-trow__inv { min-width:0; font-weight:500; font-size:16px; color:#00337A; }
.cmp-trow__inv a { color:inherit; text-decoration:none; }
.cmp-trow__inv a:hover { text-decoration:underline; }
.cmp-trow__by { min-width:0; font-size:14px; color:#6B7689; }
.cmp-trow__phase { justify-self:start; min-width:0; }
.cmp-phasepill { display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 12px; border-radius:999px; background:#E9F0FA; font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#00337A; }
.cmp-phasepill__dot { flex:none; width:7px; height:7px; border-radius:50%; background:#FFC302; }
.cmp-trow__prog { justify-self:end; display:inline-flex; align-items:center; gap:10px; min-width:0; }
.cmp-awardwon { display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:999px; background:#FFF6D6; color:#8A6D00; font-weight:600; font-size:13px; }
.cmp-prog-dash { color:#9FB6DB; }
.cmp-move-btn { height:30px; padding:0 14px; border-radius:999px; border:1px solid #D3E1F4; background:#fff; cursor:pointer; font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#00337A; white-space:nowrap; }
.cmp-move-btn:hover { background:#E9F0FA; border-color:#9FB6DB; }
.cmp-award-sel { position:relative; display:inline-flex; align-items:center; width:230px; max-width:100%; }
.cmp-award-sel select { appearance:none; -webkit-appearance:none; width:100%; height:32px; padding:0 34px 0 14px; border-radius:8px; border:1px solid #D3E1F4; background:#fff; cursor:pointer; font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#00337A; outline:none; }
.cmp-award-sel select:focus { border-color:#00337A; }
.cmp-award-sel svg { position:absolute; right:12px; pointer-events:none; }
.cmp-entry-detach { flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:1px solid #F3D2CE; background:#fff; color:#C0392B; font-size:16px; line-height:1; cursor:pointer; }
.cmp-entry-detach:hover { background:#FDF1EF; }
.cmp-inv-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; }
/* Add-invention search */
.cmp-entry-search { margin:4px 0 14px; }
.cmp-entry-results { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.cmp-entry-hit { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; padding:12px 14px; border:1px solid #E9F0FA; border-radius:12px; background:#fff; cursor:pointer; font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#3A414B; }
.cmp-entry-hit:hover { background:#F4F8FF; border-color:#CFE0F7; }
.cmp-entry-hit b { color:#00337A; }
.cmp-entry-other { color:#6B7689; font-style:italic; }
.cmp-entry-add { flex:none; color:#00337A; font-weight:600; }
.cmp-entry-none { padding:12px 4px; color:#6B7689; font-family:'Outfit',system-ui,sans-serif; }
/* Inventions tab: admin controls (Add / Remove / phase+award selects / search)
   stay hidden until this tab's Edit is pressed (main gets .cmp-inv-editing). */
.cmp-eo { display:none; }
#cmp-add-entry { display:none; }
.cmp-inv-editing #cmp-add-entry { display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.cmp-inv-editing .cmp-eo { display:inline-block; }
.cmp-inv-editing .cmp-award-sel.cmp-eo, .cmp-inv-editing .cmp-entry-detach.cmp-eo, .cmp-inv-editing #cmp-add-entry { display:inline-flex; }
.cmp-inv-editing .cmp-ro { display:none; }

/* Gallery + lightbox */
/* Gallery — design tiles: 4:3, D-arch bottom-left, caption overlay, edit ×/drop. */
.cmp-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.cmp-gtile { position:relative; margin:0; aspect-ratio:4/3; border-radius:20px 20px 20px 64px; overflow:hidden; background:#E9F0FA; }
.cmp-gtile__photo { position:absolute; inset:0; background-size:cover; background-position:center; }
/* Gallery reposition (edit mode): drag the photo to choose the visible part (no zoom). */
.cmp-gtile--edit .cmp-gtile__photo { cursor:move; touch-action:none; }
.cmp-gtile__photo.is-dragging { cursor:grabbing; }
.cmp-gtile__movehint { position:absolute; z-index:2; left:12px; top:12px; display:inline-flex; align-items:center; padding:5px 10px; border-radius:999px; background:rgba(13,31,92,.72); color:#fff; font-family:'Outfit',system-ui,sans-serif; font-size:11px; font-weight:500; pointer-events:none; }
.cmp-gtile__cap { position:absolute; z-index:2; left:20px; right:20px; bottom:20px; pointer-events:none; font-family:'Outfit',system-ui,sans-serif; font-size:13px; line-height:1.4; color:#fff; text-shadow:0 1px 8px rgba(0,17,51,.7); }
.cmp-gtile__open { position:absolute; inset:0; z-index:1; border:0; background:transparent; cursor:zoom-in; }
.cmp-gtile__rm { position:absolute; z-index:3; top:12px; right:12px; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:#00337A; font-size:15px; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,17,51,.2); }
.cmp-gtile__rm:hover { background:#fff; }
.cmp-gtile__capedit { position:absolute; z-index:3; left:14px; right:14px; bottom:14px; box-sizing:border-box; height:32px; border:1px solid rgba(255,255,255,.7); border-radius:999px; padding:0 12px; background:rgba(0,17,51,.42); color:#fff; outline:none; font-family:'Outfit',system-ui,sans-serif; font-size:13px; }
.cmp-gtile__capedit::placeholder { color:rgba(255,255,255,.7); }
.cmp-gtile-drop { aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border:1px dashed #9FB6DB; border-radius:20px 20px 20px 64px; background:#fff; cursor:pointer; text-align:center; }
.cmp-gtile-drop:hover { background:#F4F8FD; }
.cmp-gtile-drop__plus { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px dashed #9FB6DB; background:#fff; font-size:20px; line-height:1; color:#00337A; }
.cmp-gtile-drop__txt { font-family:'Outfit',system-ui,sans-serif; font-size:13px; line-height:1.5; color:#5C6675; padding:0 16px; }
.cmp-gal-tools { display:none; align-items:center; gap:16px; }
.cmp-editing .cmp-gal-tools { display:flex; }
.cmp-gal-count { font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#6B7689; }
.cmp-gal-add { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 20px; border-radius:999px; border:1.5px solid #00337A; background:#00337A; cursor:pointer; font-family:'Outfit',system-ui,sans-serif; font-weight:500; font-size:15px; color:#fff; }
.cmp-gal-add:hover { background:#00265C; }
.cmp-lightbox { position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:clamp(16px,4vw,32px); background:rgba(0,20,50,.72); backdrop-filter:blur(6px); }
.cmp-lightbox[hidden] { display:none; }
.cmp-lb-img { max-width:min(1100px,calc(100vw - 32px)); max-height:74vh; object-fit:contain; border-radius:16px; }
.cmp-lb-nav { position:absolute; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:clamp(44px,10vw,52px); height:clamp(44px,10vw,52px); border:1.5px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(0,20,50,.45); color:#fff; font-size:20px; cursor:pointer; }
.cmp-lb-prev { left:clamp(8px,2vw,28px); } .cmp-lb-next { right:clamp(8px,2vw,28px); }
.cmp-lb-close { position:absolute; top:24px; right:24px; width:52px; height:52px; border:1.5px solid rgba(255,255,255,.4); border-radius:50%; background:none; color:#fff; cursor:pointer; }
.cmp-lb-cap { font-family:'Outfit',system-ui,sans-serif; font-size:17px; color:#fff; text-align:center; }
.cmp-lb-count { color:#9FB6DB; font-size:15px; }

/* Competitions responsive (handoff patch; item grids use auto-fill above,
   two-block grids keep auto-fit; table adapted to the current 3 columns). */
@media (max-width:1024px) {
  .cmp-cards   { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cmp-gallery { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:900px) {
  .cmp-collage { display:none; }
  .cmp-hero, .cmp-two, .cmp-grand { grid-template-columns:minmax(0,1fr); }
  .cmp-hero  { gap:24px; }
  .cmp-two   { gap:36px; }
  .cmp-dhero { gap:32px; }
  .cmp-filters { margin-top:28px; }
  .cmp-stats { flex-wrap:wrap; }
  .cmp-stats > div { flex:1 1 160px; }
  .cmp-gallery { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cmp-thead, .cmp-trow { grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) 150px 210px; gap:12px; }
  .cmp-thead > span:last-child, .cmp-trow > span:last-child { text-align:left; justify-self:start; }
  .cmp-grand__body { padding:28px; }
  .competitions section { padding-top:48px; padding-bottom:56px; }
  .competitions h1 { font-size:48px; line-height:1.08; }
  .competitions h2 { font-size:28px; }
}
@media (max-width:760px) {
  .cmp-sechead { flex-direction:column; align-items:flex-start; gap:14px; }
  .cmp-sechead__right { flex-wrap:wrap; }
  .cmp-tabbar { flex-wrap:wrap; gap:14px; }
  .cmp-tabs { gap:22px; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cmp-table { overflow-x:auto; }
}
@media (max-width:680px) {
  .cmp-cards { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px) {
  .cmp-thead { display:none; }
  .cmp-trow  { grid-template-columns:minmax(0,1fr); row-gap:8px; align-items:flex-start; padding:16px 18px; }
  .cmp-trow > span:last-child { justify-self:start; }
  .cmp-trow__prog { justify-self:start; }
  /* The Registered table carries its own 3-/4-col grid (higher specificity than
     the stack rule above), so it must be reset to one column here too — otherwise
     the Name / City / School columns stay squeezed and overlap on phones. */
  .cmp-table--reg .cmp-trow,
  .cmp-reg-editing .cmp-table--reg-admin .cmp-trow { grid-template-columns:minmax(0,1fr); }
  /* Gold accent dot before the city so the stacked card doesn't read as flat
     rows; the school line indents to align under the city text (past the dot). */
  .cmp-table--reg .cmp-trow__inv + .cmp-trow__by { display:flex; align-items:center; gap:8px; color:#3A414B; }
  .cmp-table--reg .cmp-trow__inv + .cmp-trow__by::before { content:''; width:8px; height:8px; border-radius:50%; background:#FFC302; flex:none; }
  .cmp-table--reg .cmp-trow__by + .cmp-trow__by { padding-left:16px; }
  .cmp-invtools { flex-direction:column; align-items:stretch; }
  .cmp-invsearch { width:100%; }
  .cmp-inv-head { flex-wrap:wrap; }
  .cmp-dhero { gap:24px; }
  .cmp-stats { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:28px; }
  .cmp-stats > div { flex-direction:column; align-items:flex-start; gap:6px; padding:12px 10px; border-radius:16px; }
  .cmp-stats__icon  { width:26px; height:26px; background-size:18px 18px; }
  .cmp-stats__value { font-size:20px; }
  .cmp-stats__label { font-size:12px; white-space:normal; }
  .cmp-grand__body { padding:22px; }
  .cmp-grand__photo { min-height:260px; }
  .cmp-cards   { gap:20px; }
  .cmp-gallery { gap:14px; }
  .cmp-panel { padding:32px 0 56px; }
  .cmp-sec { padding:56px 0 32px; }
  .competitions section { padding-top:36px; padding-bottom:44px; }
  .competitions h1 { font-size:36px; }
  .competitions h2 { font-size:24px; }
  .competitions h3 { font-size:19px; }
  .competitions p  { font-size:15px; line-height:1.6; }
}
@media (max-width:520px) {
  .cmp-gallery { grid-template-columns:minmax(0,1fr); }
}

/* Competitions 2.0 — inline editor (slice 1) */
.cmp-edittools { display:flex; align-items:center; gap:12px; flex:none; }
.cmp-btn-sm { height:40px; padding:0 20px; font-size:15px; }
.cmp-ed-input, .cmp-ed-textarea, .cmp-ed-select { font-family:'Outfit',system-ui,sans-serif; border:1.5px dashed #9FB6DB; border-radius:10px; padding:8px 12px; background:#fff; color:#00337A; outline:none; box-sizing:border-box; }
.cmp-ed-input:focus, .cmp-ed-textarea:focus, .cmp-ed-select:focus { border-color:#00337A; border-style:solid; }
.cmp-ed-title { width:100%; font-family:'Nunito',system-ui,sans-serif; font-weight:900; font-size:clamp(28px,4vw,40px); color:#00337A; }
.cmp-ed-textarea { width:100%; resize:vertical; font-size:17px; line-height:1.6; color:#3A414B; }
/* The read-view heading/lead keep max-width:14ch/46ch for nice typographic line
   length — but while editing, the input/textarea sit inside those same elements
   and inherit the cap, making the two edit boxes different widths (14ch narrower
   than 46ch). Drop the cap only while an edit field is actually present inside. */
.cmp-dh1:has(.cmp-ed-title), .cmp-dlead:has(.cmp-ed-textarea) { max-width:none; }
.cmp-ed-overview { min-height:180px; font-size:17px; line-height:1.7; border-radius:14px; }
.cmp-ed-select { min-width:80px; cursor:pointer; }
.cmp-ed-grades { display:inline-flex; align-items:center; gap:10px; }
/* "At a glance" edit controls — pills per design (solid pickers, dashed prize). */
.cmp-glance__row .cmp-ed-select,
.cmp-glance__row input[type="date"].cmp-ed-input { height:34px; box-sizing:border-box; min-width:0; padding:0 14px; border:1px solid #D3E1F4; border-radius:999px; background:#fff; color:#00337A; font-family:'Outfit',system-ui,sans-serif; font-size:15px; cursor:pointer; }
.cmp-glance__row .cmp-ed-select:focus,
.cmp-glance__row input[type="date"].cmp-ed-input:focus { border-color:#00337A; border-style:solid; }
.cmp-glance__row input[type="text"].cmp-ed-input { height:34px; box-sizing:border-box; max-width:220px; padding:0 16px; border:1px dashed #9FB6DB; border-radius:999px; background:#fff; color:#00337A; font-family:'Outfit',system-ui,sans-serif; font-size:15px; text-align:right; }
.cmp-glance__row input[type="text"].cmp-ed-input:focus { border-color:#00337A; }
/* Regions multi-select — full-width checklist below the label while editing. */
.cmp-glance__row.is-editing-regions { flex-direction:column; align-items:stretch; gap:10px; }
.cmp-glance__row.is-editing-regions b { width:100%; }
.cmp-region-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 16px; max-height:260px; overflow:auto; padding:12px 14px; border:1px solid #D3E1F4; border-radius:14px; background:#F8FBFF; }
.cmp-region-opt { display:flex; align-items:center; gap:8px; font-family:'Outfit',system-ui,sans-serif; font-weight:400; font-size:14px; color:#00337A; cursor:pointer; }
.cmp-region-opt input { width:16px; height:16px; margin:0; accent-color:#00337A; cursor:pointer; flex:none; }
.cmp-region-opt--all { grid-column:1/-1; font-weight:600; padding-bottom:10px; margin-bottom:2px; border-bottom:1px solid #D3E1F4; }
.cmp-editing .cmp-dtags { gap:8px; }
/* Hero edit — date pills + gold-dot hints (sphere picker = toggle-all, below). */
.cmp-ed-hdate { height:30px; box-sizing:border-box; padding:0 12px; border:1px solid #D3E1F4; border-radius:999px; background:#fff; color:#00337A; font-family:'Outfit',system-ui,sans-serif; font-size:13px; outline:none; cursor:pointer; }
.cmp-ed-hdate:focus { border-color:#00337A; }
.cmp-ed-hint { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#5C6675; }
.cmp-ed-hint__dot { flex:none; width:6px; height:6px; border-radius:50%; background:#FFC302; }
.cmp-dhero__dates .cmp-ed-hint { margin-left:16px; }
.cmp-sphere-opt { height:30px; padding:0 14px; border-radius:999px; border:1.5px solid #D3E1F4; background:#fff; color:#00337A; font-family:'Outfit',system-ui,sans-serif; font-size:13px; cursor:pointer; }
.cmp-sphere-opt.is-on { background:#00337A; border-color:#00337A; color:#fff; }

/* Competitions 2.0 — phases/awards editor (slice 2) */
/* Awards editor — grand inputs on the cobalt panel + award-name pill + add card. */
.cmp-ed-grandinv { width:100%; max-width:340px; box-sizing:border-box; height:48px; border:1px dashed rgba(255,255,255,.45); border-radius:12px; padding:0 14px; margin-bottom:16px; background:transparent; outline:none; font-family:'Nunito',system-ui,sans-serif; font-weight:800; font-size:28px; color:#fff; }
.cmp-ed-grandinv::placeholder { color:rgba(255,255,255,.5); }
.cmp-ed-grandinv:focus { border-color:#FFC302; }
.cmp-ed-granddesc { display:block; width:100%; max-width:340px; box-sizing:border-box; border:1px dashed rgba(255,255,255,.45); border-radius:12px; padding:12px 14px; margin-bottom:24px; background:transparent; outline:none; resize:vertical; font-family:'Outfit',system-ui,sans-serif; font-size:17px; line-height:1.65; color:#fff; }
.cmp-ed-granddesc::placeholder { color:rgba(255,255,255,.5); }
.cmp-ed-granddesc:focus { border-color:#FFC302; }
/* .cmp-grand__inv/__desc are unconstrained block elements, so the
   .inv-char-field wrapper stretches wider than the 340px-capped field
   inside it, pulling the corner badge away from the field's own edge. */
.inv-char-field:has(.cmp-ed-grandinv) { max-width:340px; margin-bottom:16px; }
.inv-char-field:has(.cmp-ed-grandinv) .cmp-ed-grandinv { margin-bottom:0; }
.inv-char-field:has(.cmp-ed-granddesc) { max-width:340px; margin-bottom:24px; }
.inv-char-field:has(.cmp-ed-granddesc) .cmp-ed-granddesc { margin-bottom:0; }
.cmp-award__nameedit { display:flex; flex-direction:column; gap:6px; min-height:46px; }
.cmp-award__namelabel { font-family:'Outfit',system-ui,sans-serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#9FB6DB; }
.cmp-ed-aname { width:100%; box-sizing:border-box; height:34px; border:1px dashed #9FB6DB; border-radius:999px; padding:0 14px; background:#fff; outline:none; font-family:'Outfit',system-ui,sans-serif; font-weight:500; font-size:14px; color:#00337A; }
.cmp-ed-aname:focus { border-color:#00337A; }
.cmp-award__remove { align-self:flex-start; margin-top:auto; }
.cmp-ed-award-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-height:180px; padding:22px; border:1px dashed #9FB6DB; border-radius:20px; background:#fff; cursor:pointer; font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#00337A; }
.cmp-ed-award-add:hover { background:#F4F8FD; }
.cmp-ed-award-add__plus { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px dashed #9FB6DB; font-size:20px; line-height:1; color:#00337A; }
.cmp-ed-row { display:flex; gap:8px; }
.cmp-ed-row .cmp-ed-input { flex:1; min-width:0; }
/* Phases editor — exact values from the design prototype (Competitions 2.0.dc.html).
   Card matches the read view (white / cobalt-when-current); each field is a pill. */
.cmp-ed-phases { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:24px; align-items:start; margin-bottom:0; }
.cmp-ed-phase { display:block; padding:28px 26px 26px; border:1px solid #D3E1F4; border-radius:20px; background:#fff; }
.cmp-ed-phase.cmp-phase--now { background:#00337A; border-color:transparent; }
.cmp-ed-dates { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.cmp-ed-date { width:100%; box-sizing:border-box; height:32px; border:1px solid #D3E1F4; border-radius:999px; padding:0 14px; background:#fff; outline:none; font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#00337A; cursor:pointer; }
.cmp-ed-date:focus { border-color:#00337A; }
.cmp-ed-ptitle { width:100%; box-sizing:border-box; height:34px; border:1px dashed #9FB6DB; border-radius:999px; padding:0 14px; margin-bottom:10px; background:#fff; outline:none; font-family:'Outfit',system-ui,sans-serif; font-weight:500; font-size:15px; color:#00337A; }
.cmp-ed-ptitle:focus { border-color:#00337A; }
.cmp-ed-pbody { width:100%; box-sizing:border-box; border:1px dashed #9FB6DB; border-radius:14px; padding:10px 14px; background:#fff; outline:none; resize:vertical; font-family:'Outfit',system-ui,sans-serif; font-size:14px; line-height:1.5; color:#3A414B; }
.cmp-ed-pbody:focus { border-color:#00337A; }
/* Remove phase — white pill, red text, thin salmon border (same on the cobalt card). */
.cmp-ed-pcheck { display:flex; align-items:center; gap:8px; margin-top:14px; cursor:pointer; font-family:'Outfit',system-ui,sans-serif; font-size:14px; color:#3A414B; user-select:none; }
.cmp-ed-pcheck input { width:16px; height:16px; accent-color:#00337A; cursor:pointer; flex:none; }
/* On the active (navy) phase card the dark label is unreadable — flip it white.
   Scoped to .cmp-phase--now only, so it stays dark on the white cards. */
.cmp-ed-phase.cmp-phase--now .cmp-ed-pcheck { color:#fff; }
.cmp-ed-premove { margin-top:14px; height:30px; padding:0 14px; border-radius:999px; border:1px solid #F3D2CE; background:#fff; cursor:pointer; font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#C0392B; }
.cmp-ed-premove:hover { background:#FDF1EF; }
/* Add phase — dashed card filling the next grid slot, plus in a dashed circle. */
.cmp-ed-phase-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-height:200px; padding:22px; border:1px dashed #9FB6DB; border-radius:20px; background:#fff; cursor:pointer; font-family:'Outfit',system-ui,sans-serif; font-size:15px; color:#00337A; }
.cmp-ed-phase-add:hover { background:#F4F8FD; }
.cmp-ed-phase-add__plus { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px dashed #9FB6DB; font-size:20px; line-height:1; color:#00337A; }
.cmp-linkbtn { align-self:flex-start; border:0; background:none; padding:4px 0; font-family:'Outfit',system-ui,sans-serif; font-size:14px; cursor:pointer; color:#00337A; white-space:nowrap; }
.cmp-linkbtn.cmp-danger { color:#C0392B; }


/* Competitions 2.0 — split editors (top hero-edit + per-tab edit) */
.cmp-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cmp-photo-replace { position:absolute; z-index:4; right:20px; bottom:20px; display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:999px; border:0; background:#fff; color:#00337A; font-family:'Outfit',system-ui,sans-serif; font-weight:500; font-size:14px; cursor:pointer; box-shadow:0 6px 20px rgba(0,51,122,.18); }
.cmp-photo-replace:hover { background:#E9F0FA; }

/* Competitions 2.0 — hero photo edit (dropzone / replace pill) + editor focus */
.cmp-photo-drop { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border:1.5px dashed #9FB6DB; border-radius:24px 24px 24px 140px; background:transparent; cursor:pointer; font-family:'Outfit',system-ui,sans-serif; font-size:13px; color:#5C6675; }
.cmp-photo-drop:hover { border-color:#00337A; }
.cmp-photo-drop__plus { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1.5px dashed #9FB6DB; background:#fff; font-size:20px; line-height:1; color:#00337A; }
/* Grand-prize photo box is navy — lighten the placeholder text and drop the
   D-arch corner so the dashed drop reads on the dark cell. */
.cmp-grand__photo .cmp-photo-drop { color:#9FB6DB; border-radius:0; }
.cmp-photo-replace { gap:8px; }
/* The prominent edit toggles change colour on state; drop the site gold focus ring here. */
#cmp-hero-edit:focus:not(:focus-visible), #cmp-tab-edit:focus:not(:focus-visible) { outline:none; }
#cmp-hero-edit:focus-visible, #cmp-tab-edit:focus-visible { outline:2px solid rgba(0,51,122,.4); outline-offset:2px; }
/* The photo controls sit on the image; the site gold focus ring looks like a stray box — drop it. */
.cmp-photo-ctl:focus, .cmp-photo-ctl:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(0,51,122,.25); }
.cmp-photo-drop:focus, .cmp-photo-drop:focus-visible { box-shadow:none; border-color:#00337A; }

/* Photo crop modal */
.cmp-crop { position:fixed; inset:0; z-index:1300; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,20,50,.55); }
.cmp-crop[hidden] { display:none; }
.cmp-crop__card { background:#fff; border-radius:24px; padding:32px; max-width:520px; width:100%; box-shadow:0 24px 60px rgba(0,20,50,.35); }
.cmp-crop__h { font-family:'Outfit',system-ui,sans-serif; font-weight:700; font-size:22px; color:#00337A; margin:0 0 18px; }
.cmp-crop__window { position:relative; overflow:hidden; background:#E9F0FA; border-radius:16px; cursor:grab; width:100%; touch-action:none; }
.cmp-crop__window:active { cursor:grabbing; }
.cmp-crop__window img { position:absolute; left:50%; top:50%; transform-origin:center center; will-change:transform; max-width:none; user-select:none; -webkit-user-drag:none; }
.cmp-crop__zoom { display:block; width:100%; margin:20px 0; accent-color:#00337A; }
.cmp-crop__btns { display:flex; justify-content:flex-end; gap:12px; }

/* ============================================================
   Inventions archive 2.0  (iv-*)  — re-skin of /inventors/
   Self-contained. Does NOT touch the shared .inv-card* layer,
   which is still used by the homepage featured-inventors grid.
   Live client-side filtering; JS in archive-inventor.php.
   ============================================================ */
.iv-page { background: #fff; }
.iv-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- hero --- */
.iv-hero-sec { background: #fff; padding: 120px 0 0; overflow: hidden; }
.iv-hero__eyebrow { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.iv-hero__h1 { font-family: var(--font-display); font-weight: 900; font-size: 72px; line-height: 1.05; letter-spacing: -.02em; color: var(--blue); max-width: 16ch; margin: 0; }
.iv-hero__dot { color: var(--yellow); }
.iv-hero__sub { margin: 24px 0 0; max-width: 46ch; font-family: var(--font-sans); font-size: 20px; line-height: 1.6; color: var(--text); }

/* --- filters --- */
.iv-body { padding: 40px 0 96px; }  /* tighter top under the hero lead; full bottom before the footer */
.iv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.iv-search { position: relative; flex: 1 1 280px; min-width: 240px; }
.iv-search input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 18px; border: 1px solid #D3E1F4; border-radius: 8px; background: #E9F0FA; font-family: var(--font-sans); font-size: 17px; color: var(--text); outline: none; transition: background .15s, border-color .15s; }
.iv-search input:focus { background: #fff; border: 2px solid var(--blue); }

/* custom dropdown */
.iv-select { position: relative; display: inline-flex; }
.iv-select__trigger { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px; border: 1px solid #D3E1F4; border-radius: 8px; background: #fff; cursor: pointer; white-space: nowrap; font-family: var(--font-sans); font-weight: 500; font-size: 17px; color: var(--blue); transition: border-color .15s; }
.iv-select__trigger:hover { border-color: #9FB6DB; }
.iv-select.is-open .iv-select__trigger { border-color: var(--blue); }
.iv-select__caret { flex: none; transition: transform .18s ease; }
.iv-select.is-open .iv-select__caret { transform: rotate(180deg); }
.iv-select__menu { position: absolute; left: 0; top: 56px; z-index: 20; display: flex; flex-direction: column; min-width: 100%; width: max-content; max-width: 300px; max-height: 320px; overflow-y: auto; padding: 8px; border: 1px solid #D3E1F4; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(0,51,122,.14); }
.iv-select__menu[hidden] { display: none; }
.iv-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; white-space: nowrap; font-family: var(--font-sans); font-size: 15px; color: var(--blue); }
.iv-opt:hover { background: #E9F0FA; }
.iv-opt.is-selected { font-weight: 600; }
.iv-opt__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.iv-opt.is-selected .iv-opt__dot { background: var(--yellow); }

/* chips */
.iv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; min-height: 34px; }
.iv-chips:empty { display: none; }  /* no active filters → collapse (min-height/margin left a ~54px dead band) */
.iv-chip2 { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--blue); color: #fff; cursor: pointer; font-family: var(--font-sans); font-weight: 500; font-size: 14px; transition: background .15s; }
.iv-chip2:hover { background: #00265C; }
.iv-chip2 > span { font-size: 16px; line-height: 1; opacity: .8; }
.iv-clearall { border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--font-sans); font-weight: 500; font-size: 15px; color: var(--blue); text-decoration: underline; }
.iv-clearall[hidden] { display: none; }

/* count + empty */
.iv-count2 { margin: 32px 0 28px; font-family: var(--font-sans); font-size: 15px; color: #5C6675; }
/* .iv-empty2 (pre-redesign empty state) fully superseded by the EMPTY STATE 2.0
   layer at the end of this file. Removed because the old `.iv-empty2 p`
   descendant rule (0,1,1) out-specifies the new `.iv-empty2__lead/__note`
   class rules (0,1,0) and was silently zeroing their margins. */
.iv-empty2[hidden] { display: none; }

/* --- cards grid --- */
.iv-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.iv-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #D3E1F4; border-radius: 24px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.iv-card:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: 0 10px 30px rgba(0,51,122,.10); }
.iv-card[hidden] { display: none; }
.iv-card__media { position: relative; aspect-ratio: 16/10; background: #E9F0FA; border-radius: 23px 23px 0 96px; overflow: hidden; background-size: cover; background-position: center; }
.iv-card__award { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid #D3E1F4; font-family: var(--font-sans); font-weight: 500; font-size: 13px; color: var(--blue); }
.iv-card__accent { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); }
.iv-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; }
.iv-card__title { margin: 0 0 18px; min-height: 2.6em; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.3; letter-spacing: -.008em; color: var(--blue); text-wrap: pretty; }
.iv-card__person { display: flex; align-items: center; gap: 12px; }
.iv-card__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #E9F0FA; border: 2px solid var(--blue); background-size: cover; background-position: center; }
.iv-card__pname { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.35; letter-spacing: -.008em; color: var(--blue); }
.iv-card__pmeta { display: block; font-family: var(--font-sans); font-size: 13px; color: #5C6675; }
.iv-card__tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; height: 28px; margin: 18px 0 14px; padding: 0 12px; border-radius: 999px; background: #E9F0FA; font-family: var(--font-sans); font-size: 13px; color: var(--blue); }
.iv-card__tag-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.iv-card__desc { margin: 0 0 22px; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--text); }
.iv-card__link { margin-top: auto; align-self: flex-start; font-family: var(--font-sans); font-weight: 500; font-size: 15px; color: var(--blue); text-decoration: none; }
.iv-card__link:hover { color: #00265C; }
/* Whole-card click: the "View invention" anchor is stretched over the entire
   card (there are no other links inside, so no nested-anchor conflict). */
.iv-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* --- cta --- */
.iv-cta-sec { padding-bottom: 96px; }
.iv-cta2 { background: var(--blue); border-radius: 32px; padding: 96px 60px; text-align: center; }
.iv-cta2 h2 { margin: 0 0 20px; font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1.08; letter-spacing: -.016em; color: #fff; }
.iv-cta2 p { margin: 0 auto 40px; max-width: 52ch; font-family: var(--font-sans); font-size: 20px; line-height: 1.6; color: #9FB6DB; }
.iv-cta2__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.iv-cta2__btn { display: inline-flex; align-items: center; height: 52px; padding: 0 28px; border-radius: 999px; text-decoration: none; font-family: var(--font-sans); font-weight: 500; font-size: 17px; transition: background .15s; }
.iv-cta2__btn--gold { background: var(--yellow); color: var(--blue); }
.iv-cta2__btn--gold:hover { background: #E5AE00; }
.iv-cta2__btn--ghost { border: 1.5px solid #fff; color: #fff; }
.iv-cta2__btn--ghost:hover { background: rgba(255,255,255,.12); }

/* --- responsive --- */
@media (max-width: 1024px) {
  .iv-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .iv-hero__h1 { font-size: 56px; }
}
@media (max-width: 768px) {
  .iv-hero-sec { padding-top: 120px; }
  .iv-hero__h1 { font-size: 42px; }
  .iv-body { padding: 28px 0 64px; }
  .iv-grid { grid-template-columns: minmax(0,1fr); }
  .iv-filters { flex-direction: column; align-items: stretch; }
  /* In a column, flex-basis maps to height — reset so the search box (flex:1 1 280px)
     doesn't stretch to 280px tall and leave a gap above the dropdowns. */
  .iv-filters > * { width: 100%; flex: 0 0 auto; }
  .iv-select { display: flex; }
  .iv-select__trigger { width: 100%; justify-content: space-between; }
  .iv-cta2 { padding: 44px 24px; }
  .iv-cta2 h2 { font-size: 32px; }
}
@media (max-width: 480px) {
  .iv-hero__h1 { font-size: 34px; }
}

/* cache-bust 20260814-1357: force CDN to re-fetch the full file (a truncated copy got edge-cached during a prior SFTP deploy) */


/* ═════════════════════════════════════════════════════════════════
   "IN THE NEWS" BAND — brand accents (design_handoff_news_accents).
   Element-level polish only, scoped to the homepage band (.news …) so
   the /news page cards are untouched. Structure/copy/grid unchanged.
   ═════════════════════════════════════════════════════════════════ */

/* 1. Hairline so the white cards read as objects on the sky ground. */
.news .pa-card {
  border: 1px solid var(--border-subtle, #D3E1F4);
}

/* 2. Source (outlet) line in cobalt at caption size with eyebrow tracking.
      opacity:1 overrides the base .pa-card__source's .55 so the cobalt is
      crisp (the base rule dims it; the handoff assumed full strength). */
.news .pa-card__source {
  color: var(--ukric-cobalt, #00337A);
  font-size: 13px;
  letter-spacing: .04em;
  opacity: 1;
}

/* 3. One gold dot over the FIRST card's photo (upper-right), clipped by the
      media's arc mask. First card only — one gold element per composition. */
.news .pa-card:first-child .pa-card__media::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFC302;
}

/* 4. Trim the headline height reserve (99px → 82px) so "Read more →" links
      still align across the row without the dead band under short headlines. */
.news .pa-card__title {
  min-height: 82px;
}

@media (max-width: 768px) {
  /* Cards stack: no cross-card alignment left to reserve for. */
  .news .pa-card__title { min-height: 0; }
}

/* 5. "Read more →" is a light cobalt link here, not a heavy full-width navy
      pill. The design reference renders it as .pa-card__read; three solid
      primaries in one band compete for the eye (and with the gold dot). Scoped
      to .news, so the /news page keeps its own button treatment. */
.news .pa-card .pa-btn--read {
  flex: 0 0 auto;
  align-self: flex-start;
  background: none;
  color: var(--blue);
  font-weight: 600;
  font-size: 15px;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.news .pa-card .pa-btn--read:hover {
  background: none;
  color: var(--navy);
  transform: none;
}

/* ============================================================
   INVENTIONS ARCHIVE — EMPTY STATE 2.0
   Scope: .iv-empty2 inside #iv-archive (archive-inventor.php)
   Lands after the existing iv-* 2.0 layer (~line 7140) so the
   dashed border + 32px heading are overridden, not merged.
   ============================================================ */

.iv-empty2 {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  border: 0;                                    /* was: 1px dashed #D3E1F4 */
  background: var(--sky-tint, #E9F0FA);
  border-radius: 24px 24px 24px 120px;          /* the arc bite, bottom-left */
  padding: 72px 56px 76px;
}
.iv-empty2[hidden] { display: none; }

/* Watermark arc — the incomplete circle from the U. Decorative. */
.iv-empty2__arc {
  position: absolute;
  right: -46px;
  bottom: -64px;
  width: 260px;
  height: 260px;
  pointer-events: none;
}

/* Everything above the watermark. */
.iv-empty2 > *:not(.iv-empty2__arc) { position: relative; z-index: 1; }

.iv-empty2__dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ukric-gold, #FFC302);
  margin: 0 0 24px;
}

.iv-empty2 h2 {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display, 'Nunito', system-ui, sans-serif);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--ukric-cobalt, #00337A);
  text-wrap: pretty;
}

.iv-empty2__lead {
  margin: 16px 0 0;
  max-width: 34ch;
  font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-body, #3A414B);
}

.iv-empty2__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

/* Gold CTA — matches the design reference (owner's call to keep it gold even
   though the closing "Apply now" band is also gold on a short empty page). */
.iv-empty2__cta {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--ukric-gold, #FFC302);
  color: var(--ukric-cobalt, #00337A);
  text-decoration: none;
  font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
  font-weight: 500;
  font-size: 17px;
  transition: background .14s ease, transform .14s ease;
}
.iv-empty2__cta:hover,
.iv-empty2__cta:focus-visible { background: #EDB600; color: var(--ukric-cobalt, #00337A); }
.iv-empty2__cta:active { transform: scale(.97); }
.iv-empty2__cta:focus-visible { outline: 3px solid var(--ukric-cobalt, #00337A); outline-offset: 3px; }

.iv-empty2__clear {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
  font-weight: 500;
  font-size: 17px;
  color: var(--ukric-cobalt, #00337A);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.iv-empty2__clear:hover { color: #001E4A; }

.iv-empty2__note {
  margin: 40px 0 0;
  max-width: 40ch;
  font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted, #5C6675);
}

@media (max-width: 760px) {
  .iv-empty2 { padding: 48px 24px 52px; border-radius: 24px 24px 24px 72px; }
  .iv-empty2 h2 { font-size: 30px; }
  .iv-empty2__lead { font-size: 17px; }
  .iv-empty2__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .iv-empty2__cta { justify-content: center; }
  .iv-empty2__arc { right: -70px; bottom: -80px; width: 200px; height: 200px; }
}

/* ============================================================
   404 — PAGE NOT FOUND (nf-* layer)
   Scope: .nf-page in 404.php
   The mark is 4 + the logo's open arc + the gold dot that has not landed.
   The dot is the ONLY gold on the page — the primary action is cobalt and
   the headline carries no golden full stop, because the dot IS the golden
   full stop here. Adding either back breaks the idea.
   Handoff used --ukric-cobalt/--ukric-gold/--text-body, which this theme
   does not define; mapped onto the real tokens (--blue/--yellow/--text),
   same hex values, so a palette change propagates here too.
   ============================================================ */

.nf-page { background: #fff; padding-top: 72px; }   /* 72px = fixed .site-header */

/* The hero is the whole page: header above, footer below, nothing else. */
.nf-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 120px 64px 140px;
  /* Reserve real chrome: 72px header + 372px footer, measured live at 1440px.
     The handoff's 320px assumed a ~200px footer; ours is taller, and the
     difference scrolled the page for no reason. Update if the footer changes. */
  min-height: calc(100vh - 444px);
  align-content: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

/* ---- The mark: 4 + open arc + 4, with the gold dot not yet landed ---- */

.nf-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
}
.nf-glyph {
  font-family: var(--font-display, 'Nunito', system-ui, sans-serif);
  font-weight: 900;
  font-size: 200px;
  line-height: .82;
  letter-spacing: -.03em;
  color: var(--blue, #00337A);
}
.nf-arcwrap { position: relative; display: inline-flex; align-items: center; }
.nf-arc { display: block; width: 168px; height: 168px; }
.nf-dot {
  position: absolute;
  right: -4px;
  top: 2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--yellow, #FFC302);
  animation: ukric-dot-drift 3.6s ease-in-out infinite;
}
@keyframes ukric-dot-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .nf-dot { animation: none; }
}

/* ---- Copy ---- */

.nf-h1 {
  position: relative;
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display, 'Nunito', system-ui, sans-serif);
  font-weight: 800;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -.016em;
  color: var(--blue, #00337A);
  text-wrap: pretty;
}
.nf-lead {
  position: relative;
  margin: 24px 0 0;
  max-width: 46ch;
  font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
  font-size: 20px;
  line-height: 1.6;
  color: var(--text, #3A414B);
}

/* ---- Actions ---- */

.nf-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}
.nf-btn {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--blue, #00337A);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
  font-weight: 500;
  font-size: 17px;
  transition: background .14s ease, transform .14s ease;
}
.nf-btn:hover, .nf-btn:focus-visible { background: #00265C; color: #fff; }
.nf-btn:active { transform: scale(.97); }
.nf-btn:focus-visible { outline: 3px solid var(--yellow, #FFC302); outline-offset: 3px; }

.nf-link {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 26px;
  color: var(--blue, #00337A);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
  font-weight: 500;
  font-size: 17px;
}
.nf-link:hover { color: var(--navy, #001E4A); }
.nf-link:focus-visible { outline: 3px solid var(--yellow, #FFC302); outline-offset: 3px; border-radius: 999px; }

/* ---- Responsive ---- */

@media (max-width: 900px) {
  .nf-hero  { padding: 96px 32px 104px; min-height: 0; }
  .nf-glyph { font-size: 132px; }
  .nf-arc   { width: 110px; height: 110px; }
  .nf-dot   { width: 24px; height: 24px; }
  .nf-h1    { font-size: 38px; }
}
@media (max-width: 620px) {
  .nf-hero  { padding: 72px 20px 80px; }
  .nf-glyph { font-size: 104px; }
  .nf-arc   { width: 88px; height: 88px; }
  .nf-h1    { font-size: 32px; }
  .nf-lead  { font-size: 17px; }
  .nf-actions { flex-direction: column; align-items: stretch; }
  .nf-actions > * { justify-content: center; }
}

/* ============================================================
   INVENTIONS ARCHIVE — PAGINATION (iv-pager)   [buttons only]
   ============================================================ */

.iv-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 56px;
}

/* Shared box: 44px minimum hit target, 12px radius.
   Never a pill — pills are actions; these are navigation. */
.iv-pager__nav,
.iv-pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 1px solid var(--border-subtle, #D3E1F4);
  border-radius: 12px;
  background: #fff;
  color: var(--ukric-cobalt, #00337A);
  cursor: pointer;
  font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
  font-weight: 500;
  font-size: 15px;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.iv-pager__nav  { width: 44px; }
.iv-pager__page { min-width: 44px; padding: 0 12px; }

.iv-pager__nav:hover,
.iv-pager__page:hover { border-color: #9FB6DB; }

.iv-pager__nav:focus-visible,
.iv-pager__page:focus-visible {
  outline: 3px solid var(--ukric-gold, #FFC302);
  outline-offset: 2px;
}

/* Current page — cobalt fill, not gold (the archive spends its one gold CTA on
   the closing banner). */
.iv-pager__page.is-current {
  background: var(--ukric-cobalt, #00337A);
  border-color: var(--ukric-cobalt, #00337A);
  color: #fff;
  cursor: default;
}
.iv-pager__page.is-current:hover { border-color: var(--ukric-cobalt, #00337A); }

/* Disabled arrows stay in place rather than disappearing, so the row does not
   reflow when the reader reaches the first or last page. */
.iv-pager__nav[disabled] {
  color: var(--slate-300, #8A97B0);
  opacity: .55;
  cursor: default;
}
.iv-pager__nav[disabled]:hover { border-color: var(--border-subtle, #D3E1F4); }

.iv-pager__nav svg { display: block; }

/* Ellipsis — text, not a button. */
.iv-pager__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 44px;
  font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
  font-size: 15px;
  color: var(--slate-300, #8A97B0);
}

@media (max-width: 760px) {
  .iv-pager { gap: 6px; margin-top: 40px; }
}