:root{
    --paper:#F4F5F3;
    --panel:#E8EAE6;
    --ink:#1A1B1D;
    --steel:#5F6469;
    --rule:#CFD3CE;
    --orange:#EC6A1E;
    --orange-deep:#C4520F;
    --measure:66ch;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:Barlow,"Helvetica Neue",Arial,sans-serif;
    font-size:1.0625rem;line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--orange-deep)}
  a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
  .skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem}
  .skip:focus{left:1rem;top:1rem;z-index:10}

  .wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}

  /* hi-vis stripe: the one piece of ornament */
  .stripe{height:10px;background:repeating-linear-gradient(135deg,var(--orange) 0 18px,var(--ink) 18px 36px)}

  header.top{border-bottom:1px solid var(--rule)}
  .topbar{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1rem 0;flex-wrap:wrap}
  .wordmark{display:inline-flex;align-items:center;gap:.45em;font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;font-size:1.45rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-decoration:none}
  .wordmark .mark{width:1.7em;height:auto;flex:none}
  .wordmark span{color:var(--orange-deep)}
  nav a{color:var(--ink);text-decoration:none;margin-left:1.25rem;font-weight:500;border-bottom:2px solid transparent}
  nav a:hover{border-bottom-color:var(--orange)}

  h1,h2,h3{font-family:"Barlow Condensed",Barlow,sans-serif;line-height:1;margin:0;letter-spacing:-.005em}
  h1{font-size:clamp(2.75rem,8vw,6rem);font-weight:700;max-width:14ch}
  h2{font-size:clamp(2rem,4.5vw,3.25rem);font-weight:700;margin-bottom:1.25rem}
  h3{font-size:1.5rem;font-weight:600}
  p{margin:0 0 1rem;max-width:var(--measure)}
  .lede{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.45;color:var(--ink);max-width:56ch}
  .muted{color:var(--steel)}
  section{padding:clamp(3rem,7vw,5.5rem) 0;border-top:1px solid var(--rule)}
  section:first-of-type{border-top:0}

  /* hero */
  .hero{padding-top:clamp(2.5rem,6vw,4.5rem)}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:2rem}
  @media(min-width:900px){.hero-grid{grid-template-columns:5fr 7fr;align-items:end}}

  figure.chart{margin:0;background:#fff;border:1px solid var(--rule);padding:1rem 1rem .75rem}
  figure.chart svg{width:100%;height:auto;display:block}
  .toggle{display:flex;gap:.5rem;margin:0 0 .75rem}
  .toggle button{
    font:inherit;font-weight:600;padding:.45rem .9rem;border:1.5px solid var(--ink);
    background:#fff;color:var(--ink);cursor:pointer;border-radius:2px
  }
  .toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
  figcaption{font-size:.95rem;color:var(--steel);margin-top:.75rem;max-width:none}
  .toggle button.play{
    margin-left:auto;align-self:center;width:1.75rem;height:1.75rem;padding:0;border-radius:50%;
    border:1px solid var(--rule);background:transparent;color:var(--steel);display:inline-flex;align-items:center;justify-content:center;opacity:.7
  }
  .toggle button.play:hover{opacity:1;border-color:var(--steel)}
  .toggle button.play svg{width:.65rem;height:.65rem;fill:currentColor;display:none}
  .toggle button.play[aria-pressed="true"] .ico-pause{display:block}
  .toggle button.play[aria-pressed="false"] .ico-play{display:block}
  .chart text{font-family:Barlow,sans-serif;font-size:13px;fill:var(--steel)}
  .chart text.strong{fill:var(--ink);font-weight:600}

  /* two-column prose sections */
  .cols{display:grid;grid-template-columns:1fr;gap:1.5rem 4rem}
  @media(min-width:900px){.cols{grid-template-columns:4fr 8fr}}

  /* the five arguments: a ruled list, not cards */
  dl.five{margin:0;border-top:2px solid var(--ink)}
  dl.five > div{display:grid;grid-template-columns:1fr;gap:.35rem 3rem;padding:1.35rem 0;border-bottom:1px solid var(--rule)}
  @media(min-width:760px){dl.five > div{grid-template-columns:5fr 7fr}}
  dl.five dt{font-family:"Barlow Condensed",Barlow,sans-serif;font-size:1.65rem;font-weight:600;line-height:1.05}
  dl.five dd{margin:0;max-width:var(--measure)}

  /* proof table */
  table{border-collapse:collapse;width:100%;font-size:1rem;margin:1.5rem 0 2rem}
  th,td{text-align:left;padding:.8rem .75rem .8rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
  th{font-weight:600;border-bottom:2px solid var(--ink)}
  td:first-child{font-weight:600}
  @media(max-width:700px){
    table,thead,tbody,tr,th,td{display:block}
    thead{display:none}
    tr{padding:.75rem 0;border-bottom:1px solid var(--rule)}
    td{border:0;padding:.15rem 0}
    td::before{content:attr(data-label) " ";color:var(--steel)}
    td:first-child::before{content:none}
  }
  blockquote{
    margin:0;padding:1.5rem 1.75rem;background:var(--panel);border-left:6px solid var(--orange);
    font-family:"Barlow Condensed",Barlow,sans-serif;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.15;font-weight:600;max-width:32ch
  }
  blockquote cite{display:block;font-family:Barlow,sans-serif;font-size:1rem;font-weight:400;font-style:normal;color:var(--steel);margin-top:.75rem}

  /* FAQ */
  .faq details{border-bottom:1px solid var(--rule);padding:.25rem 0}
  .faq details:first-of-type{border-top:2px solid var(--ink)}
  .faq summary{cursor:pointer;padding:1rem 0;font-weight:600;font-size:1.15rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-family:"Barlow Condensed",sans-serif;font-size:1.6rem;line-height:1;color:var(--orange-deep);flex:none}
  .faq details[open] summary::after{content:"–"}
  .faq details p{padding-bottom:.75rem}

  /* asks + who */
  ul.asks{padding:0;margin:0;list-style:none;max-width:var(--measure)}
  ul.asks li{padding:.9rem 0 .9rem 1.5rem;border-bottom:1px solid var(--rule);position:relative}
  ul.asks li::before{content:"";position:absolute;left:0;top:1.35rem;width:.7rem;height:.7rem;background:var(--orange)}
  .cta{display:inline-block;background:var(--orange);color:#fff;text-decoration:none;font-weight:600;padding:.85rem 1.4rem;border-radius:2px;margin-top:.5rem;border:0;font:inherit;font-weight:600;cursor:pointer}
  .cta:hover{background:var(--orange-deep)}
  form.contact{max-width:var(--measure);margin-top:1.5rem}
  form.contact label{display:block;font-weight:600;margin-bottom:1rem}
  form.contact input,form.contact textarea{
    display:block;width:100%;margin-top:.35rem;padding:.6rem .7rem;font:inherit;font-weight:400;
    border:1.5px solid var(--rule);border-radius:2px;background:#fff;color:var(--ink)
  }
  form.contact input:focus,form.contact textarea:focus{outline:none;border-color:var(--ink)}
  form.contact .row{display:grid;grid-template-columns:1fr;gap:0 1.25rem}
  @media(min-width:640px){form.contact .row{grid-template-columns:1fr 1fr}}
  form.contact .hp{position:absolute;left:-9999px}
  .form-note{margin-top:1rem;font-weight:500;min-height:1.5em}

  footer{background:var(--ink);color:#C9CDC8;padding:2.5rem 0 3rem;font-size:.95rem}
  footer a{color:#fff}
  footer p{max-width:none}
  footer ol{padding-left:1.2rem;margin:.5rem 0 1.5rem}
  footer li{margin:.25rem 0}

  /* sign-up band */
  .signup{background:var(--ink);color:#F4F5F3;padding:clamp(2rem,5vw,3rem) 0;border-top:0}
  .signup .wrap{display:grid;grid-template-columns:1fr;gap:1.25rem 3rem;align-items:center}
  @media(min-width:900px){.signup .wrap{grid-template-columns:5fr 7fr}}
  .signup h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0}
  .signup p{color:#C9CDC8;margin:.5rem 0 0;max-width:40ch}
  form.signup-form{display:grid;grid-template-columns:1fr;gap:.75rem;position:relative}
  @media(min-width:640px){form.signup-form{grid-template-columns:3fr 2fr auto}}
  form.signup-form input{padding:.75rem .8rem;font:inherit;border:1.5px solid #5F6469;border-radius:2px;background:#fff;color:var(--ink);width:100%}
  form.signup-form input:focus{outline:none;border-color:var(--orange)}
  form.signup-form .cta{margin:0;white-space:nowrap}
  form.signup-form .hp{position:absolute;left:-9999px}
  form.signup-form .form-note{grid-column:1/-1;color:#F4F5F3;margin-top:0}
  
  form.contact label.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:500}
  form.contact label.check input{width:auto;margin-top:.3rem}

  /* town pages */
  .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.25rem;margin:1.5rem 0 0;padding:0;list-style:none;max-width:none}
  .facts li{border-top:3px solid var(--ink);padding-top:.6rem}
  .facts b{display:block;font-family:"Barlow Condensed",Barlow,sans-serif;font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
  .facts span{display:block;color:var(--steel);margin-top:.35rem;font-size:.95rem}
  .crumb{font-size:.95rem;color:var(--steel);margin:0 0 1rem}
  .crumb a{color:inherit}
  .town-list{padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;max-width:none}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* briefing page */
  .briefmeta{margin-top:1.5rem;color:var(--steel);font-size:.95rem}
  a.pdf{font-weight:600}
  ol.srclist{padding-left:1.2rem;margin:1rem 0 1.5rem;max-width:var(--measure)}
  ol.srclist li{margin:.5rem 0}
  .brief-sec ul.asks li strong{display:block}

  /* two static day charts side by side, on the briefing page */
  .chartpair{display:grid;grid-template-columns:1fr;gap:1.25rem;margin:1.75rem 0 0}
  @media(min-width:760px){.chartpair{grid-template-columns:1fr 1fr}}
  .chartpair figcaption b{color:var(--ink)}

  /* print-only masthead: the screen header is hidden on paper, so the mark needs a home */
  .printhead{display:none}

  /* print: the briefing is also the PDF. Rebuild it with sh assets/build-briefing.sh */
  @media print{
    @page{size:A4;margin:16mm 14mm}
    .stripe,header.top,.signup,.skip,.screenonly{display:none!important}
    body{background:#fff;color:#000;font-size:10.5pt;line-height:1.42}
    /* Print the fills. Without this, most browsers drop every background colour,
       which strips the hi-vis stripe, the orange bullets and the battery block. */
    *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .printhead{display:block;margin-bottom:8mm}
    .printhead-stripe{height:5px;background:repeating-linear-gradient(135deg,var(--orange) 0 9px,var(--ink) 9px 18px)}
    .printhead-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:6px 0 7px;border-bottom:1px solid var(--rule)}
    .printhead-mark{display:inline-flex;align-items:center;gap:.45em;font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;font-size:15pt;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
    .printhead-mark .mark{width:1.7em;height:auto;flex:none}
    .printhead-mark span{color:var(--orange-deep)}
    .printhead-meta{font-size:8.5pt;color:var(--steel)}
    .chartpair{grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;break-inside:avoid}
    /* The chart labels are sized in an 800-unit viewBox. At half an A4 column that is
       about 5 pt on paper, so scale them up for print only. */
    .chartpair .chart text{font-size:26px}
    figure.chart{padding:6px 6px 4px;break-inside:avoid}
    figcaption{font-size:8pt;margin-top:5px}
    .wrap{max-width:none;margin:0;padding:0}
    section{padding:0 0 .6rem;border-top:0}
    .hero{padding-top:0}
    h1{font-size:24pt;max-width:none;margin-bottom:.4rem}
    h2{font-size:15pt;margin:1.1rem 0 .5rem}
    h3{font-size:11.5pt}
    p,.lede{font-size:10.5pt;line-height:1.42;max-width:none}
    .lede{color:#000}
    .cols{display:block}
    blockquote,dl.five > div,ul.asks li,ol.srclist li{break-inside:avoid}
    p{orphans:3;widows:3}
    h2,h3{break-after:avoid}
    tr{break-inside:avoid}
    table{font-size:9.5pt;margin:.6rem 0 1rem}
    ul.asks li{padding:.4rem 0 .4rem 1.1rem;max-width:none}
    ul.asks li::before{top:.85rem;width:.5rem;height:.5rem}
    ol.srclist{font-size:9.5pt;max-width:none}
    footer{background:none;color:#000;padding:.8rem 0 0;border-top:1px solid var(--rule);font-size:9pt}
    footer a{color:#000}
    footer strong{color:#000 !important}
    /* print the address of every external link, since a reader cannot click paper */
    a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#5F6469;word-break:break-all}
  }