/* Qanaq home page. Plain CSS, no build step.
   Breakpoints: 640px (the table lies wide instead of tall), 1000px (table
   beside the message), 1200px (readout under the table, all in one screen). */

@font-face {
  font-family: "Michroma";
  src: url("/fonts/michroma-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Stands in for Michroma while it loads, sized to match its wide letters. */
@font-face {
  font-family: "Michroma Fallback";
  src: local("Arial");
  size-adjust: 128%;
  ascent-override: 92%;
  descent-override: 24%;
}

:root {
  /* Brand colours */
  --plum: #58445d;
  --yellow: #ffe300;
  --green: #6cb200;

  /* Plum, darker and lighter, for grounds and text */
  --plum-deep: #2a1f2f;
  --plum-ink: #1c1420;
  --plum-rise: #6f5a76;
  --lavender: #e9e0ef;
  --lavender-dim: #d3c8d9;
  --paper: #f5f1f7;
  --rule: rgb(233 224 239 / 0.26);

  /* Green and red light enough to be read as text on plum */
  --green-lit: #94d82d;
  --alert: #9a1420;
  --alert-lit: #ffb3ab;

  --font-display: "Michroma", "Michroma Fallback", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, sans-serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  --bar: 3.5rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: var(--bar);
  scrollbar-color: var(--plum-rise) var(--plum-ink);
  background: var(--plum);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--lavender);
  background: var(--plum);
  caret-color: var(--plum);
}

::selection {
  color: var(--plum-ink);
  background: var(--yellow);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon {
  flex: none;
  width: 1em;
  height: 1em;
}

.noscript {
  max-width: 40rem;
  margin: 0;
  padding: 2rem var(--gutter);
}

/* Buttons and text links */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  min-height: 3rem;
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--plum-ink);
  background: var(--yellow);
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
    background-color 0.2s;
}

.button .icon {
  transition: transform 0.25s var(--ease-out);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgb(0 0 0 / 0.7);
}

.button:hover .icon {
  transform: translateX(3px);
}

.button:active {
  transform: none;
  box-shadow: none;
}

.button:disabled {
  cursor: progress;
  opacity: 0.7;
  transform: none;
  box-shadow: none;
}

.button--small {
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.6875rem;
}

/* Sending the form is the one button that is green: the others ask for the
   problem, and this one sets it moving. It waits in the brand green and lights
   up from the left once the form has what it needs, the way a channel on the
   table runs green when its gate is opened. It can be pressed either way. */
.button--send {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--green);
}

.button--send::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--green-lit);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}

.button--send.is-ready::before {
  transform: scaleX(1);
}

.button--quiet {
  color: var(--lavender);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--lavender-dim);
}

.button--quiet:hover {
  box-shadow: inset 0 0 0 1px var(--lavender);
}

.link {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  cursor: pointer;
}

.link:hover {
  text-decoration-thickness: 2px;
}

/* The bar */

.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--bar);
  padding-inline: var(--gutter);
  background: var(--plum-deep);
  border-bottom: 1px solid var(--rule);
}

/* The logo keeps its own light ground: a nameplate with an engraved keyline,
   fixed to the plum like the maker's plate on a piece of equipment. */
.plate {
  display: block;
  flex: none;
  padding: 0.4rem 0.7rem 0.3rem;
  border-radius: 2px;
  background: var(--paper);
  outline: 1px solid var(--plum);
  outline-offset: -4px;
}

.plate:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.plate img {
  display: block;
  width: auto;
  height: 1.5rem;
}

.bar__links {
  display: none;
  gap: 1.5rem;
  margin-left: auto;
  font-size: 0.9375rem;
}

.bar__links a {
  padding-block: 0.5rem;
  text-decoration: none;
  color: var(--lavender-dim);
  transition: color 0.2s;
}

.bar__links a:hover {
  color: var(--lavender);
  text-decoration: underline;
}

.bar .button {
  margin-left: auto;
}

.bar__ask-long {
  display: none;
}

