:root{
    --ink-night: #0F1A2B;
    --teal-deep: #163B36;
    --gold: #D4A24C;
    --gold-soft: #E8C983;
    --ivory: #F3EEE2;
    --ink-on-light: #17232B;
    --line: rgba(243,238,226,0.14);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background: var(--ivory);
    color: var(--ink-on-light);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3, .display{
    font-family: 'Spectral', serif;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  a{color:inherit; text-decoration:none;}

  .star{
    display:inline-block;
    width:1em; height:1em;
    background: currentColor;
    clip-path: polygon(50% 0%, 61% 22%, 85% 15%, 78% 39%, 100% 50%, 78% 61%, 85% 85%, 61% 78%, 50% 100%, 39% 78%, 15% 85%, 22% 61%, 0% 50%, 22% 39%, 15% 15%, 39% 22%);
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(212,162,76,0.16), transparent 65%), var(--ink-night);
    color: var(--ivory);
    padding: 64px 24px 56px;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image: radial-gradient(circle, rgba(212,162,76,0.35) 1px, transparent 1.4px);
    background-size: 34px 34px;
    opacity:0.35;
    animation: drift 60s linear infinite;
  }
  @keyframes drift{ from{background-position:0 0;} to{background-position:340px 200px;} }

  .nav{
    position:relative; z-index:2;
    display:flex; justify-content:space-between; align-items:center;
    max-width: 880px; margin:0 auto 48px;
  }
  /* ---------- Logo / wordmark ---------- */
  .brand-mark{ display:flex; align-items:center; gap:12px; }
  .brand-badge{
    width:42px; height:42px; border-radius:50%; flex:0 0 auto;
    background: radial-gradient(circle at 35% 30%, rgba(212,162,76,0.4), rgba(212,162,76,0.06));
    border:1px solid rgba(212,162,76,0.45);
    display:flex; align-items:center; justify-content:center;
  }
  .brand-badge .star{ color: var(--gold); width:1.15em; height:1.15em; }
  .brand-text{ display:flex; flex-direction:column; line-height:1.2; text-align:left; }
  .brand-text .brand-name{ font-family:'Spectral',serif; font-size:clamp(1.15rem,4vw,1.5rem); color: var(--ivory); letter-spacing:0.005em; }
  .brand-text .brand-sub{ font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; color: var(--gold-soft); opacity:0.7; margin-top:3px; }

  .nav-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }

  .lang-toggle{
    display:flex; gap:2px; background:rgba(243,238,226,0.08); border:1px solid var(--line); border-radius:999px; padding:3px; flex:0 0 auto;
  }
  .lang-toggle button{
    font-family:'Inter',sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:0.03em;
    padding:6px 14px; border-radius:999px; border:none; background:transparent; color:var(--ivory); opacity:0.55; cursor:pointer;
    transition: all .2s ease;
  }
  .lang-toggle button.active{ background:var(--gold); color:var(--ink-night); opacity:1; }

  /* ---------- Hamburger + section menu ---------- */
  .hamburger{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:rgba(243,238,226,0.06);
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; cursor:pointer; flex:0 0 auto;
  }
  .hamburger span{ width:16px; height:2px; background:var(--ivory); border-radius:2px; transition: all .25s ease; }
  .hamburger.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .hamburger.open span:nth-child(2){ opacity:0; }
  .hamburger.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  .nav-menu{
    position:relative; z-index:5; max-width:880px; margin:0 auto;
    max-height:0; overflow:hidden; opacity:0;
    transition: max-height .3s ease, opacity .25s ease, margin .3s ease;
  }
  .nav-menu.open{ max-height:300px; opacity:1; margin-bottom:32px; }
  .nav-menu-inner{
    display:flex; flex-wrap:wrap; gap:10px 22px;
    padding:18px 4px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .nav-menu-inner a{
    font-size:0.85rem; color: rgba(243,238,226,0.75); font-weight:500;
    display:flex; align-items:center; gap:6px;
  }
  .nav-menu-inner a:hover{ color: var(--gold-soft); }
  .nav-menu-inner a .star{ width:0.5em; height:0.5em; color: var(--gold); }

  .hero-inner{ position:relative; z-index:2; max-width:880px; margin:0 auto; text-align:center; }
  .eyebrow{ font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:14px; display:flex; align-items:center; justify-content:center; gap:8px;}
  .eyebrow .star{ color:var(--gold); width:0.6em; height:0.6em; }
  .hijri-date{ font-size:1.05rem; color:rgba(243,238,226,0.72); margin-bottom:6px; }
  .greg-date{ font-size:0.85rem; color:rgba(243,238,226,0.45); margin-bottom:40px; }

  .countdown-label{ font-size:0.85rem; color:rgba(243,238,226,0.6); margin-bottom:8px; }
  .next-prayer-name{ font-family:'Spectral',serif; font-style:italic; font-size:1.4rem; color:var(--gold-soft); margin-bottom:4px; }
  .countdown{
    font-family:'Spectral',serif; font-weight:500;
    font-size:clamp(3rem, 12vw, 5.5rem);
    line-height:1;
    text-shadow: 0 0 40px rgba(212,162,76,0.35);
    margin-bottom: 44px;
    font-variant-numeric: tabular-nums;
  }

  .times-row{
    display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
    max-width: 640px; margin: 0 auto;
  }
  .time-card{
    background:rgba(243,238,226,0.05);
    border:1px solid var(--line);
    border-radius:14px 14px 4px 4px;
    padding:14px 6px;
    transition: border-color .2s ease;
  }
  .time-card.active{ border-color:var(--gold); background:rgba(212,162,76,0.1); }
  .time-card .name{ font-size:0.66rem; letter-spacing:0.04em; text-transform:uppercase; color:rgba(243,238,226,0.55); margin-bottom:6px;}
  .time-card .time{ font-family:'Spectral',serif; font-size:1.1rem; }

  /* ---------- Slim nav (blog & article pages) ---------- */
  .nav-slim{ background: var(--ink-night); color: var(--ivory); padding: 18px 24px; }
  .nav-slim .nav{ margin-bottom:0; }
  .nav-slim a{ display:block; }

  /* ---------- Sections ---------- */
  section{ padding: 72px 24px; }
  .section-inner{ max-width: 880px; margin:0 auto; }
  .section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:32px; gap:16px; flex-wrap:wrap;}
  .section-head h2{ font-size:1.7rem; }
  .section-head .star{ color: var(--gold); width:0.55em; height:0.55em; margin-right:10px; vertical-align:middle; }
  .see-all{ font-size:0.85rem; font-weight:600; color:var(--teal-deep); border-bottom:1px solid currentColor; padding-bottom:1px;}
  .section-sub{ font-size:0.92rem; color:rgba(23,35,43,0.55); max-width:560px; margin:-20px 0 32px; }

  .divider{
    display:flex; align-items:center; justify-content:center; gap:10px; color: var(--gold); opacity:0.6; margin: 0;
  }
  .divider .star{ width:0.5em; height:0.5em; }
  .divider::before, .divider::after{ content:""; height:1px; width:60px; background: currentColor; opacity:0.5;}

  /* Blog cards */
  .blog-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
  .post-card{
    background: white;
    border:1px solid rgba(23,35,43,0.08);
    border-radius: 4px 18px 4px 18px;
    padding:26px 22px;
    display:flex; flex-direction:column; gap:12px;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .post-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(23,35,43,0.35); }
  .post-tag{ display:flex; align-items:center; gap:6px; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--teal-deep); font-weight:700;}
  .post-tag .star{ color:var(--gold); width:0.55em; height:0.55em; }
  .post-card h3{ font-size:1.2rem; line-height:1.3; }
  .post-card p{ font-size:0.92rem; line-height:1.55; color:rgba(23,35,43,0.7); }
  .read-more{ font-size:0.82rem; font-weight:600; color:var(--teal-deep); margin-top:auto; }

  /* Announcements */
  .announce-list{ display:flex; flex-direction:column; }
  .announce-item{
    display:flex; gap:16px; padding:16px 0; border-bottom:1px solid rgba(23,35,43,0.08);
    font-size:0.92rem;
  }
  .announce-item .date{ flex:0 0 90px; color:rgba(23,35,43,0.45); font-size:0.8rem; padding-top:2px;}
  .announce-note{
    margin-top:18px; font-size:0.82rem; color:rgba(23,35,43,0.45); font-style:italic;
  }

  /* Wisdom strip */
  .wisdom{
    background: var(--teal-deep); color: var(--ivory);
    text-align:center; padding: 56px 24px;
  }
  .wisdom blockquote{ font-family:'Spectral',serif; font-style:italic; font-size:1.4rem; max-width:640px; margin:0 auto 14px; line-height:1.5;}
  .wisdom cite{ font-size:0.82rem; opacity:0.65; font-style:normal;}

  /* Local notices */
  .notice-list{ display:flex; flex-direction:column; gap:0; }
  .notice-item{
    display:flex; gap:16px; align-items:flex-start;
    padding:18px 0; border-bottom:1px solid rgba(23,35,43,0.08);
  }
  .notice-item .badge{
    flex:0 0 auto; font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    padding:4px 10px; border-radius:999px; margin-top:2px;
  }
  .badge.urgent{ background:rgba(212,162,76,0.18); color:#8a6a24; }
  .badge.info{ background:rgba(22,59,54,0.1); color: var(--teal-deep); }
  .notice-item .body h4{ font-size:1rem; font-weight:600; margin-bottom:3px; }
  .notice-item .body p{ font-size:0.88rem; color:rgba(23,35,43,0.62); line-height:1.5; }

  /* Activities */
  .activities-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
  .activity-card{
    background: var(--ink-night); color: var(--ivory);
    border-radius: 4px 18px 4px 18px;
    padding:22px;
  }
  .activity-card .day{ font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--gold-soft); margin-bottom:10px; display:flex; align-items:center; gap:6px;}
  .activity-card .day .star{ width:0.55em; height:0.55em; color:var(--gold);}
  .activity-card h4{ font-family:'Spectral',serif; font-size:1.15rem; margin-bottom:8px; }
  .activity-card p{ font-size:0.85rem; color:rgba(243,238,226,0.6); line-height:1.5; }

  /* Campaigns */
  .campaign-card{
    background:white; border:1px solid rgba(23,35,43,0.08);
    border-radius:4px 18px 4px 18px; padding:26px;
    margin-bottom:16px;
  }
  .campaign-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; flex-wrap:wrap; gap:8px;}
  .campaign-head h4{ font-family:'Spectral',serif; font-size:1.15rem; }
  .campaign-status{ font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color: var(--teal-deep); }
  .campaign-card p{ font-size:0.88rem; color:rgba(23,35,43,0.62); margin-bottom:14px; line-height:1.5;}
  .progress-track{ height:8px; background:rgba(23,35,43,0.08); border-radius:999px; overflow:hidden; margin-bottom:8px;}
  .progress-fill{ height:100%; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); border-radius:999px; }
  .campaign-numbers{ display:flex; justify-content:space-between; font-size:0.8rem; color:rgba(23,35,43,0.55); }
  .campaign-numbers strong{ color: var(--ink-on-light); }

  /* About / scope of the board */
  .about-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2px; background:rgba(23,35,43,0.08); border:1px solid rgba(23,35,43,0.08); border-radius:4px 18px 4px 18px; overflow:hidden; margin-bottom:28px;}
  .about-item{ background:white; padding:22px; }
  .about-item .star{ color:var(--gold); width:0.6em; height:0.6em; margin-bottom:10px; }
  .about-item h4{ font-family:'Spectral',serif; font-size:1.02rem; margin-bottom:6px; }
  .about-item p{ font-size:0.84rem; color:rgba(23,35,43,0.6); line-height:1.5; }
  .about-intro{ font-size:0.98rem; line-height:1.7; color:rgba(23,35,43,0.72); margin-bottom:28px; max-width:640px;}
  .about-contact{ font-size:0.85rem; color:rgba(23,35,43,0.5); }

  footer{ background: var(--ink-night); color:rgba(243,238,226,0.55); padding: 64px 24px 0; }
  .footer-inner{
    max-width:880px; margin:0 auto; display:flex; flex-wrap:wrap; gap:48px;
    padding-bottom:44px; border-bottom:1px solid var(--line);
  }
  .footer-brand{ flex:1 1 220px; }
  .footer-brand .brand-mark{ margin-bottom:12px; }
  .footer-brand p{ font-size:0.85rem; line-height:1.6; color:rgba(243,238,226,0.5); max-width:280px; }
  .footer-cols{ display:flex; flex-wrap:wrap; gap:40px; flex:2 1 360px; }
  .footer-col h5{
    font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--gold-soft);
    margin-bottom:14px; font-weight:600;
  }
  .footer-col a, .footer-col div{ display:block; font-size:0.85rem; color:rgba(243,238,226,0.6); margin-bottom:10px; line-height:1.5; }
  .footer-col a:hover{ color: var(--gold-soft); }
  .footer-bottom{
    max-width:880px; margin:0 auto; padding:22px 0 28px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:0.78rem; color:rgba(243,238,226,0.4);
  }
  .footer-bottom .star{ color:var(--gold); width:0.55em; height:0.55em; }

  /* ---------- Donation / bank account ---------- */
  .donate-card{
    background: var(--teal-deep); color: var(--ivory);
    border-radius:4px 18px 4px 18px; padding:30px 26px;
    margin-top:20px;
  }
  .donate-card h4{ font-family:'Spectral',serif; font-size:1.1rem; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
  .donate-card h4 .star{ color:var(--gold); width:0.55em; height:0.55em; }
  .donate-row{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid rgba(243,238,226,0.12); font-size:0.9rem; flex-wrap:wrap;}
  .donate-row:last-of-type{ border-bottom:none; }
  .donate-row .label{ color:rgba(243,238,226,0.55); }
  .donate-row .value{ font-family:'Spectral',serif; letter-spacing:0.02em; }
  .donate-note{ font-size:0.78rem; color:rgba(243,238,226,0.45); margin-top:14px; font-style:italic; }

  /* ---------- Blog index page ---------- */
  .blog-hero{
    background: var(--ink-night); color: var(--ivory); padding: 56px 24px 48px; text-align:center;
  }
  .blog-hero h1{ font-size:clamp(1.8rem,6vw,2.6rem); margin-bottom:10px; }
  .blog-hero p{ color:rgba(243,238,226,0.6); max-width:520px; margin:0 auto; font-size:0.98rem; line-height:1.6;}
  .back-link{ display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; color:var(--gold-soft); margin-bottom:24px; }
  .blog-index-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }

  /* ---------- Article page ---------- */
  .article-hero{ background: var(--ink-night); color:var(--ivory); padding:52px 24px 44px; }
  .article-hero .section-inner{ max-width:680px; }
  .article-tag{ display:flex; align-items:center; gap:6px; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-soft); font-weight:700; margin-bottom:16px;}
  .article-tag .star{ color:var(--gold); width:0.55em; height:0.55em; }
  .article-hero h1{ font-size:clamp(1.7rem,6vw,2.3rem); line-height:1.25; margin-bottom:14px;}
  .article-meta{ font-size:0.82rem; color:rgba(243,238,226,0.45); }

  .article-body{ max-width:680px; margin:0 auto; padding:52px 24px 20px; }
  .article-body p{ font-size:1.05rem; line-height:1.85; color: rgba(23,35,43,0.82); margin-bottom:22px; }
  .article-body h2{ font-size:1.35rem; margin:40px 0 16px; }
  .article-body blockquote{
    font-family:'Spectral',serif; font-style:italic; font-size:1.2rem; line-height:1.6;
    border-left:3px solid var(--gold); padding-left:20px; margin:28px 0; color: rgba(23,35,43,0.7);
  }
  .article-sources{
    max-width:680px; margin:24px auto 0; padding:24px 24px 0; border-top:1px solid rgba(23,35,43,0.1);
  }
  .article-sources h3{ font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(23,35,43,0.45); margin-bottom:10px; font-weight:600;}
  .article-sources ul{ list-style:none; }
  .article-sources li{ font-size:0.82rem; color:rgba(23,35,43,0.5); margin-bottom:6px; line-height:1.5;}
  .article-nav{ max-width:680px; margin:44px auto 0; padding:0 24px 60px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
  .article-nav a{ font-size:0.88rem; font-weight:600; color:var(--teal-deep); display:flex; align-items:center; gap:6px;}

  /* ---------- Links / resources table ---------- */
  .links-table-wrap{ overflow-x:auto; border:1px solid rgba(23,35,43,0.08); border-radius:4px 18px 4px 18px; margin-bottom:16px;}
  table.links-table{ width:100%; border-collapse:collapse; font-size:0.88rem; background:white; min-width:640px;}
  table.links-table th{
    text-align:left; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase;
    color: var(--gold-soft); background: var(--ink-night); padding:14px 16px; font-weight:600;
  }
  table.links-table td{ padding:14px 16px; border-bottom:1px solid rgba(23,35,43,0.07); vertical-align:top; }
  table.links-table tr:last-child td{ border-bottom:none; }
  table.links-table td.occasion{ font-weight:600; color: var(--teal-deep); white-space:nowrap; }
  table.links-table td.arabic{ font-family:'Spectral',serif; font-size:1.05rem; direction:rtl; }
  table.links-table a{ color: var(--teal-deep); font-weight:600; border-bottom:1px solid currentColor; }
  .links-group-title{ font-family:'Spectral',serif; font-size:1.1rem; margin: 40px 0 14px; }
  .links-note{ font-size:0.82rem; color:rgba(23,35,43,0.5); font-style:italic; margin-bottom:8px; }
  .plain-links li{ font-size:0.92rem; line-height:1.8; }
  .plain-links a{ color: var(--teal-deep); font-weight:600; }

  @media (max-width:560px){
    .times-row{ grid-template-columns:repeat(5,1fr); gap:6px;}
    .time-card{ padding:10px 2px; }
    .time-card .time{ font-size:0.85rem; }
    .brand-badge{ width:34px; height:34px; }
    .brand-text .brand-sub{ display:none; }
  }