/* The flyposted bill.
   Composition only; colour, type and shape are theme.css.

   Two surfaces. The bill is drenched acid yellow and shouts once. The
   sheet is bone and is meant to be read. Everything else follows from
   that split. */

/* ─────────────────────────────────────────────────────────────────────
   The sheet the whole thing is printed on
   ───────────────────────────────────────────────────────────────────── */

body {
  background: var(--rst-bg);
  color: var(--bill-ink);
  font-family: var(--rst-font);
  -webkit-font-smoothing: antialiased;
}

.bill-page {
  background-color: var(--bill-stock);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1' cy='1' r='0.65' fill='%2317140f' fill-opacity='0.13'/%3E%3Ccircle cx='4' cy='4' r='0.65' fill='%2317140f' fill-opacity='0.13'/%3E%3C/svg%3E");
  --rst-bg: var(--bill-stock);
  --rst-surface: var(--bill-stock);
  --rst-text-muted: var(--bill-dim);
  --rst-line: rgba(23, 20, 15, 0.3);
}

.sheet-page {
  background-color: var(--bill-bone);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='%2317140f' fill-opacity='0.07'/%3E%3Ccircle cx='4' cy='4' r='0.6' fill='%2317140f' fill-opacity='0.07'/%3E%3C/svg%3E");
}

.bill {
  max-width: 78rem;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3.5rem)
    clamp(1.5rem, 3vw, 2.25rem);
}
.bill__top {
  flex: 0 0 auto;
}

/* A bill fills the wall it is pasted on — but only where the wall is big
   enough that the strip still lands near the fold. */
@media (min-width: 46rem) and (min-height: 40rem) {
  .bill {
    min-height: 100svh;
  }
  .bill__top {
    flex: 1 1 auto;
  }
}

/* The printer's slug. A real bill carries who printed it and when; this
   one carries what it is. Set small in the body face, never in mono —
   monospace here would be a costume for "technical" on a page that is
   not about machines. */
.bill__slug {
  margin: 0;
  font-size: var(--t-sm);
}
/* No underline here: a 3px rule ten pixels above the perforation reads as a
   doubled rule, not as a link. */
.bill__slug .bill__out {
  border-bottom: 0;
  color: var(--bill-blue);
}

/* ─────────────────────────────────────────────────────────────────────
   The shout
   ───────────────────────────────────────────────────────────────────── */

.bill {
  --shout: var(--t-shout);
}

.bill__shout {
  font-family: var(--bill-display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--bill-blue);
  font-size: var(--shout);
  line-height: 0.84;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 15ch;
  text-wrap: balance;
  position: relative;
}

/* The second ink, laid across the whole headline block. Anchored to the h1
   so it scales with the shout instead of with one line of it, and offset a
   couple of pixels off true — a two-colour job never registers perfectly,
   and that misregistration is the tell that it was printed. */
.bill__shout::after {
  content: "";
  position: absolute;
  left: -100vw;
  right: -100vw;
  top: 46%;
  height: 0.26em;
  background: var(--bill-cyan);
  mix-blend-mode: multiply;
  transform: translateY(2px);
  z-index: 1;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────────────
   The argument, set in hard columns
   ───────────────────────────────────────────────────────────────────── */

.bill__body {
  margin: clamp(1.75rem, 4vw, 3rem) 0 0;
  columns: 2;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  column-rule: 1px solid var(--rst-line);
  max-width: 62rem;
  font-size: var(--t-body);
  line-height: 1.55;
}
.bill__body p {
  margin: 0 0 1em;
}
.bill__body p:last-child {
  margin-bottom: 0;
}

.bill__out {
  display: inline-block;
  font-weight: 700;
  color: var(--bill-ink);
  text-decoration: none;
  border-bottom: 3px solid var(--bill-blue);
  padding-bottom: 1px;
}
.bill__out:hover {
  color: var(--bill-blue);
}

/* ─────────────────────────────────────────────────────────────────────
   The tear-off strip — the whole point of the page
   ───────────────────────────────────────────────────────────────────── */

.tear {
  margin-top: clamp(1.75rem, 4vw, 3rem);
}

.tear__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin: 0 0 0.6rem;
}
.tear__instruction {
  font-weight: 700;
  font-size: var(--t-lede);
  margin: 0;
}

/* The perforation. A dashed rule the tabs hang from, drawn as a real
   repeating gradient rather than a border so the dashes stay square. */
.tear__perf {
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    var(--bill-ink) 0 7px,
    transparent 7px 14px
  );
}

.tear__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 2px solid var(--bill-ink);
}

