/* riverArk blog stylesheet.
   Replaces the Tailwind CDN script. No build step, no JavaScript, no flash of
   unstyled content, and the brand colours are the ones sampled from the logo
   rather than approximations.

   It implements exactly the class names the blog pages already use, so the
   markup does not change. Only the <head> block does. */

:root {
  /* Sampled from Claude/brand/logos, not eyeballed. */
  --navy:        #081c3a;   /* icon disc navy */
  --navy-dark:   #04101f;
  --navy-soft:   #0d2447;
  --ink:         #293a4a;   /* wordmark navy */
  --teal:        #48ded8;   /* swoosh highlight */
  --teal-light:  #7eeae5;
  --teal-dark:   #21b3ae;
  --cyan:        #14b9d8;   /* swoosh mid */
  --blue:        #003e7d;   /* swoosh depth */

  --slate-300:   #cbd5e1;
  --slate-400:   #9fb0c3;
  --slate-500:   #7286a0;
  --slate-600:   #566a83;

  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.18);

  --measure:     68ch;
  --radius:      14px;
  --radius-lg:   20px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate-300);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A single hairline of the brand gradient across the top. It is the wave from
   the wordmark reduced to its simplest form, and it is the one thing that says
   riverArk before any content loads. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--cyan) 42%, var(--blue) 100%);
  z-index: 100;
}

img { max-width: 100%; height: auto; display: block; }

/* No underline by default. Prose links get their own underline below, which is
   a border-bottom so it sits clear of descenders. Everything else is a button,
   a nav item or a card, and those should not be underlined. */
a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- layout */

/* These match Tailwind's real values. Getting 4xl wrong made the header span
   much wider than the article and the page read as if the text was off-centre. */
.max-w-4xl { max-width: 56rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-none { max-width: none; }
.mx-auto { margin-left: auto; margin-right: auto; }

.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.py-16 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.p-8 { padding: 2rem; }
.pt-8 { padding-top: 2rem; }
.pb-12 { padding-bottom: 3rem; }

.mt-20 { margin-top: 5rem; }
.mt-16 { margin-top: 4rem; }
.mt-12 { margin-top: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-2 { margin-bottom: .5rem; }
.mx-2 { margin-left: .5rem; margin-right: .5rem; }

.flex { display: flex; }
.block { display: block; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-6 { gap: 1.5rem; }
.gap-4 { gap: 1rem; }
.gap-3 { gap: .75rem; }
.gap-2 { gap: .5rem; }

.h-8 { height: 2rem; }
.w-8 { width: 2rem; }
.h-7 { height: 1.75rem; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.w-full { width: 100%; }

.sticky { position: sticky; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }
.overflow-hidden { overflow: hidden; }
.object-cover { object-fit: cover; }
.scale-110 { transform: scale(1.1); }
.backdrop-blur { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.antialiased { -webkit-font-smoothing: antialiased; }
.transition-colors { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }

@media (min-width: 640px) { .sm\:flex-row { flex-direction: row; } }

/* ------------------------------------------------------------ typography */

.text-sm { font-size: .875rem; }
.text-xl { font-size: 1.2rem; }
.text-2xl { font-size: 1.55rem; }
.text-4xl { font-size: 2.4rem; }
@media (min-width: 1024px) { .lg\:text-5xl { font-size: 3.1rem; } }

.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.leading-tight { line-height: 1.12; letter-spacing: -.022em; }
.leading-relaxed { line-height: 1.7; }

/* ---------------------------------------------------------------- colour */

.bg-navy { background-color: var(--navy); }
.bg-navy-dark { background-color: var(--navy-dark); }
.bg-navy-dark\/80 { background-color: rgba(4,16,31,.82); }
.bg-white\/5 { background-color: rgba(255,255,255,.05); }
.bg-white\/\[0\.02\] { background-color: rgba(255,255,255,.025); }
.bg-teal { background-color: var(--teal); }
.bg-teal\/10 { background-color: rgba(72,222,216,.12); }
.bg-teal\/5 { background-color: rgba(72,222,216,.06); }

.text-white { color: #fff; }
.text-navy { color: var(--navy); }
.text-slate-300 { color: var(--slate-300); }
.text-slate-400 { color: var(--slate-400); }
.text-slate-500 { color: var(--slate-500); }
.text-slate-600 { color: var(--slate-600); }

/* One teal, everywhere. The old build mixed the brand teal with Tailwind's
   default teal-400 and teal-500, so nav links and buttons were different
   greens on the same page. These aliases collapse both onto the brand value. */
.text-teal, .text-teal-400, .text-teal-500 { color: var(--teal); }
.text-teal-light { color: var(--teal-light); }

.border { border: 1px solid var(--line); }
.border-b { border-bottom: 1px solid var(--line); }
.border-t { border-top: 1px solid var(--line); }
.border-white\/10 { border-color: var(--line); }
.border-white\/20 { border-color: var(--line-strong); }
.border-teal\/20 { border-color: rgba(72,222,216,.22); }
.ring-1 { box-shadow: 0 0 0 1px rgba(72,222,216,.3); }
.ring-teal-500\/30 { box-shadow: 0 0 0 1px rgba(72,222,216,.3); }

.rounded-lg { border-radius: 10px; }
.rounded-2xl { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 999px; }

a.hover\:text-teal-400:hover, .hover\:text-teal-400:hover { color: var(--teal); }
.hover\:text-teal-light:hover { color: var(--teal-light); }
.hover\:bg-teal-light:hover { background-color: var(--teal-light); }
.hover\:border-teal:hover { border-color: var(--teal); }
.hover\:border-teal\/40:hover { border-color: rgba(72,222,216,.45); }

/* ----------------------------------------------------------------- parts */

header { border-bottom: 1px solid var(--line); }

/* Post cards on the listing page. */
a.group {
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
a.group:hover {
  background-color: rgba(255,255,255,.045);
  transform: translateY(-2px);
}
.group:hover .group-hover\:text-teal-light { color: var(--teal-light); }

/* The category chip. */
.rounded-full.bg-teal\/10 {
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .72rem;
}

/* Buttons read as buttons. */
a.bg-teal {
  text-decoration: none;
  font-weight: 650;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset;
}

/* ----------------------------------------------------------------- prose */

.prose { max-width: var(--measure); }
.prose.max-w-none { max-width: none; }

.prose-ra > * + * { margin-top: 1.35em; }

.prose-ra p { color: var(--slate-300); }

.prose-ra h2 {
  margin-top: 2.6em;
  margin-bottom: .7em;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.018em;
  color: #fff;
  position: relative;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.prose-ra h2::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 44px; height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--cyan));
}
.prose-ra h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose-ra h2:first-child::after { display: none; }

.prose-ra h3 {
  margin-top: 2em; margin-bottom: .5em;
  font-size: 1.2rem; font-weight: 650; color: #fff;
}

.prose-ra strong { color: #fff; font-weight: 650; }

.prose-ra a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(72,222,216,.4);
  transition: border-color .18s ease, color .18s ease;
}
.prose-ra a:hover { color: var(--teal-light); border-bottom-color: var(--teal); }

.prose-ra ul, .prose-ra ol { padding-left: 1.35em; }
.prose-ra li { margin-top: .5em; }
.prose-ra ul > li::marker { color: var(--teal); }
.prose-ra ol > li::marker { color: var(--slate-500); }

.prose-ra blockquote {
  margin-left: 0; margin-right: 0;
  padding: .2em 0 .2em 1.4em;
  border-left: 2px solid var(--teal);
  color: #e2e8f0;
  font-style: normal;
}

.prose-ra code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em;
  color: var(--teal-light);
  background: rgba(72,222,216,.1);
  padding: .15em .42em;
  border-radius: 5px;
}

.prose-ra pre {
  background: var(--navy-dark);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem;
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.6;
}
.prose-ra pre code { background: none; padding: 0; color: var(--slate-300); font-size: inherit; }

.prose-ra hr { border: 0; border-top: 1px solid var(--line); margin: 3em 0; }

.prose-ra table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.prose-ra th, .prose-ra td { padding: .6rem .8rem; text-align: left; }
.prose-ra th { color: #fff; border-bottom: 1px solid var(--line-strong); font-weight: 650; }
.prose-ra td { border-bottom: 1px solid var(--line); }

.prose-ra img { border-radius: var(--radius); margin: 2em 0; }

.prose-lg { font-size: 1.06rem; }

/* --------------------------------------------------------------- mobile */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .text-4xl { font-size: 1.95rem; }
  .py-16 { padding-top: 2.75rem; padding-bottom: 2.75rem; }
  .p-8 { padding: 1.4rem; }
  .prose-ra h2 { font-size: 1.35rem; margin-top: 2.1em; }
  header nav { gap: 1rem; font-size: .82rem; }
}