:root{
    --ink:#16302C;
    --teal:#1F4C42;
    --teal-deep:#12302A;
    --gold:#B8933D;
    --gold-soft:#D9BE84;
    --maroon:#7A2E2E;
    --paper:#F1EEE3;
    --paper-2:#E9E4D4;
    --line: rgba(22,48,44,0.16);
    --max: 980px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    margin:0 0 0.4em 0;
    color:var(--teal-deep);
  }
  a{color:inherit;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
  .mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em;}

  /* ---------- Signature motif: 8-point star, drawn once, reused ---------- */
  .star-mark{display:inline-block; width:1em; height:1em; vertical-align:-0.15em;}
  .star-mark path{fill:currentColor;}

  .motif-strip{
    height:14px;
    width:100%;
    background-repeat:repeat-x;
    background-size:28px 14px;
    opacity:0.9;
  }
  .motif-strip.top{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M14 0L16.4 5.6L22 8L16.4 8L14 13.6L11.6 8L6 8L11.6 5.6Z' fill='%23B8933D'/%3E%3C/svg%3E");
  }
  .motif-strip.bottom{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M14 14L16.4 8.4L22 6L16.4 6L14 0.4L11.6 6L6 6L11.6 8.4Z' fill='%23D9BE84'/%3E%3C/svg%3E");
  }

  /* ---------- Nav ---------- */
  header.site{
    position:sticky; top:0; z-index:20;
    background:rgba(241,238,227,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:14px; padding-bottom:14px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem;
    color:var(--teal-deep); text-decoration:none;
  }
  .brand .star-mark{color:var(--gold); width:1.3em; height:1.3em;}
  ul.links{display:flex; gap:2px; list-style:none; margin:0; padding:0; align-items:center;}
  ul.links li{display:flex; align-items:center;}
  ul.links li + li::before{
    content:"";
    width:4px; height:4px;
    background:var(--gold);
    transform:rotate(45deg);
    margin:0 18px;
    flex-shrink:0;
  }
  ul.links a{
    position:relative;
    text-decoration:none;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem; font-weight:500;
    letter-spacing:0.12em; text-transform:uppercase;
    color:var(--teal);
    padding-bottom:5px;
  }
  ul.links a::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:2px; background:var(--gold);
    transform:scaleX(0); transform-origin:left;
    transition:transform 0.25s ease;
  }
  ul.links a:hover{color:var(--maroon);}
  ul.links a:hover::after, ul.links a:focus-visible::after{transform:scaleX(1);}
  .nav-inner{display:flex; align-items:center; gap:36px;}
  @media (max-width:720px){
    .nav-inner ul.links{display:none;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background:
      radial-gradient(circle at 85% 15%, rgba(184,147,61,0.14), transparent 45%),
      var(--teal);
    color:#F4F1E5;
    overflow:hidden;
    padding:88px 0 96px;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23F4F1E5' stroke-opacity='0.06' stroke-width='1.2'%3E%3Cpath d='M60 6 L96 30 L96 78 L60 102 L24 78 L24 30 Z'/%3E%3Cpath d='M60 6 L74 45 L114 45 L82 68 L94 108 L60 84 L26 108 L38 68 L6 45 L46 45 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size:220px 220px;
    opacity:0.9;
  }
  .hero .wrap{position:relative;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--gold-soft); margin-bottom:18px; display:flex; align-items:center; gap:10px;
  }
  .hero h1{
    color:#FAF7EE;
    font-size:clamp(2.4rem, 5vw, 3.6rem);
    max-width:14ch;
    line-height:1.05;
  }
  .hero p.lede{
    max-width:46ch;
    font-size:1.08rem;
    color:#E4E0CF;
    margin-bottom:34px;
  }
  .btn-row{display:flex; gap:14px; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 24px;
    border-radius:3px;
    font-size:0.95rem; font-weight:600;
    text-decoration:none;
    border:1px solid transparent;
    transition:transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--gold); color:var(--teal-deep);}
  .btn-primary:hover{background:var(--gold-soft);}
  .btn-ghost{border-color:rgba(244,241,229,0.4); color:#F4F1E5;}
  .btn-ghost:hover{border-color:var(--gold-soft); background:rgba(244,241,229,0.06);}

  /* ---------- Sections ---------- */
  section{padding:72px 0;}
  section.alt{background:var(--paper-2);}
  .section-head{margin-bottom:36px; max-width:60ch;}
  .section-head .eyebrow-lt{
    font-family:'IBM Plex Mono', monospace; font-size:0.76rem; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--maroon); margin-bottom:10px; display:block;
  }

  /* Prayer times */
  .prayer-card{
    display:flex; gap:40px; flex-wrap:wrap; align-items:flex-start;
  }
  .prayer-card .widget-frame{
    background:#fff; border:1px solid var(--line); border-radius:6px;
    padding:14px; box-shadow:0 8px 24px rgba(22,48,44,0.08);
  }
  .prayer-card .widget-frame iframe{display:block;}
  .prayer-note{
    flex:1; min-width:240px; font-size:0.98rem; color:var(--teal-deep);
    padding-top:8px;
  }
  .prayer-note .mono{color:var(--maroon); font-size:0.85rem;}

  /* About */
  .about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:start;}
  @media (max-width:820px){.about-grid{grid-template-columns:1fr;}}
  .quote-block{
    border-left:3px solid var(--gold);
    padding:6px 0 6px 22px;
    font-family:'Fraunces', serif;
    font-size:1.25rem;
    color:var(--teal-deep);
  }

  /* Location */
  .location-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
  @media (max-width:820px){.location-grid{grid-template-columns:1fr;}}
  .map-frame{
    border:1px solid var(--line); border-radius:6px; overflow:hidden;
    box-shadow:0 8px 24px rgba(22,48,44,0.08);
  }
  .map-frame iframe{display:block; width:100%; height:280px; border:0;}
  .info-card{
    background:#fff; border:1px solid var(--line); border-radius:6px;
    padding:26px 28px;
  }
  .info-card dl{margin:0;}
  .info-card dt{font-family:'IBM Plex Mono', monospace; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--maroon); margin-top:16px;}
  .info-card dt:first-child{margin-top:0;}
  .info-card dd{margin:4px 0 0 0; font-size:1rem;}

  /* Donate */
  .donate-card{
    background:var(--teal); color:#F4F1E5;
    border-radius:6px; padding:36px 40px;
    display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
    position:relative; overflow:hidden;
  }
  .donate-card::after{
    content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 6 L74 45 L114 45 L82 68 L94 108 L60 84 L26 108 L38 68 L6 45 L46 45 Z' fill='none' stroke='%23D9BE84' stroke-opacity='0.25' stroke-width='1.4'/%3E%3C/svg%3E");
    background-size:contain; background-repeat:no-repeat;
  }
  @media (max-width:640px){.donate-card{grid-template-columns:1fr;}}
  .donate-methods{display:flex; gap:16px; flex-wrap:wrap;}
  .pay-box{
    background:rgba(244,241,229,0.08);
    border:1px solid rgba(244,241,229,0.35);
    border-radius:6px;
    padding:20px 24px;
    min-width:180px;
    text-align:center;
  }
  .pay-box-pending{border-style:dashed; border-color:rgba(244,241,229,0.4);}
  .pay-box .qr-image{
    width:120px; height:120px; margin:0 auto 12px;
    border-radius:4px; display:block;
    background:#fff; padding:6px;
  }
  .pay-box .qr-placeholder{
    width:120px; height:120px; margin:0 auto 12px;
    border:1px dashed rgba(244,241,229,0.5);
    border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono', monospace; font-size:0.7rem;
    color:rgba(244,241,229,0.6); text-align:center; padding:8px;
  }
  .pay-box .pay-label{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-soft);}
  .pay-box .pay-contact{font-size:1.05rem; font-weight:600; margin-top:6px;}
  .pay-box-pending .pay-contact{font-size:0.9rem; font-weight:500; color:rgba(244,241,229,0.7);}

  /* Contact */
  .contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:640px;}
  @media (max-width:600px){.contact-grid{grid-template-columns:1fr;}}
  .contact-item{
    border:1px solid var(--line); border-radius:6px; padding:22px 24px; background:#fff;
  }
  .contact-item .eyebrow-lt{display:block; margin-bottom:8px;}

  footer{
    background:var(--teal-deep); color:rgba(244,241,229,0.75);
    padding:36px 0 28px; font-size:0.88rem;
  }
  footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
  footer .brand-mini{display:flex; align-items:center; gap:8px; color:#F4F1E5; font-family:'Fraunces', serif; font-weight:600;}
  footer .brand-mini .star-mark{color:var(--gold); width:1.1em; height:1.1em;}

  :focus-visible{outline:2px solid var(--gold); outline-offset:2px;}