/* =========================================================================
   TOKENS
   ------------------------------------------------------------------------- */
:root{
  /* Base (Chalk & Slate) */
  --bg:#F8FAFC; --text:#0F172A; --muted:#64748B;
  --brand1:#334155; --brand2:#0F172A; --nav:#1F2937;
  --card:#FFFFFF; --ring:rgba(15,23,42,.08); --head:#334155;

  /* Neutral callouts */
  --callout-bg:#F8FAFC;
  --callout-bar:#94A3B8;

  /* Accent palette (optional) */
  --mint-50:#ECFDF5; --mint-300:#A7F3D0; --mint-500:#10B981; --mint-600:#059669;
  --coral-50:#FFF1F2; --coral-500:#FB7185; --coral-600:#F43F5E;
  --canary-50:#FEFCE8; --canary-500:#FDE047; --canary-600:#F59E0B;
  --teal-500:#0EA5A4; --sky:#60A5FA;

  /* Default accent (buttons/forms) */
  --accent:#10B981; --accent-ink:#0F766E;
  --accent-weak:rgba(16,185,129,.10);
  --accent-line:rgba(16,185,129,.22);
}

/* Optional section accents */
.accent--mint   { --accent:#10B981; --accent-ink:#0F766E; --accent-weak:rgba(16,185,129,.10); --accent-line:rgba(16,185,129,.22) }
.accent--coral  { --accent:#FB7185; --accent-ink:#F43F5E; --accent-weak:rgba(244,63,94,.10); --accent-line:rgba(244,63,94,.22) }
.accent--canary { --accent:#FDE047; --accent-ink:#CA8A04; --accent-weak:rgba(253,224,71,.12); --accent-line:rgba(234,179,8,.28) }

/* =========================================================================
   RESET & LAYOUT
   ------------------------------------------------------------------------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
}
.container{ max-width:1100px; margin:0 auto; padding:0 20px }

/* =========================================================================
   HERO & NAV
   ------------------------------------------------------------------------- */
.hero{ background:linear-gradient(180deg,var(--brand1) 0%,var(--brand2) 100%); padding-top:56px; color:#fff }
.hero__inner{ padding-bottom:36px }
.hero__title{
  margin:0 0 8px; font-size:clamp(28px,5vw,44px); font-weight:700; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.hero__subtext{ margin:0; max-width:900px; color:rgba(255,255,255,.92) }

.nav{ background:var(--nav); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(0,0,0,.08) }
.nav__inner{ display:flex; gap:28px; align-items:center; overflow-x:auto }
.nav__link{
  display:inline-block; padding:14px 4px; color:#eaf2ff; text-decoration:none; font-weight:600; white-space:nowrap;
}
.nav__link:hover,.nav__link.is-active{ color:#fff; text-decoration:underline }

/* =========================================================================
   MAIN CONTENT
   ------------------------------------------------------------------------- */
.site-content{ padding:32px 0 56px }

/* Section Card */
.section-card{
  --card-bg:#fff; --card-border:#e5e7eb; --card-shadow:0 6px 20px rgba(2,6,23,.06);
  background:var(--card-bg);
  border:1px solid var(--card-border); border-radius:14px;
  padding:clamp(1rem,2vw,1.5rem) clamp(1rem,3vw,2rem);
  box-shadow:var(--card-shadow);
  margin:0 0 2rem;
}
.section-card:last-child{ margin-bottom:0 }
.section-card h2{
  margin:0 0 .25rem; font-size:clamp(1.3rem,2.4vw,1.75rem);
  line-height:1.2; letter-spacing:-.01em; color:var(--head);
}
.section-card p{ margin:0 0 14px }
.section-card ul{ margin:8px 0 0 22px }

/* Rails OFF everywhere */
.section-card::before{ content:none !important }

/* =========================================================================
   CALLOUT (neutral)
   ------------------------------------------------------------------------- */
.callout{
  display:block; background:var(--callout-bg); border-radius:10px; padding:16px 18px; margin:18px 0 0; position:relative;
}
.callout::before{
  content:""; position:absolute; inset:0 auto 0 0; width:12px; border-radius:10px 0 0 10px;
  background:var(--callout-bar); opacity:.9; box-shadow:inset -1px 0 0 rgba(255,255,255,.25);
}
.callout b{ font-weight:700 }

/* =========================================================================
   PEOPLE
   ------------------------------------------------------------------------- */
.people-grid{ display:grid; gap:1.25rem }
.advocate-card{
  display:grid; grid-template-columns:96px 1fr; gap:1.25rem; align-items:start;
  padding:1.25rem; border-radius:16px; background:#F1F5F9; border:1px solid #E2E8F0;
}
.advocate-photo{ width:96px; height:96px; border-radius:9999px; object-fit:cover; background:#cbd5e1 }
.advocate-name{ margin:0 0 .25rem; font-size:1.5rem; color:var(--head); font-weight:700 }
.advocate-body p{ line-height:1.6; margin:.25rem 0 .75rem }
@media (max-width:520px){
  .advocate-card{ grid-template-columns:1fr }
  .advocate-photo{ width:84px; height:84px }
}

/* =========================================================================
   MEDIA
   ------------------------------------------------------------------------- */
.media-frame{ margin:1rem 0; border-radius:16px; overflow:hidden; border:1px solid #e5e7eb; background:#f8fafc }
.media-frame img{ display:block; width:100%; height:auto }
.media-frame figcaption{ padding:.5rem .75rem; font-size:.9rem; color:#4b5563 }

/* =========================================================================
   TOOLBAR / RESOURCES / FORMS / MISC
   ------------------------------------------------------------------------- */
.toolbar{ display:flex; gap:.5rem; align-items:center; margin:.25rem 0 1rem; flex-wrap:wrap }
.toolbar input[type="search"], .toolbar select{ padding:.45rem .6rem; border:1px solid #d1d5db; border-radius:10px }
.toolbar input[type="search"]{ min-width:16rem }

.res-list{ list-style:none; margin:8px 0 0; padding:0 }
.res-item{
  padding:14px 12px; border:1px solid #e6e9f0; border-radius:10px; background:#fff;
  box-shadow:0 6px 18px rgba(16,24,40,.04); margin-bottom:10px;
}
.res-title{ font-weight:700; text-decoration:none; color:#2d5e86 }
.res-title:hover{ text-decoration:underline }
.res-meta{ color:#475467; margin-top:4px; font-size:14px }
.badge{
  margin-left:8px; font-size:11px; padding:2px 6px; border-radius:12px;
  background:#EEF2F7; color:#334155;
}
.chip{ display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:#F1F5F9; color:#334155 }
.muted{ color:#667085 }

.cards-grid{ display:grid; gap:1rem }
.card{ padding:1rem; border:1px solid #e5e7eb; border-radius:12px; background:#fff }
.card h3{ margin-bottom:.25rem }
.card .muted{ margin-bottom:.5rem }

.site-title-link{ color:inherit; text-decoration:none }
.site-title-link:hover{ text-decoration:underline; text-underline-offset:3px }

.site-footer{ color:var(--muted); font-size:14px; padding:28px 0 40px; text-align:center }

/* Pager */
.pager{ display:flex; gap:.75rem; align-items:center; justify-content:flex-end; margin:.75rem 0; flex-wrap:wrap }
.pager .btn{
  padding:.45rem .75rem; border-radius:.5rem; background:#fff;
  border:1px solid var(--accent-line);
  box-shadow:0 4px 10px var(--accent-weak);
}
.pager .btn[disabled]{ opacity:.5; cursor:not-allowed }
.pager label{ color:#374151; font-size:.95rem }
.pager .ml{ margin-left:.5rem }

/* Responsive video embeds */
.video-embed{
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
  border-radius:.75rem; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* =========================================================================
   PRINCIPLES WIDGETS (home links)
   ------------------------------------------------------------------------- */
.principles-layout{ display:grid; gap:1rem; align-items:start }
@media (min-width:900px){ .principles-layout{ grid-template-columns:minmax(0,3fr) minmax(0,2fr) } }

.principles-figure{ margin:0; padding:14px 0 10px; background:transparent; border:0; box-shadow:none }
.principles-figure img{
  display:block; width:100%; max-width:560px; height:auto; margin:0 auto;
  background:#fff; border:3px solid var(--mint-300); border-radius:12px; padding:12px;
  box-shadow:0 8px 22px rgba(16,185,129,.16);
}
.principles-figure figcaption{ margin-top:8px; color:#64748b; font-size:.95rem }

.principles-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px }
.principles-list > li{ margin:0; padding:0 }
.principle-link{
  display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; border-radius:14px;
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,var(--mint-500),var(--teal-500)) border-box;
  color:#0F172A; font-weight:700; letter-spacing:.2px; text-decoration:none;
  box-shadow:0 6px 16px rgba(37,99,235,.08);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.principle-link:hover,.principle-link:focus-visible{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(37,99,235,.14) }
.principles-list li .principle-link::before{
  content:""; display:inline-grid; place-items:center; width:2.25rem; aspect-ratio:1;
  border-radius:999px; color:#fff; font-size:1.05rem; font-weight:800; text-shadow:0 1px 1px rgba(0,0,0,.25);
}
.principles-list li:nth-child(1) .principle-link::before{ content:"C"; background:linear-gradient(135deg,var(--teal-500),var(--mint-500)) }
.principles-list li:nth-child(2) .principle-link::before{ content:"R"; background:linear-gradient(135deg,var(--coral-600),var(--coral-500)) }
.principles-list li:nth-child(3) .principle-link::before{ content:"A"; background:linear-gradient(135deg,var(--canary-600),var(--canary-500)) }
.principles-list li:nth-child(4) .principle-link::before{ content:"F"; background:linear-gradient(135deg,var(--mint-500),var(--teal-500)) }
.principles-list li:nth-child(5) .principle-link::before{ content:"T"; background:linear-gradient(135deg,#64748B,#334155) }

/* Content link underline (skip nav/CTAs) */
.section-card a[href]:not(.nav__link):not(.principle-link):not(.btn){
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:.08em;
  text-decoration-color: color-mix(in srgb, currentColor 70%, transparent);
}
.section-card a[href]:hover:not(.nav__link):not(.principle-link):not(.btn){ text-decoration-color: currentColor }

/* =========================================================================
   GLOSSARY (minimal — full behavior scripts live in base.html)
   ------------------------------------------------------------------------- */
.glossary-term{
  appearance:none; background:transparent; border:0; padding:0; font:inherit;
  color:var(--head); cursor:help; text-decoration:underline dotted; text-underline-offset:2px;
}
.glossary-term:focus-visible{ outline:2px solid #CBD5E1; outline-offset:2px; border-radius:4px }
.glossary-popover{
  position:fixed; z-index:1000; max-width:340px; background:#fff; color:var(--text);
  border:1px solid #E2E8F0; box-shadow:0 20px 50px var(--ring); border-radius:12px; padding:12px 14px;
}
.glossary-popover .g-title{ margin:0 0 4px; font-weight:700; color:#0F172A }
.glossary-popover .g-def{ margin:0; font-size:.95rem; color:var(--muted) }

/* =========================================================================
   TIMELINE (History) — neutral blue/gray rail
   ------------------------------------------------------------------------- */
.history-timeline{ --year-col:7ch; --rail-x: calc(var(--year-col) + .75rem + 12px) }
.history-timeline .tl{ position:relative; list-style:none; margin:0; padding:0 }
.history-timeline .tl::before{
  content:""; position:absolute; left:var(--rail-x); top:.25rem; bottom:.25rem; width:2px;
  background:linear-gradient(180deg,var(--sky),#64748B,#334155); border-radius:2px; opacity:.9;
}
.history-timeline .tl-item{
  display:grid; grid-template-columns:var(--year-col) 24px 1fr; column-gap:1rem;
  align-items:start; padding:.5rem 0 1.25rem;
}
.history-timeline .tl-year{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--head); line-height:1.4 }
.history-timeline .tl-dot{
  width:12px; height:12px; border-radius:50%; background:#fff; border:4px solid #64748B;
  box-shadow:0 0 0 3px #fff; margin-top:.25rem;
}
.history-timeline .tl-item:nth-child(2n) .tl-dot{ border-color:#334155 }
.history-timeline .tl-item:nth-child(3n) .tl-dot{ border-color:#94A3B8 }
.history-timeline .tl-heading{ margin:0 0 .25rem; font-size:1rem; font-weight:700; color:var(--head) }
.history-timeline .tl-body p{ margin:.25rem 0 0 }
.history-timeline .section-cta{ margin-left:calc(var(--year-col) + 24px + 1rem) }

/* =========================================================================
   BUTTONS (ghost style; also reused for pager)
   ------------------------------------------------------------------------- */
.btn{
  --btn-ink:#0f172a; --btn-border:rgba(15,23,42,.40); --btn-hover:#0f172a;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.4rem; border:2px solid var(--btn-border); border-radius:14px;
  background:transparent; color:var(--btn-ink);
  font-weight:800; text-transform:uppercase; letter-spacing:.08em; text-decoration:none; line-height:1;
  transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  box-shadow:0 2px 0 rgba(2,6,23,.05);
}
.btn:hover,.btn:focus-visible{
  background:var(--btn-hover); color:#fff; border-color:var(--btn-hover);
  transform:translateY(-1px); box-shadow:0 10px 24px rgba(2,6,23,.16); text-decoration:none;
}
.btn:active{ transform:translateY(0) }
.btn::after{ content:"›"; font-size:1.25em; line-height:1; transform:translateX(-2px); transition:transform .15s ease; opacity:.85 }
.btn:hover::after{ transform:translateX(2px) }
.btn-sm{ padding:.7rem 1.1rem; border-radius:12px; font-size:.875rem }
.btn-lg{ padding:1.05rem 1.6rem; border-radius:16px; font-size:1.05rem }
.btn.on-dark{ --btn-ink:#fff; --btn-border:rgba(255,255,255,.55); --btn-hover:#fff }
.btn.on-dark:hover,.btn.on-dark:focus-visible{ color:#0f172a }

/* =========================================================================
   PRINCIPLES PAGE – typography (no clipping)
   ------------------------------------------------------------------------- */
.section-card.principle{ overflow:visible }
.section-card.principle > h2:first-of-type{
  font-size: clamp(1.6rem, 1.2vw + 1.2rem, 1.95rem);
  line-height: 1.28; margin: 0 0 .5rem; color:#0f172a;
}
.section-card.principle h2:not(:first-of-type){
  font-size: clamp(1.18rem, .7vw + 1.0rem, 1.4rem);
  line-height: 1.28; margin: 1.25rem 0 .35rem; color:#0f172a;
}
.section-card.principle .prose{ max-width:none !important; width:100% }
.section-card.principle .prose p{
  font-size: clamp(1.02rem, .28vw + .98rem, 1.1rem);
  line-height: 1.72; color:#334155; margin:.7rem 0 0;
  hyphens:none; -webkit-hyphens:none; -ms-hyphens:none;
  overflow:visible; overflow-wrap:normal; word-break:normal;
}
.section-card.principle :where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure){ overflow:visible; max-width:100% }

/* =========================================================================
   CHAT WIDGET (taller than wide)
   ------------------------------------------------------------------------- */
#chat-panel[hidden]{ display:none !important }

/* Launcher */
#chat-toggle{
  position:fixed; right:18px; bottom:18px; width:56px; height:56px;
  border-radius:50%; display:grid; place-items:center;
  background:#0f172a; color:#fff; cursor:pointer; user-select:none; z-index:9999;
  font-size:22px; box-shadow:0 10px 24px rgba(2,6,23,.2);
}

/* Panel */
#chat-panel{
  position:fixed; right:18px; bottom:86px;
  width:380px;           /* wider than default */
  max-height:80vh;       /* taller than wide */
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  display:flex; flex-direction:column; overflow:hidden; z-index:9999;
  box-shadow:0 16px 40px rgba(2,6,23,.18);
}

/* Log + input */
#chat-log{ padding:14px; overflow:auto; flex:1; font:15px/1.5 system-ui,sans-serif; color:#0f172a }
#chat-log .me{ color:#0f172a; margin:6px 0 }
#chat-log .bot{ color:#334155; margin:6px 0 }
#chat-form{ border-top:1px solid #e5e7eb }
#chat-input{ width:100%; padding:10px 12px; border:0; outline:0; font:14px system-ui,sans-serif }

/* Mobile */
@media (max-width:520px){
  #chat-panel{ right:10px; left:10px; width:auto; max-height:78vh }
}

/* Contact form layout */
.contact-form{ max-width: 720px; }            /* keep the form compact */
.contact-form .field{ margin-bottom:.9rem }
.contact-form label{ display:block; font-weight:600; margin-bottom:.35rem }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%; padding:.625rem .75rem; border:1px solid #d1d5db; border-radius:12px;
}
.contact-form textarea{ resize:vertical; min-height:140px }

/* Submit button */
.contact-form .btn{
  padding:.6rem 1rem; border-radius:12px; color:#fff; border:0; cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent-ink));
  box-shadow:0 6px 16px var(--accent-weak);
}
.contact-form .btn:hover{ filter:brightness(.98) }

/* Honeypot: hide no matter where the .hp class is applied */
.hp,
.field.hp,
.contact-form .hp,
.contact-form .field.hp{
  position:absolute !important;
  left:-10000px !important;
  opacity:0 !important;
  pointer-events:none !important;
  height:0 !important; width:0 !important;
  margin:0 !important; padding:0 !important; border:0 !important;
}

/* Remove any auto-added arrows on pager buttons */
.pager .btn::before,
.pager .btn::after {
  content: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* References toggle */
.refs { margin-top:.5rem }
.refs > summary { cursor:pointer; list-style:none; }
.refs > summary::-webkit-details-marker { display:none; }
.refs > summary { color:#0f172a; font-weight:700; }
.refs[open] > summary { text-decoration:underline; text-underline-offset:2px; }
.refs-list { margin:.35rem 0 0 1.25rem; padding:0; }
.refs-list li { margin:.25rem 0; color:#334155; }