/* Stonk Rehab. Two colours, one wall, paper on it.
   Everything is placed against Vadim's plate: flat acid lime, black grotesque, real plaster. */

@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/Switzer-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/Switzer-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/Switzer-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sligoil";
  src: url("assets/fonts/Sligoil-Micro.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sligoil";
  src: url("assets/fonts/Sligoil-MicroBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --wall: #c7f93e;
  --ink: #0c0d07;
  --paper: #fbfaf1;
  --rule: rgba(12, 13, 7, 0.16);
  --rule-hard: rgba(12, 13, 7, 0.55);
  --shadow: 0 10px 24px -14px rgba(12, 13, 7, 0.55);
  --display: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --form: "Sligoil", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --pad: clamp(17px, 1.9vw, 32px);
  /* the torn margin of paper.webp, and how tall it is drawn on the page */
  --sheet-slice: 26;
  --sheet-edge: 24px;
  /* the tear and the plaster hang off the same gutter, so they never drift apart */
  --gutter: clamp(12px, 2.8vw, 48px);
  /* the rip is a real object beside the name, exactly as on his plate: its width is chosen and its
     height follows from the strip's own proportion, so it can never stretch or blow up */
  --tear-w: clamp(50px, 5vw, 88px);
  --tear-h: calc(var(--tear-w) * 1417 / 300);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--wall);
  overflow-x: clip;
}

/* the plasters lean off the edge on purpose; that must never become a sideways scroll */
body {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  cursor: image-set(url("assets/img/pen.png") 1x, url("assets/img/pen@2x.png") 2x) 3 3, default;
}

a,
button,
input,
summary,
[tabindex] {
  cursor: image-set(url("assets/img/pen.png") 1x, url("assets/img/pen@2x.png") 2x) 3 3, pointer;
}

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

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

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.noscript {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  padding: 16px;
  background: var(--ink);
  color: var(--wall);
  font-family: var(--form);
  font-size: 14px;
}

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

.wall {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(320px, 33%) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "masthead desk"
    "script   desk";
  align-content: center;
  align-items: start;
  gap: clamp(26px, 3.2vw, 58px);
  padding: clamp(22px, 3vh, 46px) clamp(20px, 3vw, 54px) clamp(26px, 3.4vh, 52px)
    calc(var(--gutter) + var(--tear-w) + clamp(22px, 3.2vw, 62px));
}

.tear {
  position: absolute;
  top: clamp(-56px, -4vh, -20px);
  left: var(--gutter);
  height: var(--tear-h);
  width: var(--tear-w);
  background: url("assets/img/tear.webp") center / 100% 100% no-repeat;
  /* the rip has to run out of the wall rather than stop dead in the middle of it */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 88%, transparent);
  pointer-events: none;
}

