/* Machete DGX — continuous-form stylesheet.
   One face, one sheet. Hierarchy is built the way a line printer built it:
   size, weight, letterspacing, rules and blank lines. No second typeface,
   no icon set — a printout has neither. */

@font-face {
  font-family: 'Sometype Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/sometype-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sometype Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/sometype-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  /* Paper under machine-room light, not a screen in a dark room. */
  --paper: #f3f2ea;
  --bar: #d2e0c8;
  --bar-edge: #b9cbad;
  --ink: #16201c;
  /* Secondary text is tinted from the paper's own hue. Gray would read as a
     rendering error on a printed sheet. */
  --ink-soft: #4a5852;
  --ink-faint: #6d7a73;
  --red: #b0311f;
  /* The surface the sheet lies on. The feed holes are punched through the
     paper, so they show this colour — which is why it has to be clearly
     darker than the paper, or the holes disappear and the sheet stops
     reading as paper at all. */
  --desk: #c6c8b9;
  --rule: #9aa79f;
  --sheet: min(1120px, 100%);
  --gutter: 34px;
  --fold: 26px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--desk);
  /* A stray absolutely-positioned child must never widen the document on a
     phone; the sheet is the widest thing here by definition. */
  overflow-x: clip;
  color: var(--ink);
  font-family: 'Sometype Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: none;
}

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

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

/* Sprocket margins are drawn, not imaged: a repeating radial gradient punches
   the feed holes and the paper edge sits between them. */
.form {
  width: var(--sheet);
  margin: 0 auto;
  /* Each hole is the desk colour with a hairline rim, so it reads as punched
     rather than printed. */
  background:
    radial-gradient(circle at 13px 50%,
      var(--desk) 4.4px, rgba(22, 32, 28, .22) 4.4px, transparent 5.6px)
      left 0 top 0 / 26px 26px repeat-y,
    radial-gradient(circle at 13px 50%,
      var(--desk) 4.4px, rgba(22, 32, 28, .22) 4.4px, transparent 5.6px)
      right 0 top 0 / 26px 26px repeat-y,
    var(--paper);
  box-shadow: 0 1px 2px rgba(22, 32, 28, .16), 0 22px 50px -30px rgba(22, 32, 28, .6);
}

.sheet {
  padding: 0 var(--gutter);
  margin: 0 26px;
}

/* A page of continuous form ends on a perforation: the crease catches light on
   the upper side and drops a hairline shadow on the lower. */
.perf {
  position: relative;
  height: var(--fold);
  margin: 0 26px;
  /* A fold catches light on the upper leaf and casts a hairline shadow on the
     lower one. Both halves are needed or it reads as a stray divider. */
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, .9) 0%, rgba(22, 32, 28, .16) 49%,
      rgba(22, 32, 28, .05) 51%, rgba(255, 255, 255, .55) 100%);
}
.perf::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  border-top: 1px dashed rgba(22, 32, 28, .55);
}

/* ------------------------------------------------------- running header band */

.band {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.band-in {
  width: var(--sheet);
  margin: 0 auto;
  padding: 9px calc(var(--gutter) + 26px);
  display: flex;
  align-items: center;
  gap: 18px;
}
.band strong { font-weight: 700; }
.band .spacer { margin-left: auto; }
.band a { color: var(--ink-soft); text-decoration: none; }
.band a:hover { color: var(--ink); text-decoration: underline; }
.band a[aria-current="true"] { color: var(--ink); font-weight: 700; }

/* The one authored moment: the running page number advances like paper being
   fed, instead of every section fading in identically. */
.folio { font-variant-numeric: tabular-nums; display: inline-block; }
.folio.advance { animation: feed .42s cubic-bezier(.16, 1, .3, 1); }
@keyframes feed {
  from { transform: translateY(-90%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

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

.page { padding: 46px 0 48px; }
.page > * + * { margin-top: 22px; }

/* The printed job line above each page's content. */
.jobline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 7px;
}
.jobline .r { margin-left: auto; }

h1, h2, h3 { font-weight: 700; line-height: 1.06; letter-spacing: -.01em; }
h1 { font-size: clamp(34px, 6.2vw, 62px); }
h2 { font-size: clamp(25px, 3.6vw, 36px); line-height: 1.12; }
h3 { font-size: 17px; letter-spacing: .04em; text-transform: uppercase; }

/* Overstrike: the printer had no bold, so emphasis was struck twice, slightly
   off. One authored detail, used on the cover line only. */
.struck { position: relative; }
/* `inset: 0` rather than a left/top offset: an absolutely positioned echo with
   no width constraint lays its copy of the heading out on ONE line, which on a
   phone widens the whole document and pushes every page off-screen. Shifting it
   with a transform keeps the double-strike without touching layout. */
.struck::after {
  content: attr(data-echo);
  position: absolute;
  inset: 0;
  transform: translate(.035em, .028em);
  color: var(--ink);
  opacity: .2;
  pointer-events: none;
}

p { max-width: 68ch; }
.lead { font-size: clamp(16px, 1.9vw, 19px); color: var(--ink-soft); max-width: 62ch; }
.small { font-size: 13.5px; color: var(--ink-faint); }

/* ------------------------------------------------------------------ bar data */

/* Green-bar banding is what the paper is for: it exists so a wide row of
   figures stays on its line across the sheet. */
.bars { border: 1px solid var(--ink); border-inline: 0; }
.bars .row {
  display: grid;
  grid-template-columns: minmax(9.5rem, 1.1fr) minmax(0, 2fr) auto;
  gap: 6px 20px;
  padding: 9px 14px;
  align-items: baseline;
}

/* Columns have to line up down the whole block. Each row being its own grid
   let every row size its own tracks, so the description started at a different
   x in all five rows and the figures never formed a column — which defeats the
   one thing banded paper exists to do. `subgrid` hands the rows the parent's
   tracks while keeping each row a box, so the banding and rules still work.
   Without subgrid the rows fall back to the ragged-but-readable layout above. */
@supports (grid-template-columns: subgrid) {
  .bars {
    display: grid;
    grid-template-columns: minmax(9.5rem, 1.1fr) minmax(0, 2fr) max-content;
  }
  .bars .row {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}
.bars .row:nth-child(odd) { background: var(--bar); }
.bars .row + .row { border-top: 1px solid rgba(22, 32, 28, .09); }
.bars .k { font-weight: 700; letter-spacing: .02em; }
.bars .d { color: var(--ink-soft); }
.bars .v { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.stamp-note {
  display: inline-block;
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 9px;
  transform: rotate(-1.2deg);
}

/* -------------------------------------------------------------------- action */

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s cubic-bezier(.16, 1, .3, 1),
              color .18s cubic-bezier(.16, 1, .3, 1),
              transform .18s cubic-bezier(.16, 1, .3, 1);
}
.btn:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); }
.btn--ghost { border-color: var(--rule); font-weight: 400; }
.btn--ghost:hover { border-color: var(--ink); }
.btn[aria-disabled="true"] {
  border-color: var(--rule);
  color: var(--ink-faint);
  cursor: default;
  pointer-events: none;
}

/* --------------------------------------------------------------- plates/shots */

/* Screenshots are tipped in like plates in a technical report: a printed
   caption, a hairline frame, no floating device mockups. */
.plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 26px 22px;
}
.plate figure { margin: 0; }
.plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ink);
  background: var(--ink);
}
.plate figcaption {
  margin-top: 9px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  gap: 8px;
}
.plate figcaption b { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------------- diagram */

.diagram {
  background: var(--bar);
  border: 1px solid var(--bar-edge);
  padding: 20px 16px;
  overflow-x: auto;
}
.diagram pre {
  font: inherit;
  font-size: clamp(11px, 2.5vw, 14px);
  line-height: 1.5;
  white-space: pre;
  color: var(--ink);
}

/* --------------------------------------------------------------------- lists */

.listing { display: grid; gap: 2px; }
.listing div {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 12px;
  padding: 5px 0;
  align-items: baseline;
}
.listing div + div { border-top: 1px dotted var(--rule); }
.listing .m { color: var(--red); font-weight: 700; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px 34px; }

/* -------------------------------------------------------------------- footer */

.colophon {
  border-top: 1px solid var(--ink);
  padding: 26px 0 44px;
  font-size: 13px;
  color: var(--ink-soft);
  display: grid;
  gap: 18px 34px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.colophon a { color: var(--ink); }
.colophon h3 { margin-bottom: 7px; color: var(--ink); }

/* ------------------------------------------------------------- prose (legal) */

.prose > * + * { margin-top: 17px; }
.prose h2 { margin-top: 38px; font-size: clamp(21px, 2.6vw, 27px); }
.prose h3 { margin-top: 26px; }
.prose ul { padding-left: 1.15rem; max-width: 68ch; }
.prose li + li { margin-top: 6px; }
.prose code {
  background: var(--bar);
  border: 1px solid var(--bar-edge);
  padding: 1px 5px;
  font-size: .92em;
  word-break: break-word;
}
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(22, 32, 28, .14);
  vertical-align: top;
}
.prose thead th { border-bottom: 1px solid var(--ink); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.prose tbody tr:nth-child(odd) { background: var(--bar); }

.updated { color: var(--ink-faint); font-size: 13px; }

/* ------------------------------------------------------------------ tablet */

@media (max-width: 900px) {
  :root { --gutter: 24px; --fold: 22px; }
  .bars .row { grid-template-columns: minmax(8rem, 1fr) auto; }
  @supports (grid-template-columns: subgrid) {
    .bars { grid-template-columns: minmax(8rem, 1fr) max-content; }
  }
  .bars .d { grid-column: 1 / -1; font-size: 13.5px; }
}

/* ------------------------------------------------------------------- phone */

@media (max-width: 620px) {
  :root { --gutter: 15px; }
  body { font-size: 15.5px; line-height: 1.68; }
  /* The feed holes shrink but never disappear — they are what says "paper". */
  .form {
    background:
      radial-gradient(circle at 8px 50%,
        var(--desk) 3px, rgba(22, 32, 28, .22) 3px, transparent 4px)
        left 0 top 0 / 16px 22px repeat-y,
      radial-gradient(circle at 8px 50%,
        var(--desk) 3px, rgba(22, 32, 28, .22) 3px, transparent 4px)
        right 0 top 0 / 16px 22px repeat-y,
      var(--paper);
  }
  .sheet, .perf { margin: 0 16px; }
  /* A phone has no room for a nowrap figure column; let the reading wrap under
     its own label rather than run off the sheet. */
  .bars .row { grid-template-columns: 1fr; gap: 2px; }
  @supports (grid-template-columns: subgrid) {
    .bars { grid-template-columns: 1fr; }
  }
  .bars .v { text-align: left; white-space: normal; font-weight: 700; }
  .bars .d { font-size: 13.5px; }
  .band-in { padding: 8px calc(var(--gutter) + 16px); gap: 10px; font-size: 11px; }
  .band .hide-sm { display: none; }
  .page { padding: 32px 0 34px; }
  .plates { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 14px; }
  .btn { width: 100%; justify-content: center; }
  .prose table, .prose thead, .prose tbody, .prose tr, .prose th, .prose td { display: block; }
  .prose thead { display: none; }
  .prose tbody tr { border-bottom: 1px solid var(--ink); padding: 6px 0; }
  .prose td { border: 0; padding: 3px 0; }
  .prose td::before {
    content: attr(data-h);
    display: block;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
}

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

@media print {
  body { background: #fff; }
  .band { position: static; }
  .form { box-shadow: none; background: #fff; }
}