<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>The Big Dim · Saturday 6 March 2027, 22:00</title>
<meta name="description" content="One hour, lights off, eyes up. Join the Big Dim on Saturday 6 March 2027 at 22:00.">
<meta name="theme-color" content="#0a1024">
<script>document.documentElement.classList.add('js')</script>
<style>
:root{
  --night:#0a1024;--deep:#121a3d;--ink:#0a1024;--cream:#fff4dc;--glow:#ffcf5a;--ember:#ff8a3d;--mute:#b9c1de;
  --pad:20px;--max:1120px;--ring:#ffcf5a;
  --head:"Avenir Next Condensed","sans-serif-condensed","Arial Narrow","Roboto Condensed",Haettenschweiler,Impact,"Helvetica Neue",Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --out:cubic-bezier(.16,1,.3,1);--pop:cubic-bezier(.34,1.56,.64,1);
}
*,::before,::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--night);color:var(--cream);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--head);font-weight:900;text-transform:uppercase;line-height:.92;font-synthesis:none}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.pad{padding:clamp(76px,11vw,150px) 0}
.eyebrow{font:700 12.5px/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--glow);margin-bottom:18px}
h2{font-size:clamp(2.7rem,10vw,6.2rem);text-wrap:balance}
.lead{font-size:clamp(1.05rem,2.4vw,1.25rem);max-width:34em;color:var(--mute);margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:99px;background:var(--glow);color:var(--ink);font:800 15px/1 var(--body);letter-spacing:.02em;text-decoration:none;transition:transform .45s var(--pop),box-shadow .3s}
.btn.big{min-height:58px;padding:0 34px;font-size:17px}
@media(hover:hover){.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 36px rgba(255,207,90,.4)}}
.btn:active{transform:scale(.97)}
.btn.line{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px rgba(255,244,220,.55)}
@media(hover:hover){.btn.line:hover{box-shadow:inset 0 0 0 2px var(--cream),0 10px 36px rgba(255,244,220,.14)}}
.sp{width:.7em;height:.7em;fill:currentColor;flex:none}

