/* PIP. One black table carrying a label system. Built to his product label reference: a tall paper
   label, two faces, flat print, one green. Two scales and nothing outside them:
   type 16 / 20 / 24 / 32 / 48 (plus the fitted display), space 4 / 8 / 12 / 16 / 24 / 32 / 48.
   Mono carries data and labels; every paragraph is set in the grotesque. */

@font-face { font-family: "Tabular"; src: url("/fonts/Tabular-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tabular"; src: url("/fonts/Tabular-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Tabular"; src: url("/fonts/Tabular-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sporting"; src: url("/fonts/SportingGrotesque-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sporting"; src: url("/fonts/SportingGrotesque-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ground: #000000;
  --paper: #F7F7F4;
  --paper-sunk: #EBEBE4;
  --ink: #111111;
  --ink-soft: #57574F;
  --green: #06BE77;
  --amber: #F2A20C;
  --red: #D1382B;
  --rule: 2px;

  --mono: "Tabular", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --grot: "Sporting", "Helvetica Neue", Arial, sans-serif;

  /* type scale */
  --t-16: 16px;
  --t-20: 20px;
  --t-24: 24px;
  --t-32: 32px;
  --t-48: 48px;

  /* space scale */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;

  --sheet: 452px;
  --pad: var(--s-32);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--ground); }
body {
  font-family: var(--grot);
  font-size: var(--t-16);
  line-height: 1.5;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  scrollbar-gutter: stable;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* ---------- the table ---------- */

.spread {
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--s-48) var(--s-32) 104px;
  display: grid;
  grid-template-columns: 148px var(--sheet) minmax(0, 1fr);
  gap: var(--s-48);
  align-items: start;
}

/* ---------- the nav: five die cut index tabs, exactly as they were ---------- */

.tabs { display: flex; flex-direction: column; gap: 14px; margin: 84px -26px 0 0; position: relative; z-index: 3; }
.tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 19px;
  box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.55);
  border: 2px solid var(--ink);
  transition: transform 120ms ease;
}
.tab:hover { transform: translateX(6px); }
.tab[aria-current="page"] { font-weight: 700; background: var(--green); transform: translateX(10px); }

/* ---------- the label ---------- */

.label {
  position: relative;
  background: var(--paper) url("/img/grain-paper.png") repeat;
  background-size: 340px 340px;
  padding: var(--pad);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}

/* the head band: three fields of equal width, labels on one top line, values level with each other */
.headband { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16); align-items: start; }
.field { min-width: 0; }
.flabel {
  font-family: var(--grot);
  font-weight: 700;
  font-size: var(--t-16);
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 var(--s-12);
  min-height: calc(var(--t-16) * 1.2 * 2);     /* two lines reserved, so every value starts level */
}
.fvalue { font-family: var(--mono); font-size: var(--t-20); line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.fvalue .small { font-size: var(--t-16); color: var(--ink-soft); }

/* dotted leader rows: a fixed label column, one dotted span of equal length, one box on one vertical */
/* ONE grid for the whole list, so the label column is as wide as its widest word and every dotted run
   is the same length, in every row and on every page */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: max-content minmax(var(--s-24), 1fr) 20px;
  align-items: center;
  column-gap: var(--s-8);
  row-gap: var(--s-8);
  font-family: var(--mono);
  font-size: var(--t-16);
  line-height: 1.2;
}
.ticks li { display: contents; }
.ticks li b { font-family: var(--mono); font-size: var(--t-16); text-align: right; }
.ticks.values { grid-template-columns: max-content minmax(var(--s-24), 1fr) auto; }
.dots { border-bottom: 3px dotted var(--ink); transform: translateY(-4px); }
.box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ink);
  position: relative;
  background: transparent;
  justify-self: end;
  flex: none;
}
.box.on::after {
  content: "";
  position: absolute;
  inset: 0;                                   /* the tick never grows past its own box */
  background: url("/img/mark-tick.png") center/contain no-repeat;
}

/* the framed drawing: its height follows the window, so the label always ends above the fold */
.frame {
  margin: 0;
  border: var(--rule) solid var(--ink);
  padding: var(--s-16);
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(132px, 19vh, 190px);
  overflow: hidden;
}
.frame img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* the three cells under the frame: equal columns, one top line, one reserved height */
.slogans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16); align-items: start; }
.slogan {
  font-family: var(--grot);
  font-weight: 700;
  font-size: var(--t-16);
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
  min-height: calc(var(--t-16) * 1.2 * 3);
  overflow-wrap: break-word;                  /* a long word breaks only when it truly cannot fit, and never widens its column */
}
.seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-8);
  min-height: calc(var(--t-16) * 1.2 * 3);
  text-align: center;
}
.seal img { width: clamp(32px, 4vh, 44px); }
.seal span { font-family: var(--grot); font-weight: 700; font-size: var(--t-16); line-height: 1.2; text-transform: uppercase; }

