/* moosefamily.app: the cottage print by the lake (by night in dark mode), the family's name in
   its sky, and the way in. The same art and type as Shoebox and Cabin (art by
   apps/shoebox/art/cottage.py); no script. */

@font-face {
  font-family: "Young Serif";
  src: url("fonts/young-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-next-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --table: #e9ece6; --ink: #1c2a24; --pencil: #b3263e; --on-pencil: #ffffff;
  --sky: #d7e4e2; --sky-ink: #1c2a24; --spruce: #1f3a2f;
  --scene: url("art/cottage-day.svg"); --linen: url("art/linen-day.svg");
  --display: "Young Serif", Georgia, serif;
  --body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --table: #111915; --ink: #e5ebe6; --pencil: #ef6b81; --on-pencil: #2a0d09;
    --sky: #14232a; --sky-ink: #efe6cc; --spruce: #0c1712;
    --scene: url("art/cottage-night.svg"); --linen: url("art/linen-night.svg");
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--table) var(--linen) fixed;
  color: var(--ink);
  font: 400 16px/1.5 var(--body);
}

/* the print: cover + bottom centre keeps the cottage and the moose on a phone */
.scene {
  height: clamp(180px, 18vw, 320px); padding: clamp(18px, 2.4vw, 40px) var(--gutter) 0;
  background: var(--sky) var(--scene) center bottom / cover no-repeat;
  border-bottom: 10px solid var(--spruce);
}
.family {
  margin: 0; font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(34px, 5vw, 64px); line-height: 1; letter-spacing: -0.01em; color: var(--sky-ink);
  text-shadow: 0 0 8px var(--sky), 0 0 18px var(--sky);
}

main { padding: clamp(28px, 4vw, 56px) var(--gutter) 64px; max-width: 760px; }
.btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 22px; border-radius: 8px;
  background: var(--pencil); color: var(--on-pencil); font-weight: 700; text-decoration: none;
}
.btn:hover { filter: brightness(1.06); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }