/* [LarenX]: Print layer | games/Master-Mind/css/print.css | v.1.0
 *
 * This file is the whole homage. It does not imitate Bogusław Polch's line, which
 * would come out embarrassing, and it does not reproduce a single panel he drew.
 * It imitates how the page was manufactured.
 *
 * The originals were sold as three pieces: the ink board, the blaudruk (a blue line
 * proof, coloured by hand) and the outlines on film. The press assembled them, badly,
 * on cheap paper. Every rule below comes from one of those four facts:
 *
 *   paper      aged newsprint, warm, fibrous, never white
 *   rosette    a coarse dot screen, because the line count was low
 *   register   the colour plate sits a hair off the line plate
 *   blaudruk   blue means not printed yet, black means printed
 *
 * That last one is not decoration. It is the game's progress bar: an unplayed
 * attempt is a panel still in blue pencil, and playing it inks it.
 */

:root {
  /* Paper and ink */
  --paper:        #e9e0c8;
  --paper-shade:  #ded2b4;
  --paper-edge:   #c9ba98;
  --ink:          #211e1a;
  --ink-soft:     #4a443c;

  /* The non reproducing blue of the proof sheet */
  --blau:         #7d9dc4;
  --blau-pale:    #aec4dd;

  /* Registration: how far the colour plate slips off the line plate */
  --reg-x:  1.1px;
  --reg-y: -0.7px;

  /* Screen */
  --dot:     2.3px;
  --dot-ink: rgba(33, 30, 26, 0.16);

  --rule:      1.9px;
  --rule-thin: 1.2px;

  /* THE SHEET. One size for the whole issue, and it is a SIZE, in millimetres of
   * paper rather than in whatever the window happens to be. Daniel's painting is
   * 1240 x 1754, so the page is laid out once at 760 x 1075, the same shape, and
   * the window only decides how large it is drawn: --zoom, written by the script.
   *
   * Everything before this reflowed instead. Every window width produced its own
   * layout, the panels and the marks were shrunk to fit whatever was left, and at
   * 1366 x 768 there was nothing left: the sheet ran 129px past the paper with
   * every number already on its floor, so the last broadcast simply was not on
   * the page. On a sheet that cannot scroll, that is the whole game gone.
   *
   * A page that is laid out once cannot do that. It is the same page at every
   * size, and the only thing that changes is how close you are standing to it. */
  --sheet-w: 760px;
  --sheet-h: 1075px;
  --zoom: 1;

  /* The red of the masthead K, sampled off the painting. */
  --red-masthead: #d33a22;

  --font-display: 'Anton', 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-letter:  'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; }

/* The HTML hidden attribute loses to any display rule, and both screens here set
 * one, so hiding the board left it sitting next to the cover sharing the width.
 * This is the standard reset and it has to come before the layout rules. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: #1a1714;            /* the table the magazine lies on */
  color: var(--ink);
  font-family: var(--font-letter);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- paper --- */

/* The sheet. Two gradients give the uneven tone of stock that has yellowed
 * unevenly, and the fibre noise on top is generated, not an image file. */
.paper {
  position: relative;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 22% 8%,  rgba(255, 252, 238, 0.55), transparent 55%),
    radial-gradient(ellipse at 88% 96%, rgba(158, 132, 86, 0.22),  transparent 58%);
  box-shadow: 0 0 0 1px var(--paper-edge), 0 18px 48px rgba(0, 0, 0, 0.55);
}

/* Fibre. feTurbulence through a data URI, so there is no asset to upload and
 * nothing to lose over FTP. */
.paper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- screen --- */

/* There is no page wide screen any more, and this is the important correction of
 * the whole build. The reference plates are painted: smooth colour under thin
 * black line, with the press only just showing. A rotated dot grid laid over
 * everything produced moire wherever it crossed a warm wash, and it ran over the
 * balloons and the lettering as well, which is why the replies came out looking
 * smeared with red hatching.
 *
 * What is left is a whisper of press texture, applied to colour only, never to
 * anything white and never to type. */
