/* The Website, in the app's Sorting Office look (DESIGN.md): a labelled drawing of the app. The graphite rail holds
   the pitch and the Get button beside real screenshots, and manila tags pinned to their parts say what each part
   does. Light and dark follow the system, as in the app. Nothing loads from another site, and there's no script. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --ground: light-dark(#edeef0, #141618);
  --panel: light-dark(#ffffff, #1c1f22);
  --panel-2: light-dark(#f3f4f6, #24282c);
  --rule: light-dark(#dcdfe3, #2e3338);
  --rule-strong: light-dark(#c4c9cf, #3d434a);
  --ink: light-dark(#18191b, #eceef0);
  --ink-muted: light-dark(#585d65, #a3a9b1);

  --rail: light-dark(#2b3035, #0e1012);
  --rail-2: light-dark(#373d44, #1f2327);
  --rail-rule: light-dark(#444b53, #2c3136);
  --rail-ink: #eceef0;
  --rail-muted: light-dark(#a7adb5, #9aa1a9);

  --manila: light-dark(#e8d7aa, #d6c48f);
  --manila-ink: #18191b;
  --focus: light-dark(#c8412a, #ff8a73);
  --rail-focus: light-dark(#f2846b, #ff8a73);

  --shadow-card: 0 1px 2px light-dark(rgb(24 25 27 / 0.06), rgb(0 0 0 / 0.4)),
                 0 3px 10px light-dark(rgb(24 25 27 / 0.04), transparent);
  --shadow-menu: 0 2px 6px light-dark(rgb(24 25 27 / 0.08), rgb(0 0 0 / 0.3)),
                 0 12px 32px light-dark(rgb(24 25 27 / 0.14), rgb(0 0 0 / 0.4));
  /* The edge of a screenshot and of a tag, which sit on the app's graphite as well as its steel. */
  --shot-ring: light-dark(rgb(24 25 27 / 0.08), rgb(255 255 255 / 0.1));
  --manila-edge: rgb(24 25 27 / 0.22);

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --label: "Archivo", var(--font);
  --gutter: 20px;
  color-scheme: light dark;
}