.tab {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
  min-height: clamp(5rem, 7vw, 6.5rem);
  padding: 0.9rem 1.1rem 1rem;
  background: var(--bill-stock);
  color: var(--bill-ink);
  text-decoration: none;
  border-right: 2px dashed var(--bill-ink);
  transform-origin: top center;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tab:last-child {
  border-right: 0;
}

.tab:hover,
.tab:focus-visible {
  transform: translateY(-10px);
  box-shadow: var(--rst-shadow-pop);
  z-index: 1;
}

.tab__addr {
  margin-top: 0.15rem;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--bill-blue);
  overflow-wrap: anywhere;
  word-break: normal;
}

.tab__word {
  font-family: var(--bill-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--t-display-2);
  line-height: 0.92;
  min-height: 1.84em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ─────────────────────────────────────────────────────────────────────
   The stance sheet — bone, and meant to be read
   ───────────────────────────────────────────────────────────────────── */

.sheet {
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3.5rem)
    clamp(3rem, 7vw, 5rem);
}

/* The reply and the slip sit side by side under one rule, the way the bill
   sets its argument in columns — not stacked down a centred strip. */
.sheet__split {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  border-top: 2px solid var(--bill-ink);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (max-width: 60rem) {
  .sheet__split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* The tab you took, carried over torn. Its bottom edge is ragged because
   it came off a perforation. */
.torn {
  background: var(--bill-stock);
  width: fit-content;
  max-width: 100%;
  padding: 0.9rem 1.4rem 1.5rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  position: relative;
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - 9px),
    96% 100%, 92% calc(100% - 7px), 88% 100%, 84% calc(100% - 8px),
    80% 100%, 76% calc(100% - 6px), 72% 100%, 68% calc(100% - 9px),
    64% 100%, 60% calc(100% - 7px), 56% 100%, 52% calc(100% - 8px),
    48% 100%, 44% calc(100% - 6px), 40% 100%, 36% calc(100% - 9px),
    32% 100%, 28% calc(100% - 7px), 24% 100%, 20% calc(100% - 8px),
    16% 100%, 12% calc(100% - 6px), 8% 100%, 4% calc(100% - 9px),
    0 100%
  );
}
.torn__word {
  font-family: var(--bill-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--t-display-2);
  line-height: 0.9;
  margin: 0;
}

.sheet__reply {
  font-size: var(--t-lede);
  line-height: 1.62;
  max-width: 68ch;
}
.sheet__reply p {
  margin: 0 0 1.05em;
}
.sheet__reply p:first-child {
  font-size: 1.15em;
}

/* ─────────────────────────────────────────────────────────────────────
   The form, in the bill's own vocabulary
   Fields are ruled lines on paper, not rounded boxes on a screen.
   ───────────────────────────────────────────────────────────────────── */

.slip {
  margin-top: 0;
}
.slip__title {
  font-family: var(--bill-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--t-display-3);
  line-height: 1;
  margin: 0 0 1.25rem;
}

.field {
  display: block;
  margin-bottom: 1.35rem;
}
.field > span {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}
.field input[type="email"],
.field input[type="text"],
.field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--bill-ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--bill-ink);
  padding: 0.45rem 0;
  border-radius: 0;
}
.field textarea {
  resize: vertical;
  min-height: 7.5rem;
  line-height: 1.5;
  padding: 0.55rem 0.7rem;
  background: rgba(23, 20, 15, 0.05);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--bill-dim-bone);
}

.stamp {
  position: relative;
  overflow: hidden;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--t-sm);
  color: var(--bill-stock);
  background: var(--bill-blue);
  border: 0;
  border-radius: 0;
  padding: 0.85rem 1.75rem;
  cursor: pointer;
  transition: background 160ms ease-out;
}
.stamp::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  top: 56%;
  height: 7px;
  background: var(--bill-cyan);
  mix-blend-mode: multiply;
  transform: translateY(1px);
  pointer-events: none;
}
.stamp:hover:not(:disabled) {
  background: var(--rst-accent-strong);
}
.stamp:disabled::after {
  display: none;
}
.stamp:disabled {
  background: transparent;
  color: var(--bill-dim-bone);
  border: 2px dashed var(--rst-line-strong);
  cursor: not-allowed;
}

.slip__status {
  margin: 0.85rem 0 0;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bill-dim-bone);
}

.notice {
  border-left: 0;
  border-top: 2px solid var(--rst-tone-negative-fg);
  background: var(--rst-tone-negative-bg);
  color: var(--rst-tone-negative-fg);
  padding: 0.75rem 0.9rem;
  margin: 0 0 1.25rem;
  font-weight: 700;
}

/* The honeypot: present in the page, never on the screen. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
   Receipts — what a signup, a confirmation and a dead link look like
   ───────────────────────────────────────────────────────────────────── */

