/* ============================================================================
   23rd Provincial Scouts Jamboree - Kagawasan, Dimataling - Sept 2-6, 2026
   Scoped under .sj26 so nothing leaks into the GWT government theme.

   Visual direction: dark editorial / luxury travel, per the supplied references
   (cinematic full-bleed hero + oversized display type + pill section badges +
   rounded card grids + gold accents on deep green-brown + stat strip).
   The palette is not borrowed - it is the event's own: the deep forest of the
   emblem's laurel, the routed-timber brown of its lettering, the manila-rope
   orange of the actual camp lashings, and BSP gold. Red is reserved
   EXCLUSIVELY for emergency, never decoration.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

.sj26{
  --bg:#0f1a12; --bg2:#152018; --panel:#1b2b20; --panel2:#223528;
  --bark:#241a12; --bark2:#33241a;
  --cream:#f4ecdc; --dim:#b9ad97; --faint:#8a8072;
  --gold:#d9a84e; --gold-lt:#f0c877;
  --rope:#e0842a; --rope-dk:#b8661a;
  --forest:#2f6b41; --forest-lt:#47915b;
  --alert:#e2545a; --alert-dk:#b8353b;
  --line:rgba(244,236,220,.13); --line2:rgba(244,236,220,.07);
  --disp:'Alfa Slab One', Georgia, 'Times New Roman', serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --r:16px;

  font-family:var(--body); color:var(--cream); line-height:1.65;
  background:var(--bg); overflow-x:clip; -webkit-text-size-adjust:100%;
}
.sj26 *,.sj26 *::before,.sj26 *::after{box-sizing:border-box;}
.sj26 img{max-width:100%; height:auto; display:block;}
.sj26 a{color:var(--gold);}
.sj26 h1,.sj26 h2,.sj26 h3,.sj26 h4{font-family:var(--disp); font-weight:400; line-height:1.1; margin:0;}
.sj26 p{margin:0 0 1em;}
.sj26 ul{margin:0; padding:0; list-style:none;}
.sj26 :focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;}

.sj26 .bleed{width:100vw; margin-left:calc(50% - 50vw);}
.sj26 .wrap{width:min(1180px,91vw); margin-inline:auto;}

/* pill badge above every section title (reference language) */
.sj26 .pill{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line);
  border-radius:999px; padding:6px 16px; font-size:.7rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--gold);
  background:rgba(217,168,78,.07); margin-bottom:16px;
}
.sj26 .pill::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold);}

