/* townnethub.com

   The look comes from the things a neighborhood already reads in an
   emergency: road signs and the notices posted at the mailboxes. One typeface
   drawn from highway lettering, slate and overcast gray, and sign yellow kept
   for the notice at the top of the page and the thing to press. */

@font-face {
  font-family: "Overpass";
  src: url("/fonts/overpass-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --slate: #1c2730;
  --overcast: #edf0ee;
  --paper: #ffffff;
  --sign: #ffcf00;
  --mute: #51606b;
  --rule: #c5cdca;
  --ok: #1c6e47;
  --help: #b3261e;

  --step--1: 0.875rem;
  --step-0: 1.125rem;
  --step-1: 1.375rem;
  --step-2: 1.75rem;
  --step-3: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem);
  --step-4: clamp(2.5rem, 1.2rem + 5.4vw, 4.75rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wide: 72rem;
  --text: 38rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--overcast);
  color: var(--slate);
  font-family: "Overpass", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-1);
  font-weight: 800;
  line-height: 1.2;
}

p {
  margin: 0;
  max-width: var(--text);
}

p + p {
  margin-top: 1em;
}

a {
  color: inherit;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--slate);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Words that must not be split at their hyphen. */
.nb {
  white-space: nowrap;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wide));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  background: var(--slate);
  color: var(--paper);
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  z-index: 10;
}

.skip:focus {
  top: 0.5rem;
}

/* ------------------------------------------------------------ top bar */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 900;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.mark img {
  width: 1.9rem;
  height: 1.9rem;
}

.top nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 1.75rem);
  font-weight: 700;
  font-size: 1rem;
}

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 800;
  font-size: var(--step-0);
  line-height: 1.2;
  padding: 0.85rem 1.35rem 0.75rem;
  border-radius: 8px;
  border: 3px solid var(--slate);
  background: var(--slate);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: #2c3b47;
  border-color: #2c3b47;
}

.btn.sign {
  background: var(--sign);
  color: var(--slate);
}

.btn.sign:hover {
  background: #ffdc3d;
  border-color: var(--slate);
}

/* The kit is not ready. The button stays where it will be, switched off. */
.btn[disabled] {
  background: transparent;
  color: var(--slate);
  border-style: dashed;
  opacity: 0.55;
  cursor: not-allowed;
}

.on-slate .btn[disabled] {
  color: var(--paper);
  border-color: var(--paper);
}

/* ------------------------------------------------------------ the notice */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

/* A road sign: yellow face, black line set in from the edge. */
.notice {
  position: relative;
  background: var(--sign);
  border-radius: 26px;
  padding: clamp(1.9rem, 5vw, 3.75rem);
}

.notice::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 4px solid var(--slate);
  border-radius: 17px;
  pointer-events: none;
}

.notice h1 {
  font-size: var(--step-4);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 15ch;
}

/* The question stands on a line of its own, as it would on a posted notice. */
.notice h1 .ask {
  display: block;
}

.notice .lede {
  margin-top: 1.4rem;
  font-size: var(--step-1);
  line-height: 1.45;
  font-weight: 500;
  max-width: 33rem;
}

.status {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: 0.3rem 0.8rem 0.2rem;
  background: var(--slate);
  color: var(--paper);
  border-radius: 6px;
  font-size: var(--step--1);
  font-weight: 700;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.fine {
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 31rem;
}

.phone {
  width: min(100%, 19rem);
  margin-inline: auto;
  border: 11px solid var(--slate);
  border-radius: 40px;
  overflow: hidden;
  background: var(--slate);
}

.phone img {
  width: 100%;
  border-radius: 28px;
}

@media (min-width: 56rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }
}

/* ------------------------------------------------------------ sections */