.plaster {
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* it holds the wall together, so it sits ON the tear and tucks behind the name */
.plaster--brand {
  position: absolute;
  z-index: 0;
  left: calc(var(--gutter) + var(--tear-w) / 2);
  top: clamp(44px, 9vh, 120px);
  width: clamp(186px, 16.5vw, 268px);
  transform: translateX(-46%) rotate(-27deg);
  filter: drop-shadow(0 7px 11px rgba(12, 13, 7, 0.34));
}

/* The prescription reads as part of the left column but comes after both mechanics in the DOM,
   so the keyboard meets the wallet field first. */
.paper--script {
  grid-area: script;
  align-self: start;
  max-width: 460px;
}

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

.masthead {
  grid-area: masthead;
  position: relative;
  z-index: 1;
  margin-bottom: clamp(18px, 2.4vh, 36px);
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(52px, 7.2vw, 116px);
  line-height: 0.83;
  letter-spacing: -0.038em;
}

.lede {
  margin: clamp(16px, 2.2vh, 28px) 0 0;
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* papers --------------------------------------------------------------- */

/* The two forms are as tall as the masthead and the prescription together, so the wall reads as
   one block of paper rather than two columns that stop at different heights. */
.desk {
  grid-area: desk;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 1.8vw, 30px);
  align-items: start;
}

/* A document, not a card. The sheet is a photograph of real paper torn on all four sides, sliced
   so the tears keep their own scale at any size while the blank middle stretches; the shadow
   follows that torn silhouette because drop-shadow reads the alpha. */
.paper {
  position: relative;
  display: flex;
  flex-direction: column;
  background: none;
  border: var(--sheet-edge) solid transparent;
  border-image: url("assets/img/paper.webp") var(--sheet-slice) fill / var(--sheet-edge) / 0 stretch;
  filter: drop-shadow(0 14px 20px rgba(12, 13, 7, 0.3));
  padding: var(--pad);
}

.paper--intake {
  transform: rotate(-1.1deg);
}

.paper--quarantine {
  transform: rotate(1deg);
}

.paper--script {
  transform: rotate(-1.9deg);
}

.plaster--pin {
  position: absolute;
  z-index: 2;
  width: clamp(88px, 8vw, 124px);
  filter: drop-shadow(0 5px 8px rgba(12, 13, 7, 0.3));
}

.plaster--pin-left {
  left: -34px;
  top: -22px;
  transform: rotate(-42deg);
}

.plaster--pin-right {
  right: -32px;
  top: -20px;
  transform: rotate(38deg);
}

.plaster--script {
  position: absolute;
  z-index: 2;
  right: -20px;
  top: -26px;
  width: clamp(64px, 6vw, 86px);
  transform: rotate(14deg);
  filter: drop-shadow(0 5px 8px rgba(12, 13, 7, 0.3));
}

.paper__no {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(15px, 1.3vw, 19px);
  letter-spacing: 0.02em;
  line-height: 1;
}

.paper__title {
  margin: 2px 0 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(32px, 3.2vw, 52px);
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.paper__title--small {
  font-size: clamp(24px, 2.2vw, 34px);
}

.paper__sub {
  margin: 4px 0 clamp(18px, 2.4vh, 30px);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--form);
  font-size: 12.5px;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.paper__sub--slip {
  border-bottom-width: 1px;
  border-bottom-style: dashed;
}

/* fields --------------------------------------------------------------- */

.field {
  display: grid;
  gap: 8px;
}

.field__label {
  font-family: var(--form);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.field__input {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--form);
  font-size: 15px;
  letter-spacing: -0.01em;
}

.field__input::placeholder {
  color: rgba(12, 13, 7, 0.34);
}

.field__input--short {
  max-width: 160px;
}

/* a whole address has to fit the field, so these two run smaller than the rest of the form */
#wallet,
#substance {
  font-size: clamp(11.5px, 1.02vw, 13.5px);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 10px;
  padding: 12px 20px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--wall);
  font-family: var(--display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 90ms ease-out, background-color 90ms ease-out, color 90ms ease-out;
}

.button:hover {
  background: var(--wall);
  color: var(--ink);
}

.button:active {
  transform: translateY(1px);
}

.button--ghost {
  background: transparent;
  color: var(--ink);
}

.button--ghost:hover {
  background: var(--ink);
  color: var(--wall);
}

.button--slim {
  min-height: 44px;
  margin-top: 0;
  padding: 10px 14px;
  font-size: 13px;
}

/* A prelaunch action stays clickable on purpose: pressing it is how the visitor is told why it
   does nothing yet. Only a natively disabled control refuses the pointer. */
.button[aria-disabled="true"] {
  border-style: dashed;
  background: transparent;
  color: rgba(12, 13, 7, 0.5);
}

.button[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--ink);
}

.button[disabled] {
  border-style: dashed;
  background: transparent;
  color: rgba(12, 13, 7, 0.45);
  pointer-events: none;
}

.field__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.field__row .button {
  margin-top: 0;
}

.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--form);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* every readout keeps its room whether it says anything or not */
.status {
  height: 2.6em;
  margin: 10px 0 0;
  font-family: var(--form);
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
}

.status--script {
  height: 1.3em;
  margin-top: 8px;
}

/* quarantine ----------------------------------------------------------- */

/* Both states of the card live in the same grid cell, so swapping them cannot change the height
   of the paper they sit on. */
.quar-slot {
  display: grid;
}

.quar {
  grid-area: 1 / 1;
  min-height: 244px;
}

.quar--sealed {
  display: flex;
  flex-direction: column;
}

.quar__verdict {
  margin: 12px 0 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  min-height: 2.2em;
}

.quar__timer {
  margin: 4px 0 0;
  font-family: var(--form);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  height: 1.4em;
}

/* The answer lands as a stamp on the sheet. The zone is reserved from first paint, so the
   examination cannot move a single pixel of the page. */
.stampzone {
  position: relative;
  height: 206px;
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}

.stampzone__label {
  margin: 0;
  font-family: var(--form);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.stamp {
  position: absolute;
  left: 1%;
  top: 38px;
  width: 94%;
  padding: 11px 14px 13px;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--ink);
  transform: rotate(-3.4deg);
  filter: url("#ink");
  visibility: hidden;
}

.stamp__grade {
  margin: 0;
  height: 2.05em;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  overflow: hidden;
}

.stamp__figure {
  margin: 6px 0 0;
  font-family: var(--form);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.stamp__figure span {
  font-family: var(--display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.link--chart {
  position: absolute;
  left: 2%;
  bottom: 0;
  visibility: hidden;
}

.log {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}

.log__list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.log__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  height: 2.3em;
  align-items: center;
  border-bottom: 1px dotted var(--rule-hard);
  font-family: var(--form);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
}

.log__row span:last-child {
  font-weight: 700;
}

.chartlines {
  margin: 0;
  font-family: var(--form);
  font-size: 12.5px;
}

.chartlines__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--rule-hard);
}

