/* ============================================================
   DICE GOBLINZ — Big Boss's Orderz, print
   One landscape US Letter sheet. Lines come from ink.css;
   there are no CSS borders anywhere below.
   ============================================================ */

:root {
  --paper: #fff;
  --ink: #1d1b16;
  /* Contrast against white paper: ink 18.2:1, blood 9.8:1. */
  --blood: #7d2418;

  /* Backgrounds are greyscale: this sheet is made to be printed. */
  --wash: rgba(0, 0, 0, 0.045);
  --wash-strong: rgba(0, 0, 0, 0.075);

  --font-head: "Rock Salt";
  --font-body: "Fuzzy Bubbles";
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
}

svg.defs { position: absolute; width: 0; height: 0; }

/* ---------- the sheet ---------- */
.sheet {
  position: relative;
  width: 11in;
  height: 8.5in;
  overflow: hidden;
  /* Set so the white between the ink and the paper edge is 0.15in on all
     four sides, measured to the lines the eye reads as the edge: the
     wordmark's tops, the header rule, the table boxes and the closing box.
     Top is larger because the wordmark's letters rise well above their
     line box. */
  padding: 0.337in 0.144in 0.164in 0.165in;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body), "Comic Sans MS", cursive;
}
.paper-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #fff;
  filter: url(#grain);
  opacity: 0.11;
  mix-blend-mode: multiply;
}

/* ---------- masthead ---------- */
/* Wordmark over the set-up text on the left, key art standing on the
   header rule on the right. The art's width sets its height; it's picked
   so the art's top meets the top margin while the art is exactly as tall
   as the wordmark and set-up text beside it. */
.masthead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.3in;
  column-gap: 0.2in;
  padding-bottom: 0.08in;
  margin-bottom: 0.11in;
}
.art {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  display: block;
  width: 100%;
  height: auto;
  /* Standing on the rule, so the painted ground under the goblinz is
     trimmed off. */
  aspect-ratio: 1318 / 635;
  object-fit: cover;
  object-position: top;
  /* Up into the sheet's top padding to the margin, down onto the rule. */
  margin: -0.187in 0 -0.08in;
  mix-blend-mode: multiply;
}
/* The set-up text in two columns under the wordmark: flavor | who can
   play, with the d8 line under it. The flavor column is a touch narrower
   so its lines run out to the gap, which then matches the rules'. */
.intro {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  column-gap: 0.12in;
  /* Rock Salt's tails hang well below the line box; this clears them. */
  margin-top: 0.2in;
}
/* The rule's ink starts a hair inside its box; reach it out to the margin. */
.masthead::after { left: -0.02in; }
.wordmark {
  margin: 0;
  font-family: var(--font-head), cursive;
  font-size: 34pt;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  /* Rock Salt runs its letters together — without this, GOBLINZ reads
     as GOBUNZ. */
  letter-spacing: 0.055em;
  /* The D's stroke reaches left of the text box; pull it back to the margin. */
  margin-left: 0.039in;
  transform: rotate(-1.1deg);
  transform-origin: left bottom;
}
.flavor {
  margin: 0;
  font-size: 8.6pt;
  font-style: italic;
  line-height: 1.26;
}
.needs {
  margin: 0 0 0.05in;
  font-size: 8.2pt;
  line-height: 1.26;
  transform: rotate(-0.35deg);
}
.rollup {
  margin: 0;
  font-size: 8.9pt;
  font-weight: 700;
  transform: rotate(-0.6deg);
  transform-origin: left;
}
.die { color: var(--blood); font-weight: 700; }

/* ---------- body: reference rail | procedure ---------- */
.body {
  display: grid;
  /* Wider than the rules need, so the tables are short enough to fit
     under the taller masthead. */
  grid-template-columns: 5in 1fr;
  /* Row 2 is the flexible one, so row 1 ends where the tables end and the
     licence line sits right under them while the rules run on beside it. */
  grid-template-rows: auto 1fr;
  gap: 0.08in 0.24in;
  flex: 1;
  min-height: 0;
}
.rail { min-width: 0; grid-column: 1; grid-row: 1; }
.legal { grid-column: 1; grid-row: 2; align-self: end; }
.proc { min-width: 0; grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }

.zone {
  position: relative;
  font-family: var(--font-head), cursive;
  margin: 0 0 0.05in;
  padding-bottom: 0.07in;
  font-size: 11pt;
  font-weight: 400;
  line-height: 1.1;
  transform: rotate(-0.25deg);
}

/* ---------- tables ---------- */
.tbl-wrap { position: relative; }
.rail .tbl-wrap { margin-bottom: 0.08in; }
/* Breathing room between the two tables. */
.rail .tbl-wrap + .zone { margin-top: 0.17in; }

/* Both tables share one grid: the roll columns line up, Goblin + Dice
   is exactly as wide as Item, so Ability and Effect match too. */
.tbl {
  --w-roll: 0.36in;
  --w-name: 0.82in;
  --w-dice: 0.5in;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 7.5pt;
  line-height: 1.17;
}
.tbl th {
  text-align: left;
  font-size: 6.9pt;
  font-weight: 700;
  padding: 0.05in 0.055in 0.075in;

  &.c-roll, &.c-dice {
    text-align: center;
  }
}
.tbl td {
  padding: 0.034in 0.055in;
  vertical-align: top;
}
.tbl tbody tr:nth-child(odd) { background-color: var(--wash); }

.c-roll { width: var(--w-roll); text-align: center; white-space: nowrap; font-size: 8.5pt; font-weight: 700; color: var(--blood); }
.c-name { width: var(--w-name); font-weight: 700; }
.c-dice { width: var(--w-dice); text-align: center; font-weight: 700; }
.c-item { width: calc(var(--w-name) + var(--w-dice)); }
.nowt td { font-style: italic; }

/* ---------- procedure prose ---------- */
.steps { column-count: 2; column-gap: 0.2in; }
.steps p { margin: 0 0 0.055in; font-size: 8.1pt; line-height: 1.32; }
.lede { break-inside: avoid; }

.numbered {
  margin: 0 0 0.06in;
  padding-left: 0.17in;
  font-size: 8.1pt;
  line-height: 1.32;
}
.numbered li { margin-bottom: 0.025in; }
.numbered li::marker { color: var(--blood); font-weight: 700; }

/* The closing line sits where the rules end, knocked off square. */
.win {
  position: relative;
  font-family: var(--font-head), cursive;
  /* Pinned to the foot of the column so it sits on the bottom margin. Held
     in on the right because the tilt swings its corner past the margin. */
  margin: auto 0.027in 0 0;
  padding: 0.09in 0.11in;
  font-size: 9.2pt;
  font-weight: 400;
  line-height: 1.4;
  background-color: var(--wash-strong);
  transform: rotate(-1.2deg);
  transform-origin: left center;
}
.win b { color: var(--blood); }

/* ---------- licence ---------- */
.legal p { margin: 0; font-size: 6.8pt; line-height: 1.3; }
.legal a { color: inherit; text-decoration: none; }
/* Paper can't be clicked, and the licence needs its address shown. */
.legal a::after { content: " (" attr(href) ")"; }

/* ---------- print ---------- */
@page { size: letter landscape; margin: 0; }

* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}