/* TheTinkerCrow.com page styles. Colors and fonts come from tokens.css;
   no hex values here. Sizes in rem so browser and OS text settings apply. */

* { box-sizing: border-box; }
body {
  /* svh, not vh: on iOS 100vh is taller than the visible screen (the DwelLogs
     site hit this first). vh stays as the fallback. */
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; overflow-x: clip;
  background: var(--bg); color: var(--ink);
  font: 1.0625rem/1.65 var(--font-body);
}
a { color: var(--accent); }
:focus-visible { outline: 0.1875rem solid var(--accent); outline-offset: 0.1875rem; border-radius: 0.25rem; }

/* Botanical sprig in the corner. Decorative, fixed, behind the content. */
.sprig {
  position: fixed; top: -1rem; right: -1rem; z-index: 0; pointer-events: none;
  width: min(34vw, 18rem); color: var(--sage); opacity: .7;
}
.sprig svg { display: block; width: 100%; height: auto; }

main, footer { position: relative; z-index: 1; }
main { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: 4rem 1.25rem 2.5rem; }

.wordmark {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 3rem;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--forest);
}
.wordmark img { width: 2.75rem; height: 2.75rem; border-radius: 0.625rem; }

.moons { display: block; width: 8.75rem; height: auto; color: var(--sage); margin: 0 0 1.5rem; }

h1 {
  margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--forest);
}
h1 em { font-style: italic; color: var(--accent); }
.lede { margin: 0 0 2rem; max-width: 34em; font-size: 1.2rem; color: var(--muted); }

.mediums { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: 0.625rem; }
.mediums li {
  padding: 0.375rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font-size: 0.95rem; color: var(--forest);
}
.mediums li.next { border-style: dashed; border-color: var(--accent); color: var(--accent); font-style: italic; }

/* Hand-font note, kept level. A 1.5deg tilt read as a rendering glitch
   rather than a hand-placed note; the font carries the handwritten feel. */
.note {
  margin: 0 0 2.5rem; font-family: var(--font-hand); font-size: 1.75rem; line-height: 1.2;
  color: var(--accent);
}

.soon {
  display: inline-block; padding: 0.5rem 1.25rem; border-radius: 999px;
  background: var(--forest); color: var(--on-forest); font-weight: 600; font-size: 0.95rem;
}

footer { padding: 1.5rem 1.25rem 2rem; text-align: center; font-size: 0.875rem; color: var(--muted); }
footer p { max-width: 36em; margin: 0 auto; }