/* www.winsth.com
   Layout: the family name in front of a faint family tree chart, related sites below.
   On a computer screen everything fits in one window: the tree takes the height that is left over.
   Manrope is served from /fonts (SIL Open Font License, see OFL-Manrope.txt there). It is a variable font:
   one file has every weight from 300 to 700. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
}

/* Light theme first, dark when the device setting is dark. There is no theme button.
   --paper must stay the same as the theme-color meta tags in the HTML (phone top bar),
   and --paper-clear is the same colour fully transparent (for the glow behind the name). */
:root {
  --paper: #f6f3ee;
  --paper-clear: rgba(246, 243, 238, 0);
  --card: #fbfaf7;
  --ink: #2a2622;
  --muted: #6f675e;
  --rule: #e2dbd0;
  --accent: #4f6b4a;
  --tree: #ddd4c6;
  --tree-box: #f9f7f3;
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171512;
    --paper-clear: rgba(23, 21, 18, 0);
    --card: #1e1b17;
    --ink: #ebe6de;
    --muted: #a39b90;
    --rule: #332e27;
    --accent: #9cbf93;
    --tree: #36302a;
    --tree-box: #1b1915;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  min-height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  /* Hero takes what is left of the window after the related sites and the footer. */
  display: flex;
  flex-direction: column;
}
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.hero {
  position: relative;
  flex: 1 0 auto;
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow: hidden;
}
/* The svg keeps its proportions inside this box (preserveAspectRatio default), so it is as large as the space allows. */
.tree {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1100px;
  height: calc(100% - 48px);
}
.tree .lines { fill: none; stroke: var(--tree); stroke-width: 2.5; }
.tree .people rect { fill: var(--tree-box); stroke: var(--tree); stroke-width: 2.5; }

/* A soft glow in the page colour behind the name, so the chart lines do not run through the letters. */
.intro {
  position: relative;
  text-align: center;
  padding: 28px 64px;
  background: radial-gradient(closest-side, var(--paper) 55%, var(--paper-clear));
}
h1 {
  font-weight: 300;
  font-size: clamp(3.2rem, 10vw, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}

.related { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 16px 8px; }
.related h2 {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: center;
}
.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.related a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
}
.related a:hover { border-color: var(--accent); }
.related strong { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; }
.related span { color: var(--muted); font-size: 0.92rem; line-height: 1.4; }
.related small { margin-top: 4px; color: var(--accent); font-size: 0.85rem; }

footer { padding: 12px 16px 20px; text-align: center; font-size: 0.85rem; color: var(--muted); }

/* 404 page: only the hero, so it fills the window also on a phone. */
.hero.hero-404 { min-height: 100vh; }
.intro p { margin: 14px 0 0; color: var(--muted); font-size: 1.05rem; }
.intro a { color: var(--accent); text-underline-offset: 3px; }

/* Phone: the chart is wide and low, so the hero is only as tall as the chart instead of filling the window.
   The page scrolls. */
@media (max-width: 600px) {
  body { display: block; }
  .hero { min-height: 300px; }
  .intro { padding: 20px 32px; }
}