/* PkOUG — Additional page components (About / SIG) */
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}
.cta-banner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  padding: 18px;
}
.cta-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
@media (max-width: 900px){
  .cta-banner{ flex-direction: column; }
  .cta-actions{ justify-content:flex-start; }
}

.sig-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .sig-grid{ grid-template-columns: 1fr; }
}

.sig-card .kicker{
  font-size: 12px;
  opacity: .75;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.sig-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;
}
.sig-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}
.sig-filters{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 12px 0 18px;
}
.sig-filters .chip{
  cursor:pointer;
  user-select:none;
}
.sig-filters .chip[aria-pressed="true"]{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(199,70,52,.12);
}
.note{
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(199,70,52,.06), rgba(199,70,52,.02));
}
.template{
  width: 100%;
  min-height: 210px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}



/* ===== SIG / pages light-mode typography fix =====
   Ensures headings and body text remain high-contrast in light theme. */
html[data-theme="light"] .page,
html[data-theme="light"] .page *{
  color: #0B1220;
}
html:not([data-theme="dark"]) body:not(.theme-dark) .page,
html:not([data-theme="dark"]) body:not(.theme-dark) .page *{
  color: #0B1220;
}
html[data-theme="light"] .page .kicker,
html:not([data-theme="dark"]) body:not(.theme-dark) .page .kicker{
  color: rgba(11,18,32,0.68);
}
html[data-theme="light"] .page .help,
html:not([data-theme="dark"]) body:not(.theme-dark) .page .help{
  color: rgba(11,18,32,0.62);
}
html[data-theme="light"] .page .card,
html:not([data-theme="dark"]) body:not(.theme-dark) .page .card{
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(65,105,225,0.16);
}


/* ===== SIG / pages dark-mode typography fix =====
   Ensures text is readable in dark theme even if a light-mode override exists elsewhere. */
html[data-theme="dark"] .page{
  color: var(--text);
}
html[data-theme="dark"] .page .kicker{
  color: rgba(255,255,255,0.72);
}
html[data-theme="dark"] .page .help{
  color: rgba(255,255,255,0.64);
}
html[data-theme="dark"] .page .card{
  background: rgba(10, 14, 26, 0.58);
  border: 1px solid rgba(255,255,255,0.12);
}





/* ===== Premium sweep on content page headers (Dark Mode) =====
   Applied to About / Vision / Board / SIG pages that use .page + header.hero or header.section. */
html[data-theme="dark"] .page header.hero,
html[data-theme="dark"] .page header.section{
  position: relative;
  overflow: clip;
}
html[data-theme="dark"] .page header.hero::after,
html[data-theme="dark"] .page header.section::after{
  content:"";
  position:absolute;
  inset:-40px -120px;
  pointer-events:none;
  z-index:-1;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(0,255,255,0.10) 30%,
    rgba(65,105,225,0.14) 46%,
    rgba(0,255,255,0.08) 58%,
    transparent 74%);
  animation: pkougHeroSweep 12s cubic-bezier(.2,.8,.2,1) infinite;
  opacity: 0.55;
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="dark"] .page header.hero::after,
  html[data-theme="dark"] .page header.section::after{ animation:none; opacity:0.22; }
}