/* ─────────────────────────────────────────────────────────────
   ORIGAMI — THE GROUNDS
   The board, the screen, the field. Load after tokens.css.

   Three textures, and they are not interchangeable — each one
   says something different about the surface it is on:

     .og-board   ruled paper. The drafting table a sheet is laid
                 on. It belongs UNDER things, never behind type.
     .og-screen  the riso dot screen, as a flat field. The press
                 itself. For panels and plates.
     .og-field   the sparse dot field. Distance and geography —
                 the dotted map's own texture.

   A surface takes ONE of them. Two textures on one ground is a
   printing error, and it looks like one.

   For PHOTOGRAPHS the screen is not here: images go through the
   real halftone (components/HalftonePlate.tsx, lib/halftone.ts),
   which reads tone per cell and sizes each dot by it. A CSS dot
   grid is a fixed pattern with no image behind it — fine as a
   ground, wrong as a treatment. See BRAND.md § The screen.
   ───────────────────────────────────────────────────────────── */

/* ---- the board -------------------------------------------------
   72px cell, a solid rule across and a DASHED one down. The
   asymmetry is the whole character: it reads as ruled paper rather
   than as graph paper, because real ruled stock is printed in one
   direction and scored in the other.

   An SVG tile rather than two gradients, because a CSS gradient can
   only draw a solid line and the vertical has to dash.

   The stroke colour is --color-line-soft's literal value. The tile is
   loaded as an image resource, OUTSIDE the page's cascade, so a var()
   inside it does not resolve. If that token is ever re-tuned, this
   needs the same edit — there is no way to make it follow. */
.og-board {
  --og-cell: 72px;
  background-color: var(--color-off-white-90);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cline x1='0' y1='0.5' x2='72' y2='0.5' stroke='rgba(89,83,78,0.09)' stroke-width='1'/%3E%3Cline x1='0.5' y1='0' x2='0.5' y2='72' stroke='rgba(89,83,78,0.09)' stroke-width='1' stroke-dasharray='3 4'/%3E%3C/svg%3E");
  background-size: var(--og-cell) var(--og-cell);
}

/* The board tinted, which is what /about's masthead band uses. The sage
   is held well back into the deeper paper so the band reads as a
   different STOCK rather than as a different colour — the moment you
   can name the hue, it has gone too far. */
.og-board--sage {
  background-color: color-mix(
    in srgb,
    var(--color-iris-mineral) 16%,
    var(--color-off-white-90)
  );
}
.og-board--night {
  background-color: var(--color-navy-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cline x1='0' y1='0.5' x2='72' y2='0.5' stroke='rgba(248,242,237,0.08)' stroke-width='1'/%3E%3Cline x1='0.5' y1='0' x2='0.5' y2='72' stroke='rgba(248,242,237,0.08)' stroke-width='1' stroke-dasharray='3 4'/%3E%3C/svg%3E");
}

/* ---- the screen ------------------------------------------------
   The riso dot screen as a flat field. Two radial-gradient layers
   offset by half a cell, which is what makes it a proper staggered
   screen instead of a square grid of dots.

   38deg is the site's own screen angle (HALFTONE_DEFAULTS.angle), and
   it is not arbitrary: a screen laid on the horizontal or at 45deg
   beats against the pixel grid and moirés. Keep it.

   --og-dot is the cell pitch, --og-ink the ink. Both are meant to be
   overridden inline for a particular plate. */
.og-screen {
  --og-dot: 6px;
  --og-ink: var(--ink-cornflower);
  --og-weight: 1.6px;
  background-color: var(--color-off-white-90);
  background-image:
    radial-gradient(circle at 25% 25%, var(--og-ink) var(--og-weight), transparent calc(var(--og-weight) + 0.5px)),
    radial-gradient(circle at 75% 75%, var(--og-ink) var(--og-weight), transparent calc(var(--og-weight) + 0.5px));
  background-size: var(--og-dot) var(--og-dot);
  /* Rotating the BACKGROUND is not possible, so the element carries the
     angle and the content inside counter-rotates. For a plain decorative
     panel, use .og-screen--angled on a wrapper instead. */
}
.og-screen--plum { --og-ink: var(--ink-plum); }
.og-screen--ink { --og-ink: var(--color-line); }
.og-screen--coarse { --og-dot: 10px; --og-weight: 2.6px; }
.og-screen--fine { --og-dot: 4px; --og-weight: 1.1px; }

/* The angled screen. The wrapper clips, the layer inside is oversized
   and rotated to the screen angle, so the dots run at 38deg and no bare
   corner shows. Content goes in a sibling above it, not inside. */
.og-screen-plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.og-screen-plate > .og-screen {
  position: absolute;
  inset: -40%;
  z-index: 0;
  transform: rotate(38deg);
  pointer-events: none;
}
.og-screen-plate > :not(.og-screen) { position: relative; z-index: 1; }

/* ---- the field -------------------------------------------------
   Sparse, even dots on an unruled ground — the dotted map's texture.
   It reads as distance and geography rather than as print, which is
   why it is a separate thing from the screen: same shape, different
   argument. Lilac, at map density.

   For an actual map use public/assets/about/world-dots.svg, generated
   by tools/gen-dotted-map.mjs. This is the ground it sits on. */
.og-field {
  --og-gap: 9px;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-iris-lilac) 70%, transparent) 1.1px,
    transparent 1.2px
  );
  background-size: var(--og-gap) var(--og-gap);
}

/* ---- the grain -------------------------------------------------
   Paper grain, over anything. soft-light is what turns a near-white
   scan into texture: at normal blend it just washes the tint paler,
   where soft-light lets its darks and lights modulate what is already
   there instead of sitting on top of it.

   Self-contained (feTurbulence, not an image file) so it travels into
   a standalone report. The site's own version uses the supplied paper
   scan at /assets/about/paper_texture.webp, which is warmer; use that
   one wherever it is reachable. */
.og-grain {
  position: relative;
  isolation: isolate;
}
.og-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  /* Every one of these is decoration carrying no information, so under
     forced colours or a reduced-transparency preference they simply go.
     Nothing is lost but texture. */
  .og-board,
  .og-screen,
  .og-field {
    background-image: none;
  }
  .og-grain::after { display: none; }
}