/* once: one sheet of paper, one ink.
   The whole site is a printed bill: a cream sheet, a soot ink, blackletter for the voice, a worn
   serif for reading and a typewriter for anything a machine wrote. Every surface is a generated
   print (the frame and the button are nine sliced photographs of ink on paper), never a CSS box. */

@font-face {
  font-family: "Cook";
  src: url("/fonts/unifraktur-cook-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Redaction";
  src: url("/fonts/redaction35-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Redaction";
  src: url("/fonts/redaction35-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Typewriter";
  src: url("/fonts/tt2020-b.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #f4f1e7;
  --paper-2: #ebe6d9;
  --paper-3: #e0d9c8;
  --rule: #c6bfae;
  --ink: #1b1a18;
  --ink-2: #4a453f;
  --ink-3: #6e675d;
  --wood: #a9793f;
  --ember: #8a5a2b;

  --display: "Cook", "UnifrakturCook", serif;
  --text: "Redaction", Georgia, serif;
  --mono: "Typewriter", "Courier New", monospace;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 72px;
  --s7: 112px;

  --t-display: 150px;
  --t-sub: 44px;
  --t-head: 36px;
  --t-lead: 24px;
  --t-body: 18px;
  --t-small: 16px;
  --t-data: 19px;
  --t-figure: 40px;

  --cellpad: var(--s3);
  --cellsize: 34px;
  --cellgap: 6px;
  --frame-slice: 39;
  --btn-slice: 23;
  --sheet-max: 1640px;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  overflow-x: clip; /* never overflow-x hidden: it freezes every sticky and clips the page */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  /* the paper lives on .sheet, not here: a background on html or body is propagated to the
     canvas, and the canvas is not part of the backdrop, so nothing would multiply onto it */
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  z-index: 50;
}
.skip:focus { left: 12px; top: 12px; }

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

.noscript { padding: var(--s5); font-size: var(--t-lead); }

/* ------------------------------------------------------------------ the sheet */

.sheet {
  background-color: var(--paper);
  background-image: url("/img/ground.webp");
  background-size: 900px auto;
  background-repeat: repeat;
  isolation: isolate;
  min-height: 100vh;
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: var(--s5) var(--s5) var(--s7);
  position: relative;
}

.sheet::before {
  /* the printed rule that holds the whole bill, the reference's own inset frame */
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid var(--rule);
  pointer-events: none;
}

/* ------------------------------------------------------------------ masthead */

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: var(--s4);
  padding: var(--s3) var(--s4) var(--s4);
}

.wordmark {
  font-family: var(--display);
  font-size: var(--t-display);
  line-height: 0.86;
  margin: 0;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.subtitle {
  font-family: var(--display);
  font-size: var(--t-sub);
  line-height: 1.12;
  margin: 0;
  text-align: right;
  color: var(--ink-2);
  text-wrap: balance;
}

.rule {
  height: 1px;
  background: var(--ink);
  margin: 0 var(--s4);
  opacity: 0.75;
}
.rule--light { background: var(--rule); opacity: 1; }

/* ------------------------------------------------------------------ the bill */

.bill {
  display: grid;
  grid-template-columns: 216px minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--s5);
  padding: var(--s5) var(--s4) 0;
  align-items: start;
}

/* the margin: the cast column of a poster, our sections and our silent */

.margin { position: sticky; top: var(--s4); }

.cast { margin: 0; padding: 0; list-style: none; text-align: center; }

.cast__head,
.roll__head {
  font-family: var(--display);
  font-size: 22px;
  color: var(--ink-3);
  text-align: center;
  margin: 0 0 var(--s2);
  padding: 12px var(--s3);
  border-bottom: 1px solid var(--rule);
}

.cast a {
  display: block;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.1;
  padding: 16px 28px;
  text-decoration: none;
  color: var(--ink-2);
}
.cast a:hover { color: var(--ink); }
.cast a[aria-current="page"] {
  color: var(--ink);
  background: var(--paper-3);
}

.roll { margin-top: var(--s4); }
.roll__topic { font-family: var(--text); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); text-align: center; margin: 0 0 var(--s4); }
.roll .roll__head + .roll__topic + .roll__head { margin-top: var(--s4); }
.roll__list { list-style: none; margin: 0; padding: 0; text-align: center; }
.roll__list li {
  font-family: var(--text);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-3);
  padding: 3px 0;
  overflow-wrap: anywhere;
}
.roll__list a { text-decoration: none; }
.roll__list a:hover { color: var(--ink); text-decoration: underline; }
.roll__empty { font-size: var(--t-small); color: var(--ink-3); text-align: center; }

/* the figure: his match, standing in the sheet */

/* the figure itself multiplies: a sticky figure is its own stacking context, and blending only its
   children would print the plate's paper as a white box on the sheet */
.figure { margin: 0; position: relative; display: flex; align-self: start; mix-blend-mode: multiply; }
.figure--side .figure__media { height: clamp(320px, 42vh, 520px); }
.figure__media {
  position: relative;
  width: 100%;
  height: clamp(420px, 66vh, 820px);
  margin: 0 auto;
}
.figure__media img,
.figure__media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: multiply; /* the print sinks into the paper instead of sitting on a white box */
}
.figure__media { display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.figure__media > * { grid-area: 1 / 1; }
.figure__clip { pointer-events: none; }
.figure__media img { transition: opacity .6s ease; }
.figure__caption {
  font-family: var(--text);
  font-size: var(--t-small);
  color: var(--ink-3);
  text-align: center;
  margin-top: var(--s2);
}

.standfirst {
  font-family: var(--text);
  font-size: var(--t-lead);
  line-height: 1.45;
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ cells */

.stack { display: grid; gap: var(--s4); }

/* A cell is a photograph of an inked rule on paper, nine sliced. It is painted by the pseudo
   element and multiplied into the page, so the plate's own paper disappears into the sheet and
   only its ink prints. The slice is measured by tools/art.mjs, never guessed. */
.cell {
  position: relative;
  padding: calc(var(--frame-slice) * 1px / 2.1 + var(--cellpad));
  min-width: 0;
}
.cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-style: solid;
  border-width: calc(var(--frame-slice) * 1px / 2.1);
  border-image-source: url("/img/frame.png");
  border-image-slice: var(--frame-slice);
  border-image-repeat: stretch;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cell > * { position: relative; }

.cell__head {
  font-family: var(--display);
  font-size: var(--t-head);
  line-height: 1.1;
  margin: 0 0 var(--s2);
}

.cell__note {
  font-family: var(--text);
  font-size: var(--t-small);
  color: var(--ink-3);
  margin: 0 0 var(--s3);
}

.cell--slug { background: transparent; }

.slug__strip {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  padding: 18px 30px;
  /* flush against the inside of the printed rule, never over it */
  margin: calc(var(--cellpad) * -1) calc(var(--cellpad) * -1) var(--s3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
}
.slug__ticker { font-family: var(--mono); font-size: 20px; letter-spacing: 0.04em; }

.address,
.bignum {
  font-family: var(--mono);
  font-size: 26px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  min-width: 0;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding: 18px 28px;
  margin: 0 0 var(--s3);
  user-select: all;
}
.address--empty { color: var(--ink-3); font-family: var(--text); font-size: var(--t-body); user-select: auto; }

.slug__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.slug__row--one { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s2); }
.slug__row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slug__row--three .btn { padding-left: 0.6em; padding-right: 0.6em; }

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

.btn {
  appearance: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 24px;
  line-height: 1;
  min-height: 52px;
  padding: 14px 1.3em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  text-align: center;
  position: relative;
  isolation: isolate;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-style: solid;
  border-width: calc(var(--btn-slice) * 1px / 3.4);
  border-image-source: url("/img/btn.png");
  border-image-slice: var(--btn-slice);
  border-image-repeat: stretch;
  mix-blend-mode: multiply;
  z-index: -1;
}
.btn:hover::before { filter: contrast(1.4); }
.btn:hover { background: rgba(27, 26, 24, 0.05); }
.btn:active { transform: translateY(1px); }
.btn[disabled],
.btn[aria-disabled="true"] {
  color: var(--ink-3);
  cursor: not-allowed;
  opacity: 0.68;
}
.btn--wide { width: 100%; }
.btn__mark { width: 20px; height: 20px; display: block; }
.btn--primary { font-size: 28px; min-height: 64px; }

/* ------------------------------------------------------------------ the counter */

.counter {
  padding: var(--s6) var(--s4) 0;
  display: grid;
  grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
  gap: var(--s5);
  align-items: center;
}
.counter__side { display: grid; gap: var(--s2); }
.legend { display: flex; gap: var(--s3); font-size: var(--t-small); color: var(--ink-3); align-items: center; margin: var(--s1) 0 0; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend .leaf { width: 18px; height: 18px; background-size: 100% 100%; background-image: url("/img/cell-live.png"); mix-blend-mode: multiply; }
.legend .leaf--spent { background-image: url("/img/cell-spent.png"); }
.counter__title { font-family: var(--display); font-size: var(--t-head); margin: 0; }
.counter__count { font-family: var(--mono); font-size: var(--t-data); color: var(--ink-2); }

.grid256 {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: var(--cellgap);
  width: min(100%, 600px);
  justify-self: end;
  padding: 0;
}
.grid256 .leaf {
  width: auto;
  aspect-ratio: 1;
  background-image: url("/img/cell-live.png");
  background-size: 100% 100%;
  mix-blend-mode: multiply;
  position: relative;
}
.grid256 .leaf--spent { background-image: url("/img/cell-spent.png"); }
.grid256 .leaf--next { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ------------------------------------------------------------------ the wall */

.wall { padding: var(--s6) var(--s4) 0; }
.wall__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s3);
}
.wall__title { font-family: var(--display); font-size: var(--t-head); margin: 0; }
.tabs { display: flex; gap: var(--s2); flex-wrap: wrap; }
.tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--text);
  font-size: var(--t-body);
  padding: 10px 20px;
  cursor: pointer;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
}
.tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--s4);
  align-items: stretch;
}
.post { display: flex; flex-direction: column; }
.wall__empty { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s5); align-items: center; }
.wall__empty img { mix-blend-mode: multiply; width: 100%; }
.btn--mark { padding: 14px 1.1em; }
.btn--mark .btn__mark { width: 24px; height: 24px; }
.post__text {
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1.5;
  margin: 0 0 var(--s3);
  overflow-wrap: anywhere;
}
.post__meta {
  font-family: var(--text);
  font-size: var(--t-small);
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  align-items: center;
  margin-top: auto;
}
.post__meta a { color: var(--ink-2); }
.post__leaf { font-family: var(--mono); font-size: var(--t-small); color: var(--ink-2); }
.post__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin: var(--s2) 0 0;
  font-family: var(--text);
  font-size: var(--t-small);
  color: var(--ink-3);
}
.post__links a { color: var(--ink-2); }
.post__links:empty { display: none; }
.post__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.post__actions .btn { font-size: 20px; min-height: 48px; padding-left: 0.6em; padding-right: 0.6em; }
.wall__more { margin: var(--s4) auto 0; max-width: 420px; }
.post--last .post__text { font-size: 26px; }

