/* ===========================================================================
   FERN — bones.you, holding-page edition

   Derived from the site's own stylesheet, lethe/assets/css/lethe.css. This is
   the subset a single-page holding site actually uses: the palette, the base
   typography, the link treatment, and the layout rules for one centred
   column. Everything to do with the atlas — card decks, node headers, tag
   filters, the metadata lattice — is left out, since none of it appears here.

   If FERN changes in lethe.css, the :root block below is the part to carry
   across; the rest is layout local to this page.

   A green/teal/beige/grey palette on an ink-black ground: muted sage and a
   brighter lifted green as the two accents, warm beige as the body text,
   grey as the quiet secondary, warm grey-beige as the muted tone.
   =========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:      #000000;   /* ink-black ground */
  --fg:      #ece2ce;   /* warm beige — body text */
  --accent:  #536255;   /* muted sage green — the one bold move */
  --accent2: #73a275;   /* brighter green, lifted for contrast on black */
  --ochre:   #555555;   /* grey — quiet secondary */
  --muted:   #9c8e76;   /* warm grey-beige */
  --rule:    #4c404b;
}

html { background: var(--bg); }

/* Single column, centred both ways. align-items:center does the vertical
   centring; on a screen too short for the content it would clip the top, so
   the narrow breakpoint below switches back to flex-start and lets it scroll. */
body {
  color: var(--fg);
  background: var(--bg);
  font-family: "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

main {
  width: 100%;
  max-width: 620px;
}

/* fluid images — the baseline rule everything else relies on */
img { max-width: 100%; height: auto; display: block; }

/* the mark, centred over the text block below it. Works off the global
   `img { display: block }` above — drop margin-inline to have it sit
   flush left with the text instead. */
.header-image {
  max-width: 300px;
  margin-inline: auto;
  margin-bottom: 30px;
}

/* ---- typography ---- */
h1 {
  font-family: Arial, sans-serif;
  font-size: 26px;
  line-height: 1.2;
  color: var(--accent2);
  text-wrap: balance;
  margin-bottom: 20px;
}

p { margin-bottom: 22px; }
p:last-of-type { margin-bottom: 0; }

.standfirst { color: var(--muted); }

/* ---- links: underlined in grey, inverting to sage on hover ---- */
a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ochre);
}
a:hover { background: var(--accent); color: var(--bg); text-decoration: none; }

::selection { background: var(--ochre); color: var(--bg); }

footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px dotted var(--rule);
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: var(--muted);
}

/* ---- narrow screens ---- */
@media (max-width: 520px) {
  body {
    font-size: 17px;
    padding: 32px 20px;
    align-items: flex-start;
  }
  h1 { font-size: 23px; }
  .header-image { max-width: 220px; margin-bottom: 24px; }
}