/* whoknowstomorrow.co.uk — modern replacement for the original inline
   <font>/table presentation. Preserves the look: brown text and links on the
   tiled background image, centred ~650px column. */

/* Self-hosted backup wordmark face (Comic Sans MS is preferred when present).
   Shantell Sans 600, subset to just the wordmark glyphs "Who Knows Tomorrow"
   (~3KB). The full latin woff2 is kept at /fonts/original/ for reference. SIL OFL. */
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/shantell-sans-600-wordmark--subset.woff2") format("woff2");
  unicode-range: U+0020, U+4B, U+54, U+57, U+68, U+6D, U+6E, U+6F, U+72, U+73, U+77;
}

:root {
  --wkt-brown: brown;
  --wkt-wordmark: #AD330C; /* the exact rust fill of the original title.gif */
  --wkt-column: 650px;
}

* { box-sizing: border-box; }

/* Always reserve the vertical scrollbar gutter so the viewport width is the
   same whether or not a page scrolls. Without this, a short page (no scrollbar)
   is ~15px wider than a tall one, shifting the centred masthead left/right as
   you navigate. scrollbar-gutter handles modern browsers; the overflow-y
   fallback covers older ones. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  padding: 1rem;
  background-image: url("/images/background.jpg");
  color: var(--wkt-brown);
  font-family: 'Times New Roman', Times, serif;
  line-height: 1.5;
}

a { color: var(--wkt-brown); }
a:visited { color: var(--wkt-brown); }

.masthead { text-align: center; }
.masthead__title {
  margin: 0.5rem 0 1rem;
  font-family: "Comic Sans MS", "Shantell Sans", cursive;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--wkt-wordmark);
}

.site-nav {
  max-width: var(--wkt-column);
  margin: 0 auto 1.75rem;
  text-align: center;
}
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
.site-nav .sep { margin: 0 0.75rem; }

.wrapper {
  max-width: var(--wkt-column);
  margin: 0 auto;
}

/* Bio: reproduces the original 650px table split into a 2×2 block over three
   underlying columns (132 | 225 | 293). The image "quarters" (columns 1 and 3)
   are narrower than the diagonal text "quarters" that span two columns each:
   row 1 = k_1 portrait (col 1) + intro text (cols 2–3);
   row 2 = more text (cols 1–2) + p_1 portrait (col 3). */
.bio {
  display: grid;
  grid-template-columns: 132px 225px 293px;
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: 1rem;
  align-items: start;
}
.bio img { max-width: 100%; height: auto; }
.bio__portrait-lead { grid-column: 1; grid-row: 1; }
.bio__intro { grid-column: 2 / 4; grid-row: 1; padding-left: 1rem; }
.bio__more { grid-column: 1 / 3; grid-row: 2; padding-right: 1rem; }
.bio__portrait-trail { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; }
.bio__intro > *, .bio__more > * { margin: 0 0 1rem; }
.bio__intro > :last-child, .bio__more > :last-child { margin-bottom: 0; }

.credits {
  max-width: var(--wkt-column);
  margin: 1.5rem auto 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* Photos grid. */
.photo-grid {
  max-width: var(--wkt-column);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  justify-items: center;
}
.photo-grid img { width: 100%; height: auto; max-width: 300px; }

/* Odd final photo (7 images in 2 columns): span both columns and centre it. */
.photo-grid img:last-child { grid-column: 1 / -1; justify-self: center; }

@media (max-width: 560px) {
  .bio {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .bio__portrait-lead, .bio__intro, .bio__more, .bio__portrait-trail {
    grid-column: 1;
    grid-row: auto;
  }
  .bio__intro { padding-left: 0; }
  .bio__more { padding-right: 0; }
  .bio__portrait-lead, .bio__portrait-trail { justify-self: center; }
  .credits { flex-direction: column; text-align: center; }
  .photo-grid { grid-template-columns: 1fr; }
}