/* ODD LOT. One acid sheet, black ink, one engraved object. Built to art/ref/poster.jpg.
   Type: 12 / 14 / 16 / 20 / 24 / 32 / 48 / 72. Space: 4 / 8 / 12 / 16 / 24 / 32 / 48. Nothing on the
   page is sized off that ladder; the masthead is the one exception a poster makes, because it is
   fitted to its own column and so is a measurement, not a step. */

@font-face {
  font-family: Excon;
  src: url(/fonts/Excon-Black.woff2) format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: Excon;
  src: url(/fonts/Excon-Bold.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Excon;
  src: url(/fonts/Excon-Medium.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Sligoil;
  src: url(/fonts/Sligoil-MicroMedium.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Sligoil;
  src: url(/fonts/Sligoil-MicroBold.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --acid: #99ef56; /* his acid with 13% of the saturation taken out: black on it reads 14.8 to 1 */
  --ink: #000000;
  --paper: #e9e9e4;
  --live: #ff3d8b; /* the second ink: live state only, never decoration */

  --display: 900 1em/0.86 Excon, system-ui, sans-serif;
  --label: 700 1em/1.25 Excon, system-ui, sans-serif;
  --body: 500 1em/1.5 Excon, system-ui, sans-serif;
  --mono: 500 1em/1.5 Sligoil, ui-monospace, monospace;

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

  --gutter: var(--s7);
  --rule: 3px;
  --hair: 2px;
  --t-label: 16px;
  --t-body: 20px;
  --t-value: 20px;
  --t-step: 24px;
  --t-head: 48px;
  --t-figure: 72px;
  --key-h: 56px;
}

* {
  box-sizing: border-box;
  font-synthesis: none;
}

html {
  overflow-x: clip; /* never overflow-x hidden: it makes body a scroll container and kills sticky */
  background: var(--acid);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--acid);
  color: var(--ink);
  font: var(--body);
  font-size: var(--t-body);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

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

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

/* one container, one pair of fields, every section on the same two lines */
.sheet {
  max-width: 1792px;
  margin: 0 auto;
  padding: var(--s4) var(--gutter) var(--s7);
}

/* ------------------------------------------------------------- imprint -- */

.imprint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 72px;
}

.mark {
  display: flex;
  align-items: center;
  gap: var(--s4);
  text-decoration: none;
}

.mark img {
  width: 56px;
  height: 56px;
}

.mark b {
  display: block;
  font: var(--label);
  font-size: var(--t-value);
  letter-spacing: 0.02em;
}

.mark > span > span {
  display: block;
  font: var(--label);
  font-size: var(--t-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* every key in the nav: one height, one padding, only the word is longer or shorter */
.oval {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border: var(--rule) solid var(--ink);
  border-radius: 50%/50%;
  font: var(--label);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: none;
}

.oval:hover,
.oval:active,
.oval[aria-current="page"] {
  background: var(--ink);
  color: var(--acid);
}

.hairline {
  border: 0;
  border-top: var(--rule) solid var(--ink);
  margin: var(--s4) 0 var(--s5);
}

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

.masthead {
  margin: 0 0 var(--s6);
}

.masthead h1 {
  font: var(--display);
  font-size: var(--fit, 180px);
  letter-spacing: -0.032em;
  margin: 0;
  white-space: nowrap;
  text-transform: none;
}

/* the imprint line sits under the name, on the name's own left line, never against its last letter */
.masthead .sup {
  display: block;
  font: var(--label);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: var(--s4);
}

/* ---------------------------------------------------------------- band -- */

.band {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: var(--s7);
  align-items: start;
}

/* the home screen: the name and the figures hold the left, the object holds the right of both rows */
.first {
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  column-gap: var(--s7);
  row-gap: var(--s4);
  align-items: stretch;
  position: relative;
}

/* the printer's registration marks his sheet carries, on the sheet they belong to */
.first::before,
.first::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.first::before {
  left: -28px;
  top: 4px;
  border-left: var(--hair) solid var(--ink);
  border-top: var(--hair) solid var(--ink);
}

.first::after {
  right: -28px;
  bottom: 4px;
  border-right: var(--hair) solid var(--ink);
  border-bottom: var(--hair) solid var(--ink);
}

.first .masthead {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.first .object {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* the left column is a stack of blocks on one rhythm, and its last block sits on the object's bottom */
.first .left {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  min-width: 0;
}

.first .left .lot:last-child {
  margin-top: auto;
}

/* ------------------------------------------------------------ one block -- */

/* a label, the same rule under every label, then whatever the label is about */
.lot {
  min-width: 0;
}

.lot .k {
  display: block;
  font: var(--label);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lot .k::after {
  content: "";
  display: block;
  width: 48px;
  border-top: var(--rule) solid var(--ink);
  margin: var(--s2) 0 var(--s3);
}

.lot .v {
  display: block;
  font: var(--display);
  font-size: var(--t-figure);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lot .u {
  display: block;
  font: var(--body);
  font-size: var(--t-body);
  margin-top: var(--s3);
  font-variant-numeric: tabular-nums;
}

.lot .lines {
  margin: 0;
  font: var(--label);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
}

.lede {
  font: var(--body);
  font-size: var(--t-body);
  max-width: 62ch;
  margin: 0 0 var(--s6);
}

/* --------------------------------------------------------- the pot bar -- */

.bar {
  height: 24px;
  border: var(--rule) solid var(--ink);
  position: relative;
  margin: var(--s3) 0 var(--s3);
  padding: 3px;
}

/* the fill is always drawn: with nothing in the pot it is still a notch wide, so the bar reads */
.bar i {
  display: block;
  height: 100%;
  min-width: 8px;
  background: var(--ink);
  width: 0;
}

.bar.ready i {
  background: var(--live);
}

.barline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  margin: 0;
  font: var(--mono);
  font-size: var(--t-label);
  font-variant-numeric: tabular-nums;
}

.factline {
  font: var(--label);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.5;
}

.factline b {
  font-weight: 700;
}

.factline .dot::before {
  content: "\2022";
  margin: 0 0.6em;
}

.live {
  color: var(--live);
}

.asis {
  text-transform: none;
}

/* --------------------------------------------------------- the object --- */

.object {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.object .plate {
  position: relative;
  container-type: inline-size;
}

.object .plate img {
  width: 100%;
}

.on {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.on.title {
  align-items: flex-start;
  justify-content: flex-end;
}

.on.title b {
  font: var(--display);
  font-size: 10.2cqw;
  letter-spacing: -0.03em;
  color: var(--paper);
  line-height: 0.9;
}

.on.subject {
  gap: 0.5cqw;
}

.on.subject .k,
.on.subject .t {
  color: var(--paper);
  font: var(--label);
  font-size: max(16px, 1.94cqw);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.on.subject .big {
  color: var(--paper);
  font: var(--display);
  font-size: 5.54cqw;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.on.numberband {
  padding: 0 1cqw;
  justify-content: center;
  gap: 0.3cqw;
}

.on.numberband .k {
  font: var(--label);
  font-size: max(16px, 1.85cqw);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.on.numberband .mint {
  font: var(--mono);
  font-weight: 700;
  /* the number is the one thing a certificate prints in the clear: it wraps onto two lines rather than
     shrinking to fit one, so it is readable at the size it deserves */
  font-size: max(16px, 2.9cqw);
  line-height: 1.2;
  color: var(--ink);
  user-select: all;
  overflow-wrap: anywhere;
}

.stack {
  margin: 0;
}

/* the object column closes on the same line the left column closes on */
.stack.out {
  margin-top: var(--s6);
}

.first .object .stack.out {
  margin-top: auto;
  padding-top: var(--s4);
}

.stack .k {
  display: block;
  font: var(--label);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stack .k::after {
  content: "";
  display: block;
  width: 48px;
  border-top: var(--rule) solid var(--ink);
  margin: var(--s2) 0 var(--s3);
}

.stack .lines {
  margin: 0;
  font: var(--label);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ------------------------------------------------------------ the keys -- */

/* four keys, two equal columns, one height, one mark size, one contrast */
.keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s3);
}

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: var(--key-h);
  padding: var(--s3) var(--s4);
  border: var(--rule) solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: var(--label);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: none;
}

/* a key lifts on a hard ink shadow: a brand mark is never recoloured, so no key fills with ink */
.key:hover:not([aria-disabled="true"]):not(:disabled),
.key.done {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--ink);
}

.key:active:not([aria-disabled="true"]):not(:disabled) {
  transform: translate(0, 0);
  box-shadow: none;
}

.key img {
  width: 24px;
  height: 24px;
  flex: none;
  align-self: center;
}

/* a key with nothing behind it yet keeps its contrast: it reads, it just does not answer */
.key[aria-disabled="true"],
.key:disabled {
  cursor: not-allowed;
  border-style: solid;
  background: transparent;
  color: var(--ink);
  opacity: 1;
}

.key.filled {
  background: var(--ink);
  color: var(--acid);
}

.key.filled:disabled {
  background: transparent;
  color: var(--ink);
}

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

/* the rule belongs to the section it opens, never to a box around the words */
.section {
  margin-top: var(--s7);
}

.section::before {
  content: "";
  display: block;
  border-top: var(--rule) solid var(--ink);
  margin-bottom: var(--s7);
}

.section > h2 {
  font: var(--display);
  font-size: var(--t-head);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s5);
}

/* the four cards share their rows, so every picture, every number and every line start together, and
   the rule that closes a card lands on one line across all four however long the words are */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s5);
  align-items: stretch;
}

.step {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: var(--s3);
  min-width: 0;
}

.step::after {
  content: "";
  display: block;
  border-top: var(--rule) solid var(--ink);
  align-self: end;
}

.step img {
  width: 100%;
}

.step .n {
  font: var(--display);
  font-size: var(--t-step);
  letter-spacing: -0.02em;
  align-self: end;
}

.step p {
  font: var(--body);
  font-size: var(--t-body);
  margin: 0;
}

/* -------------------------------------------------------------- tables -- */
/* Fixed columns, words left, figures right, one divider weight, and the first and last column sit on
   the container's own lines. The divider is drawn by the cell, so no box closes around a word. */

.grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.grid th,
.grid td {
  position: relative;
  text-align: left;
  padding: var(--s4) var(--s5);
  font: var(--body);
  font-size: var(--t-body);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.grid tr > *:first-child {
  padding-left: 0;
}

.grid tr > *:last-child {
  padding-right: 0;
}

.grid th {
  font: var(--label);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.grid th::after,
.grid td::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hair);
  background: var(--ink);
}

.grid tbody th {
  width: 34%;
}

/* the proportions of the wide tables, so a name never wraps and the figures keep their own columns */
#list .c-tick {
  width: 15%;
}
#list .c-what {
  width: 26%;
}
#list .c-fig {
  width: 18%;
}
#list .c-fig2 {
  width: 16%;
}
#list .c-end {
  width: 25%;
}

#rotation .c-tick {
  width: 18%;
}
#rotation .c-what {
  width: 32%;
}
#rotation .c-fig {
  width: 22%;
}
#rotation .c-end {
  width: 28%;
}