/* the mark, the arrow that points into the heading, and the display */
.shout { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 var(--s-16); }
.mark { margin: 0; }
.mark img { width: clamp(112px, 13vh, 156px); }
.arrow {
  width: clamp(28px, 3.4vh, 44px);
  justify-self: start;
  align-self: end;
  margin: 0 0 calc(var(--s-4) * -1) 0;        /* it sits on the heading it points at */
}
.display {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  margin: var(--s-4) 0 0;
  font-size: clamp(var(--t-32), 6.2vh, 64px);
  white-space: nowrap;
}
.display .l2 { display: block; }

/* the imprint at the foot of the label */
.imprint { margin-top: auto; padding-top: 0; }
.imprint .hair { border-top: var(--rule) solid var(--ink); margin: 0 0 var(--s-12); height: 0; }
.imprint .fine { font-family: var(--grot); font-size: var(--t-16); line-height: 1.4; margin: 0 0 var(--s-12); color: var(--ink-soft); }
.imprint .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-16); padding: 0; }
.imprint canvas { display: block; height: 54px; width: 100%; max-width: 196px; image-rendering: pixelated; }
.imprint .code { font-family: var(--mono); font-size: var(--t-16); letter-spacing: 0.1em; margin: var(--s-4) 0 0; }
.pricebox { text-align: right; min-width: 0; }
.imprint .price { font-family: var(--grot); font-weight: 700; font-size: var(--t-32); font-style: italic; margin: 0; line-height: 1; }
.imprint .pricelabel { font-family: var(--grot); font-weight: 700; font-size: var(--t-16); text-transform: uppercase; line-height: 1.2; margin: 0 0 var(--s-4); }

/* ---------- the paper strips on the sticker side ---------- */

.side { display: flex; flex-direction: column; gap: var(--s-32); }

.strip {
  background: var(--paper) url("/img/grain-paper.png") repeat;
  background-size: 340px 340px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.72);
  padding: 0 0 var(--s-24);
}
.strip .title {
  font-family: var(--grot);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-16);
  line-height: 1.2;
  margin: 0;
  padding: var(--s-16) var(--s-32);
  border-bottom: var(--rule) solid var(--ink);
  display: flex;
  justify-content: space-between;
  gap: var(--s-16);
}
.strip .body { padding: var(--s-24) var(--s-32) 0; }
.lede { font-family: var(--grot); font-size: var(--t-20); line-height: 1.5; margin: 0 0 var(--s-24); }
.note { font-family: var(--grot); font-size: var(--t-16); line-height: 1.45; color: var(--ink-soft); margin: var(--s-16) 0 0; }
.standfirst { font-family: var(--grot); font-size: var(--t-20); line-height: 1.5; margin: 0; }

/* the contract line */
.mint {
  font-family: var(--mono);
  font-size: var(--t-20);
  line-height: 1.45;
  overflow-wrap: anywhere;
  background: var(--paper-sunk);
  border: 2px solid var(--ink);
  padding: var(--s-16) var(--s-24);
  margin: 0 0 var(--s-16);
  min-height: 58px;
  user-select: all;
}
.mint.empty { color: var(--ink-soft); user-select: none; }

/* keys */
.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); gap: var(--s-12); }
.key {
  font-family: var(--grot);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-16);
  line-height: 1.2;
  min-height: 56px;
  padding: var(--s-12) var(--s-24);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  cursor: pointer;
  text-align: center;
}
.key.light { background: var(--paper); color: var(--ink); }
.key.go { background: var(--green); color: var(--ink); }
.key:hover, .key.light:hover { background: var(--green); color: var(--ink); }
.key[aria-disabled="true"], .key:disabled {
  background: #DEDED7; color: var(--ink-soft); border-color: var(--ink-soft); cursor: not-allowed;
}
.key[aria-disabled="true"]:hover, .key:disabled:hover { background: #DEDED7; color: var(--ink-soft); }
.key img { width: 24px; height: 24px; flex: none; }
.key.wide { grid-column: 1 / -1; }

/* ruled rows: desks, verdicts, reviews, resumes */
.rows { margin: 0; padding: 0; list-style: none; }
.rows > li + li::before { content: ""; display: block; border-top: 2px dotted var(--ink); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-8) var(--s-24);
  align-items: start;
  padding: var(--s-16) 0;
  text-decoration: none;
}
/* a row with a marker: the marker is one size and one shape, level with the first line of the text */
.row.marked { grid-template-columns: 48px minmax(0, 1fr) auto; }
.row.marked > img { width: 48px; height: 48px; object-fit: contain; align-self: start; margin-top: 2px; }
.row > img { width: 48px; height: 48px; object-fit: contain; align-self: start; margin-top: 2px; }
.row .who { font-family: var(--mono); font-size: var(--t-20); font-weight: 700; line-height: 1.3; margin: 0; }
.row .meta { font-family: var(--grot); font-size: var(--t-16); line-height: 1.45; color: var(--ink-soft); margin: var(--s-4) 0 0; }
.row .num { font-family: var(--mono); font-size: var(--t-20); text-align: right; margin: 0; }
a.row:hover .who { color: var(--green); }
.empty-note { font-family: var(--grot); font-size: var(--t-16); line-height: 1.5; color: var(--ink-soft); margin: 0; padding: var(--s-8) 0 var(--s-4); }
.ticker { font-weight: 400; color: var(--ink-soft); }