@media (min-width: 640px) {
  .bar__links {
    display: flex;
  }

  .bar .button {
    margin-left: 0;
  }

  .bar__ask-long {
    display: inline;
  }

  .bar__ask-short {
    display: none;
  }
}

/* The stage: message, table, readout */

.stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: var(--bar);
  overflow: hidden;
}

.stage__intro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 2rem var(--gutter) 0;
}

.stage h1 {
  font-size: clamp(1.625rem, 1rem + 2.9vw, 3.25rem);
  letter-spacing: -0.02em;
}

/* The headline wears the table's colours: yellow where work is heaped up,
   green where it runs. */
.stage__pile {
  color: var(--yellow);
  white-space: nowrap;
}

.stage__flow {
  color: var(--green-lit);
}

.stage__pitch {
  max-width: 34rem;
  margin-top: 1.1rem;
  font-size: 1.125rem;
}

.stage__actions {
  margin-top: 1.5rem;
}

.stage__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--lavender-dim);
}

.stage__aside a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem;
  color: var(--lavender);
}

.stage__frame,
.stage__gl {
  grid-column: 1;
  grid-row: 2;
}

/* Tall on a phone, so the table can run down the screen towards the readout.
   It gets shorter the closer the view, which keeps what the readout says
   about a heap on screen with the heap. */
.stage__frame {
  position: relative;
  height: min(128vw, 76svh);
  pointer-events: none;
  scroll-margin-top: var(--bar);
}

/* The way back out of a close view, hovering in the corner of the scene. */
.stage__back {
  position: absolute;
  top: 0.75rem;
  left: var(--gutter);
  z-index: 2;
  color: var(--lavender);
  background: var(--plum-ink);
  box-shadow: inset 0 0 0 1px var(--lavender-dim);
  pointer-events: auto;
  animation: back-in 0.5s var(--ease-out) backwards;
}

.stage__back:hover {
  box-shadow: inset 0 0 0 1px var(--lavender), 0 10px 22px -10px rgb(0 0 0 / 0.7);
}

.stage__back:active {
  box-shadow: inset 0 0 0 1px var(--lavender);
}

.stage__back:hover .icon {
  transform: translateX(-3px);
}

@keyframes back-in {
  from {
    opacity: 0;
    translate: -0.5rem 0;
  }
}

.stage[data-level="area"] .stage__frame {
  height: min(108vw, 54svh);
}

.stage[data-level="choke"] .stage__frame {
  height: min(84vw, 38svh);
}

/* The table fades out at the edges of its window, so that a close view of
   one part never runs on under the text beside it. */
.stage__gl {
  position: relative;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}

.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}

.stage[data-table="ready"] .stage__canvas {
  opacity: 1;
}

.stage__labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s 0.3s;
}

.stage[data-table="ready"] .stage__labels {
  opacity: 1;
}

/* Where the table cannot run, the readout carries the exploration alone. */
.stage[data-table="unavailable"] .stage__gl,
.stage[data-table="unavailable"] .stage__frame {
  display: none;
}

@media (min-width: 640px) {
  .stage .stage__frame {
    height: min(48vw, 64svh);
  }
}

@media (min-width: 1000px) {
  .stage {
    grid-template-columns: minmax(19rem, 3fr) minmax(0, 5fr);
    column-gap: clamp(1.5rem, 3vw, 3.5rem);
    padding: var(--bar) var(--gutter) 2rem;
  }

  .stage h1 {
    font-size: clamp(2rem, 0.4rem + 2.9vw, 3.25rem);
  }

  .stage__intro {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding: 2.5rem 0;
  }

  /* The table's window runs out to the edge of the screen and into the gap
     beside the message; the scene centres the table on the frame. */
  .stage .stage__frame {
    grid-column: 2;
    grid-row: 1;
    height: auto;
    min-height: 23rem;
    margin-right: calc(-1 * var(--gutter));
  }

  .stage__back {
    top: 1.25rem;
    left: 0;
  }

  .stage__gl {
    grid-column: 2;
    grid-row: 1;
    margin-inline: calc(-1 * clamp(1.5rem, 3vw, 3.5rem)) calc(-1 * var(--gutter));
  }
}