/* figures right, and the column that closes a wide table closes it on the container's own line */
.grid .num,
.grid .end {
  text-align: right;
}

/* mono is for figures only, at the size and the weight of the words beside them */
.grid td.num,
.grid .addr {
  font: var(--mono);
  font-size: var(--t-value);
  font-weight: 500;
}

.grid tr.me {
  color: var(--live);
}

/* -------------------------------------------------------------- blocks -- */

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s7);
  align-items: start;
}

/* the hairline belongs to the row it opens, not to a box around the words */
.ruleblock::before {
  content: "";
  display: block;
  border-top: var(--rule) solid var(--ink);
  margin-bottom: var(--s4);
}

.ruleblock {
  margin-bottom: var(--s6);
}

.ruleblock h3 {
  font: var(--label);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--s3);
}

.ruleblock p {
  margin: 0 0 var(--s4);
  font-size: var(--t-body);
  max-width: 62ch;
}

.field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: stretch;
  margin: var(--s4) 0;
}

.field input,
.field select {
  flex: 1 1 320px;
  min-width: 0;
  min-height: var(--key-h);
  padding: var(--s3) var(--s4);
  border: var(--rule) solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: var(--mono);
  font-size: var(--t-body);
}

.field select {
  font: var(--label);
  font-size: var(--t-body);
  letter-spacing: 0.04em;
}