/* ---------- MASTHEAD ---------- */
.sj26 .mast{
  background:#16241a; border-bottom:2px solid var(--gold);
  position:sticky; top:0; z-index:60;
}
.sj26 .mast-in{
  width:min(1600px,96vw); margin-inline:auto; display:flex; align-items:center;
  gap:16px; padding:9px 0; min-height:62px;
}
.sj26 .mast-brand{display:flex; align-items:center; gap:11px; flex:0 0 auto; text-decoration:none;}
.sj26 .mast-brand img{width:44px; height:44px; border-radius:50%; background:#fff; padding:2px; object-fit:contain;}
.sj26 .mast-brand .t1{display:block; font-family:var(--disp); font-size:.62rem; color:var(--gold); line-height:1.15; letter-spacing:.04em;}
.sj26 .mast-brand .t2{display:block; font-family:var(--disp); font-size:.86rem; color:#fff; line-height:1.15;}
.sj26 .mast-brand .t3{display:block; font-size:.5rem; color:var(--dim); letter-spacing:.08em; text-transform:uppercase; margin-top:2px;}
@media(max-width:1450px){.sj26 .mast-brand .t3{display:none;}}
.sj26 .mast-nav{
  flex:1 1 auto; display:flex; align-items:center; gap:3px; justify-content:flex-end;
  overflow-x:auto; scrollbar-width:none;
}
.sj26 .mast-nav::-webkit-scrollbar{display:none;}
/* Emphasized TABS: the masthead is now the only navigation surface, so each
   item reads as a real tab - bigger target, gold underline on the active
   section, not a faint text link lost against the photo behind it. */
.sj26 .mast-nav a{
  flex:0 0 auto; position:relative; display:flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--cream); font-size:.78rem; font-weight:800;
  letter-spacing:.045em; text-transform:uppercase; white-space:nowrap;
  padding:13px 15px 11px; border-radius:10px 10px 0 0;
  border-bottom:3px solid transparent;
  transition:background .16s,color .16s,border-color .16s;
}
.sj26 .mast-nav a svg{width:16px;height:16px;flex:0 0 auto; opacity:.9;}
.sj26 .mast-nav a:hover,.sj26 .mast-nav a:focus-visible{
  color:#fff; background:rgba(255,255,255,.09); border-bottom-color:rgba(217,168,78,.55);
}
.sj26 .mast-nav a.on{
  background:rgba(217,168,78,.16); color:var(--gold-lt);
  border-bottom-color:var(--gold);
}
.sj26 .mast-nav a.on svg{opacity:1; color:var(--gold);}
.sj26 .mast-nav a.ext{color:var(--gold);}
.sj26 .mast-nav a.sos{
  background:#c1272d; color:#fff; border-radius:999px; padding:11px 18px;
  border-bottom-color:transparent; margin-left:6px;
  box-shadow:0 4px 14px rgba(193,39,45,.4);
}
.sj26 .mast-nav a.sos:hover,.sj26 .mast-nav a.sos:focus-visible{
  background:#95171c; color:#fff; border-bottom-color:transparent;
}
@media(max-width:1150px){
  .sj26 .mast-nav a.sos span{display:none;}
  .sj26 .mast-nav a.sos{padding:11px 14px;}
}
@media(max-width:900px){
  .sj26 .mast-brand .t1,.sj26 .mast-brand .t3{display:none;}
  .sj26 .mast-in{gap:10px;}
  .sj26 .mast-nav a{font-size:.72rem; padding:12px 11px 10px;}
}

/* ---------- COUNTDOWN BOXES ---------- */
.sj26 .cd{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.sj26 .cd-box{
  min-width:clamp(62px,10vw,86px); text-align:center; padding:11px 10px;
  background:rgba(22,36,26,.72); border:1px solid rgba(217,168,78,.4);
  border-radius:12px; backdrop-filter:blur(4px);
}
.sj26 .cd-box b{display:block; font-family:var(--disp); font-size:clamp(1.4rem,4.4vw,2.1rem); color:#fff; line-height:1;}
.sj26 .cd-box span{display:block; margin-top:5px; font-size:.6rem; letter-spacing:.14em; color:var(--gold); font-weight:800;}
.sj26 .cd-tag{
  display:inline-block; background:var(--gold); color:#241a12; font-weight:800;
  border-radius:999px; padding:10px 22px; font-size:clamp(.8rem,2.5vw,.95rem);
  letter-spacing:.03em;
}

/* ---------- HERO QR PANEL ---------- */
.sj26 .qr-panel{
  position:absolute; right:clamp(14px,3vw,44px); bottom:clamp(150px,17vw,210px);
  background:#fff; border-radius:14px; padding:12px; text-align:center;
  box-shadow:0 14px 40px rgba(0,0,0,.5); width:clamp(132px,15vw,178px); z-index:3;
}
.sj26 .qr-panel .lbl{font-size:.62rem; font-weight:800; letter-spacing:.09em; color:#16241a; line-height:1.3; margin-bottom:7px; text-transform:uppercase;}
.sj26 .qr-panel img{width:100%; height:auto; display:block; border-radius:6px;}
@media(max-width:820px){.sj26 .qr-panel{display:none;}}

/* ---------- QUICK LINK CARDS ---------- */
.sj26 .quick{background:#16241a; padding:clamp(20px,3vw,34px) 0; border-bottom:1px solid var(--line);}
.sj26 .quick-in{
  width:min(1600px,94vw); margin-inline:auto;
  display:grid; gap:11px; grid-template-columns:repeat(2,1fr);
}
@media(min-width:700px){.sj26 .quick-in{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1100px){.sj26 .quick-in{grid-template-columns:repeat(6,1fr);}}
.sj26 .qcard{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px;
  background:rgba(47,107,65,.16); border:1px solid rgba(217,168,78,.24);
  border-radius:13px; padding:18px 13px; text-decoration:none; color:var(--cream);
  transition:transform .17s, border-color .17s, background .17s;
}
.sj26 .qcard:hover,.sj26 .qcard:focus-visible{
  transform:translateY(-4px); border-color:var(--gold); background:rgba(47,107,65,.28); color:var(--cream);
}
.sj26 .qcard svg{width:30px;height:30px;color:var(--gold);}
.sj26 .qcard b{font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:#fff; line-height:1.25;}
.sj26 .qcard small{font-size:.71rem; color:var(--dim); line-height:1.4;}

/* ---------- HERO : cinematic full-bleed ---------- */
.sj26 .hero{
  position:relative; min-height:min(84vh,820px); display:flex; align-items:flex-end;
  padding:clamp(70px,13vw,140px) 0 clamp(28px,5vw,54px); isolation:isolate;
}
.sj26 .hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url('https://wowjambo26.govportalsolutions.com/wp-content/uploads/2026/09/scoutjam26-welcome-arch-banner-full.webp') center/cover no-repeat;
}
.sj26 .hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  /* Scrim tuned against the actual hero photo: the arch banner behind the
     masthead is bright and busy, so the mid-stop stays dark enough to keep
     the council line legible in outdoor sunlight. */
  background:
    linear-gradient(180deg,
      rgba(15,26,18,.74) 0%,
      rgba(15,26,18,.60) 30%,
      rgba(15,26,18,.86) 66%,
      rgba(15,26,18,.96) 88%,
      var(--bg) 100%),
    radial-gradient(120% 78% at 50% 100%, rgba(15,26,18,.9), transparent 62%);
}
.sj26 .hero-top{display:flex; align-items:center; gap:16px; margin-bottom:clamp(18px,3vw,28px);}
.sj26 .hero-logo{
  width:clamp(74px,13vw,112px); flex:0 0 auto; border-radius:13px;
  background:#fff; padding:7px; box-shadow:0 10px 34px rgba(0,0,0,.55);
}
.sj26 .hero-org{font-size:clamp(.66rem,2.1vw,.78rem); letter-spacing:.15em; text-transform:uppercase; color:var(--gold); font-weight:700; line-height:1.6; text-shadow:0 2px 10px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.9);}
.sj26 .hero-org span{display:block; color:#e2d9c6; letter-spacing:.09em; font-weight:600;}
.sj26 .hero h1{
  font-size:clamp(2.1rem,9.2vw,5.6rem); text-transform:uppercase; color:#fff;
  letter-spacing:-.5px; text-shadow:0 4px 30px rgba(0,0,0,.6);
  margin-bottom:.2em;
}
.sj26 .hero h1 .n{color:var(--gold);}
.sj26 .hero h1 .sm{display:block; font-size:.52em; color:var(--cream); letter-spacing:0;}
.sj26 .theme-line{
  font-family:var(--disp); font-size:clamp(.94rem,3vw,1.5rem); color:var(--cream);
  max-width:26ch; line-height:1.38; margin-bottom:1.1em;
}
.sj26 .theme-line em{color:var(--gold-lt); font-style:normal;}
.sj26 .hero-meta{display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:1.2em;}
.sj26 .chip{
  border:1px solid var(--line); background:rgba(255,255,255,.06); backdrop-filter:blur(4px);
  border-radius:999px; padding:8px 17px; font-size:clamp(.76rem,2.4vw,.92rem); font-weight:600;
}
.sj26 .chip b{color:var(--gold);}
.sj26 .countdown{
  display:inline-flex; align-items:center; gap:10px; background:var(--rope); color:#fff;
  font-weight:800; border-radius:999px; padding:11px 22px;
  font-size:clamp(.82rem,2.6vw,1rem); box-shadow:0 8px 28px rgba(224,132,42,.42);
}
.sj26 .countdown .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:sjpulse 1.9s ease-in-out infinite;}
@keyframes sjpulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.65);}}

/* ---------- STAT STRIP ---------- */
.sj26 .stats{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg2);}
.sj26 .stats-in{display:grid; grid-template-columns:repeat(2,1fr);}
@media(min-width:760px){.sj26 .stats-in{grid-template-columns:repeat(4,1fr);}}
.sj26 .stat{padding:clamp(20px,3.4vw,32px) 14px; text-align:center; border-right:1px solid var(--line2); border-bottom:1px solid var(--line2);}
@media(min-width:760px){.sj26 .stat{border-bottom:0;} .sj26 .stat:last-child{border-right:0;}}
.sj26 .stat b{display:block; font-family:var(--disp); font-size:clamp(1.7rem,5.4vw,2.7rem); color:var(--gold); line-height:1;}
.sj26 .stat span{display:block; margin-top:8px; font-size:clamp(.68rem,2.1vw,.78rem); letter-spacing:.13em; text-transform:uppercase; color:var(--dim); font-weight:600;}

