:root{
    --paper:      #F6F4EF;
    --ink:        #23233B;
    --ink-soft:   #4B4B63;
    --ochre:      #E3A72C;
    --teal:       #2C7D7D;
    --coral:      #E4572E;
    --thread-1:   #E3A72C;
    --thread-2:   #2C7D7D;
    --thread-3:   #E4572E;
    --thread-4:   #6B5CA5;
    --thread-5:   #3D7A47;
    --radius:     14px;
  }

  ::selection{ background: var(--ochre); color: var(--ink); }

  html{ scroll-behavior: smooth; }

  body{
    background: var(--paper);
    color: var(--ink);
    font-family: 'Work Sans', sans-serif;
  }

  h1, h2, h3, .display-font{
    font-family: 'Fraunces', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  .eyebrow{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
  }

  a{ color: var(--ink); }

  /* ---------- Navbar ---------- */
  .navbar{
    background: var(--paper);
    border-bottom: 1px solid rgba(35,35,59,0.08);
  }
  .navbar-brand{
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--ink) !important;
  }
  .navbar-brand span{ color: var(--coral); }
  .nav-link{
    font-weight: 500;
    color: var(--ink-soft) !important;
    margin: 0 0.5rem;
  }
  .nav-link:hover{ color: var(--coral) !important; }
  .btn-ochre{
    background: var(--ink);
    color: var(--paper);
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-weight: 600;
    border: none;
  }
  .btn-ochre:hover{ background: var(--coral); color: var(--paper); }
  .btn-outline-ink{
    border: 1.5px solid var(--ink);
    color: var(--ink);
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-weight: 600;
  }
  .btn-outline-ink:hover{ background: var(--ink); color: var(--paper); }

  /* Hero */
  .hero{ 
    padding: 5rem 0 4rem; 
    background-color: #fff;
  }

  .hero h1{
    font-size: clamp(2.4rem, 5vw, 3.75rem);
    line-height: 1.05;
  }

  .hero .lead{
    color: var(--ink-soft);
    font-size: 1.15rem;
    max-width: 34rem;
  }

  /* Signature element: woven ribbon of identity threads */
  .weave-wrap{ position: relative; width: 100%; }
  .thread-path{
    fill: none;
    stroke-width: 14;
    stroke-linecap: round;
    opacity: 0.92;
  }
  @keyframes driftThread{
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -240; }
  }
  .thread-anim{
    stroke-dasharray: 6 14;
    animation: driftThread 14s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .thread-anim{ animation: none; }
  }

  /* Stats */
  .stats-bar{
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius);
  }
  .stats-bar .stat-num{
    font-family: 'Fraunces', serif;
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--ochre);
  }
  .stats-bar .stat-label{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(246,244,239,0.7);
  }

  /* Section basics */
  section{ padding: 5rem 0; }
  .section-title{ font-size: clamp(1.8rem, 3vw, 2.5rem); }

  /* Pillars */

  #pillars {
    background: #fff;
  }

  .pillar-card{
    background: #fff;
    border: 1px solid rgba(35,35,59,0.08);
    border-radius: var(--radius);
    padding: 2rem 1.75rem;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .pillar-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(35,35,59,0.08);
  }
  .pillar-icon{
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.1rem;
  }

  #pillar1 {
    background: rgba(44,125,125,0.16);
  }

  #pillar2 {
    background: rgba(228,87,46,0.15);
  }

  #pillar4 {
    background: rgba(07,92,165,0.16);
  }

  .pillar-icon-yellow {
    background: rgba(227,167,44,0.18);
  }

  /* Voices mosaic */
  .voices-wrap{ background: #fff; border-radius: var(--radius); padding: 2.5rem; }
  .voice-chip{
    display: inline-block;
    padding: 1.1rem 1.4rem;
    margin: 0.4rem;
    border-radius: 10px;
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 1.02rem;
    line-height: 1.35;
    max-width: 320px;
  }
  .voice-name{
    display:block;
    margin-top: 0.6rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.65;
  }
  .voice-a{ background: rgba(227,167,44,0.16); }
  .voice-b{ background: rgba(44,125,125,0.14); }
  .voice-c{ background: rgba(228,87,46,0.13); }
  .voice-d{ background: rgba(107,92,165,0.14); }
  .voice-e{ background: rgba(61,122,71,0.13); }

  /* Events */
  .event-row{
    border-top: 1px solid rgba(35,35,59,0.1);
    padding: 1.5rem 0;
    display: flex; align-items: center; gap: 1.5rem;
  }
  .event-row:last-child{ border-bottom: 1px solid rgba(35,35,59,0.1); }
  .event-date{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    color: var(--teal);
    min-width: 92px;
  }

  #events {
    background: #fff;
  }

  /* Get involved / resources */
  .resource-card{
    border: 1px solid rgba(35,35,59,0.1);
    border-radius: var(--radius);
    padding: 1.6rem;
    height: 100%;
    background: #fff;
  }

  .cta-band{
    background: var(--teal);
    color: #fff;
    border-radius: var(--radius);
    padding: 3rem;
  }
  .cta-band .btn-ochre{ background: var(--ochre); color: var(--ink); }
  .cta-band .btn-ochre:hover{ background: #fff; }

  #join-form {
    max-width: 400px;
  }

  /* Footer */
  footer{
    background: var(--ink);
    color: rgba(246,244,239,0.75);
    padding: 3.5rem 0 1.5rem;
  }
  footer a{ color: rgba(246,244,239,0.85); }
  footer h3{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(246,244,239,0.5);
    margin-bottom: 1rem;
  }

  .my-4 {
    border-color: rgba(246, 244, 239, 0.15); 
  }

  /* Focus visibility */
  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--coral);
    outline-offset: 2px;
  }

  .var-inksoft { 
    color: var(--ink-soft); 
  }

  p-light {
    max-width: 32rem;
    opacity: 0.9;
  }

  p-sm {
    max-width: 20rem;
  }

  .many-logo {
    color: var(--paper);
  }