@media (min-width: 1200px) {
  .stage {
    grid-template-columns: minmax(19rem, 26rem) minmax(0, 1fr);
    grid-template-rows: minmax(20rem, 1fr) auto;
    min-height: max(100svh, 43rem);
  }

  /* The message sits level with the table; the way on sits at the foot of
     the column, level with the readout. */
  .stage__intro {
    grid-row: 1 / 3;
    align-self: stretch;
    padding: 0;
  }

  .stage__message {
    margin-block: auto;
    padding-top: 2rem;
  }

  .stage__aside {
    margin-top: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
  }
}

/* Labels pinned to the table. The scene moves each .pin; the label inside
   offsets itself from that point. */

.pin {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.pin[data-off] {
  visibility: hidden;
}

.pin__text {
  display: block;
  transform: translate(-50%, -100%);
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--lavender-dim);
}

/* What comes out the far end of the table has got through. */
.pin--out .pin__text {
  color: var(--green-lit);
}

.pin__plate,
.pin__flag {
  display: block;
  border: 0;
  border-radius: 2px;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}

.pin--wide {
  display: none;
}

.pin__plate {
  position: relative;
  transform: translate(-50%, -50%);
  padding: 0.4rem 0.5rem 0.35rem;
  font-family: var(--font-display);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lavender);
  background: var(--plum-ink);
  box-shadow: inset 0 0 0 1px var(--lavender-dim);
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.pin__plate:hover,
.pin__plate.is-previewed {
  color: var(--plum-ink);
  background: var(--yellow);
  box-shadow: none;
}

/* An area with every one of its gates open answers in green. */
.pin__plate.is-clear:hover,
.pin__plate.is-clear.is-previewed {
  background: var(--green);
}

/* A small plate still gets a full-size tap target. */
.pin__plate::before {
  content: "";
  position: absolute;
  inset: -0.6rem -0.25rem;
}

/* A gate's flag sits on whichever side of the gate is clear: the heap is
   always upstream, and the layout says where the neighbours are. */
.pin__flag {
  width: max-content;
  max-width: 5.75rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
  color: var(--plum-ink);
  background: var(--yellow);
  transition: box-shadow 0.2s;
}

.flag--tall-below {
  transform: translate(-50%, 1.3rem);
}

.flag--tall-left {
  transform: translate(calc(-100% - 1.4rem), -50%);
}

.flag--tall-right {
  transform: translate(1.4rem, -50%);
}

.pin__flag.is-open {
  background: var(--green);
}

/* Close in on one bottleneck on a phone and its neighbours' flags would be
   cut off by the edge of the screen, so only its own is shown. */
@media (max-width: 639px) {
  .stage[data-level="choke"] .pin__flag:not(.is-current) {
    display: none;
  }
}

.pin__flag:hover,
.pin__flag.is-current {
  box-shadow: 0 0 0 2px var(--plum-ink), 0 0 0 4px var(--lavender);
}

@media (min-width: 640px) {
  .pin--wide {
    display: block;
  }

  .pin--tall {
    display: none;
  }

  .pin__plate {
    padding: 0.45rem 0.7rem 0.4rem;
    font-size: clamp(0.5625rem, 0.3rem + 0.45vw, 0.6875rem);
  }

  .pin__flag {
    max-width: none;
    padding: 0.4rem 0.65rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .flag--wide-right {
    transform: translate(1.6rem, -50%);
  }

  .flag--wide-above {
    transform: translate(-50%, calc(-100% - 1.5rem));
  }

  .flag--wide-below {
    transform: translate(-50%, 1.5rem);
  }
}

.pips {
  display: flex;
  gap: 0.25rem;
}

/* One per pile-up: yellow until it has been opened. */
.pips__pip {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--yellow);
}

.pips__pip.is-open {
  background: var(--green-lit);
}

/* The readout */

.readout {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.25rem;
  align-content: start;
  margin-inline: var(--gutter);
  padding-block: 1.25rem 3rem;
  border-top: 1px solid var(--rule);
  outline: 0;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.crumbs__step {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.9375rem;
  color: var(--lavender-dim);
  cursor: pointer;
}

.crumbs__step + .crumbs__step::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.5rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  rotate: 45deg;
}

