/* socials — the "come find us" page, in the landing language: left-aligned on
   warm paper, the still-water pond behind, hairlines over cards. The link stack
   is ink-on-surface with hairline borders; exactly one saturated fill (the
   magenta WhatsApp card, the page's primary action) and the system's one soft
   shadow lifts it. The bot's mono voice carries every handle. Shares tokens.css. */
* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground-paper);
  color: var(--text-ink);
  font-family: var(--font-sans);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* the pond, painted by water.js — sits under everything */
#water { position: fixed; inset: 0; z-index: var(--z-base); pointer-events: none; }

/* header — mirrors the landing header.site */
header.site {
  position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-header);
  display: flex; align-items: center;
  padding: clamp(18px, 3vw, 30px) clamp(20px, 5vw, 56px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text-ink); }
.brand .cairn { width: 30px; height: 33px; display: block; }
.brand .wordmark {
  font-family: var(--font-serif); font-size: var(--size-wordmark);
  letter-spacing: var(--tracking-wordmark); line-height: var(--leading-flat);
}

/* content — left-aligned text in a centered column, mirroring the landing's
   beats (margin:0 auto over var(--col)); the centered column keeps the water
   field balanced on both sides instead of exposing a busy empty half */
main.socials {
  position: relative; z-index: var(--z-content);
  min-height: 100svh;
  width: min(560px, 92vw);
  margin: 0 auto;
  padding: clamp(120px, 20vh, 200px) 0 clamp(40px, 8vh, 90px);
  display: flex; flex-direction: column;
}
/* the warm bloom — a soft coral+magenta radial behind the hero, echoing the
   icon's peach glow core; sits above the pond (z:-1 within main) but under text */
.bloom {
  position: absolute; z-index: -1; pointer-events: none;
  left: -22%; right: -22%; top: clamp(60px, 12vh, 150px); height: 46%;
  background:
    radial-gradient(46% 60% at 26% 34%, color-mix(in srgb, var(--coral-fill) 26%, transparent), transparent 72%),
    radial-gradient(48% 56% at 74% 20%, color-mix(in srgb, var(--magenta-fill) 24%, transparent), transparent 72%);
  filter: blur(46px);
  opacity: .9;
}
.eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: var(--size-eyebrow);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--magenta-deep);
}
.rule { height: 1px; border: 0; background: var(--line-default); margin: 0 0 26px; }
h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: clamp(2.2rem, 8vw, 3.6rem);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-ink);
  text-wrap: balance;
}
.lede {
  max-width: 34ch;
  margin: 22px 0 0;
  color: var(--text-body);
  font-size: var(--size-lg);
  line-height: var(--leading-reading);
}

/* the link stack */
.stack {
  margin-top: clamp(28px, 5vh, 44px);
  display: flex; flex-direction: column; gap: 12px;
}
.link {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 18px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--line-default);
  background: color-mix(in srgb, var(--ground-surface) 92%, transparent);
  color: var(--text-ink);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-medium) var(--ease-standard),
              background var(--duration-fast) var(--ease-default);
}
.link:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.link:focus-visible { outline: 2px solid var(--magenta-deep); outline-offset: 3px; }
.chip {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background: var(--ground-surface-2);
  border: 1px solid var(--line-default);
  color: var(--text-ink);
  transition: transform var(--duration-medium) var(--ease-standard);
}
.chip svg { width: 21px; height: 21px; display: block; }
.link:hover .chip { transform: scale(1.07) rotate(-3deg); }
/* the four accent families, each carried once — a nod to the cairn */
.chip.c-green   { background: var(--green-wash);   border-color: color-mix(in srgb, var(--green-fill) 30%, transparent);   color: var(--green-text); }
.chip.c-coral   { background: var(--coral-wash);   border-color: color-mix(in srgb, var(--coral-fill) 30%, transparent);   color: var(--coral-text); }
.chip.c-magenta { background: var(--magenta-wash); border-color: color-mix(in srgb, var(--magenta-fill) 32%, transparent); color: var(--magenta-deep); }
.chip.c-aqua    { background: var(--aqua-wash);    border-color: color-mix(in srgb, var(--aqua-fill) 38%, transparent);    color: var(--aqua-text); }
.link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.name { font-weight: var(--weight-semibold); font-size: var(--size-lg); line-height: var(--leading-label); }
.handle {
  font-family: var(--font-mono); font-size: var(--size-meta);
  line-height: var(--leading-label); color: var(--text-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.go { flex: none; width: 18px; height: 18px; color: var(--text-ink-faint);
  transition: transform var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default); }
.link:hover .go { color: var(--magenta-deep); transform: translate(1px, -1px); }

/* the one saturated fill: the primary WhatsApp card — a diagonal magenta
   gradient (one family, two tones) under a warm magenta glow halo */
.link.primary {
  background: linear-gradient(135deg, var(--magenta-fill), var(--magenta-deep));
  border-color: transparent;
  color: var(--on-magenta);
  box-shadow: var(--shadow-card), 0 22px 50px -16px color-mix(in srgb, var(--magenta-fill) 60%, transparent);
}
.link.primary:hover {
  border-color: transparent; transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: var(--shadow-card), 0 28px 60px -14px color-mix(in srgb, var(--magenta-fill) 70%, transparent);
}
.link.primary .chip {
  background: color-mix(in srgb, var(--on-magenta) 20%, transparent);
  border-color: transparent; color: var(--on-magenta);
}
.link.primary .handle { color: color-mix(in srgb, var(--on-magenta) 80%, transparent); }
.link.primary .go { color: var(--on-magenta); }
.link.primary:hover .go { color: var(--on-magenta); }

/* footnote — mono fine print, mirrors the util pages */
.footnote {
  margin-top: auto;
  padding-top: clamp(40px, 10vh, 80px);
  color: var(--text-ink-faint);
  font-family: var(--font-mono);
  font-size: var(--size-fine);
  letter-spacing: var(--tracking-fine);
  line-height: var(--leading-loose);
}
.footnote a { color: inherit; }

/* motion — restrained: the header block rises, the cards fade in on a stagger.
   fade (not translate) keeps the hover lift free of animation-fill conflicts. */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(12px); animation: rise .6s var(--ease-standard) .05s forwards; }
  .stack .link { opacity: 0; animation: fade .55s var(--ease-out) forwards; }
  .stack .link:nth-child(1) { animation-delay: .16s; }
  .stack .link:nth-child(2) { animation-delay: .24s; }
  .stack .link:nth-child(3) { animation-delay: .32s; }
  .stack .link:nth-child(4) { animation-delay: .40s; }
  .stack .link:nth-child(5) { animation-delay: .48s; }
  .stack .link:nth-child(6) { animation-delay: .56s; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .link, .link:hover, .go, .chip { transition: none; }
  .link:hover, .link:hover .chip { transform: none; }
}