.screened { position: relative; }

/* ------------------------------------------------------------------ ink --- */

/* Line work wobbles a little, the way a nib on absorbent paper does. The filter
 * is defined once in the page and applied only to borders and glyphs: it is the
 * most expensive thing here, so it never touches text. */
.inked { filter: url(#mm-ink); }

@media (prefers-reduced-motion: reduce) {
  .inked { filter: none; }
}

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

/* Colour under, line over, a hair apart. This is the misregistration, and it is
 * the single detail that makes a screen look printed rather than rendered. */
.plate { position: relative; }

.plate__colour {
  position: absolute;
  /* Inset, so the block's own edge shows and the slip off the drawn frame reads
   * as bad registration rather than as a fill. */
  inset: 3px;
  z-index: 1;
  transform: translate(var(--reg-x), var(--reg-y));
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0.62;

  /* Painted, not screened: a wash that is stronger at the foot of the panel than
   * at the head, the way gouache settles, with only a trace of press texture. */
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.38), rgba(0, 0, 0, 0.1)),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.055) 40%, transparent 42%);
  background-size: auto, 2.1px 2.1px;
  background-blend-mode: normal, multiply;
}

.plate__line {
  position: relative;
  z-index: 2;
}

/* A press does not slip by the same amount on every sheet. Varying the offset
 * down the page stops the grid from reading as a template. */
.plate:nth-child(3n)   { --reg-x:  0.7px; --reg-y:  0.9px; }
.plate:nth-child(3n+1) { --reg-x: -1.0px; --reg-y: -0.6px; }

/* ------------------------------------------------------------- lettering --- */

.letter {
  font-family: var(--font-letter);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 0.92;
}

/* The caption box: the ruled rectangle the narration sat in, always slightly
 * lighter than the paper because it was a flat plate with no screen on it. */
.caption {
  background: #f2ead6;
  border: var(--rule-thin) solid var(--ink);
  padding: 0.28em 0.6em;
  font-family: var(--font-letter);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Sound words. Outlined, heavy, tilted, and allowed to hang outside the panel,
 * because in this comic they always did. */
.onom {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.9rem);
  line-height: 0.82;
  color: var(--paper);
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 rgba(33, 30, 26, 0.85);
  transform: rotate(-7deg);
  pointer-events: none;
  user-select: none;
}

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

/* Every page in this issue is the same piece of paper: the cover, the board and
 * the tribute page. Taken out of the flow and centred on the table, so the box it
 * occupies is never what decides the layout, and scaled as one thing, so the type,
 * the panels and the paintings all grow and shrink together. */
.magazine { position: relative; }

.sheet-of-paper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sheet-w);
  height: var(--sheet-h);
  transform: translate(-50%, -50%) scale(var(--zoom));
  transform-origin: 50% 50%;
}

/* ----------------------------------------------------------------- glyph --- */

/* The signals are Daniel's paintings, so nothing here draws a shape. These rules
 * are only about how a painted signal sits on the paper. */
.glyph {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
}

/* A signal printed on a panel stands on painted scenery, so it needs an edge of
 * its own: paper colour, tight, twice over, because one pass leaves the corners
 * thin. Under it the colour plate sits a hair off the line, the registration the
 * whole page is built on, taken from the same two tokens as everything else. A
 * hairline of shadow under that, and the signal is a thing lying on the sheet
 * rather than a picture pasted into it. */
.glyph--halo {
  filter:
    drop-shadow(0 0 1.1px #fffdf6)
    drop-shadow(0 0 1.1px #fffdf6)
    drop-shadow(0 1px 1.2px rgba(33, 30, 26, 0.34));
}

/* ------------------------------------------------------------ the proof --- */

/* Blue means this panel has not been printed. It is empty because the player has
 * not broadcast yet, and the number of blue panels left on the page is the number
 * of attempts left. No counter needed. */
.blau {
  border-color: var(--blau-pale) !important;
  color: var(--blau);
}

.blau .caption {
  background: transparent;
  border-color: var(--blau-pale);
  color: var(--blau);
}