/* Supply Lines — its own look, deliberately not the shared house style.
   A player arriving from the store should recognise the game: aged paper, navy
   ink, a red that only ever means the opponent, and borders that look drawn
   rather than computed.

   Self-contained on purpose. These pages do NOT load ../style.css, so a future
   game re-theming the shared sheet cannot change a live legal document. */

:root {
  /* The game is paper in every light -- there is no night mode in Supply
     Lines, so there is none here. Declaring the scheme stops the browser
     rendering dark scrollbars and form chrome around a beige page. */
  color-scheme: light;

  --paper:      #e3d7bf;
  --paper-lit:  #ede1ca;
  --paper-deep: #d8cbb0;
  --ink:        #22304a;
  --ink-soft:   #726c65;
  --rule:       #bfb49f;
  --neutral:    #80796d;
  --enemy:      #a6382c;

  /* Hand-drawn marks, inlined as SVG so there is nothing external to fetch and
     nothing to break in five years. Stroke colour is baked in, so the dark
     block below redefines them rather than recolouring. */
  --squiggle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='7' viewBox='0 0 64 7'><path d='M1 4 Q 9 1.3 17 4 T 33 4 T 49 4 T 63 3.4' fill='none' stroke='%2322304a' stroke-width='1.5' stroke-linecap='round'/></svg>");
  --squiggle-red: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='7' viewBox='0 0 64 7'><path d='M1 4 Q 9 1.3 17 4 T 33 4 T 49 4 T 63 3.4' fill='none' stroke='%23a6382c' stroke-width='1.5' stroke-linecap='round'/></svg>");
  --node: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><path d='M7.5 1.3 L11.4 3.1 L13.1 7.3 L11.1 11.4 L7.1 12.9 L3 11 L1.6 6.9 L3.3 2.9 Z' fill='none' stroke='%2322304a' stroke-width='1.35' stroke-linejoin='round'/></svg>");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1.1rem 4rem;
  color: var(--ink);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  font-size: 1.06rem;
  line-height: 1.68;

  /* Mottled paper. Layered soft radials rather than an image file — the page
     has to keep working with no network and no assets. */
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(ellipse at 82% 28%, rgba(160,142,104,.16) 0%, rgba(160,142,104,0) 40%),
    radial-gradient(ellipse at 35% 78%, rgba(160,142,104,.14) 0%, rgba(160,142,104,0) 38%),
    radial-gradient(ellipse at 92% 88%, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 42%);
  background-attachment: fixed;
}

main { max-width: 41rem; margin: 0 auto; }

/* The card. Two offset irregular radii give the double-stroke look of a
   rectangle drawn by hand and gone over twice — the PaperCard in the game. */
.sheet {
  position: relative;
  background: var(--paper-lit);
  border: 1.6px solid var(--ink);
  border-radius: 14px 30px 16px 26px / 28px 14px 26px 16px;
  padding: 2.4rem 1.9rem 2rem;
}

.sheet::before {
  content: "";
  position: absolute;
  inset: 4px 5px 5px 4px;
  border: 1px solid var(--ink);
  border-radius: 26px 15px 30px 14px / 15px 28px 14px 30px;
  opacity: .3;
  pointer-events: none;
}

h1 {
  font-size: 2.15rem;
  line-height: 1.12;
  letter-spacing: .055em;
  text-transform: uppercase;
  margin: 0 0 .5rem;
  padding-bottom: .55rem;
  background: var(--squiggle) bottom left repeat-x;
}

h2 {
  font-size: .82rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .19em;
  color: var(--ink-soft);
  margin: 2.5rem 0 .7rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--rule);
}

p { margin: 0 0 1rem; }

.sub {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 1.08rem;
  margin: 0 0 2rem;
}

.lede { font-size: 1.12rem; }

/* Node-shaped bullets, the game's own motif. */
ul { list-style: none; padding-left: 1.75rem; }

li {
  margin-bottom: .5rem;
  position: relative;
}

li::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: .42em;
  width: 15px;
  height: 15px;
  background: var(--node) no-repeat center / contain;
}

a {
  color: var(--enemy);
  text-decoration: none;
  padding-bottom: .18rem;
  background: var(--squiggle-red) bottom left repeat-x;
}

a:hover { color: var(--ink); background-image: var(--squiggle); }

.back {
  display: inline-block;
  margin-bottom: 1.6rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-soft);
  background: none;
}

.back:hover { color: var(--ink); background: none; }

.updated {
  color: var(--ink-soft);
  font-size: .88rem;
  font-style: italic;
  margin-top: 2.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

strong { font-weight: bold; }

/* Masthead — the app icon doing the job it already does on a home screen.
   It is the game's own node motif, so it belongs next to the title rather than
   as a logo bolted on top. */
.masthead {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-bottom: .35rem;
}

.mark {
  width: 68px;
  height: 68px;
  flex: none;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(34,48,74,.18);
}

.masthead h1 { margin: 0; }
.masthead .sub { margin: .2rem 0 0; }

@media (max-width: 34rem) {
  body { padding: 1.25rem .7rem 3rem; }
  .sheet { padding: 1.8rem 1.15rem 1.5rem; }
  h1 { font-size: 1.6rem; }
  .masthead { gap: .8rem; }
  .mark { width: 52px; height: 52px; }
}