.crumbs__step:hover {
  color: var(--lavender);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.readout__title {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.25;
}

.readout__lead p {
  max-width: 34rem;
  margin-top: 0.7rem;
  color: var(--lavender-dim);
}

.readout__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.1rem;
}

.readout__hint {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--lavender-dim);
}

.readout__fix-text {
  max-width: 34rem;
}

.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rows li + li {
  border-top: 1px solid var(--rule);
}

.row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.45rem 0.25rem;
  border: 0;
  background: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.row:hover,
.row.is-previewed {
  background: rgb(233 224 239 / 0.08);
}

.row__name {
  flex: 1;
  font-weight: 600;
  line-height: 1.3;
  transition: transform 0.25s var(--ease-out);
}

.row:hover .row__name,
.row.is-previewed .row__name {
  transform: translateX(0.5rem);
}

.row .icon {
  margin-right: 0.5rem;
  color: var(--lavender-dim);
}

.row--other .row__name {
  font-weight: 400;
  color: var(--lavender-dim);
}

.row__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--yellow);
}

.row__mark.is-open {
  background: var(--green);
}

.row__mark .icon {
  width: 0.75rem;
  height: 0.75rem;
  margin: 0;
  color: var(--plum-ink);
}

.readout__facts {
  display: grid;
  gap: 0.2rem;
  max-width: 34rem;
  margin-top: 0.9rem;
  color: var(--lavender-dim);
}

.readout__facts strong {
  color: var(--green-lit);
}

@media (min-width: 640px) {
  .readout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }

  .crumbs {
    grid-column: 1 / -1;
    margin-bottom: -0.75rem;
  }
}

