/* About page – clean typography (no card-grid) */

.yi-about-wrap{
  max-width: var(--yi-width);
  margin: 0 auto;
  padding: 1.1rem 0 2.25rem;
}

/* Re-usable dot (in case other CSS doesn't include it) */
.status-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,.18);
}

.yi-about-hero{
  border-radius: var(--yi-radius);
  border: 1px solid var(--yi-border-soft);
  background: radial-gradient(circle at top left, rgba(249,115,22,0.14) 0, transparent 45%), var(--yi-bg-soft);
  padding: 1.1rem 1.15rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

.yi-about-eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.92rem;
  color: var(--yi-text-soft);
  margin-bottom: 0.25rem;
}

.yi-about-title{
  margin: 0 0 0.55rem 0;
  font-size: 1.9rem;
  line-height: 1.1;
}

.yi-about-lede{
  margin: 0 0 0.85rem 0;
  color: var(--yi-text-soft);
  font-size: 1.12rem;
  line-height: 1.55;
  max-width: 70ch;
}

.yi-about-meta{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--yi-text-soft);
  margin-bottom: 0.9rem;
  font-size: 1.05rem;
}

.yi-about-meta-label{
  text-transform: lowercase;
}

.yi-about-meta-date{
  font-weight: 600;
  color: var(--yi-text-main);
}

.yi-about-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.yi-about-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--yi-border-soft);
  background: transparent;
  color: var(--yi-text-main);
  text-decoration: none;
  font-weight: 550;
  font-size: 1.02rem;
}

.yi-about-btn:hover{
  border-color: rgba(148, 163, 184, 0.55);
}

.yi-about-btn-fill{
  background: var(--yi-accent);
  border-color: var(--yi-accent);
  color: #0b1221;
}

.yi-about-btn-fill:hover{
  filter: brightness(1.02);
}

.yi-about-section{
  margin-top: 1.1rem;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(148,163,184,0.18);
}

.yi-about-section h2{
  margin: 0 0 0.55rem 0;
  font-size: 1.35rem;
}

.yi-about-section p{
  margin: 0 0 0.8rem 0;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--yi-text-main);
  max-width: 78ch;
}

.yi-about-muted{
  color: var(--yi-text-soft);
}

.yi-about-small{
  color: var(--yi-text-soft);
}

.yi-about-bullets{
  margin: 0.25rem 0 0 0;
  padding-left: 1.2rem;
  max-width: 80ch;
}

.yi-about-bullets li{
  margin: 0.35rem 0;
  color: var(--yi-text-soft);
  line-height: 1.55;
}

.yi-about-links{
  margin-top: 0.2rem;
}

.yi-about-link{
  color: var(--yi-accent);
  text-decoration: none;
  font-weight: 650;
}

.yi-about-link:hover{
  text-decoration: underline;
}

.yi-about-limits{
  margin: 0.35rem 0 0 0;
  padding-left: 1.1rem;
  max-width: 92ch;
}

.yi-about-limits li{
  margin: 0.55rem 0;
  line-height: 1.6;
  color: var(--yi-text-soft);
}

.yi-about-limits strong{
  color: var(--yi-text-main);
}

/* Responsive */
@media (max-width: 720px){
  .yi-about-title{ font-size: 1.55rem; }
  .yi-about-hero{ padding: 0.95rem; }
}

/* --- Nav dropdown fix: remove hover "gap" + allow click/focus to hold open --- */
#mainav li ul{
  margin: 0; /* overrides any submenu margin that creates a hover gap */
}

#mainav li:hover > ul,
#mainav li:focus-within > ul{
  display: block;
}