.receipt {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 10vh, 6rem) clamp(1.25rem, 5vw, 2.5rem);
  border-top: 2px solid var(--bill-ink);
  border-bottom: 2px solid var(--bill-ink);
  margin-top: clamp(2rem, 12vh, 7rem);
  position: relative;
}
/* The stamp mark: the second ink, struck across the top rule. */
.receipt::before {
  content: "";
  position: absolute;
  top: -3px;
  left: clamp(1.25rem, 5vw, 2.5rem);
  width: clamp(5rem, 14vw, 9rem);
  height: 8px;
  background: var(--bill-cyan);
  mix-blend-mode: multiply;
}
.receipt .receipt__mark {
  font-family: var(--bill-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--t-display-1);
  line-height: 0.92;
  color: var(--bill-blue);
  margin: 0 0 0.85rem;
  text-wrap: balance;
}
.receipt p {
  margin: 0;
  font-size: var(--t-lede);
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────────
   Narrow screens: the strip stacks, the shout stays a shout
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 46rem) {
  .bill__body {
    columns: 1;
  }
  .tear__tabs {
    grid-template-columns: 1fr;
  }
  .tab {
    min-height: 0;
    border-right: 0;
    border-bottom: 2px dashed var(--bill-ink);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.85rem 0.25rem;
  }
  .tab:last-child {
    border-bottom: 0;
  }
  .tab__word {
    min-height: 0;
  }
  .tab:hover,
  .tab:focus-visible {
    transform: none;
    box-shadow: none;
    background: var(--bill-bone);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab {
    transition: none;
  }
  .tab:hover,
  .tab:focus-visible {
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   The ledger — admin, in the same hand
   Operate, not persuade: the tally has to be scannable before it is
   anything else, so the bill's voice survives only in the type and rules.
   ───────────────────────────────────────────────────────────────────── */

.ledger {
  max-width: 66rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.ledger__title {
  font-family: var(--bill-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--t-display-1);
  line-height: 0.9;
  margin: 0 0 1.25rem;
  color: var(--bill-blue);
}
.ledger__tally,
.ledger__split {
  margin: 0 0 0.65rem;
  font-size: var(--t-base);
}
.ledger__tally b,
.ledger__split b {
  font-family: var(--bill-display);
  font-size: 1.5em;
  line-height: 1;
  vertical-align: -0.06em;
  margin-right: 0.15em;
}
.ledger__split span + span {
  margin-left: 1.25rem;
}
.ledger__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: var(--t-base);
  font-variant-numeric: tabular-nums;
}
.ledger__table th {
  text-align: left;
  font-size: var(--t-xxs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--bill-ink);
  padding: 0 0.75rem 0.5rem 0;
}
.ledger__table td {
  border-bottom: 1px solid var(--rst-line);
  padding: 0.7rem 0.75rem 0.7rem 0;
  vertical-align: top;
}
.ledger__table td:last-child {
  color: var(--bill-dim-bone);
  max-width: 28rem;
}

/* ─────────────────────────────────────────────────────────────────────
   The pills
   Drawn on the stock in one stroke weight. Solid, not multiplied: a
   marker does not overprint with what was already printed under it.
   ───────────────────────────────────────────────────────────────────── */

.pill {
  display: block;
  width: clamp(3.5rem, 6vw, 5rem);
  height: auto;
  margin-bottom: 0.55rem;
  overflow: visible;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* The tab lifts; the pill rolls very slightly with it, the way a drawn
   thing does when the paper it is on moves. */
.tab:hover .pill,
.tab:focus-visible .pill {
  transform: rotate(-3deg) translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .pill,
  .tab:hover .pill,
  .tab:focus-visible .pill {
    transition: none;
    transform: none;
  }
}

@media (max-width: 46rem) {
  .pill {
    width: 3.25rem;
    margin-bottom: 0.35rem;
  }
}

/* The all-in reply's disclosure. Set apart from the text it describes by a
   rule, and quieter than it: it is a note about the copy, not more copy. */
.sheet__disclosure {
  margin-top: 1.6rem;
  padding-top: 0.85rem;
  border-top: 2px solid var(--rst-line);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bill-dim-bone);
}

/* Links inside the argument. They sit in the body's own colour with the
   second ink under them, so they read as marked-up text rather than as
   buttons dropped into a paragraph. */
.lede-link {
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -0.34em 0 rgba(20, 160, 200, 0.45);
  transition: box-shadow 160ms ease-out;
}
.lede-link:hover {
  box-shadow: inset 0 -0.9em 0 rgba(20, 160, 200, 0.5);
}