.field .key {
  flex: 0 1 auto;
}

.note {
  font: var(--body);
  font-size: var(--t-body);
  margin: var(--s4) 0 0;
  min-height: 1.5em;
}

.note.bad {
  color: var(--live);
}

/* the copy confirmation: its room is reserved, so saying it moves nothing */
.note.copied {
  margin-top: var(--s3);
  font: var(--mono);
  font-size: var(--t-label);
  overflow-wrap: anywhere;
}

.seal-live {
  width: 120px;
  height: 120px;
  flex: none;
}

.bigseal {
  display: flex;
  align-items: center;
  gap: var(--s5);
}

[hidden] {
  display: none !important;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  position: static;
  display: inline-block;
  padding: var(--s3);
}

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

@media (max-width: 1600px) {
  /* the object keeps the width its own printing needs; the name stacks into what is left */
  .first {
    grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
  }
}

@media (max-width: 1180px) {
  :root {
    --gutter: var(--s5);
    --t-figure: 48px;
    --t-head: 32px;
  }
  .first::before,
  .first::after {
    display: none;
  }
  .band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr auto auto auto 1fr auto;
  }
  .pair {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }
  /* on a narrow desktop the names need the room the figures can spare, so no row grows a second line */
  #list .c-tick {
    width: 13%;
  }
  #list .c-what {
    width: 33%;
  }
  #list .c-fig {
    width: 17%;
  }
  #list .c-fig2 {
    width: 14%;
  }
  #list .c-end {
    width: 23%;
  }
  #rotation .c-what {
    width: 36%;
  }
  #rotation .c-fig {
    width: 20%;
  }
  #rotation .c-end {
    width: 26%;
  }
}