/* the form, printed as rows of the same system */
.fieldrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-12) var(--s-16); align-items: center; margin: 0 0 var(--s-16); }
.fieldrow label {
  font-family: var(--grot);
  font-weight: 700;
  font-size: var(--t-16);
  line-height: 1.2;
  text-transform: uppercase;
}
.fieldrow input, .fieldrow textarea, .fieldrow select {
  font-family: var(--mono);
  font-size: var(--t-16);
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper-sunk);
  border: 2px solid var(--ink);
  padding: var(--s-12) var(--s-16);
  min-height: 52px;
  width: 100%;
  min-width: 0;
}
.fieldrow textarea { resize: vertical; min-height: 92px; }
.fieldrow input[type="file"] { background: var(--paper); }
.fieldrow input:focus-visible, .fieldrow textarea:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* the rule belongs to the row it divides, never to the heading itself */
.fieldhead {
  font-family: var(--grot);
  font-weight: 700;
  font-size: var(--t-16);
  text-transform: uppercase;
  margin: var(--s-24) 0 var(--s-8);
  padding-top: var(--s-16);
  position: relative;
}
.fieldhead::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 2px solid var(--ink); }

.picks .pick { cursor: pointer; }
.picks .pick input { width: 22px; height: 22px; accent-color: var(--green); }
.picks .pick:hover .who { color: var(--green); }
.note[data-tone="bad"] { color: var(--red); }
.row.marked.staffrow { grid-template-columns: 96px minmax(0, 1fr) auto; }
.row.marked.staffrow > img { width: 96px; height: 96px; }
.staffrow .meta b { color: var(--ink); }
.row a { text-decoration: underline; text-underline-offset: 3px; }

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

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

@media (max-width: 1280px) {
  .spread {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-32);
    padding: var(--s-32) var(--s-24) 72px;
    --sheet: 100%;
    max-width: 760px;
  }
  .tabs { flex-direction: row; flex-wrap: wrap; margin: 0; }
  .tab { flex: 1 1 128px; }
  .tab:hover, .tab[aria-current="page"] { transform: none; }
  .frame { height: clamp(150px, 24vw, 220px); }
  .display { font-size: clamp(var(--t-32), 7vw, 56px); }
}
@media (max-width: 720px) {
  .spread { padding: var(--s-24) var(--s-16) 56px; gap: var(--s-24); }
  .headband { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); }
  .headband .cycle { grid-column: 1 / -1; }
  .slogans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seal { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: var(--s-12); min-height: 0; text-align: left; }
  .strip .title, .strip .body { padding-left: var(--s-24); padding-right: var(--s-24); }
  .row.marked { grid-template-columns: 48px minmax(0, 1fr); }
  .row .num { grid-column: 2; text-align: left; }
  .row.marked.staffrow { grid-template-columns: 64px minmax(0, 1fr); }
  .row.marked.staffrow > img { width: 64px; height: 64px; }
  .fieldrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .slogans { grid-template-columns: minmax(0, 1fr); }
  .slogan { min-height: 0; }
}

/* A short desktop window (a laptop at 900) still shows the whole label: the frame, the mark, the
   display and the inner rhythm all give a little, nothing is cut and nothing leaves the scale. */
@media (min-width: 1281px) and (max-height: 950px) {
  .label { gap: var(--s-8); }
  .frame { height: clamp(120px, 15vh, 150px); }
  .mark img { width: clamp(100px, 11vh, 128px); }
  .display { font-size: clamp(var(--t-32), 5.4vh, 52px); }
  .imprint .fine { margin-bottom: var(--s-8); }
  .slogan, .seal { min-height: calc(var(--t-16) * 1.2 * 2); }
  .imprint canvas { height: 44px; }
  .imprint .hair { margin-bottom: var(--s-8); }
}