/* Robbin — robbinsroost link page
   White paper, Robbin's teal (from her Patreon theme), Cormorant Garamond throughout.
   HTML + CSS only; fonts self-hosted in ./fonts (SIL Open Font License). */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic.woff2") format("woff2");
}

:root {
  --paper: #ffffff;
  --ink: #17302f;          /* near-black with a hint of her teal */
  --teal: #0d6e73;         /* Robbin's brand colour; 6.0:1 on white */
  --teal-deep: #0a5257;
  --tint: #e9f2f2;
  --maxw: 480px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Cormorant Garamond", "Cormorant", Garamond, "EB Garamond", Georgia, serif;
  font-weight: 500;
  line-height: 1.45;
}

.page {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px 24px 64px;
}

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

.avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tint);
  /* mounted-print ring: thin teal line with a white gap */
  outline: 1.5px solid var(--teal);
  outline-offset: 6px;
  margin: 8px 0 26px;
}

.handle {
  margin: 0;
  color: var(--teal);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.tagline {
  margin: 14px auto 0;
  max-width: 30ch;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
}

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

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

/* ---- Link buttons ---- */
.link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;            /* >= 44px touch target */
  padding: 12px 18px;
  border: 1.5px solid var(--teal);
  border-radius: 4px;
  background: var(--paper);
  color: var(--teal);
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.link:hover {
  background: var(--teal);
  color: var(--paper);
}

.link:active { background: var(--teal-deep); border-color: var(--teal-deep); }

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

.link-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}

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

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

/* ---- Footer ---- */
.site-footer {
  margin-top: 44px;
  text-align: center;
  font-size: 1rem;
  color: var(--teal);
}

.site-footer p { margin: 0; }

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

/* ---- Narrow screens (down to 320px) ---- */
@media (max-width: 360px) {
  .page { padding: 40px 16px 48px; }
  .handle { font-size: 2.1rem; }
  .tagline { font-size: 1.15rem; }
  .link { gap: 10px; padding: 10px 14px; font-size: 1.2rem; }
}