/* Robbin — robbinsroost link page
   Robbin's blue (from her Patreon theme) as the page background, white cards
   with the writing in the same blue, system sans-serif (Linktree-style).
   HTML + CSS only, no external requests. */

/* Inter (SIL Open Font License, see fonts/LICENSE-Inter.txt), self-hosted.
   Closest open match to Linktree's proprietary "Link Sans". */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Inter-SemiBold.woff2") format("woff2");
}

:root {
  --blue: #0d6e73;         /* Robbin's brand colour; 6.0:1 against white */
  --paper: #ffffff;
  --tint: #e9f2f2;
  --maxw: 480px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  /* Robbin's blue "sky" with a thicket of black twigs rising from the
     bottom edge (seamless repeat-x tile). The tree itself is built by
     .page and .link below; artwork is generated by tools/gen_tree.py. */
  background-color: var(--blue);
  background-image: url("twigs-bottom.svg?v=2");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto min(34vh, 320px);
  color: var(--paper);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.4;
}

.page {
  position: relative;
  isolation: isolate;          /* keeps the tree's z-index:-1 inside the page */
  width: 100%;
  max-width: var(--maxw);
  min-height: 100vh;           /* so the trunk always reaches the ground */
  margin: 0 auto;
  padding: 72px 24px 64px;     /* top: room for the robin above the avatar */
}

/* ---- The tree ----
   One thin, twiggy tree (tree.svg, drawn 480px wide to match the page's
   max width) rises from the bottom of the page behind the content: its
   tangle of branches sits behind the link cards and its top branch reaches
   up beside the avatar, where Robbin the robin perches. It is anchored to
   the top of the page so the robin stays put; the bottom of the trunk is
   cut off by the page edge, where it meets the thicket. */
.page::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("tree.svg?v=2") no-repeat center top / 480px auto;
  pointer-events: none;
}

/* ---- Profile ---- */
.profile {
  text-align: center;
  margin-bottom: 32px;
}

.avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tint);
  margin: 8px 0 18px;
}

.handle {
  margin: 0;
  color: var(--paper);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* ---- Link list ---- */
.links { margin: 0; }

.links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Link cards ---- */
.link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;            /* >= 44px touch target */
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--paper);
  color: var(--blue);
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.link:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.link:active { transform: scale(0.99); }

.link:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}

.link-thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--tint);
}

.link-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.link-label {
  flex: 1 1 auto;
  text-align: center;
}

/* Balance the thumbnail on the left so the label is optically centred */
.link-thumb + .link-label { margin-right: 48px; }

/* ---- Footer ---- */
.site-footer {
  margin-top: 44px;
  text-align: center;
  font-size: 0.9rem;
}

.site-footer p { margin: 0; }

/* ---- Wide screens: let the artwork breathe ---- */
@media (min-width: 900px) {
  body { background-size: auto min(42vh, 440px); }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .link { transition: none; }
  .link:hover, .link:active { transform: none; }
}

/* ---- Narrow screens (down to 320px) ---- */
@media (max-width: 360px) {
  body { background-size: auto min(30vh, 280px); }
  .page { padding: 56px 16px 48px; }
  .page::before { background-position: calc(50% + 6px) top; }
  .handle { font-size: 1.5rem; }
  .link { gap: 10px; padding: 8px 12px; font-size: 1.05rem; }
  .link-thumb { width: 44px; height: 44px; }
  .link-thumb + .link-label { margin-right: 44px; }
}