@media (min-width: 720px) {
  :root { --gutter: 40px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { scrollbar-color: var(--rule-strong) transparent; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

h1, h2, h3, p, ol, dl, dd, figure { margin: 0; }
ol { padding: 0; list-style: none; }

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

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

/* Lettering: things that read as a label on the sorting frame, in Archivo condensed capitals. */
.brand, h1, h2, h3, dt, .pin span, .pin b, .key b {
  font-family: var(--label);
  font-stretch: 75%;
  text-transform: uppercase;
}

/* The page: the rail beside the stage. On a phone the rail heads the page; from 1000px it stays put beside it. */

.page { min-height: 100vh; }

.rail {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px var(--gutter) 40px;
  background: var(--rail);
  color: var(--rail-ink);
}

.rail :focus-visible { outline-color: var(--rail-focus); }

/* The App Icon beside the Chanbox label, as the Mac app shows it in the Dock. */
.identity {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: start;
}

.app-icon { display: block; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.3)); }

.brand {
  padding: 6px 12px 5px;
  border-radius: 999px;
  background: var(--manila);
  box-shadow: inset 0 0 0 1px var(--manila-edge);
  color: var(--manila-ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
}

h1 {
  font-size: clamp(40px, 9vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.lead {
  margin-top: 20px;
  max-width: 34em;
  color: var(--rail-muted);
  font-size: 17px;
  text-wrap: pretty;
}

.button {
  display: inline-flex;
  align-items: center;
  height: 50px;
  margin-top: 28px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--rail-ink);
  color: var(--manila-ink);
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 0.15s;
}

.button:hover { background: color-mix(in srgb, var(--rail-ink) 82%, var(--rail-muted)); }
.button:active { translate: 0 1px; }

.button--ink { background: var(--ink); color: var(--panel); }
.button--ink:hover { background: color-mix(in srgb, var(--ink) 84%, var(--panel)); }

.release {
  margin-top: 12px;
  text-wrap: balance;
  color: var(--rail-muted);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.rail__note {
  color: var(--rail-muted);
  font-size: 12.5px;
}

@media (min-width: 1000px) {
  .page {
    display: grid;
    grid-template-columns: clamp(400px, 31vw, 440px) minmax(0, 1fr);
  }

  .rail {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 32px 44px 28px;
    box-shadow: inset -1px 0 0 var(--rail-rule);
  }

  .rail__pitch { margin-block: auto; }
  h1 { font-size: clamp(40px, 3.3vw, 56px); }
}

/* The stage: the parts of the drawing, each a heading over a screenshot with its tags, or a sheet. */

.stage {
  padding: 48px var(--gutter) 64px;
  overflow-x: clip;
}

.part + .part,
.part + .caught-up { margin-top: 96px; }

.part__head { max-width: 40em; }

h2 {
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.part__head p {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 17px;
  text-wrap: pretty;
}

@media (min-width: 1000px) {
  .stage { padding: 72px 0 96px 64px; }
  .part__head, .key, .sheet, .caught-up { margin-right: 64px; }
}

/* A drawing: a screenshot on a plate, with pins at the parts it names. The plate is the screenshot's own box, so a
   pin's --x and --y are where the part sits in the screenshot, whatever the plate's size. */

.drawing { margin-top: 28px; }

.drawing__frame {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--rail);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--shot-ring);
}

/* A container, so a tag's offsets (in cqw) scale with the screenshot and stay on its parts. */
.drawing__plate { position: relative; container-type: inline-size; }

.drawing img {
  display: block;
  width: 100%;
  height: auto;
}

/* Wide, the screenshot runs off the right edge of the page, and its tags name the parts in place. */
@media (min-width: 1000px) {
  .drawing__frame {
    width: calc(100% + 120px);
    border-radius: 12px 0 0 12px;
    box-shadow: var(--shadow-menu), 0 0 0 1px var(--shot-ring);
  }
}

/* Narrow, the frame is a close crop of the screenshot, enlarged enough that the app's text still reads: the plate is
   scaled up by --zoom and moved by --crop-x and --crop-y (fractions of the plate), and the frame keeps 1 / --zoom of
   its width and --crop-h of its height. A pin outside the crop moves to another spot on its part, or to the same count elsewhere (--nx, --ny). */
@media (max-width: 999px) {
  .drawing__frame { aspect-ratio: calc(1.6 / var(--zoom) / var(--crop-h)); }
  .drawing__plate {
    width: calc(var(--zoom) * 100%);
    translate: calc(var(--crop-x) * -100%) calc(var(--crop-y) * -100%);
  }
  .drawing--tiles { --zoom: 2.4; --crop-x: 0.206; --crop-y: 0; --crop-h: 0.7; }
  /* The Watching drawing is two crops: the player, then the title and action row, each holding its own pins. */
  .drawing--video .drawing__frame { --zoom: 1.35; --crop-x: 0.23; --crop-y: 0.09; --crop-h: 0.68; }
  .drawing--video .drawing__frame--actions { --zoom: 1.8; --crop-x: 0.225; --crop-y: 0.77; --crop-h: 0.19; margin-top: 12px; }
  .drawing--video .drawing__frame:not(.drawing__frame--actions) .pin--actions,
  .drawing__frame--actions .pin:not(.pin--actions) { display: none; }
  /* Enlarged less than the Tiles, the band's buttons are smaller than a head: it sits on each one's top edge instead. */
  .drawing__frame--actions .pin--actions { top: calc(var(--y) - 2.4%); }
}

@media (min-width: 1000px) {
  .drawing__frame--actions { display: none; }
}

.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
}

/* The pin's head: a manila disc with its number, sat on the part. */
.pin b, .key b {
  display: grid;
  place-items: center;
  width: var(--head, 24px);
  height: var(--head, 24px);
  border-radius: 999px;
  background: var(--manila);
  color: var(--manila-ink);
  font-size: 14px;
  font-weight: 800;
  font-stretch: 85%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Heads and tags scale with the screenshot, down to a size that still reads, so they keep to their parts. */
.pin { --head: clamp(18px, 2.1cqw, 24px); }

.pin b {
  position: absolute;
  font-size: clamp(11px, 1.3cqw, 15px);
  translate: -50% -50%;
  box-shadow: 0 0 0 2px var(--manila-ink), 0 0 0 4px rgb(255 255 255 / 0.85), 0 2px 6px rgb(24 25 27 / 0.15);
}

/* Its tag: a label holder at (--dx, --dy) from the head, tied back to it by a leader. */
.pin span {
  position: absolute;
  left: var(--dx);
  top: var(--dy);
  translate: 0 -50%;
  padding: 0.45em 0.8em 0.38em;
  border-radius: 999px;
  background: var(--manila);
  box-shadow: inset 0 0 0 1px var(--manila-edge), 0 2px 6px rgb(24 25 27 / 0.15);
  color: var(--manila-ink);
  font-size: clamp(11px, 1.3cqw, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.pin--left span { translate: -100% -50%; }

.pin::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: hypot(var(--dx), var(--dy));
  height: 2px;
  background: var(--manila-ink);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.7);
  transform-origin: 0 50%;
  rotate: atan2(var(--dy), var(--dx));
}

/* Narrow, only the heads show, and the key under the screenshot says what each one is. */
@media (max-width: 999px) {
  .pin { left: var(--nx, var(--x)); top: var(--ny, var(--y)); }
  .pin span, .pin::before { display: none; }
}

/* Below the first, a drawing's pins ink on one after another as it comes into view, as the Watched stamp inks on in
   the app: from larger, quickly settling. The first drawing's are there from the start, as they are wherever
   scroll-driven animation isn't supported or motion is reduced. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .part + .part .drawing { view-timeline-name: --drawing; }
    .part + .part .pin {
      animation: ink-on linear both;
      animation-timeline: --drawing;
      animation-range: cover calc(8% + var(--i) * 5%) cover calc(20% + var(--i) * 5%);
    }
  }
}

@keyframes ink-on {
  from { opacity: 0; scale: 1.6; }
  to { opacity: 1; scale: 1; }
}

/* The key: what each numbered pin names. */

.key {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 20px 28px;
  margin-top: 28px;
}

.key li {
  display: grid;
  align-content: start;
  grid-template-columns: 24px 1fr;
  gap: 2px 12px;
}

.key b { grid-row: span 2; margin-top: -2px; }

h3 {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.key p {
  color: var(--ink-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

/* Only yours: one white sheet, ruled like the app's List. */

.sheet {
  margin-top: 28px;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.sheet > div {
  display: grid;
  gap: 4px 32px;
  padding: 18px 20px;
}

.sheet > div + div { border-top: 1px solid var(--rule); }

dt {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

dd {
  max-width: 44em;
  color: var(--ink-muted);
  font-size: 15.5px;
}

@media (min-width: 720px) {
  .sheet > div {
    grid-template-columns: minmax(200px, 16em) 1fr;
    align-items: baseline;
    padding: 20px 28px;
  }
}

/* The close: an empty pigeonhole, as the app shows an Inbox with nothing left in it. */

.caught-up {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 24px;
  border: 2px dashed var(--rule-strong);
  border-radius: 12px;
  text-align: center;
}

.caught-up h2 { font-size: clamp(34px, 6vw, 56px); }

.caught-up > p:not(.release) {
  margin-top: 12px;
  max-width: 30em;
  color: var(--ink-muted);
  font-size: 17px;
  text-wrap: balance;
}

.caught-up .release { color: var(--ink-muted); }