@media (max-width: 880px) {
  .first {
    grid-template-columns: minmax(0, 1fr);
  }
  .first .masthead,
  .first .object,
  .first .left {
    grid-column: 1;
    grid-row: auto;
  }
  .first .object {
    order: 3;
  }
  .first .left .lot:last-child {
    margin-top: 0;
  }
}

/* A phone never scrolls sideways to read a table: every row becomes a block of labelled lines, which is
   the same label and value grammar the fact tables already use, on the container's own lines. */
@media (max-width: 1000px) {
  .grid,
  .grid tbody,
  .grid tbody tr,
  .grid tbody td,
  .grid tbody th {
    display: block;
    width: auto;
  }
  .grid thead {
    display: none;
  }
  .grid tbody tr {
    padding-bottom: var(--s4);
  }
  .grid tbody tr::before {
    content: "";
    display: block;
    height: var(--hair);
    background: var(--ink);
    margin-bottom: var(--s4);
  }
  .grid tbody::after {
    content: "";
    display: block;
    height: var(--hair);
    background: var(--ink);
  }
  .grid tbody td,
  .grid tbody th {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s4);
    justify-content: space-between;
    align-items: baseline;
    padding: var(--s1) 0;
    text-align: right;
  }
  .grid tbody td::after,
  .grid tbody th::after {
    display: none;
  }
  .grid tbody td > *,
  .grid tbody th > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .grid tbody td[data-label]::before {
    content: attr(data-label);
    font: var(--label);
    font-size: var(--t-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    flex: none;
  }
  .grid tbody th {
    justify-content: flex-start;
    text-align: left;
  }
}

@media (max-width: 620px) {
  :root {
    --t-figure: 32px;
  }
  .steps {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .step {
    grid-row: auto;
    grid-template-rows: none;
  }
  .imprint {
    gap: var(--s4);
  }
  .nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
  }
  /* the one long word takes a row of its own, so every row is complete */
  .nav .oval:nth-child(3) {
    grid-column: 1 / -1;
  }
  .oval {
    padding: var(--s3) var(--s4);
    letter-spacing: 0.04em;
  }
}

@media (max-width: 420px) {
  .keys {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (max-width: 645px) {
  /* the measured rects in plates.css are .on.title and friends, so the reset has to be as specific */
  .on.title,
  .on.subject,
  .on.numberband {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    padding: 0;
  }
  .on.title {
    margin-top: var(--s5);
  }
  .on.title b {
    color: var(--ink);
    font-size: clamp(32px, 11vw, 72px);
  }
  .on.subject {
    margin-top: var(--s4);
  }
  .on.subject .k,
  .on.subject .t {
    color: var(--ink);
    font-size: var(--t-label);
  }
  .on.subject .big {
    color: var(--ink);
    font-size: clamp(24px, 8vw, 48px);
  }
  .on.numberband {
    margin-top: var(--s5);
    border: var(--rule) solid var(--ink);
    padding: var(--s4) var(--s5);
    gap: var(--s2);
  }
  .on.numberband .k {
    font-size: var(--t-label);
  }
  .on.numberband .mint {
    font-size: var(--t-label);
  }
}

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