.band {
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.band.paper {
  background: var(--paper);
}

.band.on-slate {
  background: var(--slate);
  color: var(--paper);
}

.band h2 + p,
.band h2 + .cols,
.band h2 + .steps,
.band h2 + .shots {
  margin-top: 1.5rem;
}

.big {
  font-size: var(--step-1);
  line-height: 1.5;
}

.cols {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 52rem) {
  .cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cols.lean {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
  }

  .cols.lead {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* How an outage goes, and the numbered houses in the diagram: real
   sequences, so they are numbered. The same columns without numbers hold
   points that have no order. */
.steps,
.points {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}

.steps {
  counter-reset: step;
}

.steps li,
.points li {
  border-top: 4px solid var(--slate);
  padding-top: 0.9rem;
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: block;
  font-size: var(--step-3);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.6rem;
}

.steps h3 + p,
.points h3 + p {
  margin-top: 0.4rem;
}

.steps p,
.points p {
  font-size: 1rem;
  color: var(--mute);
}

@media (min-width: 40rem) {
  .steps,
  .points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .steps,
  .points {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* A second heading inside one band: the same subject, carried further. */
.cols.lead.then {
  margin-top: clamp(3.5rem, 9vw, 6.5rem);
}

/* The street from above. A tall drawing takes its place on a phone. */
.tree {
  display: block;
  margin-top: 2.5rem;
}

.tree img {
  width: min(100%, 58rem);
}

@media (max-width: 40rem) {
  .tree img {
    width: min(100%, 23rem);
    margin-inline: auto;
  }
}

/* What neighbors can do: the screens themselves. */
.shots {
  display: grid;
  gap: 2.75rem 2rem;
  margin-top: 2.75rem;
}

.shots figure {
  margin: 0;
}

.shots .phone {
  margin-inline: 0;
  width: min(100%, 17rem);
}

.shots figcaption {
  margin-top: 1.1rem;
  max-width: 21rem;
}

.shots figcaption p {
  margin-top: 0.3rem;
  font-size: 1rem;
  color: var(--mute);
}

.cut {
  border: 3px solid var(--slate);
  border-radius: 14px;
  overflow: hidden;
  width: min(100%, 22rem);
}

@media (min-width: 44rem) {
  .shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .shots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.more {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--rule);
}

.more p {
  font-size: 1rem;
  color: var(--mute);
}

.more h3 + p {
  margin-top: 0.3rem;
}

.pair {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.pair .cut {
  width: 100%;
  border-color: var(--paper);
}

@media (min-width: 30rem) {
  .pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Plain lists, marked the way a checklist is. */
.list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  max-width: var(--text);
}

.list li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.9rem;
  border-top: 2px solid var(--rule);
}

.list li:last-child {
  border-bottom: 2px solid var(--rule);
}

.list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.05rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 3px;
  background: var(--slate);
}

.list.no li::before {
  background: none;
  border: 3px solid var(--help);
  border-radius: 50%;
}

.panel {
  background: var(--paper);
  border: 3px solid var(--slate);
  border-radius: 14px;
  padding: clamp(1.4rem, 4vw, 2.25rem);
}

.panel h3 + p {
  margin-top: 0.6rem;
}

.panel .btn {
  margin-top: 1.5rem;
}

.credit {
  margin-top: 2rem;
  font-size: var(--step--1);
  color: var(--mute);
}

/* ------------------------------------------------------------ contact */

form.contact {
  display: grid;
  gap: 1.1rem;
  background: var(--paper);
  color: var(--slate);
  border-radius: 14px;
  padding: clamp(1.4rem, 4vw, 2.25rem);
}

.field label {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.field .hint {
  font-weight: 400;
  color: var(--mute);
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--overcast);
  border: 2px solid var(--slate);
  border-radius: 8px;
  padding: 0.65rem 0.8rem 0.55rem;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--sign);
  outline-offset: 0;
  background: var(--paper);
}

.two {
  display: grid;
  gap: 1.1rem;
  align-items: end;
}

@media (min-width: 36rem) {
  .two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* For machines that fill in every box. People never see it. */
.trap {
  position: absolute;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.formnote {
  font-size: 1rem;
  font-weight: 700;
  flex: 1 1 14rem;
}

.formnote:empty {
  display: none;
}

.formnote.bad {
  color: var(--help);
}

.formnote.good {
  color: var(--ok);
}

.small {
  font-size: var(--step--1);
  color: var(--mute);
}

/* ------------------------------------------------------------ footer */

footer {
  background: var(--slate);
  color: var(--paper);
  padding-block: 2rem 2.5rem;
  font-size: 1rem;
}

footer .wrap {
  border-top: 2px solid #3a4a56;
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
}

footer p {
  max-width: none;
}

footer p + p {
  margin-top: 0;
}

/* ------------------------------------------------------------ small pages */

.solo {
  min-height: 70vh;
  display: grid;
  align-content: center;
  padding-block: 3rem;
}

.solo .notice h1 {
  font-size: var(--step-3);
  max-width: 18ch;
}