/* hero */
.hero{--ch:clamp(160px,calc(var(--vh,100vh)*.26),290px);--dim:1;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr var(--ch);min-height:max(660px,min(var(--vh,100vh),880px));background:#070c22}
.hero .ly{position:absolute;inset:0;pointer-events:none;z-index:-1}
.sky{background:linear-gradient(#03061a 0%,#0a1236 46%,#17235c 100%)}
.wash{background:linear-gradient(#3a2a4a 0%,#7c3f3b 68%,#c4642f 100%);opacity:calc(var(--dim)*.62)}
#stars{width:100%;height:100%;display:block}
.glow{background:radial-gradient(130% 62% at 50% 100%,rgba(255,150,70,.95),rgba(255,110,50,.5) 38%,rgba(255,90,40,0) 74%);opacity:var(--dim)}
.city{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--ch);display:block;pointer-events:none;z-index:1}
.w{opacity:clamp(0,calc((var(--dim) - var(--t))*14),1);fill:#ffcf5a}
.w.o{fill:#ffae4a}
.w.b{fill:#a8d3ff}
.sl{fill:#ffa04a;opacity:calc(.22 + var(--dim)*.78)}
.sh{fill:rgba(255,160,70,.2);opacity:calc(.22 + var(--dim)*.78)}
.av{fill:#ff4040;animation:blink 2.2s steps(1) infinite}
.bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--pad);max-width:calc(var(--max) + 2*var(--pad));margin:0 auto}
.logo{display:inline-flex;align-items:center;gap:10px;font:900 22px/1 var(--head);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;font-synthesis:none}
.logo svg{width:26px;height:26px;fill:var(--glow)}
.bar .btn{min-height:44px;padding:0 20px;font-size:14px}
.copy{position:relative;z-index:3;padding:84px var(--pad) 18px;width:100%;max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;align-self:start}
.kicker{font:700 12.5px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--glow)}
.copy h1{font-size:clamp(3rem,15.5vw,8rem);margin:14px 0 18px;letter-spacing:-.005em}
.copy h1 .ln{display:block;width:max-content;white-space:nowrap}
.copy h1 .ln:last-child{color:var(--glow)}
.hero .lede{max-width:29em;color:#efe8d6;font-size:clamp(1.02rem,2.6vw,1.2rem);line-height:1.5}
.dimmer{margin-top:22px;max-width:520px}
.dimmer label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.dimmer output{color:var(--cream);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;background:transparent;cursor:grab;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:99px;background:linear-gradient(90deg,#27346f,#ffcf5a)}
input[type=range]::-moz-range-track{height:10px;border-radius:99px;background:linear-gradient(90deg,#27346f,#ffcf5a)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:38px;height:38px;margin-top:-14px;border-radius:50%;border:3px solid var(--ink);background:radial-gradient(circle at 35% 30%,#fff6d6,#ffcf5a 58%,#f0a52c);box-shadow:0 0 0 2px var(--glow),0 0 30px 6px rgba(255,207,90,calc(.12 + var(--dim)*.5))}
input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:50%;border:3px solid var(--ink);background:radial-gradient(circle at 35% 30%,#fff6d6,#ffcf5a 58%,#f0a52c);box-shadow:0 0 0 2px var(--glow),0 0 30px 6px rgba(255,207,90,.3)}
input[type=range]:active{cursor:grabbing}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:18px}
.count{display:inline-flex;align-items:center;gap:12px;color:#efe8d6}
.count span{display:block}
.count b{display:block;font:900 30px/1 var(--head);color:var(--glow);font-variant-numeric:tabular-nums;font-synthesis:none}
.count small{display:block;font:600 13px/1.25 var(--body);margin-top:3px}
.dot{width:9px;height:9px;border-radius:50%;background:#ff5a4a;box-shadow:0 0 0 0 rgba(255,90,74,.6);animation:ping 2s ease-out infinite}
@media(min-width:900px){
  .hero{--ch:clamp(150px,calc(var(--vh,100vh)*.25),290px)}
  .copy{padding-top:92px;padding-bottom:24px}
  .copy>*{max-width:620px}
  .copy h1{margin:12px 0 16px}
  .cta{margin-top:20px}
}
@media(min-width:1100px){
  .dimmer{position:absolute;right:var(--pad);top:108px;width:min(400px,34%);max-width:none;margin:0;padding:16px 22px 4px;border-radius:22px;background:rgba(7,12,34,.55);box-shadow:inset 0 0 0 1px rgba(255,244,220,.16)}
}
.js .e{opacity:0;transform:translateY(22px)}
.go .e{opacity:1;transform:none;transition:opacity .8s var(--out),transform .8s var(--out);transition-delay:calc(.1s + var(--n,0)*.12s)}

/* ticker */
.tick{background:var(--glow);color:var(--ink);overflow:hidden;white-space:nowrap;padding:16px 0 14px}
.rail{display:inline-flex;animation:tick 34s linear infinite}
.rail span{display:inline-flex;align-items:center;gap:.55em;padding-right:.6em;font:900 clamp(1.5rem,5.4vw,2.5rem)/1 var(--head);text-transform:uppercase;font-synthesis:none}

/* manifesto */
.mani{font:700 clamp(1.65rem,5.6vw,3.3rem)/1.17 var(--body);letter-spacing:-.022em;max-width:20em;text-wrap:pretty}
.js .mw{color:rgba(255,244,220,.26);transition:color .5s}
.js .mw.on{color:var(--cream)}
.js .mw.on.k{color:var(--glow)}
.mani .k{color:var(--glow)}
.stats{display:grid;gap:38px;margin-top:clamp(54px,8vw,100px)}
.stat{border-top:2px solid rgba(255,244,220,.2);padding-top:18px}
.stat b{display:block;font:900 clamp(4.6rem,20vw,8rem)/.84 var(--head);color:var(--glow);font-synthesis:none;font-variant-numeric:tabular-nums}
.stat b small{font-size:.38em;letter-spacing:.02em;margin-left:.12em}
.stat p{margin-top:12px;color:var(--mute);max-width:21em}
@media(min-width:800px){.stats{grid-template-columns:repeat(3,1fr);gap:40px}}

/* the hour */
.hour{background:var(--glow);color:var(--ink)}
.hour .eyebrow{color:#5a3a00}
.hour h2{margin-bottom:6px}
.hgrid{display:grid;gap:44px;margin-top:40px}
.clockbox{display:none}
.line{position:relative;padding-left:46px;--p:0;--lh:0px}
.line::before,.line::after{content:"";position:absolute;left:11px;top:16px;bottom:var(--lh);width:3px;border-radius:3px;background:rgba(10,16,36,.18)}
.line::after{background:var(--ink);transform-origin:top;transform:scaleY(var(--p))}
.hi{position:relative;padding-bottom:46px}
.hi:last-child{padding-bottom:0}
.hi::before{content:"";position:absolute;left:-46px;top:6px;width:26px;height:26px;border-radius:50%;background:var(--glow);border:3px solid var(--ink);transition:background .4s,transform .5s var(--pop);z-index:1}
.hi.on::before{background:var(--ink);transform:scale(1.15)}
.hi .t{font:900 clamp(2.4rem,9vw,3.6rem)/1 var(--head);font-variant-numeric:tabular-nums;font-synthesis:none}
.hi h3{font:800 1.3rem/1.2 var(--body);text-transform:none;letter-spacing:-.01em;margin:8px 0 6px}
.hi p{max-width:31em;color:#2a2f4d}
.hi p b{color:var(--ink)}
@media(min-width:900px){
  .hgrid{grid-template-columns:5fr 7fr;gap:70px;align-items:start}
  .clockbox{display:block;position:sticky;top:12vh}
  .clock{font:900 clamp(7rem,15vw,12.5rem)/.8 var(--head);letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-synthesis:none;display:block}
  .clock.sw{animation:swap .5s var(--out)}
  .clockbox p{margin-top:18px;font:700 13px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#5a3a00}
}

/* tabs */
.tabs{position:relative;display:flex;gap:4px;padding:5px;margin:36px 0 34px;border-radius:99px;background:rgba(255,244,220,.09);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.pill{position:absolute;left:0;top:5px;bottom:5px;width:0;border-radius:99px;background:var(--glow);transition:transform .5s var(--out),width .5s var(--out)}
.tabs button{position:relative;z-index:1;min-height:46px;padding:0 20px;border-radius:99px;font:700 15px/1 var(--body);color:var(--cream);white-space:nowrap;transition:color .3s}
.tabs button[aria-selected=true]{color:var(--ink)}
@media(max-width:560px){.tabs{display:grid;grid-template-columns:repeat(3,auto);width:100%;overflow:visible}.tabs button{padding:0 8px;white-space:normal;line-height:1.15;font-size:14.5px}}
.panel{display:none}
.panel.on{display:block;animation:panelin .6s var(--out)}
.steps{display:grid;gap:14px;counter-reset:s;list-style:none;padding:0}
.steps li{position:relative;counter-increment:s;padding:20px 20px 20px 68px;border-radius:20px;background:rgba(255,244,220,.07);min-height:76px}
.steps li::before{content:counter(s);position:absolute;left:18px;top:14px;font:900 44px/1 var(--head);color:var(--glow);font-synthesis:none}
@media(min-width:800px){.steps{grid-template-columns:1fr 1fr;gap:16px}}
@media(hover:hover){.steps li{transition:transform .5s var(--pop),background .3s}.steps li:hover{transform:translateY(-4px);background:rgba(255,244,220,.12)}}

/* pledge */
.pledge{position:relative;overflow:hidden;--k:0;background:linear-gradient(#0a1024,#101a48 70%,#16225a)}
.pledge::before{content:"";position:absolute;inset:0;opacity:calc(.18 + var(--k)*.82);transition:opacity .8s;background-image:radial-gradient(1.6px 1.6px at 12% 22%,#fff,transparent),radial-gradient(1.2px 1.2px at 34% 62%,#fff,transparent),radial-gradient(1.8px 1.8px at 58% 16%,#fff,transparent),radial-gradient(1.2px 1.2px at 78% 48%,#fff,transparent),radial-gradient(1.5px 1.5px at 90% 14%,#fff,transparent),radial-gradient(1px 1px at 24% 88%,#fff,transparent),radial-gradient(1.4px 1.4px at 66% 82%,#fff,transparent),radial-gradient(1px 1px at 46% 38%,#fff,transparent);background-size:340px 300px}
.pgrid{position:relative;display:grid;gap:50px;align-items:center}
.meter{display:flex;align-items:baseline;gap:10px;margin:28px 0 22px;font:600 15px/1 var(--body);color:var(--mute)}
.meter b{font:900 56px/.9 var(--head);color:var(--glow);min-width:1.2ch;font-variant-numeric:tabular-nums;font-synthesis:none}
.fine{margin-top:18px;font-size:13.5px;color:#9aa4c8}
.bldg{position:relative;width:100%;max-width:430px;margin:0 auto;padding-top:34px}
.roof{position:absolute;left:50%;top:0;width:3px;height:34px;margin-left:-1px;background:#243076}
.roof i{position:absolute;left:-3px;top:-6px;width:9px;height:9px;border-radius:50%;background:#ff4040;animation:blink 2.2s steps(1) infinite}
.facade{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;padding:20px 16px 22px;border-radius:14px 14px 0 0;background:linear-gradient(#1a2459,#0f1844);border:2px solid #263380;border-bottom:0}
.win{aspect-ratio:3/4;min-width:44px;border-radius:4px;background:#ffcf5a;box-shadow:0 0 22px rgba(255,207,90,.5),inset 0 -8px 0 rgba(255,150,40,.35);transition:background .45s,box-shadow .45s,transform .45s var(--pop)}
.win:nth-child(3n+1){background:#ffd978}
.win:nth-child(5n+2){background:#ffb84a}
.win.off{background:#0b1237;box-shadow:inset 0 0 0 2px #1d2a68,inset 4px 4px 0 rgba(120,150,255,.1)}
.win:active{transform:scale(.9)}
@media(hover:hover){.win:hover{transform:scale(1.07)}.win.off:hover{background:#162056}}
.door{height:44px;display:flex;justify-content:center;align-items:flex-end;border:2px solid #263380;border-top:0;background:#0f1844}
.door i{width:46px;height:34px;border-radius:23px 23px 0 0;background:#070c22;box-shadow:inset 0 0 0 2px #1d2a68}
.ground{height:10px;background:#04070f;border-radius:0 0 6px 6px}
.done{display:none;margin-top:6px}
.pledge.is-in .ask{display:none}
.pledge.is-in .done{display:block;animation:panelin .7s var(--out)}
.done .num{font:900 clamp(3.4rem,13vw,6rem)/.9 var(--head);color:var(--glow);font-synthesis:none;margin:14px 0 10px}
.again{margin-top:20px;font:700 14px/1 var(--body);text-decoration:underline;text-underline-offset:4px;min-height:44px;color:var(--mute)}
@media(min-width:900px){.pgrid{grid-template-columns:1.1fr .9fr;gap:90px}}

/* faq */
.faq{background:var(--cream);color:var(--ink);--ring:#2a3a9a}
.faq .eyebrow{color:#7a4a00}
.faq .lead{color:#3a4064}
.qs{margin-top:46px;border-top:3px solid var(--ink)}
.q{border-bottom:2px solid rgba(10,16,36,.2)}
.q h3{font:inherit;text-transform:none;line-height:1.2;letter-spacing:0}
.q button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:18px;min-height:72px;padding:18px 0;text-align:left;font:800 clamp(1.15rem,3.6vw,1.6rem)/1.2 var(--body);letter-spacing:-.015em;color:var(--ink)}
.pm{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);transition:transform .5s var(--pop),background .3s}
.pm::before,.pm::after{content:"";position:absolute;left:9px;right:9px;top:16px;height:2px;border-radius:2px;background:var(--glow);transition:transform .45s var(--out)}
.pm::after{transform:rotate(90deg)}
.q.open .pm{transform:rotate(180deg);background:var(--glow)}
.q.open .pm::before,.q.open .pm::after{background:var(--ink)}
.q.open .pm::after{transform:rotate(0)}
.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--out)}
.a>div{overflow:hidden;visibility:hidden;transition:visibility .5s}
.q.open .a{grid-template-rows:1fr}
.q.open .a>div{visibility:visible}
.a p{padding:0 0 26px;max-width:36em;color:#2b3158}
@media(hover:hover){.q button:hover .pm{transform:scale(1.12)}.q.open button:hover .pm{transform:rotate(180deg) scale(1.12)}}

/* footer */
footer{position:relative;background:var(--night);padding:clamp(70px,10vw,120px) 0 36px;overflow:hidden}
.moon{position:absolute;right:24px;top:22px;--m:44px;pointer-events:none}
.moon i{display:block;width:var(--m);height:var(--m);border-radius:50%;font-size:var(--m);background:rgba(255,226,154,.05);box-shadow:inset -.2em -.03em 0 0 #ffe29a,0 0 .45em .02em rgba(255,214,110,.2);animation:bob 7s ease-in-out infinite}
@media(min-width:700px){.moon{--m:130px;top:40px;right:8vw}}
@media(min-width:1000px){.moon{--m:250px;top:90px;right:9vw}}
footer h2{font-size:clamp(3rem,13vw,9rem);line-height:.88}
footer h2 .ln{display:block;width:max-content;white-space:nowrap}
footer h2 .ln:last-child{color:var(--glow)}
.org{margin-top:34px;display:grid;gap:8px;color:var(--mute);max-width:36em}
.org b{color:var(--cream)}
.fine2{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,244,220,.2);font-size:13.5px;color:#9aa4c8;max-width:48em}

/* motion */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--out),transform .9s var(--out);transition-delay:calc(var(--i,0)*100ms)}
.js .rv.in{opacity:1;transform:none}
@keyframes blink{50%{opacity:.15}}
@keyframes bob{50%{transform:translateY(-14px) rotate(6deg)}}
.js .moon.rv{transform:translateY(110px)}
.js .moon.rv.in{transform:none}
@keyframes ping{70%,100%{box-shadow:0 0 0 12px rgba(255,90,74,0)}}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes swap{from{transform:translateY(24px);opacity:0}}
@keyframes panelin{from{opacity:0;transform:translateY(18px)}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .e,.js .rv{opacity:1!important;transform:none!important}
  .js .mw{color:var(--cream)}
  .js .mw.k{color:var(--glow)}
  .av,.dot{animation:none}
}
</style>
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false"><symbol id="spark" viewBox="0 0 24 24"><path d="M12 0c1 7 5 11 12 12-7 1-11 5-12 12-1-7-5-11-12-12 7-1 11-5 12-12z"/></symbol><symbol id="moon" viewBox="0 0 24 24"><path d="M15 1.5a10.5 10.5 0 1 0 7.5 17.8A9 9 0 0 1 15 1.5z"/></symbol></svg>

<main>
<section class="hero" id="hero" aria-labelledby="h1">
  <div class="ly sky"></div>
  <div class="ly wash"></div>
  <div class="ly"><canvas id="stars" aria-hidden="true"></canvas></div>
  <div class="ly glow"></div>
  <svg class="city" id="city" aria-hidden="true" preserveAspectRatio="none"></svg>
  <div class="bar">
    <a class="logo" href="#hero" aria-label="The Big Dim, back to the top"><svg aria-hidden="true"><use href="#moon"/></svg>The Big Dim</a>
    <a class="btn line" href="#hour">How it works</a>
  </div>
  <div class="copy">
    <p class="kicker e" style="--n:0">Saturday 6 March 2027 · 22:00–23:00</p>
    <h1 id="h1" class="e" style="--n:1" data-fit data-max="150"><span class="ln">Switch off.</span><span class="ln">Look up.</span></h1>
    <p class="lede e" style="--n:2">For one hour, homes, shops and whole streets switch off together. Step outside and see what the sky looks like when nobody is lighting it.</p>
    <div class="dimmer e" style="--n:3">
      <label for="dim"><span>Try it: drag the dimmer</span><output id="dimv" for="dim">100%</output></label>
      <input id="dim" type="range" min="0" max="100" value="100" step="1">
    </div>
    <div class="cta e" style="--n:4"><a class="btn big" href="#pledge">Count me in</a><span class="count"><i class="dot" aria-hidden="true"></i><span><b id="people">14,206</b><small>people are in · example</small></span></span></div>
  </div>
</section>

<div class="tick" aria-hidden="true"><div class="rail">
  <span>Switch off<svg class="sp"><use href="#spark"/></svg></span><span>Look up<svg class="sp"><use href="#spark"/></svg></span><span>Saturday 6 March<svg class="sp"><use href="#spark"/></svg></span><span>22:00 sharp<svg class="sp"><use href="#spark"/></svg></span><span>Bring a flask<svg class="sp"><use href="#spark"/></svg></span><span>No moon, no excuses<svg class="sp"><use href="#spark"/></svg></span>
  <span>Switch off<svg class="sp"><use href="#spark"/></svg></span><span>Look up<svg class="sp"><use href="#spark"/></svg></span><span>Saturday 6 March<svg class="sp"><use href="#spark"/></svg></span><span>22:00 sharp<svg class="sp"><use href="#spark"/></svg></span><span>Bring a flask<svg class="sp"><use href="#spark"/></svg></span><span>No moon, no excuses<svg class="sp"><use href="#spark"/></svg></span>
</div></div>

<section class="pad" aria-labelledby="h-why">
  <div class="wrap">
    <h2 class="eyebrow rv" id="h-why">Why bother</h2>
    <p class="mani" id="mani">For sixty minutes the sky gets its dark back. <span class="k">The Milky Way, if you are lucky.</span> Orion over the rooftops. Neighbours on the pavement, phones in their pockets, saying nothing for once. It costs nothing, it needs no app, and <span class="k">it starts when you flip one switch.</span></p>
    <div class="stats">
      <div class="stat rv" style="--i:0"><b><span data-to="60">60</span><small>min</small></b><p>One hour, 22:00 to 23:00. Back to normal by bedtime.</p></div>
      <div class="stat rv" style="--i:1"><b><span data-to="20">20</span><small>%</small></b><p>How bright participating councils keep their streetlights. Crossings and emergency lights stay at full.</p></div>
      <div class="stat rv" style="--i:2"><b><span data-to="10">10</span><small>min</small></b><p>About how long your eyes need before the faint stars start to come out.</p></div>
    </div>
  </div>
</section>

<section class="hour pad" id="hour" aria-labelledby="h-hour">
  <div class="wrap">
    <p class="eyebrow rv">Saturday 6 March</p>
    <h2 id="h-hour" class="rv">How the hour goes</h2>
    <div class="hgrid">
      <div class="clockbox" aria-hidden="true"><span class="clock" id="clock">21:30</span><p>Saturday 6 March 2027</p></div>
      <div class="line" id="line">
        <article class="hi on" data-t="21:30"><div class="t">21:30</div><h3>Tell the neighbours</h3><p>Knock, text, or tape a note to the stairwell door. Dark is better together.</p></article>
        <article class="hi" data-t="22:00"><div class="t">22:00</div><h3>Lights down</h3><p>Switch off everything you do not need: living room, porch, shop sign, the lot. <b>Participating councils dim streetlights to 20%.</b> Crossings, hospitals and emergency lights stay on.</p></article>
        <article class="hi" data-t="22:10"><div class="t">22:10</div><h3>Let your eyes settle</h3><p>Phone away, torch off. It takes about ten minutes before the faint stars start to appear, and twenty before the sky looks properly full.</p></article>
        <article class="hi" data-t="22:30"><div class="t">22:30</div><h3>Find Orion, find the Plough</h3><p>Orion is sinking in the south-west. The Plough climbs in the north-east. There is no moon to fight with: it is two days from new.</p></article>
        <article class="hi" data-t="23:00"><div class="t">23:00</div><h3>Lights up</h3><p>Switch back on, say goodnight to the street, and go to bed a bit calmer than usual.</p></article>
      </div>
    </div>
  </div>
</section>

<section class="pad" id="how" aria-labelledby="h-how">
  <div class="wrap">
    <p class="eyebrow rv">Your part</p>
    <h2 id="h-how" class="rv">Pick your dark</h2>
    <div class="tabs rv" role="tablist" aria-label="Where will you switch off?"><i class="pill" aria-hidden="true"></i>
      <button role="tab" type="button" id="t1" aria-selected="true" aria-controls="p1">At home</button>
      <button role="tab" type="button" id="t2" aria-selected="false" aria-controls="p2" tabindex="-1">At work</button>
      <button role="tab" type="button" id="t3" aria-selected="false" aria-controls="p3" tabindex="-1">As a town</button>
    </div>
    <div class="panel on" id="p1" role="tabpanel" aria-labelledby="t1" tabindex="0"><ol class="steps">
      <li>Lights off in every room you are not standing in. Close the curtains if the street is bright.</li>
      <li>Phone face down, screen on its lowest setting. A red torch if you need one.</li>
      <li>Step into the garden, onto the balcony or down to the pavement. Give your eyes ten minutes.</li>
      <li>Knock on one door. Dark is better with company.</li>
    </ol></div>
    <div class="panel" id="p2" role="tabpanel" aria-labelledby="t2" tabindex="0"><ol class="steps">
      <li>Ask facilities to switch off lobby, sign and car-park lighting that is not needed for safety.</li>
      <li>Screens off at 22:00 for anyone still in. Yes, really.</li>
      <li>Open late? Keep the entrance lit and turn the sign off.</li>
      <li>Tape a note to the door: “We are dark from 22:00 to 23:00. Look up.”</li>
    </ol></div>
    <div class="panel" id="p3" role="tabpanel" aria-labelledby="t3" tabindex="0"><ol class="steps">
      <li>Dim non-essential streetlights to 20% for the hour. Keep crossings, junctions and emergency lighting as normal.</li>
      <li>Switch off floodlights on monuments, bridges and empty pitches.</li>
      <li>Tell residents a week ahead, in plain words, and say what stays lit and why.</li>
      <li>Put a free star chart on the library counter.</li>
    </ol></div>
  </div>
</section>

<section class="pledge pad" id="pledge" aria-label="Count yourself in">
  <div class="wrap pgrid">
    <div>
      <div class="ask">
        <p class="eyebrow rv">Your building</p>
        <h2 class="rv">Tap your lights off.</h2>
        <p class="lead rv" style="--i:1">Every window you switch off here is a promise to switch off the real one on 6 March. Tap as many as you like, then count yourself in.</p>
        <p class="meter rv" style="--i:2" aria-live="polite"><b id="offn">3</b><span>of 30 lights off</span></p>
        <button class="btn big" id="join" type="button">Count me in</button>
        <p class="fine">Example page: nothing is sent or saved.</p>
      </div>
      <div class="done" id="done" tabindex="-1" aria-live="polite">
        <p class="eyebrow">You are in</p>
        <h2>See you in the dark.</h2>
        <div class="num" id="you">#14,207</div>
        <p class="lead">Saturday 6 March, 22:00. Lights off, eyes up. Tell one neighbour. That is the whole job.</p>
        <button class="again" id="again" type="button">Switch my building back on</button>
        <p class="fine">Example page: nothing is sent or saved.</p>
      </div>
    </div>
    <div class="bldg rv" style="--i:1" role="group" aria-label="A building with 30 windows. Each window is a button that switches its light on or off.">
      <div class="roof"><i></i></div>
      <div class="facade" id="facade"></div>
      <div class="door"><i></i></div><div class="ground"></div>
    </div>
  </div>
</section>

<section class="faq pad" aria-labelledby="h-faq">
  <div class="wrap">
    <p class="eyebrow rv">Before you ask</p>
    <h2 id="h-faq" class="rv">Questions</h2>
    <div class="qs rv">
      <div class="q open"><h3><button type="button" id="q1" aria-expanded="true" aria-controls="a1"><span>Is it safe?</span><i class="pm" aria-hidden="true"></i></button></h3><div class="a" id="a1" role="region" aria-labelledby="q1"><div><p>Yes. Crossings, junctions, hospitals and emergency routes keep their normal lighting, and so should you if you drive or work nights. Stay on your own property or somewhere familiar, bring a torch and keep your phone for emergencies.</p></div></div></div>
      <div class="q"><h3><button type="button" id="q2" aria-expanded="false" aria-controls="a2"><span>Does it save energy?</span><i class="pm" aria-hidden="true"></i></button></h3><div class="a" id="a2" role="region" aria-labelledby="q2"><div><p>A little, for one hour. That is not the point. The point is to see the night sky, and to show councils that people want better night lighting every night, not just one Saturday.</p></div></div></div>
      <div class="q"><h3><button type="button" id="q3" aria-expanded="false" aria-controls="a3"><span>What about birds and wildlife?</span><i class="pm" aria-hidden="true"></i></button></h3><div class="a" id="a3" role="region" aria-labelledby="q3"><div><p>Less light at night helps migrating birds, bats and insects. One hour is a start. The longer ask, for councils and building owners, is to shield lights and dim them after midnight, all year.</p></div></div></div>
      <div class="q"><h3><button type="button" id="q4" aria-expanded="false" aria-controls="a4"><span>Is this a protest?</span><i class="pm" aria-hidden="true"></i></button></h3><div class="a" id="a4" role="region" aria-labelledby="q4"><div><p>No banners, no marches, no petitions to sign. It is a quiet hour. Switch off, step outside, say hello to a neighbour, go back in.</p></div></div></div>
      <div class="q"><h3><button type="button" id="q5" aria-expanded="false" aria-controls="a5"><span>What if it is cloudy?</span><i class="pm" aria-hidden="true"></i></button></h3><div class="a" id="a5" role="region" aria-labelledby="q5"><div><p>Go anyway. Clouds that glow orange over a lit town turn properly dark when the lights go down, and that is a sight on its own. There is no rain date.</p></div></div></div>
    </div>
  </div>
</section>
</main>

<footer>
  <div class="moon rv" aria-hidden="true"><i></i></div>
  <div class="wrap">
    <h2 data-fit data-max="190" aria-label="See you at 22:00."><span class="ln" aria-hidden="true">See you</span><span class="ln" aria-hidden="true">at 22:00.</span></h2>
    <div class="org"><p><b>Saturday 6 March 2027, 22:00–23:00.</b> Wherever you are.</p><p>The Big Dim is run by Stillnight Collective, a volunteer group that would like to see more stars.</p></div>
    <p class="fine2">Example page. The Big Dim, Stillnight Collective, the numbers and the people counted here are made up, and nothing on this page is sent or saved.</p>
  </div>
</footer>

<script>
(()=>{
const $=(s,r=document)=>r.querySelector(s),$$=(s,r=document)=>[...r.querySelectorAll(s)];
const RM=matchMedia('(prefers-reduced-motion:reduce)').matches,de=document.documentElement;
const clamp=(v,a,b)=>Math.min(b,Math.max(a,v)),fmt=n=>n.toLocaleString('en-GB');
const rng=a=>()=>{a|=0;a=a+0x6D2B79F5|0;let t=Math.imul(a^a>>>15,1|a);t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296};
// The viewer's bar slims once the visitor scrolls, which resizes this frame. Freeze the hero height unless the width changes.
let W=innerWidth;de.style.setProperty('--vh',innerHeight+'px');
addEventListener('resize',()=>{if(innerWidth!==W){W=innerWidth;de.style.setProperty('--vh',innerHeight+'px');layout()}});

const hero=$('#hero'),dimEl=$('#dim'),dimv=$('#dimv');
let dim=1,auto=true,need=true,vis=true;

// the dimmer drives everything: windows, glow, stars
function setDim(v,sync){dim=v;hero.style.setProperty('--dim',v.toFixed(3));const p=Math.round(v*100);dimv.textContent=p+'%';dimEl.setAttribute('aria-valuetext',p+'% of the lights on');if(sync)dimEl.value=p;need=true}
dimEl.addEventListener('input',()=>{auto=false;setDim(dimEl.value/100)});
function play(){
  if(RM){setDim(.22,true);return}
  const t0=performance.now()+350,to=.2,dur=1900;
  (function f(now){if(!auto)return;const t=clamp((now-t0)/dur,0,1),e=t<.5?2*t*t:1-Math.pow(-2*t+2,2)/2;setDim(1+(to-1)*e,true);if(t<1)requestAnimationFrame(f)})(performance.now());
}

// skyline, built to the real pixel width
function city(){
  const svg=$('#city'),W=Math.max(280,svg.clientWidth),H=Math.max(120,svg.clientHeight),s=Math.max(1,W/760),r=rng(11);
  svg.setAttribute('viewBox','0 0 '+W+' '+H);
  let o='',av='';
  [['#18235a',.3,.62,0],['#0e1738',.26,.8,.42],['#070c22',.14,.52,.8]].forEach(([c,a,b,p],li)=>{
    let x=-10*s,wn='';
    while(x<W){
      const bw=Math.round((26+r()*38)*s),bh=Math.round(H*(a+r()*(b-a))),y=H-bh;
      o+='<rect x="'+x+'" y="'+y+'" width="'+bw+'" height="'+(bh+2)+'" fill="'+c+'"/>';
      if(r()<.35){const tw=Math.round(bw*(.4+r()*.3));o+='<rect x="'+(x+Math.round((bw-tw)/2))+'" y="'+(y-8*s)+'" width="'+tw+'" height="'+(8*s)+'" fill="'+c+'"/>'}
      if(r()<.28){const ax=x+Math.round(bw/2);o+='<rect x="'+(ax-1)+'" y="'+(y-24*s)+'" width="2" height="'+(24*s)+'" fill="'+c+'"/>';if(li)av+='<circle class="av" cx="'+ax+'" cy="'+(y-24*s)+'" r="'+(2.2*s).toFixed(1)+'" style="animation-delay:-'+(r()*2).toFixed(1)+'s"/>'}
      if(p)for(let wy=y+9*s;wy<H-18;wy+=13*s)for(let wx=x+6*s;wx<x+bw-9*s;wx+=10*s)if(r()<p){const k=r();wn+='<rect class="w'+(k<.1?' b':k<.34?' o':'')+'" x="'+Math.round(wx)+'" y="'+Math.round(wy)+'" width="'+(5*s).toFixed(1)+'" height="'+(7*s).toFixed(1)+'" style="--t:'+r().toFixed(2)+'"/>'}
      x+=bw+Math.round(r()*7*s);
    }
    o+=wn;
  });
  o+='<rect x="0" y="'+(H-14)+'" width="'+W+'" height="14" fill="#04070f"/>';
  for(let x=18*s;x<W;x+=(46+r()*18)*s)o+='<circle class="sh" cx="'+x.toFixed(0)+'" cy="'+(H-9)+'" r="'+(9*s).toFixed(1)+'"/><circle class="sl" cx="'+x.toFixed(0)+'" cy="'+(H-9)+'" r="'+(2.2*s).toFixed(1)+'"/>';
  svg.innerHTML=o+av;
}

// star field: brighter stars show first, faint ones and the Milky Way only in the real dark
const cv=$('#stars'),cx=cv.getContext('2d');
let cw=0,ch=0,dpr=1,shoot=null,nextShoot=4000;
const S=rng(42),stars=[];
for(let i=0;i<520;i++){const m=S();stars.push({x:S(),y:Math.pow(S(),1.25)*.8,th:.03+m*.9,r:m<.1?1.7:m<.45?1.15:.8,tw:S()*6.28,sp:.6+S()*1.6})}
for(let i=0;i<240;i++){const u=S();stars.push({x:u,y:.62-u*.5+(S()+S()+S()-1.5)*.09,th:.55+S()*.4,r:.8,tw:S()*6.28,sp:.4+S()})}
function size(){dpr=Math.min(devicePixelRatio||1,2);cw=hero.clientWidth;ch=hero.clientHeight;cv.width=Math.round(cw*dpr);cv.height=Math.round(ch*dpr);need=true}
function draw(t){
  cx.setTransform(dpr,0,0,dpr,0,0);cx.clearRect(0,0,cw,ch);
  const d=1-dim;if(d<.03)return;
  const g=clamp((d-.5)/.4,0,1);
  if(g>0){cx.save();cx.translate(cw*.55,ch*.36);cx.rotate(-.42);const gr=cx.createLinearGradient(0,-ch*.16,0,ch*.16);gr.addColorStop(0,'rgba(170,185,255,0)');gr.addColorStop(.5,'rgba(190,200,255,'+(.17*g).toFixed(3)+')');gr.addColorStop(1,'rgba(170,185,255,0)');cx.fillStyle=gr;cx.fillRect(-cw,-ch*.16,cw*2,ch*.32);cx.restore()}
  cx.fillStyle='#fff6e0';
  for(const s of stars){let a=clamp((d-s.th)*5,0,1);if(a<.02)continue;if(!RM)a*=.72+.28*Math.sin(t*.0014*s.sp+s.tw);cx.globalAlpha=a;const x=s.x*cw,y=s.y*ch;if(s.r>1.4){cx.beginPath();cx.arc(x,y,s.r,0,6.283);cx.fill()}else cx.fillRect(x,y,s.r,s.r)}
  cx.globalAlpha=1;
  if(!RM&&!shoot&&d>.45&&t>nextShoot){shoot={x:cw*(.15+S()*.5),y:ch*(.06+S()*.2),t:t};nextShoot=t+6500+S()*5000}
  if(shoot){const p=(t-shoot.t)/950;if(p>1)shoot=null;else{const hx=shoot.x+p*cw*.3,hy=shoot.y+p*ch*.14,tx=hx-cw*.1*Math.min(p*3,1),ty=hy-ch*.045*Math.min(p*3,1),sg=cx.createLinearGradient(tx,ty,hx,hy);sg.addColorStop(0,'rgba(255,246,224,0)');sg.addColorStop(1,'rgba(255,246,224,'+(.9*(1-p)).toFixed(2)+')');cx.strokeStyle=sg;cx.lineWidth=1.8;cx.beginPath();cx.moveTo(tx,ty);cx.lineTo(hx,hy);cx.stroke()}}
}
let last=0;
(function loop(t){requestAnimationFrame(loop);if(!vis||document.hidden)return;if(RM){if(need){draw(t);need=false}return}if(t-last<32)return;last=t;draw(t)})(0);
new IntersectionObserver(e=>{vis=e[0].isIntersecting}).observe(hero);

// poster-style headlines: scale to fill the column in whatever font the phone has
function fit(){$$('[data-fit]').forEach(h=>{h.style.fontSize='100px';let w=1;$$('.ln',h).forEach(l=>w=Math.max(w,l.scrollWidth));h.style.fontSize=Math.min(+h.dataset.max||200,99*h.clientWidth/w)+'px'})}

// count-ups
function count(el,to,dur,delay,from,f){
  f=f||fmt;if(RM){el.textContent=f(to);return}
  const t0=performance.now()+(delay||0);(function s(now){const t=clamp((now-t0)/dur,0,1),e=1-Math.pow(1-t,3);el.textContent=f(Math.round(from+(to-from)*e));if(t<1)requestAnimationFrame(s)})(performance.now());
}

// manifesto: words light up as it scrolls past
const mani=$('#mani'),mws=[];
(function split(n,k){[...n.childNodes].forEach(c=>{if(c.nodeType===3){const f=document.createDocumentFragment();c.textContent.split(/(\s+)/).forEach(t=>{if(!t)return;if(/^\s+$/.test(t))f.append(t);else{const s=document.createElement('span');s.className='mw'+(k?' k':'');s.textContent=t;f.append(s);mws.push(s)}});c.replaceWith(f)}else if(c.nodeType===1)split(c,k||c.classList.contains('k'))})})(mani,false);

// the hour: progress line, dots and the big clock
const line=$('#line'),items=$$('.hi'),clock=$('#clock');
function scrolled(){
  const mid=innerHeight*.55;
  const r=mani.getBoundingClientRect(),p=clamp((innerHeight*.85-r.top)/(r.height+innerHeight*.25),0,1),n=Math.round(p*mws.length);
  mws.forEach((w,i)=>w.classList.toggle('on',i<n));
  const lr=line.getBoundingClientRect();line.style.setProperty('--p',clamp((mid-lr.top-16)/(lr.height-16-parseFloat(line.style.getPropertyValue('--lh')||0)),0,1).toFixed(3));
  let act=0;items.forEach((it,i)=>{const on=it.getBoundingClientRect().top<mid;it.classList.toggle('on',on||i===0);if(on)act=i});
  const t=items[act].dataset.t;if(clock.textContent!==t){clock.textContent=t;clock.classList.remove('sw');void clock.offsetWidth;clock.classList.add('sw')}
}
let tick=false;addEventListener('scroll',()=>{if(!tick){tick=true;requestAnimationFrame(()=>{tick=false;scrolled()})}},{passive:true});

// tabs
const tabs=$$('[role=tab]'),pill=$('.pill');
function pos(){const a=tabs.find(t=>t.getAttribute('aria-selected')==='true');pill.style.width=a.offsetWidth+'px';pill.style.transform='translateX('+a.offsetLeft+'px)'}
function pick(i){tabs.forEach((t,j)=>{t.setAttribute('aria-selected',j===i);t.tabIndex=j===i?0:-1;$('#'+t.getAttribute('aria-controls')).classList.toggle('on',j===i)});pos()}
tabs.forEach((t,i)=>{t.addEventListener('click',()=>pick(i));t.addEventListener('keydown',e=>{if(e.key==='ArrowRight'||e.key==='ArrowLeft'){const j=(i+(e.key==='ArrowRight'?1:tabs.length-1))%tabs.length;pick(j);tabs[j].focus();e.preventDefault()}})});

// pledge: a building of 30 lights
const fac=$('#facade'),pl=$('#pledge'),pre=new Set([4,11,19]),wins=[];
function sw(b,off){b.classList.toggle('off',off);b.setAttribute('aria-label','Floor '+b.dataset.f+', window '+b.dataset.c+': light '+(off?'off. Press to switch on.':'on. Press to switch off.'));meter()}
function meter(){const n=wins.filter(w=>w.classList.contains('off')).length;$('#offn').textContent=n;pl.style.setProperty('--k',(n/30).toFixed(2))}
for(let i=0;i<30;i++){const b=document.createElement('button');b.type='button';b.className='win';b.dataset.f=5-Math.floor(i/6);b.dataset.c=i%6+1;wins.push(b);fac.append(b);b.addEventListener('click',()=>sw(b,!b.classList.contains('off')))}
wins.forEach((b,i)=>sw(b,pre.has(i)));
$('#join').addEventListener('click',()=>{
  const lit=wins.filter(w=>!w.classList.contains('off')),gap=RM?0:45;
  lit.forEach((w,i)=>setTimeout(()=>sw(w,true),i*gap));
  setTimeout(()=>{pl.classList.add('is-in');count($('#you'),14207,900,0,14100,n=>'#'+fmt(n));$('#people').textContent=fmt(14207);$('#done').focus({preventScroll:true})},RM?0:lit.length*gap+450);
});
$('#again').addEventListener('click',()=>{pl.classList.remove('is-in');wins.forEach((w,i)=>sw(w,pre.has(i)));$('#people').textContent=fmt(14206);$('#join').focus({preventScroll:true})});

// questions
$$('.q button').forEach(b=>b.addEventListener('click',()=>{
  const q=b.closest('.q'),o=!q.classList.contains('open');
  $$('.q.open').forEach(x=>{if(x!==q){x.classList.remove('open');$('button',x).setAttribute('aria-expanded','false')}});
  q.classList.toggle('open',o);b.setAttribute('aria-expanded',o);
}));

// in-page links scroll without adding history entries
$$('a[href^="#"]').forEach(a=>a.addEventListener('click',e=>{const t=$(a.getAttribute('href'));if(t){e.preventDefault();t.scrollIntoView({behavior:RM?'auto':'smooth',block:'start'})}}));

// reveal on scroll
const io=new IntersectionObserver(es=>es.forEach(e=>{if(!e.isIntersecting)return;const el=e.target;el.classList.add('in');io.unobserve(el);const n=$('[data-to]',el);if(n)count(n,+n.dataset.to,1200,150,0,String)}),{threshold:.15,rootMargin:'0px 0px -6% 0px'});
$$('.rv').forEach(el=>io.observe(el));

function layout(){city();size();fit();pos();line.style.setProperty('--lh',(items[items.length-1].offsetHeight-16)+'px');scrolled()}
layout();
addEventListener('load',()=>{fit();pos()});
if(document.fonts&&document.fonts.ready)document.fonts.ready.then(()=>{fit();pos()});
requestAnimationFrame(()=>requestAnimationFrame(()=>{de.classList.add('go');play();count($('#people'),14206,1500,500,0)}));
})();
</script>
</body>
</html>