:root {
      /* TODO: Replace these with SMG's official colours if available. */
      --smg-primary: #632340;   /* deep school blue */
      --smg-secondary: #f2c11a; /* gold */
      --smg-accent: #00bfa6;    /* fun contrast (teal) */
      --text: #132235;
      --muted: #4d5b73;
      --bg: #f8fafc;
      --card: #ffffff;
      --ring: rgba(31,58,147,.25);
      --radius: 16px;
      --shadow: 0 10px 30px rgba(16,24,40,.1);
      --danger: #d7263d;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; font-family: Nunito, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: var(--bg); }
    a { color: var(--smg-primary); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .container { width: min(1100px, 92%); margin: 0 auto; }

    /* Masthead (top hero banner) */
    .masthead {
      position: relative;
      background-image: url('/assets/images/colour-run2.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: clamp(280px, 36vh, 520px);
      display: flex;
      align-items: center;
      isolation: isolate;
    }
    .masthead::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 85%);
      z-index: 0;
    }
    .masthead-inner { width: min(1100px, 92%); margin: 0 auto; padding: clamp(28px, 4vw, 56px) 0; display: grid; grid-template-columns: 1fr; }
    .masthead-content { max-width: 820px; color: #fff; z-index: 1; }
    .masthead-title { font-size: clamp(30px, 3.2vw + 20px, 64px); line-height: 1.06; margin: 0 0 .6rem; text-wrap: balance; }
    .masthead-sub { font-size: clamp(15px, 1vw + 12px, 20px); opacity: .95; max-width: 60ch; }
    @media (max-width: 900px) {
      .masthead { background-position: 60% center; }
      .masthead-title { font-size: clamp(28px, 5vw + 12px, 44px); }
      .masthead-sub { max-width: 100%; }
    }

    /* Header */
    header {
      position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(120%) blur(10px);
      background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
      border-bottom: 1px solid rgba(0,0,0,.06);
    }
    .nav { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
    .brand { display:flex; align-items:center; gap:.75rem; font-weight:800; letter-spacing:.2px; }
    .brand-logo { width:36px; height:36px; border-radius:10px; background: linear-gradient(135deg, var(--smg-primary), var(--smg-secondary)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
    .nav a { font-weight:700; }
    .nav-links { display:flex; gap: 1rem; align-items:center; }
    .btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:800; border-radius:999px; padding:.7rem 1.1rem; border: 2px solid transparent; transition:.2s;
      background: var(--smg-primary); color:#fff; box-shadow: var(--shadow); }
    .btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
    .btn-outline { background: #fff; color: var(--smg-primary); border-color: var(--smg-primary); box-shadow:none; }

    .nav-right { display:flex; gap:.6rem; align-items:center; }
    .icon { width:18px; height:18px; display:inline-block; line-height:0; }
    .icon svg { width:100%; height:100%; }
    .btn-icon { background:#fff; color:var(--smg-primary); border:1px solid rgba(0,0,0,.12); padding:.5rem .7rem; }
    .btn-icon:hover { box-shadow:0 0 0 3px var(--ring); }
    .hide { display:none !important; }
    .admin-badge { font-size:.72rem; font-weight:800; padding:.18rem .45rem; border-radius:999px; background:#eef3ff; color:var(--smg-primary); border:1px solid #dbe6ff; }
    .role-badge { font-size:.72rem; font-weight:800; padding:.18rem .45rem; border-radius:999px; background:#fff3f5; color:var(--danger); border:1px solid #ffd7df; }

    /* Hero */
    .hero { position: relative; overflow: clip; }
    .hero-inner { display:grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items:center; padding: 48px 0 30px; }
    .hero h1 { font-size: clamp(32px, 3.2vw + 16px, 56px); line-height: 1.05; margin: 0 0 .6rem; }
    .hero p { font-size: clamp(16px, 1.1vw + 12px, 20px); color: var(--muted); margin: 0 0 1.1rem; }
    .hero-badges { display:flex; gap:.6rem; flex-wrap:wrap; }
    .badge { background: #fff; border:1px solid rgba(0,0,0,.06); padding:.45rem .7rem; border-radius:999px; font-weight:800; font-size:.85rem; color: var(--smg-primary); }
    .hero-art { position:relative; height: 340px; border-radius: calc(var(--radius) + 8px); background: linear-gradient(135deg, rgba(31,58,147,.1), rgba(242,193,26,.12)); border:1px dashed rgba(31,58,147,.3); display:grid; place-items:center; box-shadow: var(--shadow); }
    .confetti { position:absolute; inset:0; background: radial-gradient(600px 260px at 20% 30%, rgba(0,191,166,.18), transparent),
                                     radial-gradient(420px 200px at 80% 20%, rgba(242,193,26,.28), transparent),
                                     radial-gradient(520px 300px at 60% 90%, rgba(31,58,147,.18), transparent); }

    /* Sections */
    section { padding: 56px 0; }
    h2 { font-size: clamp(24px, 1.8vw + 14px, 36px); margin: 0 0 18px; }
    .lead { color: var(--muted); margin: 0 0 26px; }

    /* Cards */
    .grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
    .col-4 { grid-column: span 4; }
    .col-6 { grid-column: span 6; }
    .col-8 { grid-column: span 8; }
    .col-12 { grid-column: span 12; }
    @media (max-width: 900px) {
      .hero-inner { grid-template-columns: 1fr; }
      .col-4,.col-6,.col-8,.col-12 { grid-column: span 12; }
    }
    .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,.06); }
    .card .body { padding: 18px; }
    .chip { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:800; color:#063; background: #dff7f2; border:1px solid #b5efe5; border-radius:999px; padding:.2rem .55rem; }

    /* News list */
    .news-item { display:flex; gap: 14px; align-items:flex-start; padding: 14px 0; border-bottom: 1px dashed rgba(0,0,0,.08); }
    .news-item:last-child { border-bottom:none; }
    .news-item time { font-weight:800; color: var(--smg-primary); min-width: 88px; }
    .news-item a { font-weight:800; }

    /* Event List */
    .event { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; border:1px solid rgba(0,0,0,.06); border-radius:12px; }
    .event strong { font-size: 1.02rem; }
    .event .tags { display:flex; gap:.4rem; flex-wrap:wrap; }
    .tag { font-size:.75rem; background: #eef3ff; color: var(--smg-primary); padding:.22rem .5rem; border-radius:999px; border:1px solid #dbe6ff; font-weight:800; }

    /* Calendar */
    .calendar { --cell: 86px; background: var(--card); padding: 12px; border-radius: var(--radius); border:1px solid rgba(0,0,0,.06); box-shadow: var(--shadow); }
    .cal-head { display:flex; align-items:center; justify-content:space-between; padding: 6px 8px 12px; }
    .cal-title { font-weight:800; font-size:1.1rem; }
    .cal-controls { display:flex; gap: 8px; }
    .icon-btn { width: 36px; height: 36px; border-radius: 10px; border:1px solid rgba(0,0,0,.08); background:#fff; display:grid; place-items:center; cursor:pointer; }
    .icon-btn:hover { border-color: var(--smg-primary); box-shadow: 0 0 0 3px var(--ring); }
    .cal-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 6px; align-items:start; }
    .dow { color: var(--muted); height:auto; padding:6px 0; display:grid; place-items:center; font-weight:800; }
    .day { position:relative; border-radius: 12px; border:1px solid rgba(0,0,0,.06); background:#fff; cursor:pointer; transition:.15s;
      display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; padding:6px; gap:4px; min-height: var(--cell); height:auto; }
    .day:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
    .date-num { position:absolute; top:4px; right:6px; font-size:.78rem; font-weight:800; color: var(--muted); }
    .pill { display:block; width:100%; border-radius:8px; padding:3px 6px; font-size:.74rem; font-weight:800; line-height:1.1; 
      border:1px solid #dbe6ff; background:#eef3ff; color: var(--smg-primary); overflow:hidden; }
    .pill.volunteer { border-color:#b5efe5; background:#dff7f2; color:#045b55; }
    .pill.community { border-color:#ffe59d; background:#fff8e1; color:#7a5f02; }
    .pill + .pill { margin-top:2px; }
    .pill.more { background:transparent; border-style:dashed; border-color:#cfd8ff; color:var(--muted); font-weight:700; }
    .pill .txt { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .day.muted .pill { opacity:.75; }
    .day.muted { color:#98a1b3; background: #fbfbfd; }
    .dot { position:absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width:8px; height:8px; border-radius:50%; background: var(--smg-accent); }
    .today { outline: 2px solid var(--smg-secondary); }

    /* Dialog */
    dialog { border:none; border-radius: 18px; padding:0; width:min(680px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
    dialog::backdrop { background: rgba(6,14,30,.5); }
    .modal { background:#fff; border-radius:18px; overflow:hidden; }
    .modal header { position:sticky; top:0; background:#fff; padding: 16px 18px; border-bottom:1px solid rgba(0,0,0,.06); display:flex; align-items:center; justify-content:space-between; }
    .modal .content { padding: 18px; }
    .close { border:none; background:#fff; border-radius:10px; width:36px; height:36px; display:grid; place-items:center; cursor:pointer; }
    .close:hover { box-shadow:0 0 0 3px var(--ring); }

    /* Footer */
    footer { background: linear-gradient(180deg, rgba(31,58,147,.04), rgba(31,58,147,.08)); border-top: 1px solid rgba(0,0,0,.06); margin-top: 32px; }
    .footer-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; padding: 28px 0; }
    .footer-col { grid-column: span 4; }
    .small { color: var(--muted); font-size:.92rem; }
    @media (max-width: 900px) { .footer-col { grid-column: span 12; } }

    /* Fun accent bars */
    .accent-bar { height: 8px; background: linear-gradient(90deg, var(--smg-primary), var(--smg-secondary), var(--smg-accent)); }

    /* ===== Minimal inline fallback so mobile nav works even without external CSS ===== */
    /* Desktop default */
    .hamburger{ display:none; background:none; border:0; padding:10px; border-radius:10px; cursor:pointer; }
    .hamburger:focus-visible{ box-shadow:0 0 0 3px rgba(31,58,147,.25); }
    .hamburger .bar{ display:block; width:26px; height:3px; border-radius:2px; background:#132235; margin:5px 0; }

    /* Off-canvas drawer and overlay */
    .mobile-menu-overlay{ position:fixed; inset:0; background:rgba(6,14,30,.4); z-index:80; display:none; }
    .mobile-menu-overlay.show{ display:block; }
    .mobile-menu{ position:fixed; top:0; left:-280px; width:280px; height:100%; background:#fff; box-shadow:2px 0 24px rgba(0,0,0,.18); z-index:81; padding:18px; display:flex; flex-direction:column; gap:12px; transition:left .25s ease; }
    .mobile-menu.open{ left:0; }
    .mobile-menu a, .mobile-menu button{ display:block; text-align:left; font-weight:700; color:#132235; text-decoration:none; padding:10px 8px; border-radius:10px; border:1px solid rgba(0,0,0,.06); background:#fff; }
    .mobile-menu .btnish{ border:2px solid #632340; color:#632340; background:#fff; }

    /* Keep desktop nav visible by default */
    .nav-links{ display:flex; gap:1rem; align-items:center; }

    /* Phone breakpoint */
    @media (max-width: 900px){
    .nav-links{ display:none !important; }
    .hamburger{ display:block !important; }
  }