:root{
    --bg: #F8DCE6;
    --bg-alt: #F4C9DA;
    --card: #FCEEF3;
    --gold: #C97B2E;
    --red: #B23A4E;
    --teal: #1F6F62;
    --cream: #3A1F2B;
    --muted: #8C6B75;
    --line: rgba(58,31,43,0.14);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--cream);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .display{font-family:'Fraunces',serif;}
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:inherit;}

  /* ---------- header / nav ---------- */
  header{
    display:flex;justify-content:space-between;align-items:center;
    padding:22px 6vw;
    position:sticky;top:0;
    background:rgba(248,220,230,0.9);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    z-index:20;
    gap:24px;flex-wrap:wrap;
  }
  .brand{display:flex;flex-direction:row;align-items:center;gap:12px;cursor:pointer;}
  .brand .name{font-size:1.3rem;font-weight:600;letter-spacing:0.01em;}
  .brand .tag{font-size:0.72rem;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;}

  nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  nav a{
    text-decoration:none;color:var(--muted);font-size:0.88rem;font-weight:500;
    padding:8px 14px;border-radius:100px;transition:background .15s ease, color .15s ease;
  }
  nav a:hover{color:var(--cream);}
  nav a.active{color:var(--bg);background:var(--gold);}
  nav a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

  #navToggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:38px;height:38px;
    background:none;border:1px solid var(--line);border-radius:8px;
    cursor:pointer;padding:0;
  }
  #navToggle span{
    display:block;width:18px;height:2px;margin:0 auto;
    background:var(--cream);border-radius:2px;
    transition:transform .2s ease, opacity .2s ease;
  }
  #navToggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  #navToggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  #navToggle.open span:nth-child(2){opacity:0;}
  #navToggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* ---------- pages ---------- */
  .page{display:none;}
  .page.active{display:block;animation:fadeIn .35s ease;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

  .weave{
    height:14px;
    background:repeating-linear-gradient(
      120deg,
      var(--gold) 0 18px,
      var(--red) 18px 36px,
      var(--teal) 36px 54px
    );
    opacity:0.9;
  }

  /* ---------- HOME ---------- */
  .hero{
    padding:70px 6vw 50px;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:40px;
    align-items:center;
  }
  .hero h1{
    font-size:clamp(2.2rem, 4.5vw, 3.6rem);
    line-height:1.05;
    margin:0 0 18px;
    font-weight:600;
  }
  .hero h1 em{color:var(--gold);font-style:italic;font-weight:500;}
  .hero-sub{
    font-size:clamp(1.3rem, 2.4vw, 1.9rem);
    color:var(--gold);
    font-weight:500;
    font-style:italic;
    margin:0 0 20px;
  }
  .hero p{color:var(--muted);font-size:1.05rem;max-width:46ch;line-height:1.6;margin:0;}
  .hero-actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;}
  .btn-solid, .btn-outline{
    text-decoration:none;padding:12px 22px;border-radius:100px;font-weight:600;font-size:0.9rem;
    display:inline-block;transition:transform .15s ease;
  }
  .btn-solid{background:var(--gold);color:#1B1206;}
  .btn-outline{border:1px solid var(--line);color:var(--cream);}
  .btn-solid:hover, .btn-outline:hover{transform:translateY(-1px);}

  .hero-count{margin-top:26px;display:flex;gap:28px;}
  .hero-count div .num{font-family:'Fraunces',serif;font-size:1.8rem;color:var(--gold);}
  .hero-count div .label{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;}

  .collage{
    position:relative;height:320px;border-radius:14px;overflow:hidden;
    border:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,0.18);
    background:var(--card);
  }
  .collage img.slide{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity 1.1s ease;
  }
  .collage img.slide.active{opacity:1;}
  .slide-dots{
    position:absolute;bottom:14px;left:0;right:0;
    display:flex;justify-content:center;gap:6px;z-index:5;
  }
  .slide-dots span{
    width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.55);
    transition:width .2s ease, background .2s ease;
  }
  .slide-dots span.active{background:var(--gold);width:18px;border-radius:4px;}
  .collage-empty{
    height:100%;border:1px dashed var(--line);border-radius:14px;
    display:flex;align-items:center;justify-content:center;color:var(--muted);
    font-size:0.9rem;text-align:center;padding:20px;
  }

  .preview-section{padding:20px 6vw 90px;}
  .section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px;flex-wrap:wrap;gap:12px;}
  .section-head h2{font-size:1.4rem;font-weight:600;margin:0;}
  .eyebrow{color:var(--muted);font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;}
  .see-all{font-size:0.85rem;color:var(--gold);text-decoration:none;font-weight:600;}

  /* ---------- shared card / grid ---------- */
  .grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));gap:26px;}
  .card{
    position:relative;background:var(--card);border-radius:10px;overflow:hidden;border:1px solid var(--line);
    cursor:pointer;transition:transform .18s ease, border-color .18s ease;
  }
  .card:hover{transform:translateY(-4px);border-color:var(--gold);}
  .card:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  .card img, .card video{width:100%;height:190px;object-fit:cover;display:block;background:#000;}
  .media-badge{
    position:absolute;top:12px;right:12px;background:rgba(0,0,0,0.55);color:#fff;
    font-size:0.7rem;padding:4px 9px;border-radius:100px;letter-spacing:0.03em;
  }
  .card-body{padding:16px 18px 20px;}
  .card-date{color:var(--gold);font-size:0.72rem;letter-spacing:0.06em;}
  .card-title{font-family:'Fraunces',serif;font-size:1.15rem;margin:6px 0 8px;font-weight:600;}
  .card-desc{color:var(--muted);font-size:0.88rem;line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

  .empty-state{
    grid-column:1/-1;border:1px dashed var(--line);border-radius:10px;padding:60px 20px;
    text-align:center;color:var(--muted);
  }
  .empty-state .display{color:var(--cream);font-size:1.3rem;margin-bottom:8px;}

  /* ---------- EVENTS page ---------- */
  .events-header{padding:56px 6vw 10px;}
  .events-header h1{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:0 0 10px;font-weight:600;}
  .events-header p{color:var(--muted);max-width:60ch;line-height:1.6;margin:0;}
  .events-grid-wrap{padding:36px 6vw 90px;}

  /* ---------- ABOUT page ---------- */
  .about-wrap{padding:60px 6vw 90px;max-width:820px;margin:0 auto;}
  .about-wrap h1{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:0 0 24px;font-weight:600;}
  .about-wrap p{color:var(--muted);line-height:1.75;font-size:1.02rem;margin:0 0 20px;}
  .about-wrap strong{color:var(--cream);}
  .values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:36px;}
  .value-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px;}
  .value-card .display{font-size:1.1rem;color:var(--gold);margin-bottom:8px;}
  .value-card p{margin:0;font-size:0.92rem;}

  .vm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
  .vm-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px;}
  .vm-text{color:var(--muted);font-size:0.95rem;line-height:1.7;margin:0;}

  .objectives-list{margin:0;padding-left:22px;color:var(--muted);font-size:0.95rem;line-height:1.8;}
  .objectives-list li{margin-bottom:8px;}
  .objectives-list li::marker{color:var(--red);}

  .do-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
  .do-card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
  .do-img{width:100%;height:150px;object-fit:cover;display:block;}
  .do-card-body{padding:24px 26px;}
  .do-title{font-size:1.15rem;color:var(--gold);margin-bottom:14px;position:relative;padding-bottom:12px;}
  .do-title::after{content:"";position:absolute;bottom:0;left:0;width:34px;height:3px;background:var(--red);border-radius:2px;}
  .do-card ul{margin:0;padding-left:20px;color:var(--muted);font-size:0.92rem;line-height:1.6;}
  .do-card li{margin-bottom:10px;}
  .do-card li:last-child{margin-bottom:0;}
  .do-card li::marker{color:var(--teal);}

  .location-row{
    margin-top:48px;padding-top:32px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
  }

  .map-section{margin-top:40px;}
  .map-frame{
    width:100%;height:380px;border:1px solid var(--line);border-radius:12px;
    overflow:hidden;filter:saturate(0.85) contrast(1.05);
  }
  .map-frame iframe{width:100%;height:100%;border:0;display:block;}

  /* ---------- DONATE page ---------- */
  .donate-wrap{padding:60px 6vw 90px;max-width:900px;margin:0 auto;}
  .donate-wrap h1{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:0 0 16px;font-weight:600;}
  .donate-wrap > p{color:var(--muted);line-height:1.7;max-width:64ch;margin:0 0 40px;}
  .donate-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
  .method-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px;}
  .method-card .display{font-size:1.15rem;margin-bottom:14px;}
  .method-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:0.9rem;}
  .method-row:last-of-type{border-bottom:none;}
  .method-row .label{color:var(--muted);}
  .method-row .value{font-family:'JetBrains Mono',monospace;}
  .copy-btn{
    background:none;border:1px solid var(--line);color:var(--cream);border-radius:6px;
    padding:4px 10px;font-size:0.72rem;cursor:pointer;margin-left:10px;
  }
  .copy-btn:hover{border-color:var(--gold);color:var(--gold);}
  .donate-note{margin-top:30px;color:var(--muted);font-size:0.85rem;line-height:1.6;}

  /* ---------- modals ---------- */
  .overlay{
    position:fixed;inset:0;background:rgba(8,15,20,0.78);
    display:none;align-items:center;justify-content:center;z-index:100;padding:24px;
  }
  .overlay.open{display:flex;}
  .modal{
    background:var(--bg-alt);border:1px solid var(--line);border-radius:14px;
    max-width:640px;width:100%;max-height:90vh;overflow-y:auto;padding:36px;position:relative;
  }
  .modal.wide{max-width:820px;}
  .modal-close{
    position:absolute;top:16px;right:16px;background:none;border:none;color:var(--muted);
    font-size:1.4rem;cursor:pointer;line-height:1;padding:4px;
  }
  .modal-close:hover{color:var(--cream);}
  .modal h3{font-family:'Fraunces',serif;font-size:1.4rem;margin:0 0 18px;font-weight:600;}

  label{display:block;font-size:0.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin:16px 0 6px;}
  label:first-of-type{margin-top:0;}
  input[type=text], input[type=date], textarea, input[type=password]{
    width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;
    padding:11px 13px;color:var(--cream);font-family:'Inter',sans-serif;font-size:0.95rem;
  }
  textarea{resize:vertical;min-height:80px;}
  input:focus, textarea:focus{outline:2px solid var(--gold);outline-offset:1px;}

  .file-drop{border:1px dashed var(--line);border-radius:8px;padding:34px 18px;text-align:center;color:var(--muted);font-size:0.95rem;cursor:pointer;}
  .file-drop:hover{border-color:var(--gold);}
  .media-preview-grid{
    display:none;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
  }
  .media-preview-grid.active{display:flex;}
  .media-preview-item{
    position:relative;width:84px;height:84px;border-radius:8px;overflow:hidden;
    border:1px solid var(--line);
  }
  .media-preview-item img, .media-preview-item video{width:100%;height:100%;object-fit:cover;display:block;background:#000;}
  .media-preview-remove{
    position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;
    background:rgba(0,0,0,0.6);color:#fff;border:none;font-size:0.75rem;line-height:1;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
  }


  .btn-primary{
    margin-top:22px;width:100%;background:var(--gold);color:#1B1206;border:none;border-radius:100px;
    padding:13px;font-weight:600;font-size:0.95rem;cursor:pointer;
  }
  .btn-primary:disabled{opacity:0.5;cursor:not-allowed;}
  .btn-danger{background:transparent;color:var(--red);border:1px solid var(--red);border-radius:100px;padding:6px 14px;font-size:0.78rem;cursor:pointer;}
  .btn-danger:hover{background:var(--red);color:var(--cream);}

  .form-error{color:var(--red);font-size:0.82rem;margin-top:10px;display:none;}
  .form-note{color:var(--muted);font-size:0.78rem;margin-top:14px;line-height:1.5;}

  .admin-list{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;}
  .admin-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);gap:12px;}
  .admin-row .info{font-size:0.85rem;}
  .admin-row .info .t{font-weight:600;}
  .admin-row .info .d{color:var(--muted);font-size:0.75rem;}

  .viewer-media-wrap{position:relative;}
  #viewerImg{width:100%;border-radius:8px;display:block;}
  #viewerVideo{width:100%;border-radius:8px;display:block;background:#000;max-height:70vh;}
  .viewer-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:40px;height:40px;border-radius:50%;border:none;
    background:rgba(0,0,0,0.5);color:#fff;font-size:1.4rem;line-height:1;
    cursor:pointer;display:none;align-items:center;justify-content:center;
  }
  .viewer-nav:hover{background:rgba(0,0,0,0.7);}
  .viewer-nav-prev{left:12px;}
  .viewer-nav-next{right:12px;}
  .viewer-media-wrap.has-gallery .viewer-nav{display:flex;}
  .viewer-counter{
    position:absolute;bottom:12px;right:12px;
    background:rgba(0,0,0,0.55);color:#fff;font-size:0.75rem;
    padding:3px 10px;border-radius:100px;display:none;
  }
  .viewer-media-wrap.has-gallery .viewer-counter{display:block;}
  #viewerTitle{font-family:'Fraunces',serif;font-size:1.5rem;margin:16px 0 4px;}
  #viewerDate{color:var(--gold);font-size:0.78rem;letter-spacing:0.06em;}
  #viewerDesc{color:var(--muted);margin-top:10px;line-height:1.6;}

  footer{padding:56px 6vw 34px;border-top:1px solid var(--line);}
  .footer-top{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:32px;
  }
  .footer-brand{display:flex;align-items:center;gap:12px;}
  .footer-name{font-size:1.05rem;color:var(--cream);}
  .footer-tag{font-size:0.78rem;color:var(--muted);margin-top:2px;}
  .footer-col{display:flex;flex-direction:column;gap:10px;}
  .footer-heading{
    font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;
    color:var(--muted);margin-bottom:2px;
  }
  .footer-col a, .footer-col span{
    color:var(--cream);text-decoration:none;font-size:0.9rem;opacity:0.85;
  }
  .footer-col a:hover{color:var(--gold);opacity:1;}

  .social-row{display:flex;flex-direction:column;gap:12px;}
  .social-icon{
    display:flex;align-items:center;gap:10px;
    color:var(--cream);text-decoration:none;font-size:0.9rem;opacity:0.85;
  }
  .social-icon svg{
    width:20px;height:20px;flex-shrink:0;color:var(--cream);
    transition:color .15s ease;
  }
  .social-icon:hover{color:var(--gold);opacity:1;}
  .social-icon:hover svg{color:var(--gold);}
  .footer-bottom{
    padding-top:22px;text-align:center;color:var(--muted);font-size:0.78rem;
  }
  @media (max-width:820px){
    .footer-top{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:500px){
    .footer-top{grid-template-columns:1fr;}
  }

  @media (max-width:820px){
    .hero{grid-template-columns:1fr;}
    .collage{height:240px;order:-1;}
    nav{order:3;width:100%;justify-content:flex-start;}
  }

  @media (max-width:680px){
    #navToggle{display:flex;}
    nav{
      order:3;
      display:none;
      flex-direction:column;
      align-items:stretch;
      width:100%;
      gap:4px;
      padding-top:14px;
      margin-top:6px;
      border-top:1px solid var(--line);
    }
    nav.open{display:flex;}
    nav a{padding:12px 14px;border-radius:8px;}
  }

  @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }