/* THE RECEIVED FAX. The marketing site is a fax that just came through.
 *
 * Own stylesheet, on purpose: pages.css is factory-owned and dresses the
 * policy pages; this world is the paper itself. Everything here is ink on
 * thermal paper on a beige desk. Two faces, both self-hosted (OFL): Courier
 * Prime is the cover sheet's typewriter; Silkscreen is the printhead, the
 * squat dot-matrix face a fax machine uses for its own header line.
 */

@font-face { font-family: 'Courier Prime'; src: url('/fonts/CourierPrime-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/fonts/CourierPrime-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('/fonts/Silkscreen-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('/fonts/Silkscreen-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --paper: #F7F5F0;
  --ink: #101010;
  --desk: #CFC7B8;
  --led: #D93B2B;
  --led-ink: #7A1A0C;
  --tone: #4A4741;
  --mono: 'Courier Prime', 'Courier New', Courier, monospace;
  --dot: 'Silkscreen', 'Courier Prime', monospace;
  --gutter: 22px;
}

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

html {
  background: var(--desk);
  scrollbar-color: var(--ink) var(--desk);
  color-scheme: light only;
}
body {
  margin: 0;
  color: var(--ink);
  font: 18px/1.5 var(--mono);
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--paper); }
a { color: var(--led-ink); text-underline-offset: 3px; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--led); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 10;
  min-height: 44px; padding: 10px 16px; display: inline-flex; align-items: center;
  background: var(--ink); color: var(--paper); text-decoration: none; font-family: var(--dot); font-size: 12px; text-transform: uppercase;
}
.skip:focus { left: 8px; }

/* --- the sheet -------------------------------------------------------------- */
.sheet {
  background: var(--paper);
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 820px) {
  .sheet { margin: 44px auto 56px; box-shadow: 0 22px 48px rgba(16, 16, 16, 0.30); }
}

/* Perforation: the strip of sprocket holes at the top and bottom of the roll. */
.perf {
  height: 16px;
  background: radial-gradient(circle at 50% 50%, var(--desk) 3px, transparent 3.6px) 8px 50% / 18px 16px repeat-x;
}

/* The machine's own header line: date, sender, number, page count. */
.tsi {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 var(--gutter);
  padding: 12px 0 6px;
  border-bottom: 2px solid var(--ink);
  font: 400 12px/1.2 var(--dot);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.tsi span { white-space: nowrap; }
.tsi .from { flex: 1 1 auto; }
/* One line on a phone: the fake number is the first thing to go. */
@media (max-width: 479px) { .tsi .num { display: none; } }

.page { padding: 14px var(--gutter) 26px; }

/* Cover band: TO / FROM / RE / memo, ruled off like the page prints it. */
.cover { padding-bottom: 12px; border-bottom: 3px solid var(--ink); margin-bottom: 16px; }
.cover .row { display: flex; justify-content: space-between; gap: 16px; font-weight: 700; text-transform: uppercase; }
/* RE: is the first word of the heading, the way the page prints it. */
.re { font-weight: 400; }
h1 {
  font: 700 clamp(1.7rem, 7vw, 3.6rem) / 1.02 var(--dot);
  text-transform: uppercase;
  margin: 12px 0 10px;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.memo { margin: 0; font-size: 1.05rem; max-width: 40ch; }
h2 {
  font: 700 0.95rem/1.3 var(--dot);
  text-transform: uppercase; letter-spacing: 0.03em;
  margin: 30px 0 10px;
}
h2:first-child, h2.cover-h { margin-top: 8px; margin-bottom: 0; font-size: clamp(1.2rem, 4.6vw, 1.8rem); }
p { margin: 0 0 14px; max-width: 62ch; }

/* The specimen: a real page from the machine. Downscaled with the browser's
   own filter rather than nearest-neighbour: a 1-bit dither shrunk pixel-exact
   beats against the screen grid and turns to moire. */
.fax {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--ink);
  background: #fff;
}
.specimen { margin: 0; }
/* On a phone the specimen is pasted a little inside the page, so the tear
   strip and its keys sit inside the first screen; the full-width page is a
   desktop luxury. */
@media (max-width: 599px) { .page-1 .specimen .fax { width: 74%; margin: 0 auto; } }
.specimen figcaption {
  margin-top: 8px;
  font: 400 12px/1.6 var(--dot);
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--tone);
}

/* Tear strip: the perforated band with the keys printed on it. */
/* On the first page the strip lives inside the page so it can change places:
   under the specimen on a phone, where the page is read top to bottom, and
   between the cover line and the specimen on a wide screen, where the page
   is taller than the window and the keys would otherwise sit below it. */
.page-1 .page { display: flex; flex-direction: column; }
/* The cover keeps its default position, so anything un-ordered (the
   recipient page's paragraph) stays in source order behind it. */
.page-1 .specimen { order: 1; }
.page-1 .tear.inpage { order: 2; margin: 10px calc(-1 * var(--gutter)) 0; }
@media (min-width: 820px) {
  .page-1 .specimen { order: 2; }
  .page-1 .tear.inpage { order: 1; margin: 0 calc(-1 * var(--gutter)) 24px; }
  .memo { max-width: 52ch; }
}
.tear {
  margin: 8px 0 0;
  padding: 16px var(--gutter) 20px;
  border-top: 2px dashed var(--ink);
  border-bottom: 2px dashed var(--ink);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch;
}
.tear .label {
  width: 100%;
  text-align: center;
  font: 400 12px/1 var(--dot); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tone);
  margin-bottom: 2px;
}
.key {
  flex: 1 1 200px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 20px;
  border: 3px solid var(--ink);
  background: var(--paper); color: var(--ink);
  font: 700 0.95rem/1.1 var(--dot); text-transform: uppercase; letter-spacing: 0.02em;
  text-decoration: none; text-align: center;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.key:hover, .key:active { background: var(--ink); color: var(--paper); }
.key.primary { background: var(--led); border-color: var(--led); color: #fff; }
.key.primary:hover, .key.primary:active { background: var(--led-ink); border-color: var(--led-ink); }
.tear .note { width: 100%; margin: 4px 0 0; font-size: 0.9rem; color: var(--tone); }

/* The numbered memo: what the machine does, typed as a list on the page. */
.typed { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 16px; }
.typed li { display: grid; grid-template-columns: 2.2ch 1fr; gap: 10px; align-items: baseline; }
.typed li::before { content: counter(item) '.'; counter-increment: item; font-weight: 700; }
.typed { counter-reset: item; }
.typed b { display: block; text-transform: uppercase; }

/* The evidence: what the caption in the chat actually says. */
.caption {
  border: 2px solid var(--ink);
  padding: 12px 14px;
  margin: 0 0 14px;
  font-size: 1rem;
  background: #fff;
}
.caption .u { text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }

/* The trailer: end of transmission, and the four lines a store reviewer opens. */
.trailer {
  padding: 14px var(--gutter) 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px;
  font: 400 12px/1.4 var(--dot); text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--tone);
}
.trailer .end { width: 100%; margin-bottom: 4px; }
.trailer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ink); }

/* THE ONE MOVING THING: the first page prints itself, top to bottom, the way
   a fax comes out of the slot. Everything below it is visible from the start. */
@media (prefers-reduced-motion: no-preference) {
  .page-1 { animation: print 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes print {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (min-width: 600px) {
  :root { --gutter: 40px; }
  body { font-size: 19px; }
  .tsi { font-size: 13px; }
}