.empty {
  font-family: var(--text);
  font-size: var(--t-lead);
  color: var(--ink-2);
  padding: var(--s3) 0 var(--s2);
  max-width: 48ch;
}

/* ------------------------------------------------------------------ how it works */

.how { padding: var(--s6) var(--s4) 0; }
.how__title { font-family: var(--display); font-size: var(--t-head); margin: 0 0 var(--s4); }
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  align-items: stretch;
}
.step { display: flex; flex-direction: column; gap: var(--s2); }
.step img { width: 100%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; }
.step__n { font-family: var(--mono); font-size: var(--t-small); color: var(--ink-3); }
.step__t { font-family: var(--display); font-size: 26px; margin: 0; }
.step p { margin: 0; font-size: var(--t-small); color: var(--ink-2); }

/* ------------------------------------------------------------------ forms */

.field { display: block; margin-bottom: var(--s3); }
.field__label {
  display: block;
  font-family: var(--text);
  font-size: var(--t-small);
  color: var(--ink-2);
  margin-bottom: var(--s1);
}
textarea,
input[type="text"],
input[type="password"] {
  width: 100%;
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--s2) var(--s3);
  min-height: 52px;
}
textarea { min-height: 150px; resize: vertical; }
input:focus-visible,
textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.counterline {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--ink-2);
  margin-top: var(--s1);
}