@media (min-width: 1000px) {
  .readout {
    grid-column: 1 / -1;
    margin-inline: 0;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1200px) {
  .readout {
    grid-column: 2;
    grid-row: 2;
    min-height: 17.5rem;
    padding-bottom: 0;
  }
}

/* What to expect */

.start {
  padding-block: 4rem 4.5rem;
  color: var(--plum-ink);
  background: var(--paper);
}

.start :focus-visible,
.sent :focus-visible {
  outline-color: var(--plum);
}

.start__head {
  display: grid;
  gap: 1.5rem;
  padding-inline: var(--gutter);
}

.start h2 {
  font-size: clamp(2rem, 1rem + 5.2vw, 5.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.start__lead {
  max-width: 38rem;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  line-height: 1.35;
  font-weight: 500;
}

/* A stretch of the table, seen from straight above. */
.start__strip {
  display: block;
  width: 100%;
  height: 11rem;
  margin-block: 2.5rem;
}

/* On a narrow screen the three points are set as running text. */
.start__points {
  display: grid;
  gap: 1rem;
  max-width: 38rem;
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
}

.start__point h3,
.start__point p {
  display: inline;
}

.start__point h3 {
  font: inherit;
  font-weight: 700;
}

.start__point h3::after {
  content: ". ";
}

.start__mark {
  display: none;
}

@media (min-width: 1000px) {
  .start {
    padding-block: 6.5rem 7rem;
  }

  .start__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .start__strip {
    height: 15rem;
    margin-block: 3.5rem;
  }

  /* On a wide one each point hangs from the part of the strip it speaks
     for: the heap, the gate at 42% across, and the stream running free. */
  .start__points {
    grid-template-columns: 10% 28% 4% 26% 4% 24% 4%;
    gap: 0;
    max-width: none;
    margin-top: -3.5rem;
    padding: 0;
  }

  .start__point {
    position: relative;
    padding-top: 4.5rem;
  }

  .start__point:nth-child(1) {
    grid-column: 2;
  }

  .start__point:nth-child(2) {
    grid-column: 4;
  }

  .start__point:nth-child(3) {
    grid-column: 6;
  }

  .start__point h3,
  .start__point p {
    display: block;
  }

  .start__point h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.3;
  }

  .start__point h3::after {
    content: none;
  }

  .start__point p {
    margin-top: 0.5rem;
  }

  /* The lead line down from the strip, ending in the thing it points at. */
  .start__mark {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 2px;
    height: 3.4rem;
    background: var(--plum-ink);
  }

  .start__mark::after {
    content: "";
    position: absolute;
    bottom: -0.2rem;
    left: 50%;
    width: 1rem;
    height: 1rem;
    translate: -50% 0;
    border: 2px solid var(--plum-ink);
    border-radius: 50%;
    background: var(--yellow);
  }

  /* The heap sits just before the gate, so its line drops at the right-hand
     end of its text. */
  .start__point:nth-child(1) .start__mark {
    left: 88%;
  }

  .start__mark--gate::after {
    width: 1.4rem;
    border-radius: 0;
  }

  .start__mark--flow::after {
    background: var(--green);
  }
}

/* Contact: the invitation on yellow, the form beside it on plum. */

.contact {
  display: grid;
  background: var(--plum);
}

.contact__pitch {
  padding: 3.5rem var(--gutter) 3rem;
  color: var(--plum-ink);
  background: var(--yellow);
  transition: background-color 0.9s var(--ease-out);
}

/* Sent: the yellow runs green, like a gate that has been opened. */
.contact[data-status="sent"] .contact__pitch {
  background: var(--green);
}

.contact__pitch ::selection {
  color: var(--yellow);
  background: var(--plum-ink);
}

.contact h2 {
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.5rem);
  letter-spacing: -0.02em;
}

.contact__pitch p {
  max-width: 34rem;
  margin-top: 1rem;
}

.contact__lead {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 500;
}

.contact__reply {
  padding: 3rem var(--gutter) 4.5rem;
}

.form {
  display: grid;
  gap: 1.5rem;
  max-width: 36rem;
  justify-items: start;
}

.field {
  display: grid;
  gap: 0.35rem;
  width: 100%;
}

.field label {
  font-weight: 700;
}

.field__hint {
  font-size: 0.9375rem;
  color: var(--lavender-dim);
}

.field input,
.field textarea {
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--plum-ink);
  border-radius: 2px;
  font: inherit;
  color: var(--plum-ink);
  background: var(--paper);
  transition: box-shadow 0.2s;
}

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

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--yellow);
}

.field input:disabled,
.field textarea:disabled {
  opacity: 0.7;
}

.field.has-error input,
.field.has-error textarea {
  border-color: var(--alert);
  box-shadow: 0 0 0 2px var(--alert-lit);
}

.field.has-error input:focus-visible,
.field.has-error textarea:focus-visible {
  box-shadow: 0 0 0 2px var(--alert-lit), 0 0 0 5px var(--yellow);
}

.field__error,
.form__failed {
  font-weight: 700;
  color: var(--alert-lit);
}

.sent {
  max-width: 34rem;
  padding: 1.75rem;
  border: 2px solid var(--plum-ink);
  border-radius: 2px;
  color: var(--plum-ink);
  background: var(--paper);
}

.sent h3 {
  font-size: 1.25rem;
}

.sent p {
  margin-block: 0.9rem 0.6rem;
}

@media (min-width: 1000px) {
  .contact {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  /* The invitation sits level with the first field, and what happens after
     sending sits at the foot of the column, level with the button. */
  .contact__pitch {
    display: flex;
    flex-direction: column;
    padding: 7rem clamp(2rem, 4vw, 4rem) 8rem var(--gutter);
  }

  .contact__pitch p:last-child {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgb(28 20 32 / 0.35);
  }

  .contact__lead {
    margin-bottom: 3rem;
  }

  .contact__reply {
    padding: 7rem var(--gutter) 8rem clamp(2rem, 5vw, 5.5rem);
  }
}

/* Footer */

.footer {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  padding: 3rem var(--gutter);
  font-size: 0.9375rem;
  color: var(--lavender-dim);
  background: var(--plum-ink);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--lavender);
}

@media (min-width: 1000px) {
  .footer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 3rem;
  }

  .footer__legal {
    grid-column: 2;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}