.chartlines dt {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chartlines dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.chartlines__mono {
  font-size: 11.5px;
}

/* prescription --------------------------------------------------------- */

.script__label {
  margin: clamp(12px, 1.6vh, 20px) 0 4px;
  font-family: var(--form);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.script__ca {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1.5px dashed var(--ink);
  font-family: var(--form);
  font-size: clamp(11px, 1vw, 13px);
  line-height: 1.45;
  overflow-wrap: anywhere;
  user-select: all;
}

.script__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* the chart ------------------------------------------------------------ */

.chart {
  width: min(760px, calc(100vw - 28px));
  max-height: min(92dvh, 1000px);
  padding: 0;
  background: none;
  color: var(--ink);
  border: var(--sheet-edge) solid transparent;
  border-image: url("assets/img/paper.webp") var(--sheet-slice) fill / var(--sheet-edge) / 0 stretch;
  filter: drop-shadow(0 22px 30px rgba(12, 13, 7, 0.4));
  overflow: visible;
}

.chart::backdrop {
  background: rgba(199, 249, 62, 0.86);
}

.chart__sheet {
  max-height: calc(min(92dvh, 1000px) - var(--sheet-edge) * 2);
  padding: clamp(6px, 1vw, 14px) clamp(8px, 1.4vw, 18px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
}

.chart__sheet::-webkit-scrollbar {
  width: 10px;
}
.chart__sheet::-webkit-scrollbar-track {
  background: transparent;
}
.chart__sheet::-webkit-scrollbar-thumb {
  background: var(--ink);
}
.chart__sheet::-webkit-scrollbar-button {
  display: none;
}

.chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}

.chart__title {
  margin: 2px 0 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.chart__close {
  flex: none;
  width: 46px;
  height: 46px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 24px;
  line-height: 1;
}

.chart__close:hover {
  background: var(--ink);
  color: var(--paper);
}

.chart .chartlines {
  margin-top: 14px;
}

/* No nested box: the verdict is stamped onto the same sheet and the figures are simply printed. */
.verdict {
  margin: 26px 0 0;
}

.stamp--chart {
  position: static;
  visibility: visible;
  width: auto;
  max-width: 84%;
  padding: 16px 24px 18px;
  transform: rotate(-2.4deg);
}

.stamp--chart .stamp__grade {
  height: auto;
  font-size: clamp(22px, 2.8vw, 34px);
}

.verdict__stamp {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(22px, 2.9vw, 34px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.verdict__note {
  margin: 20px 0 0;
  font-family: var(--form);
  font-size: 12.5px;
  line-height: 1.4;
}

.verdict__figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 3px solid var(--ink);
}

.figure {
  margin: 0;
  display: grid;
  gap: 2px;
}

.figure__value {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.figure__label {
  font-family: var(--form);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chart__section {
  margin: 26px 0 8px;
  font-family: var(--form);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.table {
  font-family: var(--form);
  font-size: 12.5px;
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--rule-hard);
}

.row__name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.row__figure {
  font-family: var(--display);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.row__detail {
  grid-column: 1 / -1;
  font-size: 11.5px;
  line-height: 1.45;
  opacity: 0.78;
}

.table__empty {
  padding: 10px 0;
  font-size: 12px;
  opacity: 0.7;
}

.chart__foot {
  margin: 22px 0 0;
  padding-top: 12px;
  border-top: 1.5px solid var(--rule);
  font-family: var(--form);
  font-size: 11px;
  line-height: 1.5;
}

.chart__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* narrower ------------------------------------------------------------- */

@media (max-width: 1080px) {
  /* one column, and the prescription drops below the two forms rather than above them */
  .wall {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .masthead {
    margin-bottom: 0;
  }
  .desk {
    max-height: none;
    height: auto;
  }
  .paper--script {
    max-width: none;
    align-self: auto;
  }
  .lede {
    max-width: 40ch;
  }
  .plaster--brand {
    top: clamp(46px, 9vh, 110px);
  }
}

@media (max-width: 720px) {
  :root {
    --tear-w: 44px;
  }
  .wall {
    padding-right: 18px;
  }
  .desk {
    grid-template-columns: minmax(0, 1fr);
  }
  .plaster--brand {
    width: 168px;
    top: 74px;
  }
  .verdict__figures {
    grid-template-columns: 1fr;
  }
  .paper--intake,
  .paper--quarantine,
  .paper--script {
    transform: none;
  }
  .plaster--pin {
  position: absolute;
  z-index: 2;
  width: clamp(88px, 8vw, 124px);
  filter: drop-shadow(0 5px 8px rgba(12, 13, 7, 0.3));
}

.plaster--pin-left {
  left: -34px;
  top: -22px;
  transform: rotate(-42deg);
}

.plaster--pin-right {
  right: -32px;
  top: -20px;
  transform: rotate(38deg);
}

.plaster--script {
    right: -12px;
    top: -18px;
  }
}

@media (max-width: 400px) {
  :root {
    --tear-w: 38px;
  }
  .wordmark {
    font-size: 46px;
  }
  .plaster--brand {
    width: 148px;
  }
}

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