.words {
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1.8;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: var(--s3);
  overflow-wrap: anywhere;
  user-select: all;
}

.note {
  font-family: var(--text);
  font-size: var(--t-small);
  color: var(--ink-2);
  margin: var(--s2) 0 0;
}
.note--warn { color: var(--ember); }

/* two lines reserved: the longest thing it ever says wraps, and nothing below it may move */
.status {
  font-family: var(--text);
  font-size: var(--t-body);
  min-height: 3.1em;
  margin: var(--s3) 0 0;
}
.status--bad { color: var(--ember); }

.steps-list { margin: 0; padding: 0; list-style: none; }
.steps-list li {
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: 1.5;
  padding: 10px var(--s2);
  border-bottom: 1px dotted var(--rule);
  overflow-wrap: anywhere;
}
.steps-list b { font-family: var(--text); font-weight: 400; color: var(--ink-3); display: block; }

/* ------------------------------------------------------------------ the drawer, phone only */

.drawer-btn { display: none; }

/* ------------------------------------------------------------------ widths */

@media (min-width: 1241px) {
  .bill > .figure { position: sticky; top: var(--s4); }
}

@media (max-width: 1500px) {
  :root { --t-display: 118px; --t-sub: 36px; --cellsize: 28px; }
}

@media (max-width: 1240px) {
  :root { --t-display: 96px; --t-sub: 30px; --t-head: 32px; --cellsize: 24px; --cellgap: 5px; }
  .bill { grid-template-columns: 190px minmax(0, 1fr); gap: var(--s4); }
  .stack { grid-column: 1 / -1; }
  .posts { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root {
    --t-display: 76px;
    --t-sub: 26px;
    --t-head: 28px;
    --t-lead: 20px;
    --s5: 32px;
    --s6: 48px;
    --cellsize: 18px;
    --cellgap: 4px;
    --frame-slice: 39;
  }
  .sheet { padding: var(--s3) var(--s3) var(--s6); }
  .sheet::before { inset: 10px; }
  .masthead { grid-template-columns: minmax(0, 1fr); padding: var(--s3) var(--s2) var(--s3); gap: var(--s2); }
  .subtitle { text-align: left; }
  .rule { margin: 0 var(--s2); }
  .bill { grid-template-columns: minmax(0, 1fr); padding: var(--s4) var(--s2) 0; gap: var(--s4); }
  /* on a phone the margin stops being a column: the drawer leads, the roll closes the sheet */
  .margin { display: contents; }
  .cast__head { display: none; }
  .roll { order: 9; margin-top: var(--s5); }
  .figure__media { height: clamp(300px, 46vh, 460px); }
  .counter, .wall, .how { padding-left: var(--s2); padding-right: var(--s2); }
  .counter { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .grid256 { justify-self: center; }
  /* a tablet keeps two columns, a phone one */
  .steps { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
  .posts { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
  .wall__empty { grid-template-columns: minmax(0, 1fr); }

  /* the cast column becomes one drawer */
  .drawer-btn {
    display: inline-flex;
    width: 100%;
  }
  .cast--drawer { display: none; }
  .cast--drawer.is-open { display: block; }
  .cast a { font-size: 24px; padding: 13px var(--s2); }

  :root { --cellpad: 12px; }
  .post__text { font-size: 17px; }
  .address { font-size: 18px; padding: 14px 16px; }
  .bignum { font-size: 22px; padding: 14px 16px; }
  .slug__strip { padding: 16px 20px; }
  .wall__head { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .tabs button { padding: 10px 4px; text-align: center; }
  .post__actions .btn { font-size: 19px; }
  .btn--primary { font-size: 22px; min-height: 56px; padding-left: 0.7em; padding-right: 0.7em; }
  /* a pair of keys stacks on a phone, so no label breaks one word per line */
  .slug__row { grid-template-columns: minmax(0, 1fr); }
  .slug__row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* three equal keys under the contract: on a phone the chart key drops its mark to keep its word inside */
  .slug__row--three .btn { font-size: 19px; padding: 10px 4px; gap: 6px; }
  .slug__row--three .btn:not(.btn--mark) .btn__mark { display: none; }
}

@media (max-width: 400px) {
  :root { --t-display: 62px; --cellsize: 16px; --cellgap: 3px; --cellpad: 8px; }
  .slug__row--three .btn { font-size: 17px; }
  .btn--primary { font-size: 20px; }
}

@media (max-width: 360px) {
  .slug__row--one .btn__mark { display: none; } /* the word fits on one line without the pill */
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ------------------------------------------------------------------ the check dialog */

.check {
  border: 0;
  margin: auto;
  max-width: min(940px, 92vw);
  max-height: 88vh;
  padding: calc(var(--frame-slice) * 1px / 2.1 + var(--s4));
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("/img/ground.webp");
  background-size: 900px auto;
  position: relative;
  isolation: isolate;
  overflow: auto;
}
.check::before {
  content: "";
  position: absolute;
  inset: 0;
  border-style: solid;
  border-width: calc(var(--frame-slice) * 1px / 2.1);
  border-image-source: url("/img/frame.png");
  border-image-slice: var(--frame-slice);
  border-image-repeat: stretch;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.check::backdrop {
  background: rgba(27, 26, 24, 0.55);
}
.check .steps-list {
  margin-top: var(--s3);
}

/* the preview: its slot is in the layout from the first paint, only the words change */
/* a fixed height that scrolls inside itself: reading the message back must move nothing on the page */
.preview {
  margin: var(--s3) 0;
  padding: var(--s3) var(--s4);
  background: var(--paper-2);
  border-left: 3px solid var(--ink);
  height: 286px;
  overflow: auto;
  overscroll-behavior: contain;
}
.preview .field__label { margin-bottom: var(--s2); }
.preview__text { margin-bottom: var(--s2); }