/* ---------- NAV ---------- */
.sj26 .nav{position:sticky; top:0; z-index:40; background:rgba(15,26,18,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.sj26 .nav-in{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:10px 0; width:min(1180px,91vw); margin-inline:auto;}
.sj26 .nav-in::-webkit-scrollbar{display:none;}
.sj26 .nav a{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--dim); font-weight:700; font-size:clamp(.77rem,2.3vw,.88rem);
  padding:10px 17px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s;
}
.sj26 .nav a:hover,.sj26 .nav a:focus-visible{color:var(--cream); border-color:var(--line); background:rgba(255,255,255,.05);}
.sj26 .nav a.on{background:var(--gold); color:#241a12; border-color:var(--gold);}
.sj26 .nav a.sos{background:var(--alert-dk); color:#fff; border-color:var(--alert);}
.sj26 .nav a.sos:hover{background:var(--alert); color:#fff;}
.sj26 .nav svg{width:16px;height:16px;flex:0 0 auto;}

/* ---------- SHELL: left rail + main + right rail (portal layout) ----------
   Mobile keeps one column and the nav stays a sticky horizontal strip, which is
   what a QR visitor on a phone actually needs. The rails only appear once there
   is genuinely room for them. */
/* Two columns: content + quick-info rail. The left navigation rail was
   removed - navigation now lives entirely in the masthead tabs, which frees
   this much width for the actual content. */
.sj26 .shell{width:min(1380px,96vw); margin-inline:auto; display:block;}
@media(min-width:1100px){
  .sj26 .shell{
    display:grid; grid-template-columns:minmax(0,1fr) 320px;
    gap:30px; align-items:start;
  }
}
.sj26 .col-main{min-width:0;}

/* right rail cards */
.sj26 .rail-r{padding:0 0 clamp(30px,5vw,60px); min-width:0;}
@media(min-width:1100px){.sj26 .rail-r{position:sticky; top:78px; padding:22px 0;}}
.sj26 .rcards{display:grid; gap:13px; grid-template-columns:1fr;}
@media(min-width:640px) and (max-width:1339px){.sj26 .rcards{grid-template-columns:repeat(2,1fr);}}
.sj26 .rcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:17px;}
.sj26 .rcard h4{
  font-family:var(--body); font-size:.66rem; font-weight:800; letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px;
}
.sj26 .rcard.urgent{border-color:rgba(226,84,90,.4); background:rgba(226,84,90,.08);}
.sj26 .rcard.urgent h4{color:var(--alert);}
.sj26 .rc-call{
  display:flex; align-items:center; gap:11px; background:var(--alert-dk); color:#fff;
  text-decoration:none; font-weight:800; padding:13px 15px; border-radius:11px; font-size:.95rem;
}
.sj26 .rc-call:hover,.sj26 .rc-call:focus-visible{background:var(--alert); color:#fff;}
.sj26 .rc-call svg{width:19px;height:19px;flex:0 0 auto;}
.sj26 .rc-call b{font-family:var(--disp); font-size:1.15rem;}
.sj26 .rc-note{font-size:.76rem; color:var(--faint); margin:10px 0 0; line-height:1.55;}
.sj26 .rc-kv{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line2); font-size:.84rem;}
.sj26 .rc-kv:last-child{border-bottom:0;}
.sj26 .rc-kv .k{flex:0 0 74px; color:var(--faint); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; padding-top:3px;}
.sj26 .rc-kv .v{flex:1 1 auto; color:var(--cream);}
.sj26 .rc-kv .v b{color:var(--gold);}
.sj26 .rc-count{font-family:var(--disp); font-size:1.5rem; color:var(--gold); line-height:1.15;}
.sj26 .rc-sub{font-size:.78rem; color:var(--faint); margin-top:5px;}
.sj26 .rc-list li{display:flex; gap:9px; padding:7px 0; font-size:.83rem; color:var(--cream);}
.sj26 .rc-list li::before{content:""; flex:0 0 auto; width:5px; height:5px; border-radius:50%; background:var(--gold); margin-top:8px;}

/* ---------- SECTIONS ---------- */
.sj26 .sec{padding:clamp(46px,8vw,96px) 0; scroll-margin-top:66px; position:relative;}
.sj26 .sec.brown{background:var(--bark);}
.sj26 .sec.deep{background:#0b130d;}
/* inside the shell the column already provides the measure, and the coloured
   section panels read as cards rather than full-width bands */
@media(min-width:1000px){
  .sj26 .col-main .sec{padding:clamp(30px,3.4vw,52px) 0; scroll-margin-top:22px;}
  .sj26 .col-main .sec .wrap{width:100%;}
  .sj26 .col-main .sec.brown,
  .sj26 .col-main .sec.deep{border-radius:var(--r); padding-inline:clamp(20px,2.6vw,34px);}
}
.sj26 .sec-head{margin-bottom:clamp(26px,4.4vw,46px); max-width:64ch;}
.sj26 .sec-head h2{font-size:clamp(1.65rem,6vw,3.1rem); color:#fff; text-transform:uppercase; letter-spacing:-.3px;}
.sj26 .sec-head h2 em{color:var(--gold); font-style:normal;}
.sj26 .sec-head p{margin:.7em 0 0; color:var(--dim); font-size:clamp(.93rem,2.6vw,1.05rem);}
.sj26 .rule{height:1px; background:var(--line); margin:clamp(26px,4vw,40px) 0;}

/* ---------- NOTICE ---------- */
.sj26 .notice{
  display:flex; gap:13px; align-items:flex-start; background:rgba(217,168,78,.09);
  border:1px solid rgba(217,168,78,.3); border-left:4px solid var(--gold);
  border-radius:12px; padding:15px 17px; margin-bottom:26px;
  font-size:clamp(.85rem,2.4vw,.95rem); color:var(--cream);
}
.sj26 .notice svg{width:21px;height:21px;flex:0 0 auto;color:var(--gold);margin-top:2px;}
.sj26 .notice b{color:var(--gold-lt);}

/* ---------- SCHEDULE ---------- */
.sj26 .days{display:grid; gap:12px;}
.sj26 .day{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .2s;}
.sj26 .day[open]{border-color:rgba(217,168,78,.4);}
.sj26 .day summary{display:flex; align-items:center; gap:15px; cursor:pointer; padding:16px 18px; list-style:none;}
.sj26 .day summary::-webkit-details-marker{display:none;}
.sj26 .day summary:hover{background:var(--panel2);}
.sj26 .daynum{
  flex:0 0 auto; width:56px; height:56px; border-radius:13px; border:1px solid var(--line);
  background:rgba(217,168,78,.1); color:var(--gold);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--disp); line-height:1;
}
.sj26 .daynum .d{font-size:1.36rem;}
.sj26 .daynum .m{font-size:.55rem; letter-spacing:.11em; margin-top:4px; color:var(--dim);}
.sj26 .day:first-of-type .daynum{background:var(--rope); color:#fff; border-color:var(--rope);}
.sj26 .day:first-of-type .daynum .m{color:rgba(255,255,255,.85);}
.sj26 .day:last-of-type .daynum{background:var(--forest); color:#fff; border-color:var(--forest-lt);}
.sj26 .day:last-of-type .daynum .m{color:rgba(255,255,255,.85);}
.sj26 .dayinfo{flex:1 1 auto; min-width:0;}
.sj26 .dayinfo h3{font-size:clamp(1rem,3.1vw,1.24rem); color:#fff; margin-bottom:3px;}
.sj26 .dayinfo span{font-size:.82rem; color:var(--faint); font-weight:600;}
.sj26 .chev{flex:0 0 auto; width:19px; height:19px; color:var(--gold); transition:transform .22s;}
.sj26 .day[open] .chev{transform:rotate(180deg);}
.sj26 .slots{border-top:1px solid var(--line); padding:6px 18px 16px;}
.sj26 .slot{display:flex; gap:15px; padding:13px 0; border-bottom:1px solid var(--line2);}
.sj26 .slot:last-child{border-bottom:0;}
.sj26 .slot .t{flex:0 0 62px; font-weight:800; font-size:.76rem; letter-spacing:.06em; color:var(--faint); padding-top:2px;}
.sj26 .slot .b{flex:1 1 auto; min-width:0;}
.sj26 .slot .b strong{display:block; font-size:.98rem; color:var(--cream); font-weight:700;}
.sj26 .slot .b em{font-style:normal; font-size:.86rem; color:var(--faint); display:block; margin-top:2px;}
.sj26 .tbc-pill{
  display:inline-block; background:rgba(217,168,78,.14); color:var(--gold-lt);
  border:1px dashed rgba(217,168,78,.45); border-radius:6px; padding:1px 8px;
  font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}

/* ---------- RULES ---------- */
.sj26 .rules{display:grid; gap:16px; grid-template-columns:1fr;}
@media(min-width:840px){.sj26 .rules{grid-template-columns:1fr 1fr;}}
.sj26 .rulecard{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;}
.sj26 .rulecard.yes{border-top:3px solid var(--forest-lt);}
.sj26 .rulecard.no{border-top:3px solid var(--alert);}
.sj26 .rulehead{display:flex; align-items:center; gap:12px; padding:17px 19px; border-bottom:1px solid var(--line);}
.sj26 .rulehead h3{font-size:clamp(1.02rem,3.2vw,1.28rem); text-transform:uppercase; color:#fff;}
.sj26 .rulehead .ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.sj26 .rulecard.yes .ico{background:rgba(71,145,91,.2); color:var(--forest-lt);}
.sj26 .rulecard.no .ico{background:rgba(226,84,90,.16); color:var(--alert);}
.sj26 .rulehead svg{width:18px;height:18px;}
.sj26 .rulelist{padding:4px 19px 16px;}
.sj26 .rulelist li{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line2); font-size:clamp(.88rem,2.4vw,.96rem);}
.sj26 .rulelist li:last-child{border-bottom:0;}
.sj26 .rulelist .m{flex:0 0 auto; width:21px; height:21px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:2px;}
.sj26 .rulecard.yes .m{background:rgba(71,145,91,.22); color:var(--forest-lt);}
.sj26 .rulecard.no .m{background:rgba(226,84,90,.18); color:var(--alert);}
.sj26 .rulelist svg{width:12px;height:12px;}
.sj26 .rulelist b{display:block; color:var(--cream); font-weight:700;}
.sj26 .rulelist span span{color:var(--faint); font-size:.87em; font-weight:400;}

/* ---------- EMERGENCY ---------- */
.sj26 .sos-grid{display:grid; gap:13px; grid-template-columns:1fr;}
@media(min-width:640px){.sj26 .sos-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.sj26 .sos-grid{grid-template-columns:repeat(3,1fr);}}
.sj26 .sos{
  display:flex; align-items:center; gap:14px; background:var(--panel); border-radius:var(--r);
  padding:16px 17px; text-decoration:none; color:var(--cream);
  border:1px solid var(--line); border-left:4px solid var(--alert);
  transition:transform .16s, background .16s, border-color .16s; min-height:80px;
}
.sj26 a.sos:hover,.sj26 a.sos:focus-visible{transform:translateY(-3px); background:var(--panel2); color:var(--cream);}
.sj26 .sos.live{border-left-color:var(--forest-lt); background:rgba(47,107,65,.16);}
.sj26 .sos.pending{border-left-color:rgba(217,168,78,.45); background:rgba(217,168,78,.05); cursor:default;}
.sj26 .sos .ic{flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(226,84,90,.14); color:var(--alert);}
.sj26 .sos.live .ic{background:rgba(71,145,91,.24); color:var(--forest-lt);}
.sj26 .sos.pending .ic{background:rgba(217,168,78,.13); color:var(--gold);}
.sj26 .sos .ic svg{width:22px;height:22px;}
.sj26 .sos .tx{flex:1 1 auto; min-width:0;}
.sj26 .sos .tx b{display:block; font-size:.94rem; line-height:1.3; color:#fff;}
.sj26 .sos .tx .num{font-family:var(--disp); font-size:1.3rem; color:var(--forest-lt); letter-spacing:.5px; display:block; margin:2px 0;}
.sj26 .sos .tx .num.pend{font-family:var(--body); font-size:.82rem; font-weight:800; color:var(--gold); letter-spacing:.04em;}
.sj26 .sos .tx small{display:block; color:var(--faint); font-size:.78rem;}

.sj26 .sos-fab{
  position:fixed; right:15px; bottom:15px; z-index:60; display:flex; align-items:center; gap:8px;
  background:var(--alert-dk); color:#fff; text-decoration:none; font-weight:800; font-size:.87rem;
  padding:13px 19px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.5);
  border:1px solid var(--alert);
}
.sj26 .sos-fab:hover,.sj26 .sos-fab:focus-visible{background:var(--alert); color:#fff;}
.sj26 .sos-fab svg{width:18px;height:18px;}
/* once the right rail is visible it already carries a permanent Call 911 card,
   so the floating button would only overlap it */
@media(min-width:1340px){.sj26 .sos-fab{display:none;}}

/* ---------- TOURISM ---------- */
.sj26 .spots{display:grid; gap:14px; grid-template-columns:1fr;}
@media(min-width:620px){.sj26 .spots{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.sj26 .spots{grid-template-columns:repeat(4,1fr);}}
.sj26 .spot{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 19px; transition:transform .18s, border-color .18s;
}
.sj26 .spot:hover{transform:translateY(-4px); border-color:rgba(217,168,78,.42);}
.sj26 .spot .badge{
  display:inline-block; font-size:.65rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold); border:1px solid rgba(217,168,78,.4);
  background:rgba(217,168,78,.08); border-radius:999px; padding:3px 11px; margin-bottom:12px;
}
.sj26 .spot h3{font-size:1.1rem; color:#fff; margin-bottom:.42em;}
.sj26 .spot p{font-size:.88rem; color:var(--faint); margin:0; line-height:1.6;}

/* CTA out to the municipality's own tourism site */
.sj26 .tour-cta{
  display:flex; align-items:center; gap:16px; margin-top:16px; text-decoration:none;
  background:linear-gradient(100deg,rgba(217,168,78,.14),rgba(217,168,78,.05));
  border:1px solid rgba(217,168,78,.42); border-radius:var(--r);
  padding:17px 19px; color:var(--cream); transition:border-color .18s, transform .18s, background .18s;
}
.sj26 .tour-cta:hover,.sj26 .tour-cta:focus-visible{
  border-color:var(--gold); transform:translateY(-2px); color:var(--cream);
  background:linear-gradient(100deg,rgba(217,168,78,.22),rgba(217,168,78,.08));
}
.sj26 .tour-cta-tx{flex:1 1 auto; min-width:0;}
.sj26 .tour-cta-tx b{display:block; font-size:clamp(.96rem,2.7vw,1.1rem); color:var(--gold-lt); margin-bottom:3px;}
.sj26 .tour-cta-tx small{display:block; font-size:.83rem; color:var(--faint); line-height:1.5;}
.sj26 .tour-cta-ic{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; background:var(--gold); color:#241a12;
}
.sj26 .tour-cta-ic svg{width:19px;height:19px;}

/* ---------- GALLERY VIEWER: one big picture, small clickable thumbs ---------- */
/* Stage on top, thumbnails in a horizontal strip beneath it. A tall narrow
   side column squeezed the labels to nothing and fought the main image for
   width - a full-width strip under the stage reads cleanly at every size. */
.sj26 .viewer{display:block; margin-top:26px;}

.sj26 .stage{
  margin:0; position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
  aspect-ratio:4/3; cursor:zoom-in;
}
.sj26 .stage img{width:100%; height:100%; object-fit:cover; display:block;}
.sj26 .stage figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:34px 18px 15px;
  background:linear-gradient(transparent,rgba(8,14,9,.94));
  color:#fff; font-size:clamp(.82rem,2.3vw,.95rem); font-weight:600; line-height:1.45;
}
.sj26 .stage .zoom{
  position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:10px;
  background:rgba(8,14,9,.66); border:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.sj26 .stage .zoom svg{width:17px;height:17px;}
.sj26 .stage .count{
  position:absolute; top:12px; left:12px; background:rgba(8,14,9,.66);
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:4px 12px;
  font-size:.74rem; font-weight:800; color:var(--gold); letter-spacing:.05em;
}

.sj26 .thumbs{
  display:grid; grid-auto-flow:column; grid-auto-columns:132px; gap:10px;
  overflow-x:auto; scrollbar-width:thin; padding:12px 2px 8px;
  scroll-snap-type:x proximity;
}
@media(min-width:900px){.sj26 .thumbs{grid-auto-columns:152px;}}
.sj26 .thumbs::-webkit-scrollbar{height:8px;}
.sj26 .thumbs::-webkit-scrollbar-thumb{background:rgba(43,32,24,.25); border-radius:99px;}
.sj26 .thumbs::-webkit-scrollbar-track{background:rgba(43,32,24,.07); border-radius:99px;}
/* each thumb carries its own visible label - a bare image strip gives the
   viewer no idea what they are about to open */
.sj26 .thumbs button{
  display:flex; flex-direction:column; text-align:left; scroll-snap-align:start;
  padding:0; border:2px solid transparent; background:var(--panel); cursor:pointer;
  border-radius:12px; overflow:hidden; position:relative;
  transition:border-color .18s, background .18s, transform .18s;
}
.sj26 .thumbs button:hover,.sj26 .thumbs button:focus-visible{border-color:var(--gold); transform:translateY(-3px);}
.sj26 .thumbs button[aria-current="true"]{border-color:var(--gold); background:rgba(217,168,78,.16);}
.sj26 .thumbs img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block; flex:0 0 auto;
}
.sj26 .thumbs .tl{
  flex:1 1 auto; min-width:0; padding:8px 9px 9px; font-size:.68rem; font-weight:700;
  line-height:1.3; color:var(--cream); display:flex; align-items:flex-start;
}
.sj26 .thumbs button[aria-current="true"] .tl{color:var(--gold-lt);}
.sj26 .shell .thumbs .tl{color:#3a2d22;}
.sj26 .shell .thumbs button[aria-current="true"] .tl{color:#7d5510;}

/* slide transition on the stage */
.sj26 .stage img{transition:opacity .42s ease;}
.sj26 .stage.fading img{opacity:0;}
.sj26 .stage .play{
  position:absolute; bottom:12px; right:12px; z-index:2;
  background:rgba(8,14,9,.68); border:1px solid rgba(255,255,255,.24); color:#fff;
  border-radius:999px; padding:7px 14px; font-size:.72rem; font-weight:800;
  cursor:pointer; letter-spacing:.05em;
}
.sj26 .stage .play:hover{background:rgba(8,14,9,.9);}

.sj26 .gal{display:grid; gap:10px; grid-template-columns:repeat(2,1fr); margin-top:26px;}
@media(min-width:720px){.sj26 .gal{grid-template-columns:repeat(3,1fr); gap:13px;}}
@media(min-width:1040px){.sj26 .gal{grid-template-columns:repeat(4,1fr);}}
.sj26 .gal button{
  padding:0; border:1px solid var(--line); background:var(--panel); cursor:pointer;
  border-radius:var(--r); overflow:hidden; position:relative; aspect-ratio:4/3;
  transition:border-color .2s, transform .2s;
}
.sj26 .gal button:hover,.sj26 .gal button:focus-visible{border-color:var(--gold); transform:translateY(-3px);}
.sj26 .gal img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease; opacity:.92;}
.sj26 .gal button:hover img{transform:scale(1.08); opacity:1;}
.sj26 .gal figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 12px 11px; margin:0;
  background:linear-gradient(transparent,rgba(8,14,9,.93)); color:#fff;
  font-size:.75rem; font-weight:700; text-align:left; line-height:1.32; letter-spacing:.01em;
}

.sj26-lb{position:fixed; inset:0; z-index:999; background:rgba(8,13,9,.96); display:none; align-items:center; justify-content:center; padding:20px;}
.sj26-lb.on{display:flex;}
.sj26-lb img{max-width:100%; max-height:78vh; border-radius:12px; box-shadow:0 24px 70px rgba(0,0,0,.7);}
.sj26-lb .cap{color:#e6dcc8; text-align:center; margin-top:15px; font-size:.9rem; max-width:62ch; font-family:system-ui,sans-serif; line-height:1.55;}
.sj26-lb .x{position:absolute; top:14px; right:16px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); color:#fff; font-size:1.55rem; cursor:pointer; line-height:1;}
.sj26-lb .x:hover{background:rgba(255,255,255,.24);}
.sj26-lb figure{margin:0; display:flex; flex-direction:column; align-items:center;}

/* ---------- MAPS ---------- */
.sj26 .maps{display:grid; gap:16px; grid-template-columns:1fr;}
@media(min-width:940px){.sj26 .maps{grid-template-columns:1.4fr 1fr;}}
.sj26 .mapbox{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--panel);}
.sj26 .mapbox iframe{display:block; width:100%; height:clamp(300px,52vw,460px); border:0; filter:saturate(.85) contrast(.95);}
.sj26 .venue{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px;}
.sj26 .venue h3{font-size:1.2rem; color:#fff; margin-bottom:.7em;}
.sj26 .kv{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line2); font-size:.9rem;}
.sj26 .kv:last-of-type{border-bottom:0;}
.sj26 .kv .k{flex:0 0 100px; font-weight:800; color:var(--faint); font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; padding-top:3px;}
.sj26 .kv .v{flex:1 1 auto; color:var(--cream);}
.sj26 .kv .v b{color:var(--gold);}
.sj26 .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%;
  margin-top:15px; background:var(--gold); color:#241a12; text-decoration:none;
  font-weight:800; padding:14px 18px; border-radius:12px; font-size:.93rem; transition:background .18s;
}
.sj26 .btn:hover,.sj26 .btn:focus-visible{background:var(--gold-lt); color:#241a12;}
.sj26 .btn svg{width:17px;height:17px;}
.sj26 .btn.alt{background:transparent; color:var(--cream); border:1px solid var(--line);}
.sj26 .btn.alt:hover{background:rgba(255,255,255,.07); color:#fff;}

/* ---------- FOOTER ---------- */
.sj26 .foot{background:#0a110c; border-top:1px solid var(--line); padding:clamp(38px,6vw,64px) 0; text-align:center;}
.sj26 .foot h3{color:var(--gold); font-size:clamp(1.15rem,4vw,1.7rem); margin-bottom:.45em; text-transform:uppercase;}
.sj26 .foot p{font-size:.9rem; color:var(--dim); margin-bottom:.7em;}
.sj26 .foot .org{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:20px 0 8px;}
.sj26 .foot .org span{border:1px solid var(--line); border-radius:999px; padding:7px 15px; font-size:.77rem; font-weight:600; color:var(--dim);}
.sj26 .foot .fine{font-size:.75rem; color:var(--faint); margin-top:16px; line-height:1.7;}

/* footer band: identity | motto + hashtags | attribution */
.sj26 .foot-band{
  display:grid; gap:20px; grid-template-columns:1fr; align-items:center; text-align:left;
  padding-bottom:26px; margin-bottom:24px; border-bottom:1px solid var(--line);
}
@media(min-width:900px){.sj26 .foot-band{grid-template-columns:auto 1fr auto; gap:30px;}}
.sj26 .fb-left{display:flex; align-items:center; gap:14px;}
.sj26 .fb-left img{width:56px; height:auto; border-radius:9px; background:#fff; padding:4px; flex:0 0 auto;}
.sj26 .fb-left b{display:block; font-family:var(--disp); font-size:1.16rem; color:var(--gold); line-height:1.15;}
.sj26 .fb-left span{display:block; font-size:.8rem; color:var(--dim); margin-top:3px;}
.sj26 .fb-mid{text-align:left;}
@media(min-width:900px){.sj26 .fb-mid{text-align:center;}}
.sj26 .fb-motto{font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);}
.sj26 .fb-tags{font-size:.8rem; color:var(--dim); margin-top:7px;}
.sj26 .fb-right{font-size:.75rem; color:var(--faint); line-height:1.75;}
@media(min-width:900px){.sj26 .fb-right{text-align:right;}}

/* ============================================================================
   IVORY / DARK SPLIT
   Dark, cinematic above (hero, stats, masthead) shading down into an ivory
   reading zone. Long instructional copy - schedule rows, camp rules - is far
   easier to read as dark-on-ivory in outdoor sunlight than light-on-dark,
   which is the actual condition this page gets used in. The Emergency band
   stays dark so it still reads as the urgent moment on the page.
   Implemented by re-declaring the tokens inside .shell, so every component
   already written against var() flips without being rewritten.
   ========================================================================= */
.sj26 .shade{
  height:clamp(70px,9vw,130px);
  background:linear-gradient(180deg,var(--bg) 0%,#5d5140 46%,#c8bba4 74%,#f7f1e6 100%);
}
.sj26 .bodyzone{background:#f7f1e6;}
.sj26 .shell{
  --panel:#ffffff;
  --panel2:#f4ecdd;
  --cream:#2b2018;
  --dim:#5b4a39;
  --faint:#7d6b56;
  --line:rgba(43,32,24,.15);
  --line2:rgba(43,32,24,.08);
  --gold:#9a6b16;
  --gold-lt:#7d5510;
  background:#f7f1e6;
  color:#2b2018;
  padding-inline:clamp(12px,2vw,22px);
}
.sj26 .shell a{color:var(--gold);}
.sj26 .shell .sec-head h2,
.sj26 .shell .dayinfo h3,
.sj26 .shell .spot h3,
.sj26 .shell .venue h3,
.sj26 .shell .rulehead h3{color:#241a12;}
.sj26 .shell .sec-head h2 em{color:var(--gold);}
.sj26 .shell .pill{color:var(--gold); border-color:rgba(154,107,22,.36); background:rgba(154,107,22,.09);}
.sj26 .shell .pill::before{background:var(--gold);}
.sj26 .shell .slot .b strong{color:#241a12;}
.sj26 .shell .rulelist b{color:#241a12;}
.sj26 .shell .rc-kv .v,.sj26 .shell .kv .v{color:#2b2018;}
.sj26 .shell .rcard h4{color:var(--gold);}

/* warm panel instead of the dark brown band */
.sj26 .shell .sec.brown{background:#efe6d5;}
@media(min-width:1000px){.sj26 .shell .sec.brown{border:1px solid rgba(43,32,24,.1);}}

/* the one band that stays dark - emergency keeps its own dark tokens */
.sj26 .shell .sec.deep{
  --panel:#1b2b20; --panel2:#223528;
  --cream:#f4ecdc; --dim:#b9ad97; --faint:#8a8072;
  --line:rgba(244,236,220,.13); --line2:rgba(244,236,220,.07);
  --gold:#d9a84e; --gold-lt:#f0c877;
  background:#101a13; color:var(--cream);
}
.sj26 .shell .sec.deep .sec-head h2{color:#fff;}
.sj26 .shell .sec.deep .sec-head h2 em{color:var(--gold);}
.sj26 .shell .sec.deep .sos .tx b{color:#fff;}
.sj26 .shell .sec.deep .pill{color:var(--gold); border-color:rgba(217,168,78,.4); background:rgba(217,168,78,.09);}
.sj26 .shell .sec.deep .pill::before{background:var(--gold);}
.sj26 .shell .sec.deep .notice b{color:var(--gold-lt);}

/* controls + surfaces that referenced literal dark values */
.sj26 .shell .day summary{background:#fff;}
.sj26 .shell .day summary:hover{background:#f7f1e6;}
.sj26 .shell .daynum{background:rgba(154,107,22,.12); color:var(--gold-lt); border-color:rgba(154,107,22,.28);}
.sj26 .shell .notice{background:#fdf6e4; border-color:rgba(154,107,22,.34);}
.sj26 .shell .notice svg,.sj26 .shell .notice b{color:#7d5510;}
.sj26 .shell .tbc-pill{background:rgba(154,107,22,.13); color:#7d5510; border-color:rgba(154,107,22,.45);}
.sj26 .shell .btn{background:var(--gold); color:#fff;}
.sj26 .shell .btn:hover{background:#7d5510; color:#fff;}
.sj26 .shell .btn.alt{background:transparent; color:#2b2018; border-color:rgba(43,32,24,.28);}
.sj26 .shell .btn.alt:hover{background:rgba(43,32,24,.06); color:#241a12;}
.sj26 .shell .rulecard.yes{border-top-color:var(--forest);}
.sj26 .shell .rulecard.yes .ico,.sj26 .shell .rulecard.yes .m{background:rgba(29,75,44,.13); color:var(--forest);}
.sj26 .shell .rulecard.no .ico,.sj26 .shell .rulecard.no .m{background:rgba(193,39,45,.11); color:#b8353b;}
.sj26 .shell .rulecard.no{border-top-color:#b8353b;}
.sj26 .shell .spot .badge{color:var(--gold); border-color:rgba(154,107,22,.4); background:rgba(154,107,22,.09);}
.sj26 .shell .thumbs button{background:#e7ddc9;}
.sj26 .shell .thumbs button[aria-current="true"]{border-color:var(--gold);}
.sj26 .shell .stage{background:#e7ddc9;}
.sj26 .shell .mapbox iframe{filter:none;}
.sj26 .shell .rcard.urgent{background:rgba(193,39,45,.07); border-color:rgba(193,39,45,.3);}
.sj26 .shell .rcard.urgent h4{color:#b8353b;}
.sj26 .shell .rc-call{background:#b8353b; color:#fff;}
.sj26 .shell .rc-call:hover{background:#95171c; color:#fff;}
.sj26 .shell .tour-cta{
  background:linear-gradient(100deg,rgba(154,107,22,.13),rgba(154,107,22,.05));
  border-color:rgba(154,107,22,.42);
}
.sj26 .shell .tour-cta:hover{background:linear-gradient(100deg,rgba(154,107,22,.2),rgba(154,107,22,.08));}
.sj26 .shell .tour-cta-tx b{color:#7d5510;}
.sj26 .shell .tour-cta-ic{background:var(--gold); color:#fff;}

/* left rail reads as quiet navigation on ivory */
.sj26 .shell .nav a{color:#5b4a39;}
.sj26 .shell .nav a:hover,.sj26 .shell .nav a:focus-visible{color:#241a12; background:rgba(43,32,24,.06); border-color:rgba(43,32,24,.14);}
.sj26 .shell .nav a.on{background:var(--gold); color:#fff; border-color:var(--gold);}
.sj26 .shell .nav a.sos{background:#b8353b; color:#fff; border-color:#b8353b;}
.sj26 .shell .nav a.sos:hover{background:#95171c; color:#fff;}
@media(max-width:999px){
  /* sticky mobile strip sits over ivory, so give it an ivory surface too */
  .sj26 .shell .nav{background:rgba(247,241,230,.96); border-bottom:1px solid rgba(43,32,24,.14);}
}

@media (prefers-reduced-motion:reduce){
  .sj26 *,.sj26 *::before,.sj26 *::after{animation-duration:.001ms!important; transition-duration:.001ms!important;}
}