* { box-sizing: border-box; }

html { background: var(--ground); color: var(--text); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;   /* the whole composition fits one screen; spare height goes to the sky */
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.55;
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Sky ---------- */
.sky {
  flex: 1 0 auto;
  min-height: 45svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--sky);   /* the horizon is just where sky meets ground: no line */
}

.masthead { width: 100%; max-width: 1600px; margin: 0 auto; padding: var(--space-8) var(--space-12); }
.wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--text-xl); font-weight: 500; letter-spacing: var(--tracking-wordmark);
  color: var(--text); text-decoration: none;
}

.field-wrap { position: relative; width: 100%; max-width: 1600px; margin: 0 auto; padding-inline: var(--space-12); }   /* trees share the text gutter */
.field { display: block; width: 100%; height: auto; overflow: visible; }
.field--narrow { display: none; }

/* Trees */
.branches { fill: none; stroke: var(--tree); stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; transition: stroke 300ms ease; }
.leaves { fill: var(--tree); transition: fill 300ms ease; }
.seedling .branches { stroke: var(--seed); }
.seedling .leaves { fill: var(--seed); }

.tree { cursor: default; }
.tree[role="button"] { cursor: pointer; }   /* the theme switch (rightmost tree) */
.tree:focus, .tree:focus-visible { outline: none; }
.tree .hit { fill: transparent; pointer-events: all; }
.tree:hover .branches, .tree:focus-visible .branches, .tree.is-active .branches { stroke: var(--accent); }
.tree:hover .leaves, .tree:focus-visible .leaves, .tree.is-active .leaves { fill: var(--accent); }
.tree:focus-visible .hit { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }

/* Motion: each tree grows once, trunk first, branch by branch at a steady speed (timings from build.py),
   then the leaves bud; afterwards a slow sway (soft fascination). All off for reduced motion.
   A branch stays hidden until its turn, so no round caps show before it starts drawing. */
.sway { transform-box: view-box; animation: sway var(--sway-duration) ease-in-out infinite alternate; animation-delay: var(--sway-delay, 0ms); }
.branches path { animation: draw var(--dur) linear backwards; animation-delay: calc(var(--delay, 0ms) + var(--t0)); }
.leaves { animation: bud var(--bud-duration) ease-out backwards; animation-delay: calc(var(--delay, 0ms) + var(--t0)); }
@keyframes draw {
  from { visibility: hidden; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
  to   { visibility: visible; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
}
@keyframes bud { from { opacity: 0; } }
@keyframes sway { from { transform: rotate(-0.7deg); } to { transform: rotate(0.7deg); } }

/* A theme switch eases the page from one palette to the next. */
html, body, .sky, .wordmark, .slogan, .contact a, .seedling .branches, .seedling .leaves {
  transition: background-color var(--theme-duration) ease, color var(--theme-duration) ease,
              fill var(--theme-duration) ease, stroke var(--theme-duration) ease;
}
@media (prefers-reduced-motion: reduce) {
  .sway, .branches path, .leaves { animation: none; }
  html, body, .sky, .wordmark, .slogan, .contact a, .branches, .leaves, .seedling .branches, .seedling .leaves { transition: none; }
}

/* Hover/focus label, shown under the ground line */
.tree-label {
  position: absolute; top: calc(100% + var(--space-3)); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 200ms ease;
}
.tree-label.is-visible { opacity: 1; }
.tree-label__line { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); }

/* ---------- Ground ---------- */
.ground {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: var(--space-16);
  width: 100%; max-width: 1600px; margin: 0 auto;
  padding: var(--space-16) var(--space-12) 0;   /* the slogan sits close under the horizon, with room for the tree label */
}
.slogan {
  margin: 0;
  margin-inline-start: var(--hang);
  font-size: var(--text-hero); line-height: 0.95; font-weight: 500; letter-spacing: var(--tracking-hero);
  color: var(--text);
}

.footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3) var(--space-8);
  padding: var(--space-8) 0;   /* bottom-right, balancing the wordmark top-left */
  font-size: var(--text-sm); color: var(--muted);
}
.contact { font-family: var(--font-mono); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); margin: 0; padding: 0; list-style: none; }
.contact a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); text-decoration: none;
}
.contact a:hover { color: var(--text); }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .field--wide { display: none; }
  .field--narrow { display: block; }
}
@media (max-width: 640px) {
  .masthead { padding: var(--space-4); }
  .wordmark { font-size: var(--text-lg); }
  .field-wrap { padding-inline: var(--space-4); }
  .ground { padding: var(--space-16) var(--space-4) 0; }
  .slogan { letter-spacing: var(--tracking-hero-narrow); }
  .footer { justify-content: flex-start; }   /* phones: one left edge for everything */
}
@media (max-height: 760px) and (min-width: 641px) {
  .ground { gap: var(--space-12); }   /* short laptop screens: keep the footer on screen */
}