/* =========================================================================
   barriergames.com — the Field guide look.

   The five pages of the guide site (docs/BARRIERGAMES-SITE.md), built to
   the "Field guide" board the owner chose on the design canvas. Natteroo's own
   Soft pastel language — mint ground, white cards, soft shadows, radius
   22, coral for the one action, no dark outline anywhere — with one thing
   of its own: a coral header band across the top, which the app never has.

   THE TOKENS BELOW ARE A HAND-KEPT COPY of public/css/app.css's :root.
   This site is a second Worker with its own asset root (public/bg/), so it
   cannot link the app's stylesheet — the same arrangement as
   drawing-sets.js and its browser twin, and for the same reason. Change a
   value in app.css and change it here in the same edit;
   test/bg-site.test.js fails if the two drift.
   ========================================================================= */

:root {
  --paper: #e9f6ef;
  --card: #ffffff;
  --line: #d5ecfb;
  --ink: #2a3a34;
  --ink-soft: #5f7069;
  --brand: #f08a7e;
  --brand-dark: #d9736a;
  --brand-tint: #fdece9;
  --sky: #d5ecfb;
  --sky-strong: #7fc8f8;
  --butter: #f2c94c;
  --peach: #ffe7b8;

  --r-lg: 22px;
  --shadow-md: 0 8px 18px rgba(42, 58, 52, 0.08);
  --shadow-lg: 0 12px 28px rgba(42, 58, 52, 0.10);

  --font: 'Lexend', ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;
  --font-display: 'Quicksand', var(--font);

  /* The page's own side gutter: the canvas's 96px, down to 20px on a phone. */
  --gutter: clamp(20px, 7.5vw, 96px);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

a { color: var(--ink); }
a:hover { color: var(--brand); }

/* ----------------------------------------------------------- the header */

/* A coral band with the site's name on the left as two lines and four
   links on the right, the last one a white pill. */
.bg-header {
  background: var(--brand);
  padding: 18px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.bg-brand { text-decoration: none; display: block; }
.bg-brand-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  color: #fff;
}
.bg-brand-by {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  color: #fff;
  opacity: 0.92;
}
.bg-brand:hover .bg-brand-name, .bg-brand:hover .bg-brand-by { color: #fff; }

/* The Natteroo wordmark in the header, as the logo rather than as text
   (the owner, 23 Sep 2026: "the Natteroo wordmark as the coloured logo … use
   the SVG at public/images/brand/wordmark.svg, not the word set in plain
   text"). Its three colours are coral, butter and sky, and the band it
   sits on is coral — so it rides on a small white pill, which is what
   makes the coloured mark readable there. The file is the app's own
   wordmark, copied into this site's asset root (scripts do not reach
   across the two Workers' folders). */
.bg-brand-mark {
  display: inline-block;
  /* This sheet sets box-sizing: border-box on everything, so the padding
     comes OUT of the height — 18 less 2×3.5 leaves an 11px wordmark: about
     two thirds of the 16px it was, and the x-height of the 13px "A guide
     by" beside it, so the two read as one line (the owner, 23 Sep 2026: it
     "shouts"). The pill is kept, smaller and a touch translucent — it is
     what lets the three colours read on the coral band — and the mark
     sits on the text's baseline rather than hanging below it. */
  height: 18px;
  width: auto;
  vertical-align: -4px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  padding: 3.5px 7px;
  margin-left: 2px;
}

/* The wordmark as text, still used in the footer. White-on-coral where it
   sits on the band: the three colours are unreadable there. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.wordmark > span:nth-child(1) { color: var(--brand); }
.wordmark > span:nth-child(2) { color: var(--butter); }
.wordmark > span:nth-child(3) { color: var(--sky-strong); }
.wordmark.is-on-coral > span { color: #fff; }

.bg-nav { display: flex; align-items: center; gap: 26px; font-size: 15px; flex-wrap: wrap; }
.bg-nav a { color: #fff; text-decoration: none; }
.bg-nav a:hover { text-decoration: underline; }
.bg-nav a[aria-current='page'] { text-decoration: underline; }
.bg-nav .bg-nav-pill {
  color: var(--brand);
  background: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-display);
  text-decoration: none;
}
.bg-nav .bg-nav-pill:hover { text-decoration: none; color: var(--brand-dark); }

/* ------------------------------------------------------------- the page */

.bg-main { flex: 1 0 auto; }

/* The two-column top: title and first paragraph beside the picture. */
.bg-top {
  padding: 56px var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: center;
}
.bg-top-copy { display: flex; flex-direction: column; gap: 20px; }
h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.05;
}
.bg-lede { margin: 0; font-size: 19px; line-height: 1.6; }

/* The article column — the inner pages' text, and the second paragraph
   of the front page. */
.bg-article { padding: 40px var(--gutter) 0; }
.bg-article p, .bg-article li { font-size: 19px; line-height: 1.6; max-width: 820px; }
.bg-article p { margin: 0 0 20px; }
.bg-article p:last-child { margin-bottom: 0; }
.bg-article b, .bg-article strong { font-weight: 600; }
.bg-article ol { margin: 0 0 20px; padding-left: 24px; max-width: 820px; }
.bg-article ol li { margin-bottom: 14px; }
.bg-article ul { margin: 0 0 20px; padding-left: 24px; }

/* A picture, or the mint card that stands in until one exists. Everything
   drawn for this site is made separately (the two children at the table,
   the sentence frame on a whiteboard, Squarez on a class screen); until a
   file lands, the card says what the picture will show, and the moment it
   does the <img> simply appears — nothing here has to be edited. */
.bg-figure {
  margin: 0;
  width: 100%;
  min-height: 340px;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
}
.bg-figure img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); }
.bg-figure-note { display: none; }
.bg-figure.is-missing {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line);
  padding: 28px;
  text-align: center;
}
.bg-figure.is-missing img { display: none; }
.bg-figure.is-missing .bg-figure-note { display: block; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }

/* --------------------------------------------------------------- cards */

.bg-cards {
  padding: 40px var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.bg-card {
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
a.bg-card:hover { color: var(--ink); box-shadow: 0 16px 34px rgba(42, 58, 52, 0.14); }
.bg-chip { width: 44px; height: 44px; border-radius: 14px; }
.bg-chip.is-butter { background: var(--peach); }
.bg-chip.is-sky { background: var(--sky); }
.bg-chip.is-coral { background: var(--brand-tint); }
.bg-card-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.bg-card-line { color: var(--ink-soft); font-size: 16px; line-height: 1.5; }

/* A full-width card, text on the left and a coral button on the right,
   vertically centred with each other — v4.211.0's "How to run one" foot
   card (the owner: a sentence, then "Free printables" beside it) reuses the
   exact shape "Play them live with your class" used to be. */
.bg-cta {
  margin: 44px var(--gutter) 0;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.bg-cta-copy { flex-grow: 1; }
.bg-cta-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; }
.bg-cta-line { color: var(--ink-soft); font-size: 17px; margin-top: 6px; }
/* The How page's foot card (v4.211.0): one plain sentence, no title. */
.bg-foot-cta .bg-cta-copy { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.bg-btn {
  text-decoration: none;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 19px;
  padding: 16px 30px;
  border-radius: 999px;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(240, 138, 126, 0.35);
}
.bg-btn:hover { background: var(--brand-dark); color: #fff; }

/* ---------------------------------------------------------- printables */

/* One card per printable: a thumbnail, the target language, a Download
   button. Until the three PDFs are made, the page says so instead. */
.bg-printables { padding: 40px var(--gutter) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bg-printable-thumb {
  aspect-ratio: 210 / 297;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-size: 14px; text-align: center; padding: 16px;
}
.bg-soon {
  margin: 40px var(--gutter) 0;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
}
.bg-soon span { display: block; font-family: var(--font); font-weight: 400; font-size: 17px; color: var(--ink-soft); margin-top: 6px; }

/* -------------------------------------------------------- interest box */

.bg-interest {
  margin: 28px var(--gutter) 0;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 40px;
}
.bg-interest-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; }
.bg-interest-line { color: var(--ink-soft); font-size: 17px; margin-top: 6px; }
.bg-interest form { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.bg-interest input[type='email'] {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--font);
  font-size: 17px;
  padding: 15px 18px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.bg-interest input[type='email']:focus { outline: none; border-color: var(--sky-strong); }
.bg-interest-note { color: var(--ink-soft); font-size: 15px; margin-top: 12px; }
.bg-interest-said { font-size: 17px; margin-top: 14px; font-weight: 600; }
/* v4.211.0: the "coming soon" box on index/why/play (in place of the old
   "Play them live with your class" CTA, which was not true until launch).
   Same .bg-interest card; the wordmark sits above the words as a logo,
   not a heading, so it is sized rather than set in the display font. */
.bg-coming-soon-mark { display: block; height: 36px; width: auto; margin-bottom: 10px; }
.bg-coming-soon .bg-interest-line { margin-top: 0; font-size: 18px; }
.bg-interest-said.is-bad { color: var(--brand-dark); }

/* ------------------------------------------ leaving the site, honestly */

/* Every link that leaves barriergames.com says where it goes — the host,
   under the words, in the quiet colour. The owner's rule for this site: a
   teacher should never click something and find themselves somewhere else
   without having been told. */
/* inline-block, not the inline it inherits: the host line under the words
   is a BLOCK, and an inline <a> wrapping a block draws as a burst pill
   with its text hanging out of it. */
.bg-btn { display: inline-block; text-align: center; }
.bg-btn-host {
  display: block;
  font-family: var(--font);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  margin-top: 3px;
  opacity: 0.85;
}
.bg-offsite { color: var(--ink-soft); font-size: 15px; }

/* ------------------------------------------ words beside their pictures */

/* Why they work and How to run one (v4.212.0). Each page's words sit in
   the left column and its pictures in the right, and the two columns END
   TOGETHER — the owner, 24 Sep 2026, twice: a picture column that ran on past
   the words (Why) or a short paragraph beside a tall photo (How) left a
   dead band of empty page, and "this all needs to look more professional
   than this". Floats (v4.210.0) and a cleared closing line (v4.211.0) did
   not hold, because the words and the pictures were each deciding their
   own height.

   So only the WORDS decide the height. The picture column contributes
   nothing to the row (every image is absolutely placed inside a frame
   whose flex-basis is 0), the grid stretches it to the words' height, and
   each picture fills its share with object-fit: cover. The column widths
   below are chosen so that the crop is small at 1280, 1440 and 1920 (it
   is measured: test/e2e-bg.mjs), but the ends meet at every width. */
.bg-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--split-pics);
  gap: 48px;
  align-items: stretch;
}
.bg-split-copy { min-width: 0; }
.bg-split-copy > :last-child { margin-bottom: 0; }
/* The words fill their column: the 820px reading measure is for a page
   with nothing beside it. */
.bg-split p, .bg-split li, .bg-split ol { max-width: none; }
.bg-split .bg-lede { margin-bottom: 16px; }

/* Why: the h1 stands above the block, the lede opens the left column.
   The words grow a little with the screen (19px at 1280, 22px at 1920):
   a wide screen makes the words short and the pictures tall, and at a
   fixed 19px the two screenshots were cropped by nearly half. With the
   words growing and the picture column held at 460px, the crop stays
   within about a fifth at 1280, 1440 and 1920 (measured in the e2e). */
.bg-split.is-why { padding-top: 24px; --split-pics: 460px; }
.bg-split.is-why p { margin-bottom: 12px; font-size: clamp(19px, 0.5vw + 12.8px, 22px); }
.bg-split.is-why .bg-closing { margin: 0; }
.bg-split-pics { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.bg-shot { margin: 0; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
/* A 2px sky edge on a white ground (the owner, 23 Sep 2026): the screenshots
   are mint pages on a mint page, and without a line nobody could tell
   where the picture ended and the site began. */
.bg-shot-frame {
  position: relative;
  flex: 1 1 0;
  min-height: 140px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.bg-shot-frame img {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.bg-shot figcaption { color: var(--ink-soft); font-size: 14px; margin-top: 8px; }

/* How (v4.212.0) is not two columns at all: the set-up picture floats in
   the top right corner of ONE column of words, so the title, the opening
   paragraph and the first steps run up beside it and the rest carry on
   underneath — the owner's own "let the numbered steps flow up into the space
   beside it". A float cannot end short of its words: the words always
   fill the side of it. Its width keeps the words beside it no wider than
   the 820px reading measure, so there is never a strip of empty page
   between the words and the picture on a wide screen either. */
.bg-article.is-how { padding-top: 56px; display: flow-root; }
.bg-article.is-how h1 { margin-bottom: 20px; }
.bg-article.is-how .bg-lede { margin-bottom: 24px; max-width: 820px; }
.bg-float-photo {
  float: right;
  width: max(44%, calc(100% - 856px));
  min-height: 0;
  margin: 0 0 20px 36px;
}

/* -------------------------------------------------------- the free game */

/* Printables (23 Sep 2026): two cards side by side, equal width — the free
   Squarez printable with a picture of its real pages, and the email box —
   stacking on a phone. */
.bg-printables-pair {
  margin: 40px var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
.bg-offer {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 36px;
  display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
}
.bg-offer-photo { margin: 0; width: 100%; }
.bg-offer-photo img { width: 100%; height: auto; display: block; border-radius: 14px; }
.bg-offer-line { color: var(--ink-soft); font-size: 17px; line-height: 1.55; }
.bg-printables-pair .bg-interest { margin: 0; display: flex; flex-direction: column; }
/* The button is centred in its card (the owner, 23 Sep 2026) — the card is a
   left-aligned column for its words, so the one action says so itself. */
.bg-offer > .bg-btn { align-self: center; }
/* The right-hand card's picture sits over its title as the left card's
   does over its words: the figure is the same class, this is only the gap. */
.bg-printables-pair .bg-interest .bg-offer-photo { margin-bottom: 18px; }

/* The How page's foot card is now .bg-cta.bg-foot-cta, above — a sentence
   left, a "Free printables" button right, no link off the site at all
   (the owner's own call for that page). */

/* The line that closes Why they work, which the owner asked to be set in bold
   italics — the one piece of emphasis on the page. */
.bg-closing { font-weight: 600; font-style: italic; }

/* -------------------------------------------------------------- footer */

.bg-footer { margin: auto var(--gutter) 40px; padding-top: 48px; }
/* One sentence with the wordmark set into it — NOT a flex row: a gap
   between flex items put a space in front of the comma. */
.bg-footer-line { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.bg-footer .wordmark { font-size: 22px; letter-spacing: -0.5px; vertical-align: -3px; }

/* ---------------------------------------------------------------- small */

@media (max-width: 860px) {
  .bg-top { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 36px; }
  .bg-cards, .bg-printables { grid-template-columns: minmax(0, 1fr); }
  .bg-cta { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px; }
  .bg-interest, .bg-soon { padding: 28px; }
  .bg-figure { min-height: 220px; }
  .bg-lede, .bg-article p, .bg-article li { font-size: 18px; }
  /* A phone stacks the block: the words, then the pictures at their own
     shape — nothing is stretched to a height any more. How keeps its photo
     under the opening paragraph, before the steps; Why keeps its closing
     line last, under the pictures. */
  .bg-split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bg-article.is-how { padding-top: 36px; display: flex; flex-direction: column; }
  .bg-float-photo { float: none; width: auto; margin: 0 0 24px; order: 1; }
  .bg-article.is-how > h1, .bg-article.is-how > .bg-lede { order: 0; }
  .bg-article.is-how > :not(h1):not(.bg-lede):not(.bg-float-photo) { order: 2; }
  .bg-split-copy { display: contents; }
  .bg-split.is-why .bg-split-pics { order: 1; }
  .bg-split.is-why .bg-closing { order: 2; }
  .bg-split > *, .bg-split-copy > * { margin: 0; }
  .bg-shot, .bg-shot-frame { flex: none; }
  .bg-shot-frame { padding: 6px; }
  .bg-shot-frame img { position: static; width: 100%; height: auto; }
  .bg-brand-mark { height: 17px; padding: 3px 7px; vertical-align: -4px; }
  .bg-printables-pair { grid-template-columns: minmax(0, 1fr); }
  .bg-offer, .bg-printables-pair .bg-interest { padding: 24px; }
}

/* An inner page's top: the same block as the front page's, one column,
   because only the front page has a picture beside its title. */
.bg-top.is-single { grid-template-columns: minmax(0, 1fr); }